/* ============================================================================
   ADCO · Acero y Desplegados Comerciales
   Sistema de diseño — hoja única, sin dependencias externas.
   ---------------------------------------------------------------------------
   ÍNDICE
     01. Tipografía (auto-hospedada)
     02. Tokens de diseño
     03. Reset y base
     04. Utilidades de layout
     05. Botones
     06. Encabezado + navegación + buscador
     07. Hero
     08. Sello de calidad / value props
     09. Tarjetas (producto, industria, recurso)
     10. Catálogo + filtros
     11. Acordeón FAQ
     12. Cupón de descuento
     13. Prueba social
     14. Formularios
     15. Pie de página
     16. WhatsApp flotante
     17. Animaciones (scroll reveal, micro-interacciones)
     18. Impresión
   ========================================================================== */

/* ==========================================================================
   01. TIPOGRAFÍA
   --------------------------------------------------------------------------
   ⚠️  FUENTE PROVISIONAL — SUSTITUIR POR LA FUENTE DE MARCA REAL EN CUANTO
       SE CONFIRME CON EL EQUIPO DE ADCO.

   Estado de la identificación (ver /docs/IDENTIDAD-DE-MARCA.md):
     · Prioridad 1 (preguntar a ADCO / al diseñador del rótulo): PENDIENTE.
     · Prioridad 2 (comparación métrica letra por letra contra el rótulo real
       del collage de producto): realizada. Se midió la relación ancho/altura
       de caja de las 10 letras de "METAL DESPLEGADO" y se comparó contra
       10 tipografías candidatas. Resultado (error medio absoluto):
           Archivo 700 ....... 0.036
           Montserrat 600 .... 0.038   ← elegida
           Helvetica Bold .... 0.042   (descartada: G y O no geométricas)
           Poppins Bold ...... 0.066   (descartada: E y L demasiado angostas)
           Futura Bold ....... 0.131   (descartada)
       La "O" del rótulo mide 1.05× la altura de caja → la tipografía de ADCO
       es ANCHA Y GEOMÉTRICA, no condensada. Por eso NO se usan Oswald,
       Bebas Neue, Barlow Condensed ni Big Shoulders: romperían el
       reconocimiento de marca.

   Montserrat se sirve como fuente variable: un solo archivo de 35 KB cubre
   todos los pesos 400–800. Subconjunto "latin" cubre todo el español
   (á é í ó ú ü ñ ¿ ¡); "latin-ext" queda como respaldo opcional.
   Licencia: SIL Open Font License 1.1 — uso comercial permitido.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/montserrat-var-latin.woff2?v=2') format('woff2');
  /* Subconjunto latin: cubre español completo */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/montserrat-var-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   02. TOKENS DE DISEÑO
   --------------------------------------------------------------------------
   COLOR — extraído del logo real de ADCO por inspección de píxeles, no a ojo.
   El logotipo (logo-9.jpg, 512×512) contiene exactamente dos colores:
       #000000  campo (81.7 % de los píxeles; #060606 medido = artefacto JPEG)
       #FFFFFF  contraforma de la "A" (13.1 %)
   El encabezado de marca (ENCABEZADO-ADCO-23.png) confirma lo mismo: negro
   sólido + blanco sobre fondo transparente. El verde #47704C que aparece al
   volcar ese PNG a RGB corresponde a píxeles con alpha = 0 (zona
   transparente) — NO es un color de marca.

   La escala de acero se muestreó de la fotografía real de producto
   (5 imágenes, ~200k píxeles). Medición: saturación = 0.00 en todos los
   tonos dominantes. El universo visual de ADCO es estrictamente neutro.

   El verde de WhatsApp se usa ÚNICAMENTE en los botones de WhatsApp: es el
   color de plataforma, no un color de marca de ADCO.
   ========================================================================== */

:root {
  /* --- Marca (confirmado) --------------------------------------------- */
  --adco-negro:  #000000;
  --adco-blanco: #FFFFFF;

  /* --- Escala de acero (muestreada de la fotografía, sat = 0.00) ------- */
  --acero-50:  #F7F7F7;
  --acero-100: #F0F0F0;
  --acero-200: #D8D8D8;
  --acero-300: #C0C0C0;
  --acero-400: #A8A8A8;
  --acero-500: #909090;
  --acero-600: #787878;
  --acero-700: #606060;
  --acero-800: #484848;
  --acero-900: #303030;
  --acero-950: #181818;

  /* --- Roles semánticos ------------------------------------------------ */
  --fondo:            var(--adco-blanco);
  --fondo-alt:        var(--acero-50);
  --fondo-oscuro:     var(--adco-negro);
  --texto:            var(--acero-950);   /* 15.3:1 sobre blanco — AAA      */
  --texto-suave:      var(--acero-700);   /*  5.9:1 sobre blanco — AA       */
  --texto-inverso:    var(--adco-blanco);
  --texto-inverso-suave: var(--acero-300);/*  8.9:1 sobre negro  — AAA      */
  --borde:            var(--acero-200);
  --borde-fuerte:     var(--acero-400);
  --acento:           var(--adco-negro);
  --whatsapp:         #25D366;            /* color de plataforma            */
  /* #128C7E daba 4.14:1 con texto blanco — por debajo del mínimo AA de 4.5.
     Medido en navegador; se oscureció hasta 5.58:1.                        */
  --whatsapp-oscuro:  #0F7568;
  --whatsapp-mas-oscuro: #0A5C52;           /* 7.88:1 — estado hover          */
  --foco:             #0B63CE;            /* 5.4:1 sobre blanco — AA        */

  /* --- Tipografía ------------------------------------------------------ */
  --tipo-titulo: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --tipo-texto:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida: sin saltos bruscos entre 375px y 1920px.              */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --t-sm:   clamp(0.8125rem, 0.78rem + 0.17vw, 0.9375rem);
  --t-base: clamp(0.9375rem, 0.90rem + 0.19vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --t-lg:   clamp(1.25rem, 1.13rem + 0.55vw, 1.625rem);
  --t-xl:   clamp(1.5rem, 1.30rem + 0.95vw, 2.25rem);
  --t-2xl:  clamp(1.875rem, 1.50rem + 1.70vw, 3.25rem);
  --t-3xl:  clamp(2.25rem, 1.60rem + 2.90vw, 4.5rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;
  --peso-black:  800;

  --interlinea-titulo: 1.06;
  --interlinea-texto:  1.65;

  /* Tracking amplio: replica el rótulo real de ADCO (el collage de producto
     usa mayúsculas muy espaciadas). Es la firma tipográfica de la marca.   */
  --track-rotulo: 0.14em;
  --track-titulo: -0.015em;

  /* --- Espaciado (escala 4px) ------------------------------------------ */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 2.5rem;   --e-8: 3rem;
  --e-9: 4rem;     --e-10: 5rem;    --e-11: 6rem;    --e-12: 8rem;

  /* Aire entre secciones — fluido */
  --seccion-y: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);

  /* --- Contenedores ---------------------------------------------------- */
  --ancho-max: 78.75rem;   /* 1260px — cómodo en 1440 y 1920 */
  --ancho-texto: 42rem;
  --canal: clamp(1.125rem, 0.7rem + 1.9vw, 2.5rem);

  /* --- Formas ---------------------------------------------------------- */
  --radio-sm: 2px;
  --radio:    3px;
  --radio-lg: 4px;   /* estética industrial: esquinas casi rectas */

  /* --- Sombras: sutiles, nunca "material design" ------------------------ */
  --sombra-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --sombra:    0 2px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --sombra-md: 0 4px 8px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.08);
  --sombra-lg: 0 8px 16px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.10);

  /* --- Movimiento ------------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-salida: cubic-bezier(.16,1,.3,1);
  --dur-rapida: 160ms;
  --dur: 260ms;
  --dur-lenta: 520ms;

  --header-h: 4.5rem;
  --z-header: 100;
  --z-menu: 110;
  --z-flotante: 90;
}

/* ==========================================================================
   03. RESET Y BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* Sin scroll horizontal en ningún breakpoint. */
html, body { max-width: 100%; overflow-x: clip; }

body {
  font-family: var(--tipo-texto);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-texto);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, li { text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tipo-titulo);
  font-weight: var(--peso-bold);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Foco visible y consistente — requisito WCAG 2.4.7 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

::selection { background: var(--adco-negro); color: var(--adco-blanco); }

/* Salto al contenido — primer tabulador de la página */
.saltar-al-contenido {
  position: absolute;
  left: var(--e-4);
  top: -100%;
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--adco-negro);
  color: var(--adco-blanco);
  font-weight: var(--peso-semi);
  transition: top var(--dur) var(--ease);
}
.saltar-al-contenido:focus { top: var(--e-4); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   04. UTILIDADES DE LAYOUT
   ========================================================================== */

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

.seccion { padding-block: var(--seccion-y); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura {
  background: var(--fondo-oscuro);
  color: var(--texto-inverso);
}
.seccion--oscura .seccion__intro,
.seccion--oscura .texto-suave { color: var(--texto-inverso-suave); }

/* Cabecera de sección: rótulo + título + entradilla */
.seccion__cabecera {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.75rem);
}
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e-4);
}
.rotulo::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.seccion__cabecera--centrada .rotulo::before { display: none; }
.seccion--oscura .rotulo { color: var(--acero-400); }

.seccion__titulo { font-size: var(--t-2xl); font-weight: var(--peso-black); }
.seccion__intro {
  margin-top: var(--e-4);
  font-size: var(--t-md);
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}
.seccion__cabecera--centrada .seccion__intro { margin-inline: auto; }

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

/* Rejillas reutilizables.
   Móvil y tablet usan auto-fill (se acomodan solas). A partir de 62rem se
   fija el número de columnas: con auto-fill, el ancho disponible del catálogo
   (~870px con la barra de filtros) solo daba para 2 columnas y las tarjetas
   quedaban demasiado grandes para la resolución de la fotografía. */
.rejilla { display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

@media (min-width: 62rem) {
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   05. BOTONES
   ========================================================================== */

.btn {
  --btn-fondo: var(--adco-negro);
  --btn-texto: var(--adco-blanco);
  --btn-borde: var(--adco-negro);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 3rem;              /* 48px — supera el mínimo táctil de 44px */
  padding: 0.8125rem 1.75rem;
  background: var(--btn-fondo);
  color: var(--btn-texto);
  border: 2px solid var(--btn-borde);
  border-radius: var(--radio);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-rapida) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Micro-interacción: barrido de luz al pasar el cursor. Sutil, industrial. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
              transparent 35%,
              rgba(255,255,255,.16) 50%,
              transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-lenta) var(--ease-salida);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-sm); }

.btn--primario {} /* valores por defecto */

.btn--secundario {
  --btn-fondo: transparent;
  --btn-texto: var(--adco-negro);
  --btn-borde: var(--acero-400);
}
.btn--secundario:hover { --btn-borde: var(--adco-negro); }

.btn--fantasma {
  --btn-fondo: transparent;
  --btn-texto: var(--adco-blanco);
  --btn-borde: rgba(255,255,255,.5);
}
.btn--fantasma:hover { --btn-borde: var(--adco-blanco); --btn-fondo: rgba(255,255,255,.1); }

.btn--claro {
  --btn-fondo: var(--adco-blanco);
  --btn-texto: var(--adco-negro);
  --btn-borde: var(--adco-blanco);
}

.btn--whatsapp {
  --btn-fondo: var(--whatsapp-oscuro);   /* 5.58:1 con texto blanco — AA */
  --btn-texto: var(--adco-blanco);
  --btn-borde: var(--whatsapp-oscuro);
}
.btn--whatsapp:hover { --btn-fondo: var(--whatsapp-mas-oscuro); --btn-borde: var(--whatsapp-mas-oscuro); }

.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: var(--t-xs); }
.btn--bloque { width: 100%; }

.btn .ico { width: 1.125em; height: 1.125em; flex: none; }

/* Enlace con flecha animada */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: var(--peso-semi);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--adco-negro);
  border-bottom: 2px solid var(--acero-300);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.enlace-flecha:hover { border-color: var(--adco-negro); gap: var(--e-3); }
.seccion--oscura .enlace-flecha { color: var(--adco-blanco); border-color: var(--acero-700); }
.seccion--oscura .enlace-flecha:hover { border-color: var(--adco-blanco); }

/* ==========================================================================
   06. ENCABEZADO + NAVEGACIÓN + BUSCADOR
   ========================================================================== */

.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.encabezado[data-desplazado='true'] {
  box-shadow: var(--sombra);
  border-color: transparent;
}

/* Barra superior de contacto — se oculta en móvil para ganar altura */
.barra-superior {
  background: var(--adco-negro);
  color: var(--acero-300);
  font-size: var(--t-xs);
}
.barra-superior__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 2.25rem;
  flex-wrap: wrap;
}
.barra-superior a { color: var(--adco-blanco); text-decoration: none; }
.barra-superior a:hover { text-decoration: underline; }
.barra-superior__grupo { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; }
.barra-superior__dato { display: inline-flex; align-items: center; gap: var(--e-2); }
@media (max-width: 60rem) { .barra-superior { display: none; } }

.encabezado__interior {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--header-h);
  /* El encabezado respira más ancho que la columna de texto: el nav
     horizontal completo necesita ~1110px de contenido. */
  max-width: 88rem;
}
.barra-superior__interior { max-width: 88rem; }

/* --- Logotipo --------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.logo__marca {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--adco-negro);
  color: var(--adco-blanco);
  font-family: var(--tipo-titulo);
  font-weight: var(--peso-black);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  flex: none;
  transition: transform var(--dur) var(--ease-salida);
}
.logo:hover .logo__marca { transform: rotate(-4deg) scale(1.04); }
.logo__texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo__nombre {
  font-family: var(--tipo-titulo);
  font-weight: var(--peso-black);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
}
.logo__descriptor {
  font-size: 0.5625rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* El descriptor ocupa ~150px. Se oculta en el rango donde el nav horizontal
   compite por el espacio (1200–1400px) y en pantallas muy angostas. */
@media (max-width: 90rem) and (min-width: 80.0625rem) { .logo__descriptor { display: none; } }
@media (max-width: 26.25rem) { .logo__descriptor { display: none; } }

/* --- Navegación principal (mismo orden y jerarquía que el sitio actual) - */
.nav-principal { display: flex; align-items: center; gap: 0; }

.nav-principal__enlace {
  position: relative;
  display: inline-block;
  padding: var(--e-3) 0.6875rem;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* Subrayado que crece desde el centro */
.nav-principal__enlace::after {
  content: '';
  position: absolute;
  left: 0.6875rem;
  right: 0.6875rem;
  bottom: 0.375rem;
  height: 2px;
  background: var(--adco-negro);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-salida);
}
.nav-principal__enlace:hover::after,
.nav-principal__enlace[aria-current='page']::after { transform: scaleX(1); }
.nav-principal__enlace[aria-current='page'] { font-weight: var(--peso-bold); }

/* --- Buscador --------------------------------------------------------- */
.buscador { position: relative; flex: none; }

.buscador__campo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: clamp(10rem, 14vw, 14rem);
  height: 2.75rem;
  padding-inline: var(--e-3);
  background: var(--acero-50);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.buscador__campo:focus-within {
  background: var(--adco-blanco);
  border-color: var(--adco-negro);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.buscador__icono { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--texto-suave); }
.buscador__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  outline: none;
}
.buscador__input::placeholder { color: var(--acero-500); }
.buscador__limpiar {
  display: none;
  place-items: center;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  color: var(--texto-suave);
  flex: none;
}
.buscador__limpiar:hover { background: var(--acero-200); color: var(--texto); }
.buscador[data-con-texto='true'] .buscador__limpiar { display: grid; }

/* Resultados en vivo */
.buscador__resultados {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(24rem, calc(100vw - 2 * var(--canal)));
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--e-2);
  z-index: var(--z-menu);
}
.buscador__resultados[hidden] { display: none; }
.buscador__grupo-titulo {
  padding: var(--e-3) var(--e-3) var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.buscador__resultado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio);
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease);
}
.buscador__resultado:hover,
.buscador__resultado[data-activo='true'] { background: var(--acero-100); }
.buscador__resultado img {
  width: 3rem; height: 2.25rem;
  object-fit: cover;
  border-radius: var(--radio-sm);
  flex: none;
  background: var(--acero-100);
}
.buscador__resultado-texto { min-width: 0; }
.buscador__resultado-nombre {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buscador__resultado-meta { font-size: var(--t-xs); color: var(--texto-suave); }
.buscador__vacio { padding: var(--e-5) var(--e-3); text-align: center; color: var(--texto-suave); font-size: var(--t-sm); }
.buscador__marca { background: rgba(0,0,0,.10); font-weight: var(--peso-bold); border-radius: 2px; }

/* --- Hamburguesa ------------------------------------------------------ */
.hamburguesa {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hamburguesa:hover { border-color: var(--adco-negro); }
.hamburguesa__caja { position: relative; width: 1.25rem; height: 0.875rem; }
.hamburguesa__linea {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--adco-negro);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-salida), opacity var(--dur-rapida) var(--ease);
}
.hamburguesa__linea:nth-child(1) { top: 0; }
.hamburguesa__linea:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburguesa__linea:nth-child(3) { bottom: 0; }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* --- Colapso a menú móvil (tablet y móvil) ---------------------------- */
@media (max-width: 80rem) {
  .hamburguesa { display: grid; }
  .buscador { order: 3; }
  .buscador__campo { width: clamp(8rem, 32vw, 12rem); }

  .nav-principal {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-5) var(--canal) var(--e-9);
    background: var(--adco-blanco);
    border-top: 1px solid var(--borde);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Estado cerrado */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease-salida),
                visibility 0s linear var(--dur);
  }
  .nav-principal[data-abierto='true'] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .nav-principal__enlace {
    padding: var(--e-4) var(--e-2);
    font-size: var(--t-md);
    border-bottom: 1px solid var(--borde);
    /* Entrada escalonada de los items */
    opacity: 0;
    transform: translateX(-0.75rem);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-salida);
  }
  .nav-principal[data-abierto='true'] .nav-principal__enlace {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(60ms + var(--i, 0) * 45ms);
  }
  .nav-principal__enlace::after { display: none; }
  .nav-principal__enlace[aria-current='page'] { border-left: 3px solid var(--adco-negro); padding-left: var(--e-4); }
  .nav-principal__cta { margin-top: var(--e-6); }
}

/* En móvil el encabezado usa dos filas exactas:
   fila 1 → logotipo + hamburguesa · fila 2 → buscador a todo lo ancho. */
@media (max-width: 30rem) {
  .encabezado__interior { flex-wrap: wrap; padding-bottom: var(--e-3); }
  .logo        { order: 1; }
  .hamburguesa { order: 2; }
  .buscador    { order: 3; flex: 1 1 100%; }
  .buscador__campo { width: 100%; }
  :root { --header-h: 8.25rem; }
}

body[data-menu-abierto='true'] { overflow: hidden; }

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(42rem, 88svh);
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
  background: var(--adco-negro);
  color: var(--texto-inverso);
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* <picture> es solo un contenedor: si no se le da alto, el height:100% de la
   imagen interior no tiene contra qué resolverse y la imagen colapsa a su
   alto intrínseco. Aplica a todos los recuadros con object-fit: cover. */
.hero__fondo picture,
.hero-pagina__fondo picture,
.tarjeta-producto__medio picture,
.proyecto__medio picture { display: block; width: 100%; height: 100%; }

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
  /* Deriva lentísima: da vida sin distraer */
  animation: hero-deriva 28s var(--ease) infinite alternate;
}
/* Velo direccional: garantiza contraste AA del texto sobre la foto.
   En escritorio el degradado corre en diagonal (el texto vive a la izquierda);
   en móvil el bloque es alto y angosto, así que corre en vertical y se aclara
   arriba para que la textura del producto siga leyéndose. */
.hero__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.88) 40%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.18) 100%),
    linear-gradient(to top, rgba(0,0,0,.75), transparent 45%);
}

@media (max-width: 48rem) {
  .hero__fondo img { opacity: .68; }
  .hero__fondo::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.70) 30%,
      rgba(0,0,0,.88) 68%,
      rgba(0,0,0,.94) 100%);
  }
}

@keyframes hero-deriva {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

.hero__interior { position: relative; z-index: 1; }
.hero__contenido { max-width: 46rem; }

.hero__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  margin-bottom: var(--e-5);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--adco-blanco);
}
.hero__punto {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--whatsapp);
  flex: none;
  animation: pulso 2.4s var(--ease) infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
  70%      { box-shadow: 0 0 0 0.5rem rgba(37,211,102,0); }
}

.hero__titulo {
  font-size: var(--t-3xl);
  font-weight: var(--peso-black);
  letter-spacing: -0.025em;
  margin-bottom: var(--e-5);
}
.hero__titulo em {
  font-style: normal;
  display: block;
  color: var(--acero-400);
}

.hero__subtitulo {
  font-size: var(--t-md);
  color: var(--acero-200);
  max-width: 36rem;
  margin-bottom: var(--e-7);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-bottom: var(--e-7);
}
@media (max-width: 30rem) {
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .btn { width: 100%; }
}

/* Tira de datos duros bajo el hero */
.hero__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--e-5);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 46rem;
}
.hero__dato-valor {
  font-family: var(--tipo-titulo);
  font-size: var(--t-xl);
  font-weight: var(--peso-black);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__dato-etiqueta {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acero-400);
}

/* Hero interior (páginas secundarias) */
.hero-pagina {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  background: var(--adco-negro);
  color: var(--texto-inverso);
  overflow: hidden;
}
.hero-pagina__fondo { position: absolute; inset: 0; z-index: 0; }
.hero-pagina__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.hero-pagina__fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(0,0,0,.92), rgba(0,0,0,.55));
}
.hero-pagina__interior { position: relative; z-index: 1; }
.hero-pagina__titulo { font-size: var(--t-2xl); font-weight: var(--peso-black); margin-top: var(--e-3); }
.hero-pagina__intro { margin-top: var(--e-4); font-size: var(--t-md); color: var(--acero-300); max-width: 42rem; }
.hero-pagina .rotulo { color: var(--acero-400); }

/* Migas de pan */
.migas { font-size: var(--t-xs); color: var(--acero-400); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; }
.migas a { color: var(--acero-300); text-decoration: none; }
.migas a:hover { color: var(--adco-blanco); text-decoration: underline; }
.migas li + li::before { content: '/'; margin-right: var(--e-2); color: var(--acero-600); }
.migas [aria-current='page'] { color: var(--adco-blanco); font-weight: var(--peso-semi); }

/* ==========================================================================
   08. SELLO DE CALIDAD + VALUE PROPS
   --------------------------------------------------------------------------
   IMPORTANTE — CUMPLIMIENTO: esta sección NO usa ni debe usar logotipos
   institucionales de terceros (ISO, IATF, etc.). El sello es un gráfico
   propio de ADCO. El texto afirma el ORIGEN certificado del producto, no una
   certificación propia de ADCO. Ver /docs/CONTENIDO.md antes de editar.
   ========================================================================== */

.calidad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .calidad { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* --- Sello propio de ADCO (SVG inline, sin dependencias) --------------- */
.sello {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(11rem, 26vw, 15rem);
  aspect-ratio: 1;
  margin-inline: auto;
  flex: none;
}
.sello__anillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello__anillo-texto { animation: girar 26s linear infinite; transform-origin: 50% 50%; }
@keyframes girar { to { transform: rotate(360deg); } }
.sello__centro {
  display: grid;
  place-items: center;
  gap: var(--e-1);
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--adco-negro);
  color: var(--adco-blanco);
  text-align: center;
  padding: var(--e-3);
}
.sello__icono { width: 2rem; height: 2rem; }
.sello__titulo {
  font-family: var(--tipo-titulo);
  font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.125rem);
  font-weight: var(--peso-black);
  line-height: 1;
  letter-spacing: 0.02em;
}
.sello__sub {
  font-size: 0.5rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acero-400);
}

.calidad__lista { display: grid; gap: var(--e-5); margin-top: var(--e-6); padding: 0; list-style: none; }
.calidad__item { display: flex; gap: var(--e-4); }
.calidad__item-icono {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--adco-blanco);
  color: var(--adco-negro);
}
.calidad__item-icono svg { width: 1.25rem; height: 1.25rem; }
.calidad__item-titulo { font-size: var(--t-base); font-weight: var(--peso-bold); margin-bottom: var(--e-1); }
.calidad__item-texto { font-size: var(--t-sm); color: var(--texto-suave); }

/* Nota legal al pie de la sección de calidad */
.nota-legal {
  margin-top: var(--e-6);
  padding: var(--e-4) var(--e-5);
  background: var(--adco-blanco);
  border-left: 3px solid var(--acero-400);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.6;
}

/* --- Value props ------------------------------------------------------ */
.propuesta {
  position: relative;
  padding: var(--e-6);
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: transform var(--dur) var(--ease-salida),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.propuesta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--adco-negro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-lenta) var(--ease-salida);
}
.propuesta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: transparent; }
.propuesta:hover::before { transform: scaleY(1); }
.propuesta__icono {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: var(--e-5);
  background: var(--acero-100);
  border-radius: var(--radio);
  color: var(--adco-negro);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.propuesta:hover .propuesta__icono { background: var(--adco-negro); color: var(--adco-blanco); }
.propuesta__icono svg { width: 1.5rem; height: 1.5rem; }
.propuesta__titulo { font-size: var(--t-md); font-weight: var(--peso-bold); margin-bottom: var(--e-2); }
.propuesta__texto { font-size: var(--t-sm); color: var(--texto-suave); }

/* ==========================================================================
   09. TARJETAS
   ========================================================================== */

/* --- Tarjeta de producto ---------------------------------------------- */
.tarjeta-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-salida),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tarjeta-producto:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: transparent; }

.tarjeta-producto__medio {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--acero-100);
}
.tarjeta-producto__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-salida), filter var(--dur-lenta) var(--ease);
}
.tarjeta-producto:hover .tarjeta-producto__medio img { transform: scale(1.06); filter: contrast(1.08); }

/* Etiqueta de disponibilidad */
.etiqueta {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.3125rem 0.625rem;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--adco-blanco);
  border-radius: var(--radio-sm);
  font-size: 0.625rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.etiqueta__punto { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--whatsapp); flex: none; }
.etiqueta--pedido { background: rgba(72,72,72,.9); }
.etiqueta--pedido .etiqueta__punto { background: var(--acero-300); }

.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--e-2);
  padding: var(--e-5);
}
.tarjeta-producto__categoria {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.tarjeta-producto__titulo {
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  letter-spacing: -0.01em;
}
.tarjeta-producto__texto { font-size: var(--t-sm); color: var(--texto-suave); flex: 1; }

.tarjeta-producto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}
.chip {
  padding: 0.1875rem 0.5rem;
  background: var(--acero-100);
  border-radius: var(--radio-sm);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  white-space: nowrap;
}

.tarjeta-producto__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.tarjeta-producto__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  transition: gap var(--dur) var(--ease);
}
.tarjeta-producto:hover .tarjeta-producto__accion { gap: var(--e-3); }
.tarjeta-producto__accion svg { width: 1rem; height: 1rem; }

/* --- Tarjeta de industria --------------------------------------------- */
.tarjeta-industria {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(15rem, 12rem + 12vw, 20rem);
  padding: var(--e-5);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--acero-950);
  color: var(--adco-blanco);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-salida), box-shadow var(--dur) var(--ease);
}
.tarjeta-industria:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.tarjeta-industria img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  transition: transform var(--dur-lenta) var(--ease-salida), opacity var(--dur-lenta) var(--ease);
}
.tarjeta-industria:hover img { transform: scale(1.07); opacity: .68; }
.tarjeta-industria::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.94) 12%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%);
}
.tarjeta-industria__contenido { position: relative; }
.tarjeta-industria__icono {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: var(--e-4);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radio);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tarjeta-industria:hover .tarjeta-industria__icono { background: var(--adco-blanco); border-color: var(--adco-blanco); color: var(--adco-negro); }
.tarjeta-industria__icono svg { width: 1.25rem; height: 1.25rem; }
.tarjeta-industria__titulo { font-size: var(--t-lg); font-weight: var(--peso-black); letter-spacing: -0.015em; }
.tarjeta-industria__texto {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--acero-200);
  /* Se revela al pasar el cursor en escritorio; siempre visible en táctil */
  max-height: 6rem;
  overflow: hidden;
}
@media (hover: hover) and (min-width: 48rem) {
  .tarjeta-industria__texto {
    max-height: 0;
    opacity: 0;
    transition: max-height var(--dur-lenta) var(--ease-salida), opacity var(--dur) var(--ease), margin-top var(--dur-lenta) var(--ease-salida);
    margin-top: 0;
  }
  .tarjeta-industria:hover .tarjeta-industria__texto,
  .tarjeta-industria:focus-visible .tarjeta-industria__texto {
    max-height: 6rem; opacity: 1; margin-top: var(--e-2);
  }
}

/* --- Tarjeta de recurso / glosario ------------------------------------ */
.tarjeta-recurso {
  padding: var(--e-6);
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: transform var(--dur) var(--ease-salida), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tarjeta-recurso:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); border-color: var(--borde-fuerte); }
.tarjeta-recurso__termino {
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  margin-bottom: var(--e-2);
}
.tarjeta-recurso__definicion { font-size: var(--t-sm); color: var(--texto-suave); }
.tarjeta-recurso__etiqueta {
  display: inline-block;
  margin-bottom: var(--e-3);
  padding: 0.1875rem 0.5rem;
  background: var(--acero-100);
  border-radius: var(--radio-sm);
  font-size: 0.6875rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ==========================================================================
   10. CATÁLOGO + FILTROS
   ========================================================================== */

.catalogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .catalogo { grid-template-columns: 16.5rem minmax(0, 1fr); }
}

.filtros {
  position: relative;
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
}
@media (min-width: 62rem) {
  .filtros { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100svh - var(--header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; }
}

.filtros__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
}
.filtros__titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
}
.filtros__limpiar {
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filtros__limpiar:hover { color: var(--adco-negro); }

.filtro-grupo { border-bottom: 1px solid var(--borde); }
.filtro-grupo:last-child { border-bottom: 0; }
.filtro-grupo__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e-4) 0;
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  text-align: left;
}
.filtro-grupo__flecha { width: 0.875rem; height: 0.875rem; flex: none; transition: transform var(--dur) var(--ease); }
.filtro-grupo__boton[aria-expanded='false'] .filtro-grupo__flecha { transform: rotate(-90deg); }
.filtro-grupo__panel { display: grid; gap: var(--e-1); padding-bottom: var(--e-4); }
.filtro-grupo__panel[hidden] { display: none; }

.opcion-filtro {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;       /* objetivo táctil */
  padding: var(--e-1) var(--e-2);
  border-radius: var(--radio);
  cursor: pointer;
  font-size: var(--t-sm);
  transition: background-color var(--dur-rapida) var(--ease);
}
.opcion-filtro:hover { background: var(--acero-50); }
.opcion-filtro input {
  appearance: none;
  width: 1.125rem; height: 1.125rem;
  flex: none;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--adco-blanco);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease);
}
.opcion-filtro input::after {
  content: '';
  width: 0.625rem; height: 0.625rem;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 8%, 38% 66%);
  background: var(--adco-blanco);
  transform: scale(0);
  transition: transform var(--dur-rapida) var(--ease-salida);
}
.opcion-filtro input:checked { background: var(--adco-negro); border-color: var(--adco-negro); }
.opcion-filtro input:checked::after { transform: scale(1); }
.opcion-filtro__texto { flex: 1; }
.opcion-filtro__conteo { font-size: var(--t-xs); color: var(--acero-500); font-variant-numeric: tabular-nums; }

/* Barra de filtros en móvil */
.filtros__abrir { display: none; }
@media (max-width: 61.99rem) {
  .filtros__abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    width: 100%;
    min-height: 3rem;
    padding: var(--e-3) var(--e-5);
    border: 2px solid var(--adco-negro);
    border-radius: var(--radio);
    font-size: var(--t-sm);
    font-weight: var(--peso-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .filtros__cerrar { display: grid; }
  .filtros {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-menu);
    max-height: 85svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    box-shadow: var(--sombra-lg);
    transform: translateY(100%);
    transition: transform var(--dur-lenta) var(--ease-salida);
    padding-bottom: max(var(--e-6), env(safe-area-inset-bottom));
  }
  .filtros[data-abierto='true'] { transform: translateY(0); }
  .filtros__velo {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-menu) - 1);
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .filtros__velo[data-visible='true'] { opacity: 1; visibility: visible; transition-delay: 0s; }
}
.filtros__cerrar { display: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radio); }
.filtros__cerrar:hover { background: var(--acero-100); }
@media (min-width: 62rem) { .filtros__cerrar, .filtros__velo { display: none !important; } }

/* Barra de resultados */
.resultados-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.resultados-conteo { font-size: var(--t-sm); color: var(--texto-suave); }
.resultados-conteo strong { color: var(--texto); font-weight: var(--peso-bold); }

.orden {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
}
.orden select {
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-8) var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--adco-blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23606060' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 0.75rem;
  appearance: none;
  cursor: pointer;
}

/* Fichas activas de filtro */
.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.filtros-activos:empty { display: none; }
.ficha-activa {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  background: var(--adco-negro);
  color: var(--adco-blanco);
  border-radius: 100px;
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
}
.ficha-activa button {
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-rapida) var(--ease);
}
.ficha-activa button:hover { background: rgba(255,255,255,.22); }
.ficha-activa svg { width: 0.625rem; height: 0.625rem; }

/* Estado vacío */
.sin-resultados {
  grid-column: 1 / -1;
  padding: var(--e-10) var(--e-5);
  text-align: center;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-lg);
}
.sin-resultados__icono { width: 3rem; height: 3rem; margin: 0 auto var(--e-4); color: var(--acero-400); }
.sin-resultados__titulo { font-size: var(--t-lg); font-weight: var(--peso-bold); margin-bottom: var(--e-2); }
.sin-resultados__texto { color: var(--texto-suave); margin-bottom: var(--e-5); }

/* Ocultar tarjeta filtrada sin romper la rejilla */
.tarjeta-producto[hidden] { display: none; }

/* ==========================================================================
   11. ACORDEÓN FAQ
   ========================================================================== */

.faq { display: grid; gap: var(--e-3); max-width: 52rem; }
.faq-item {
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item:hover { border-color: var(--borde-fuerte); }
.faq-item[data-abierto='true'] { border-color: var(--adco-negro); box-shadow: var(--sombra); }

.faq-item__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--e-5);
  text-align: left;
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  transition: background-color var(--dur-rapida) var(--ease);
}
.faq-item__boton:hover { background: var(--acero-50); }

.faq-item__mas {
  position: relative;
  width: 1.25rem; height: 1.25rem;
  flex: none;
}
.faq-item__mas::before,
.faq-item__mas::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--adco-negro);
  transition: transform var(--dur) var(--ease-salida);
}
.faq-item__mas::before { width: 1rem; height: 2px; transform: translate(-50%,-50%); }
.faq-item__mas::after  { width: 2px; height: 1rem; transform: translate(-50%,-50%); }
.faq-item[data-abierto='true'] .faq-item__mas::after { transform: translate(-50%,-50%) rotate(90deg); }

/* Animación de altura sin JS de medición: grid 0fr → 1fr */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-lenta) var(--ease-salida);
}
.faq-item[data-abierto='true'] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; }
.faq-item__contenido {
  padding: 0 var(--e-5) var(--e-5);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 46rem;
}
.faq-item__contenido p + p { margin-top: var(--e-3); }
.faq-item__contenido ul { margin: var(--e-3) 0 0; padding-left: var(--e-5); display: grid; gap: var(--e-2); }

/* ==========================================================================
   12. CUPÓN DE DESCUENTO
   --------------------------------------------------------------------------
   Discreto por diseño: enlace expandible, para no competir con los CTA
   principales del hero. Sin backend: el código es estático y la aprobación
   la hace el equipo de ventas al recibir el mensaje.
   ========================================================================== */

.cupon { max-width: 34rem; }
.cupon--centrado { margin-inline: auto; }

.cupon__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  padding: var(--e-2) 0;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--acero-400);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.cupon__disparador:hover { color: var(--adco-negro); text-decoration-color: var(--adco-negro); }
.cupon__disparador svg { width: 1rem; height: 1rem; flex: none; transition: transform var(--dur) var(--ease); }
.cupon__disparador[aria-expanded='true'] svg { transform: rotate(180deg); }
.seccion--oscura .cupon__disparador { color: var(--acero-300); }
.seccion--oscura .cupon__disparador:hover { color: var(--adco-blanco); text-decoration-color: var(--adco-blanco); }

.cupon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-lenta) var(--ease-salida);
}
.cupon[data-abierto='true'] .cupon__panel { grid-template-rows: 1fr; }
.cupon__panel > div { overflow: hidden; }

.cupon__caja {
  margin-top: var(--e-4);
  padding: var(--e-5);
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}

.cupon__codigo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--e-3);
}
.cupon__codigo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 12rem;
  min-height: 3.25rem;
  padding: var(--e-3) var(--e-4);
  background: var(--acero-50);
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: var(--tipo-titulo);
  font-size: var(--t-md);
  font-weight: var(--peso-black);
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--adco-negro);
  user-select: all;
}
.cupon__copiar { flex: 0 0 auto; min-width: 9.5rem; }

/* Confirmación "¡Copiado!" */
.cupon__copiar[data-copiado='true'] {
  --btn-fondo: var(--whatsapp-oscuro);
  --btn-borde: var(--whatsapp-oscuro);
}
.cupon__aviso {
  display: block;
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--whatsapp-oscuro);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-salida);
}
.cupon__aviso[data-visible='true'] { opacity: 1; transform: translateY(0); }
.cupon__aviso[data-error='true'] { color: #B3261E; }

.cupon__instruccion {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.cupon__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }
.cupon__acciones .btn { flex: 1 1 12rem; }
.cupon__letra-chica { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--acero-500); line-height: 1.55; }

/* ==========================================================================
   13. PRUEBA SOCIAL
   ========================================================================== */

.testimonio {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--adco-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  height: 100%;
  transition: transform var(--dur) var(--ease-salida), box-shadow var(--dur) var(--ease);
}
.testimonio:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.testimonio__comillas { width: 2rem; height: 2rem; color: var(--acero-300); flex: none; }
.testimonio__cita { flex: 1; font-size: var(--t-base); line-height: 1.7; }
.testimonio__autor { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.testimonio__inicial {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  background: var(--adco-negro);
  color: var(--adco-blanco);
  border-radius: 50%;
  font-family: var(--tipo-titulo);
  font-weight: var(--peso-bold);
}
.testimonio__nombre { font-size: var(--t-sm); font-weight: var(--peso-bold); }
.testimonio__rol { font-size: var(--t-xs); color: var(--texto-suave); }

/* Proyectos */
.proyecto {
  position: relative;
  display: block;
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--adco-blanco);
  background: var(--acero-950);
}
.proyecto__medio { aspect-ratio: 4 / 3; }
.proyecto__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform var(--dur-lenta) var(--ease-salida), opacity var(--dur) var(--ease);
}
.proyecto:hover img { transform: scale(1.06); opacity: 1; }
.proyecto__pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
}
.proyecto__lugar {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--acero-300);
}
.proyecto__titulo { font-size: var(--t-md); font-weight: var(--peso-bold); margin-top: var(--e-1); }

/* ==========================================================================
   14. FORMULARIOS
   ========================================================================== */

.formulario { display: grid; gap: var(--e-5); }
.campo-fila { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.campo { display: grid; gap: var(--e-2); }

.campo__etiqueta {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
}
.campo__etiqueta .req { color: #B3261E; }
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-suave); }

.campo__control {
  width: 100%;
  min-height: 3rem;            /* 48px — supera el mínimo táctil de 44px */
  padding: var(--e-3) var(--e-4);
  background: var(--adco-blanco);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.campo__control { min-height: 8rem; resize: vertical; padding-top: var(--e-4); }
select.campo__control {
  appearance: none;
  cursor: pointer;
  padding-right: var(--e-9);
  background: var(--adco-blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23606060' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 1rem center / 0.75rem;
}
.campo__control:hover { border-color: var(--acero-600); }
.campo__control:focus {
  outline: none;
  border-color: var(--adco-negro);
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}
.campo__control::placeholder { color: var(--acero-500); }

/* Validación visible — solo tras interacción, nunca al cargar */
.campo__error {
  display: none;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: #B3261E;             /* 5.9:1 sobre blanco — AA */
}
.campo__error svg { width: 0.875rem; height: 0.875rem; flex: none; }
.campo[data-invalido='true'] .campo__error { display: flex; }
.campo[data-invalido='true'] .campo__control { border-color: #B3261E; }
.campo[data-invalido='true'] .campo__control:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.campo[data-valido='true'] .campo__control { border-color: var(--whatsapp-oscuro); }

.formulario__aviso {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
}
.formulario__aviso[hidden] { display: none; }
.formulario__aviso--ok { background: #E8F5EE; color: #0F5132; border-left: 3px solid var(--whatsapp-oscuro); }
.formulario__aviso--error { background: #FCE9E7; color: #8C1D18; border-left: 3px solid #B3261E; }

/* ==========================================================================
   15. PIE DE PÁGINA
   ========================================================================== */

.pie {
  background: var(--adco-negro);
  color: var(--acero-300);
  padding-block: var(--e-10) var(--e-6);
  font-size: var(--t-sm);
}
.pie a { color: var(--acero-300); text-decoration: none; transition: color var(--dur) var(--ease); }
.pie a:hover { color: var(--adco-blanco); }

.pie__rejilla {
  display: grid;
  gap: var(--e-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--e-8);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* En tablet el auto-fit dejaba 3 columnas + la de contacto sola y muy angosta:
   la dirección y los teléfonos se partían en demasiados renglones. Con dos
   columnas queda 2×2 y el bloque de contacto respira. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pie__marca { max-width: 22rem; }
.pie__marca .logo__nombre, .pie__marca .logo__marca { color: var(--adco-blanco); }
.pie__marca .logo__marca { background: var(--adco-blanco); color: var(--adco-negro); }
.pie__marca .logo__descriptor { color: var(--acero-500); }
.pie__lema { margin-top: var(--e-4); color: var(--acero-400); }

.pie__titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--adco-blanco);
  margin-bottom: var(--e-4);
}
.pie__lista { display: grid; gap: var(--e-3); list-style: none; padding: 0; }
.pie__contacto { display: grid; gap: var(--e-3); list-style: none; padding: 0; }
.pie__contacto li { display: flex; gap: var(--e-3); }
.pie__contacto svg { width: 1.0625rem; height: 1.0625rem; flex: none; margin-top: 0.2em; color: var(--acero-500); }

/* Teléfonos: se acomodan en fila y se reparten solos según el ancho disponible.
   En columnas anchas (tarjeta de Contáctanos) caben en una sola línea; en el
   pie y en celular bajan de renglón sin perder la alineación con el ícono.
   Se usa en el pie de las 6 páginas y en la tarjeta de contacto. */
.telefonos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
  font-variant-numeric: tabular-nums;
}
.telefonos a { white-space: nowrap; }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-6);
  font-size: var(--t-xs);
  color: var(--acero-500);
}
.pie__legal { display: flex; flex-wrap: wrap; gap: var(--e-5); }

/* ==========================================================================
   16. WHATSAPP FLOTANTE
   ========================================================================== */

.wa-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 3.5rem;          /* 56px — muy por encima del mínimo de 44px */
  min-height: 3.5rem;
  padding: 0 1.125rem;
  background: var(--whatsapp);
  color: #06251A;             /* 8.1:1 sobre el verde — AAA */
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,.20), 0 12px 32px rgba(0,0,0,.18);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  transition: transform var(--dur) var(--ease-salida),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.wa-flotante:hover {
  background: #1FBE5B;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,.24), 0 18px 44px rgba(0,0,0,.22);
}
.wa-flotante:active { transform: translateY(0) scale(.98); }
.wa-flotante svg { width: 1.625rem; height: 1.625rem; flex: none; }

/* Halo que late — llama la atención sin ser intrusivo */
.wa-flotante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--whatsapp);
  z-index: -1;
  animation: wa-halo 3s var(--ease) infinite;
}
@keyframes wa-halo {
  0%        { transform: scale(1);   opacity: .55; }
  55%, 100% { transform: scale(1.5); opacity: 0; }
}

/* En móvil se reduce a círculo para no tapar contenido */
@media (max-width: 30rem) {
  .wa-flotante { padding: 0; width: 3.5rem; justify-content: center; }
  .wa-flotante__texto { display: none; }
}

/* ==========================================================================
   17. ANIMACIONES
   ========================================================================== */

/* Scroll reveal — el JS añade data-visible cuando entra en pantalla.
   Sin JS, el contenido se ve igual (no hay opacidad inicial en .no-js).   */
[data-revelar] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s var(--ease-salida), transform 0.7s var(--ease-salida);
  transition-delay: var(--retraso, 0ms);
}
[data-revelar][data-visible='true'] { opacity: 1; transform: none; }

/* Escalonado automático dentro de una rejilla */
.rejilla > [data-revelar]:nth-child(1)  { --retraso: 0ms; }
.rejilla > [data-revelar]:nth-child(2)  { --retraso: 70ms; }
.rejilla > [data-revelar]:nth-child(3)  { --retraso: 140ms; }
.rejilla > [data-revelar]:nth-child(4)  { --retraso: 210ms; }
.rejilla > [data-revelar]:nth-child(5)  { --retraso: 60ms; }
.rejilla > [data-revelar]:nth-child(6)  { --retraso: 130ms; }
.rejilla > [data-revelar]:nth-child(7)  { --retraso: 200ms; }
.rejilla > [data-revelar]:nth-child(8)  { --retraso: 270ms; }

/* Respeto absoluto por prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .hero__fondo img { animation: none; transform: scale(1.06); }
}

/* Sin JS: nada queda invisible */
.no-js [data-revelar] { opacity: 1; transform: none; }
.no-js .buscador, .no-js .filtros__abrir { display: none; }
.no-js .faq-item__panel { grid-template-rows: 1fr; }
.no-js .cupon__panel { grid-template-rows: 1fr; }

/* ==========================================================================
   18. IMPRESIÓN
   ========================================================================== */

@media print {
  .encabezado, .wa-flotante, .filtros, .buscador, .hamburguesa, .pie__base { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .hero, .hero-pagina { background: #fff !important; color: #000 !important; min-height: auto; }
  .hero__fondo, .hero-pagina__fondo { display: none; }
  .hero__titulo, .hero__subtitulo, .hero__dato-valor { color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .seccion { padding-block: 1.5rem; break-inside: avoid; }
  .tarjeta-producto, .faq-item { break-inside: avoid; border: 1px solid #999; }
}