/* =====================================================================
   PLANTILLA WEB VALTORAV
   ---------------------------------------------------------------------
   Cómo adaptarla a una marca (en este orden):
   1. «1. MARCA»: colores del logotipo del cliente. Verifica contraste con
      scripts/revisar_sitio.py (revisa estos pares automáticamente).
   2. <html data-estilo="…">: corporativo · industrial · servicio · premium.
   3. «3. TIPOGRAFÍA»: solo si la marca tiene fuente propia en su manual.
   Regla: fuera de :root no se escriben colores sueltos; todo con variables.
   ===================================================================== */

/* Archivo autohospedada (manual EMIVF): woff2 variable 300–800, solo latín. Licencia OFL junto al archivo. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../assets/fonts/archivo-vf-latin.woff2") format("woff2");
}

:root {
  /* ===== 1. MARCA — Manual de identidad EMIVF v1.0 (sep-2026) =====
     Verde EMIVF manda (62 %); el Dorado es acento de valor y nunca pasa de 1/8 de la superficie.
     Dorado como texto: solo grande (3.4:1 sobre blanco); sobre verde claro, nunca texto. */
  --marca: #00361F;            /* Verde EMIVF: títulos, iconos, el único fondo oscuro */
  --marca-oscuro: #00361F;     /* el manual no tiene otro oscuro: hero, banda técnica y pie van en Verde EMIVF */
  --marca-suave: #E3EBE5;      /* Verde claro: fondos de chips, tarjetas y tablas */
  --acento: #B78016;           /* Dorado EMIVF: botón principal, láminas y línea dorada */
  --acento-hover: #C8922B;     /* más claro, para que la tinta encima siga pasando 4.5:1 */
  --sobre-acento: #131C17;     /* Tinta sobre dorado: 5.1:1 (blanco sobre dorado no pasa) */
  --acento-texto: var(--marca);/* el dorado no va como texto chico sobre claro: las etiquetas van en verde */

  /* ===== 2. NEUTROS ===== */
  --tinta: #131C17;            /* Tinta EMIVF: texto corrido (17.4:1) */
  --tinta-suave: #3B4741;      /* párrafos */
  --tinta-tenue: #56625B;      /* notas pequeñas: pasa 4.5:1 también sobre el fondo alterno */
  --fondo: #ffffff;
  --fondo-alt: #EEF2EF;        /* el fondo de los esquemas del manual: verde claro aclarado */
  --borde: #D3DDD6;
  --foco: var(--marca);        /* anillo de foco sobre fondo claro (≥ 3:1) */
  --whatsapp-oscuro: #0e7a3e;  /* verde SOLO para WhatsApp (blanco encima 5.4:1) */
  --exito: #1a7f4b;
  --alerta: #8a6100;
  --alerta-fondo: #fff8e1;
  --error: #b42318;

  /* ===== 3. TIPOGRAFÍA — Archivo (manual): títulos Extra Bold −1 %, etiquetas SemiBold espaciadas,
     botones Bold, datos Medium con cifras tabulares, notas Light. Nunca itálicas (son del nombre EMIVF). */
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: var(--fuente);
  --fuente-mono: var(--fuente);   /* el manual pide los datos en Archivo Medium, no en monoespaciada */
  --peso-titulos: 800;
  --tracking-titulos: -0.01em;
  /* Escala de seis tamaños; nada que se lea va por debajo de 13 px (segunda revisión, 16-oct-2026).
     Fuera de :root los tamaños de letra se escriben solo con estos tokens. */
  --t-h1: clamp(2.1rem, 1.2rem + 2.4vw, 3.25rem);    /* titular del hero */
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);   /* títulos de sección, h1 de fichas y legales, lema, cifras grandes */
  --t-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);    /* producto y pasos del recorrido */
  --t-lead: clamp(1.05rem, .98rem + .35vw, 1.22rem); /* entradas, títulos de tarjetas, formularios y preguntas */
  --t-base: 1rem;              /* 16 px, interlínea 1.6 (manual) */
  --t-chico: .8125rem;         /* 13 px: notas, pie, etiquetas, claves de producto */
  --t-etiqueta: var(--t-chico);

  /* ===== 4. FORMA (la cambia data-estilo) ===== */
  --radio: 16px;
  --radio-sm: 10px;
  --radio-boton: 999px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --sombra-hover: 0 2px 6px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .11);
  --etiqueta-fuente: var(--fuente);
  --etiqueta-tracking: .18em;

  /* ===== 5. ESPACIO Y MOVIMIENTO ===== */
  --contenedor: 1200px;
  --margen: clamp(1rem, .4rem + 2.6vw, 2rem);
  --seccion: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --hueco: clamp(1rem, .75rem + 1vw, 1.5rem);
  --alto-cabecera: 76px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --transicion: .25s var(--curva);

  /* ===== 6. MOVIMIENTO (lenguaje de la marca; lo ajusta data-estilo) ===== */
  --mov-duracion: .7s;         /* entradas al hacer scroll */
  --mov-distancia: 18px;       /* cuánto suben al aparecer */
  --mov-curva: cubic-bezier(.22, .61, .36, 1);
  --mov-escalon: .08s;         /* retraso entre hermanos de una rejilla */
}

/* ---------- Carácter por estilo: cada uno sale de un sitio ---------- */



/* PREMIUM: sobrio, mucho aire, bordes finos, casi sin sombra, etiqueta con punto. */
[data-estilo="premium"] {
  --radio: 8px; --radio-sm: 6px; --radio-boton: 6px;
  --sombra: none; --sombra-hover: 0 14px 34px rgba(16, 24, 40, .08);
  --peso-titulos: 800; --tracking-titulos: -0.01em;   /* EMIVF: Extra Bold −1 % (manual) */
  --etiqueta-tracking: .22em;
  --fondo-alt: #EEF2EF;
  --seccion: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --mov-duracion: .95s; --mov-distancia: 26px; --mov-curva: cubic-bezier(.16, 1, .3, 1); --mov-escalon: .1s;     /* lento, suave */
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--fuente); font-size: var(--t-base); line-height: 1.6;
  color: var(--tinta); background: var(--fondo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--fuente-titulos); font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos); line-height: 1.1; text-wrap: balance;
}
h3, h4 { line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--marca); color: #fff; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .75rem 1rem;
  background: var(--tinta); color: #fff; border-radius: var(--radio-sm); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; }

.contenedor { width: min(100% - 2 * var(--margen), var(--contenedor)); margin-inline: auto; }
.contenedor--angosto { --contenedor: 820px; }
.centrado { text-align: center; }

.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Contextos oscuros: el foco pasa a blanco */
.hero, .seccion--oscura, .llamado, .pie, .cotizador__aparte, .mision, .aviso-barra { --foco: #fff; }

/* =====================================================================
   PIEZAS BÁSICAS: etiqueta, títulos de sección, botones, chips, insignias
   ===================================================================== */
/* Ojo: una regla de contenedor como `.titulo-seccion p` le gana a `.etiqueta` (y a cualquier pieza con clase
   propia) y la deja del tamaño y color del párrafo. Las reglas de párrafos excluyen esas piezas: p:not(.etiqueta). */
.etiqueta {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
  font-family: var(--etiqueta-fuente); font-size: var(--t-etiqueta); font-weight: 600;
  letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--acento-texto);
}
.etiqueta::before { content: ""; width: 28px; height: 2px; background: var(--acento); border-radius: 2px; flex: none; }
[data-estilo="premium"] .etiqueta::before { width: 6px; height: 6px; border-radius: 50%; }
.hero .etiqueta, .seccion--oscura .etiqueta, .llamado .etiqueta, .cotizador__aparte .etiqueta { color: rgba(255, 255, 255, .82); }

.titulo-seccion { max-width: 760px; margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.titulo-seccion h2, .h2 { font-size: var(--t-h2); }
.titulo-seccion > p:not(.etiqueta) { margin-top: 1rem; font-size: var(--t-lead); color: var(--tinta-suave); }
.titulo-seccion--centro { margin-inline: auto; text-align: center; }
.titulo-seccion--centro .etiqueta { justify-content: center; }

.boton {
  --b-fondo: var(--acento); --b-texto: var(--sobre-acento); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .75rem 1.5rem; border: 1.5px solid var(--b-borde); border-radius: var(--radio-boton);
  background: var(--b-fondo); color: var(--b-texto); font-weight: 600; font-size: var(--t-base); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { --b-fondo: var(--acento-hover); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton .ico { width: 1.1em; height: 1.1em; transition: transform var(--transicion); }
.boton--marca { --b-fondo: var(--marca); --b-texto: #fff; }
.boton--marca:hover { --b-fondo: var(--marca-oscuro); }
.boton--contorno { --b-fondo: transparent; --b-texto: var(--tinta); --b-borde: var(--borde); }
.boton--contorno:hover { --b-fondo: transparent; --b-borde: var(--tinta); }
.boton--claro { --b-fondo: transparent; --b-texto: #fff; --b-borde: rgba(255, 255, 255, .6); }
.boton--claro:hover { --b-fondo: rgba(255, 255, 255, .1); --b-borde: #fff; }
.boton--whatsapp { --b-fondo: var(--whatsapp-oscuro); --b-texto: #fff; }
.boton--whatsapp:hover { --b-fondo: color-mix(in srgb, var(--whatsapp-oscuro) 85%, #000); }
.boton--chico { min-height: 44px; padding: .55rem 1.05rem; font-size: var(--t-base); }
.boton--ancho { width: 100%; }
@media (hover: hover) {
  .boton:hover { transform: translateY(-1px); }
  .boton:hover .ico--flecha { transform: translateX(3px); }
}
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--marca); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--marca) 35%, transparent); }
.enlace-flecha:hover { text-decoration-color: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .42rem .95rem; border: 1px solid var(--borde);
  border-radius: 999px; background: var(--fondo); font-size: var(--t-base); font-weight: 500; color: var(--tinta-suave);
  white-space: nowrap; cursor: pointer; transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.chip:hover { border-color: var(--marca); color: var(--marca); }
.chip[aria-pressed="true"], .chip--activo, input:checked + .chip { background: var(--marca); border-color: var(--marca); color: #fff; }
span.chip { cursor: default; }
.insignia {
  display: inline-block; padding: .3rem .6rem; border-radius: calc(var(--radio-sm) - 2px);
  background: var(--marca); color: #fff; font-family: var(--etiqueta-fuente); font-size: var(--t-chico); font-weight: 600;
  letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; line-height: 1.2;
}
.insignia--acento { background: var(--acento); color: var(--sobre-acento); }
.insignia--suave { background: var(--marca-suave); color: var(--marca); }

/* =====================================================================
   CABECERA (sticky) + MENÚ
   ===================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 100; background: var(--fondo);
  border-bottom: 1px solid transparent; transition: box-shadow var(--transicion), border-color var(--transicion);
}
.cabecera.con-sombra { border-color: var(--borde); box-shadow: 0 6px 24px rgba(16, 24, 40, .06); }
.cabecera[data-ocultable] { transition: transform .35s var(--curva), box-shadow var(--transicion), border-color var(--transicion); }
.cabecera.oculta { transform: translateY(-100%); box-shadow: none; }
.cabecera .contenedor { display: flex; align-items: center; gap: 1.25rem; height: var(--alto-cabecera); }
.cabecera__logo { display: flex; align-items: center; flex: none; margin-right: auto; }
.cabecera__logo img { width: auto; height: 42px; }
.menu { display: flex; align-items: center; gap: .15rem; }
.menu a { padding: .5rem .75rem; border-radius: 8px; font-size: var(--t-base); font-weight: 500; color: var(--tinta); text-decoration: none; transition: color var(--transicion), background var(--transicion); }
.menu a:hover { color: var(--marca); background: var(--fondo-alt); }
.menu a[aria-current="true"] { color: var(--marca); font-weight: 600; box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
.cabecera__tel { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--marca); text-decoration: none; white-space: nowrap; }
.menu-boton { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); cursor: pointer; }
.menu-boton .ico { width: 24px; height: 24px; }
.menu a { white-space: nowrap; }
@media (max-width: 1279px) { .cabecera__tel span { display: none; } }
@media (max-width: 1180px) { .menu, .cabecera__tel { display: none; } .menu-boton { display: inline-flex; } }
@media (max-width: 980px) {
  :root { --alto-cabecera: 68px; }
  .cabecera .contenedor { gap: .75rem; }
  .cabecera__logo img { height: 36px; }
}
/* Sin JavaScript el menú se muestra envuelto (nunca queda escondido) */
@media (max-width: 1180px) { html:not(.js) .menu { display: flex; flex-wrap: wrap; } html:not(.js) .menu-boton { display: none; } html:not(.js) .cabecera .contenedor { height: auto; flex-wrap: wrap; padding-block: .6rem; } }
@media (max-width: 420px) { .cabecera__cta { padding-inline: .9rem; } }

/* Cajón del menú en celular: cerrado = display:none (no se enfoca con Tab) */
.cajon { position: fixed; inset: 0; z-index: 150; display: none; }
.cajon.abierto { display: block; }
.cajon__fondo { position: absolute; inset: 0; background: rgba(10, 16, 20, .5); opacity: 0; transition: opacity .3s; }
.cajon__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); display: flex; flex-direction: column;
  padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); background: var(--fondo); box-shadow: -20px 0 60px rgba(0, 0, 0, .2);
  transform: translateX(100%); transition: transform .35s var(--curva); overflow-y: auto;
}
.cajon.visible .cajon__fondo { opacity: 1; }
.cajon.visible .cajon__panel { transform: none; }
.cajon .menu-boton { display: inline-flex; align-self: flex-end; }
.cajon nav { display: flex; flex-direction: column; margin: 1rem 0 1.5rem; }
.cajon nav a { padding: 1rem .25rem; border-bottom: 1px solid var(--borde); font-size: var(--t-lead); font-weight: 600; text-decoration: none; }
.cajon__acciones { display: grid; gap: .75rem; margin-top: auto; }
body.sin-scroll { overflow: hidden; }

/* =====================================================================
   HERO — foto o video a sangre con velo + datos clave
   ===================================================================== */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(90svh, 860px); padding-block: clamp(5rem, 4rem + 6vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem); color: #fff; background: var(--marca-oscuro); overflow: hidden; }
.hero__medio { position: absolute; inset: 0; z-index: -2; background: var(--marca-oscuro); }
.hero__medio img, .hero__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco-foto, 65% center); }
.hero__medio video { opacity: 0; transition: opacity 1.2s var(--curva); }
.hero__velo { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(95deg, color-mix(in srgb, var(--marca-oscuro) 94%, transparent) 0%, color-mix(in srgb, var(--marca-oscuro) 74%, transparent) 46%, color-mix(in srgb, var(--marca-oscuro) 28%, transparent) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 40%);
}
.hero__contenido { max-width: 760px; }
.hero__titulo { font-size: var(--t-h1); line-height: 1.04; }
.hero__texto { max-width: 600px; margin-top: 1.4rem; font-size: var(--t-lead); color: rgba(255, 255, 255, .86); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.hero__llamar { margin-top: 1.3rem; font-size: var(--t-base); color: rgba(255, 255, 255, .78); }
.hero__llamar a { color: #fff; font-weight: 700; font-size: var(--t-lead); text-decoration: none; margin-left: .35rem; }
.hero__llamar a:hover { text-decoration: underline; }
.hero__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 720px; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero__datos strong { display: block; font-size: var(--t-lead); font-weight: 800; letter-spacing: -.01em; }
.hero__datos > div > span { display: block; margin-top: .2rem; font-size: var(--t-chico); color: rgba(255, 255, 255, .74); line-height: 1.4; }
.hero__sello { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; padding: .45rem .95rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; font-size: var(--t-chico); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero__sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
@media (max-width: 760px) {
  .hero { min-height: auto; align-items: flex-end; }
  .hero__velo { background: linear-gradient(180deg, color-mix(in srgb, var(--marca-oscuro) 50%, transparent) 0%, color-mix(in srgb, var(--marca-oscuro) 90%, transparent) 55%); }
  .hero__acciones .boton { flex: 1 1 100%; }
  .hero__datos { grid-template-columns: 1fr 1fr; }
  .hero__datos > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =====================================================================
   FRANJA DE CONFIANZA y LOGOS DE CLIENTES
   ===================================================================== */
.franja { position: relative; z-index: 2; border-top: 4px solid var(--acento); border-bottom: 1px solid var(--borde); background: var(--fondo); }
.franja ul { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; padding-block: 1.4rem; }
.franja li { display: flex; align-items: center; gap: .65rem; font-size: var(--t-base); font-weight: 600; line-height: 1.3; }
.franja .ico { width: 26px; height: 26px; color: var(--marca); }
@media (max-width: 1080px) { .franja ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .franja ul { grid-template-columns: 1fr 1fr; } .franja li { font-size: var(--t-chico); } }


/* =====================================================================
   SECCIONES Y REJILLAS
   ===================================================================== */
.seccion { position: relative; padding-block: var(--seccion); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura { background: var(--marca-oscuro); color: #fff; }
.seccion--oscura .titulo-seccion > p:not(.etiqueta), .seccion--oscura p:not(.etiqueta) { color: rgba(255, 255, 255, .78); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion__num { display: none; }

.rejilla { display: grid; gap: var(--hueco); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } }

.dos-columnas { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.dos-columnas--arriba { align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

/* =====================================================================
   TARJETAS (por qué, servicios, sectores)
   ===================================================================== */
.tarjeta {
  display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
@media (hover: hover) { .tarjeta--viva:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: color-mix(in srgb, var(--marca) 30%, var(--borde)); } }
.tarjeta__icono { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: calc(var(--radio-sm) + 2px); background: var(--marca-suave); color: var(--marca); }
.tarjeta__icono .ico { width: 24px; height: 24px; }
[data-estilo="premium"] .tarjeta__icono { background: transparent; border: 1px solid var(--borde); }
.tarjeta h3 { font-size: var(--t-lead); }
.tarjeta p:not(.tarjeta__resuelve) { color: var(--tinta-suave); font-size: var(--t-base); }
.tarjeta__resuelve { padding: .75rem .9rem; border-left: 3px solid var(--acento); background: var(--fondo-alt); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; font-size: var(--t-base); }
.tarjeta p.tarjeta__resuelve { color: var(--tinta); }
.tarjeta__resuelve strong { color: var(--acento-texto); }
.tarjeta__pie { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.seccion--alt .tarjeta, .seccion--alt .tarjeta__resuelve { background: var(--fondo); }
.seccion--alt .tarjeta .tarjeta__resuelve { background: var(--fondo-alt); }

/* Lista numerada («¿Por qué?» en versión editorial) */
@media (max-width: 760px) { .numerada { grid-template-columns: 1fr; } }

/* Sectores */

/* Categorías con foto que filtran el catálogo */
@media (hover: hover) { .categoria:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); } }

/* Frase grande de compromiso */

/* =====================================================================
   CATÁLOGO: buscador, filtros, tarjetas, lista de cotización y carga por lotes
   ===================================================================== */
@media (max-width: 760px) { .buscador { flex: 1 1 100%; } }

@media (hover: hover) { .producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); } .producto:hover .producto__foto img { transform: scale(1.03); } }
.proximamente { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 2rem; padding: 1.1rem 1.4rem; border: 1px dashed var(--borde); border-radius: var(--radio); }
.proximamente strong { font-size: var(--t-etiqueta); letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--tinta-tenue); margin-right: .5rem; }

/* =====================================================================
   BANDA TÉCNICA OSCURA y COMPARATIVAS
   ===================================================================== */

.comparativa { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.comparativa h3 { font-size: var(--t-lead); }
.comparativa > p { margin-top: .35rem; font-size: var(--t-base); color: var(--tinta-suave); }
.comparativa small { display: block; margin-top: 1.2rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
/* Barras en HTML (no en SVG): siguen legibles en celular */
.barras { list-style: none; display: grid; gap: .85rem; margin-top: 1.6rem; }
.barras li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 4rem; align-items: center; gap: 1rem; font-size: var(--t-base); }
.barras__pista { height: 12px; border-radius: 999px; background: var(--fondo-alt); overflow: hidden; }
.barras__relleno { display: block; height: 100%; width: var(--valor, 50%); border-radius: inherit; background: color-mix(in srgb, var(--tinta) 25%, var(--fondo-alt)); transform-origin: left; }
.barras li.destaca .barras__relleno { background: var(--acento); }
.barras li.destaca { font-weight: 700; }
.barras b { text-align: right; }
.js .barras__relleno { transform: scaleX(0); transition: transform 1s var(--curva), opacity .3s; }
.js .visible .barras__relleno, .js .visible.barras .barras__relleno { transform: none; }
@media (max-width: 560px) { .barras li { grid-template-columns: 1fr 3.5rem; } .barras__pista { grid-column: 1 / -1; grid-row: 2; } }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.versus > div { padding: 1.4rem 1rem; border-radius: var(--radio); background: var(--fondo-alt); text-align: center; }
.versus > div.destaca { background: var(--marca); color: #fff; }
.versus small { display: block; font-size: var(--t-chico); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; opacity: .8; }
.versus strong { display: block; margin: .3rem 0; font-size: var(--t-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.versus span.vs { font-weight: 700; color: var(--tinta-tenue); }

/* =====================================================================
   PROCESO EN PASOS
   ===================================================================== */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 1.25rem; position: relative; counter-reset: paso; }
.pasos::before { content: ""; position: absolute; top: 26px; left: calc(100% / var(--n, 5) / 2); right: calc(100% / var(--n, 5) / 2); height: 2px; background: var(--borde); }
.paso { position: relative; text-align: center; counter-increment: paso; }
.paso::before {
  content: counter(paso); position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1.1rem;
  border: 2px solid var(--acento); border-radius: 50%; background: var(--fondo); color: var(--acento-texto); font-weight: 700; font-size: var(--t-lead);
  box-shadow: 0 0 0 6px var(--fondo);
}
.seccion--alt .paso::before { background: var(--fondo-alt); box-shadow: 0 0 0 6px var(--fondo-alt); }
.paso h3 { font-size: var(--t-lead); margin-bottom: .45rem; }
.paso p { font-size: var(--t-base); color: var(--tinta-suave); }
@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; gap: 0; }
  .pasos::before { top: 0; bottom: 0; left: 26px; right: auto; width: 2px; height: auto; }
  .paso { display: grid; grid-template-columns: 54px 1fr; gap: 0 1.1rem; text-align: left; padding-bottom: 1.6rem; }
  .paso::before { grid-row: span 2; margin: 0; }
  .paso h3 { align-self: end; margin-top: .6rem; }
}

/* =====================================================================
   COTIZADOR POR PASOS — arma el mensaje y lo manda por WhatsApp
   ===================================================================== */
.cotizador { display: grid; grid-template-columns: 320px 1fr; gap: var(--hueco); align-items: start; }
.cotizador__aparte { position: sticky; top: calc(var(--alto-cabecera) + 1rem); padding: 1.8rem; border-radius: var(--radio); background: var(--marca-oscuro); color: #fff; }
.cotizador__aparte > .ico { width: 32px; height: 32px; color: var(--acento); }
.cotizador__aparte h3 { font-size: var(--t-lead); margin: .8rem 0 .6rem; }
.cotizador__aparte p:not(.etiqueta) { font-size: var(--t-base); color: rgba(255, 255, 255, .8); }
.cotizador__aparte .boton { width: 100%; margin-top: 1.3rem; }
.cotizador__aparte .tel { display: flex; align-items: center; min-height: 44px; margin-top: 1.1rem; font-size: var(--t-lead); font-weight: 700; color: #fff; text-decoration: none; }
.cotizador__caja { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra); }
.progreso { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: .4rem; margin-bottom: 1.6rem; }
.progreso span { height: 5px; border-radius: 999px; background: var(--borde); transition: background var(--transicion); }
.progreso span.hecho { background: var(--marca); }
.progreso span.actual { background: var(--acento); }
.cotizador__paso h3 { font-size: var(--t-lead); }
.cotizador__paso h3:focus { outline: none; }
.cotizador__paso > p:not(.aviso-campo, .formulario__legal) { margin: .3rem 0 1.2rem; font-size: var(--t-base); color: var(--tinta-suave); }
.opciones { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; }
.opciones label { position: relative; }
.opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones input:focus-visible + .chip { outline: 3px solid var(--foco); outline-offset: 2px; }
.cotizador__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.cotizador__resumen { padding: 1rem 1.2rem; border-radius: var(--radio-sm); background: var(--fondo-alt); font-size: var(--t-base); white-space: pre-line; }
.cotizador__rapido { margin-top: 1.2rem; font-size: var(--t-base); color: var(--tinta-suave); }
.cotizador__rapido a { color: var(--marca); font-weight: 600; }
.preseleccion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .6rem .9rem; border-radius: var(--radio-sm); background: var(--marca-suave); font-size: var(--t-base); }
.preseleccion button { min-height: 44px; border: 0; background: none; padding: 0 .4rem; color: var(--marca); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) { .cotizador { grid-template-columns: 1fr; } .cotizador__aparte { position: static; order: 2; } }

/* Aviso de respaldo cuando se abre WhatsApp: por si no se abrió, el mensaje queda para copiar */
.aviso-wa { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--borde); border-left: 4px solid var(--whatsapp-oscuro); border-radius: var(--radio-sm); background: var(--fondo-alt); font-size: var(--t-base); }
.aviso-wa textarea { width: 100%; min-height: 110px; margin: .7rem 0; padding: .6rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo); font-size: var(--t-base); }

/* =====================================================================
   COBERTURA, BIBLIOTECA TÉCNICA, NOSOTROS
   ===================================================================== */

.documento { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); text-decoration: none; transition: border-color var(--transicion), box-shadow var(--transicion); }
.documento:hover { border-color: var(--marca); box-shadow: var(--sombra-hover); }
.documento .tarjeta__icono { width: 42px; height: 42px; }
.documento small { font-family: var(--etiqueta-fuente); font-size: var(--t-chico); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--acento-texto); }
.documento h3 { font-size: var(--t-lead); }
.documento p { font-size: var(--t-base); color: var(--tinta-suave); }
.documento .enlace-flecha { margin-top: auto; padding-top: .4rem; }


/* =====================================================================
   LLAMADO A LA ACCIÓN CON FOTO
   ===================================================================== */
.llamado { position: relative; isolation: isolate; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); color: #fff; background: var(--marca-oscuro); overflow: hidden; }
.llamado > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.llamado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--marca-oscuro) 94%, transparent), color-mix(in srgb, var(--marca-oscuro) 72%, transparent)); }
.llamado .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.llamado h2 { font-size: var(--t-h2); max-width: 640px; }
.llamado p:not(.etiqueta) { margin-top: .8rem; max-width: 560px; color: rgba(255, 255, 255, .82); }
.llamado__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =====================================================================
   PREGUNTAS FRECUENTES (título a la izquierda, preguntas a la derecha)
   ===================================================================== */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq .titulo-seccion { position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta:first-child { border-top: 1px solid var(--borde); }
.pregunta summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem .25rem; font-weight: 600; font-size: var(--t-lead); cursor: pointer; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--borde); border-radius: 50%; font-weight: 400; font-size: var(--t-lead); line-height: 1; color: var(--acento-texto); transition: transform var(--transicion); }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover { color: var(--marca); }
.pregunta div { padding: 0 .25rem 1.3rem; color: var(--tinta-suave); }
.pregunta div p + p { margin-top: .7rem; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq .titulo-seccion { position: static; } }

/* =====================================================================
   CONTACTO: datos + mapa + formulario que arma el mensaje de WhatsApp
   ===================================================================== */
.contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.datos-contacto { list-style: none; display: grid; gap: .8rem; }
.dato-contacto { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); text-decoration: none; transition: border-color var(--transicion); }
a.dato-contacto:hover { border-color: var(--marca); }
.dato-contacto .tarjeta__icono { width: 44px; height: 44px; }
.dato-contacto strong { display: block; font-size: var(--t-base); }
.dato-contacto span span { display: block; font-size: var(--t-base); color: var(--tinta-suave); }
.formulario { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra); }
.formulario h3 { font-size: var(--t-lead); }
.formulario > p:not(.aviso-campo, .formulario__legal) { margin: .35rem 0 1.4rem; font-size: var(--t-base); color: var(--tinta-suave); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo__titulo { font-size: var(--t-base); font-weight: 600; }
.campo .req { color: var(--acento-texto); }
/* 16 px o más en campos: iOS no hace zoom al tocarlos */
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--tinta) 45%, var(--borde)); border-radius: var(--radio-sm); background: var(--fondo); font-size: var(--t-base); transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--marca); }
.campo input:user-invalid, .campo textarea:user-invalid, .campo select:user-invalid { border-color: var(--error); }
.campo small { font-size: var(--t-chico); color: var(--tinta-tenue); }
.aviso-campo { margin: -.4rem 0 1rem; font-size: var(--t-base); font-weight: 600; color: var(--error); }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.4rem; }
.formulario__legal { margin-top: 1rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.formulario__legal a { color: inherit; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.contacto > *, .dato-contacto { min-width: 0; }
.dato-contacto { overflow-wrap: anywhere; }   /* a 320 px el correo no ensancha la página */
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } .formulario__pie .boton { width: 100%; } }

/* =====================================================================
   PIE DE PÁGINA + FIRMA VALTORAV
   ===================================================================== */
.pie { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); background: var(--marca-oscuro); color: rgba(255, 255, 255, .76); font-size: var(--t-base); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.5rem; padding-bottom: 3rem; }
.pie__logo { height: 44px; width: auto; margin-bottom: 1.2rem; }
.pie h2 { margin-bottom: 1rem; font-family: var(--etiqueta-fuente); font-size: var(--t-chico); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.pie ul { list-style: none; display: grid; gap: .15rem; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.pie__base nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pie a { color: rgba(255, 255, 255, .84); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 1.5rem; padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--t-chico); }
.pie__base nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.firma { display: inline-flex; align-items: center; gap: .6rem; opacity: .85; transition: opacity var(--transicion); }
.firma:hover { opacity: 1; text-decoration: none !important; }
.firma span { font-size: var(--t-chico); color: rgba(255, 255, 255, .7); }
.firma img { height: 34px; width: auto; }   /* compacto ≥ 120 px de ancho (manual VALTORAV) */
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } .pie { padding-bottom: 5rem; } }

/* =====================================================================
   BOTÓN FLOTANTE DE WHATSAPP + LISTA DE COTIZACIÓN
   ===================================================================== */
.wa-flotante {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem; height: 58px; padding: 0 16px; border-radius: 999px;
  background: var(--whatsapp-oscuro); color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .22); transition: transform var(--transicion), box-shadow var(--transicion), opacity .25s, visibility 0s;
}
.wa-flotante .ico { width: 26px; height: 26px; }
.wa-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--marca); }
.wa-flotante span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; }
@media (hover: hover) { .wa-flotante:hover { transform: translateY(-2px); } .wa-flotante:hover span, .wa-flotante:focus-visible span { max-width: 220px; } }
.wa-flotante.oculto { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .25s, transform .25s, visibility 0s .25s; }


/* =====================================================================
   RECORRIDO TÉCNICO (scrollytelling sin librerías): visual fijo + pasos que se encienden
   Sin JS o con «reducir movimiento» se ve completo, como lista numerada.
   ===================================================================== */
.recorrido__cuerpo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.recorrido__visual { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); display: grid; place-items: center; padding: 1.5rem; border-radius: var(--radio); background: var(--fondo-alt); aspect-ratio: 1; max-height: 72vh; }
.recorrido__visual svg { width: 100%; height: 100%; }
.seccion--alt .recorrido__visual { background: var(--fondo); border: 1px solid var(--borde); }
.recorrido__contador { position: absolute; left: 1.2rem; bottom: 1rem; font-family: var(--etiqueta-fuente); font-size: var(--t-chico); font-weight: 600; letter-spacing: .08em; color: var(--tinta-suave); }
.recorrido__svg [data-capa] { fill: none; stroke: var(--marca); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--mov-duracion) var(--mov-curva), stroke var(--mov-duracion) var(--mov-curva); }
.recorrido__svg .relleno { fill: color-mix(in srgb, var(--marca) 8%, transparent); }
.js .recorrido__svg [data-capa] { opacity: .16; }
.js .recorrido__svg [data-capa].activo { opacity: 1; }
.recorrido__visual:not([data-activo="equipo"]) [data-capa].activo { stroke: var(--acento); }
.recorrido__pasos { list-style: none; counter-reset: rpaso; }
.recorrido__paso { counter-increment: rpaso; min-height: 55vh; display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1rem 0 1rem 1.4rem; border-left: 2px solid var(--borde); transition: opacity var(--mov-duracion) var(--mov-curva), border-color var(--mov-duracion) var(--mov-curva); }
.recorrido__paso:first-child { min-height: 40vh; justify-content: flex-start; }
.recorrido__paso::before { content: "Paso " counter(rpaso); font-family: var(--etiqueta-fuente); font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--acento-texto); }
.recorrido__paso h3 { font-size: var(--t-h3); }
.recorrido__paso p { color: var(--tinta-suave); max-width: 46ch; }
.js .recorrido__paso { opacity: .35; }
.js .recorrido__paso.activo { opacity: 1; border-left-color: var(--acento); }
@media (max-width: 900px) {
  .recorrido__cuerpo { grid-template-columns: 1fr; gap: 1rem; }
  .recorrido__visual { top: var(--alto-cabecera); z-index: 2; max-height: 34vh; aspect-ratio: auto; height: 34vh; padding: .8rem; box-shadow: 0 10px 20px -12px rgba(16, 24, 40, .25); }
  .recorrido__paso { min-height: 42vh; }
  .recorrido__paso h3 { font-size: var(--t-lead); }   /* los pasos pasan bajo el diagrama fijo: título de paso, no de sección */
}


/* =====================================================================
   PÁGINAS INTERIORES (ficha de producto, legales, 404)
   ===================================================================== */
.migas { padding-block: .35rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.migas li + li::before { content: "/"; margin-right: .4rem; color: var(--tinta-tenue); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-suave); }
.migas a:hover { color: var(--marca); }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; padding-bottom: var(--seccion); }
.ficha__foto { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); border-radius: var(--radio); overflow: hidden; background: #eef1f3; aspect-ratio: 4 / 3; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha h1 { font-size: var(--t-h1); }
@media (max-width: 600px) { .ficha h1 { font-size: var(--t-h2); } }   /* «…E-Glass Clase C» en dos renglones */
.ficha__intro { margin-top: 1rem; font-size: var(--t-lead); color: var(--tinta-suave); }
.ficha__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.ficha h2 { font-size: var(--t-lead); margin: 2.4rem 0 .4rem; }
.tabla-specs { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: var(--t-base); }
.tabla-specs th, .tabla-specs td { padding: .8rem .2rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla-specs th { width: 42%; font-weight: 600; color: var(--tinta-suave); }
.tabla-specs caption { caption-side: bottom; padding-top: .8rem; text-align: left; font-size: var(--t-chico); color: var(--tinta-tenue); }
.lista-check { list-style: none; display: grid; gap: .55rem; margin-top: .8rem; }
.lista-check li { display: flex; gap: .6rem; align-items: flex-start; color: var(--tinta-suave); }
.lista-check .ico { margin-top: .2rem; color: var(--marca); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } .ficha__foto { position: relative; top: auto; aspect-ratio: 16 / 9; max-height: 40svh; } }
.legal { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--seccion); }
.legal h1 { font-size: var(--t-h2); margin-bottom: .5rem; }
.legal h2 { font-size: var(--t-lead); margin: 2.2rem 0 .7rem; letter-spacing: -.01em; }
.legal p:not(.etiqueta), .legal li { color: var(--tinta-suave); }
.legal p + p { margin-top: .8rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.legal .pendiente { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid color-mix(in srgb, var(--alerta) 30%, transparent); border-radius: var(--radio-sm); background: var(--alerta-fondo); color: var(--tinta); font-size: var(--t-base); }
.pagina-error { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.pagina-error strong { display: block; font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--marca); letter-spacing: -.04em; }
.pagina-error p { margin: 1rem auto 2rem; max-width: 520px; color: var(--tinta-suave); }
.pagina-error .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* =====================================================================
   APARICIÓN AL HACER SCROLL
   · Solo con la clase .js (sin JS todo se ve).
   · Usa la propiedad `translate` y no `transform`: así no pisa el levantamiento
     del hover, y el retraso escalonado no afecta al hover.
   ===================================================================== */
.js [data-revelar] {
  opacity: 0; translate: 0 var(--mov-distancia);
  transition: opacity var(--mov-duracion) var(--mov-curva) var(--retraso, 0s), translate var(--mov-duracion) var(--mov-curva) var(--retraso, 0s),
              transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.js [data-revelar].visible { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-revelar] { opacity: 1; translate: none; }
  .js .barras__relleno { transform: none; }
  .js .recorrido__paso, .js .recorrido__svg [data-capa] { opacity: 1; }
  .recorrido__paso, .recorrido__paso:first-child { min-height: 0; padding-block: 1.2rem; }
}


@media print {
  .cabecera, .wa-flotante, .cajon, .hero__pie, .hero__medio video { display: none !important; }
  .hero, .llamado, .seccion--oscura, .pie { background: #fff !important; color: #000 !important; }
}


/* =====================================================================
   EMIVF — piezas propias del manual de identidad v1.0
   (láminas, línea dorada, iconografía de 64, hero dividido, materiales, clases térmicas)
   ===================================================================== */
:root { --ico-acento: var(--acento); }

/* Botones en Bold (manual); etiquetas en verde, sin punto: la línea dorada va bajo el título */
.boton { font-weight: 700; }
[data-estilo="premium"] .etiqueta::before { display: none; }
.etiqueta { color: var(--marca); }
.hero .etiqueta, .seccion--oscura .etiqueta, .llamado .etiqueta { color: rgba(255, 255, 255, .86); }
.titulo-seccion h2::after, .h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 1.1rem; background: var(--acento);
}
.titulo-seccion--centro h2::after { margin-inline: auto; }
.titulo-seccion h2, .h2, .material h3, .ficha h1, .legal h1 { color: var(--marca); }
.seccion--oscura .titulo-seccion h2, .llamado h2 { color: #fff; }

/* Iconografía del manual: trazo 2.2 en retícula de 64, verde con un solo acento dorado */
.ico-marca { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Logotipo: compacto ≥ 200 px de ancho; isotipo en pantallas muy angostas (mínimos del manual) */
.cabecera__logo img { height: 45px; width: auto; }
@media (max-width: 980px) { .cabecera__logo img { height: 45px; } }
@media (max-width: 420px) {
  .cabecera .contenedor { gap: .5rem; }
  .cabecera__cta { padding-inline: .8rem; }
  .menu-boton { width: 44px; height: 44px; }
}
@media (max-width: 369px) { .cabecera__logo img { height: 42px; } }
.pie__logo { height: auto; width: 340px; max-width: 100%; margin-bottom: 1.6rem; }   /* principal ≥ 340 px (manual) */
.pie__rejilla { grid-template-columns: minmax(340px, 1.5fr) 1fr 1fr 1.1fr; }
@media (max-width: 980px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }
@media (max-width: 371px) { .pie__logo { width: 220px; } }   /* sin espacio para 340 px: compacto en negativo */

/* ---------- Las láminas del emblema: grandes, sangradas por el borde inferior, nunca detrás de texto ---------- */
.laminas { position: absolute; bottom: 0; fill: var(--acento); pointer-events: none; }
.laminas path { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .laminas path { animation: lamina-sube .62s cubic-bezier(.16, 1, .3, 1) both; }
  .js .laminas path:nth-child(2) { animation-delay: .16s; }
  .js .laminas path:nth-child(3) { animation-delay: .32s; }   /* total 0.94 s ≤ 1.2 s (manual) */
  .js .llamado--emivf .laminas path { animation-play-state: paused; }
  .js .llamado--emivf .laminas.visible path { animation-play-state: running; }
}
@keyframes lamina-sube { from { transform: scaleY(0); } }

/* ---------- Hero: el video del taller de Eduardo (cuadrado, sin la cara; solo se cambió la ropa por el uniforme EMIVF) ----------
   Escritorio (≥ 1101 px): el video va en un panel cuadrado pegado a la derecha, del alto del hero; nunca entra en la columna
   del texto (--hero-borde), así el texto siempre queda sobre Verde EMIVF. Corte limpio contra el verde, sin desvanecido (Eduardo, 17-oct-2026).
   Tableta y celular: el video va arriba, en su propia franja, y el texto abajo. */
.hero--taller { --hero-borde: calc(max(var(--margen), (100% - var(--contenedor)) / 2) + 600px);
  min-height: min(86svh, 760px); padding-block: clamp(2.75rem, 1rem + 3vw, 4.5rem) clamp(2.75rem, 1rem + 2.6vw, 4.25rem); }
.hero--taller .hero__medio { inset: 0 0 0 auto; height: 100%; aspect-ratio: 1; max-width: calc(100% - var(--hero-borde) - 2rem); overflow: hidden; }   /* el acercamiento de 4 % no se sale del panel */
.hero--taller .hero__medio img, .hero--taller .hero__medio video { object-position: var(--foco-foto, 50% 50%); }
.hero--taller .hero__medio video { transform-origin: 50% 45%; will-change: transform; }
.hero--con-video .hero__medio video { opacity: 1; }
.hero--taller .hero__velo { display: none; }
.hero--taller .hero__contenido { max-width: 600px; }
.hero--taller .hero__sello { margin-bottom: 1rem; }
.hero--taller .hero__texto { margin-top: 1rem; max-width: 34rem; }
.hero--taller .hero__acciones { margin-top: 1.6rem; }
.hero--taller .hero__llamar { margin-top: .9rem; }
.hero--taller .hero__datos { max-width: none; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 1.2rem 1.6rem; margin-top: 1.6rem; padding-top: 1.1rem; }
.hero--taller .hero__datos strong { font-size: var(--t-lead); white-space: nowrap; }
.hero__sello { border-color: rgba(255, 255, 255, .3); }
.hero__pie { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 2.6vw, 2.25rem); z-index: 1; width: min(100% - 2 * var(--margen), var(--contenedor)); margin-inline: auto; display: flex; justify-content: flex-end; align-items: flex-end; gap: .75rem; pointer-events: none; }
.hero__pie > * { pointer-events: auto; }
.hero__tomas { display: none; width: 17.5rem; }
.hero--con-video .hero__tomas { display: grid; animation: hero-tomas 1s var(--curva) both; }
@keyframes hero-tomas { from { opacity: 0; } }
.hero__toma { grid-area: 1 / 1; margin: 0; padding: .7rem 1rem; border-left: 3px solid var(--acento); background: color-mix(in srgb, var(--marca) 88%, transparent); font-size: var(--t-chico); line-height: 1.35; color: rgba(255, 255, 255, .84); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.hero__toma b { display: block; font-size: var(--t-base); font-weight: 700; color: #fff; }
.hero__toma.activa { opacity: 1; transform: none; }
.hero__progreso { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: .6rem; }
.hero__progreso span { height: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hero__progreso i { display: block; height: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left center; }
.hero__video-control { width: 44px; height: 44px; display: none; align-items: center; justify-content: center; flex: none; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; transition: background-color .2s; }
.hero--con-video .hero__video-control { display: inline-flex; }
.hero__video-control:hover { background: rgba(0, 0, 0, .5); }
.hero__video-control .ico { width: 18px; height: 18px; }
@media (max-width: 980px) { .hero--taller .hero__datos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) {
  .hero--taller { --franja: min(100vw, 82svh); min-height: 0; padding-top: calc(var(--franja) + 1.75rem); align-items: flex-start; }
  .hero--taller .hero__medio { inset: 0 0 auto 0; width: 100%; height: var(--franja); aspect-ratio: auto; max-width: none; }
  .hero--taller .hero__medio img, .hero--taller .hero__medio video { object-position: var(--foco-foto, 50% 35%); }
  .hero--taller .hero__contenido { max-width: 720px; }
  .hero--taller .hero__datos strong { white-space: normal; }
  .hero__pie { top: calc(var(--franja) - 44px - 1rem); bottom: auto; }
  .hero--con-video .hero__tomas { display: none; }
}
@media (max-width: 1100px) and (min-width: 761px) and (orientation: landscape) { .hero--taller { --franja: 58svh; } }   /* tableta acostada: que se alcance a ver el titular */
@media (max-width: 560px) {
  .hero--taller .hero__datos > :last-child { grid-column: 1 / -1; }
}
/* en celular el sello no baja de 13 px: menos espaciado para que quepa en un renglón; si aun así no cabe (< 360 px), deja de ser píldora */
@media (max-width: 420px) { .hero__sello { letter-spacing: .06em; padding-inline: .8rem; } }
@media (max-width: 359px) { .hero__sello { border-radius: var(--radio-sm); } }

/* ---------- Franja con la iconografía del manual ---------- */
.franja { border-top-width: 3px; }
.franja ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; padding-block: 1.5rem; }
.franja li { gap: .85rem; font-size: var(--t-base); }
.franja .ico-marca { width: 42px; height: 42px; }
@media (max-width: 900px) { .franja ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .franja li { font-size: var(--t-chico); } }
@media (max-width: 420px) { .franja li { gap: .6rem; } .franja .ico-marca { width: 34px; height: 34px; } }

/* ---------- Materiales: el producto grande, alternado izquierda y derecha ---------- */
.material { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.material + .material { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.material--inverso .material__foto { order: 2; }
.material__foto { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--fondo-alt); aspect-ratio: 16 / 10; }
.material__foto img { width: 100%; height: 100%; object-fit: cover; }
.material__foto .insignia { position: absolute; top: 1rem; left: 1rem; }
.material__clase { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--marca); }
.material__clase .ico-marca { width: 34px; height: 34px; }
.material h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.1; }
.material__texto > p:not(.material__clase) { margin-top: 1rem; color: var(--tinta-suave); }
.material__datos { display: grid; grid-template-columns: 1fr 1fr; margin: 1.6rem 0 1.8rem; border-top: 1px solid var(--borde); }
.material__datos div { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--borde); }
.material__datos dt { font-size: var(--t-chico); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--tinta-tenue); }
.material__datos dd { margin: .2rem 0 0; font-weight: 500; color: var(--tinta); }
.material__datos small { display: block; font-size: var(--t-chico); font-weight: 400; color: var(--tinta-tenue); }
.material__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.1rem; }
@media (max-width: 900px) {
  .material { grid-template-columns: 1fr; gap: 1.6rem; }
  .material--inverso .material__foto { order: 0; }
}
@media (max-width: 420px) { .material__datos { grid-template-columns: 1fr; } .material__acciones .boton { flex: 1 1 100%; } }
.proximamente { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.proximamente strong { color: var(--tinta-tenue); }
.proximamente .chip { background: var(--marca-suave); border-color: transparent; color: var(--marca); font-weight: 600; }

/* ---------- Recorrido: diagrama de la parte activa ---------- */
.recorrido__svg .tapa { fill: var(--fondo); }
.recorrido__svg [data-capa="equipo"] .relleno { fill: color-mix(in srgb, var(--marca) 7%, var(--fondo)); }
.recorrido__visual .ico { width: 1em; }
.recorrido__paso .enlace-flecha { margin-top: .4rem; }

/* ---------- Clases térmicas sobre Verde EMIVF ---------- */
.clases { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--hueco); align-items: stretch; }
.clases__lado { display: grid; gap: var(--hueco); align-content: start; }
.comparativa--oscura { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.comparativa--oscura h3 { color: #fff; }
.comparativa--oscura > p, .comparativa--oscura small { color: rgba(255, 255, 255, .78); }
.seccion--oscura .comparativa--oscura p:not(.etiqueta) { margin-top: .6rem; }
.comparativa--oscura .barras li { color: rgba(255, 255, 255, .86); grid-template-columns: minmax(6.5rem, 9.5rem) 1fr 4.6rem; }
.comparativa--oscura .barras__pista { background: rgba(255, 255, 255, .1); }
.comparativa--oscura .barras__relleno { background: rgba(255, 255, 255, .34); }
.comparativa--oscura .barras li.destaca { color: #fff; }
.comparativa--oscura .barras li.destaca .barras__relleno { background: var(--acento); }
.barras li.abierta .barras__relleno { border-radius: 999px 0 0 999px; }   /* la C llega a 180 °C y sigue: tres tramos sin tope (.barras__sigue) */
.comparativa--oscura .versus > div { background: rgba(255, 255, 255, .07); }
.comparativa--oscura .versus > div.destaca { background: var(--acento); color: var(--sobre-acento); }
.comparativa--oscura .versus span.vs { color: rgba(255, 255, 255, .6); }
.comparativa--oscura .versus > div > span { display: block; font-size: var(--t-chico); }
.comparativa--oscura b { color: #fff; }
.comparativa--oscura .versus > div.destaca small { color: var(--sobre-acento); opacity: 1; }
.versus strong, .versus small { white-space: nowrap; }
.versus small { letter-spacing: .12em; }   /* a 13 px y sin cortarse: con el espaciado de etiqueta, «Lino convencional» ensanchaba su caja */
@media (max-width: 480px) { .versus { grid-template-columns: 1fr; gap: .6rem; } .versus span.vs { text-align: center; } }
.nw { white-space: nowrap; }
.clases__nota { font-size: var(--t-base); }
.clases__fuente { margin-top: 1.4rem; font-size: var(--t-chico); }
.seccion--oscura .clases__fuente { color: rgba(255, 255, 255, .66); }
@media (max-width: 1180px) { .clases { grid-template-columns: 1fr; } }   /* la comparativa no cabe en dos columnas abajo de 1180 px */
@media (max-width: 560px) { .comparativa--oscura .barras li { grid-template-columns: 1fr 4.6rem; } }


/* ---------- Biblioteca con iconos del manual ---------- */
.documento .ico-marca { width: 44px; height: 44px; margin-bottom: .2rem; }
.documento small { color: var(--marca); }

/* ---------- Llamado en Verde EMIVF con las láminas ---------- */
.llamado--emivf { padding-block: clamp(4.5rem, 3.5rem + 5vw, 7.5rem); }
.llamado--emivf::before { display: none; }
.llamado--emivf .laminas { right: clamp(1rem, 4vw, 6rem); height: 82%; }
.js .llamado--emivf .laminas[data-revelar], .js .barras[data-revelar] { opacity: 1; translate: none; }   /* solo suben las láminas, sin la entrada general */
.llamado--emivf .contenedor { position: relative; z-index: 1; padding-right: clamp(0px, 12vw, 220px); }
/* los dos rollos al frente de las láminas (idea 1 de Eduardo, imagen generada con Higgsfield) */
.llamado--emivf .contenedor { flex-direction: column; align-items: flex-start; justify-content: center; padding-right: 45%; }
/* la plantilla trata «.llamado > img» como foto de fondo: aquí se anula (inset, object-fit, z-index) */
.llamado--emivf > img.llamado__rollos { position: absolute; inset: auto calc(clamp(1rem, 4vw, 6rem) + 70px) 9% auto; z-index: 1; width: min(36vw, 540px); height: auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .3)); }
@media (max-width: 1100px) { .llamado--emivf .contenedor { padding-right: 40%; } .llamado--emivf > img.llamado__rollos { width: 38vw; right: calc(clamp(1rem, 4vw, 6rem) + 30px); } }
@media (max-width: 760px) {
  .llamado--emivf { padding-bottom: 0; }
  .llamado--emivf .laminas { height: 240px; }
  .llamado--emivf .contenedor { padding-right: 0; padding-bottom: calc(240px + 2rem); }
  .llamado--emivf > img.llamado__rollos { width: min(78vw, 360px); right: auto; left: var(--margen); bottom: 22px; }
}
.pie { border-top: 1px solid rgba(255, 255, 255, .14); }

/* ---------- Fichas de producto ---------- */
.ficha__foto .insignia { position: absolute; top: 1rem; left: 1rem; }
.ficha__foto { background: var(--fondo-alt); }
.ficha .material__clase { margin-bottom: .8rem; }
.ficha h2 { color: var(--marca); }
.ficha__texto { margin-top: .5rem; color: var(--tinta-suave); }
.ficha__comparativa { margin-top: 2.4rem; padding: 1.4rem 1.5rem 1.6rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); }
.ficha__comparativa h2 { margin-top: 0; }
.ficha__comparativa > p { margin-top: .6rem; color: var(--tinta-suave); }
.ficha__comparativa .versus > div { background: var(--fondo); }
.ficha__comparativa .versus > div.destaca { background: var(--marca); color: #fff; }
.ficha__comparativa .versus > div > span { display: block; font-size: var(--t-chico); }
.ficha__nota { margin-top: .9rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.ficha__nota b { color: var(--marca); }
.ficha__real { margin-top: .8rem; }
.ficha__real img { width: 100%; border-radius: var(--radio); }
.ficha__real figcaption { margin-top: .5rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.ficha__otra { display: flex; align-items: center; gap: 1rem; margin-top: 2.6rem; padding: 1.2rem 1.3rem; border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; transition: border-color var(--transicion); }
.ficha__otra:hover { border-color: var(--marca); }
.ficha__otra > span { flex: 1; display: grid; gap: .15rem; }
.ficha__otra small { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--tinta-tenue); }
.ficha__otra strong { font-size: var(--t-lead); color: var(--marca); }
.ficha__otra span span { font-size: var(--t-base); color: var(--tinta-suave); }
.ficha__otra > .ico { color: var(--marca); }
.tabla-specs th { width: 38%; }
.tabla-specs td { font-variant-numeric: tabular-nums; }
.tabla-specs tr:nth-child(odd) { background: color-mix(in srgb, var(--marca-suave) 45%, transparent); }
.tabla-specs th, .tabla-specs td { padding-inline: .7rem; }

/* Medida de lectura: unos 65 caracteres por renglón aunque la columna sea más ancha (segunda revisión, 16-oct-2026) */
p { max-width: 65ch; }
.titulo-seccion--centro > p, .centrado p { margin-inline: auto; }
.preseleccion { max-width: none; }   /* es un aviso con fondo, va a lo ancho de la caja */

/* Áreas táctiles de 44 px (revisión del 15-oct-2026) */
.opciones .chip { min-height: 44px; }
a.enlace-flecha { min-height: 44px; }

/* =====================================================================
   ANIMACIONES CON GSAP (js/animaciones.js). Sin GSAP, sin JS o con «reducir movimiento», todo se ve en su lugar.
   ===================================================================== */
.animar .hero__sello, .animar .hero__datos > div { opacity: 0; }   /* el titular y los botones se ven desde el principio */
/* GSAP manda: sin las transiciones y animaciones de CSS que harían mover dos veces lo mismo */
.gsap .barras__relleno { transition: opacity .3s !important; }   /* GSAP mueve el largo; el atenuado del selector sí se transiciona */
.gsap .laminas path { animation: none !important; transform-box: view-box; }   /* GSAP calcula el origen en el espacio del SVG */
/* recorrido: línea dorada de avance junto a los pasos */
.recorrido__pasos { position: relative; }
.gsap .recorrido__pasos::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 2px; background: var(--acento); transform: scaleY(var(--avance, 0)); transform-origin: top center; }
.recorrido__svg .mercurio { fill: var(--acento); stroke: none; }
/* cómo comprar: la línea dorada que une los pasos (encima de la gris, debajo de los círculos) */
.paso { z-index: 1; }
.gsap .pasos::after { content: ""; position: absolute; top: 26px; left: calc(100% / var(--n, 5) / 2); right: calc(100% / var(--n, 5) / 2); height: 2px; background: var(--acento); transform: scaleX(var(--avance, 1)); transform-origin: left center; }
@media (max-width: 900px) {
  .gsap .pasos::after { top: 0; bottom: 0; left: 26px; right: auto; width: 2px; height: auto; transform: scaleY(var(--avance, 1)); transform-origin: top center; }
}

/* ---------- Fondos y animaciones (17-oct-2026): mesa de Verde claro, foto real, antes y después, #clases que responde ---------- */
.seccion--clara { background: var(--marca-suave); }
/* Mesa de Verde claro sangrada por el lado de la foto: el producto queda sobre el campo de color más grande de la zona blanca */
#productos { overflow-x: clip; }
.material { position: relative; isolation: isolate; }
.material::before { content: ""; position: absolute; z-index: -1; inset-block: calc(-1 * clamp(1rem, .5rem + 1.5vw, 2rem)); left: calc(50% - 50vw); width: calc(50vw - 50% + 40%); background: var(--marca-suave); transform: scaleX(var(--mesa, 1)); transform-origin: left center; }
.material--inverso::before { left: auto; right: calc(50% - 50vw); width: calc(50vw - 50% + 30%); transform-origin: right center; }   /* la foto de la fibra va en la columna angosta: así sobresale lo mismo que la del lino */
@media (max-width: 900px) { .material::before, .material--inverso::before { inset: -1.25rem calc(50% - 50vw) auto; width: auto; aspect-ratio: 2 / 1; transform-origin: center top; } }
/* Ventana con la foto real: el lino se reconoce por su hilo rojo; la fibra, porque no lo lleva */
.material__lupa { position: absolute; right: 1rem; bottom: 1rem; width: 26%; max-width: 200px; margin: 0; border: 4px solid #fff; border-radius: var(--radio-sm); overflow: hidden; background: #fff; }
.material__lupa img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.material__lupa figcaption { padding: .3rem .5rem; background: var(--marca); color: #fff; font-size: var(--t-chico); line-height: 1.3; }
@media (max-width: 560px) {   /* en celular la foto real va en un renglón debajo de la foto del producto, sin taparlo */
  .material__foto { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
  .material__foto > img { height: auto; aspect-ratio: 16 / 10; border-radius: var(--radio); background: var(--fondo-alt); }
  .material__lupa { position: static; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: .7rem; width: auto; max-width: none; margin-top: .7rem; border: 0; border-radius: 0; background: none; overflow: visible; }
  .material__lupa img { width: 64px; border-radius: var(--radio-sm); }
  .material__lupa figcaption { padding: 0; background: none; color: var(--tinta); }
}
/* Antes y después: dos cuadros reales del taller, a sangre; los pies van debajo, en blanco */
.evidencia { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--fondo); }
.evidencia__foto { margin: 0; }
.evidencia__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.evidencia figcaption { padding: 1rem var(--margen) 1.6rem; color: var(--tinta); font-size: var(--t-base); }
.evidencia figcaption .etiqueta { display: block; margin-bottom: .2rem; }
.evidencia figcaption .enlace-flecha { display: flex; width: fit-content; margin: .3rem 0 0; }
@media (max-width: 760px) { .evidencia { grid-template-columns: 1fr; } }
/* #clases: la línea blanca marca la clase del equipo sobre las barras; la Clase C sigue más allá de 180 °C */
.barras__pista { position: relative; }
.barras__pista::after { content: ""; position: absolute; inset: 0; border-left: 2px solid #fff; opacity: 0; transform: translateX(var(--umbral, 0%)); transition: transform var(--mov-duracion) var(--mov-curva), opacity .2s; pointer-events: none; }
.barras.con-umbral .barras__pista::after { opacity: 1; }
.barras li.no-alcanza .barras__relleno { opacity: .35; }
.barras__sigue { position: absolute; left: calc(90% + 3px); right: 0; inset-block: 0; display: flex; gap: 3px; }
.barras__sigue i { flex: 1; background: var(--acento); }
.js .barras__sigue { opacity: 0; transition: opacity .4s var(--curva) .9s; }   /* sin GSAP: los tramos llegan cuando la barra ya creció */
.js .visible.barras .barras__sigue, .gsap .barras__sigue { opacity: 1; }
html:not(.js) .elegir-clase { display: none; }   /* sin JavaScript no hay selector: quedan las barras y la nota */
.elegir-clase { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.seccion--oscura .elegir-clase p.elegir-clase__titulo { margin: 0 0 .7rem; color: #fff; font-weight: 700; }
.elegir-clase__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.elegir-clase__botones button { min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radio-sm); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.elegir-clase__botones button[aria-pressed="true"] { background: #fff; color: var(--marca); border-color: #fff; }
@media (hover: hover) { .elegir-clase__botones button:hover { border-color: #fff; } }
@media (max-width: 420px) { .elegir-clase__botones { display: grid; grid-template-columns: repeat(3, 1fr); } }   /* dos renglones parejos, no 5 + 1 */
@media (forced-colors: active) { .elegir-clase__botones button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }
.elegir-clase__resultado { margin-top: 1rem; }
.seccion--oscura .elegir-clase__resultado p:not(.etiqueta) { margin: 0; color: #fff; font-weight: 700; }
.elegir-clase__mas { margin-top: .3rem; }
.elegir-clase__resultado small { display: block; margin-top: .3rem; color: rgba(255, 255, 255, .78); }
.elegir-clase__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
/* Respuesta al tocar: lo que se presiona se hunde un poco; rápido, aparte de las entradas lentas */
.boton:active, .opciones .chip:active, .documento:active, a.dato-contacto:active, .ficha__otra:active, .elegir-clase__botones button:active { transform: scale(.97); transition: transform .1s cubic-bezier(.23, 1, .32, 1); }
.ico--descarga, .enlace-flecha .ico { transition: transform var(--transicion); }
@media (hover: hover) { .enlace-flecha:hover .ico:not(.ico--descarga) { transform: translateX(3px); } a:hover .ico--descarga { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .boton:active, .opciones .chip:active, .documento:active, a.dato-contacto:active, .ficha__otra:active, .elegir-clase__botones button:active { transform: none; }
  .barras__pista::after { transition: opacity .2s; }
  .js .barras__sigue { opacity: 1; transition: none; }
}
@media print { .elegir-clase, .material__lupa { display: none !important; } }