/* =============================================================================
   FERROS POCH — Hoja de estilos base
   -----------------------------------------------------------------------------
   Organización del archivo (búscala con Ctrl+F por el número):
     01  Tipografías autoalojadas
     02  Variables (colores, tipografía, medidas)
     03  Reset y estilos base
     04  Tipografía (títulos y texto)
     05  Layout: contenedor, secciones, utilidades
     06  Botones
     07  Trama "blueprint" (plano) sobre navy
     08  Barra superior
     09  Cabecera y navegación
     10  Menú móvil
     11  Selector de idioma
     12  Migas de pan
     13  Pie de página
     14  Botón flotante de WhatsApp
     15  Accesibilidad y movimiento reducido
     16  Escritorio (a partir de 900px) — ampliación mobile-first

   Enfoque mobile-first: todo lo que hay fuera de la sección 16 es la versión
   móvil. La sección 16 solo AÑADE lo que cambia en pantallas grandes.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   01  TIPOGRAFÍAS AUTOALOJADAS
   Anton (licencia SIL OFL, ver /fuentes/LICENCIA-Anton-OFL.txt).
   Solo se usa para H1, titulares de sección y cifras destacadas, en mayúsculas.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* -----------------------------------------------------------------------------
   02  VARIABLES
   Cambiar un color aquí lo cambia en toda la web.
   -------------------------------------------------------------------------- */
:root {
  /* Colores corporativos */
  --verde:        #00693C;   /* verde corporativo (botones, acentos)        */
  --verde-hover:  #007A46;   /* verde un punto más claro para hover          */
  --verde-claro:  #00A35C;   /* verde claro (acentos sobre navy)             */
  --verde-suave:  #E4F2EB;   /* fondo verde muy suave (etiquetas, resaltes)  */
  --navy:         #000E1F;   /* azul marino (títulos, cabeceras oscuras)     */
  --blanco:       #FFFFFF;
  --fondo-alt:    #F1F2F4;   /* fondo alternativo y fondo fotos de producto  */
  --linea:        #E2E7EC;   /* bordes y separadores                          */
  --texto:        #26303C;   /* texto principal                               */
  --texto-suave:  #67737F;   /* texto secundario                              */

  /* Colores auxiliares sobre fondo navy (pie, cabeceras de página) */
  --navy-texto:        #8DA0B8;
  --navy-texto-suave:  #5F7288;
  --navy-linea:        rgba(255, 255, 255, 0.08);

  /* Etiquetas del catálogo */
  --etiqueta-gris:  #5B6B7C;   /* familia (sobre la foto)   */
  --etiqueta-azul:  #1F5FA8;   /* acabados                   */

  /* WhatsApp */
  --whatsapp: #25D366;

  /* Tipografía */
  --fuente-titulos: "Anton", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-texto:   "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Medidas */
  --ancho-max:      1220px;
  --margen-lateral: 20px;
  --radio:          10px;
  --radio-peq:      6px;
  --alto-cabecera:  64px;

  /* Sombras y animación */
  --sombra-sm: 0 1px 2px rgba(0, 14, 31, 0.05), 0 4px 12px rgba(0, 14, 31, 0.05);
  --sombra-md: 0 2px 4px rgba(0, 14, 31, 0.06), 0 12px 32px rgba(0, 14, 31, 0.10);
  --suave: cubic-bezier(0.22, 0.8, 0.3, 1);
}


/* -----------------------------------------------------------------------------
   03  RESET Y ESTILOS BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Al saltar a un ancla, dejar hueco para la cabecera fija */
[id] {
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}


/* -----------------------------------------------------------------------------
   04  TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  color: var(--navy);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Anton, mayúsculas: H1 y titulares de sección (clase .titular) */
h1,
.titular {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
}

h1 { font-size: clamp(36px, 9vw, 60px); }
.titular { font-size: clamp(28px, 6vw, 44px); }
h2 { font-size: clamp(22px, 4.5vw, 30px); }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

/* Cifra destacada (ej. "+8.000 m²") */
.cifra {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1;
  color: var(--navy);
  letter-spacing: 0.01em;
}

/* Etiqueta pequeña sobre un título ("eyebrow") */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--verde);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.antetitulo::before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
}
/* Antetítulo sobre fondo navy */
.antetitulo--claro {
  color: var(--verde-claro);
}

p {
  margin-bottom: 1em;
}
p:last-child {
  margin-bottom: 0;
}

.texto-suave { color: var(--texto-suave); }

/* Enlaces dentro de párrafos y listas del contenido (no tarjetas ni botones) */
main p a:not(.btn),
main li a:not(.btn) {
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 3px;
}
main p a:not(.btn):hover,
main li a:not(.btn):hover {
  color: var(--verde-hover);
}


/* -----------------------------------------------------------------------------
   05  LAYOUT: CONTENEDOR, SECCIONES, UTILIDADES
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

.seccion {
  padding: 56px 0;
}
.seccion--alt {
  background: var(--fondo-alt);
}

/* Oculta visualmente pero lo deja disponible para lectores de pantalla */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Ir al contenido": invisible hasta que se navega con teclado */
.saltar-contenido {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--verde);
  color: var(--blanco);
  font-weight: 700;
  border-radius: var(--radio-peq);
}
.saltar-contenido:focus {
  top: 12px;
}


/* -----------------------------------------------------------------------------
   06  BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radio-peq);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave),
    background 0.2s, border-color 0.2s, color 0.2s;
}
.btn .flecha {
  transition: transform 0.25s var(--suave);
}
.btn:hover .flecha {
  transform: translateX(4px);
}

/* Verde sólido: acción principal */
.btn--verde {
  background: var(--verde);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(0, 105, 60, 0.35);
}
.btn--verde:hover {
  background: var(--verde-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 105, 60, 0.4);
}

/* Solo borde, para fondos oscuros (pie, cabeceras navy) */
.btn--linea {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.28);
}
.btn--linea:hover {
  border-color: var(--blanco);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* Solo borde, para fondos claros */
.btn--linea-oscura {
  background: transparent;
  color: var(--navy);
  border-color: var(--linea);
}
.btn--linea-oscura:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.btn--bloque {
  width: 100%;
}


/* -----------------------------------------------------------------------------
   07  TRAMA "BLUEPRINT" (PLANO) SOBRE NAVY
   Se usa en cabeceras de página y bloques destacados.
   -------------------------------------------------------------------------- */
.plano {
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(0, 105, 60, 0.14), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  color: var(--blanco);
}
.plano h1,
.plano h2,
.plano h3 {
  color: var(--blanco);
}


/* -----------------------------------------------------------------------------
   08  BARRA SUPERIOR (teléfono, email, horario)
   -------------------------------------------------------------------------- */
.barra-superior {
  background: var(--navy);
  color: var(--navy-texto);
  font-size: 12px;
  border-bottom: 1px solid var(--navy-linea);
}
.barra-superior .contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
}
.barra-superior b {
  color: var(--blanco);
  font-weight: 700;
}
.barra-superior .punto {
  color: var(--verde-claro);
  margin: 0 6px;
}
.barra-superior a:hover {
  color: var(--blanco);
}
/* En móvil solo mostramos teléfono y horario, el email va en el pie */
.barra-superior__email {
  display: none;
}


/* -----------------------------------------------------------------------------
   09  CABECERA Y NAVEGACIÓN
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__principal {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--alto-cabecera);
}

.cabecera__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cabecera__logo img {
  height: 32px;
  width: auto;
}

/* Navegación de escritorio (oculta en móvil) */
.nav-principal {
  display: none;
}

/* Botón "Pedir presupuesto" de la cabecera (solo escritorio) */
.cabecera__cta {
  display: none;
}

/* Botón hamburguesa */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: var(--radio-peq);
}
.hamburguesa span {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.3s var(--suave), opacity 0.2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburguesa[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburguesa[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}


/* -----------------------------------------------------------------------------
   10  MENÚ MÓVIL (se despliega bajo la cabecera)
   -------------------------------------------------------------------------- */
.menu-movil {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 18px 34px rgba(0, 14, 31, 0.12);
  max-height: calc(100vh - var(--alto-cabecera));
  overflow-y: auto;
}
.menu-movil[hidden] {
  display: none;
}
.menu-movil nav a {
  display: block;
  padding: 15px var(--margen-lateral);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--fondo-alt);
}
.menu-movil nav a[aria-current="page"] {
  color: var(--verde);
  box-shadow: inset 4px 0 0 var(--verde);
}

/* Idiomas dentro del menú móvil: fila de banderas */
.menu-movil__idiomas {
  display: flex;
  gap: 8px;
  padding: 16px var(--margen-lateral);
  border-bottom: 1px solid var(--fondo-alt);
}
.menu-movil__idiomas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-peq);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--fondo-alt);
}
.menu-movil__idiomas a[aria-current="true"] {
  border-color: var(--verde);
  background: var(--verde-suave);
  color: var(--verde);
}
.menu-movil .btn {
  margin: 14px var(--margen-lateral) 18px;
}

/* Bandera (compartida por selector de escritorio y menú móvil) */
.bandera {
  width: 21px;
  height: 15px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}


/* -----------------------------------------------------------------------------
   11  SELECTOR DE IDIOMA (desplegable, solo escritorio)
   -------------------------------------------------------------------------- */
.idioma {
  position: relative;
  display: none;
}
.idioma__boton {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: border-color 0.2s;
}
.idioma__boton:hover,
.idioma__boton[aria-expanded="true"] {
  border-color: var(--verde);
}
.idioma__boton .flecha-abajo {
  font-size: 9px;
  color: var(--texto-suave);
}

.idioma__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 14, 31, 0.22);
  overflow: hidden;
  z-index: 80;
}
.idioma__menu[hidden] {
  display: none;
}
.idioma__menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  border-bottom: 1px solid var(--fondo-alt);
  transition: background 0.15s;
}
.idioma__menu a:last-child {
  border-bottom: none;
}
.idioma__menu a:hover {
  background: var(--fondo-alt);
}
.idioma__menu .codigo {
  min-width: 32px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--fondo-alt);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.idioma__menu a[aria-current="true"] {
  color: var(--verde);
  font-weight: 700;
}
.idioma__menu a[aria-current="true"] .codigo {
  background: var(--verde-suave);
  color: var(--verde);
}
.idioma__menu a[aria-current="true"]::after {
  content: "✓";
  margin-left: auto;
  color: var(--verde);
  font-weight: 700;
}


/* -----------------------------------------------------------------------------
   12  MIGAS DE PAN
   -------------------------------------------------------------------------- */
.migas {
  padding: 14px 0;
  font-size: 13px;
  color: var(--texto-suave);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.migas li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--linea);
}
.migas a:hover {
  color: var(--verde);
}
.migas [aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
}
/* Migas sobre fondo navy (cabeceras de página con trama .plano) */
.plano .migas {
  color: var(--navy-texto);
}
.plano .migas li + li::before {
  color: var(--navy-texto-suave);
}
.plano .migas [aria-current="page"] {
  color: var(--blanco);
}


/* -----------------------------------------------------------------------------
   13  PIE DE PÁGINA
   -------------------------------------------------------------------------- */
.pie {
  background: var(--navy);
  color: var(--navy-texto);
  font-size: 14.5px;
}

/* Franja superior: llamada a pedir presupuesto */
.pie__cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--navy-linea);
}
.pie__cta h2 {
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(26px, 6vw, 34px);
  max-width: 22ch;
}
.pie__cta p {
  color: var(--navy-texto);
  margin-top: 8px;
}
.pie__cta-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjeta clara "Trabaja con nosotros" */
.pie__empleo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 40px 0 8px;
  padding: 24px;
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: 16px;
}
.pie__empleo-texto {
  color: var(--navy);
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.1;
}
.pie__empleo-texto small {
  display: block;
  margin-top: 6px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* Columnas de enlaces */
.pie__columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 32px;
}
.pie__logo {
  height: 34px;
  width: auto;
  margin-bottom: 18px;
}
.pie__titulo {
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pie li {
  margin-bottom: 10px;
}
.pie a {
  transition: color 0.2s;
}
.pie a:hover {
  color: var(--blanco);
}
.pie .num {
  color: var(--blanco);
  font-weight: 700;
  font-size: 17px;
}
.pie__horario {
  margin-top: 16px;
  color: var(--navy-texto-suave);
}

/* Línea final: copyright y legales */
.pie__final {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid var(--navy-linea);
  font-size: 13px;
  color: var(--navy-texto-suave);
}
.pie__final ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}


/* -----------------------------------------------------------------------------
   14  BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s var(--suave);
}
.whatsapp:hover {
  transform: scale(1.08);
}


/* -----------------------------------------------------------------------------
   15  ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* Tablets y móviles apaisados: enlaces del pie de dos en dos */
@media (min-width: 560px) {
  .pie__columnas {
    grid-template-columns: 1fr 1fr;
  }
  .pie__columnas > div:first-child {
    grid-column: 1 / -1;
  }
}


/* =============================================================================
   16  ESCRITORIO (a partir de 900 px)
   Aquí solo va lo que cambia al ampliar la pantalla.
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --margen-lateral: 28px;
    --alto-cabecera: 82px;
  }

  .seccion {
    padding: 80px 0;
  }

  /* Barra superior en una línea: contacto a la izquierda, horario a la derecha */
  .barra-superior {
    font-size: 13px;
  }
  .barra-superior .contenedor {
    flex-direction: row;
    justify-content: space-between;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
  }
  .barra-superior__email {
    display: inline;
  }

  /* Cabecera: logo · menú · idioma · botón */
  .cabecera__principal {
    gap: 30px;
  }
  .cabecera__logo img {
    height: 40px;
  }

  .nav-principal {
    display: flex;
    gap: 2px;
    margin-left: auto;
  }
  .nav-principal a {
    padding: 10px 13px;
    border-radius: 7px;
    color: #3A4552;
    font-size: 14.5px;
    font-weight: 700;
    transition: color 0.2s, background 0.2s;
  }
  .nav-principal a:hover {
    color: var(--navy);
    background: var(--fondo-alt);
  }
  .nav-principal a[aria-current="page"] {
    color: var(--navy);
  }
  .nav-principal a[aria-current="page"] span {
    box-shadow: inset 0 -2px 0 var(--verde);
    padding-bottom: 3px;
  }

  .idioma {
    display: block;
  }

  .cabecera__cta {
    display: inline-flex;
    padding: 13px 22px;
    font-size: 14.5px;
  }

  .hamburguesa,
  .menu-movil {
    display: none !important;
  }

  /* Pie */
  .pie__cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  .pie__cta-botones {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px;
  }
  .pie__empleo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 52px;
    padding: 26px 32px;
  }
  .pie__columnas {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .pie__columnas > div:first-child {
    grid-column: auto;
    padding-top: 44px;
    padding-bottom: 36px;
  }
  .pie__final {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .whatsapp {
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
  }
}

/* Solo en pantallas muy anchas, el menú respira un poco más */
@media (min-width: 1100px) {
  .nav-principal a {
    padding: 10px 15px;
  }
}


/* =============================================================================
   17  PORTADA (home)
   Reproduce el diseño del mockup. Mobile-first: reglas base para móvil y
   ampliaciones al final de la sección.
   ========================================================================== */

/* ---------- Hero: foto del almacén con velo navy ------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--blanco);
  background: var(--navy);
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(0, 14, 31, 0.96) 22%, rgba(0, 14, 31, 0.78) 48%, rgba(0, 14, 31, 0.35) 78%, rgba(0, 14, 31, 0.25));
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 14, 31, 0.55), transparent);
}
.hero .contenedor {
  position: relative;
  z-index: 2;
  padding-top: 44px;
  padding-bottom: 40px;
}
.hero__zona {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D3DDE8;
}
.hero__zona i {
  font-style: normal;
  font-size: 7px;
  color: var(--verde-claro);
  align-self: center;
}
.hero h1 {
  color: var(--blanco);
  font-size: clamp(40px, 10.5vw, 92px);
  margin-bottom: 18px;
}
.hero h1 .resaltado {
  color: var(--verde-claro);
}
.hero__texto {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: #DDE5EE;
  margin-bottom: 26px;
}
.hero__texto b {
  color: var(--blanco);
}
.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__acciones .btn {
  width: 100%;
}

/* Buscador de material */
.buscador {
  display: flex;
  height: 52px;
  border-radius: var(--radio-peq);
  background: var(--blanco);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.buscador input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--navy);
  font-size: 15px;
}
.buscador input::placeholder {
  color: var(--texto-suave);
}
.buscador input:focus {
  outline: none;
}
.buscador:focus-within {
  box-shadow: 0 0 0 3px var(--verde-claro), 0 10px 30px rgba(0, 0, 0, 0.3);
}
.buscador button {
  width: 52px;
  flex-shrink: 0;
  background: var(--verde);
  color: var(--blanco);
  transition: background 0.2s;
}
.buscador button:hover {
  background: var(--verde-hover);
}

/* Panel flotante de cifras rápidas (3 columnas siempre) */
.hero__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
  background: rgba(0, 10, 24, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}
.hero__cifra {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px 6px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.hero__cifra:first-child {
  border-left: none;
}
.hero__cifra span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #B9C6D6;
}
.hero__cifra b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--blanco);
}

/* ---------- Cabecera de sección (título + enlace a la derecha) ------------ */
.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 28px;
}
.seccion__cabecera .titular .resaltado {
  color: var(--verde);
}
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--verde);
  white-space: nowrap;
}
.enlace-flecha .flecha {
  transition: transform 0.25s var(--suave);
}
.enlace-flecha:hover .flecha {
  transform: translateX(4px);
}

/* ---------- Familias: rejilla "bento" ------------------------------------- */
.familias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 150px;
  gap: 12px;
}
.familia {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy);
}
.familia--grande {
  grid-column: span 2;
}
.familia__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--suave);
}
.familia:hover .familia__foto {
  transform: scale(1.05);
}
.familia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(8deg, rgba(0, 10, 24, 0.86) 8%, rgba(0, 10, 24, 0.28) 46%, rgba(0, 10, 24, 0.08));
}
/* Familia sin foto: fondo navy con trama de plano e icono */
.familia--plano {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.familia--plano::before {
  background: linear-gradient(8deg, rgba(0, 10, 24, 0.6) 8%, transparent 60%);
}
.familia__icono {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 163, 92, 0.16);
  color: var(--verde-claro);
}
.familia__cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}
.familia h3 {
  color: var(--blanco);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.familia--grande h3 {
  font-size: 20px;
}
/* Descripción: solo en escritorio, al pasar el ratón */
.familia p {
  display: none;
  color: #C9D4E0;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 40ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--suave), transform 0.35s var(--suave);
}
.familia__flecha {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--blanco);
  font-size: 16px;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: all 0.35s var(--suave);
}
.familia:hover .familia__flecha,
.familia:focus-visible .familia__flecha {
  opacity: 1;
  transform: none;
  background: var(--verde);
  border-color: var(--verde);
}
.familias__pie {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.btn--suave {
  background: var(--verde-suave);
  color: var(--verde);
  padding: 12px 22px;
  font-size: 14px;
  box-shadow: none;
}
.btn--suave:hover {
  background: var(--verde);
  color: var(--blanco);
}

/* ---------- Servicios: tarjeta con etiqueta flotante ---------------------- */
.servicios-inicio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.servicio-inicio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: transform 0.35s var(--suave), box-shadow 0.35s var(--suave), outline-color 0.3s;
}
.servicio-inicio:hover {
  outline-color: var(--verde);
}
.servicio-inicio__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 70px;
  border-radius: 10px;
  background: var(--verde-suave);
  color: var(--verde);
}
.servicio-inicio__etiqueta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 10, 24, 0.25);
  transition: transform 0.3s var(--suave);
}
.servicio-inicio:hover .servicio-inicio__etiqueta {
  transform: translateY(-4px);
}
.servicio-inicio h3 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.015em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--navy);
}
.servicio-inicio__ir {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  font-size: 15px;
  transition: transform 0.3s var(--suave);
}
.servicio-inicio:hover .servicio-inicio__ir {
  transform: rotate(-45deg);
}
.etiqueta-nuevo {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 99px;
  background: #D7261E;
  color: var(--blanco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Ferros Poch en cifras ------------------------------------------ */
.cifras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 44px;
}
.cifras > div {
  padding: 18px 0 32px;
  border-top: 2px solid var(--navy);
  transition: border-color 0.3s;
}
.cifras > div:hover {
  border-top-color: var(--verde);
}
.cifras .cifra {
  display: block;
  font-size: clamp(36px, 8vw, 54px);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.cifras > div:hover .cifra {
  color: var(--verde);
}
.cifras span:not(.cifra) {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/* ---------- Bloque prontuario (tarjeta blanca con marca de agua) ----------- */
.prontuario-inicio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 28px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}
.prontuario-inicio::before {
  content: "kg/m";
  position: absolute;
  right: -30px;
  bottom: -60px;
  z-index: 0;
  font-size: 200px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--fondo-alt);
  pointer-events: none;
}
.prontuario-inicio > * {
  position: relative;
  z-index: 1;
}
.prontuario-inicio .titular {
  font-size: clamp(28px, 6vw, 42px);
  margin: 6px 0 14px;
}
.prontuario-inicio .titular .resaltado {
  color: var(--verde);
}
.prontuario-inicio p {
  color: var(--texto-suave);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
}
.prontuario-inicio code {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--verde);
  background: var(--verde-suave);
  white-space: nowrap;
}
.prontuario-inicio .btn {
  align-self: flex-start;
}

/* ---------- Banda "trabaja con nosotros" (navy con foto) ------------------- */
.empleo-inicio {
  position: relative;
  padding: 40px 26px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--navy);
  color: var(--blanco);
}
.empleo-inicio__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.empleo-inicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 10, 24, 0.92) 30%, rgba(0, 10, 24, 0.55) 100%);
}
.empleo-inicio__texto {
  position: relative;
  z-index: 2;
  max-width: 600px;
}
.empleo-inicio__etiqueta {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.empleo-inicio h2 {
  color: var(--blanco);
  font-size: clamp(28px, 6vw, 44px);
  margin-bottom: 14px;
}
.empleo-inicio h2 em {
  font-style: normal;
  color: var(--verde-claro);
}
.empleo-inicio p {
  color: #C7D2DE;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 26px;
}

/* ---------- Ampliaciones ---------------------------------------------------- */
@media (min-width: 600px) {
  .hero__acciones {
    flex-direction: row;
    align-items: stretch;
  }
  .hero__acciones .btn {
    width: auto;
    flex-shrink: 0;
  }
  .buscador {
    flex: 1;
    min-width: 0;
  }
  .familias {
    grid-auto-rows: 150px;
  }
  .familia--grande {
    grid-row: span 2;
  }
  .familia--grande h3 {
    font-size: 26px;
  }
  .servicios-inicio {
    grid-template-columns: repeat(2, 1fr);
  }
  .cifras {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .hero .contenedor {
    padding-top: 60px;
    padding-bottom: 54px;
  }
  .hero__texto {
    font-size: 17.5px;
    max-width: 780px;
  }
  /* Panel de cifras a tamaño completo */
  .hero__cifras {
    margin-top: 44px;
    padding: 24px 8px;
    background: rgba(0, 10, 24, 0.72);
    gap: 0;
  }
  .hero__cifra {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 7px;
    padding: 0 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .hero__cifra span {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    color: #D3DDE8;
  }
  .hero__cifra b {
    font-size: clamp(25px, 2.4vw, 34px);
  }

  .seccion__cabecera {
    margin-bottom: 40px;
  }

  .familias {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 172px;
    gap: 18px;
  }
  .familia__cuerpo {
    padding: 20px 22px;
  }
  .familia h3 {
    font-size: 19px;
  }
  .familia p {
    display: block;
  }
  .familia:hover p,
  .familia:focus-visible p {
    opacity: 1;
    transform: none;
  }

  .servicios-inicio {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .servicio-inicio {
    height: 290px;
  }

  .cifras {
    grid-template-columns: repeat(3, 1fr);
  }
  .cifras > div {
    padding-bottom: 36px;
  }

  .prontuario-inicio {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    padding: 52px 56px;
  }
  .prontuario-inicio .btn {
    align-self: center;
  }

  .empleo-inicio {
    padding: 60px 56px;
  }
}


/* =============================================================================
   18  CATÁLOGO: cabecera de página, tarjetas de producto, familia y ficha
   ========================================================================== */

/* ---------- Cabecera de página interior (navy con trama de plano) --------- */
.cabecera-pagina {
  padding: 40px 0 36px;
}
.cabecera-pagina--compacta {
  padding: 30px 0 28px;
}
.cabecera-pagina .migas {
  padding: 0 0 14px;
}
.cabecera-pagina .migas ol {
  padding: 0;
}
.cabecera-pagina h1 {
  font-size: clamp(30px, 6vw, 42px);
}
.cabecera-pagina--compacta h1 {
  font-size: clamp(26px, 5vw, 36px);
}
.cabecera-pagina p {
  color: #A7B6C8;
  margin-top: 10px;
  font-size: 16px;
  max-width: 70ch;
}

/* ---------- Buscador y filtros del catálogo -------------------------------- */
.catalogo-buscador {
  display: flex;
  height: 50px;
  margin-top: 26px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-peq);
  background: var(--blanco);
  overflow: hidden;
}
.catalogo-buscador input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--navy);
}
.catalogo-buscador input:focus {
  outline: none;
}
.catalogo-buscador:focus-within {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.catalogo-buscador button {
  width: 50px;
  background: var(--verde);
  color: var(--blanco);
}
.filtro-familias {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 18px 0 8px;
}
.chip-familia {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--blanco);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.25s var(--suave);
}
.chip-familia[data-familia="todos"] {
  width: 100%;
  text-align: center;
}
.chip-familia:hover {
  border-color: var(--verde);
  color: var(--verde);
  transform: translateY(-1px);
}
.chip-familia--activo,
.chip-familia--activo:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
  box-shadow: 0 4px 14px rgba(0, 105, 60, 0.3);
}
.catalogo-contador {
  padding: 12px 0 6px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* ---------- Rejilla y tarjeta de producto ---------------------------------- */
.rejilla-productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 10px 0 56px;
}
.seccion .rejilla-productos {
  padding: 0;
}
.tarjeta-producto {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.3s var(--suave), box-shadow 0.3s var(--suave);
}
.tarjeta-producto:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-md);
}
.tarjeta-producto[hidden] {
  display: none;
}
.tarjeta-producto__foto {
  position: relative;
  display: block;
  background: var(--fondo-alt);
  overflow: hidden;
}
.tarjeta-producto__foto img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  transition: transform 0.4s var(--suave);
}
.tarjeta-producto:hover .tarjeta-producto__foto img {
  transform: scale(1.05);
}
.tarjeta-producto__sinfoto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 185px;
  font-family: var(--fuente-titulos);
  font-size: 26px;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 18px 20px 20px;
}
.tarjeta-producto h3 {
  font-size: 17px;
}
.tarjeta-producto h3 a:hover {
  color: var(--verde);
}
.tarjeta-producto p {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.tarjeta-producto .enlace-flecha {
  font-size: 14px;
}

/* Etiquetas: familia (gris sobre la foto), calidad (verde), acabado (azul) */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.etiqueta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.etiqueta--familia {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  background: #EEF1F4;
  color: #4A5560;
  border: 1px solid #DDE3E9;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.etiqueta--calidad {
  background: var(--verde-suave);
  color: var(--verde);
}
.etiqueta--acabado {
  background: #E6EEF9;
  color: var(--etiqueta-azul);
}
.catalogo-vacio {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--texto-suave);
}
.catalogo-vacio[hidden] {
  display: none;
}
.catalogo-vacio b {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--navy);
}

/* ---------- Página de familia (texto breve sobre la rejilla filtrada) ------ */
.familia-texto {
  max-width: 78ch;
  padding-top: 28px;
}
.familia-texto p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
}
.lista-servicios {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lista-servicios li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 13px 15px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  transition: transform 0.28s var(--suave), box-shadow 0.28s var(--suave), border-color 0.28s;
}
.lista-servicios li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: 11px;
  transition: background 0.28s, color 0.28s;
}
.lista-servicios li:hover {
  transform: translateX(6px);
  border-color: var(--verde);
  box-shadow: 0 6px 18px rgba(0, 14, 31, 0.08);
}
.lista-servicios li:hover::before {
  background: var(--verde);
  color: var(--blanco);
}
main .lista-servicios li a {
  color: inherit;
  text-decoration: none;
}
main .lista-servicios li a:hover {
  color: var(--verde);
}
.lista-servicios .enlace-suave {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--verde);
}

/* ---------- Ficha de producto ---------------------------------------------- */
.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px var(--margen-lateral) 8px;
}
.ficha-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
  background: #F3F4F6; /* mismo gris que el fondo de las fotos de producto */
}
.ficha-foto img {
  width: 100%;
  height: auto;
}
.ficha-foto__norma {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ficha-foto__sinfoto {
  padding: 80px 20px;
  font-family: var(--fuente-titulos);
  font-size: 32px;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ficha-info__titulo {
  font-size: 28px;
  letter-spacing: -0.03em;
}
.ficha-info__norma {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--fondo-alt);
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ficha-info__desc {
  margin: 12px 0 6px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texto-suave);
}
.ficha-info__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.grupo-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.grupo-etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.grupo-etiqueta span {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.chip {
  padding: 9px 16px;
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.2s var(--suave);
}
.chip:hover {
  border-color: var(--verde);
}
.chip--activo,
.chip--activo:hover {
  border-color: var(--verde);
  color: var(--verde);
  background: var(--verde-suave);
}

/* ---------- Matriz de medidas ---------------------------------------------- */
.ficha-medidas {
  padding-bottom: 16px;
}
.tarjeta-tabla {
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  background: var(--blanco);
}
.matriz-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 16px;
  border-bottom: 1px solid var(--linea);
}
.matriz-titulo > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.matriz-titulo .grupo-etiqueta--tabla {
  margin: 14px 0 10px;
  font-size: 11px;
}
.matriz-titulo .chips .chip {
  padding: 7px 13px;
  font-size: 12.5px;
}
.grupo-etiqueta__mini {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.matriz-titulo__valor {
  font-family: var(--fuente-titulos);
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--navy);
}
.matriz-titulo__valor em {
  font-style: normal;
  color: var(--verde);
}
.matriz-bloque[hidden] {
  display: none;
}
.matriz-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 12px 18px;
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
  font-weight: 700;
}
.matriz-leyenda span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.matriz-leyenda small {
  margin-left: auto;
  font-weight: 400;
  color: var(--texto-suave);
}
.matriz-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.matriz-scroll--alta {
  max-height: 430px;
  overflow-y: auto;
}
.matriz-scroll--alta thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
table.matriz {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
table.matriz thead th {
  padding: 9px 5px;
  background: var(--navy);
  color: var(--blanco);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
}
table.matriz thead th.fila {
  text-align: left;
  padding-left: 12px;
}
table.matriz td {
  padding: 6px 5px;
  text-align: center;
  border-bottom: 1px solid var(--fondo-alt);
}
table.matriz tbody th.fila {
  position: sticky;
  left: 0;
  padding: 6px 8px 6px 12px;
  text-align: left;
  background: var(--blanco);
  border-bottom: 1px solid var(--fondo-alt);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.matriz tbody tr:hover td,
table.matriz tbody tr:hover th.fila {
  background: var(--verde-suave);
}
.punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.punto--si {
  background: var(--verde);
}
.punto--pedido {
  background: none;
  border: 1.5px solid #B9C2CC;
}
.matriz-aviso {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 18px;
  background: #FFFBEE;
  border-top: 1px solid #F0E4BE;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6B5A20;
}
.matriz-aviso svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.matriz-aviso a {
  color: inherit;
  font-weight: 700;
}
.a-medida {
  padding: 32px 24px;
  text-align: center;
}
.a-medida b {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  color: var(--navy);
}
.a-medida p {
  max-width: 50ch;
  margin: 0 auto 20px;
  color: var(--texto-suave);
}
.ficha-relacionados {
  padding-top: 8px;
  padding-bottom: 64px;
}

/* ---------- Ampliaciones ---------------------------------------------------- */
@media (min-width: 600px) {
  .rejilla-productos {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .chip-familia {
    padding: 10px 19px;
    font-size: 13.5px;
  }
  .chip-familia[data-familia="todos"] {
    width: auto;
  }
  .filtro-familias {
    gap: 9px;
    padding: 28px 0 8px;
  }
  table.matriz {
    font-size: 13.5px;
  }
  table.matriz thead th {
    padding: 11px 8px;
    font-size: 12.5px;
  }
  table.matriz thead th.fila,
  table.matriz tbody th.fila {
    padding-left: 18px;
  }
  table.matriz td {
    padding: 7px 8px;
  }
  .punto {
    width: 13px;
    height: 13px;
  }
  .punto--pedido {
    border-width: 2px;
  }
}

@media (min-width: 900px) {
  .cabecera-pagina {
    padding: 60px 0 54px;
  }
  .cabecera-pagina--compacta {
    padding: 44px 0 40px;
  }
  .rejilla-productos {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    padding: 14px 0 72px;
  }
  .ficha {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 52px;
    padding-top: 54px;
    padding-bottom: 20px;
  }
  .ficha-info__titulo {
    font-size: 32px;
  }
}


/* =============================================================================
   19  SERVICIOS: índice (acordeón) y ficha de servicio
   ========================================================================== */

/* ---------- Cabecera de página con foto ------------------------------------ */
.cabecera-pagina--foto {
  position: relative;
  overflow: hidden;
  padding: 56px 0 50px;
}
.cabecera-pagina--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cabecera-pagina--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0, 14, 31, 0.94) 30%, rgba(0, 14, 31, 0.62));
}
.cabecera-pagina--foto .contenedor {
  position: relative;
  z-index: 2;
}
.cabecera-pagina--foto p b {
  color: var(--blanco);
}

/* ---------- Etiquetas de rapidez ------------------------------------------- */
.rapidez {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rapidez::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.rapidez--inmediato {
  background: var(--verde);
  color: var(--blanco);
}
.rapidez--24h {
  background: var(--verde-suave);
  color: var(--verde);
}
.rapidez--plazo {
  background: #E6EEF9;
  color: var(--etiqueta-azul);
}

/* ---------- Acordeón del índice --------------------------------------------- */
.acordeon {
  margin: 28px 0 72px;
}
.acordeon details {
  border-bottom: 1px solid var(--linea);
}
.acordeon summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 10px;
  cursor: pointer;
  list-style: none;
}
.acordeon summary::-webkit-details-marker {
  display: none;
}
.acordeon summary .num {
  flex-shrink: 0;
  width: 24px;
  font-family: var(--fuente-titulos);
  font-size: 14px;
  color: var(--texto-suave);
}
.acordeon summary h2 {
  flex: 1;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(20px, 4vw, 33px);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.acordeon summary:hover h2,
.acordeon details[open] summary h2 {
  color: var(--verde);
}
.acordeon summary .rapidez {
  display: none;
}
.acordeon .ir {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--linea);
  border-radius: 50%;
  color: var(--navy);
  transition: all 0.3s var(--suave);
}
.acordeon details[open] .ir {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
  transform: rotate(90deg);
}
.acordeon__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 10px 30px;
}
.acordeon__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
  color: var(--verde-claro);
}
.acordeon__foto svg {
  width: 64px;
  height: 64px;
}
.acordeon__cuerpo p {
  max-width: 56ch;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-suave);
}
.acordeon__cuerpo .rapidez {
  margin-bottom: 14px;
}
.chips-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}
.chip-spec {
  padding: 8px 15px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--fondo-alt);
  font-size: 13px;
  color: var(--texto);
}
.chip-spec b {
  color: var(--navy);
}
.acordeon__acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acordeon__acciones .btn {
  width: 100%;
}
main .acordeon__acciones .enlace-flecha {
  justify-content: center;
}

/* ---------- Ficha de servicio: cabecera blanca ------------------------------ */
.servicio-cabecera {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px var(--margen-lateral) 6px;
}
.servicio-cabecera .migas {
  padding: 0 0 8px;
}
.servicio-cabecera .migas ol {
  padding: 0;
}
.servicio-cabecera .migas a {
  color: var(--texto-suave);
}
.servicio-cabecera .migas li[aria-current] {
  color: var(--navy);
}
.servicio-cabecera .migas li + li::before {
  color: var(--texto-suave);
}
.servicio-cabecera h1 {
  margin: 12px 0 8px;
  font-size: clamp(32px, 6vw, 54px);
  color: var(--navy);
}
.servicio-cabecera__sub {
  font-size: 15.5px;
  color: var(--texto-suave);
  max-width: 62ch;
}
.servicio-cabecera__etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.servicio-cabecera__nota {
  font-size: 13px;
  color: var(--texto-suave);
}
.servicio-cabecera__nota a {
  font-weight: 700;
  color: var(--verde);
}
.servicio-cabecera__acciones {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.servicio-cabecera__acciones .btn {
  width: 100%;
}

/* ---------- Ficha de servicio: bloque visual --------------------------------- */
.servicio-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  color: var(--verde-claro);
}
.servicio-visual svg.icono {
  position: relative;
  z-index: 2;
  width: 110px;
  height: 110px;
}
/* Nombre del servicio en marca de agua mientras no haya foto */
.servicio-visual::before {
  content: attr(data-nombre);
  position: absolute;
  left: 20px;
  bottom: 8px;
  font-family: var(--fuente-titulos);
  font-size: clamp(48px, 9vw, 120px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
}
.servicio-visual--mapa::before {
  content: none;
}
.servicio-visual img,
.servicio-visual .mapa {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.servicio-visual .mapa svg {
  display: block;
  width: 100%;
  height: 100%;
}
.servicio-visual--mapa {
  height: auto;
  aspect-ratio: 600 / 560;
  max-height: 560px;
}
/* Distintivo "Recogida inmediata" */
.distintivo {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--navy);
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.distintivo b {
  font-family: var(--fuente-titulos);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.distintivo span {
  margin-top: 5px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.distintivo--24h {
  background: var(--blanco);
  color: var(--verde);
}

/* ---------- Banda navy de capacidades --------------------------------------- */
.banda-capacidades {
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0;
  border-radius: 18px;
  background: var(--navy);
  color: var(--blanco);
}
.banda-capacidades > div {
  flex: 1;
  min-width: 46%;
  padding: 20px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.banda-capacidades > div:first-child {
  border-left: none;
}
.banda-capacidades span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8DA0B8;
}
.banda-capacidades b {
  display: block;
  font-size: 16.5px;
  line-height: 1.3;
}

/* ---------- Texto y "qué incluye" ------------------------------------------ */
.servicio-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 16px;
}
.servicio-columnas p {
  margin-bottom: 15px;
  font-size: 15.5px;
  line-height: 1.75;
}
.servicio-columnas p.destacado {
  font-size: 17.5px;
  color: var(--texto-suave);
}
.servicio-columnas h2 {
  margin: 8px 0 12px;
  font-size: 22px;
}
.servicio-columnas .grupo-etiqueta:first-child {
  margin-top: 0;
}
.materiales-relacionados {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
main .materiales-relacionados a {
  padding: 9px 15px;
  border: 1.5px solid var(--linea);
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  transition: all 0.2s;
}
main .materiales-relacionados a:hover {
  border-color: var(--verde);
  color: var(--verde);
}

/* Tabla de vigas con imprimación en stock (granallado) */
.servicio-tabla {
  margin: 8px 0 28px;
}

/* ---------- Pasos para pedir presupuesto ------------------------------------ */
.pasos {
  margin: 36px 0 24px;
  padding: 30px 22px 26px;
  border-radius: 22px;
  background: var(--fondo-alt);
}
.pasos h2 {
  font-size: clamp(24px, 5vw, 36px);
}
.pasos > p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--texto-suave);
}
.pasos__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 26px 0 18px;
}
.paso {
  padding: 20px 22px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
  transition: transform 0.3s var(--suave), border-color 0.3s;
}
.paso:hover {
  transform: translateY(-4px);
  border-color: var(--verde);
}
.paso .num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fuente-titulos);
  font-size: 32px;
  color: var(--verde);
}
.paso b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--navy);
}
.paso span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ---------- Otros servicios (relacionados) ----------------------------------- */
.servicios-relacionados {
  padding-bottom: 72px;
}
.servicios-relacionados .grupo-etiqueta {
  margin-top: 8px;
}
.servicios-relacionados ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
main .servicios-relacionados li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  transition: all 0.25s var(--suave);
}
main .servicios-relacionados li a:hover {
  border-color: var(--verde);
  color: var(--verde);
  transform: translateX(4px);
}

/* ---------- Ampliaciones ---------------------------------------------------- */
@media (min-width: 600px) {
  .acordeon {
    margin-top: 44px;
  }
  .acordeon summary {
    gap: 24px;
    padding: 25px 18px;
  }
  .acordeon summary .num {
    width: 32px;
    font-size: 16px;
  }
  .acordeon summary .rapidez {
    display: inline-flex;
  }
  .acordeon__cuerpo {
    padding: 0 18px 30px;
  }
  .acordeon__acciones {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .acordeon__acciones .btn {
    width: auto;
  }
  .servicio-cabecera__acciones {
    flex-direction: row;
  }
  .servicio-cabecera__acciones .btn {
    width: auto;
  }
  .banda-capacidades > div {
    min-width: 170px;
    padding: 22px 26px;
  }
  .pasos__rejilla {
    grid-template-columns: 1fr 1fr;
  }
  .servicios-relacionados ul {
    grid-template-columns: 1fr 1fr;
  }
  .servicio-visual {
    height: 320px;
  }
  .servicio-visual--mapa {
    height: auto;
  }
  .distintivo {
    width: 140px;
    height: 140px;
  }
  .distintivo b {
    font-size: 22px;
  }
}

@media (min-width: 900px) {
  .cabecera-pagina--foto {
    padding: 76px 0 68px;
  }
  .acordeon__cuerpo {
    grid-template-columns: 380px 1fr;
    gap: 32px;
  }
  .acordeon__foto {
    height: 255px;
  }
  .servicio-cabecera {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 44px var(--margen-lateral) 26px;
  }
  .servicio-visual {
    height: 420px;
  }
  .servicio-visual--mapa {
    height: 520px;
    aspect-ratio: auto;
  }
  .servicio-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
  }
  .pasos {
    padding: 40px 42px 34px;
  }
  .pasos__rejilla {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .servicios-relacionados ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Etiqueta "Nuevo" en flujo (no flotante) y tabla en línea del granallado */
.etiqueta-nuevo--fija {
  position: static;
}
table.matriz--inline td {
  padding: 8px 10px;
  white-space: nowrap;
}
table.matriz--inline td b {
  display: inline-block;
  margin-right: 5px;
  font-size: 12.5px;
  color: var(--navy);
}


/* ---------- Página "Dónde servimos" ------------------------------------------ */
.zonas {
  padding-top: 32px;
  padding-bottom: 72px;
}
.zonas__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
.zona {
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
}
.zona h2 {
  font-size: 24px;
  margin-bottom: 4px;
}
.zona__sub {
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.zona p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
}
.zonas__cta {
  margin-top: 32px;
  padding: 28px 24px;
  border-radius: 16px;
  background: var(--fondo-alt);
}
.zonas__cta p {
  margin-bottom: 18px;
  color: var(--texto-suave);
}
.zonas__cta .ficha-info__acciones {
  margin-top: 0;
}
@media (min-width: 900px) {
  .zonas__rejilla {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .zonas__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 40px;
  }
  .zonas__cta p {
    margin: 0;
    max-width: 56ch;
  }
}


/* =============================================================================
   20  PRONTUARIO DE PESOS
   ========================================================================== */
.prontuario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 80px;
}
.prontuario__lateral {
  display: flex;
  flex-direction: column;
  gap: 20px;
  order: 2;
}
.pr-form {
  order: 1;
}
.etiqueta-mini {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.resultado,
.croquis {
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--blanco);
  box-shadow: 0 14px 44px rgba(0, 14, 31, 0.08);
}
.resultado__grande {
  font-family: var(--fuente-titulos);
  font-size: clamp(50px, 12vw, 76px);
  line-height: 1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.resultado__grande small {
  font-size: 0.42em;
  color: var(--texto-suave);
}
.resultado__desc {
  margin: 10px 0 20px;
  font-size: 14.5px;
  color: var(--texto-suave);
}
.resultado__filas,
.croquis__filas {
  border-top: 1px solid var(--linea);
}
.resultado__fila,
.croquis__fila {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fondo-alt);
  font-size: 14px;
}
.resultado__fila b,
.croquis__fila em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.croquis__fila span {
  color: var(--texto-suave);
}
.croquis__fila span b {
  color: var(--verde);
}
.resultado__fuente {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.croquis__dibujo svg {
  display: block;
  width: 150px;
  height: auto;
  margin: 4px auto 10px;
  color: var(--navy);
}
.croquis__dibujo[hidden] {
  display: none;
}

/* Formulario */
.tipo-lista {
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
  border-top: 2px solid var(--navy);
}
.tipo-lista button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--linea);
  background: none;
  font-family: var(--fuente-titulos);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--texto-suave);
  transition: color 0.2s, padding-left 0.2s;
}
.tipo-lista button:hover {
  color: var(--navy);
  padding-left: 14px;
}
.tipo-lista button.activo {
  color: var(--verde);
}
.tipo-lista button.activo::after {
  content: "●";
  font-size: 10px;
  color: var(--verde);
}
.pr-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.pr-form select,
.pr-form input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-peq);
  background: var(--blanco);
  color: var(--navy);
  font-size: 15px;
}
.pr-form select:focus,
.pr-form input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.pr-bloque,
.pr-fila {
  margin-bottom: 16px;
}
.pr-bloque[hidden],
.pr-fila[hidden] {
  display: none;
}
.pr-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pr-bloque .pr-fila {
  margin-bottom: 0;
}
.pr-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.pr-acciones .btn svg {
  margin-right: 6px;
}
.pr-nota {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-suave);
}

@media (min-width: 600px) {
  .pr-fila {
    grid-template-columns: 1fr 1fr;
  }
  .pr-fila--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .tipo-lista button {
    padding: 15px 6px;
    font-size: 19px;
  }
}

@media (min-width: 900px) {
  .prontuario {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 52px;
    align-items: start;
    padding-top: 38px;
    padding-bottom: 110px;
  }
  .prontuario__lateral {
    position: sticky;
    top: 86px;
    order: 1;
  }
  .pr-form {
    order: 2;
  }
  .resultado,
  .croquis {
    padding: 36px 38px;
  }
}


/* =============================================================================
   21  EMPRESA (quiénes somos)
   ========================================================================== */
.empresa-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-top: 44px;
  padding-bottom: 56px;
}
.empresa-intro__texto p {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.7;
}
.empresa-intro__foto img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.cifras > div:nth-child(6) {
  display: block;
}

/* Línea temporal */
.hitos {
  position: relative;
  padding-left: 0;
  list-style: none;
}
.hito {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 0 32px 28px;
  border-left: 2px solid var(--linea);
}
.hito:last-child {
  padding-bottom: 0;
}
.hito::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-suave);
}
.hito__anio {
  font-family: var(--fuente-titulos);
  font-size: 34px;
  line-height: 1;
  color: var(--verde);
}
.hito__cuerpo h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.hito__cuerpo p {
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texto);
}

/* Diferenciales */
.diferenciales {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.diferencial {
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
  border-top: 3px solid var(--verde);
}
.diferencial h3 {
  margin-bottom: 8px;
  font-size: 18px;
}
.diferencial p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* Dónde estamos */
.empresa-donde {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.empresa-donde p {
  margin: 12px 0;
  line-height: 1.7;
}
.empresa-donde .ficha-info__acciones {
  margin-top: 20px;
}

@media (min-width: 600px) {
  .diferenciales {
    grid-template-columns: 1fr 1fr;
  }
  .hito {
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding-left: 34px;
  }
  .hito__anio {
    font-size: 40px;
  }
}
@media (min-width: 900px) {
  .empresa-intro {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 72px;
  }
  .diferenciales {
    grid-template-columns: repeat(4, 1fr);
  }
  .hito {
    grid-template-columns: 140px 1fr;
    gap: 40px;
    padding: 0 0 44px 44px;
  }
  .hito__cuerpo p {
    max-width: 70ch;
  }
  .empresa-donde {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}


/* =============================================================================
   22  FORMULARIOS: contacto, presupuesto y empleo
   ========================================================================== */
.rejilla-contacto,
.rejilla-presupuesto,
.rejilla-empleo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 80px;
}
.contacto-info,
.presupuesto-lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tarjeta-contacto {
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
}
.tarjeta-contacto h3 {
  margin-bottom: 12px;
  font-size: 15px;
}
.tarjeta-contacto p {
  line-height: 1.6;
}
.linea-contacto {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fondo-alt);
  font-size: 14px;
}
.linea-contacto:last-child {
  border-bottom: none;
}
.linea-contacto span {
  color: var(--texto-suave);
}
.linea-contacto b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tarjeta-contacto b a {
  color: var(--navy);
  text-decoration: none;
}
.tarjeta-contacto b a:hover {
  color: var(--verde);
}
.tarjeta-contacto--mapa .ficha-info__acciones {
  margin-top: 16px;
}

/* Tarjeta de formulario */
.tarjeta-formulario {
  padding: 26px 22px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}
.tarjeta-formulario h2 {
  font-size: 24px;
  margin-bottom: 6px;
}
.tarjeta-formulario > p {
  margin-bottom: 20px;
  font-size: 14.5px;
  color: var(--texto-suave);
}
.campo {
  margin-bottom: 16px;
}
.campo-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}
.campo label,
.campo legend {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.req {
  color: #D7261E;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-peq);
  background: var(--blanco);
  color: var(--navy);
  font-size: 15px;
}
.campo textarea {
  min-height: 120px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.campo--invalido input,
.campo--invalido textarea,
.campo--invalido select {
  border-color: #D7261E;
}
.campo__error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #B71C1C;
}
fieldset.campo {
  border: none;
  padding: 0;
  margin: 0 0 16px;
}
/* Campo trampa: invisible para personas, visible para robots */
.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.opciones-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.opciones-toggle label {
  margin: 0;
  cursor: pointer;
}
.opciones-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.opciones-toggle span {
  display: inline-block;
  padding: 10px 16px;
  border: 1.5px solid var(--linea);
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  transition: all 0.2s;
}
.opciones-toggle input:checked + span {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
.opciones-toggle input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.zona-archivos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 26px 18px;
  border: 2px dashed var(--linea);
  border-radius: 14px;
  background: var(--fondo-alt);
  text-align: center;
  color: var(--verde);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.zona-archivos:hover,
.zona-archivos--activa {
  border-color: var(--verde);
  background: var(--verde-suave);
}
.zona-archivos b {
  color: var(--navy);
  font-size: 15px;
}
.zona-archivos small {
  font-size: 12.5px;
  color: var(--texto-suave);
}
.zona-archivos input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.zona-archivos__lista {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: var(--navy);
}
.zona-archivos__lista:empty {
  display: none;
}
.check-inline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.check-inline input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--verde);
}
.check-inline a {
  color: var(--verde);
}
.antispam {
  margin-bottom: 14px;
}
.antispam small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-suave);
}
.obligatorios {
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.form-estado {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.form-estado[hidden] {
  display: none;
}
.form-estado--ok {
  background: var(--verde-suave);
  color: var(--verde);
  font-weight: 700;
}
.form-estado--error {
  background: #FDECEC;
  color: #B71C1C;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* Presupuesto: nota lateral */
.nota-pasos {
  padding: 24px;
  border-radius: 16px;
  color: var(--blanco);
}
.nota-pasos h3 {
  margin-bottom: 14px;
  font-size: 16px;
  color: var(--blanco);
}
.nota-pasos ol {
  list-style: none;
}
.nota-pasos li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #DDE5EE;
}
.nota-pasos li span {
  flex-shrink: 0;
  color: var(--verde-claro);
  font-weight: 700;
}

/* Empleo */
.empleo-porque {
  padding-top: 40px;
}
.empleo-porque .destacado {
  max-width: 70ch;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--texto-suave);
}
.empleo-porque .destacado b {
  color: var(--navy);
}
.pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
.pilar {
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-top: 3px solid var(--verde);
  border-radius: 16px;
  background: var(--blanco);
}
.pilar h3 {
  margin-bottom: 8px;
  font-size: 17px;
}
.pilar p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.vacante {
  margin-bottom: 14px;
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
}
.vacante h3 {
  margin-bottom: 10px;
  font-size: 18px;
}
.vacante .etiquetas {
  margin-bottom: 12px;
}
.vacante p {
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.vacante--vacia {
  background: var(--fondo-alt);
}
.vacante--vacia p {
  margin-bottom: 0;
}
.vacantes-pie {
  font-size: 14px;
  color: var(--texto-suave);
}

@media (min-width: 600px) {
  .campo-fila {
    grid-template-columns: 1fr 1fr;
  }
  .tarjeta-formulario {
    padding: 32px 30px;
  }
  .pilares {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .rejilla-contacto {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 32px;
    padding-top: 44px;
  }
  .rejilla-presupuesto {
    grid-template-columns: 1.3fr 0.7fr;
    gap: 32px;
    align-items: start;
    padding-top: 44px;
  }
  .presupuesto-lateral {
    position: sticky;
    top: 96px;
  }
  .rejilla-empleo {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding-top: 48px;
  }
}


/* =============================================================================
   23  PÁGINAS LEGALES
   ========================================================================== */
.texto-legal {
  max-width: 78ch;
  padding-top: 36px;
  padding-bottom: 80px;
}
.texto-legal h2 {
  margin: 32px 0 12px;
  font-size: 20px;
}
.texto-legal h2:first-child {
  margin-top: 0;
}
.texto-legal p,
.texto-legal li {
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 12px;
}
.texto-legal ul {
  padding-left: 22px;
  margin-bottom: 14px;
}
.texto-legal li {
  margin-bottom: 6px;
}
.tabla-legal {
  width: 100%;
  margin: 8px 0 16px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tabla-legal th,
.tabla-legal td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla-legal th {
  background: var(--fondo-alt);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =============================================================================
   24  PÁGINA 404
   ========================================================================== */
.error-404 {
  padding-top: 64px;
  padding-bottom: 96px;
  max-width: 62ch;
}
.error-404__codigo {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(90px, 22vw, 170px);
  line-height: 0.9;
  color: var(--verde-suave);
}
.error-404 h1 {
  margin: 8px 0 14px;
  font-size: clamp(30px, 6vw, 44px);
}
.error-404 p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-suave);
}
.error-404__tel {
  margin-top: 24px;
}

/* Detalle desplegable de cada vacante */
.vacante__detalle {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo-alt);
}
.vacante__detalle summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--verde);
}
.vacante__detalle h4 {
  margin: 14px 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.vacante__detalle ul {
  padding-left: 18px;
}
.vacante__detalle li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.5;
}