/* =====================================================================
   VALTORAV — estilos del sitio
   ---------------------------------------------------------------------
   Sale de la plantilla de la skill «diseno-web» (estilo premium) con los
   tokens del Manual de identidad VALTORAV v1.0. Se quitaron las piezas de
   la plantilla que este sitio no usa (catálogo, galería, mapa, etc.): si
   hacen falta, se copian de la plantilla.
   Reglas del manual que mandan aquí:
   · Azul Noche manda; el Oro es acento (botón principal, filetes, anillo)
     y nunca pasa de una décima parte de la superficie.
   · Oro como TEXTO solo sobre Azul Noche (8.9:1). Sobre claro da 2.1:1:
     ahí el texto va en Azul Noche.
   · Toda banda Azul Noche se cierra con un filete de Oro de 2 px.
   · Tipografía (pedido de Eduardo, 17-oct-2026; excepción al manual, que pide Montserrat + Inter):
     Fraunces para los títulos y Hanken Grotesk para el texto, etiquetas y botones. El logotipo sigue en
     Montserrat (va trazado dentro de sus SVG). Las dos letras van autohospedadas (assets/fonts/, licencia OFL).
   Fuera de :root no se escriben colores sueltos.
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-vf-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk-vf-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 1. MARCA (Manual de identidad VALTORAV) ===== */
  --marca: #0b1320;            /* Azul Noche: títulos, iconos sobre claro, chips activos */
  --marca-oscuro: #0b1320;     /* el único fondo oscuro: cabecera, hero, banda, pie */
  --marca-suave: #e5e7eb;      /* Gris de apoyo: fondos suaves */
  --acento: #d4af37;           /* Oro: botón principal, filetes y anillo. Nunca texto sobre claro */
  --acento-hover: #c9a227;     /* Oro Profundo */
  --sobre-acento: var(--marca);  /* Azul Noche sobre Oro 8.9:1; sobre Oro Profundo 7.7:1 */
  --acento-texto: var(--marca);  /* el acento como texto sobre claro: Azul Noche (el oro no se lee) */
  --oro-texto: #d4af37;        /* Oro como texto: SOLO sobre Azul Noche (8.9:1) */

  /* ===== 2. NEUTROS ===== */
  --tinta: #0b1320;            /* texto principal */
  --tinta-suave: #474f5e;      /* párrafos */
  --tinta-tenue: #5b6372;      /* notas pequeñas: también pasa 4.5:1 sobre --fondo-alt */
  --fondo: #ffffff;
  --fondo-alt: #f5f6f7;        /* Blanco del manual: secciones alternas */
  --borde: #e5e7eb;            /* Gris de apoyo: líneas y tablas */
  --foco: var(--marca);        /* anillo de foco sobre claro */
  --whatsapp-oscuro: #0e7a3e;  /* verde SOLO para WhatsApp (blanco encima 5.4:1) */
  --exito: #1a7f4b;
  --alerta: #8a6100;
  --alerta-fondo: #fff8e1;
  --error: #b42318;

  /* ===== 3. TIPOGRAFÍA ===== */
  --fuente: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: var(--fuente);   /* etiquetas, botones, menú y datos: Hanken Grotesk en seminegra */
  --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;   /* títulos: Fraunces de cartel */
  --peso-titulos: 700;         /* Fraunces Bold */
  --tracking-titulos: -0.02em;
  --t-h1: clamp(2.7rem, 1.3rem + 5.2vw, 5.4rem);
  --t-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);      /* 30 → 53 px */
  --t-h3: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);    /* 20 → 24 px: nombres de proyecto, VALTORAV PRO/CARE, teléfono */
  --t-lead: clamp(1rem, .9rem + .4vw, 1.2rem);        /* 16 → 19 px: entradas, títulos chicos, preguntas del cajón */
  --t-base: 1rem;              /* 16 px, interlínea 1.6 (manual) */
  --t-chico: .8125rem;         /* 13 px: etiquetas, botones, leyendas. Nada que se lea va por debajo (diseno-web) */
  --t-etiqueta: var(--t-chico);
  /* Escala de la página (revisión del 17-oct-2026 con el inspector de design-taste-frontend): seis tamaños, del
     título de la portada a la letra chica. Un tamaño nuevo solo si no cabe en ninguno de estos. */

  /* ===== 4. FORMA ===== */
  --radio: 8px;
  --radio-sm: 6px;
  --radio-boton: 3px;
  --sombra: 0 1px 0 rgba(11, 19, 32, .03);
  --sombra-hover: 0 14px 34px rgba(11, 19, 32, .08);
  --etiqueta-fuente: var(--fuente-titulos);
  --etiqueta-tracking: .24em;  /* mayúsculas muy espaciadas, como pide el manual para las etiquetas */

  /* ===== 5. ESPACIO ===== */
  --contenedor: 1200px;
  --margen: clamp(1rem, .4rem + 2.6vw, 2rem);
  --seccion: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --hueco: clamp(1rem, .75rem + 1vw, 1.5rem);
  --alto-cabecera: 76px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-salida: cubic-bezier(.23, 1, .32, 1);   /* emil-design-eng: lo que responde a un toque (presionar, abrir) */
  --transicion: .25s var(--curva);

  /* ===== 6. MOVIMIENTO (lenguaje premium: lento y suave) ===== */
  --mov-duracion: .95s;
  --mov-distancia: 26px;
  --mov-curva: cubic-bezier(.16, 1, .3, 1);
  --mov-escalon: .1s;
}

/* =====================================================================
   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-display); font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos); line-height: 1.06; text-wrap: balance; font-optical-sizing: auto;
}
/* En lo grande, Fraunces en su corte de cartel (opsz 144): más contraste y más cerrada */
h1, h2 { font-variation-settings: "opsz" 144; }
h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
h4 { font-family: var(--fuente-titulos); letter-spacing: normal; }
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(--acento); color: var(--sobre-acento); 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; }

.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 */
.cabecera, .cajon__panel, .hero, .seccion--oscura, .pie, .cotizador__aparte { --foco: #fff; }

/* =====================================================================
   PIEZAS BÁSICAS: etiqueta, títulos de sección, botones, chips
   ===================================================================== */
/* Etiqueta: Hanken Grotesk en mayúsculas muy espaciadas. Es un acento, no un título. */
.etiqueta {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--etiqueta-fuente); font-size: var(--t-etiqueta); font-weight: 500;
  letter-spacing: var(--etiqueta-tracking); text-transform: uppercase; color: var(--tinta-suave);
}
.hero .etiqueta, .seccion--oscura .etiqueta { color: var(--oro-texto); }

.titulo-seccion { max-width: 760px; margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.titulo-seccion h2 { font-size: var(--t-h2); }
/* Filete de oro de 32 px como subrayado de título (manual, sistema gráfico). --regla (0–1) lo traza al entrar (GSAP) */
.titulo-seccion h2::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 1.1rem; background: var(--acento); transform: scaleX(var(--regla, 1)); transform-origin: left; }
.titulo-seccion > p:not(.etiqueta) { max-width: 60ch; margin-top: 1rem; font-size: var(--t-lead); color: var(--tinta-suave); }

/* Botones: Hanken Grotesk seminegra en mayúsculas espaciadas, esquinas casi rectas (esquemas del manual) */
.boton {
  --b-fondo: var(--acento); --b-texto: var(--sobre-acento); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: .8rem 1.5rem; border: 1.5px solid var(--b-borde); border-radius: var(--radio-boton);
  background: var(--b-fondo); color: var(--b-texto);
  font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--t-chico); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform .16s var(--curva-salida);
}
.boton:hover { --b-fondo: var(--acento-hover); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton .ico { width: 1.15em; height: 1.15em; transition: transform var(--transicion); }
.boton--marca { --b-fondo: var(--marca); --b-texto: #fff; }
.boton--marca:hover { --b-fondo: color-mix(in srgb, var(--marca) 82%, #fff); }
.boton--contorno { --b-fondo: transparent; --b-texto: var(--tinta); --b-borde: color-mix(in srgb, var(--tinta) 28%, 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, .55); }
.boton--claro:hover { --b-fondo: rgba(255, 255, 255, .08); --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; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-1px); }
  .boton:hover .ico--flecha { transform: translateX(3px); }
}
/* Al presionar, todo lo que se toca se hunde un poco (emil-design-eng): responde al instante y nunca brinca */
:is(.boton, .chip, .atajo__opciones a, .carrusel__flecha, .carrusel__nombres button, .hero__rugir, .por-que__rugir, .menu-boton, .wa-flotante):active:not(:disabled) {
  transform: scale(.97); transition-duration: .1s;
}
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--t-base); color: var(--marca);
  text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.enlace-flecha .ico { width: 1em; height: 1em; }
.enlace-flecha:hover { text-decoration-color: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border: 1px solid color-mix(in srgb, var(--tinta) 22%, 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), transform .16s var(--curva-salida);
}
.chip:hover { border-color: var(--marca); color: var(--marca); }
input:checked + .chip { background: var(--marca); border-color: var(--marca); color: #fff; }

/* =====================================================================
   CABECERA — banda Azul Noche con el logotipo compacto (manual)
   ===================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 100; background: var(--marca-oscuro); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow var(--transicion), border-color var(--transicion);
}
/* Al despegarse del hero queda como banda sobre fondo claro: la cierra el filete de oro */
.cabecera.con-sombra { border-bottom-color: var(--acento); box-shadow: 0 8px 28px rgba(11, 19, 32, .22); }
.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: .1rem; }
.menu a {
  padding: .55rem .8rem; border-bottom: 2px solid transparent; font-family: var(--fuente-titulos); font-size: var(--t-base); font-weight: 500;
  letter-spacing: .01em; color: rgba(255, 255, 255, .84); text-decoration: none; transition: color var(--transicion), border-color var(--transicion);
}
.menu a:hover { color: #fff; }
.menu a[aria-current="true"] { color: #fff; border-bottom-color: var(--acento); }
.cabecera__tel { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--t-base); color: #fff; text-decoration: none; white-space: nowrap; }
.cabecera__tel .ico { color: var(--acento); }
.menu-boton { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radio-sm); background: transparent; color: #fff; cursor: pointer; transition: transform .16s var(--curva-salida); }
.menu-boton .ico { width: 24px; height: 24px; }
@media (max-width: 1140px) { .cabecera__tel span { display: none; } }
@media (max-width: 980px) {
  :root { --alto-cabecera: 68px; }
  .menu, .cabecera__tel { display: none; }
  .menu-boton { display: inline-flex; }
  .cabecera .contenedor { gap: .75rem; }
  .cabecera__logo img { height: 38px; }
}
/* Sin JavaScript el menú se muestra envuelto (nunca queda escondido) */
@media (max-width: 980px) { 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; } }
/* Celular: el compacto no baja de 120 px de ancho (manual) */
@media (max-width: 420px) {
  .cabecera .contenedor { gap: .55rem; }
  .cabecera__logo img { height: 34px; }
  .cabecera__cta { padding-inline: .8rem; letter-spacing: .06em; }
  .menu-boton { width: 44px; height: 44px; }
}
/* Celulares de 360 px: con el botón en 13 px no cabía por 7 px. En 320 px no cabe de ningún modo junto al logo
   (que no baja de 120 px): ahí se va el botón de la cabecera; el mismo está en la portada y en el menú. */
@media (max-width: 380px) {
  .cabecera .contenedor { gap: .45rem; }
  .cabecera__cta { padding-inline: .6rem; letter-spacing: .04em; }
}
@media (max-width: 340px) { .cabecera__cta { display: none; } }

/* Cajón del menú en celular (Azul Noche): 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(5, 9, 16, .6); 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(--marca-oscuro); color: #fff;
  border-left: 2px solid var(--acento); box-shadow: -20px 0 60px rgba(0, 0, 0, .3);
  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 rgba(255, 255, 255, .12); font-family: var(--fuente-titulos); 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 — banda Azul Noche: la frase a la izquierda y el león del isotipo a la derecha (bloque «LEÓN VIVO»).
   Cierra con una curva y su filete de oro (manual: toda banda Azul Noche cierra con filete) y la tarjeta
   «¿Qué necesitas?» monta sobre el corte (bloque «ATAJO»). Anatomía tomada de la referencia que mandó Eduardo
   (5-oct-2026): protagonista grande, insignias con ícono, borde curvo, acción sobre el corte.
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: min(92svh, 860px); padding-block: clamp(2.8rem, 2rem + 2.6vw, 4.2rem) clamp(6.2rem, 4.8rem + 4vw, 8.4rem);
  color: #fff; background: var(--marca-oscuro); overflow: hidden;
}
.hero .contenedor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, .5rem + 2vw, 3rem); }
.hero__contenido { position: relative; z-index: 2; max-width: 700px; }
.hero__titulo { font-size: var(--t-h1); line-height: 1.02; }
.hero__texto { max-width: 560px; margin-top: 1.4rem; font-size: var(--t-lead); color: rgba(255, 255, 255, .84); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero__llamar { margin-top: 1.2rem; font-size: var(--t-base); color: rgba(255, 255, 255, .74); }
.hero__llamar a { color: #fff; font-family: var(--fuente-titulos); font-weight: 700; font-size: var(--t-lead); text-decoration: none; margin-left: .35rem; }
.hero__llamar a:hover { text-decoration: underline; text-decoration-color: var(--acento); }
/* Insignias: los tres datos del paquete, cada uno en el anillo doble del manual («marco para cifras»: aro grueso afuera
   y fino adentro, en la proporción del emblema). Al aparecer, los anillos se trazan y luego sale la cifra (la
   animación que permite el manual, ≤ 1.5 s; bloque «al-asomar» de sitio.js) */
.hero__insignias {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.3rem;
  margin-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__insignias li { display: flex; align-items: center; gap: .75rem; font-size: var(--t-chico); line-height: 1.45; color: rgba(255, 255, 255, .74); }
.hero__insignias li:nth-child(2) { --k: 1; }
.hero__insignias li:nth-child(3) { --k: 2; }
.cifra { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; }
.cifra svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }   /* el trazo empieza arriba */
.cifra__aro { fill: none; stroke: var(--acento); stroke-width: 4; }        /* 2 px a 50 px de ancho */
.cifra__aro--fino { stroke-width: 2; }                                      /* 1 px */
.cifra b { position: relative; font-family: var(--fuente-display); font-size: var(--t-lead); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.hero__insignias strong { display: block; margin-bottom: .1rem; font-family: var(--fuente-titulos); font-size: var(--t-base); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
/* La curva: el fondo de la sección siguiente sube en curva y el filete de oro la sigue */
.hero__curva { position: absolute; left: 0; bottom: -1px; z-index: 0; width: 100%; height: clamp(56px, 3rem + 4vw, 110px); pointer-events: none; }
.hero__curva-fondo { fill: var(--fondo); }
.hero__curva-filete { fill: none; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .hero .contenedor { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  .hero__acciones .boton { flex: 1 1 100%; }
  .hero__insignias { grid-template-columns: 1fr; gap: .8rem; }
}
/* El título es la frase del manual («Tu negocio ya vende. Ahora que se note.», en Fraunces Bold en Blanco con
   el final en Oro). Al abrir la página se enciende palabra por palabra, en CSS para que no espere a ninguna librería;
   al final se traza su filete de oro y llegan el texto, los botones y los datos. «Se note.» termina casi cuando ruge
   el león. Sin JS o con «reducir movimiento» se ve encendida completa. Cada línea se parte pareja (text-wrap). */
/* Con Fraunces cada frase cabe en un renglón: el tamaño sigue al ancho de la columna (≈ 7.9 veces el tamaño por renglón)
   para que nunca se parta en tres, de 320 px a pantallas grandes */
.hero__frase { font-size: clamp(2.45rem, 1.2rem + 4vw, 4.9rem); line-height: .98; letter-spacing: -.025em; }
@media (max-width: 600px) { .hero__frase { font-size: min(10.3vw, 2.6rem); } }
.hero__linea { display: block; text-wrap: balance; }
.palabra--oro { color: var(--oro-texto); }
.hero__frase::after {
  content: ""; display: block; width: clamp(56px, 6vw, 96px); height: 3px; margin-top: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  background: var(--acento); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__contenido > .etiqueta { animation: hero-aparece .9s var(--mov-curva) .05s both; }
  .js .hero__frase .palabra { animation: palabra-enciende .8s var(--mov-curva) calc(.25s + var(--n) * .14s) both; }
  .js .hero__frase::after { animation: filete-traza .9s var(--mov-curva) 1.35s both; }
  .js .hero__texto { animation: hero-sube .95s var(--mov-curva) .7s both; }
  .js .hero__acciones { animation: hero-sube .95s var(--mov-curva) .8s both; }
  .js .hero__llamar { animation: hero-sube .95s var(--mov-curva) .88s both; }
  .js .hero__insignias { animation: hero-sube .95s var(--mov-curva) .96s both; }
  .js .hero__insignias:not(.entra) .cifra__aro { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .hero__insignias.entra .cifra__aro { stroke-dasharray: 100; animation: aro-traza 1.2s var(--curva-salida) calc(var(--k, 0) * .12s) both; }
  .hero__insignias.entra .cifra__aro--fino { animation-delay: calc(var(--k, 0) * .12s + .15s); }
  .js .hero__insignias:not(.entra) .cifra b { opacity: 0; }
  .hero__insignias.entra .cifra b { animation: hero-aparece .5s ease calc(var(--k, 0) * .12s + .65s) both; }
}
@keyframes aro-traza { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hero-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes palabra-enciende { from { color: rgba(255, 255, 255, .12); } }
@keyframes filete-traza { from { transform: scaleX(0); } }
@keyframes hero-sube { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

/* =====================================================================
   LEÓN VIVO (portada): el mismo león del isotipo entra a escena por facetas y ruge una vez;
   un clic o toque lo hace rugir otra vez (bloque «leon» de sitio.js). Rugido: la cabeza se echa
   hacia atrás, baja la quijada, asoman los colmillos, se eriza la melena y salen ondas en Oro.
   El rugido dura 2.8 s y sigue el ritmo del sonido (assets/audio/rugido.m4a, 2.8 s): ver los keyframes.
   Excepción al manual (que solo permite la aparición por facetas, ≤ 1.5 s), aprobada por Eduardo
   el 26-sep-2026. Sin JS o con «reducir movimiento» el león se queda quieto y completo.
   ===================================================================== */
.hero__leon { position: relative; z-index: 0; justify-self: end; width: min(100%, 470px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.leon-vivo { display: block; width: 100%; height: auto; overflow: visible; }
/* Botón «Oír el rugido» (los dos leones): el sonido solo puede empezar con un toque de la persona */
.hero__rugir { position: absolute; left: 50%; bottom: -3.4rem; translate: -50% 0; z-index: 2; }
.hero__rugir, .por-que__rugir {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--marca-oscuro) 82%, transparent); color: #fff; white-space: nowrap;
  font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--transicion), background var(--transicion), transform .16s var(--curva-salida);
}
:is(.hero__rugir, .por-que__rugir) .ico { width: 1.15rem; height: 1.15rem; color: var(--acento); }
:is(.hero__rugir, .por-que__rugir):hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--marca-oscuro)); }
.leon-vivo .pieza, .leon-vivo .pieza__cuerpo, .leon-vivo__escena, .leon-vivo__cabeza, .leon-vivo__mandibula,
.leon-vivo__colmillos, .leon-vivo__colmillos-bajos, .onda { transform-box: fill-box; transform-origin: center; }
.leon-vivo__colmillos, .leon-vivo__colmillos-bajos { opacity: 0; }
.onda { fill: none; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .leon-vivo:not(.entra) .leon-vivo__escena { opacity: 0; }
  .leon-vivo.entra .leon-vivo__escena { animation: leon-llega 1.3s cubic-bezier(.16, 1, .3, 1) both; }
  .leon-vivo.entra .pieza { animation: pieza-llega .9s cubic-bezier(.16, 1, .3, 1) calc(.1s + var(--i) * 40ms) both; }
  .leon-vivo.ruge .leon-vivo__cabeza { animation: cabeza-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-vivo.ruge .leon-vivo__mandibula { animation: mandibula-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-vivo.ruge .pieza--melena .pieza__cuerpo { animation: melena-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-vivo.ruge .leon-vivo__colmillos { animation: colmillos-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-vivo.ruge .leon-vivo__colmillos-bajos { animation: colmillos-bajos-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-vivo.ruge .onda { animation: onda 1.4s cubic-bezier(.2, .6, .3, 1) .28s both; }   /* primer golpe */
  .leon-vivo.ruge .onda--2 { animation-delay: .9s; }               /* el rugido crece */
  .leon-vivo.ruge .onda--3 { animation-delay: 1.45s; }             /* lo más fuerte */
}
@keyframes leon-llega { from { opacity: 0; transform: translateX(180px); } to { opacity: 1; transform: none; } }
@keyframes pieza-llega { from { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.85); } to { opacity: 1; transform: none; } }
/* Ritmo del rugido (2.8 s) = ritmo del sonido rugido.m4a («the fierce roar of a lion»):
   0–0.22 s silencio (la cabeza se echa atrás) · 0.28 s primer golpe (el hocico se abre de golpe) · 0.45–1.35 s el rugido
   crece (temblor) · 1.4–2.15 s lo más fuerte (hocico y melena al máximo, temblor fuerte) · 2.3–2.7 s se apaga (se cierra) */
@keyframes cabeza-ruge {
  0% { transform: none; }
  7% { transform: translateY(-12px) rotate(-3.5deg) scale(.98); }
  10% { transform: translateY(10px) rotate(1.5deg) scale(1.05); }
  16% { transform: translate(2px, 10px) rotate(1.7deg) scale(1.05); }
  22% { transform: translate(-2px, 9px) rotate(1.3deg) scale(1.05); }
  28% { transform: translate(2px, 10px) rotate(1.6deg) scale(1.05); }
  34% { transform: translate(-2px, 9px) rotate(1.3deg) scale(1.05); }
  40% { transform: translate(2px, 10px) rotate(1.6deg) scale(1.052); }
  46% { transform: translate(-2px, 9px) rotate(1.3deg) scale(1.052); }
  50% { transform: translate(3px, 12px) rotate(2deg) scale(1.06); }
  55% { transform: translate(-3px, 10px) rotate(1.2deg) scale(1.06); }
  60% { transform: translate(3px, 12px) rotate(2deg) scale(1.06); }
  65% { transform: translate(-3px, 10px) rotate(1.2deg) scale(1.06); }
  70% { transform: translate(3px, 12px) rotate(1.9deg) scale(1.058); }
  76% { transform: translate(-2px, 10px) rotate(1.3deg) scale(1.055); }
  84% { transform: translateY(8px) rotate(1deg) scale(1.045); }
  100% { transform: none; }
}
@keyframes mandibula-ruge {
  0%, 7% { transform: none; }
  10%, 47% { transform: translateY(84px); }
  52%, 76% { transform: translateY(94px); }
  84% { transform: translateY(84px); }
  100% { transform: none; }
}
@keyframes melena-ruge {
  0% { transform: none; }
  7% { transform: translate(calc(var(--fx) * -.35), calc(var(--fy) * -.35)); }
  10%, 47% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  52%, 76% { transform: translate(calc(var(--fx) * 1.25), calc(var(--fy) * 1.25)) rotate(var(--fr)); }
  84% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  100% { transform: none; }
}
@keyframes colmillos-ruge { 0%, 6% { opacity: 0; transform: none; } 8% { opacity: 1; } 10%, 84% { opacity: 1; transform: translateY(30px); } 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes colmillos-bajos-ruge { 0%, 6% { opacity: 0; transform: none; } 8% { opacity: 1; } 10%, 84% { opacity: 1; transform: translateY(-26px); } 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes onda { 0% { opacity: 0; transform: scale(.45); } 12% { opacity: .7; } 100% { opacity: 0; transform: scale(2.6); } }
@media (max-width: 900px) {
  .hero .contenedor { grid-template-columns: 1fr; gap: 0; }
  .hero__leon { order: -1; width: min(52vw, 300px); margin: 0 calc(var(--margen) * -.5) 1.5rem auto; }   /* aire para la quijada al rugir */
  /* En celular solo la bocina, a la izquierda del león (el texto queda para lectores de pantalla) */
  .hero__rugir { left: auto; right: calc(100% + .25rem); bottom: 38%; translate: none; width: 46px; height: 46px; padding: 0; justify-content: center; }
  .hero__rugir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero__rugir .ico { width: 1.35rem; height: 1.35rem; }
}


/* =====================================================================
   LEÓN COMPLETO («Por qué VALTORAV»): el león geométrico de cuerpo completo que mandó Eduardo, redibujado en vector
   pieza por pieza con los dorados del isotipo (herramientas/leon_completo.py). Al asomar entra por facetas desde la
   izquierda, caminando hacia el texto (≤ 1.5 s), y mueve la cola. Ruge con su sonido solo si lo tocas o con «Oír el
   rugido» (bloque «leon» de sitio.js): cabeza atrás y arriba, quijada, melena erizada (la del pecho se queda con el
   cuerpo), cola que se levanta y se mece, ondas de oro desde la boca; sigue el ritmo de assets/audio/rugido.m4a.
   Sin JS o con «reducir movimiento», quieto y completo. Estuvo en la portada solo el 5-oct-2026: Eduardo prefirió ahí
   al león de cabeza.
   ===================================================================== */
.por-que__leon { position: relative; grid-area: leon; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.leon-completo { display: block; width: 100%; height: auto; overflow: visible; }
.por-que__rugir { position: absolute; left: 0; top: 0; z-index: 2; }
.leon-completo .pz, .leon-completo .pz__cuerpo { transform-box: fill-box; transform-origin: center; }
.lc__escena, .lc__cabeza, .lc__quijada, .lc__cola { transform-box: view-box; }
.lc__cabeza { transform-origin: 1100px 430px; }     /* el cuello */
.lc__quijada { transform-origin: 1262px 336px; }    /* la bisagra de la quijada */
.lc__cola { transform-origin: 568px 416px; }        /* donde nace la cola */
@media (prefers-reduced-motion: no-preference) {
  .js .leon-completo:not(.entra) .lc__escena { opacity: 0; }
  .leon-completo.entra .lc__escena { animation: lc-llega 1.2s cubic-bezier(.16, 1, .3, 1) both; }
  .leon-completo.entra .pz { animation: pieza-llega .85s cubic-bezier(.16, 1, .3, 1) calc(.05s + var(--i) * 16ms) both; }
  .leon-completo.entra:not(.ruge) .lc__cola { animation: lc-cola-mece 2.6s cubic-bezier(.45, 0, .3, 1) 1.3s both; }
  .leon-completo.ruge .lc__cabeza { animation: lc-cabeza-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-completo.ruge .lc__quijada { animation: lc-quijada-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-completo.ruge :is(.pz--melena, .pz--pecho) .pz__cuerpo { animation: lc-melena-ruge 2.8s cubic-bezier(.34, 0, .2, 1) both; }
  .leon-completo.ruge .lc__cola { animation: lc-cola-ruge 4.2s cubic-bezier(.45, 0, .3, 1) both; }
  .leon-completo.ruge .onda { animation: onda 1.4s cubic-bezier(.2, .6, .3, 1) .28s both; }
  .leon-completo.ruge .onda--2 { animation-delay: .9s; }
  .leon-completo.ruge .onda--3 { animation-delay: 1.45s; }
}
@keyframes lc-llega { from { opacity: 0; transform: translateX(-110px); } to { opacity: 1; transform: none; } }
@keyframes lc-cola-mece { 0% { transform: none; } 25% { transform: rotate(8deg); } 50% { transform: rotate(1deg); } 75% { transform: rotate(5deg); } 100% { transform: none; } }
/* Ritmo del rugido (2.8 s) = ritmo del sonido: 0–0.22 s silencio (la cabeza se echa atrás) · 0.28 s primer golpe
   (levanta la cabeza, abre la quijada) · 0.45–1.35 s crece (temblor) · 1.4–2.15 s lo más fuerte · 2.3–2.7 s se apaga */
@keyframes lc-cabeza-ruge {
  0% { transform: none; }
  7% { transform: rotate(3deg) translateX(-5px); }
  10% { transform: rotate(-6deg) translateY(-5px); }
  16%, 28%, 40% { transform: rotate(-6.6deg) translate(1px, -5px); }
  22%, 34%, 46% { transform: rotate(-5.8deg) translate(-1px, -4px); }
  50%, 60%, 70% { transform: rotate(-8.6deg) translate(2px, -7px); }
  55%, 65% { transform: rotate(-7.6deg) translate(-2px, -6px); }
  76% { transform: rotate(-7deg) translate(-1px, -5px); }
  84% { transform: rotate(-3.5deg) translateY(-2px); }
  100% { transform: none; }
}
@keyframes lc-quijada-ruge {
  0%, 7% { transform: none; }
  10%, 47% { transform: rotate(16deg); }
  52%, 76% { transform: rotate(22deg); }
  84% { transform: rotate(13deg); }
  100% { transform: none; }
}
@keyframes lc-melena-ruge {
  0% { transform: none; }
  7% { transform: translate(calc(var(--fx) * -.3), calc(var(--fy) * -.3)); }
  10%, 47% { transform: translate(var(--fx), var(--fy)); }
  52%, 76% { transform: translate(calc(var(--fx) * 1.3), calc(var(--fy) * 1.3)); }
  84% { transform: translate(var(--fx), var(--fy)); }
  100% { transform: none; }
}
/* La cola se levanta con el rugido y se mece dos veces antes de quedarse (termina sola: no es un bucle) */
@keyframes lc-cola-ruge {
  0%, 5% { transform: none; }
  12% { transform: rotate(10deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(4deg); }
  70% { transform: rotate(11deg); }
  81% { transform: rotate(2deg); }
  90% { transform: rotate(6deg); }
  100% { transform: none; }
}

/* =====================================================================
   ATAJO — «¿Qué necesitas?»: tarjeta que monta sobre la curva del hero (como la barra de búsqueda de la referencia)
   y lleva al cotizador con esa opción ya elegida (data-cotizar → bloque «preseleccion» de sitio.js).
   ===================================================================== */
.atajo-caja { position: relative; z-index: 3; margin-top: calc(-1 * clamp(2.6rem, 2rem + 2.4vw, 4.2rem)); }
.atajo {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem clamp(.9rem, .5rem + 1.4vw, 1.8rem);
  padding: clamp(1rem, .8rem + .8vw, 1.35rem) clamp(1.1rem, .8rem + 1.4vw, 1.8rem);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: calc(var(--radio) * 1.8);
  box-shadow: 0 2px 4px rgba(11, 19, 32, .06), 0 24px 50px -20px rgba(11, 19, 32, .38);
}
.atajo__titulo { font-family: var(--fuente-titulos); font-size: var(--t-base); font-weight: 700; color: var(--tinta); white-space: nowrap; }
.atajo__opciones { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 380px; }
.atajo__opciones a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border: 1px solid var(--borde); border-radius: 999px;
  font-size: var(--t-base); font-weight: 500; color: var(--tinta); text-decoration: none; background: var(--fondo);
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion), transform .16s var(--curva-salida);
}
.atajo__opciones a:hover { border-color: var(--marca); color: var(--marca); background: var(--fondo-alt); }
.atajo__boton { flex: none; }
@media (max-width: 760px) {
  .atajo { flex-direction: column; align-items: stretch; }
  .atajo__opciones { flex: none; }
  .atajo__boton { width: 100%; }
}

/* =====================================================================
   SECCIONES
   ===================================================================== */
.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, .8); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.banda { border-bottom: 2px solid var(--acento); }   /* la banda Azul Noche se cierra con el filete */

/* =====================================================================
   QUÉ CAMBIA — «De negocio a empresa» y la tabla negocio / empresa
   (la frase «Tu negocio ya vende. Ahora que se note.» pasó a la portada el 4-oct-2026)
   ===================================================================== */
.cambio__cuerpo { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

/* Tabla negocio / empresa: a la izquierda cómo está hoy el negocio (gris y sin fondo); a la derecha cómo queda como
   empresa, en una banda Azul Noche con palomitas de oro que cierra con filete de oro (manual). La flecha de oro entre
   los dos encabezados dice la dirección: de negocio a empresa. En celular, una sola leyenda arriba y cada fila en
   bloque: el tema, el negocio en gris y la empresa en su tarjeta Azul Noche. */
.cambio { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.cambio th, .cambio td { padding: 1.15rem 1.5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borde); }
.cambio thead th {
  padding-block: 0 1rem; border-bottom: 0; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-tenue); vertical-align: bottom;
}
.cambio thead th:nth-child(2) { position: relative; }
.cambio thead th:last-child { padding-top: 1.4rem; background: var(--marca-oscuro); color: var(--oro-texto); border-radius: var(--radio) var(--radio) 0 0; }
.cambio__flecha {
  position: absolute; right: .9rem; bottom: .5rem; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento);
}
.cambio__flecha .ico { width: 1.05rem; height: 1.05rem; }
.cambio tbody tr:first-child > :not(:last-child) { border-top: 1px solid var(--borde); }   /* marco arriba del lado «negocio» */
.cambio tbody th { width: 17%; padding-left: 0; font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 700; color: var(--tinta); }
.cambio td { width: 37%; color: var(--tinta-suave); }
.cambio td:last-child { width: 46%; background: var(--marca-oscuro); color: #fff; font-weight: 500; border-bottom-color: rgba(255, 255, 255, .1); }
.cambio tbody tr:last-child td:last-child { border-bottom: 2px solid var(--acento); border-radius: 0 0 var(--radio) var(--radio); }  /* cierra con el filete */
.cambio__dato { display: flex; align-items: flex-start; gap: .75rem; }
.cambio td .ico { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; color: var(--tinta-tenue); }
.cambio td:last-child .ico { color: var(--oro-texto); stroke-width: 2.4; }
@media (max-width: 760px) {
  .cambio, .cambio thead, .cambio tbody, .cambio tr, .cambio th, .cambio td, .cambio tbody th, .cambio td:last-child { display: block; width: auto; }
  .cambio thead tr { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
  .cambio thead th { padding: 0; }
  .cambio thead th:first-child { display: none; }
  .cambio thead th:nth-child(2) { display: flex; align-items: center; gap: .55rem; }
  .cambio__flecha { position: static; width: 30px; height: 30px; }
  .cambio tbody tr:first-child > :not(:last-child) { border-top: 0; }
  .cambio__flecha .ico { width: .9rem; height: .9rem; }
  .cambio thead th:last-child { padding: .5rem .8rem; border-radius: 999px; }
  .cambio tr { padding: 1.15rem 0; border-bottom: 1px solid var(--borde); }
  .cambio tbody th, .cambio td { padding: 0; border: 0; }
  .cambio tbody th { margin-bottom: .45rem; }
  .cambio td:last-child { margin-top: .7rem; padding: .85rem 1rem; border-bottom: 2px solid var(--acento); border-radius: var(--radio); }
  .cambio tbody tr:last-child td:last-child { border-radius: var(--radio); }
}

/* =====================================================================
   SERVICIOS — VALTORAV PRO y VALTORAV CARE
   El nombre va en banda Azul Noche (el oro del descriptor solo se lee sobre oscuro)
   ===================================================================== */
.lineas { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--hueco); align-items: stretch; }   /* misma altura: los botones quedan en línea */
.linea { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); overflow: hidden; }
.linea__banda { padding: 1.5rem clamp(1.3rem, 1rem + 1.2vw, 2rem) 1.35rem; background: var(--marca-oscuro); color: #fff; border-bottom: 2px solid var(--acento); }
.linea__verbo { font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.linea__nombre { margin-top: .45rem; font-family: var(--fuente-titulos); font-size: var(--t-h3); font-weight: 600; letter-spacing: .12em; line-height: 1.2; color: #fff; }
.linea__nombre span { color: var(--oro-texto); }
.linea__dato { margin-top: .4rem; font-size: var(--t-base); color: rgba(255, 255, 255, .76); }
.linea__cuerpo { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.linea__intro { font-size: var(--t-lead); font-weight: 500; line-height: 1.5; color: var(--tinta); }
.linea__grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.2rem; }
.linea h4 { font-size: var(--t-chico); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }
.linea__nota { padding-top: 1rem; border-top: 1px solid var(--borde); font-size: var(--t-base); color: var(--tinta-suave); }
.linea__resuelve { padding: .8rem 1rem; border-left: 2px solid var(--acento); background: var(--fondo-alt); font-size: var(--t-base); color: var(--tinta); }
.linea__pie { margin-top: auto; padding-top: .25rem; }
.fuera { max-width: 60ch; margin-top: 1.8rem; font-size: var(--t-base); color: var(--tinta-suave); }
.fuera strong { color: var(--tinta); }
.lista-check { list-style: none; display: grid; gap: .55rem; margin-top: .8rem; }
.lista-check li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-base); color: var(--tinta-suave); text-wrap: pretty; }
.lista-check .ico { width: 1.05em; height: 1.05em; margin-top: .25rem; color: var(--marca); stroke-width: 2.4; }
@media (max-width: 1080px) { .lineas { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .linea__grupos { grid-template-columns: 1fr; } .linea__pie .boton { width: 100%; } }

/* =====================================================================
   PROYECTOS — carrusel: el antes y el después del logotipo, qué se hizo, el enlace y la portada del sitio.
   Tira con scroll-snap (se desliza con el dedo); flechas, nombres y teclado desde sitio.js (bloque «carrusel»).
   No avanza solo. Sin JS los proyectos quedan uno debajo de otro y sin controles.
   ===================================================================== */
.carrusel { position: relative; }
.carrusel__barra { display: none; }
.carrusel--vivo .carrusel__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.carrusel__nombres { display: flex; gap: .2rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.carrusel__nombres::-webkit-scrollbar { display: none; }
.carrusel__nombres button {
  flex: none; min-height: 44px; padding: .5rem .85rem; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); transition: color var(--transicion), border-color var(--transicion);
}
.carrusel__nombres button:hover { color: var(--marca); }
.carrusel__nombres button[aria-current="true"] { color: var(--marca); border-bottom-color: var(--acento); }
.carrusel__flechas { display: flex; align-items: center; gap: .5rem; flex: none; }
.carrusel__cuenta { min-width: 3.4em; margin-right: .3rem; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .12em; color: var(--tinta-suave); text-align: right; font-variant-numeric: tabular-nums; }
.carrusel__flecha {
  display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--borde); border-radius: 50%;
  background: var(--fondo); color: var(--marca); cursor: pointer; transition: border-color var(--transicion), opacity var(--transicion), transform .16s var(--curva-salida);
}
.carrusel__flecha .ico { width: 1.15rem; height: 1.15rem; }
.carrusel__flecha--atras .ico { transform: scaleX(-1); }
.carrusel__flecha:hover:not(:disabled) { border-color: var(--marca); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }
.carrusel__pista { list-style: none; display: grid; gap: 1.5rem; }
.carrusel--vivo .carrusel__pista {
  position: relative; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carrusel--vivo .carrusel__pista::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .carrusel--vivo .carrusel__pista { scroll-behavior: smooth; } }

/* Cada proyecto: arriba el antes → después; abajo qué se hizo y la portada del sitio */
.caso {
  scroll-snap-align: start; display: grid; gap: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); min-width: 0;
  padding: clamp(1.1rem, .7rem + 1.6vw, 2.2rem); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
}
.caso figure { margin: 0; }
.caso__cambio { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(.5rem, .2rem + 1.2vw, 1.4rem); }
.caso__logo { display: grid; gap: .7rem; min-width: 0; }
.caso__marco {
  display: grid; place-items: center; height: clamp(120px, 6.5rem + 7vw, 230px); padding: clamp(.6rem, .4rem + 1.2vw, 1.6rem);
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; overflow: hidden;
}
.caso__marco > img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.caso__logo--despues .caso__marco { border-color: color-mix(in srgb, var(--acento) 60%, var(--borde)); box-shadow: inset 0 3px 0 var(--acento); }  /* filete de oro */
.caso__logo figcaption { font-size: var(--t-chico); line-height: 1.45; color: var(--tinta-suave); }
.caso__logo figcaption b { display: block; margin-bottom: .15rem; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-tenue); }
.caso__logo--despues figcaption b { color: var(--marca); }
.caso__flecha {
  display: grid; place-items: center; align-self: center; margin-bottom: 2.4rem; width: 44px; height: 44px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento);
}
.caso__flecha .ico { width: 1.2rem; height: 1.2rem; }
/* MADVER: el logo y abajo sus versiones (negativo y blanco sobre su navy, una tinta sobre claro) */
.caso__marco--versiones { grid-template-rows: minmax(0, 1fr) auto; gap: .6rem; }
.caso__versiones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; width: 100%; }
.caso__versiones img { width: 100%; height: auto; padding: .3rem .4rem; border-radius: 4px; background: #f3f5f8; }
.caso__versiones img.sobre-oscuro { background: #0a1626; }  /* Navy de MADVER, el fondo para el que se hicieron */
.caso__info {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.3rem, 1rem + 2vw, 3rem); align-items: center;
  padding-top: clamp(1.1rem, .8rem + 1vw, 1.8rem); border-top: 1px solid var(--borde);
}
.caso__tipo { font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.caso h3 { margin-top: .5rem; font-size: var(--t-h3); }
.caso__meta { margin: .35rem 0 .8rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.caso__texto > p:not(.caso__tipo):not(.caso__meta) { max-width: 62ch; color: var(--tinta-suave); }
.caso .enlace-flecha { margin-top: 1.1rem; }
.caso__sitio {
  display: block; aspect-ratio: 16 / 10; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--marca-oscuro);
}
.caso__sitio img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 900px) { .caso__info { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .carrusel__nombres { display: none; }
  .carrusel--vivo .carrusel__barra { justify-content: flex-end; }
  .caso__marco { height: 150px; }
  .caso__flecha { width: 34px; height: 34px; margin-bottom: 3.4rem; }
  .caso__flecha .ico { width: 1rem; height: 1rem; }
}

/* =====================================================================
   LEÓN COMO MARCA DE AGUA (manual, «Sistema gráfico»): Oro al 10–12 %, sangrado por un borde y recortado; nunca
   completo y centrado, y nunca junto al logotipo principal (en el pie va el compacto). Va en Servicios, Contacto y el
   pie (herramientas/leon_marca_de_agua.py). Al asomar aparece por facetas (≤ 1.5 s, la animación que permite el
   manual; bloque «al-asomar» de sitio.js) y con el scroll se desliza un poco (CSS ligado al scroll, solo donde el
   navegador lo soporta). Sin JS o con «reducir movimiento», quieto y completo.
   ===================================================================== */
.con-marca-agua { position: relative; isolation: isolate; }
.marca-agua { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.marca-agua__leon { position: absolute; width: clamp(300px, 36vw, 560px); height: auto; color: var(--acento); opacity: .11; }
.marca-agua__leon .faceta { fill: currentColor; }
.marca-agua--servicios .marca-agua__leon { top: -5%; right: -9%; }
.marca-agua--contacto .marca-agua__leon { top: 3%; right: -11%; }
.marca-agua--pie .marca-agua__leon { right: -7%; bottom: -42%; opacity: .1; }
@media (max-width: 760px) {
  .marca-agua__leon { width: 82vw; }
  .marca-agua--servicios .marca-agua__leon, .marca-agua--contacto .marca-agua__leon { top: 1.5rem; right: -30vw; }
  .marca-agua--pie .marca-agua__leon { right: -28vw; bottom: -16%; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .marca-agua:not(.entra) .faceta { opacity: 0; }
  .marca-agua.entra .faceta { animation: faceta-llega .7s var(--curva-salida) calc(var(--i) * 45ms) both; }
  @supports (animation-timeline: view()) {
    .marca-agua__leon { animation: marca-agua-deriva linear both; animation-timeline: view(); }
  }
}
@keyframes faceta-llega { from { opacity: 0; transform: scale(.82); } }
@keyframes marca-agua-deriva { from { translate: 0 7%; } to { translate: 0 -7%; } }

/* =====================================================================
   POR QUÉ VALTORAV — banda Azul Noche con razones (sin tarjetas)
   ===================================================================== */
/* Como la sección dividida de la referencia: el león a la izquierda (mira hacia el texto), el título a la derecha y
   las cuatro razones abajo */
.por-que {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "leon titulo" "razones razones";
  gap: clamp(2.6rem, 1.6rem + 3vw, 4.6rem) clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.por-que .titulo-seccion { grid-area: titulo; margin-bottom: 0; }
.proposito { margin-top: 1.7rem; padding-left: 1rem; border-left: 2px solid var(--acento); }
.seccion--oscura p.proposito { color: #fff; font-size: var(--t-base); }
.proposito span { display: block; margin-bottom: .35rem; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-texto); }
.por-que .boton { margin-top: 2.2rem; }
/* Las razones: la lista de «Interactive List Preview» que pidió Eduardo (5-oct-2026, rehecha sin React ni
   Tailwind). Cada razón es una fila con su línea de Oro: el nombre (con su dato en Oro) y el texto. En computadora
   con ratón (abajo) una barra de Oro llega a la fila que señalas y su texto pasa a Azul Noche (bloque «razones» de
   sitio.js). El león que se abría en medio de la lista se quitó el 16-oct-2026 (pedido de Eduardo). */
.razones { grid-area: razones; position: relative; isolation: isolate; }
.razones__barra { display: none; }
.razones__lista { position: relative; z-index: 1; list-style: none; border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); }
.razones__lista li { position: relative; display: grid; gap: .7rem clamp(1.5rem, .8rem + 3vw, 4rem); padding-block: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
/* Línea de oro de cada razón; --linea (0–1) la traza al entrar (GSAP) */
.razones__lista li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: color-mix(in srgb, var(--acento) 55%, transparent); transform: scaleX(var(--linea, 1)); transform-origin: left; }
.razones h3 { display: flex; align-items: center; gap: .7rem; font-size: var(--t-lead); }
.razones .ico { width: 26px; height: 26px; color: var(--acento); }   /* iconos de línea en Oro sobre Azul Noche (manual) */
.seccion--oscura p.razones__dato { margin-top: .4rem; font-family: var(--fuente-titulos); font-size: var(--t-base); font-weight: 600; color: var(--oro-texto); }
.seccion--oscura p.razones__texto { max-width: 38rem; color: rgba(255, 255, 255, .76); }
@media (min-width: 640px) {
  /* El nombre a la izquierda y el texto a la derecha */
  .razones__lista li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .razones__lista li { padding: 1.75rem 1.5rem; }
  .razones :is(h3, .ico), .seccion--oscura .razones__lista p { transition: color .35s cubic-bezier(.215, .61, .355, 1); }
  .razones__lista li.activa :is(h3, .ico), .seccion--oscura .razones__lista li.activa p { color: var(--marca); }
  /* La barra: llega a la fila que señalas (sitio.js le da la altura y la posición) y se va al salir de la lista */
  .razones__barra {
    display: block; position: absolute; z-index: 0; inset: 0 0 auto; height: 0; background: var(--acento); opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.165, .84, .44, 1), height .35s cubic-bezier(.165, .84, .44, 1), opacity .35s ease-out;
  }
  .razones.con-barra .razones__barra { opacity: 1; }
}
@media (max-width: 900px) {
  .por-que { grid-template-columns: 1fr; grid-template-areas: "leon" "titulo" "razones"; }
  .por-que__leon { max-width: 560px; }
}

/* =====================================================================
   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; min-height: 44px; padding: 1.2rem .25rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--t-base); 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: 1.2rem; line-height: 1; color: var(--marca); transition: transform var(--transicion), border-color var(--transicion); }
.pregunta[open] summary::after { transform: rotate(45deg); border-color: var(--acento); }
.pregunta summary:hover { color: var(--marca); }
.pregunta div { padding: 0 .25rem; color: var(--tinta-suave); }
.pregunta div > p { max-width: 64ch; }
.pregunta div > :last-child { padding-bottom: 1.3rem; }   /* el aire va adentro: así la respuesta abre y cierra suave (GSAP) */
.pregunta.cerrando summary::after { transform: none; border-color: var(--borde); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq .titulo-seccion { position: static; } }

/* =====================================================================
   SOLICITAR PROPUESTA — cotizador por pasos que arma el mensaje de 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; border-bottom: 2px solid var(--acento); }
.cotizador__aparte > .ico { width: 30px; height: 30px; color: var(--acento); }
.cotizador__aparte h3 { font-size: var(--t-lead); margin: .8rem 0 .6rem; }
.cotizador__aparte p { font-size: var(--t-base); color: rgba(255, 255, 255, .8); }
.cotizador__aparte .boton { width: 100%; margin-top: 1.3rem; }
.cotizador__aparte .tel { display: block; margin-top: 1.1rem; font-family: var(--fuente-titulos); font-size: var(--t-h3); font-weight: 700; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.cotizador__aparte .tel:hover { text-decoration: underline; text-decoration-color: var(--acento); }
.cotizador__caja { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.progreso { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: .4rem; margin-bottom: 1.6rem; }
.progreso span { height: 4px; 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 { 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-chico); 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-left: 2px solid var(--acento); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; background: var(--fondo-alt); font-size: var(--t-base); }
.preseleccion button { border: 0; background: none; padding: 0; 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 copiarlo */
.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); }

/* Campos: 16 px o más (iOS no hace zoom al tocarlos) */
.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); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--tinta) 30%, var(--borde)); border-radius: var(--radio-sm); background: var(--fondo); font-size: 1rem; transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 16%, transparent); }
.campo input:user-invalid, .campo textarea:user-invalid, .campo select:user-invalid { border-color: var(--error); }
.aviso-campo { margin: -.4rem 0 1rem; font-size: var(--t-base); font-weight: 600; color: var(--error); }
.formulario__legal { margin-top: 1rem; font-size: var(--t-chico); color: var(--tinta-tenue); }
.formulario__legal a { color: inherit; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } .cotizador__nav .boton { flex: 1 1 auto; } }

/* =====================================================================
   PIE — Azul Noche con el compacto; el filete de oro lo separa del contenido
   ===================================================================== */
.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); border-top: 2px solid var(--acento); }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.pie__logo { height: 48px; width: auto; margin-bottom: 1.2rem; }
.pie__marca p { max-width: 34ch; }
.pie__lema { margin-top: 1.1rem; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-texto); }
.pie h2 { margin-bottom: 1rem; font-family: var(--fuente-titulos); font-size: var(--t-chico); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto); }
.pie ul { list-style: none; display: grid; gap: .1rem; }
.pie li a { display: inline-block; padding: .45rem 0; }
.pie a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--acento); }
.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, .12); font-size: var(--t-chico); }
.pie__base nav a { display: inline-block; padding: .45rem 0; }
@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 (se esconde cuando se ve el formulario)
   ===================================================================== */
.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 10px 30px rgba(14, 122, 62, .35); transition: transform var(--transicion), opacity .25s, visibility 0s;
}
.wa-flotante .ico { width: 26px; height: 26px; }
.wa-flotante span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s var(--curva-salida); }
@media (hover: hover) and (pointer: fine) { .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; }

/* =====================================================================
   PÁGINAS INTERIORES (aviso de privacidad, 404)
   ===================================================================== */
.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; font-weight: 700; }
.legal p, .legal li { max-width: 68ch; 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); }
.legal .volver { margin-top: 2.5rem; }
.pagina-error { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.pagina-error img { width: 120px; height: auto; margin: 0 auto 1.5rem; }
.pagina-error strong { display: block; font-family: var(--fuente-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--marca); letter-spacing: -.04em; }
.pagina-error h1 { font-size: var(--t-h2); }
.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 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);
}
.js [data-revelar].visible { opacity: 1; translate: none; }
/* Con GSAP (inicio, si llega de jsDelivr) cada tipo de contenido tiene su propia entrada (bloque «gsap» de sitio.js):
   el contenedor queda visible y GSAP anima sus partes. Sin GSAP siguen las reglas de arriba. */
.gsap [data-revelar] { opacity: 1; translate: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-revelar] { opacity: 1; translate: none; }
}

@media print {
  .cabecera, .wa-flotante, .cajon { display: none !important; }
  .hero, .seccion--oscura, .pie { background: #fff !important; color: #000 !important; }
  .palabra { color: #000 !important; }
  /* Lo que GSAP todavía no había hecho entrar se imprime completo */
  .gsap [data-revelar], .gsap [data-revelar] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .gsap .titulo-seccion h2, .gsap .razones__lista li { --regla: 1 !important; --linea: 1 !important; }
  .razones__barra { display: none !important; }
  .marca-agua { display: none !important; }
  /* La columna «empresa» se imprime en blanco con texto negro (sin fondo, el texto blanco no se vería) */
  .cambio thead th:last-child, .cambio td:last-child { background: none !important; color: #000 !important; }
  .cambio td:last-child .ico, .cambio thead th:last-child { color: #000 !important; }
  /* El carrusel se imprime con todos los proyectos, uno debajo de otro */
  .carrusel__barra { display: none !important; }
  .carrusel__pista { grid-auto-flow: row !important; overflow: visible !important; }
  .caso { break-inside: avoid; }
  .caso__marco > * { clip-path: none !important; }
}