/* Hallmark · macrostructure: Marquee Hero · nav: N9 borde a sangre · footer: Ft3
 * genre: editorial (industrial B2B) · theme: custom "sol industrial"
 * paper: light oklch(96% 0.006 130) · accent: warm-yellow oklch(84% 0.17 88)
 * display: Plus Jakarta Sans 600/700 · body: DM Sans 400/500/600
 * axes: light / roman-serif / warm
 * ref: demo.templatemonster.com/es/demo/449617 — se toma la ESTRUCTURA
 *      (heroe a sangre con el titular encima del medio, cejilla, CTA solido
 *      sin redondear, par serif+geometrica) y NADA del cromatismo ni del
 *      maquetado. El coral #f7542b de la referencia se descarta: la marca ya
 *      tiene amarillo propio.
 */

/* ==========================================================================
   Plastic Sol Peru — hoja unica
   --------------------------------------------------------------------------
   Idea rectora: la medida. Una cotizacion no empieza sin ancho x largo x
   cantidad, asi que la pagina deja de vender adjetivos y empieza a recoger
   especificaciones. De ahi salen las dos decisiones visuales:

   1. El amarillo del logo (#FFCA00) se usa en volumen, no salpicado. Es el
      color de la accion: si algo es amarillo, se puede pulsar.
   2. Sin adornos de medicion: desde la 5.ª pasada las secciones se separan
      con espacio y jerarquia tipografica.

   Convencion para no pelearse con la especificidad: cada seccion es .banda y
   los modificadores (.banda--tinta, .banda--sol) cambian el color y NADA MAS.
   El espaciado vertical vive en un solo sitio.
   ========================================================================== */

/* --- 1. Fichas de color y medida ---------------------------------------- */

:root {
  /* Paleta: sale del logo, no de un generador. El amarillo es de la marca;
     el fondo es el color que tiene el polietileno cristal apilado. */
  --sol: #ffca00;
  --sol-hondo: #e0b100;
  --tinta: #1b1b1a;
  --tinta-suave: #3a3a36;
  --polietileno: #f2f4f1;
  --film: #e3e7e1;
  --acero: #63685f;          /* 5.1:1 sobre --polietileno */
  --blanco: #fff;

  /* Velos del heroe. El medio es una linea de impresion en marcha: sin un
     velo fuerte por la izquierda el titular blanco no llega a 4.5:1 contra
     los rodillos claros. Se declaran como fichas para que el contraste se
     ajuste en UN sitio. */
  --velo-fuerte: rgba(14, 14, 13, 0.9);
  --velo-medio: rgba(14, 14, 13, 0.66);
  --velo-suave: rgba(14, 14, 13, 0.2);

  --ancho: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);

  /* Tipografia (5.ª pasada). Plus Jakarta Sans en titulares, DM Sans en texto
     y controles. Spectral se retiro: el pedido es una interfaz mas actual, y
     el logotipo sigue siendo la unica pieza con remate. Solo se cargan los
     pesos que se usan: Jakarta 600/700 y DM Sans 400/500/600. */
  --tipo-titular: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tipo-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala fluida. Cada clamp va de 360 px a 1440 px:
     H1 36 -> 60 · H2 28 -> 42 · texto 17 -> 18 · controles 15-16 */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-control: 1rem;
  --t-base: clamp(1.0625rem, 1.02rem + 0.1vw, 1.125rem);
  --t-m: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --t-l: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  --t-xl: clamp(1.75rem, 1.45rem + 1.35vw, 2.625rem);
  --t-2xl: clamp(2.25rem, 1.8rem + 2.16vw, 3.75rem);

  --paso: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Curvas (14-sep). El logotipo es una slab con remates curvos y un sol: lo que
     se pulsa es redondo; lo que contiene tiene esquinas suaves, mas amplias
     cuanto mayor es la pieza. Sin sombras: la forma basta. */
  --sol-claro: #fff4cc;
  --r-control: 999px;
  --r-campo: 12px;
  --r-media: 18px;
  --r-panel: 28px;
  --r-banda: clamp(24px, 3.2vw, 44px);
  --margen-banda: clamp(0.5rem, 1.4vw, 1.25rem);
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--polietileno);
  color: var(--tinta);
  font-family: var(--tipo-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* [hidden] pierde contra cualquier display declarado despues. El menu movil
   es flex cuando esta abierto, asi que sin esto se queda visible al cerrarlo. */
[hidden] { display: none !important; }

/* La cabecera es sticky: sin esto un salto a #servicios deja el titulo debajo
   de la barra. Se aplica a lo que puede ser destino de un ancla. */
[id] { scroll-margin-top: calc(66px + 1.25rem); }

/* H1, H2 y H3 en Plus Jakarta Sans. El salto de linea lo decide text-wrap:
   balance mas un ancho maximo en ch; nunca un <br>, que solo cuadra en una
   resolucion. */
h1, h2, h3 {
  font-family: var(--tipo-titular);
  margin: 0;
  text-wrap: balance;
  color: inherit;
}

h1 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
h2 {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.25rem, 2.2vw, 2rem);
}
h3 { font-size: var(--t-l); font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; }

b, strong { font-weight: 600; }

/* Titular de columna dentro de una seccion que ya tiene su H2 mayor. */
.h2--menor { font-size: var(--t-l); margin-bottom: 1.1rem; }

/* Sin tope de ancho en ch: el texto ocupa el ancho de su bloque. Un max-width
   aqui dejaba un hueco a la derecha junto a rejillas que si llegan al borde
   (comprobarlo con arnes/ancho.mjs). El heroe lleva su propio tope. */
p { margin: 0 0 1em; text-wrap: pretty; }

a { color: inherit; }

/* Un solo anillo de foco para todo el sitio, visible sobre claro y oscuro. */
:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  background: var(--sol);
  color: var(--tinta);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  z-index: 100;
}
.salto-contenido:focus { left: 0.5rem; top: 0.5rem; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 3. Rejilla y bandas ------------------------------------------------- */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.banda { padding-block: clamp(4rem, 8vw, 7rem); }
.banda--tinta { background: var(--tinta); color: var(--polietileno); }
.banda--sol { background: var(--sol); color: var(--tinta); }
.banda--film { background: var(--film); }
.banda--fina { padding-block: clamp(2rem, 4vw, 3rem); }

/* Bandas de tinta y de sol: paneles con esquinas amplias, despegados del borde.
   Las claras siguen a sangre: dan el aire entre panel y panel. */
.banda--tinta,
.banda--sol {
  margin: var(--margen-banda);
  border-radius: var(--r-banda);
}

.banda--tinta h2, .banda--tinta h3 { color: var(--blanco); }
.banda--tinta p { color: #d5d8d2; }

/* --- 4. (Retirada) La regla con marcas de medicion ----------------------- */
/* La 5.ª pasada elimino las reglas decorativas de toda la web (gradiente de
   marcas, animacion de trazo y sus usos en la ficha y en materiales). Las
   secciones se separan con espacio y jerarquia tipografica; no se sustituyen
   por otro adorno. */

/* --- 5. Botones ---------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  /* Redondo como el sol del logotipo (antes, bloque recto). */
  border-radius: var(--r-control);
  background: var(--sol);
  color: var(--tinta);
  font: 600 var(--t-control) / 1.2 var(--tipo-texto);
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--paso), transform var(--paso);
}
.boton:hover { background: var(--sol-hondo); }
.boton:active { transform: translateY(1px); }

.boton--linea {
  background: transparent;
  border-color: currentColor;
}
.boton--linea:hover { background: var(--tinta); color: var(--sol); border-color: var(--tinta); }

.boton--tinta { background: var(--tinta); color: var(--sol); }
.boton--tinta:hover { background: #000; }

.boton--grande { min-height: 56px; padding: 0.95rem 1.8rem; font-size: var(--t-control); }
.boton--bloque { width: 100%; justify-content: center; }

.boton svg { flex: none; }

/* --- 6. Cabecera --------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tinta);
  color: var(--blanco);
}

.cabecera__fila {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 66px;
}

/* El boton de cotizar sale del ancho de lectura y llega al borde del
   navegador, alto completo. Es la unica pieza rellena de la cabecera: sin
   ella la barra queda mas ligera que el contenido que sostiene, y la marca
   deja de ser lo primero que pesa. */
.cabecera__fila > .boton {
  align-self: center;
  min-height: 44px;
  padding-inline: 1.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  align-self: center;
  /* El logotipo mide 31 px de alto: como enlace se queda corto para el dedo. */
  min-height: 44px;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--blanco);
  margin-right: auto;
}
.marca__sol { width: 34px; height: 34px; flex: none; }
/* El texto de la marca es el LOGOTIPO recortado del original, no tipografia
   recreada. No cambia con la tipografia de la pagina. */
.marca__texto { width: 132px; height: auto; flex: none; }

/* Un solo menu (8.ª pasada): la misma lista es fila en escritorio y panel en
   movil. Productos es un boton que despliega; lo que va dentro son destinos,
   no hermanos suyos. */
.nav__lista { list-style: none; margin: 0; padding: 0; }
.nav a,
.nav__productos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  color: #dcdfd9;
  text-decoration: none;
  font: 500 var(--t-s) / 1.2 var(--tipo-texto);
  white-space: nowrap;
  transition: color var(--paso), border-color var(--paso);
}
.nav__productos {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav__productos svg { width: 16px; height: 16px; transition: transform var(--paso); }
.nav__productos[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav a:hover,
.nav__productos:hover,
.nav__productos[aria-expanded="true"] { color: var(--blanco); }
.nav a[aria-current="page"],
.nav__grupo:has([aria-current="page"]) > .nav__productos { color: var(--sol); }

/* --- Escritorio: fila + desplegable ---------------------------------------- */
@media (min-width: 1121px) {
  .nav { display: flex; align-items: stretch; }
  .nav__lista { display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 1.8rem); }
  .nav__lista > li > a,
  .nav__productos {
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
  }
  .nav__lista > li > a:hover,
  .nav__productos:hover { border-bottom-color: var(--sol); }
  .nav__lista > li > a[aria-current="page"],
  .nav__grupo:has([aria-current="page"]) > .nav__productos { border-bottom-color: var(--sol); }

  .nav__grupo { position: relative; }
  .nav__submenu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: -1.1rem;
    min-width: 17.5rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    background: var(--tinta);
    border: 1px solid #35362f;
    border-radius: var(--r-panel);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
  }
  /* Puente invisible: sin el, al bajar el raton del boton al panel se cruza
     un hueco y el desplegable se cierra antes de llegar. */
  .nav__submenu::before {
    content: "";
    position: absolute;
    inset: -0.7rem 0 100% 0;
  }
  .nav__submenu a {
    display: flex;
    width: 100%;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-campo);
  }
  .nav__submenu a:hover { background: #2a2b26; }
  /* "Ver todos" separa el catalogo de sus productos. */
  .nav__submenu li:first-child a { color: var(--sol); }
  .nav__submenu li:first-child { border-bottom: 1px solid #2c2d27; margin-bottom: 0.3rem; padding-bottom: 0.3rem; }
  .menu-boton { display: none; }
}

/* --- Movil: boton "Menu" + panel ------------------------------------------- */

.menu-boton {
  display: none;
  align-items: center;
  /* Sin esto la fila (align-items: stretch) lo estiraba a todo el alto de la
     cabecera y el borde redondo salia ovalado a 390 px. */
  align-self: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid #4b4d47;
  border-radius: var(--r-control);
  padding-inline: 0.9rem;
  background: transparent;
  color: var(--blanco);
  font: 500 var(--t-s) / 1 var(--tipo-texto);
  cursor: pointer;
}
.menu-boton:hover { border-color: var(--sol); }
.menu-boton .icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

@media (max-width: 1120px) {
  .menu-boton { display: inline-flex; }
  .cabecera__fila { position: relative; }
  .nav:not(.nav--abierta) { display: none; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    background: var(--tinta);
    border-top: 1px solid #35362f;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    padding: 0.5rem var(--gutter) 1.1rem;
  }
  .nav a,
  .nav__productos {
    display: flex;
    width: 100%;
    padding: 0.85rem 0;
    font-size: var(--t-control);
    color: #e2e5df;
    border-bottom: 1px solid #2c2d27;
  }
  .nav__productos { justify-content: space-between; }
  .nav a:hover, .nav__productos:hover { color: var(--sol); }
  .nav__lista > li:last-child > a { border-bottom: 0; }
  .nav__submenu { list-style: none; margin: 0 0 0 1.1rem; padding: 0; }
  .nav__submenu a {
    padding: 0.7rem 0;
    font-weight: 400;
    font-size: var(--t-s);
    color: #b9bdb5;
  }
}
/* A 390 px la marca se partia en dos lineas y la cabecera crecia al doble. */
@media (max-width: 480px) {
  .marca__sol { width: 27px; height: 27px; }
  .marca__texto { width: 104px; }
  .cabecera__fila { min-height: 58px; gap: 0.5rem; }
  .cabecera .boton { padding-inline: 0.75rem; }
  .cabecera .boton span { display: none; }   /* solo el icono a 360-390 px */
  .menu-boton span { display: none; }
}
/* A 360 px no caben la marca completa, el menu y el boton de WhatsApp. */
@media (max-width: 380px) {
  .marca__texto { width: 92px; }
  .marca__sol { width: 24px; height: 24px; }
}

/* --- 6c. Marquesina: el heroe a sangre ----------------------------------- */
/* El medio ocupa la seccion entera y el titular va encima (escritorio). En
   la portada el medio es un BUCLE de 13 s de la linea de impresion que
   arranca solo, silenciado; las internas usan la misma pieza con una foto.

   5.ª pasada:
   - el velo acompana la POSICION del contenido, no el ancho de la pantalla:
     sus paradas se miden desde el borde izquierdo de .envoltura, asi que en
     un monitor ancho la maquina de la derecha queda a la vista;
   - en movil el medio deja de ir detras del texto: es una franja 16:9 arriba
     con el cuadro completo, y el titular va debajo sobre tinta. Detras de un
     velo al 90 % el video no se veia y recortado a 390 px no se entendia. */

.marquesina {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(560px, 84vh, 780px);
  padding-block: clamp(4rem, 9vw, 6.5rem) clamp(7rem, 11vw, 8.5rem);
  background: var(--tinta);
  color: var(--blanco);
  overflow: hidden;
  border-radius: 0 0 var(--r-banda) var(--r-banda);
}

.marquesina__medio { position: absolute; inset: 0; z-index: -2; background: var(--tinta); }
.marquesina__medio > img,
.marquesina__medio > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Velo. Paradas medidas desde el borde del contenido (--borde): fuerte bajo
   el titular, se abre donde acaba el texto y desaparece antes de la maquina.
   Abajo, una sombra corta sostiene el pie de foto y los controles del video;
   arriba, otra separa la cabecera. */
.marquesina::after {
  --borde: max(0px, (100% - var(--ancho)) / 2);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--velo-fuerte) 0,
      var(--velo-fuerte) calc(var(--borde) + 27rem),
      var(--velo-medio) calc(var(--borde) + 44rem),
      var(--velo-suave) calc(var(--borde) + 60rem),
      rgba(14, 14, 13, 0) calc(var(--borde) + 76rem)),
    linear-gradient(0deg, rgba(14, 14, 13, 0.7) 0, rgba(14, 14, 13, 0) 9.5rem),
    linear-gradient(180deg, rgba(14, 14, 13, 0.38) 0, rgba(14, 14, 13, 0) 6rem);
  transition: opacity var(--paso);
}

.marquesina__contenido { position: relative; max-width: 44rem; }

.marquesina__cejilla {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--sol);
}
.marquesina__cejilla svg { flex: none; }

.marquesina h1 { color: var(--blanco); max-width: 20ch; }

.marquesina__entrada {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: var(--t-m);
  color: #e4e6e1;
}

.marquesina__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 2.25rem 0 0;
}

.marquesina .enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blanco);
  text-decoration: none;
  font-size: var(--t-control);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.4);
  transition: box-shadow var(--paso);
}
.marquesina .enlace-suave:hover { box-shadow: inset 0 -2px 0 var(--sol); }

/* Pie del heroe: que se ve (izquierda) y los controles del video (derecha).
   Es una .envoltura, asi que se alinea con el titular. */
.marquesina__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.1rem, 2.5vw, 1.75rem);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.marquesina__credito {
  margin: 0;
  max-width: 44ch;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.marquesina__botones { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* Pausa del bucle. Discreto, pero 44 px de destino y nombre accesible que
   cambia con el estado ("Pausar..." / "Reproducir..."). Sin JavaScript no
   aparece: no tendria nada que controlar. */
.marquesina__pausa {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(14, 14, 13, 0.55);
  color: var(--blanco);
  cursor: pointer;
  transition: background var(--paso), border-color var(--paso);
}
.marquesina__pausa:hover { background: rgba(14, 14, 13, 0.82); border-color: var(--sol); }
.marquesina__pausa .icono-play { display: none; }
.marquesina__pausa[data-estado="pausa"] .icono-pausa { display: none; }
.marquesina__pausa[data-estado="pausa"] .icono-play { display: block; }

/* Video completo. Sin JavaScript es un enlace al MP4 original, que el
   navegador abre en su reproductor. */
.marquesina__play {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: rgba(14, 14, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-control);
  padding-right: 1.25rem;
  color: var(--blanco);
  text-decoration: none;
  font-size: var(--t-control);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--paso), border-color var(--paso);
}
.marquesina__play:hover { background: rgba(14, 14, 13, 0.82); border-color: var(--sol); }
.marquesina__play small { display: block; font-size: var(--t-xs); font-weight: 400; color: rgba(255, 255, 255, 0.7); }

.marquesina__disco {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sol);
  color: var(--tinta);
}
.marquesina__disco svg { margin-left: 2px; }

.marquesina__medio > .marquesina__completo { object-fit: contain; background: #000; z-index: 1; }

.marquesina__cerrar {
  position: absolute;
  top: 1rem;
  right: var(--gutter);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-control);
  background: rgba(14, 14, 13, 0.82);
  color: var(--blanco);
  font: 500 var(--t-control) / 1 var(--tipo-texto);
  cursor: pointer;
}
.marquesina__cerrar:hover { border-color: var(--sol); }

/* Reproduciendo el completo: el velo y el texto se apartan y el video sube
   por encima para que sus controles nativos sean utilizables. */
.marquesina--activa::after { opacity: 0; }
.marquesina--activa .marquesina__contenido,
.marquesina--activa .marquesina__pie { opacity: 0; visibility: hidden; }
.marquesina--activa .marquesina__medio { z-index: 2; }

/* visibility cambia al instante al MOSTRAR y con retraso al OCULTAR. Con la
   transicion simetrica, al cerrar el video completo el enlace seguia oculto
   en el primer fotograma y el foco no podia volver a el. */
.marquesina__contenido,
.marquesina__pie { transition: opacity var(--paso), visibility 0s; }
.marquesina--activa .marquesina__contenido,
.marquesina--activa .marquesina__pie { transition: opacity var(--paso), visibility 0s var(--paso); }

@media (max-width: 860px) {
  .marquesina {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(1.75rem, 6vw, 2.5rem);
  }
  .marquesina::after { content: none; }

  /* El cuadro entero, sin recortes: la franja tiene la proporcion del video. */
  .marquesina__medio { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; }
  .marquesina__medio::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 14, 13, 0.25) 0, rgba(14, 14, 13, 0) 24%,
      rgba(14, 14, 13, 0) 70%, var(--tinta) 100%);
  }

  .marquesina > .envoltura:not(.marquesina__pie) { padding-top: clamp(1.25rem, 5vw, 2rem); }
  .marquesina__contenido { max-width: none; }
  .marquesina h1 { max-width: none; }
  .marquesina__acciones { margin-top: 1.75rem; }
  .marquesina__acciones .boton { width: 100%; justify-content: center; }

  .marquesina__pie {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.75rem;
  }
  .marquesina__credito { max-width: none; }
  .marquesina__play { flex: 1; }

  /* La pausa va sobre la esquina del propio video, no bajo el texto. */
  .marquesina__pausa {
    position: absolute;
    right: var(--gutter);
    top: calc(56.25vw - 44px - 0.75rem);
    z-index: 3;
  }
  .marquesina__cerrar { top: 0.75rem; }

  /* En movil el completo se reproduce en su franja; el texto no estorba y
     puede seguir a la vista. Solo se aparta el pie. */
  .marquesina--activa .marquesina__contenido { opacity: 1; visibility: visible; }
  .marquesina--activa .marquesina__medio { z-index: 0; }
  .marquesina--activa .marquesina__medio::after { opacity: 0; }
}

/* Variante de las internas: fotografia fija, sin video y mas baja. */
.marquesina--imagen { min-height: clamp(500px, 66vh, 620px); }
.marquesina--imagen h1 { font-size: clamp(2.25rem, 1.85rem + 1.9vw, 3.5rem); max-width: 20ch; }
.marquesina--imagen .marquesina__entrada { max-width: 52ch; }

.marquesina .migas { color: rgba(255, 255, 255, 0.72); margin-bottom: 1rem; }
.marquesina .migas a { color: rgba(255, 255, 255, 0.92); }

/* --- 6d. Tira bajo el heroe ---------------------------------------------- */
/* Dos filas, cada una con su aire: la ficha opcional arriba y los datos de
   confianza debajo. En la 4.ª pasada compartian fila y se apretaban hasta
   partir "Planta propia en" de su lugar. La linea entre ambas SI cumple una
   funcion: separa la accion de la informacion. */

/* 14-sep: sin fondo gris. En la portada la tira desaparece (la ficha pasa al
   cierre y los envios a la cejilla); en las internas queda como fila de datos. */
.tira { background: transparent; }
.tira__fila { display: grid; grid-template-columns: minmax(0, 1fr); }

.tira .datos {
  margin: 0;
  padding-block: 1.1rem 1.25rem;
  border-top: 1px solid #cdd2ca;
  gap: 0.6rem clamp(1.75rem, 4vw, 3rem);
  font-size: var(--t-control);
  color: var(--tinta-suave);
}
.tira .datos li { white-space: nowrap; }
.tira .datos li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sol-hondo);
  flex: none;
}
.tira__fila--sola .datos { border-top: 0; }

@media (max-width: 560px) {
  .tira .datos { flex-direction: column; gap: 0.7rem; padding-block: 1.1rem 1.35rem; }
  .tira .datos li { white-space: normal; }
}

/* --- 7. Heroe (paginas sin marquesina) ----------------------------------- */

.heroe { background: var(--polietileno); }

/* La columna de la derecha lleva dos piezas apiladas: la foto arriba y el
   bloque de datos abajo. La foto es vertical y nunca llega tan alta como la
   ficha; sin el bloque de datos quedaba un hueco de 300 px que parecia un
   error de maquetacion. Ademas asi desaparece una banda entera de la pagina. */
.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 0.75rem;
  align-items: stretch;
}

/* Las filas de una rejilla son comunes a las dos columnas: con el titular en
   la fila 1 y la ficha en la 2, la fila 1 crecia hasta la altura de la FOTO y
   quedaba un hueco de 200 px entre el titular y la ficha. Agrupando la columna
   izquierda en un envoltorio, sus dos piezas se apilan pegadas. */
.heroe__izq { grid-column: 1; grid-row: 1 / 3; }
.heroe__texto { padding-block: clamp(1.75rem, 3.2vw, 2.75rem) 0; }
.heroe__entrada { max-width: 48ch; margin-bottom: 1.6rem; font-size: var(--t-m); color: var(--tinta-suave); }

/* Fila del CTA directo: un boton primario y un enlace secundario, no dos
   botones iguales pegados. */
.heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; margin: 0; }
.heroe__acciones .enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
  text-underline-offset: 3px;
}

/* Las paginas internas no llevan ficha: su rejilla es de una sola fila y el
   bloque de datos va bajo la foto. */
.heroe__rejilla--simple .heroe__texto { padding-bottom: clamp(2.5rem, 5vw, 4.25rem); }

.heroe__ficha { padding-block: 1.35rem clamp(1.75rem, 3.2vw, 2.75rem); }

/* La foto NO se estira a la altura de la columna de texto. Estirarla obligaba
   a recortar los lados y la version anterior se quedaba con un solo operario
   en cuadro: la foto entera —dos personas y la wincha— es justamente el
   argumento de la pagina. Se muestra a su proporcion y punto. */
/* La foto se recorta a 4:3 y con tope de altura: a proporcion completa (900 x
   1150) empujaba la seccion de productos casi una pantalla hacia abajo. */
.heroe__foto {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  margin-right: calc(-1 * var(--gutter));
}
.heroe__foto figcaption { margin: 0; }
.heroe__foto img {
  width: 100%;
  height: clamp(240px, 30vw, 380px);
  object-fit: cover;
  object-position: 50% 34%;
}

.heroe__datos {
  grid-column: 2;
  grid-row: 2;
  align-self: start;   /* sin esto el bloque negro se estira y deja un vacio */
  margin-right: calc(-1 * var(--gutter));
  background: var(--tinta);
  color: var(--polietileno);
  padding: 1rem 1.1rem 1.15rem;
}

.heroe__pie {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: #a9ada5;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #3d3f38;
  max-width: none;
}

.heroe__datos .datos { flex-direction: column; gap: 0.4rem; }

/* En movil manda el orden del encargo: titular, descripcion, enlace directo
   de cotizacion y solo despues la foto y la ficha. Antes la foto iba primero
   (order: -1) y podia ocupar 46vh: se entraba al sitio sin saber que fabrican. */
@media (max-width: 900px) {
  /* display:contents disuelve el envoltorio de la columna izquierda y deja los
     cuatro bloques como hermanos, que es lo que permite ordenarlos: titular,
     descripcion y CTA primero; la foto y la ficha despues. */
  .heroe__rejilla { display: flex; flex-direction: column; gap: 0; }
  .heroe__izq { display: contents; }
  .heroe__texto { padding-block: 1.25rem 1rem; order: 1; }
  .heroe__foto {
    order: 2;
    margin-top: 1.25rem;
    margin-inline: calc(-1 * var(--gutter));
  }
  .heroe__foto img { height: min(30vh, 240px); object-position: 50% 26%; }
  .heroe__ficha { order: 3; padding-block: 1.25rem 0; }
  .heroe__datos {
    order: 4;
    margin-top: 1.75rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  /* La leyenda de la foto SI se ve en movil: dice donde y que se ve. */
  .heroe__pie { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .heroe__datos .heroe__pie { border-bottom: 1px solid #3d3f38; margin-bottom: 0.75rem; padding-bottom: 0.75rem; }
}

/* --- 8. La ficha de requerimiento --------------------------------------- */
/* Es lo unico audaz de la pagina. No cotiza ni calcula precios: arma el
   mensaje de WhatsApp con lo que escribe el comprador. Sigue siendo un enlace
   normal, asi que funciona sin JavaScript y se puede medir como enlace. */

/* 14-sep: la ficha deja de ir plegada bajo el heroe. Cierra la portada,
   visible, junto a las preguntas frecuentes. */
.ficha {
  background: var(--tinta);
  color: var(--polietileno);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--r-panel);
}

.ficha__titulo {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem);
  color: var(--blanco);
  margin: 0 0 0.6rem;
}
.ficha__nota { font-size: var(--t-s); color: #b9bdb5; margin: 0 0 1.5rem; }
.ficha__opcional {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tinta);
  background: var(--sol);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: 2px;
}

.campo { display: block; margin-bottom: 0.85rem; }
.campo__etiqueta {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #c9cdc5;
  margin-bottom: 0.3rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #4b4d47;
  border-radius: var(--r-campo);
  background: #262624;
  color: var(--blanco);
  font: 400 1rem / 1.3 var(--tipo-texto);
  font-variant-numeric: tabular-nums;
}
.campo textarea { display: block; resize: vertical; min-height: 5.5rem; font-variant-numeric: normal; }
.campo input::placeholder, .campo textarea::placeholder { color: #7c8078; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--sol); }

/* Ancho x largo x unidad: la fila que justifica toda la idea de la pagina. */
.medidas { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 0.5rem; align-items: end; margin-bottom: 0.85rem; }
.medidas__x {
  padding-bottom: 0.75rem;
  color: #8c9089;
  font-size: var(--t-s);
}
.medidas__unidad { width: 5.75rem; }
.medidas .campo { margin-bottom: 0; }

.ficha__doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }


/* Se ve el mensaje que se va a enviar. El href del enlace lleva siempre la
   plantilla generica —para que funcione sin JavaScript y para que la medicion
   automatica de enlaces salientes no se lleve los datos del cliente en la
   URL—, asi que sin esta vista previa no habria forma de saber que se manda. */
.ficha__vista-etiqueta {
  font-size: var(--t-xs);
  font-weight: 500;
  color: #c9cdc5;
  margin: 1.15rem 0 0.3rem;
}
.ficha__vista {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: #a9ada5;
  background: #262624;
  border-radius: var(--r-campo);
  padding: 0.75rem 0.9rem;
  margin: 0;
  max-width: none;
  word-break: break-word;
}

.ficha__envio { margin-top: 1.1rem; }
.ficha__pie {
  font-size: var(--t-xs);
  color: #a9ada5;
  margin: 0.7rem 0 0;
  max-width: none;
}

/* --- 9. Franja de datos duros ------------------------------------------- */

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-s);
}
.datos li { display: flex; align-items: center; gap: 0.5rem; }
.datos b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- 10. Tarjetas de producto ------------------------------------------- */
/* Tres columnas en escritorio, apiladas en movil. Las fotos comparten
   proporcion y el boton se empuja al fondo con margin-top:auto para que los
   tres queden a la misma altura aunque las descripciones midan distinto. */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
@media (max-width: 860px) { .tarjetas { grid-template-columns: 1fr; } }

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid #d9ded7;
}
.tarjeta > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tarjeta__cuerpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta h3 { margin-bottom: 0.6rem; font-size: var(--t-l); }
.tarjeta p { font-size: var(--t-control); color: var(--tinta-suave); margin-bottom: 1rem; max-width: none; }
.tarjeta .boton { margin-top: auto; align-self: flex-start; }

/* Leyenda de foto dentro de una tarjeta: dice que se ve exactamente, para que
   la imagen no prometa algo que no muestra. */
.tarjeta__leyenda {
  font-size: var(--t-xs);
  color: var(--acero);
  border-left: 2px solid #cdd2ca;
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}

/* --- 10b. Filas de producto (paginas internas) --------------------------- */
/* Filas anchas con la foto siempre a la izquierda: es un indice de productos,
   no un carrusel de tarjetas con sombra. Se probo alternando izquierda y
   derecha y el zigzag dejaba huecos grandes y hacia la pagina mas larga sin
   aportar nada. */

.ruta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid #cdd2ca;
}
.ruta:first-of-type { border-top: 0; padding-top: 0; }

.ruta__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ruta__titulo { margin-bottom: 0.5rem; }
.ruta__texto { color: var(--tinta-suave); }

@media (max-width: 760px) {
  .ruta { grid-template-columns: 1fr; }
}

/* --- 11. Materiales (el bloque que sostiene el posicionamiento) --------- */

.materiales { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }

/* Materiales / presentaciones / sectores, cada cosa una vez. Antes el mismo
   catalogo salia en los parrafos y otra vez en la lista de al lado. */
.grupos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
@media (max-width: 860px) { .grupos { grid-template-columns: 1fr; } }
.grupo h3 {
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  color: var(--sol);
  margin-bottom: 0.9rem;
}
/* En movil las dos columnas dejaban lineas de 4 palabras. Una columna. */
@media (max-width: 760px) { .materiales { grid-template-columns: 1fr; } }

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
  padding: 0.6rem 0 0.6rem 1.5rem;
  border-bottom: 1px solid #37372f;
  position: relative;
  font-size: var(--t-control);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-hondo);
}
/* Separadores claros por defecto; oscuros solo sobre tinta. */
.lista-marcada li { border-bottom-color: #ccd1c9; }
.banda--tinta .lista-marcada li { border-bottom-color: #37372f; }

.entradilla { margin-bottom: 2rem; font-size: var(--t-m); color: var(--tinta-suave); }
.banda--tinta .entradilla { color: #d5d8d2; }
.nota-suave { font-size: var(--t-s); color: var(--acero); margin-top: 1.1rem; }

.subtitulo { font-size: 1.05rem; margin-bottom: 0.9rem; }
.subtitulo--separado { margin-top: 2rem; }

.migas { font-size: var(--t-xs); color: var(--acero); margin-bottom: 1.1rem; }
/* El enlace de las migas medía 17 px de alto. Se le da altura de destino sin
   separar visualmente las migas: el padding va dentro de la linea. */
.migas a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }

.tras-ficha { margin-top: 1.35rem; }
.enlace-cruzado { margin-top: 1.25rem; font-size: var(--t-s); }

/* Sectores: cada uno con su icono en un disco de sol. En escritorio son
   pastillas en rejilla; en movil, baldosas de dos en dos con el icono arriba
   (en pastilla, "Agroindustrial" no cabia a 360 px). */
.sectores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sectores li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  background: var(--blanco);
  border-radius: var(--r-control);
  font-size: var(--t-s);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta);
}
.sector__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sol);
  color: var(--tinta);
}
@media (max-width: 560px) {
  .sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .sectores li {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0.5rem 0.9rem;
    border-radius: var(--r-media);
    text-align: center;
    font-size: var(--t-s);
  }
}

/* --- 12. Pasos (aqui la numeracion se la gana: es una secuencia) -------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}
.paso { counter-increment: paso; }
/* La cifra va en un disco de sol: es la unica secuencia real de la pagina y
   el circulo repite la forma del logotipo. */
.paso::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--sol);
  font-family: var(--tipo-titular);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
  margin-bottom: 1rem;
}
.paso h3 { margin-bottom: 0.35rem; }
.paso p { margin: 0; font-size: var(--t-control); color: var(--tinta-suave); }

/* --- 13. Fabricacion ----------------------------------------------------- */

.planta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.planta__mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.5vw, 1rem); }
.planta__mosaico img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-media); }
.planta__mosaico img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* El video es vertical (9:16, grabado con telefono) y NO se recorta: con
   object-fit: cover se perdian los bordes del cuadro, y en un video de planta
   ahi es donde estan la maquina y las manos. Va completo con `contain` dentro
   de un contenedor de ALTURA EXPLICITA, que ademas le pone tope para que no se
   coma la seccion. Altura explicita y no aspect-ratio + max-height: los dos
   topes a la vez dan resultados impredecibles. */
.planta__video {
  --alto-video: 520px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #0d0d0c;
  height: var(--alto-video);
  display: flex;
  justify-content: center;
}
.planta__video video {
  height: var(--alto-video);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.planta__leyenda { font-size: var(--t-xs); color: var(--acero); margin: 0.5rem 0 0; }
.planta__figura { margin: 0; }
.planta__mosaico--par img:first-child { grid-column: auto; aspect-ratio: 4 / 3; }

/* --- 404 ---------------------------------------------------------------- */
.error404 { min-height: 52vh; }
.error404__codigo {
  font-family: var(--tipo-titular);
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 6.5rem);
  line-height: 1;
  color: var(--sol);
  margin: 0 0 0.5rem;
}
.error404__rutas { max-width: 46ch; margin-bottom: 2rem; }
.error404__rutas li { border-bottom-color: #ccd1c9; }
.error404__accion { margin: 0; }

@media (max-width: 760px) {
  .planta { grid-template-columns: 1fr; }
  .planta__video { --alto-video: min(70vh, 440px); }
}

/* --- 14. Preguntas frecuentes ------------------------------------------- */

.faq { display: grid; gap: 0.6rem; }
.faq details { background: rgba(255, 255, 255, 0.62); border-radius: 20px; padding-inline: 1.25rem; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > svg { flex: none; transition: transform var(--paso); }
.faq details[open] summary > svg { transform: rotate(180deg); }
.faq p { padding-bottom: 1rem; margin: 0; color: var(--tinta-suave); }

/* --- 15. Cierre y pie ---------------------------------------------------- */

.cierre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 820px) { .cierre { grid-template-columns: 1fr; } }

.contacto { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.contacto li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(27, 27, 26, 0.22);
}
.contacto li:first-child { border-top: 0; }
.contacto li > svg { flex: none; margin-top: 0.28rem; opacity: 0.75; }
.contacto a { font-weight: 600; display: inline-block; padding-block: 0.2rem; }
.contacto span { display: block; font-size: var(--t-xs); opacity: 0.72; }

.pie { border-radius: var(--r-banda) var(--r-banda) 0 0; background: var(--tinta); color: #c6cac3; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; font-size: var(--t-s); }
.pie h2 {
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: none;
  color: var(--sol);
  margin-bottom: 0.85rem;
}
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding: 0.22rem 0; }
.pie a { text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.pie a:hover { color: var(--sol); text-decoration: underline; }
/* Marca de "esto todavia no funciona". Solo aparece en staging: el build de
   produccion se niega a salir si el Libro de Reclamaciones no tiene destino. */
.pendiente {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta);
  background: var(--sol);
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.35rem;
}

.pie__legal {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid #37372f;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: #8c9089;
}

/* --- 16. Barra flotante de movil ---------------------------------------- */

.flotante {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: none;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(27, 27, 26, 0.96);
}
@media (max-width: 860px) {
  .flotante { display: block; transition: transform var(--paso), opacity var(--paso); }
  /* Se aparta hacia abajo en vez de desaparecer: si el usuario esta a punto
     de tocarla, un elemento que se esfuma de golpe hace fallar el toque. */
  .flotante--oculta { transform: translateY(120%); opacity: 0; pointer-events: none; }
  body { padding-bottom: 5rem; }
  /* En el pie del movil los enlaces median 19 px de alto: se falla el toque. */
  /* 0.55rem dejaba los enlaces en 42 px: por debajo del minimo tactil justo
     en la lista mas larga del pie. */
  .pie a { padding-block: 0.62rem; min-height: 44px; align-items: center; display: inline-flex; }
  .pie li { padding: 0; }
  .contacto a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* --- 18. Contenido recuperado de la web original (6.ª pasada) ----------- */
/* La portada habia quedado en tres tarjetas y sin beneficios, experiencia ni
   testimonios. Se recupera todo sin cambiar la direccion visual: mismas
   bandas, mismos tipos, mismo amarillo. Las lineas finas entre sub-bloques
   son separadores de contenido, no adornos de medicion. */

/* 18a. Catalogo. Dos destacadas (con pagina propia) a lo ancho y cuatro en
   filas horizontales: todas visibles por separado sin hacer de la portada un
   muro de fotos. */
.catalogo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.producto {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid #d9ded7;
  border-radius: var(--r-panel);
}
.producto > img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.producto__cuerpo { display: flex; flex-direction: column; padding: 1.15rem 1.25rem 1.3rem; }
.producto h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.producto p { font-size: var(--t-s); color: var(--tinta-suave); margin-bottom: 1rem; }
.producto .boton { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0.55rem 1rem; font-size: var(--t-s); }

.producto--destacado { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.producto--destacado > img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.producto--destacado .producto__cuerpo { padding: 1.4rem 1.5rem 1.6rem; }
.producto--destacado h3 { font-size: var(--t-l); }
.producto--destacado p { font-size: var(--t-control); }
.producto--destacado .boton { min-height: 48px; padding: 0.7rem 1.4rem; font-size: var(--t-control); }

@media (max-width: 900px) { .catalogo { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .producto { grid-template-columns: 1fr; }
  .producto > img { height: auto; min-height: 0; aspect-ratio: 2 / 1; }
  .producto--destacado > img { aspect-ratio: 16 / 9; }
  .producto .boton { align-self: stretch; justify-content: center; }
}

/* Producto, material y acabado: la leyenda que evita leer el catalogo como
   seis lineas independientes. */
.claves {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: baseline;
  gap: 1rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid #cdd2ca;
}
.claves__intro { margin: 0; font-size: var(--t-l); font-weight: 600; }
.claves__texto { margin: 0; color: var(--tinta-suave); }
@media (max-width: 860px) { .claves { grid-template-columns: 1fr; } }

/* 18b. Beneficios: por que elegir la empresa (los pasos explican el como). */
.beneficios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1020px) { .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .beneficios { grid-template-columns: 1fr; gap: 1.5rem; } }
.beneficio { padding-top: 1.25rem; border-top: 1px solid #3d3f38; }
.beneficio__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--sol);
  color: var(--tinta);
}
.beneficio h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.beneficio p { margin: 0; font-size: var(--t-control); }

/* 18c. Materiales, asesoria y sectores. */
.bloque-titulo { font-size: var(--t-l); margin-bottom: 0.75rem; }
.materiales-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.materiales-bloque__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); }

.asesoria,
.sectores-bloque {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid #ccd1c9;
}
.asesoria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.asesoria__intro p:last-child { margin-bottom: 0; font-weight: 600; }

.asesoria__lista { list-style: none; margin: 0; padding: 0; }
.asesoria__lista li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid #ccd1c9;
  font-size: var(--t-control);
}
.asesoria__lista li:first-child { border-top: 1px solid #ccd1c9; }
.asesoria__lista b { font-weight: 600; }
.asesoria__lista span { color: var(--tinta-suave); }
@media (max-width: 560px) { .asesoria__lista li { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .materiales-bloque, .asesoria { grid-template-columns: 1fr; } }

/* 18d. Experiencia y equipo. El video vertical de planta acompana al texto;
   las cuatro fotos del equipo van debajo, en fila. */
.experiencia {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
.experiencia__cifra {
  margin: 0 0 1.75rem;
  padding: 0.35rem 0 0.35rem 1.1rem;
  border-left: 4px solid var(--sol);
  max-width: none;
  font-size: var(--t-control);
  color: var(--tinta-suave);
}
.experiencia__cifra b {
  display: block;
  font-family: var(--tipo-titular);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.experiencia__puntos { display: grid; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.experiencia__puntos li { padding-top: 1.1rem; border-top: 1px solid #cdd2ca; }
.experiencia__puntos h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.experiencia__puntos p { margin: 0; font-size: var(--t-control); color: var(--tinta-suave); }

.equipo { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.equipo__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 1.5vw, 1rem); }
.equipo__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-media); }
@media (max-width: 860px) { .equipo__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .experiencia { grid-template-columns: 1fr; } }

/* 18e. Testimonios: tres tarjetas fijas, sin carrusel. */
.testimonios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); }
@media (max-width: 960px) { .testimonios { grid-template-columns: 1fr; max-width: 680px; } }
.testimonio {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.5rem 1.5rem 1.4rem;
  background: #262624;
  border-radius: var(--r-panel);
}
.testimonio blockquote { flex: 1; margin: 0 0 1.25rem; }
.testimonio blockquote p { margin: 0; max-width: none; font-size: var(--t-control); line-height: 1.65; color: #e4e6e1; }
.testimonio figcaption { padding-top: 1rem; border-top: 1px solid #3d3f38; font-size: var(--t-s); }
.testimonio figcaption b { display: block; color: var(--blanco); }
.testimonio figcaption span { color: #b9bdb5; }

/* 18f. Paginas internas: el resto del catalogo, a un toque. */
.otras-lineas { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid #cdd2ca; }
.otras-lineas h3 { font-size: var(--t-control); margin-bottom: 0.75rem; }
.otras-lineas ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.otras-lineas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 1px solid #b9bfb6;
  border-radius: var(--r-control);
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--paso), background var(--paso);
}
.otras-lineas a:hover { border-color: var(--tinta); background: var(--blanco); }

/* 18g. Cierre de la portada: preguntas frecuentes y ficha, lado a lado. */
.cierre-final__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cierre-final__contacto { margin-top: clamp(2rem, 4vw, 2.75rem); }
.cierre-final__contacto h3 { font-size: var(--t-control); margin-bottom: 0.5rem; }
@media (max-width: 900px) { .cierre-final__rejilla { grid-template-columns: 1fr; } }

/* --- 16b. Movimiento (8.ª pasada) --------------------------------------- */
/* Criterio: se mueve lo que responde a un gesto (abrir, desplegar, pulsar,
   escribir) y nada mas. Sin entradas al hacer scroll ni heroe animado: el
   bucle de video ya es el movimiento de la portada, y las entradas en cada
   seccion son el tic generico de una plantilla.

   La metafora sale del producto: la pelicula se DESENROLLA (los paneles se
   abren recortandose de arriba abajo, no aparecen de golpe) y el sellado es
   una LINEA de calor (subrayados y la confirmacion de la ficha son un trazo
   que corre de izquierda a derecha). Una sola curva, sin rebotes: es una
   fabrica, no un juguete.

   Todo lo que depende de @starting-style, transition-behavior o
   interpolate-size degrada a "aparece sin transicion" donde no hay soporte.
   El bloque 17 anula duraciones con movimiento reducido. */

:root {
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 140ms;
  --medio: 240ms;
  interpolate-size: allow-keywords;
}

/* Botones: la pulsacion se nota en la mano; el de linea se RELLENA como un
   film que se tiende, en vez de cambiar de color de golpe. */
.boton {
  transition: background-color var(--paso), background-size var(--medio) var(--curva),
              color var(--paso), border-color var(--paso), scale var(--rapido) var(--curva);
}
.boton:active { transform: none; scale: 0.97; }
.boton--linea {
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
}
/* background-image se repite aqui: las reglas :hover anteriores usan el atajo
   `background`, que lo reinicia a none y dejaria el texto sol sobre nada. */
.boton--linea:hover {
  background-color: transparent;
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-size: 100% 100%;
}

/* Navegacion de escritorio: el subrayado es un trazo que se sella de
   izquierda a derecha. Sustituye al borde que cambiaba de color. */
@media (min-width: 1121px) {
  .nav__lista > li > a,
  .nav__productos { position: relative; border-bottom: 0; padding-bottom: calc(0.4rem + 2px); }
  .nav__lista > li > a::after,
  .nav__productos::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sol);
    scale: 0 1;
    transform-origin: left center;
    transition: scale var(--medio) var(--curva);
  }
  .nav__lista > li > a:hover::after,
  .nav__productos:hover::after,
  .nav__productos[aria-expanded="true"]::after,
  .nav__lista > li > a[aria-current="page"]::after,
  .nav__grupo:has([aria-current="page"]) > .nav__productos::after { scale: 1 1; }

  /* Desplegable de Productos: se desenrolla hacia abajo. Al cerrar, mas
     rapido: quien cierra ya decidio. */
  .nav__submenu {
    clip-path: inset(0 0 0 0 round var(--r-panel));
    opacity: 1;
    translate: 0 0;
    transition: clip-path var(--medio) var(--curva), opacity var(--rapido) linear,
                translate var(--medio) var(--curva), display var(--medio) allow-discrete;
  }
  .nav__submenu[hidden] {
    clip-path: inset(0 0 100% 0 round var(--r-panel));
    opacity: 0;
    translate: 0 -4px;
    transition-duration: var(--rapido);
  }
  @starting-style {
    .nav__submenu:not([hidden]) {
      clip-path: inset(0 0 100% 0 round var(--r-panel));
      opacity: 0;
      translate: 0 -6px;
    }
  }
  /* El puente invisible (::before) queda fuera del recorte: sigue sirviendo
     para bajar el raton sin que se cierre. */
}

/* Menu movil: el panel se desenrolla bajo la cabecera y la sublista de
   Productos crece en alto en vez de empujar el resto de golpe. */
@media (max-width: 1120px) {
  .nav {
    transition: clip-path var(--medio) var(--curva), opacity var(--rapido) linear,
                display var(--medio) allow-discrete;
    clip-path: inset(0 0 -40px 0);
  }
  .nav:not(.nav--abierta) { clip-path: inset(0 0 100% 0); opacity: 0; transition-duration: var(--rapido); }
  @starting-style {
    .nav.nav--abierta { clip-path: inset(0 0 100% 0); opacity: 0; }
  }
  .nav__submenu {
    overflow: clip;
    height: auto;
    transition: height var(--medio) var(--curva), display var(--medio) allow-discrete;
  }
  .nav__submenu[hidden] { height: 0; transition-duration: var(--rapido); }
  @starting-style { .nav__submenu:not([hidden]) { height: 0; } }
}

/* Icono del boton Menu: el que entra gira un cuarto. Solo tras el primer uso
   (data-usado lo pone el JS), para que no se anime al cargar la pagina. */
.menu-boton[data-usado] svg { animation: psp-icono var(--medio) var(--curva); }
@keyframes psp-icono { from { rotate: -90deg; opacity: 0; } }

/* Preguntas frecuentes: la respuesta crece en alto. Navegadores sin
   ::details-content descartan la regla entera y abren como siempre. */
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--medio) var(--curva), content-visibility var(--medio) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq details { transition: background-color var(--paso); }
.faq details:hover { background-color: rgba(255, 255, 255, 0.85); }

/* Campos de la ficha: el borde pasa al sol sin salto. */
.campo input, .campo select, .campo textarea { transition: border-color var(--paso); }

/* Ficha: cada vez que el mensaje se actualiza (tras una pausa al teclear),
   una linea de sellado recorre la base de la vista previa. Es la unica
   confirmacion de que lo escrito ya esta en el mensaje. */
.ficha__vista { position: relative; overflow: hidden; }
.ficha__vista::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--sol);
  scale: 0 1;
  transform-origin: left center;
  opacity: 0;
}
.ficha__vista--sellada::after { animation: psp-sello 620ms var(--curva); }
@keyframes psp-sello {
  0%   { scale: 0 1; opacity: 1; }
  60%  { scale: 1 1; opacity: 1; }
  100% { scale: 1 1; opacity: 0; }
}

/* Llegada a una tarjeta desde el menu o el pie (#mangas, #bolsas-pebd-pead...):
   el borde se enciende un momento para decir "es esta". */
.producto:target { animation: psp-llegada 1400ms var(--curva) 300ms both; }
@keyframes psp-llegada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 202, 0, 0); border-color: #d9ded7; }
  25%      { box-shadow: 0 0 0 4px rgba(255, 202, 0, 0.9); border-color: var(--sol); }
}

/* --- 16d. Burbuja de WhatsApp (escritorio) ----------------------------- */
/* El disco es el sol de la marca, como todos los botones de WhatsApp del
   sitio: el simbolo ya dice "WhatsApp", el color dice "Plastic Sol". El texto
   se desenrolla hacia la izquierda desde el disco (misma metafora que los
   paneles del bloque 16b). Por debajo de 861 px manda la barra flotante. */
.burbuja-wa { display: none; }
@media (min-width: 861px) {
  .burbuja-wa {
    position: fixed;
    right: clamp(1rem, 2.2vw, 1.75rem);
    bottom: calc(clamp(1rem, 2.2vw, 1.75rem) + env(safe-area-inset-bottom));
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--tinta);
    text-decoration: none;
  }
  .burbuja-wa__disco {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sol);
    /* Unica sombra del sitio: la burbuja flota sobre fotos y bandas de sol,
       y sin ella se pierde contra la franja amarilla del cierre. */
    box-shadow: 0 0 0 3px var(--tinta), 0 10px 24px rgba(27, 27, 26, 0.28);
    transition: scale var(--rapido) var(--curva), background-color var(--paso);
  }
  .burbuja-wa__disco svg { width: 30px; height: 30px; }
  .burbuja-wa:hover .burbuja-wa__disco { background: var(--sol-hondo); }
  .burbuja-wa:active .burbuja-wa__disco { scale: 0.94; }

  .burbuja-wa__texto {
    padding: 0.7rem 1.1rem;
    border-radius: var(--r-control);
    background: var(--tinta);
    color: var(--blanco);
    font: 500 var(--t-s) / 1.2 var(--tipo-texto);
    white-space: nowrap;
    clip-path: inset(0 0 0 100% round var(--r-control));
    opacity: 0;
    translate: 8px 0;
    transition: clip-path var(--medio) var(--curva), opacity var(--rapido) linear,
                translate var(--medio) var(--curva);
    pointer-events: none;
  }
  .burbuja-wa:hover .burbuja-wa__texto,
  .burbuja-wa:focus-visible .burbuja-wa__texto {
    clip-path: inset(0 0 0 0 round var(--r-control));
    opacity: 1;
    translate: 0 0;
  }
  /* El anillo de foco general rodearia tambien el texto invisible: aqui va
     solo en el disco. */
  .burbuja-wa:focus-visible { outline: 0; }
  .burbuja-wa:focus-visible .burbuja-wa__disco { outline: 3px solid var(--sol); outline-offset: 5px; }
}

/* Distintivo del Libro en el pie: bloque propio para que el padding de los
   enlaces del pie no lo descoloque; opacidad al pasar, sin cambio de color. */
.pie a.pie__libro { display: inline-block; margin-top: 0.6rem; padding-block: 0.4rem; min-height: 0; text-decoration: none; }
.pie__libro img { display: block; width: 70px; height: auto; transition: opacity var(--paso); }
.pie__libro:hover img { opacity: 0.8; }

/* --- 16c. Libro de Reclamaciones --------------------------------------- */
/* Formulario legal: claro, sobre el fondo de la pagina y a una columna de
   lectura. Los campos reutilizan .campo (pensado oscuro para la ficha) con
   una variante clara. */

.libro__envoltura { max-width: 52rem; }
.libro h1 { margin-bottom: 1rem; }

.libro__proveedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0 0 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--blanco);
  border: 1px solid #d9ded7;
  border-radius: var(--r-panel);
}
.libro__proveedor dt { font-size: var(--t-xs); color: var(--acero); }
.libro__proveedor dd { margin: 0.1rem 0 0; font-weight: 500; }

.libro__grupo {
  margin: 0 0 1.25rem;
  padding: clamp(1.2rem, 3vw, 1.75rem);
  background: var(--blanco);
  border: 1px solid #d9ded7;
  border-radius: var(--r-panel);
  min-width: 0;
}
.libro__grupo legend {
  float: left;
  width: 100%;
  margin-bottom: 1rem;
  font-family: var(--tipo-titular);
  font-weight: 600;
  font-size: var(--t-l);
}
.libro__grupo legend + * { clear: both; }

.libro .campo__etiqueta { color: var(--tinta-suave); font-size: var(--t-s); }
.libro .campo input,
.libro .campo select,
.libro .campo textarea {
  background: var(--polietileno);
  color: var(--tinta);
  border-color: #c3c9c0;
  font-variant-numeric: normal;
}
.libro .campo input::placeholder,
.libro .campo textarea::placeholder { color: #8a8f86; }
.libro .campo input:focus,
.libro .campo select:focus,
.libro .campo textarea:focus { border-color: var(--tinta); }
.libro .campo input:user-invalid,
.libro .campo textarea:user-invalid { border-color: #b3261e; }

.libro__doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 640px) { .libro__doble { grid-template-columns: 1fr; } }

.libro__ayuda { font-size: var(--t-s); color: var(--acero); margin: -0.2rem 0 1rem; }

.libro__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  cursor: pointer;
}
.libro__check input,
.libro__opcion input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--tinta);
}
.libro__check--declaracion {
  padding: 1rem 1.25rem;
  background: var(--sol-claro);
  border-radius: var(--r-campo);
  font-weight: 500;
}

.libro__opciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.libro__opcion {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 1rem;
  border: 1px solid #c3c9c0;
  border-radius: var(--r-campo);
  cursor: pointer;
  transition: border-color var(--paso), background-color var(--paso);
}
.libro__opcion:hover { border-color: var(--tinta); }
.libro__opcion:has(input:checked) { border-color: var(--tinta); background: var(--polietileno); }
.libro__opciones--tipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.libro__opciones--tipo b { display: block; margin-bottom: 0.15rem; }
.libro__opciones--tipo span { font-size: var(--t-s); color: var(--tinta-suave); }
@media (max-width: 640px) { .libro__opciones--tipo { grid-template-columns: 1fr; } }

/* Con JavaScript el campo del apoderado solo aparece si se marca "menor";
   sin JavaScript queda siempre visible. */
.libro--js [data-libro-apoderado]:not(.libro__visible) { display: none; }

.libro__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.libro__leyendas { margin: 1.25rem 0 1.5rem; }
.libro__leyendas p { font-size: var(--t-s); color: var(--acero); margin: 0 0 0.5rem; }

.libro__enviar[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Resultado */
.libro__estado { padding: 0.9rem 1.2rem; border-radius: var(--r-campo); background: var(--blanco); border: 1px solid #d9ded7; }
.libro__estado--ok { background: var(--sol-claro); border-color: var(--sol); }
.libro__errores { margin: 0 0 1.5rem; padding: 1rem 1.25rem 1rem 2.4rem; background: var(--blanco); border: 1px solid #b3261e; border-radius: var(--r-campo); }
.libro__errores li { margin-bottom: 0.3rem; }
.libro__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 2rem; }

.hoja {
  padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--blanco);
  border: 1px solid #d9ded7;
  border-radius: var(--r-panel);
}
.hoja__prueba { margin: 0 0 1rem; padding: 0.5rem 0.9rem; background: var(--sol); border-radius: var(--r-campo); font-weight: 600; }
.hoja__titulo { margin: 0; color: var(--acero); font-size: var(--t-s); }
.hoja__numero { margin: 0.1rem 0 1.25rem; font-family: var(--tipo-titular); font-weight: 700; font-size: var(--t-xl); }
.hoja__tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.hoja__tabla th, .hoja__tabla td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid #e3e7e1; }
.hoja__tabla th[scope="row"] { width: 34%; font-weight: 500; color: var(--tinta-suave); }
.hoja__seccion th { padding-top: 1.1rem; font-family: var(--tipo-titular); font-weight: 600; color: var(--tinta); }
.hoja__pendiente { color: var(--acero); }
.hoja__leyenda { font-size: var(--t-xs); color: var(--acero); margin: 1rem 0 0; }
@media (max-width: 560px) {
  .hoja__tabla th[scope="row"], .hoja__tabla td { display: block; width: auto; }
  .hoja__tabla th[scope="row"] { padding-bottom: 0; border-bottom: 0; }
}

/* Impresion de la hoja: solo la hoja. */
@media print {
  .cabecera, .pie, .flotante, .burbuja-wa, .migas, .libro__acciones, .libro__estado { display: none !important; }
  body { background: #fff; }
  .banda { padding-block: 0; }
  .hoja { border: 0; padding: 0; }
}

/* --- 17. Preferencia de movimiento reducido ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* `*::before, *::after` no alcanza a ::details-content: sin esta regla las FAQ
   seguian creciendo 200 ms con movimiento reducido (medido por cuadro, 16-sep).
   Va sola porque un selector que el navegador no conoce invalida la lista
   entera y se llevaria por delante la regla de arriba. */
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition-duration: 0.01ms !important; }
}