/* componentes.css — Header, botones, bandas, tarjetas, proceso, FAQ, formulario,
   footer y barra flotante. Mobile-first: se escribe para 360px y se sube con
   @media (min-width: …). Cero hex, cero px: todo sale de tokens.css.

   Reparto con layout.css: layout posee .contenedor, .seccion, .seccion__encabezado
   y sus fondos. Aquí viven las cuatro bandas que NO llevan .seccion en el markup
   (.hero, .credenciales, .planta, .cta-intermedio) y el interior de cada componente.

   Contraste verificado (WCAG AA) donde aplica; los ratios van anotados en su regla. */

/* --- 0. Texto de utilidad — una sola receta para todas las etiquetas condensadas --- */

.hero__eyebrow,
.credencial__unidad,
.credencial__etiqueta,
.paso__numero,
.planta__eyebrow,
.dato-alcance__etiqueta,
.via-contacto__etiqueta,
.pie__titulo,
.barra-flotante__accion {
  font-family: var(--fuente-utilidad);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* docs/03: tracking de utilidad. Falta token, ver reporte */
  line-height: var(--alto-lead);
}

/* --- 1. HEADER, LOGO, NAVEGACIÓN Y MENÚ --- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--hueso);
  border-bottom: var(--borde);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

/* Lo añade js/ui/header.js al hacer scroll: header más bajo y con línea marcada */
.encabezado--compacto .encabezado__interior {
  padding-block: var(--e-2);
}

.encabezado--compacto {
  border-bottom-color: var(--tinta-suave);
}

/* El párrafo de entrada de cada sección. Sin esta regla caía al 16px por
   defecto en --tinta, mientras el subtítulo del hero iba a --txt-lg en
   --tinta-suave: dos "entradillas" distintas según la sección. */
.seccion__subtitulo {
  max-width: var(--medida);
  margin: var(--e-3) 0 0;
  font-size: var(--txt-lg);
  line-height: var(--alto-lead);
  color: var(--tinta-suave);
}

/* ---- Logo ---- */

.logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--target-tactil);
  color: var(--tinta);
  text-decoration: none;
}

/* El isotipo va en el petróleo de marca (#00546E), no en el verde del grupo:
   este sitio es Laboratorios PHN y su paleta es la petróleo. Sobre el header
   claro se lee a 7:1. Sobre el header TRANSPARENTE —que solo aparece mientras
   el aro petróleo está arriba— el petróleo sobre petróleo desaparecería, así
   que ahí se invierte a blanco (ver .encabezado--transparente más abajo). */
.logo__isotipo {
  flex: none;
  width: auto;
  /* 2.75rem = 44px, que es justo el `min-height` táctil que ya tenía .logo:
     el isotipo crece pero el header NO cambia de alto, así que los
     `scroll-margin-top` de los anclajes siguen cuadrando. */
  height: 2.75rem;
}

.logo__texto {
  display: flex;
  flex-direction: column;
}

.logo__marca {
  font-family: var(--fuente-display);
  font-size: var(--txt-lg);
  line-height: var(--alto-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.logo__lema {
  display: none;   /* el lema solo cabe en desktop */
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
}

.logo:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

/* ---- Navegación: panel desplegable en mobile ----
   El estado abierto se lee del propio botón con :has(), sin clases de JS.
   visibility se transiciona con retardo para que el panel siga siendo
   inaccesible al tabulador mientras está cerrado. */

.navegacion {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--z-menu);
  padding: var(--e-4) calc(var(--canal) / 2) var(--e-6);   /* alinea con .contenedor */
  background-color: var(--hueso);
  border-bottom: var(--borde);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--e-2) * -1));
  transition:
    opacity var(--dur-rapida) var(--ease),
    transform var(--dur-rapida) var(--ease),
    visibility 0s linear var(--dur-rapida);
}

.encabezado:has(.encabezado__hamburguesa[aria-expanded="true"]) .navegacion {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Sin scroll de fondo mientras el menú tapa la página */
body:has(.encabezado__hamburguesa[aria-expanded="true"]) {
  overflow: hidden;
}

.navegacion__lista {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navegacion__enlace {
  display: flex;
  align-items: center;
  min-height: calc(var(--e-8) + var(--e-3));   /* 44px de área táctil */
  padding-inline: var(--e-2);
  border-bottom: var(--borde);
  color: var(--tinta);
  font-size: var(--txt-base);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}

.navegacion__enlace--activo,
.navegacion__enlace[aria-current] {
  font-weight: 600;
  border-bottom-color: var(--acento-hondo);
}

.navegacion__enlace:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

/* ---- Botón hamburguesa ---- */

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.encabezado__hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--e-8) + var(--e-3));
  height: calc(var(--e-8) + var(--e-3));
  padding: 0;
  background-color: transparent;
  border: var(--borde);
  border-radius: var(--radio-btn);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}

.encabezado__hamburguesa[aria-expanded="true"] {
  background-color: var(--hueso-hondo);
  border-color: var(--tinta);
}

.encabezado__hamburguesa:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

/* Doble clase a propósito: .boton (más abajo) impone display y ganaría el empate */
.boton.encabezado__cta {
  display: none;   /* a 360px no cabe: la cubre la barra flotante */
}

/* --- 2. BOTONES --- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--target-tactil);
  padding: var(--e-4) var(--e-6);
  border: var(--borde);
  border-color: transparent;
  border-radius: var(--radio-btn);
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease),
    color var(--dur-rapida) var(--ease),
    transform var(--dur-rapida) var(--ease);
}

.boton:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

.boton:active {
  transform: scale(0.98);
}

/* Petróleo sólido con texto blanco, como el botón de la referencia: 7.5:1.
   OJO: sobre el --acento claro, el texto blanco da 2.34:1 y REPRUEBA AA — por
   eso el primario NO usa --acento de fondo. */
.boton--primario {
  background-color: var(--acento-hondo);
  color: var(--blanco);
  border-color: var(--acento-hondo);
}

.boton--secundario {
  background-color: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

.boton--fantasma {
  background-color: transparent;
  color: var(--tinta);
  border-color: var(--hueso-hondo);
}

@media (hover: hover) {
  .boton--primario:hover {
    background-color: var(--tinta);           /* blanco encima: 12.9:1 */
    border-color: var(--tinta);
  }

  .boton--secundario:hover {
    background-color: var(--tinta);
    color: var(--hueso);                   /* 15.5:1 */
  }

  .boton--fantasma:hover {
    background-color: var(--hueso-hondo);
    border-color: var(--tinta);
  }
}

/* --- 3. HERO --- */

/* Hero calcado de la referencia: la foto de la nave entra a sangre por la
   derecha y un velo la devuelve al fondo claro por la izquierda, donde va el
   texto. Mobile-first: en pantalla estrecha el velo es vertical y casi opaco
   (el texto ocupa todo el ancho); el diagonal solo aparece desde 768px. */
.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* La franja de credenciales vive DENTRO del hero: son la prueba de lo que
   acaba de prometer el titular, y así la animación es la tercera sección de
   la página y no la cuarta. La foto y el velo se quedan en .hero__escena
   para no correr por debajo de la franja. */
.hero__escena {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: min(72svh, 42rem);
  padding-block: var(--e-16) var(--e-12);
}

.hero .credenciales {
  position: relative;
  background-color: var(--hueso-hondo);
}

.hero__escena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: image-set(
    url("../assets/img/hero/hero-planta.webp") type("image/webp"),
    url("../assets/img/hero/hero-planta.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 68% center;
}

.hero__escena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    var(--hueso) 0%,
    color-mix(in srgb, var(--hueso) 94%, transparent) 46%,
    color-mix(in srgb, var(--hueso) 74%, transparent) 100%
  );
}

@media (min-width: 768px) {
  .hero__escena::after {
    background: linear-gradient(
      100deg,
      var(--hueso) 0%,
      var(--hueso) 32%,
      color-mix(in srgb, var(--hueso) 80%, transparent) 48%,
      transparent 74%
    );
  }

  .hero__eyebrow,
  .hero__titulo,
  .hero__subtitulo,
  .hero__acciones {
    max-width: 34rem;
  }
}

.hero__eyebrow {
  margin: 0 0 var(--e-4);
  font-size: var(--txt-sm);
  color: var(--tinta-suave);   /* 6.7:1 sobre hueso, medido */
}

.hero__titulo {
  max-width: 18ch;
  margin: 0 0 var(--e-6);
  font-family: var(--fuente-display);
  font-size: var(--txt-3xl);
  line-height: var(--alto-display);
  color: var(--acento-hondo);
}

.hero__subtitulo {
  max-width: 46ch;
  margin: 0 0 var(--e-8);
  font-size: var(--txt-base);
  line-height: var(--alto-lead);
  color: var(--tinta-suave);
}

/* La referencia arranca el párrafo del hero en negrita y petróleo, y lo suelta
   a mitad de frase: da entrada sin necesidad de otro titular. */
.hero__subtitulo strong {
  font-weight: 600;
  color: var(--acento-hondo);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.hero__acciones .boton {
  flex: 1 1 100%;   /* a 360px cada botón ocupa su renglón */
}

/* --- 4. BANDA DE CREDENCIALES --- */

.credenciales {
  padding-block: var(--e-8);
  border-block: var(--borde);
}

.credenciales__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credencial {
  padding-left: var(--e-4);
  border-left: var(--borde);
}

.credencial__numero {
  margin: 0 0 var(--e-1);
  font-family: var(--fuente-display);
  font-size: var(--txt-xl);
  line-height: var(--alto-display);
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.credencial__unidad {
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
}

.credencial__etiqueta {
  margin: 0;
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
}

/* --- 5. TARJETAS DE CAPACIDADES --- */

.capacidades__rejilla {
  display: grid;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Columna centrada con disco de ícono, como la referencia: ni tarjeta, ni
   borde, ni foto. La foto que había aquí sigue en assets/img/lineas/. */
.tarjeta-capacidad {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  text-align: center;
}

.tarjeta-capacidad__disco {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background-color: var(--acento-hondo);
  color: var(--blanco);
}

.tarjeta-capacidad__cuerpo {
  display: grid;
  gap: var(--e-3);
}

.tarjeta-capacidad__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--txt-xl);
  font-weight: 400;
  line-height: var(--alto-display);
  color: var(--acento-hondo);
}

.tarjeta-capacidad__texto {
  max-width: 38ch;
  margin: 0 auto;
  color: var(--tinta-suave);   /* 6.2:1 sobre el fondo claro, medido */
}

/* --- 6. PROCESO (timeline numerada) --- */
/*    La textura es una línea de 1px, no una sombra: vertical en mobile,
   horizontal a partir de 1024px.
   */

.proceso__pasos {
  position: relative;
  display: grid;
  gap: var(--e-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.proceso__pasos::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--e-6);
  border-left: var(--borde);
}

.paso {
  position: relative;
  min-height: var(--e-12);
  padding-left: var(--e-16);
}

.paso__numero {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--e-12);
  height: var(--e-12);
  margin: 0;
  background-color: var(--hueso);
  border: var(--borde);
  border-radius: var(--radio-btn);
  font-size: var(--txt-base);
  color: var(--tinta);
}

.paso__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--txt-lg);
  font-weight: 400;
  line-height: var(--alto-display);
  color: var(--tinta);
  font-family: var(--fuente-display);
}

.paso__texto {
  max-width: var(--medida);
  margin: 0;
  color: var(--tinta-suave);
}

/* --- 7. BLOQUE DE PLANTA (fondo --acero) --- */
/*    Contraste sobre --acero: --blanco 13.1:1 · --hueso-hondo 10.7:1 · --acento 5.6:1
   */

.planta {
  padding-block: var(--pad-seccion);
  background-color: var(--acero);
  color: var(--hueso-hondo);
}

.planta__interior {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}

.planta__figura {
  display: block;
}

.planta__imagen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-img);
}

.planta__eyebrow {
  margin: 0 0 var(--e-3);
  font-size: var(--txt-sm);
  color: var(--acento);
}

.planta__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--fuente-display);
  font-size: var(--txt-2xl);
  line-height: var(--alto-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--blanco);
}

.planta__texto {
  max-width: var(--medida);
  margin: 0;
  font-size: var(--txt-lg);
  line-height: var(--alto-lead);
  color: var(--hueso-hondo);
}

/* --- 8. ALCANCE: datos, qué incluye y qué no --- */

.alcance__datos {
  display: grid;
  gap: var(--e-6);
  margin: 0 0 var(--e-12);
}

.dato-alcance {
  padding-top: var(--e-3);
  border-top: var(--borde);
  border-top-color: var(--tinta);
}

.dato-alcance__etiqueta {
  margin: 0 0 var(--e-1);
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
}

.dato-alcance__valor {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: 600;
  line-height: var(--alto-lead);
  color: var(--tinta);
}

.alcance__linea {
  padding: var(--e-6);
  background-color: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
}

.lista-alcance__titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--txt-lg);
  font-weight: 400;
  line-height: var(--alto-display);
  color: var(--tinta);
  font-family: var(--fuente-display);
}

.alcance__linea-intro {
  margin: 0 0 var(--e-6);
  color: var(--tinta-suave);
}

/* Los 10 pasos de la linea. Es un <ol> de verdad: el orden ES el dato, no
   decoracion, asi que la numeracion tiene que existir tambien para quien
   escucha la pagina. El contador propio solo cambia como se ve. */
.linea-produccion {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso-linea;
}

.paso-linea {
  position: relative;
  padding-inline-start: var(--e-12);
  counter-increment: paso-linea;
}

.paso-linea::before {
  content: counter(paso-linea, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--acento-hondo);
  font-family: var(--fuente-display);
  font-size: var(--txt-lg);
  line-height: 1;
}

.paso-linea__titulo {
  margin: 0;
  font-weight: 600;
  color: var(--tinta);
}

.paso-linea__texto {
  margin: var(--e-1) 0 0;
  color: var(--tinta-suave);
  font-size: 0.92rem;
}

@media (min-width: 768px) {
  .linea-produccion {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-6) var(--e-8);
  }
}

/* La sección va sobre banda acero, así que el texto se aclara aquí. Estas
   reglas EXISTÍAN y las borró de más una limpieza automática de `.ventaja*`:
   el patrón casaba también `.ventajas .seccion__titulo`, y el encabezado se
   quedó en tinta oscura sobre fondo oscuro, prácticamente invisible. */
.ventajas {
  color: var(--hueso);
}

.ventajas .seccion__titulo,
.ventajas .etiqueta-caja {
  color: var(--hueso);
}

.ventajas .seccion__subtitulo {
  color: var(--hueso-hondo);
}

/* --- El Factor PHN: cinco argumentos numerados ---
   Va un <ol> de verdad: el orden es parte del argumento comercial (empieza por
   lo que más diferencia). El número grande es decorativo y va aria-hidden,
   porque el <ol> ya numera para quien escucha la página; leerlo dos veces
   sería ruido. */
.factores {
  display: grid;
  gap: var(--e-8);
  margin: var(--e-12) 0 0;
  padding: 0;
  list-style: none;
}

.factor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
  padding-block-end: var(--e-8);
  border-block-end: 1px solid rgb(255 255 255 / 0.14);
}

.factor:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.factor__numero {
  margin: 0;
  min-width: 2.2rem;
  color: var(--acento);
  font-family: var(--fuente-display);
  font-size: var(--txt-xl);
  /* Alineado con la MAYÚSCULA del título de al lado, no con la caja del texto:
     puesto a line-height 1 el número flotaba un par de píxeles por encima y la
     fila entera se leía descuadrada. */
  line-height: var(--alto-display);
}

.factor__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--txt-lg);
  font-weight: 400;
  line-height: var(--alto-display);
  color: var(--hueso);
}

/* El gancho es la promesa en una línea: se destaca sobre el cuerpo porque es
   lo único que va a leer quien pasa rápido. */
.factor__gancho {
  margin: var(--e-2) 0 0;
  color: var(--acento);
  font-weight: 600;
}

.factor__texto {
  margin: var(--e-3) 0 0;
  color: var(--hueso-hondo);
  max-width: var(--medida);
}

@media (min-width: 768px) {
  .factores {
    gap: var(--e-12);
  }

  .factor {
    grid-template-columns: 4rem 1fr;
    gap: var(--e-6);
  }
}

/* A partir de 1024 los cinco factores se reparten en DOS columnas.
   Medido el 2026-08-21 a 1440px: en una sola columna el texto rompía a los
   ~590 px y la mitad derecha del contenedor —590 px— se quedaba vacía de arriba
   abajo, mientras la sección medía 1 776 px de alto. El encabezado va centrado,
   así que el desequilibrio se veía todavía más. En dos columnas la sección se
   queda en torno a la mitad de alto y el ancho se usa entero.
   Y desaparecen los filetes: con cinco elementos, la última fila lleva uno solo
   y su filete quedaba cortado a medio ancho, como una tabla mal cerrada. Aquí
   separan el hueco y el número, que ya es bastante. */
@media (min-width: 1024px) {
  .factores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-16);
    row-gap: var(--e-12);
    align-items: start;
  }

  .factor {
    padding-block-end: 0;
    border-block-end: 0;
    grid-template-columns: 3rem 1fr;
    gap: var(--e-4);
  }

  /* Sin filete que marque el corte, el aire entre bloques tiene que hacer ese
     trabajo: el párrafo se aprieta un punto contra su propio título para que la
     unidad "número + título + gancho + texto" se lea junta. */
  .factor__texto {
    margin-block-start: var(--e-2);
  }
}

/* --- Tabla comparativa del reto ---
   MÓVIL PRIMERO, y aquí eso importa de verdad: una tabla de 3 columnas con
   texto corrido no cabe en 360px sin scroll lateral, que es de lo peor que se
   le puede hacer a un lector. Así que en móvil la tabla se reorganiza en
   tarjetas (cada fila una tarjeta, cada celda con su rótulo desde
   `data-columna`) y el <table> solo se comporta como tabla desde 900px. */
.comparativa {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: var(--e-12);
  text-align: start;
}

.comparativa__encabezado {
  display: none;   /* en móvil el rótulo lo pone cada celda */
}

.comparativa__fila {
  display: block;
  margin-block-end: var(--e-6);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background-color: var(--blanco);
}

.comparativa__celda {
  display: block;
  padding: var(--e-4) var(--e-6);
  text-align: start;
  font-weight: 400;
  vertical-align: top;
}

.comparativa__celda + .comparativa__celda {
  border-block-start: var(--borde);
}

/* El rótulo de columna, que en móvil no lo pone el <thead>. Va por CSS porque
   es orientación visual: el <th scope="col"> sigue existiendo para quien
   escucha la página, así que nadie lo oye dos veces. */
.comparativa__celda::before {
  content: attr(data-columna);
  display: block;
  margin-block-end: var(--e-2);
  color: var(--tinta-suave);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparativa__clave {
  display: block;
  font-weight: 600;
  color: var(--tinta);
}

.comparativa__detalle {
  display: block;
  margin-block-start: var(--e-1);
  color: var(--tinta-suave);
}

/* La columna del problema se marca en frío y la de PHN en acento: se distinguen
   por COLOR y por posición, nunca solo por color. */
.comparativa__celda--reto {
  background-color: var(--hueso-hondo);
}

.comparativa__celda--phn .comparativa__clave {
  color: var(--acento-hondo);
}

@media (min-width: 900px) {
  .comparativa__encabezado {
    display: table-cell;
    padding: 0 var(--e-6) var(--e-4);
    color: var(--tinta-suave);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-block-end: var(--borde);
  }

  .comparativa__fila {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .comparativa__celda {
    display: table-cell;
    width: 33.33%;
    border-block-end: var(--borde);
    border-inline-start: var(--borde);
  }

  .comparativa__celda:first-child {
    border-inline-start: 0;
  }

  .comparativa__celda + .comparativa__celda {
    border-block-start: 0;
  }

  .comparativa__celda::before {
    display: none;   /* desde aquí el rótulo lo pone el <thead> */
  }
}

/* --- 9. CTA INTERMEDIO --- */

.cta-intermedio {
  padding-block: var(--pad-seccion);
  background-color: var(--hueso-hondo);
}

.cta-intermedio__interior {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  text-align: center;
}

.cta-intermedio__titulo {
  max-width: 22ch;
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--txt-2xl);
  line-height: var(--alto-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tinta);
}

.cta-intermedio__texto {
  max-width: var(--medida);
  margin: 0 0 var(--e-2);
  font-size: var(--txt-lg);
  line-height: var(--alto-lead);
  color: var(--tinta-suave);   /* 6.0:1 sobre hueso-hondo, medido */
}

/* --- 10. FAQ — <details> con marcador propio --- */
/*    El triángulo nativo se oculta y el + se dibuja con dos barras de 1px:
   la vertical rota 90° al abrir y se funde con la horizontal, o sea "−".
   */

.faq__lista {
  border-top: var(--borde);
}

.faq__item {
  border-bottom: var(--borde);
}

.faq__pregunta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--e-8) + var(--e-3));
  padding: var(--e-4) var(--e-12) var(--e-4) 0;
  list-style: none;
  cursor: pointer;
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::before,
.faq__pregunta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--e-3);
  width: var(--e-4);
  border-top: var(--borde);
  border-top-color: var(--tinta);
  transform: translateY(-50%);
  transition: transform var(--dur-media) var(--ease);
}

.faq__pregunta::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__item[open] .faq__pregunta::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq__pregunta:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

.faq__titulo {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: 600;
  line-height: var(--alto-lead);
  color: var(--tinta);
}

/* El <svg> del signo vive en el markup pero lo dibuja el pseudo-elemento:
   así el + puede animarse hasta −. Ver reporte: se puede borrar del HTML. */
.faq__icono {
  display: none;
}

.faq__respuesta {
  max-width: var(--medida);
  /* sin sangría derecha: el hueco de 48px es del botón, que ahí lleva el signo,
     no de la respuesta — en 360px le comía 48 de 320px y la desalineaba */
  padding: 0 0 var(--e-6);
  color: var(--tinta-suave);
}

.faq__respuesta p {
  margin: 0;
}

/* --- 11. CONTACTO — vías y formulario --- */

.contacto__interior {
  display: grid;
  gap: var(--e-12);
}

.contacto__vias {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mosaico de bloques, como el de la referencia: dos azules claros para los
   canales rápidos y petróleo sólido para la dirección, que es la que cierra.
   El ícono va en disco, no suelto. */
.via-contacto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e-4);
  align-items: center;
  padding: var(--e-6);
  background-color: var(--mosaico-1);
  border: 0;
  border-radius: var(--radio-tarjeta);
}

.via-contacto:nth-child(3) {
  background-color: var(--mosaico-2);
}

.via-contacto:nth-child(4) {
  background-color: var(--acento-hondo);
}

.via-contacto:nth-child(4) .via-contacto__etiqueta {
  color: var(--acento);          /* 5.6:1 sobre petróleo */
}

.via-contacto:nth-child(4) .via-contacto__valor {
  color: var(--blanco);          /* 8.4:1 */
}

.via-contacto__icono {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;      /* el dibujo se queda en 24px dentro del disco */
  border-radius: 50%;
  background-color: var(--acento-hondo);
  color: var(--blanco);
}

.via-contacto:nth-child(4) .via-contacto__icono {
  background-color: var(--blanco);
  color: var(--acento-hondo);
}

.via-contacto__etiqueta {
  margin: 0;
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
}

.via-contacto__valor {
  margin: 0;
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--tinta);
  text-decoration-color: var(--acento);
  text-underline-offset: var(--e-1);
}

a.via-contacto__valor {
  text-decoration: underline;
  min-height: var(--target-tactil);
  display: inline-flex;
  align-items: center;
}

a.via-contacto__valor:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

/* ---- Formulario ---- */

.formulario {
  display: grid;
  gap: var(--e-4);
}

.campo {
  display: grid;
  gap: var(--e-2);
}

.campo--ancho,
.formulario__acciones,
.formulario__estado {
  grid-column: 1 / -1;
}

.campo__etiqueta {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--tinta);
}

.campo__requerido {
  color: var(--tinta-suave);
}

.campo__control {
  width: 100%;
  min-height: calc(var(--e-8) + var(--e-3));
  padding: var(--e-3) var(--e-4);
  background-color: var(--blanco);
  border: var(--borde);
  border-color: var(--tinta-suave);
  border-radius: var(--radio-img);
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-base);
  line-height: var(--alto-lead);
  color: var(--tinta);
  transition: border-color var(--dur-rapida) var(--ease);
}

.campo__control::placeholder {
  color: var(--tinta-suave);
}

.campo__control:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: 0;
  border-color: var(--tinta);
}

.campo__control--area {
  min-height: var(--e-24);
  resize: vertical;
}

/* Estado de error: lo marca js/ui/formulario.js con aria-invalid, no con clases */
.campo__control[aria-invalid="true"] {
  border-color: var(--rojo-error);
}

.campo__control[aria-invalid="true"]:focus-visible {
  outline-color: var(--rojo-error);
}

.campo__error {
  margin: 0;
  font-size: var(--txt-sm);
  font-weight: 500;
  line-height: var(--alto-lead);
  color: var(--rojo-error);
}

.campo__error:empty {
  display: none;
}

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}

.formulario__enviar {
  flex: 1 1 100%;
}

/* Estado cargando: aria-busy en el botón. El disco gira con el mismo ease del sitio */
.formulario__enviar[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.formulario__enviar[aria-busy="true"]::after {
  content: "";
  width: var(--e-4);
  height: var(--e-4);
  border: var(--grosor-foco) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radio-btn);
  animation: girar var(--dur-lenta) linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.formulario__nota {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
}

.formulario__estado {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: var(--borde);
  border-radius: var(--radio-img);
  font-size: var(--txt-base);
  color: var(--tinta);
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado--exito {
  background-color: var(--blanco);
  border-color: var(--acento);
}

.formulario__estado--error {
  background-color: var(--blanco);
  border-color: var(--rojo-error);
  color: var(--rojo-error);
}

/* --- 12. FOOTER --- */
/*    Contraste sobre --acero: --blanco 13.1:1 · --hueso 12.0:1 · --hueso-hondo 10.7:1
   --tinta-suave NO se usa como texto aquí (2.7:1); las divisorias usan
   --linea-oscura, que sí se ve sobre el acero.
   */

.pie {
  /* Arriba manda la filigrana de marca: el relleno superior se calcula a partir
     de su ancho para que las columnas empiecen SIEMPRE justo debajo del lockup.
     El 0.1915 no es un número al tanteo — es dónde termina el lockup dentro de
     la imagen, medido sobre el propio archivo (caja y: 72–203 px de 622, con la
     imagen en proporción 1060×622). Si algún día se cambia el gráfico, se vuelve
     a medir; si no, o el lockup se come el texto o queda un pozo vacío.
     El extra de abajo deja sitio a la barra flotante y evita que tape la leyenda. */
  --pie-marca: clamp(560px, 92vw, 1100px);
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--pie-marca) * 0.1915 + var(--e-8))
                 calc(var(--e-16) + var(--e-12));
  background-color: var(--acero);
  color: var(--hueso-hondo);
}

/* Las dos capas comparten posición y tamaño: son el mismo archivo, así que
   recortar una encaja sobre la otra al píxel sin tener que cuadrar nada. */
.pie__trazo,
.pie__lockup {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--pie-marca);
  max-width: none;      /* la filigrana SÍ desborda: es a sangre, a propósito */
  height: auto;
  pointer-events: none;
}

.pie__trazo {
  /* Es filigrana, no ilustración: por debajo del texto de las columnas pasa el
     trazo, y a plena opacidad le comía contraste a los enlaces. */
  opacity: 0.55;
  /* Se disuelve alejándose de su esquina. Sin esto, el trazo se cortaría en
     seco por la derecha y por abajo, justo encima del texto de las columnas.
     Una sola máscara radial hace las dos cosas y se libra de `mask-composite`,
     que no está en todos los navegadores que este sitio soporta. */
  -webkit-mask-image: radial-gradient(115% 105% at 0% 0%, #000 32%, transparent 80%);
          mask-image: radial-gradient(115% 105% at 0% 0%, #000 32%, transparent 80%);
}

/* EL LOGOTIPO, NÍTIDO. Es el mismo archivo recortado a la caja del lockup: sin
   opacidad y sin máscara, porque las dos cosas se lo estaban comiendo — al 55 %
   quedaba turbio sobre el acero y la máscara radial le borraba la palabra PHN.
   Un fondo decorativo no puede tragarse la marca.

   Los cuatro números del `inset` NO son a ojo: son la caja de la tinta sólida
   del archivo, medida sobre su canal alfa (x 84–269 e y 65–206 de 1060×622, o
   sea 7.9 %–25.4 % y 10.5 %–33.1 %). Si se cambia el gráfico, se vuelve a medir
   igual que el relleno superior del pie. */
.pie__lockup {
  clip-path: inset(10.5% 74.6% 66.9% 7.9%);
}

.pie__interior {
  display: grid;
  gap: var(--e-8);
}

.pie__lema {
  margin: 0 0 var(--e-4);
  font-size: var(--txt-sm);
  color: var(--hueso-hondo);
}

.pie__titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--txt-xs);
  color: var(--acento);   /* 5.6:1 sobre acero */
}

.pie__lista,
.pie__redes {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--txt-sm);
}

.pie__enlace {
  color: var(--hueso);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
  min-height: var(--target-tactil);
  display: inline-flex;
  align-items: center;
}

.pie__enlace:focus-visible {
  outline: var(--grosor-foco) solid var(--acento);
  outline-offset: var(--offset-foco);
}

.pie__horario {
  margin: var(--e-4) 0 0;
  font-size: var(--txt-sm);
  color: var(--hueso-hondo);
}

.pie__cierre {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: var(--borde);
  border-top-color: var(--linea-oscura);
}

/* Leyenda COFEPRIS: obligatoria, 14px (mínimo exigido 12px) y 10.7:1 sobre acero */
.pie__legal {
  max-width: var(--medida);
  margin: 0;
  font-size: var(--txt-sm);
  line-height: var(--alto-cuerpo);
  color: var(--hueso-hondo);
}

.pie__copyright {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--hueso-hondo);
}

@media (hover: hover) {
  .pie__enlace:hover {
    color: var(--acento);
    text-decoration: underline;
    text-underline-offset: var(--e-1);
  }
}

/* --- 13. BARRA FLOTANTE MOBILE --- */

.barra-flotante {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-flotante);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  padding: var(--e-2);
  padding-bottom: calc(var(--e-2) + env(safe-area-inset-bottom));
  background-color: var(--blanco);
  border-top: var(--borde);
  box-shadow: var(--sombra-flotante);
}

.barra-flotante__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: calc(var(--e-8) + var(--e-3));
  border: var(--borde);
  border-radius: var(--radio-btn);
  font-size: var(--txt-sm);
  text-decoration: none;
}

.barra-flotante__accion:focus-visible {
  outline: var(--grosor-foco) solid var(--tinta);
  outline-offset: var(--offset-foco);
}

.barra-flotante__accion--telefono {
  color: var(--tinta);
  border-color: var(--tinta);
}

/* --tinta sobre --acento: 8.1:1 */
.barra-flotante__accion--whatsapp {
  background-color: var(--acento);
  border-color: var(--acento);
  color: var(--tinta);
}

/* --- 14. ≥ 480px — sm --- */

@media (min-width: 480px) {

  .boton.encabezado__cta {
    display: inline-flex;
    padding: var(--e-2) var(--e-4);
    font-size: var(--txt-sm);
  }

  .hero__acciones .boton {
    flex: 0 0 auto;
  }

  .credenciales__lista {
    gap: var(--e-8) var(--e-6);
  }

  .alcance__datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formulario__enviar {
    flex: 0 0 auto;
  }

}

/* --- 15. ≥ 768px — md --- */

@media (min-width: 768px) {

  .credenciales__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .capacidades__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* tres, como la referencia */
  }

  .planta__interior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-12);
  }

  .contacto__vias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formulario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-4) var(--e-6);
  }

  .pie__interior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-12);
  }

  .pie__cierre {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--e-6);
  }

}

/* --- 15b. ≥ 1120px — la barra de navegación ---
   NO va con el resto del "escritorio" (1024px) y es a propósito: a 1024 exactos
   el logo (323px) + la nav (456px) + el CTA (200px) + los huecos suman ~1011px
   contra los ~976px útiles del contenedor, así que la nav se partía en dos filas
   y el header pasaba de 69px a 128px de alto. Medido el 2026-08-19; cabe a
   partir de ~1100px, y 1120 deja margen. Debajo de este ancho manda la
   hamburguesa, que a 1024 se ve perfectamente bien. */

@media (min-width: 1120px) {

  .encabezado__interior {
    gap: var(--e-8);
  }

  .logo__lema {
    display: block;
  }

  .navegacion {
    position: static;
    z-index: auto;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .navegacion__lista {
    display: flex;
    align-items: center;
    gap: var(--e-6);
  }

  .navegacion__enlace {
    min-height: auto;
    padding-inline: 0;
    padding-block: var(--e-2);
    border-bottom: var(--borde);
    border-bottom-color: transparent;
    font-size: var(--txt-sm);
  }

  .navegacion__enlace--activo,
  .navegacion__enlace[aria-current] {
    border-bottom-color: var(--acento-hondo);
  }

  .encabezado__hamburguesa {
    display: none;
  }

  /* El menú nunca queda abierto en desktop: se libera el scroll */
  body:has(.encabezado__hamburguesa[aria-expanded="true"]) {
    overflow: visible;
  }
}

/* --- 16. ≥ 1024px — lg --- */
/*    Aquí el menú deja de ser panel, aparece el lema y el proceso se pone horizontal.
   */

@media (min-width: 1024px) {

  .capacidades__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .alcance__datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Timeline horizontal: la línea de 1px pasa a correr por encima de los números */
  .proceso__pasos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--e-6);
  }

  .proceso__pasos::before {
    top: var(--e-6);
    right: 0;
    bottom: auto;
    left: 0;
    border-left: 0;
    border-top: var(--borde);
  }

  .paso {
    padding-top: var(--e-16);
    padding-left: 0;
  }

  .contacto__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--e-16);
    align-items: start;
  }

  .contacto__vias {
    grid-template-columns: minmax(0, 1fr);
  }

  .pie__interior {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }

  /* Solo el relleno de ABAJO: en escritorio no hay barra flotante que esquivar.
     El de arriba lo sigue calculando la regla base a partir del ancho de la
     filigrana, y pisarlo aquí con un `padding-block` de un solo valor es
     justo lo que dejaba el lockup encima de las columnas. */
  .pie {
    padding-block-end: var(--e-16);
  }

  .barra-flotante {
    display: none;
  }

}

/* --- 17. Movimiento reducido --- */

@media (prefers-reduced-motion: reduce) {

  .navegacion,
  .navegacion__enlace,
  .encabezado__hamburguesa,
  .boton,
  .campo__control,
  .pie__enlace,
  .faq__pregunta::before,
  .faq__pregunta::after {
    transition: none;
  }

  .boton:active {
    transform: none;
  }

  .formulario__enviar[aria-busy="true"]::after {
    animation: none;
  }

}

/* Sobre el aro 3D el header NO se esconde: se vuelve transparente y el texto
   pasa a claro, como en la referencia — el menú flota sobre la animación.
   (Antes se retiraba con transform; lo que molestaba era la franja blanca, y
   esa la resuelve la transparencia, no quitar el menú.) La legibilidad sobre
   las fotos la da el degradado oscuro superior de la sección (carrusel.css).

   `fixed` y no `sticky`: con sticky el header reservaba su hueco en el flujo
   y dejaba una franja vacía encima del aro. */
.encabezado {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition:
    background-color var(--dur-media) var(--ease),
    border-color var(--dur-media) var(--ease);
}

.encabezado--transparente {
  background-color: transparent;
  border-bottom-color: transparent;
}

.encabezado--transparente .logo__marca,
.encabezado--transparente .encabezado__hamburguesa {
  color: var(--hueso);
}

/* La sombra que separa el menú de las fotos que corren por debajo. Solo sobre
   el hero: en móvil el panel desplegado tiene fondo blanco y texto oscuro, y
   ahí estas dos sombras negras lo ensuciaban. */
.encabezado--transparente .logo__marca,
.encabezado--transparente .logo__lema {
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.55),
    0 2px 14px rgb(0 0 0 / 0.4);
}

@media (min-width: 1120px) {
  .encabezado--transparente .navegacion__enlace {
    text-shadow:
      0 1px 2px rgb(0 0 0 / 0.55),
      0 2px 14px rgb(0 0 0 / 0.4);
  }
}

.encabezado--transparente .encabezado__hamburguesa {
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
}

/* Sobre el aro petróleo, el isotipo petróleo sería invisible: se pasa a blanco.
   `brightness(0) invert(1)` aplana los tres tonos en uno, y es lo correcto aquí:
   es el mismo trato que ya recibe el lockup del pie. Va SEPARADO de la
   hamburguesa a propósito: la hamburguesa ya tiene su color y solo necesita la
   sombra. */
.encabezado--transparente .logo__isotipo {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
}

.encabezado--transparente .logo__lema {
  color: var(--hueso-hondo);
}

/* Los enlaces solo van en claro cuando la nav es de barra (escritorio): en
   móvil el panel desplegado tiene su propio fondo claro y ahí mandan sus
   colores de siempre. */
@media (min-width: 1120px) {
  .encabezado--transparente .navegacion__enlace {
    color: var(--hueso);
  }
}

@media (prefers-reduced-motion: reduce) {
  .encabezado {
    transition: none;
  }
}

/* ------------------------------------------------ Cortinilla de arranque */

/* Azul claro, el nombre en blanco dentro de un recuadro blanco, y la planta
   que brota y crece hasta que sus líneas llenan la pantalla: al retirarse el
   velo, lo que queda debajo es el aro de líneas de maquila. */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fondo-intro);
  transition: opacity var(--dur-lenta) var(--ease);
}

.intro__caja {
  border: 3px solid var(--blanco);
  color: var(--blanco);
  padding: var(--e-4) var(--e-8);
  font-family: var(--fuente-display);
  font-size: var(--txt-2xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--dur-media) var(--ease),
    transform var(--dur-media) var(--ease);
}

.intro--caja .intro__caja {
  opacity: 1;
  transform: scale(1);
}

.intro__planta {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: 8rem;
  height: auto;
  color: var(--blanco);
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  transition: transform 1250ms var(--ease);
}

.intro--crece .intro__planta {
  transform: translateX(-50%) scale(14);
}

/* El nombre cede el sitio a la planta que crece. */
.intro--crece .intro__caja {
  opacity: 0;
}

.intro--fuera {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

/* --------------------------------------------- Catálogo de líneas */

.catalogo__rejilla {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-8);
  padding: 0;
  list-style: none;
}

/* Tarjeta al patrón de la referencia: blanca, esquinas suaves, sombra corta,
   título centrado en la display y cuerpo justificado. Sin la barra lateral
   de acento, que no existe allí.
   Falta la foto de producto arriba: no hay material de las seis líneas
   (lo que hay es maquinaria, y ya se ve en el aro). Ver docs/08. */
.tarjeta-catalogo {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding: var(--e-8) var(--e-6);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: 0 10px 24px -18px rgb(0 40 55 / 0.45);
  transition: transform var(--dur-rapida) var(--ease),
              box-shadow var(--dur-rapida) var(--ease);
}

.tarjeta-catalogo:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgb(0 40 55 / 0.55);
}

.tarjeta-catalogo__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--txt-lg);
  font-weight: 400;
  text-align: center;
  color: var(--acento-hondo);
}

.tarjeta-catalogo__texto {
  margin: 0;
  font-size: var(--txt-base);
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  color: var(--tinta-suave);
}

/* Los formatos van en la fuente de utilidad: son etiqueta, no prosa. */
.tarjeta-catalogo__formatos {
  margin: 0;
  text-align: center;
  font-family: var(--fuente-utilidad);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

@media (min-width: 768px) {
  .catalogo__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .catalogo__rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------- Entradas al hacer scroll */

/* El estado oculto SOLO existe si el JS arrancó (clase en <html>): sin JS
   nada se queda invisible. Y con movimiento reducido ni se aplica. */
.anima-lista .anima {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-lenta) var(--ease),
    transform var(--dur-lenta) var(--ease);
}

.anima-lista .anima--dentro {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .anima-lista .anima {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------ Etiqueta en recuadro */

/* El rótulo enmarcado que encabeza las secciones nuevas. */
.etiqueta-caja {
  display: inline-block;
  margin: 0 0 var(--e-3);
  padding: var(--e-1) var(--e-3);
  border: 1px solid currentColor;
  font-family: var(--fuente-utilidad);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

















/* ------------------------------------------------ Galería de equipo */

.galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
  margin-top: var(--e-8);
  padding: 0;
  list-style: none;
}

.galeria__pieza {
  overflow: hidden;
  border-radius: var(--radio-img);
  background: var(--hueso-hondo);
}

.galeria__imagen {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease);
}

.galeria__pieza:hover .galeria__imagen {
  transform: scale(1.06);
}

@media (min-width: 768px) {
  .galeria__rejilla {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Dos piezas mandan y rompen la retícula: un mosaico plano aburre. */
  .galeria__pieza:nth-child(1),
  .galeria__pieza:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 1024px) {
  .galeria__rejilla {
    grid-template-columns: repeat(4, 1fr);
  }


  /* En escritorio el foco se parte en dos y la tarjeta se inclina y sangra
     por el borde derecho. */


  /* El video ya no flota suelto: la sección es una rejilla de dos columnas y
     la tarjeta ocupa la suya, sangrando por el borde. Antes iba `absolute` y
     dejaba 246 px de aire muerto porque el alto lo fijaba solo el texto. */


}

@media (prefers-reduced-motion: reduce) {
  .galeria__pieza:hover .galeria__imagen,
}

/* El hero es pegajoso: todo lo que va después tiene que taparlo al pasar por
   encima, así que ninguna sección posterior puede quedarse sin fondo. */
main > section:not(.seccion--lineas) {
  position: relative;
  z-index: 1;
  background-color: var(--hueso);
}

/* `section.clase` y no solo `.clase`: la regla de arriba lleva
   `section:not(.seccion--lineas)`, que pesa 0-1-2. Con `.planta` a secas
   (0-1-1) el blanco ganaba y el bloque de planta quedaba con TEXTO BLANCO
   SOBRE BLANCO — invisible. Igualar el peso lo arregla. */
/* Ritmo de bandas. La regla de arriba pesa 0-1-2, así que TODA sección que
   quiera otro fondo tiene que declararse aquí con el mismo peso — incluidas
   credenciales, cta-intermedio y contacto, que se quedaron fuera y volvían a
   blanco, aplanando el cierre de la página.
   Orden real MEDIDO en navegador el 2026-08-19, ya sin video-planta ni foco:
   hero(hueso, pero termina en la franja de credenciales, que es hondo) ·
   capacidades(hueso) · aro(color de línea) · reto(hueso) · catálogo(hondo) ·
   proceso(hueso) · equipo(hondo) · giro(color de línea) ·
   planta(acero) · alcance(hueso) · ventajas(acero) · cta(hondo) · faq(hueso) ·
   contacto(hondo).
   Ojo al comprobarlo por script: hero y capacidades son AMBOS hueso y parecen
   un choque, pero no lo son — entre los dos se mete la franja de credenciales,
   que va DENTRO del hero y es hondo. Se compara el último bloque, no la sección.
   Nunca dos bandas iguales seguidas. */
main > section.credenciales,
main > section.seccion--catalogo,
main > section.seccion--galeria,
main > section.cta-intermedio,
main > section.seccion--contacto {
  background-color: var(--hueso-hondo);
}

main > section.planta,
main > section.ventajas {
  background-color: var(--acero);
}

/* Cada escena de producto pinta su propio fondo con el color de SU línea, que
   ya estaba decidido en tokens.css (`--color-linea-*`). Por eso la regla de
   "nunca dos bandas iguales seguidas" se cumple sola aunque vayan seis
   escenas encadenadas: ningún par comparte color. */
main > section.giro {
  background-color: var(--fondo-escena, var(--acero));
}

.giro--capsulas   { --fondo-escena: var(--color-linea-capsulas); }
.giro--polvos     { --fondo-escena: var(--color-linea-fibras); }
.giro--vitaminas  { --fondo-escena: var(--color-linea-vitaminas); }
.giro--herbolaria { --fondo-escena: var(--color-linea-herbolaria); }
.giro--liquidos   { --fondo-escena: var(--color-linea-liquidos); }
.giro--topicos    { --fondo-escena: var(--color-linea-topicos); }

/* Marca invisible que separa el aro del resto: dice cuándo el contenido de
   abajo alcanzó la altura del menú. No ocupa ni pinta nada. */
.centinela-aro {
  position: relative;
  z-index: 1;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

/* ------------------------------------------------ Pie de la galería */

.galeria__figura {
  position: relative;
  margin: 0;
  height: 100%;
}

/* El pie va SOBRE la imagen, en una banda oscura al fondo: así cada foto se
   explica sola sin robarle sitio a la retícula. En pantallas de dedo se queda
   siempre visible; con ratón aparece al pasar por encima. */
.galeria__pie {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--e-1);
  padding: var(--e-8) var(--e-2) var(--e-2);
  background: linear-gradient(to top, var(--velo-oscuro) 55%, transparent);
  color: var(--hueso);
}

.galeria__pie-titulo {
  font-family: var(--fuente-utilidad);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}

/* En móvil la pieza mide ~156px: con el texto encima, el pie tapaba tres
   cuartas partes de la foto. Ahí se queda solo el rótulo. */
.galeria__pie-texto {
  display: none;
  font-size: var(--txt-base);
  line-height: var(--alto-lead);
  color: var(--hueso-hondo);
}

@media (min-width: 768px) {
  .galeria__pie-texto {
    display: block;
  }
}

/* Con ratón, el pie descansa oculto y sube al pasar por encima. */
@media (hover: hover) and (min-width: 768px) {
  .galeria__pie {
    opacity: 0;
    transform: translateY(12%);
    transition:
      opacity var(--dur-media) var(--ease),
      transform var(--dur-media) var(--ease);
  }

  .galeria__pieza:hover .galeria__pie,
  .galeria__pieza:focus-within .galeria__pie {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__pie {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------ El reto (problema) */

.reto__interior {
  display: grid;
  gap: var(--e-8);
}

.reto__texto {
  margin: 0 0 var(--e-4);
  font-size: var(--txt-lg);
  color: var(--tinta-suave);
}





/* La rejilla de dos columnas era del diseño anterior (texto + lista). Con la
   tabla dentro dejaba las tres columnas comprimidas en media pantalla y el
   texto salía en tiras de dos palabras. La comparativa necesita el ancho
   completo: encabezado arriba, tabla debajo. */
@media (min-width: 1024px) {
  .reto__interior {
    gap: var(--e-12);
  }

  .reto .seccion__encabezado {
    max-width: 46rem;
  }
}

/* ------------------------------------------------ Ventajas */






/* El número va de contador CSS: es decoración de secuencia, no contenido, y
   así no hay que teclearlo en el markup ni renumerar al reordenar. */



@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}


/* ---------------------------------------------------------------- 24. GIRO 3D
   El envase gira con el scroll (secuencia de fotogramas, ver js/ui/giro3d.js).

   Patrón: la SECCIÓN es alta —ahí vive el recorrido— y dentro hay un ESCENARIO
   pegado que ocupa la pantalla entera con el contenido centrado. Antes se pegaba
   solo la pieza y quedaban ~400px de banda vacía debajo durante todo el
   recorrido: el escenario a pantalla completa no puede dejar hueco porque
   siempre está lleno y centrado. */
.giro {
  /* El envase entraba desplazado desde su lado y se fugaba hacia el otro: en
     un teléfono eso lo sacaba 29 px de la pantalla y aparecía scroll lateral
     (medido a 390 px el 2026-08-21). Desde el 2026-08-24 solo BAJA, pero el
     recorte se queda de red: la sombra larga sí puede asomar.
     `clip` y NO `hidden`: `hidden` crea un contenedor de scroll y el
     `position: sticky` de la reja pasaría a pegarse a ÉL en vez de a la
     ventana, o sea que en escritorio la escena dejaría de quedarse quieta.
     Es el mismo recorte que ya usa .seccion--lineas para el aro. */
  overflow-x: clip;
  /* Va sobre banda acero: el texto TIENE que aclararse aquí, igual que en
     .ventajas. Sin esto hereda --tinta-suave y queda petróleo sobre petróleo,
     ilegible: la misma familia de bug que el blanco sobre blanco de .planta. */
  color: var(--hueso);
}

.giro .seccion__titulo,
.giro .etiqueta-caja {
  color: var(--hueso);
}

/* MÓVIL: la escena NO se pega. Se pegaba a todos los anchos y con `min-height:
   100svh`, así que en un teléfono el envase (348 px) más el texto no cabían en
   la pantalla y la parte de abajo quedaba INALCANZABLE: pegada arriba, no hay
   scroll que la baje. Medido el 2026-08-21: 1 628 px de contenido en una
   ventana de 780. En móvil, pues, la caja BAJA CON EL TEXTO — es una sección
   normal— y el envase gira igual, midiendo su cruce por la pantalla
   (ver progresoDe() en js/ui/giro3d.js). */
.giro__reja {
  display: grid;
  align-content: center;
  gap: var(--e-8);
}

.giro__pieza {
  /* Aquí vivía una `perspective: 720px` para las rotaciones CSS del envase.
     Se quitó el 2026-08-24: la inclinación ya no se finge con CSS, viene
     RENDERIZADA en los fotogramas (0° a 42°), que es lo que de verdad enseña
     la base del envase. Una perspectiva sin nada que rotar es código muerto. */
  display: grid;
  place-items: center;
}

.giro__soporte {
  position: relative;
  /* El ancho lo lleva el SOPORTE y la imagen lo llena. Con `inline-block` no
     valía: dentro de un contenedor grid los hijos se blockifican, el soporte
     salía más ancho que la imagen (558 vs 480 px medidos) y el `left: 50%`
     del rótulo caía 39 px a la derecha del eje del frasco. */
  display: block;
  width: min(100%, 21rem);
  /* El JS solo lo BAJA (`translate3d` en el eje Y). El recostarse hacia atrás
     no es una transformación: son los fotogramas. Por eso aquí ya no hace
     falta `transform-style: preserve-3d` — no hay hijos en 3D que preservar. */
  transform-origin: center center;
  /* El suavizado lo hace el JS cuadro a cuadro; una `transition` encima
     añadiría un segundo retardo y el movimiento se sentiría blando. */
  will-change: transform;
}

.giro__imagen {
  width: 100%;
  height: auto;
  display: block;
  /* La sombra va en el CSS y no en el render: así no se repite 48 veces
     dentro de los PNG, que es peso muerto. */
  filter: drop-shadow(0.6rem 1.6rem 2.2rem rgb(0 0 0 / 0.42));
}

/* El tubo de la línea tópica se lee pequeño al lado de los demás envases, y no
   es que sea más bajo: Blender escala todos los modelos a la misma altura, así
   que lo que cambia es el ANCHO. Medido sobre el canal alfa de cada `frame-000`:
   el tubo ocupa el 38 % del ancho de su fotograma, el frasco de cápsulas el 61 %
   y la caja de herbolaria el 86 %. Se agranda un 18 % solo él.

   Dos porqués que hay que respetar si se toca:
   · va sobre la IMAGEN (y sobre el canvas que la sustituye), no sobre
     `.giro__soporte`: el soporte lleva el `transform` que escribe el JS en cada
     cuadro y machacaría este;
   · va en `transform: scale` y no en `width`, porque `scale` no toca el layout:
     la caja del grid no crece y el centrado del envase sigue funcionando. Subir
     el ancho sí la haría crecer, y por ahí vuelve el desbordamiento hacia abajo
     que costó la pasada del 2026-08-24. */
.giro--topicos .giro__imagen,
.giro--topicos .giro__pieza canvas {
  transform: scale(1.18);
}

.giro__texto > * + * {
  margin-block-start: var(--e-6);
}

/* El texto de la escena entra ESCALONADO, hijo por hijo. Con todo el bloque
   apareciendo de golpe el ojo no sabe por dónde empezar; escalonado se lee en
   el orden en que está escrito. El retardo lo pone el CSS y no el JS: es
   presentación pura y no hace falta un temporizador por elemento. */
.anima-lista .giro__texto > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-lenta) var(--ease),
    transform var(--dur-lenta) var(--ease);
}

.anima-lista .giro__texto.anima--dentro > *        { opacity: 1; transform: none; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(1) { transition-delay: 0ms; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(2) { transition-delay: 90ms; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(3) { transition-delay: 170ms; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(4) { transition-delay: 240ms; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(5) { transition-delay: 300ms; }
.anima-lista .giro__texto.anima--dentro > *:nth-child(n+6) { transition-delay: 350ms; }

/* La etiqueta enmarcada estira su borde al entrar: un detalle pequeño que da
   sensación de que la escena se está montando, no de que ya estaba ahí. */
.giro__texto .etiqueta-caja {
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .anima-lista .giro__texto > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 768px) {
  /* --- Reparto MEDIDO en press.stripe.com (1440x900, 2026-08-21) -----------
     Su sección da al objeto 693 px y al texto 502 px dentro de 1 195 de ancho
     útil: 58 % / 42 %. Aquí estaba a 50/50 y el envase iba apretado contra el
     texto; el aire de al lado es justo lo que hace que se lea la animación.
     El ancho útil coincide de casualidad: su inset es de 115 px a 1440 y
     nuestro `.contenedor` deja 130. No hay que tocar el contenedor.

     Y el patrón de fondo cambia: allí **el objeto se queda quieto y el texto
     pasa por delante**, no se pega el bloque entero. Se hace así porque el
     alto de la sección lo marca AHORA EL TEXTO (2 110 px en la referencia), y
     eso quita de golpe el techo de 100svh que obligaba a medir cada párrafo:
     lo que no cabía en una pantalla, pegado arriba, no había scroll que lo
     alcanzara. Con la pieza pegada y el texto en flujo normal, la escena dura
     lo que dure su contenido.

     La nota vieja del CLAUDE.md decía que pegar solo el envase dejaba media
     sección vacía. Era cierto CON EL TEXTO CORTO de entonces y la sección
     clavada a 170vh: el texto se iba por arriba y quedaba el hueco. Con el alto
     mandado por el contenido no puede pasar. */
  .giro {
    padding-block: var(--e-24) calc(var(--e-24) + var(--e-16));
  }

  .giro__reja {
    /* A esta anchura el reparto se queda a medias: con 58/42 la columna de
       texto cae a 273 px (medido a 768) y el párrafo se lee en tiras de 38
       caracteres. El aire de al lado se cobra a partir de 1024. */
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--e-16);
  }

  .giro__pieza {
    position: sticky;
    /* Centrado en el HUECO ÚTIL, no en la ventana: la barra de navegación se
       vuelve opaca al hacer scroll y se comería la cabeza del envase.

       Antes esto era `top: calc(50svh - 27svh); height: 54svh`, y el resultado
       medido (2026-08-24, 1920x911) NO era el que dice ese cálculo: la caja
       medía 492 px y el envase 680, y una fila de grid crece con su contenido,
       así que el `place-items: center` no centraba nada — el envase se apoyaba
       en el borde de arriba y desbordaba 188 px hacia abajo, quedando a 21 px
       del fondo de la ventana. Con la caja MÁS ALTA que el envase el centrado
       vuelve a funcionar, que es lo que hace falta para que quepa el descenso.

       Y la caja NO puede medir toda la ventana: es `sticky`, así que cuanto más
       alta, antes toca el fondo de la reja y se DESPEGA. Con `calc(100svh -
       4.5rem)` se soltaba antes de acabar la escena y el envase pegaba un salto
       de 160 px hacia arriba (medido). 72svh deja pegado todo el recorrido. */
    top: calc(50svh - 36svh);
    height: 72svh;
  }


  .giro__soporte {
    /* La referencia da al objeto ~57% del alto de la ventana. Con proporción
       3:4 eso son ~43svh de ancho. Aquí se sube a 52svh (~69svh de alto): el
       envase se queda con dos tercios largos de la ventana y la escena es SUYA.

       Estuvo en 56svh (~75svh de alto) hasta el 2026-08-24 y hubo que bajarlo:
       un objeto que ocupa tres cuartos de la ventana no tiene sitio para
       moverse, y el gesto de esta escena es justamente que BAJE.

       49.5svh de ancho son 66svh de alto en 3:4, y la caja mide 72svh: el
       envase SIEMPRE cabe dentro, sea cual sea la ventana, porque las dos
       medidas van en la misma unidad. Fijarlo en `rem` era lo que lo hacía
       desbordar en pantallas anchas y bajas. El tope de 32rem solo recorta
       hacia abajo, nunca hacia arriba. */
    width: min(100%, 49.5svh, 32rem);
  }

  /* Escenas alternas con el producto a la derecha: seis pantallas con el
     envase siempre del mismo lado se leen como una sola repetida. Se cambia
     el ORDEN, no el HTML, para que el texto siga primero en el DOM y en el
     orden de lectura de un lector de pantalla. */
  .giro--invertida .giro__pieza { order: 2; }
  .giro--invertida .giro__texto { order: 1; }
}

/* El reparto MEDIDO en la referencia (58 % objeto / 42 % texto) entra aquí,
   donde la columna de texto aguanta: 469 px a 1440 y 380 a 1024. */
@media (min-width: 1024px) {
  .giro__reja { grid-template-columns: 1.38fr 1fr; }
  .giro--invertida .giro__reja { grid-template-columns: 1fr 1.38fr; }
}

/* --- Ficha técnica del envase -------------------------------------------
   Es el recurso que sostiene la columna de texto en la referencia: filas con
   filete de 1 px, esquinas VIVAS (radio 0) y unos 44 px de alto, con la
   etiqueta a la izquierda y el dato a la derecha. Medido, no supuesto.
   Aquí lleva los datos que dictó PHN el 2026-08-19 (ver
   `docs/10-fichas-envase-phn.md`), que hasta hoy solo vivían en la sección de
   envases y se perdieron al borrarla. */
.giro__texto > .giro__ficha {
  margin-block-start: var(--e-8);
  border: 1px solid rgb(255 255 255 / 0.28);
  /* Las filas comparten filete: cada una pinta solo el de arriba. */
}

/* En móvil la fila va APILADA: a 390 px las dos columnas dejaban 165 px para
   el dato y una ficha de cuatro filas medía 355 px de alto en tiras de cuatro
   líneas. Con la clave encima, el dato usa el ancho entero. */
.giro__fila {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-block-start: 1px solid rgb(255 255 255 / 0.28);
}

/* Las dos columnas entran a 1024 y no a 768: entre medias la columna de texto
   mide ~270 px (es el 42 % de la reja) y la clave se comería 108 de ellos.
   Medido a 1024: clave 118, dato 213. */
@media (min-width: 1024px) {
  .giro__fila {
    grid-template-columns: minmax(6rem, 34%) 1fr;
    gap: var(--e-4);
    align-items: baseline;
  }
}

.giro__fila:first-child { border-block-start: 0; }

.giro__clave {
  margin: 0;
  font-size: var(--txt-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* `--acento` a secas da 4.36:1 sobre la banda de la escena de líquidos, que
     es la más clara de las seis: REPRUEBA AA por poco. Aclarado un 15 % sube a
     4.68:1 en ese peor caso y sigue leyéndose como el mismo azul. Medido en las
     seis bandas, no supuesto. */
  color: color-mix(in srgb, var(--acento) 85%, white);
}

.giro__dato {
  margin: 0;
  font-size: var(--txt-sm);
  line-height: 1.5;
  color: var(--hueso);
}

/* El sello va como el par de pastillas enmarcadas de la referencia: un grupo
   con un solo filete alrededor, no una insignia de color. */
.giro__texto > .giro__sello {
  display: inline-block;
  margin-block-start: var(--e-6);
  padding: var(--e-2) var(--e-4);
  border: 1px solid rgb(255 255 255 / 0.45);
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hueso);
}

/* Filete bajo el titular, como en la referencia (1 px, ancho completo). */
.giro__regla {
  margin-block: var(--e-6) 0;
  border: 0;
  border-block-start: 1px solid rgb(255 255 255 / 0.28);
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento no hace falta recorrido: la sección se queda de alto normal
     y el envase se ve derecho, en su primer fotograma. */
  .giro { min-height: 0; padding-block: var(--pad-seccion); }
  .giro__reja { position: static; min-height: 0; padding-block: 0; }
  .giro__pieza { position: static; height: auto; }
}