/* ==========================================================================
   Impulsa tu marca B2B — hoja de estilos
   Paleta y tipografías tomadas del Manual de Identidad (pp. 12 y 15).
   ========================================================================== */

/* Fuentes propias: se sirven desde el sitio con nombres de familia propios.
   Si un navegador bloquea las fuentes web (p. ej. Modo hermético de iOS), el
   nombre no coincide con ninguna fuente instalada y cae al sistema con el
   peso correcto, en vez de a una Montserrat local de un solo peso.           */
@font-face {
  font-family: "Impulsa Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2?v=20260919") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Impulsa Marca";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/comfortaa-latin.woff2?v=20260919") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colores institucionales — no agregar ninguno fuera de esta lista */
  --amarillo: #ffee00;
  --tinta: #1f140f;
  --azul: #276cb0;

  /* Derivados admitidos (tintes de los institucionales) */
  --azul-profundo: #1b4f85;
  --azul-tinte: #e8f1fb;
  --azul-tinte-2: #f4f9ff;
  --tinte-1: #e8f1fb;
  --tinte-2: #e9ecff;
  --tinte-3: #fff8c4;
  --tinte-4: #fdf0cf;
  --amarillo-suave: #fff8c4;
  --tinta-suave: #5a5048;
  --borde: #e3ecf7;
  --blanco: #ffffff;
  --sobre-azul: #eaf3fd;
  --wa: #25d366;

  --fuente: "Impulsa Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-marca: "Impulsa Marca", var(--fuente);

  --ancho: 1200px;
  --gutter: clamp(20px, 5vw, 60px);
  --radio: 20px;
  --sombra: 0 3px 10px -4px rgba(31, 20, 15, .15);
  --sombra-alta: 0 6px 12px -4px rgba(31, 20, 15, .22);
  --header-h: 92px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--azul); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--amarillo); color: var(--tinta); }

/* Barras de scroll temáticas ---------------------------------------------- */
* { scrollbar-color: var(--azul) var(--azul-tinte-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--azul-tinte-2); }
::-webkit-scrollbar-thumb { background: var(--azul); border: 3px solid var(--azul-tinte-2); border-radius: 99px; }

.contenedor { width: min(var(--ancho), 100%); margin-inline: auto; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

h1, h2, h3 { font-weight: 800; color: var(--tinta); line-height: 1.14; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.32; }
p  { margin: 0; }

.az { color: var(--azul); }

/* Marcador: el amarillo pasa POR DETRÁS de las palabras, no como barra suelta */
.marcador {
  background-image: linear-gradient(var(--amarillo), var(--amarillo));
  background-repeat: no-repeat;
  background-size: 100% .36em;
  background-position: 0 78%;
  padding-inline: .08em;
}

.rotulo {
  display: inline-block;
  line-height: 1.5;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: .9rem;
}
.rotulo--claro { color: var(--amarillo); }

.entrada { font-size: clamp(1rem, 1.3vw, 1.09rem); max-width: 62ch; }
.entrada + .entrada { margin-top: 1rem; }

/* ==========================================================================
   Secciones
   ========================================================================== */

.seccion {
  padding: clamp(48px, 7vw, 92px) var(--gutter);
  position: relative; overflow: hidden;
  background-color: #ffffff;
  background-image:
    radial-gradient(64% 54% at 92% -8%, rgba(255, 238, 0, .20), transparent 62%),
    radial-gradient(58% 52% at 2% 104%, rgba(39, 108, 176, .13), transparent 66%),
    linear-gradient(178deg, #ffffff 0%, #f4f9ff 100%);
}

/* Textura de fondo: una retícula de puntos muy tenue y un lavado radial.
   Suficiente para que la superficie deje de ser plana, no para que se note. */
.seccion::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(currentColor 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 26px 26px, 160px 160px;
  color: var(--azul);
  opacity: .08;
  mask-image: radial-gradient(130% 100% at 80% 0%, #000 25%, transparent 82%);
}
.seccion--tinte::before { opacity: .1; mask-image: radial-gradient(120% 95% at 12% 100%, #000 20%, transparent 80%); }
.seccion--oscura::before, .seccion--azul::before { color: #ffffff; opacity: .13; }

.hero::before { display: none; }
.seccion--tinte {
  background-color: #eef4fd;
  background-image:
    radial-gradient(56% 48% at 4% -6%, rgba(255, 238, 0, .20), transparent 58%),
    radial-gradient(66% 60% at 98% 96%, rgba(39, 108, 176, .18), transparent 64%),
    linear-gradient(166deg, #f8fbff 0%, #e3edfb 55%, #f1f7ff 100%);
}
.seccion--oscura {
  color: var(--sobre-azul);
  background-color: #1b4f85;
  background-image:
    radial-gradient(54% 46% at 90% 2%, rgba(255, 238, 0, .12), transparent 58%),
    radial-gradient(72% 62% at 2% 98%, rgba(0, 0, 0, .34), transparent 64%),
    linear-gradient(158deg, #1e5589 0%, #1a4b7d 48%, #10304f 100%);
}
.seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }
.seccion--azul {
  color: var(--sobre-azul);
  background-color: #276cb0;
  background-image:
    radial-gradient(52% 44% at 94% 4%, rgba(255, 255, 255, .11), transparent 58%),
    radial-gradient(70% 62% at 0% 100%, rgba(0, 0, 0, .26), transparent 64%),
    linear-gradient(160deg, #276cb0 0%, #22608f7f 0%, #235f97 52%, #17456f 100%);
}
.seccion--azul h2 { color: var(--blanco); }

.encabezado { max-width: 46ch; margin-bottom: clamp(28px, 3vw, 40px); }
.encabezado--centro { max-width: 60ch; margin-inline: auto; text-align: center; }

/* Manchas orgánicas de fondo ---------------------------------------------- */
.mancha { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 0; }
.mancha--am { background: var(--amarillo-suave); }
.mancha--az { background: var(--azul-tinte); }
.seccion > .contenedor { position: relative; z-index: 1; }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 12px; line-height: 1.35;
  padding: 17px 32px; border-radius: 999px; border: 0;
  font-family: var(--fuente); font-size: 1rem; font-weight: 800;
  color: #ffffff; background: var(--tinta);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(31, 20, 15, .45);
  position: relative; overflow: hidden; isolation: isolate;
  /* --bx/--by los escribe el imán del puntero; --lift es el hover de siempre. */
  transform: translate(var(--bx, 0px), calc(var(--by, 0px) + var(--lift, 0px)));
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .18s, background .18s;
}
.btn:hover { --lift: -3px; box-shadow: 0 14px 28px -10px rgba(31, 20, 15, .55); background: #33241c; }

/* Único botón que conserva el amarillo de marca: el CTA fijo del menú. */
.btn--marca { background: var(--amarillo); color: var(--tinta); }
.btn--marca:hover { background: var(--amarillo); filter: saturate(1.1); }
.btn:active { --lift: -1px; }
/* El enlace de salto hereda .btn pero debe seguir fuera de flujo. */
.btn.oculto-visual { position: absolute; }
.btn .ic { width: 22px; height: 22px; }
.btn--sm { padding: 13px 22px; font-size: .92rem; }
.btn--bloque { width: 100%; justify-content: center; }

/* ==========================================================================
   Cabecera fija
   ========================================================================== */

.cabecera { position: sticky; top: 0; z-index: 60; }

.nav { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); transition: box-shadow .25s; }
.cabecera.encogida .nav { box-shadow: 0 4px 14px -8px rgba(31,20,15,.22); background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.4); }
.nav .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 17px; }

.nav-logo img { width: 86px; position: relative; z-index: 1; }
.nav-logo { position: relative; transition: transform .25s cubic-bezier(.2,.8,.3,1); transform-origin: left center; }
.cabecera.encogida .nav-logo { transform: scale(.86); }

/* El foco del logo también se prende acá, con el mismo gesto del hero pero en
   miniatura: solo el resplandor detrás del bulbo. El logo nunca se desatura
   —en la cabecera la marca va siempre a color— así que lo único que cambia
   es la luz. El centro del globo cae en x=593/1187 y=195/800 del archivo. */
.nav-logo__destello {
  position: absolute; left: 49.96%; top: 24.4%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; pointer-events: none;
  /* Círculo lleno desenfocado, no un radial-gradient: es como se comporta una
     luz de verdad y mantiene el mismo lenguaje que el halo del hero. */
  background: var(--amarillo); filter: blur(8px);
  transform: scale(.35); opacity: 0;
  transition: transform .42s cubic-bezier(.2, .8, .3, 1), opacity .42s;
}
.nav-logo:hover .nav-logo__destello,
.nav-logo:focus-visible .nav-logo__destello {
  transform: scale(1.35); opacity: .85;
  animation: chispazo .52s steps(1, end);
}

/* Interruptor de la luz del sitio ----------------------------------------
   Duplica lo que hace el cordel del hero. Existe porque el cordel vive
   arriba de todo: sin esto, volver a la luz desde el pie obliga a subir. */
.tema {
  flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: var(--blanco); color: var(--tinta);
  cursor: pointer;
  transition: background .22s, border-color .22s, color .22s, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.tema .ic { width: 19px; height: 19px; }
.tema:hover { background: var(--amarillo); border-color: var(--amarillo); transform: rotate(-18deg); }
.tema:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Mismo parpadeo de dos tiempos que el foco del hero, comprimido. */
@keyframes chispazo {
  0%   { opacity: 0; }
  26%  { opacity: .85; }
  40%  { opacity: .1; }
  56%  { opacity: .85; }
  68%  { opacity: .3; }
  100% { opacity: .85; }
}

.nav-links { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--tinta); font-weight: 600; font-size: .95rem;
  position: relative; padding-block: 6px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--amarillo); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.nav-links a:hover::after, .nav-links a.activo::after { transform: scaleX(1); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta); }
.nav-toggle .ic { width: 28px; height: 28px; }

/* ==========================================================================
   Riel social fijo
   ========================================================================== */

.riel {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 55; display: flex; flex-direction: column; gap: 10px;
}
.riel a {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s, border-color .2s;
}
.riel a .ic { width: 21px; height: 21px; color: var(--azul); transition: color .2s; }
.riel a:hover { transform: translateX(4px) scale(1.06); background: var(--azul); border-color: var(--azul); }
.riel a:hover .ic { color: var(--blanco); }
.riel::after {
  content: ""; width: 2px; height: 46px; background: var(--borde);
  margin: 4px auto 0; border-radius: 2px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 88px);
  background:
    radial-gradient(48% 60% at 100% 0%, rgba(255, 238, 0, .22), transparent 70%),
    linear-gradient(135deg, #eef4ff 0%, #ffffff 46%, #fff8c4 100%);
}
.nav, .pie { padding-inline: var(--gutter); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.08; margin-bottom: 22px; text-wrap: balance; }
.hero .entrada { margin-bottom: 30px; }
.hero-copy { position: relative; }

/* Escena: el círculo suave que sostiene el foco y las tarjetas flotantes */
.hero-escena {
  position: relative; width: min(480px, 100%); aspect-ratio: 1; justify-self: end;
  container-type: inline-size;
}
.hero-circulo {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--azul-tinte) 42%, var(--amarillo-suave) 100%);
  box-shadow: 0 30px 60px -40px rgba(27, 79, 133, .35) inset;
}
.hero-escena .foco { position: absolute; left: 9%; top: 6%; width: 82%; }

/* Ilustración del foco ----------------------------------------------------- */
.foco { position: relative; aspect-ratio: 1 / 1.06; }
.foco__halo {
  position: absolute; left: 14%; top: 12%; width: 70%; aspect-ratio: 1;
  background: var(--amarillo-suave); border-radius: 50%;
  transform: scale(.4); opacity: 0;
}
.foco__disco {
  position: absolute; right: 0; bottom: 6%; width: 35%; aspect-ratio: 1;
  background: var(--azul-tinte-2); border-radius: 50%;
}
.foco__logo {
  position: absolute; left: 50%; top: 50%; width: 62%;
  transform: translate(-50%, -50%);
  filter: grayscale(1) opacity(.45);
}
.foco__rayos { position: absolute; inset: 0; }
.foco__rayo {
  position: absolute; top: 4%; width: 2.1%; height: 9%;
  background: var(--amarillo); border-radius: 99px;
  transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
}
.foco__rayo:nth-child(1) { left: 33%; rotate: -24deg; }
.foco__rayo:nth-child(2) { left: 41%; rotate: -8deg; }
.foco__rayo:nth-child(3) { left: 49%; rotate: 8deg; }
.foco__rayo:nth-child(4) { left: 57%; rotate: 24deg; }

/* Tarjetas flotantes con los canales que ya nombra el copy */
.tarjeta-mini {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blanco); border-radius: 16px; padding: 10px 14px 10px 10px;
  box-shadow: 0 14px 30px -14px rgba(27, 79, 133, .45);
  animation: flotar 6s ease-in-out infinite;
  white-space: nowrap;
}
.tarjeta-mini__tile { width: 36px; height: 36px; border-radius: 11px; background: var(--azul-tinte); display: grid; place-items: center; flex: 0 0 auto; }
.tarjeta-mini__tile .ic { width: 19px; height: 19px; color: var(--azul); }
.tarjeta-mini strong { display: block; font-size: .84rem; font-weight: 800; color: var(--tinta); line-height: 1.25; }
.tarjeta-mini small { display: block; font-size: .7rem; font-weight: 600; color: var(--tinta-suave); line-height: 1.3; }
.tarjeta-mini--1 { left: -8%; top: 16%; animation-delay: 0s; }
.tarjeta-mini--2 { right: -10%; top: 6%; animation-delay: -2s; }
.tarjeta-mini--3 { left: 0; bottom: 10%; animation-delay: -4s; }
@keyframes flotar { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Flecha dibujada a mano: trazo azul, puntas redondas, un poco de temblor */
.garabato { position: absolute; pointer-events: none; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.garabato--hero { left: 46%; top: 18%; width: 200px; height: 110px; z-index: 2; }

/* Chispas: estrellas de cuatro puntas junto a los titulares, en amarillo con filo azul. */
.chispa {
  position: absolute; width: 22px; height: 22px; pointer-events: none;
  color: var(--amarillo); stroke: var(--azul); stroke-width: 1;
  animation: titilar 3s ease-in-out infinite alternate;
}
@keyframes titilar { from { opacity: .55; transform: scale(.82) rotate(0deg); } to { opacity: 1; transform: scale(1.12) rotate(18deg); } }
.chispa--hero-1 { left: 57%; top: 15%; width: 26px; height: 26px; z-index: 2; }
.chispa--hero-2 { right: 8%; bottom: 20%; width: 18px; height: 18px; animation-delay: -1.8s; z-index: 2; }

/* Barra de mercados: rótulo a la izquierda, dos tarjetas a la derecha */
.mercados-barra {
  margin-top: clamp(44px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(39, 108, 176, .16);
  display: grid; grid-template-columns: 240px 1fr; gap: 28px 40px; align-items: center;
}
.mercados-barra__titulo { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; }
.mercados-barra__cierre { grid-column: 2; }

/* Cordel — el apagador del foco -------------------------------------------
   Coordenadas medidas sobre logo.png (1187x800), no estimadas a ojo.
   El eje de la bombilla es x=593, pero esa columna cae sobre el trazo
   vertical izquierdo de la "u" y cruzaría 141px de tinta. A x=586 —7px al
   costado, imperceptible en pantalla— el cable solo toca el casquillo
   (y 430-451) y después baja limpio por el corredor libre que hay entre la
   "p" (termina en 549) y la "u" (arranca en 589), sin tocar la marca.
   Trasladado a .foco, donde el logo ocupa 19%-81% a lo ancho y 30.3%-69.7%
   a lo alto: el cable nace dentro del casquillo (52%) y el tirador queda
   por debajo de la "u", que termina en 62.67%.                            */
.cordel {
  /* Largo: el tirador cae por fuera del halo, que termina en el 78% del alto
     de .foco. Queda entero bajo ese borde, con ~10px de aire entre los dos.
     Arriba de 900px .foco mide 440x466 fijo, así que el valor es exacto;
     abajo lo sigue con la fórmula del media query. */
  --largo: 118px;
  --largo: 24.4cqw;
  /* Estirar el cordel se hace con `transform`, no con `height`: así corre en
     el compositor y no dispara layout en cada cuadro. `--escala` mueve el
     cable y el tirador con el mismo número, que es lo que los mantiene unidos. */
  --escala: 1;
  position: absolute; left: 49.61%; top: 51.98%; z-index: 3;
  width: 44px; height: calc(var(--largo) + 26px);
  transform: translateX(-50%);
  padding: 0; border: 0; background: none;
  /* `grab` es el indicador estándar de "esto se tira"; `pointer` solo diría
     "esto se hace clic", que es menos preciso sobre un cordón. */
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.cordel:active { cursor: grabbing; }

/* Rótulo: solo aparece al acercar el cursor o al llegar por teclado. El botón
   ya lleva su aria-label, así que para un lector de pantalla esto sobra. */
.cordel__nota {
  /* El margen contempla que al hacer hover el cordel se estira y el tirador
     baja ~14px: si no, el rótulo le queda debajo y se le monta encima. */
  position: absolute; left: 50%; top: calc(var(--largo) + 48px);
  transform: translateX(-50%) translateY(5px);
  white-space: nowrap; pointer-events: none;
  font-size: .72rem; font-weight: 600; line-height: 1;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 99px;
  padding: 6px 12px; box-shadow: var(--sombra);
  opacity: 0;
  transition: opacity .22s, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.cordel:hover .cordel__nota,
.cordel:focus-visible .cordel__nota {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.cordel__cable {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: calc(var(--largo) + 6px); margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a8c0dc 0%, #7f9dbf 100%);
  transform-origin: 50% 0; transform: scaleY(var(--escala));
  transition: transform .34s cubic-bezier(.2, .8, .3, 1);
}
.cordel__tirador {
  position: absolute; left: 50%; top: var(--largo);
  width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #dfe9f5 40%, #a8c0dc 100%);
  /* El anillo blanco lo despega del halo, que al prender es amarillo sobre
     amarillo. La elevación usa el token neutro del sitio, igual que .tarjeta-mini. */
  box-shadow: 0 0 0 2.5px var(--blanco), var(--sombra);
  transform: translateY(calc((var(--escala) - 1) * var(--largo)));
  transition: transform .34s cubic-bezier(.2, .8, .3, 1), background .4s;
  /* Balanceo lento: es lo que delata que se puede tocar. */
  animation: colgar 4.6s ease-in-out infinite;
}
.foco.encendido .cordel__tirador {
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--amarillo) 44%, #c9b800 100%);
  box-shadow: 0 0 0 2.5px var(--blanco), var(--sombra-alta);
}

/* Se estira al pasar el cursor y da un tirón seco al accionarlo. */
.cordel:hover, .cordel:focus-visible { --escala: 1.11; }
.cordel.tirando { --escala: 1.3; }
/* Tirón fantasma: cada tantos segundos el cordel se tira solo. No dice que es
   clickeable, muestra el gesto. Se apaga en cuanto el visitante lo usa. */
.cordel.llamando { --escala: 1.16; }
.cordel.tirando .cordel__cable,
.cordel.tirando .cordel__tirador { transition-duration: .11s; }
.cordel:hover .cordel__tirador,
.cordel.tirando .cordel__tirador { animation-play-state: paused; }
.cordel:focus-visible { outline: none; }
.cordel:focus-visible .cordel__tirador {
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--azul);
}

@keyframes colgar { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* Estados del foco --------------------------------------------------------
   Transiciones, no animaciones con `forwards`: el camino tiene que existir
   en los dos sentidos para que el cordel pueda apagar, no solo prender.   */
.foco__logo { transition: filter .45s ease; }
.foco__halo { transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .7s; }
.foco__rayo { transition: transform .38s cubic-bezier(.2, .8, .3, 1), opacity .38s; }

.foco.encendido .foco__logo { filter: grayscale(0) opacity(1); animation: parpadeo .66s steps(1, end); }
.foco.encendido .foco__halo { transform: scale(1); opacity: 1; transition-delay: .30s; }
.foco.encendido .foco__rayo { transform: scaleY(1); opacity: 1; }
.foco.encendido .foco__rayo:nth-child(1) { transition-delay: .30s; }
.foco.encendido .foco__rayo:nth-child(2) { transition-delay: .38s; }
.foco.encendido .foco__rayo:nth-child(3) { transition-delay: .46s; }
.foco.encendido .foco__rayo:nth-child(4) { transition-delay: .54s; }

/* El parpadeo solo existe al prender. Al soltar la clase no hay animación y
   la transición devuelve el foco al estado apagado de corrido.            */
@keyframes parpadeo {
  0%   { filter: grayscale(1) opacity(.45); }
  22%  { filter: grayscale(0) opacity(1); }   /* primer parpadeo */
  34%  { filter: grayscale(1) opacity(.45); }
  52%  { filter: grayscale(0) opacity(1); }   /* segundo parpadeo */
  62%  { filter: grayscale(1) opacity(.6); }
  100% { filter: grayscale(0) opacity(1); }
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.tarjeta {
  background: linear-gradient(168deg, #ffffff 0%, #f9fcff 100%); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 26px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s, background .3s;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: #c9dcf2; }

.tile {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px;
  background: linear-gradient(150deg, #eef5fd 0%, #dfeafa 100%); display: grid; place-items: center;
  transition: background .22s;
}
.tile .ic { width: 27px; height: 27px; color: var(--azul); transition: color .22s; }
.tarjeta:hover .tile { background: var(--azul); }
.tarjeta:hover .tile .ic { color: var(--blanco); }

.rejilla { display: grid; gap: 20px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

.mercados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mercado { display: flex; gap: 18px; align-items: flex-start; }
.mercado__tag { font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--azul); display: block; margin-bottom: 4px; line-height: 1.5; }
.mercado p { color: var(--tinta); font-size: .98rem; }

.variable { display: flex; flex-direction: column; gap: 16px; }
.variable p { color: var(--tinta); font-weight: 600; font-size: .98rem; line-height: 1.5; }
/* Al pasar el cursor la tarjeta se entinta, rotando los cuatro tintes */
.variable:hover, .variable:focus-within { border-color: transparent; }
.variable:nth-child(4n+1):hover, .variable:nth-child(4n+1):focus-within { background: var(--tinte-1); }
.variable:nth-child(4n+2):hover, .variable:nth-child(4n+2):focus-within { background: var(--tinte-2); }
.variable:nth-child(4n+3):hover, .variable:nth-child(4n+3):focus-within { background: var(--tinte-3); }
.variable:nth-child(4n+4):hover, .variable:nth-child(4n+4):focus-within { background: var(--tinte-4); }

/* ==========================================================================
   Canales (LinkedIn / Google Ads)
   ========================================================================== */

.canales { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: start; }
.canal { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.canal__head { display: flex; align-items: center; gap: 18px; }
.canal__head .tile { width: 58px; height: 58px; }
.canal__head .tile .ic { width: 31px; height: 31px; }

.perfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.perfil {
  display: flex; align-items: center; gap: 13px;
  background: var(--azul-tinte-2); border-radius: 12px; padding: 10px 14px;
  transition: background .2s, transform .2s;
}
.perfil:hover { background: var(--azul-tinte); transform: translateX(4px); }
.perfil span { font-size: .92rem; font-weight: 600; color: var(--tinta); line-height: 1.45; }
.perfil .mini { width: 32px; height: 32px; border-radius: 10px; background: var(--blanco); display: grid; place-items: center; flex: 0 0 auto; }
.perfil .mini .ic { width: 18px; height: 18px; color: var(--azul); }

.superficies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.superficie {
  background: var(--azul-tinte-2); border-radius: 14px; padding: 15px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: background .2s, transform .2s;
}
.superficie:hover { background: var(--azul-tinte); transform: translateY(-3px); }
.superficie .ic { width: 24px; height: 24px; color: var(--azul); }
.superficie span { font-size: .78rem; font-weight: 700; color: var(--tinta); line-height: 1.45; }

/* ==========================================================================
   Acordeón de industrias
   ========================================================================== */

.acordeon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

.industria { padding: 0; overflow: hidden; }
.industria[open] { border-color: var(--azul); box-shadow: var(--sombra-alta); }

.industria summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px; cursor: pointer; list-style: none;
}
.industria summary::-webkit-details-marker { display: none; }
.industria summary:hover .tile { background: var(--azul); }
.industria summary:hover .tile .ic { color: var(--blanco); }

.industria__txt { flex: 1 1 auto; min-width: 0; }
.industria__txt strong {
  display: inline; font-size: 1.06rem; font-weight: 800; color: var(--tinta); line-height: 1.36;
  /* El subrayado amarillo se dibuja de izquierda a derecha al pasar el cursor */
  background-image: linear-gradient(var(--amarillo), var(--amarillo));
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 calc(100% - 1px);
  transition: background-size .38s cubic-bezier(.16, 1, .3, 1);
}
.industria summary:hover .industria__txt strong,
.industria summary:focus-visible .industria__txt strong,
.industria[open] .industria__txt strong { background-size: 100% 3px; }
.industria__txt span { display: block; margin-top: 4px; font-size: .86rem; color: var(--tinta-suave); line-height: 1.45; margin-top: 2px; }

.industria .chev { width: 22px; height: 22px; color: var(--azul); flex: 0 0 auto; transition: transform .28s cubic-bezier(.2,.8,.3,1); }
.industria[open] .chev { transform: rotate(180deg); }

.industria__cuerpo { padding: 0 22px 24px; }
.industria__cuerpo hr { border: 0; border-top: 1px solid var(--borde); margin: 0 0 16px; }
.industria__cuerpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.industria__cuerpo li { display: flex; gap: 12px; font-size: .94rem; line-height: 1.55; }
.industria__cuerpo li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--azul); flex: 0 0 auto; margin-top: .55em;
}

/* ==========================================================================
   Metodología: ruta numerada. Cinco etapas en zigzag sobre una línea punteada;
   la línea se traza al entrar y cada número aparece con su tarjeta.
   ========================================================================== */

.ruta {
  list-style: none; margin: 0; padding: 12px 0;
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.ruta::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 0;
  border-top: 2px dashed var(--azul); opacity: .38;
  transform: scaleX(1); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .15s;
}
.ruta:has(.etapa.oculta)::before { transform: scaleX(0); }

.etapa { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; row-gap: 18px; min-width: 0; }
.etapa__num {
  grid-row: 2; position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarillo); color: var(--tinta);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1;
  box-shadow: 0 0 0 4px var(--blanco), 0 0 0 6px var(--azul), 0 10px 22px -10px rgba(27, 79, 133, .5);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .25s;
}
.etapa.oculta .etapa__num { transform: scale(.55); }
.etapa:hover .etapa__num { transform: scale(1.08); }

.etapa__tarjeta {
  position: relative; width: 100%; padding: 22px 20px 24px; border-radius: 22px; border: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.etapa--arriba .etapa__tarjeta { grid-row: 1; align-self: end; }
.etapa--abajo  .etapa__tarjeta { grid-row: 3; align-self: start; }
.etapa:nth-child(5n+1) .etapa__tarjeta { background: var(--tinte-1); }
.etapa:nth-child(5n+2) .etapa__tarjeta { background: var(--tinte-2); }
.etapa:nth-child(5n+3) .etapa__tarjeta { background: var(--tinte-3); }
.etapa:nth-child(5n+4) .etapa__tarjeta { background: var(--tinte-4); }
.etapa:nth-child(5n+5) .etapa__tarjeta { background: var(--tinte-1); }
/* La cola de la tarjeta apunta a su número: la relación se lee sin flechas */
.etapa__tarjeta::after {
  content: ""; position: absolute; left: 50%; width: 18px; height: 18px;
  background: inherit; border-radius: 4px; transform: translateX(-50%) rotate(45deg);
}
.etapa--arriba .etapa__tarjeta::after { bottom: -8px; }
.etapa--abajo  .etapa__tarjeta::after { top: -8px; }
.etapa__tarjeta .tile { width: 48px; height: 48px; }
.etapa__tarjeta .tile .ic { width: 24px; height: 24px; }
.etapa__tarjeta h3 { font-size: 1.05rem; line-height: 1.3; color: var(--tinta); margin: 0; }
.etapa__tarjeta p { font-size: .92rem; line-height: 1.6; color: var(--tinta-suave); }

/* ==========================================================================
   Video
   ========================================================================== */

.video-principal { margin: 0 0 clamp(40px, 5vw, 64px); position: relative; }
.video-principal::before {
  content: ""; position: absolute; inset: -18px -18px auto -18px; height: 60%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 238, 0, .22), transparent 70%);
  filter: blur(18px); pointer-events: none;
}

.reproductor { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); background: #000; }
.reproductor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reproductor--principal { aspect-ratio: 16 / 9; border: 3px solid rgba(255, 238, 0, .38); }
.reproductor--reel { aspect-ratio: 9 / 16; border: 3px solid rgba(255, 238, 0, .3); border-radius: 26px; }

.reproductor__play {
  position: absolute; inset: 0; margin: auto;
  width: 96px; height: 96px; border-radius: 50%; border: 0;
  background: var(--amarillo); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .6);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s;
}
.reproductor__play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--amarillo); animation: pulso 2.6s ease-out infinite;
}
.reproductor__play .ic { width: 38px; height: 38px; margin-left: 4px; }
.reproductor__play:hover { transform: scale(1.09); }
.reproductor.reproduciendo .reproductor__play { opacity: 0; pointer-events: none; }
.reproductor--reel .reproductor__play { width: 72px; height: 72px; }
.reproductor--reel .reproductor__play .ic { width: 29px; height: 29px; }
.reproductor__pie {
  position: absolute; left: 22px; bottom: 18px; font-size: .84rem; font-weight: 700; line-height: 1.45;
  color: #fff; background: rgba(0, 0, 0, .42); padding: 7px 14px; border-radius: 99px;
  backdrop-filter: blur(6px);
}

/* Bloque del reel: formato vertical con su propio contexto, no pegado al otro video */
.reel-bloque {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 52px);
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px; padding: clamp(24px, 3vw, 34px);
}
.reel-bloque__media { margin: 0; }
.reel-bloque__copy h3 { margin: 4px 0 12px; }
.reel-bloque__copy p { color: var(--sobre-azul); font-size: 1rem; line-height: 1.65; max-width: 56ch; }
.reel-bloque__redes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.chip-red {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.4;
  padding: 11px 18px; border-radius: 99px;
  transition: background .2s, transform .2s, border-color .2s;
}
.chip-red .ic { width: 19px; height: 19px; }
.chip-red .flecha { width: 15px; height: 15px; opacity: .75; transition: transform .2s; }
.chip-red:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); transform: translateY(-3px); }
.chip-red:hover .flecha { transform: translate(3px, -3px); }

/* ==========================================================================
   Fundador
   ========================================================================== */

.fundador { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.retrato { position: relative; }
.retrato__marco { position: relative; display: block; }
.retrato__acento { position: absolute; left: 0; top: 34px; right: 36px; bottom: -34px; background: var(--amarillo-suave); border-radius: 24px; }
.retrato img { position: relative; border-radius: 24px; box-shadow: var(--sombra-alta); margin-left: 36px;
  width: calc(100% - 36px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 26%; }
.retrato figcaption { margin: 56px 0 0 36px; }
.retrato strong { display: block; font-size: 1.28rem; font-weight: 800; color: var(--tinta); line-height: 1.35; }
.retrato span { font-size: .95rem; }

.preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.preguntas li { display: flex; align-items: center; gap: 14px; background: var(--azul-tinte-2); border-radius: 14px; padding: 13px 18px; font-size: 1rem; font-weight: 600; color: var(--tinta); transition: background .2s, transform .2s; }
.preguntas li:hover { background: var(--azul-tinte); transform: translateX(5px); }
.preguntas .chk { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--azul); display: grid; place-items: center; }
.preguntas .chk .ic { width: 17px; height: 17px; color: #fff; }

.cita { display: flex; gap: 20px; background: var(--amarillo-suave); border-radius: var(--radio); padding: 26px; }
.cita::before { content: ""; width: 5px; border-radius: 3px; background: var(--amarillo); flex: 0 0 auto; }
.cita p { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 800; line-height: 1.35; color: var(--tinta); letter-spacing: -.01em; }

/* ==========================================================================
   Oficina
   ========================================================================== */

.oficina { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }

.oficina__mapa {
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  background: var(--azul-tinte);
  min-height: 100%;
}
.oficina__mapa iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: saturate(.92); }

.oficina__datos { display: grid; gap: 16px; }
.dato { display: flex; gap: 18px; align-items: flex-start; }
.dato h3 { font-size: 1.08rem; margin-bottom: 6px; }
.dato p { font-size: .95rem; line-height: 1.6; }
.dato__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; font-weight: 700; font-size: .95rem;
}
.dato__link .ic { width: 15px; height: 15px; transition: transform .2s; }
.dato__link:hover { text-decoration: underline; }
.dato__link:hover .ic { transform: translate(3px, -3px); }

/* ==========================================================================
   Cierre + formulario
   ========================================================================== */

.cierre { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start; }
.cierre__copy { position: sticky; top: calc(var(--header-h) + 28px); }
.cierre h2 { font-family: var(--fuente-marca); font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.cierre .claim { font-family: var(--fuente-marca); font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; color: var(--amarillo); line-height: 1.3; letter-spacing: -.015em; }

.wa-directo { display: inline-flex; align-items: center; gap: 14px; background: rgba(9, 38, 70, .40); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 16px 24px; margin-top: 8px; transition: background .2s, transform .2s; }
.wa-directo:hover { background: rgba(9, 38, 70, .55); transform: translateY(-3px); }
.wa-directo .ic { width: 28px; height: 28px; color: var(--amarillo); }
.wa-directo small { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .16em; color: #cfe0f2; }
.wa-directo strong { display: block; font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1.3; }

.cierre-vias { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.cierre-vias a {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--sobre-azul); font-size: .98rem; font-weight: 600; line-height: 1.5;
  transition: color .2s, transform .2s;
}
.cierre-vias .ic { width: 20px; height: 20px; color: var(--amarillo); flex: 0 0 auto; }
.cierre-vias a:hover { color: #fff; transform: translateX(4px); }

.formulario { background: linear-gradient(170deg, #ffffff 0%, #f8fbff 100%); border-radius: 24px; padding: 36px; box-shadow: var(--sombra-alta); color: var(--tinta-suave); }
.formulario h3 { margin-bottom: 6px; }
.formulario > p { font-size: .95rem; margin-bottom: 18px; }
.campos { display: grid; gap: 18px; }

.campo { display: grid; gap: 7px; }
.campo label { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--tinta); line-height: 1.5; }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente); font-size: .95rem; color: var(--tinta);
  background: var(--azul-tinte-2); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px 16px; width: 100%;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; background: var(--blanco); border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(39, 108, 176, .14);
}
.campo input::placeholder, .campo textarea::placeholder { color: #9aa4ae; }

.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: .82rem; line-height: 1.5; }
.consentimiento input { width: 20px; height: 20px; accent-color: var(--azul); flex: 0 0 auto; margin-top: 2px; }

.form-estado { font-size: .88rem; font-weight: 700; min-height: 1.4em; }
.form-estado[data-tipo="error"] { color: #b42318; }
.form-estado[data-tipo="ok"] { color: #1b7f4c; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
  position: relative; overflow: hidden;
  padding-block: 64px 104px;
  color: #c9dbee;
  background-color: #14355a;
  background-image:
    linear-gradient(var(--amarillo), var(--amarillo)),
    radial-gradient(52% 60% at 96% 0%, rgba(255, 238, 0, .10), transparent 58%),
    radial-gradient(64% 72% at 0% 100%, rgba(0, 0, 0, .34), transparent 62%),
    linear-gradient(168deg, #1a4272 0%, #14355a 52%, #0d2340 100%);
  background-size: 100% 4px, auto, auto, auto;
  background-position: top left, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.pie::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 26px 26px; opacity: .09;
  mask-image: radial-gradient(90% 110% at 100% 0%, #000 18%, transparent 78%);
}
.pie::after {
  content: ""; position: absolute; right: -70px; bottom: -56px;
  width: 420px; height: 283px; pointer-events: none; opacity: .06;
  background: url("../img/logo-blanco.png?v=20260919") center / contain no-repeat;
}
.pie .contenedor { position: relative; z-index: 1; }

.pie-top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 56px; align-items: start; }

.pie h4 {
  font-size: .75rem; font-weight: 800; letter-spacing: .18em; line-height: 1.5;
  color: var(--amarillo); margin: 0 0 18px; text-transform: uppercase;
}

.pie-brand img { width: 132px; margin-bottom: 20px; }
.pie-brand p { font-size: .95rem; line-height: 1.65; max-width: 42ch; }
.pie-claim {
  font-family: var(--fuente-marca); font-size: 1.15rem; font-weight: 700;
  color: var(--amarillo); margin-top: 14px; line-height: 1.4;
}

.pie-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pie-nav a {
  color: #dfeaf6; font-size: .98rem; font-weight: 600; line-height: 1.5;
  display: inline-block; position: relative; padding-bottom: 3px;
  transition: color .2s;
}
.pie-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--amarillo); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.pie-nav a:hover { color: #ffffff; }
.pie-nav a:hover::after { transform: scaleX(1); }

.pie .wa-directo { margin-top: 0; background: rgba(255, 255, 255, .09); }
.pie .wa-directo:hover { background: rgba(255, 255, 255, .16); }
.pie-social { display: flex; gap: 12px; margin-top: 22px; }
.pie-social a {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  transition: background .22s, border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1);
}
.pie-social .ic { width: 19px; height: 19px; color: #fff; transition: color .22s; }
.pie-social a:hover { background: var(--amarillo); border-color: var(--amarillo); transform: translateY(-3px); }
.pie-social a:hover .ic { color: var(--tinta); }

.pie-bajo {
  border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 44px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem;
}
.pie-bajo a { color: var(--amarillo); font-weight: 700; }
.pie-bajo a:hover { text-decoration: underline; }

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wa); color: #fff; font-weight: 800; font-size: 1rem;
  padding: 15px 22px; border-radius: 99px;
  box-shadow: 0 12px 32px -6px rgba(0,0,0,.34);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.flotante .ic { width: 28px; height: 28px; }
.flotante:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 40px -8px rgba(0,0,0,.42); }
.flotante::after {
  content: ""; position: absolute; inset: 0; border-radius: 99px;
  border: 2px solid var(--wa); animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }

/* ==========================================================================
   Movimiento ligado al scroll
   ========================================================================== */

/* Barra de progreso de lectura, al pie de la cabecera fija */
.progreso {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: transparent; pointer-events: none; z-index: 2;
}
.progreso span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--amarillo), #ffd400);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
  box-shadow: 0 0 12px rgba(255, 238, 0, .7);
}

/* El marcador amarillo se dibuja cuando el titular entra en pantalla */
.marcador { transition: background-size .82s cubic-bezier(.16, 1, .3, 1) .22s; }
.revela.oculta .marcador,
.oculta .marcador { background-size: 0% .36em; }

/* Las manchas de fondo se mueven más lento que la página */
.mancha { will-change: transform; }

/* ==========================================================================
   Revelado al hacer scroll
   ========================================================================== */

/* Visible por defecto: si el JS falla o no corre, el contenido se ve igual.
   El script agrega .oculta y la quita al entrar en pantalla.
   Recorrido corto y salida lenta: se nota poco y no empuja el ojo. */
.revela {
  transition:
    opacity .78s cubic-bezier(.16, 1, .3, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.revela.oculta { opacity: 0; transform: translate3d(0, 14px, 0); }
/* Las tarjetas además entran con un respiro de escala, casi imperceptible. */
.tarjeta.revela.oculta, .revela .tarjeta { will-change: auto; }
.tarjeta.revela.oculta { transform: translate3d(0, 16px, 0) scale(.988); }
/* Medios: entrada con escala, se siente más presente que un desplazamiento */
.video-principal.revela.oculta,
.oficina__mapa.revela.oculta,
.retrato.revela.oculta,
.reel-bloque.revela.oculta { transform: translate3d(0, 20px, 0) scale(.972); }
.video-principal.revela,
.oficina__mapa.revela,
.retrato.revela,
.reel-bloque.revela { transition-duration: .9s; }


/* ==========================================================================
   Luz: sistema de movimiento
   Una sola idea de material: el puntero del visitante es luz. Lo que responde
   al visitante se ilumina —el campo de puntos del hero, el borde de las
   tarjetas, el barrido de los botones, el hilo de la metodología—. Todo lo
   que depende del scroll vive en el mismo bucle de rAF de main.js.
   ========================================================================== */

/* Campo de puntos del hero (canvas). Va detrás de todo; el contenedor apila
   por encima. */
.hero { position: relative; }
.hero__campo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.hero .contenedor { position: relative; z-index: 1; }

/* Titulares: cada palabra sube desde detrás de una máscara ---------------- */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0 .12em; margin-bottom: -.12em; }
.palabra__in { display: inline-block; transform: translateY(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--w, 0) * 38ms); will-change: transform; }
.oculta .palabra__in { transform: translateY(110%); }
/* El marcador amarillo va sobre la palabra ya visible: se hereda el fondo del span padre */
.marcador .palabra { padding-inline: 0; }


/* Tarjetas: borde de luz que sigue al puntero -------------------------------- */
.tarjeta { position: relative; --mx: 50%; --my: 50%; }
@media (hover: hover) {
  .tarjeta::before, .tarjeta::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .35s;
  }
  .tarjeta::before {
    padding: 1.5px; z-index: 2;
    background: radial-gradient(220px circle at var(--mx) var(--my), var(--amarillo), rgba(39, 108, 176, .55) 35%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .tarjeta::after {
    z-index: 0;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 238, 0, .10), transparent 70%);
  }
  .tarjeta:hover::before, .tarjeta:hover::after { opacity: 1; }
  .tarjeta > * { position: relative; z-index: 1; }
}

/* Botones: barrido de luz al pasar ------------------------------------------ */
.btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 45%, rgba(255, 238, 0, .55) 50%, rgba(255, 255, 255, .28) 55%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none; z-index: -1;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover::after { transform: translateX(260%) skewX(-18deg); }
.btn--marca::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); }
.btn .ic { transform: translate(var(--ix, 0px), var(--iy, 0px)); transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.btn.iman, .btn.iman .ic { transition-duration: .12s; }

/* Secciones oscuras: se deslizan por encima de la anterior ------------------ */
.seccion:has(+ .seccion--oscura), .seccion:has(+ .seccion--azul) { padding-bottom: calc(clamp(48px, 7vw, 92px) + 34px); }
.seccion--oscura, .seccion--azul { border-radius: 34px 34px 0 0; margin-top: -34px; position: relative; z-index: 1; }
.seccion--oscura {
  --entra: 1;
  transform: translateY(calc((1 - var(--entra)) * 28px)) scale(calc(.985 + var(--entra) * .015));
  transform-origin: top center;
  will-change: transform;
}

/* Acordeón: las viñetas entran en cascada ----------------------------------- */
.industria__cuerpo li:nth-child(1) { --i: 0; } .industria__cuerpo li:nth-child(2) { --i: 1; }
.industria__cuerpo li:nth-child(3) { --i: 2; } .industria__cuerpo li:nth-child(4) { --i: 3; }
.industria__cuerpo li:nth-child(5) { --i: 4; } .industria__cuerpo li:nth-child(6) { --i: 5; }
.industria__cuerpo li:nth-child(7) { --i: 6; } .industria__cuerpo li:nth-child(n+8) { --i: 7; }
.industria[open] .industria__cuerpo li { animation: liEntra .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes liEntra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.industria.animando .industria__cuerpo { overflow: hidden; box-sizing: content-box; }

/* Retrato del fundador: inclinación con el puntero -------------------------- */
.retrato { perspective: 900px; }
.retrato__marco {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.retrato__marco.inclinando { transition-duration: .12s; }
.retrato__marco img { transform: translateZ(var(--tz, 0px)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.retrato__marco.inclinando img { transition-duration: .12s; }
.retrato__acento { transform: translate(var(--ax, 0px), var(--ay, 0px)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.retrato__marco.inclinando .retrato__acento { transition-duration: .12s; }

/* Luz que acompaña al puntero ------------------------------------------------ */

/* ==========================================================================
   Adaptación
   ========================================================================== */

@media (max-width: 1180px) {
  .riel { display: none; }
  .hero-grid { grid-template-columns: 1fr 400px; gap: 32px; }
  .hero-escena { width: min(400px, 100%); }
  .garabato--hero { display: none; }
  .tarjeta-mini--2 { right: -4%; }
}

@media (max-width: 900px) {
  :root { --header-h: 120px; }
  .hero { padding-top: clamp(24px, 4vw, 40px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-escena { width: min(400px, 100%); justify-self: center; margin-top: 8px; }
  .tarjeta-mini--1 { left: -2%; }
  .tarjeta-mini--2 { right: -2%; }
  .chispa--hero-1 { display: none; }
  .mercados-barra { grid-template-columns: 1fr; gap: 20px; }
  .mercados-barra__cierre { grid-column: 1; }
  .canales, .acordeon, .mercados, .cierre, .fundador, .oficina, .reel-bloque { grid-template-columns: 1fr; }
  .reel-bloque__media { max-width: 280px; margin-inline: auto; }
  .fundador, .cierre { gap: 40px; }
  .retrato { max-width: 420px; }

  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }

  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.3,1), opacity .25s, visibility .25s;
  }
  .nav-links.abierto { transform: none; opacity: 1; visibility: visible; }
  .nav-links li { border-top: 1px solid var(--borde); }
  .nav-links a { display: block; padding: 16px var(--gutter); }
  .nav-links { left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); }
  .nav-links a::after { display: none; }
  .nav .contenedor { position: relative; }
  .nav .btn { display: none; }
}

@media (max-width: 900px) {
  /* Ruta vertical: la línea baja por la izquierda y las tarjetas cuelgan a la derecha */
  .ruta { grid-template-columns: 1fr; gap: 16px; padding: 4px 0; }
  .ruta::before { left: 26px; right: auto; top: 0; bottom: 0; height: auto; border-top: 0; border-left: 2px dashed var(--azul); transform-origin: center top; }
  .ruta:has(.etapa.oculta)::before { transform: scaleY(0); }
  .etapa { grid-template-columns: 54px 1fr; grid-template-rows: auto; column-gap: 16px; row-gap: 0; align-items: start; justify-items: stretch; }
  .etapa__num { grid-row: 1; grid-column: 1; align-self: start; margin-top: 12px; }
  .etapa--arriba .etapa__tarjeta, .etapa--abajo .etapa__tarjeta { grid-row: 1; grid-column: 2; align-self: start; }
  .etapa--arriba .etapa__tarjeta::after, .etapa--abajo .etapa__tarjeta::after { left: -8px; top: 26px; bottom: auto; transform: rotate(45deg); }
  .pie { padding-block: 48px 92px; }
  .pie-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .pie-brand { grid-column: 1 / -1; }
  .pie::after { width: 300px; height: 202px; right: -80px; bottom: -70px; }
  .pie-bajo { margin-top: 30px; padding-top: 20px; }
  .oficina__mapa { min-height: 320px; }
  .oficina__mapa iframe { min-height: 320px; }
  .cierre__copy { position: static; }
}

@media (max-width: 640px) {
  /* Los CTA ocupan el ancho: el texto largo deja de partirse feo */
  .btn { width: 100%; justify-content: center; text-align: center; }
  .btn--sm, .nav .btn { width: auto; }

  /* Las 7 variables aprovechan el ancho: icono al lado, no encima */
  .variable { flex-direction: row; align-items: center; gap: 18px; }
  .variable p { font-size: 1rem; }
  .rejilla--2, .rejilla--4, .superficies { grid-template-columns: 1fr; }
  .superficies { grid-template-columns: repeat(3, 1fr); }

  .flotante span { display: none; }
  .flotante { padding: 16px; }
  .canal { padding: 24px; }
  .tarjeta-mini { transform: scale(.88); transform-origin: left center; }
  .tarjeta-mini--3 { bottom: 4%; }
}

/* ==========================================================================
   Cambio de tema — transición de superficies
   Solo las superficies grandes. Una transición sobre `*` obligaría al
   navegador a evaluar cada nodo en cada repintado y se nota al hacer scroll.
   Va sin condicionar al tema: si estuviera dentro del bloque oscuro, al
   quitar el atributo la regla dejaría de aplicar y la vuelta a claro sería
   un corte seco.
   ========================================================================== */

body,
.seccion,
.formulario,
.pie { transition: background-color .5s ease, color .5s ease; }

/* .nav ya traía transición propia: se repite entera para no perderla. */
.nav { transition: box-shadow .25s, background-color .5s ease, border-color .5s ease; }

/* ==========================================================================
   Tema oscuro
   Se activa con html[data-tema="oscuro"]. La mayor parte se resuelve
   redefiniendo los tokens de :root; abajo quedan solo los casos que el
   token no alcanza: fondos en capas, superficies escritas en literal y
   texto que en claro va sobre amarillo.

   Contrastes verificados contra WCAG AA:
   texto 10.6-14.3:1 · texto suave 7.9-10.6:1 · amarillo 9.8-13.1:1 ·
   azul claro 5.9-8.0:1.
   ========================================================================== */

html[data-tema="oscuro"] {
  /* Superficies del tema */
  --fondo-base: #0d2340;
  --fondo-tinte: #112c4d;
  --superficie: #16395f;
  --superficie-2: #1b4470;
  --borde-oscuro: #2a5580;
  --texto: #eef4fb;
  --texto-suave: #c3d6ec;
  --azul-claro: #8cbdec;

  /* Reemplazo de los tokens de :root. El amarillo NO se toca —es
     institucional y da 9.8-13.1:1— y --tinta tampoco: sigue siendo la letra
     que va ENCIMA del amarillo, no un color de texto sobre el fondo.
     --azul sí se reemplaza: #276cb0 sobre el fondo base da 2.9:1. */
  --azul: var(--azul-claro);
  --azul-tinte: var(--superficie-2);
  --azul-tinte-2: var(--superficie);
  --borde: var(--borde-oscuro);
  --tinta-suave: var(--texto-suave);
  --sobre-azul: var(--texto-suave);

  /* Las sombras en rgba(31,20,15,…) desaparecen sobre oscuro */
  --sombra: 0 3px 10px -4px rgba(0, 0, 0, .5);
  --sombra-alta: 0 6px 14px -4px rgba(0, 0, 0, .62);

  --tinte-1: #16395f;
  --tinte-2: #183a66;
  --tinte-3: #1b4470;
  --tinte-4: #173d64;
}

html[data-tema="oscuro"] body { background: var(--fondo-base); }

/* Texto que en claro usa --tinta ------------------------------------------
   --tinta no se puede reemplazar por token porque también es la letra de los
   botones amarillos, así que los usos como color de texto van uno por uno. */
html[data-tema="oscuro"] h1,
html[data-tema="oscuro"] h2,
html[data-tema="oscuro"] h3,
html[data-tema="oscuro"] .nav-links a,
html[data-tema="oscuro"] .nav-toggle,
html[data-tema="oscuro"] .cordel__nota,
html[data-tema="oscuro"] .mercado p,
html[data-tema="oscuro"] .variable p,
html[data-tema="oscuro"] .industria__txt strong,
html[data-tema="oscuro"] .perfil span,
html[data-tema="oscuro"] .superficie span,
html[data-tema="oscuro"] .preguntas li,
html[data-tema="oscuro"] .retrato strong,
html[data-tema="oscuro"] .campo label,
html[data-tema="oscuro"] .campo input,
html[data-tema="oscuro"] .campo select,
html[data-tema="oscuro"] .campo textarea { color: var(--texto); }

/* El grupo de arriba pisa a `.etapa__tarjeta h3` por especificidad: se devuelve. */
html[data-tema="oscuro"] .etapa__tarjeta h3,
html[data-tema="oscuro"] .tarjeta-mini strong { color: var(--texto); }

/* Secciones ----------------------------------------------------------------
   Mismos tres gestos que en claro —radial cálido, radial frío y el degradado
   de base— reescritos en clave oscura. */
html[data-tema="oscuro"] .seccion {
  background-color: var(--fondo-base);
  background-image:
    radial-gradient(64% 54% at 92% -8%, rgba(255, 238, 0, .10), transparent 62%),
    radial-gradient(58% 52% at 2% 104%, rgba(140, 189, 236, .12), transparent 66%),
    linear-gradient(178deg, #0d2340 0%, #112c4d 100%);
}
html[data-tema="oscuro"] .seccion--tinte {
  background-color: var(--fondo-tinte);
  background-image:
    radial-gradient(56% 48% at 4% -6%, rgba(255, 238, 0, .10), transparent 58%),
    radial-gradient(66% 60% at 98% 96%, rgba(140, 189, 236, .12), transparent 64%),
    linear-gradient(166deg, #112c4d 0%, #0d2340 55%, #112c4d 100%);
}
html[data-tema="oscuro"] .seccion--oscura {
  background-color: var(--fondo-tinte);
  background-image:
    radial-gradient(54% 46% at 90% 2%, rgba(255, 238, 0, .10), transparent 58%),
    radial-gradient(72% 62% at 2% 98%, rgba(0, 0, 0, .34), transparent 64%),
    linear-gradient(158deg, #16395f 0%, #112c4d 48%, #0d2340 100%);
}
html[data-tema="oscuro"] .seccion--azul {
  background-color: var(--superficie);
  background-image:
    radial-gradient(52% 44% at 94% 4%, rgba(140, 189, 236, .12), transparent 58%),
    radial-gradient(70% 62% at 0% 100%, rgba(0, 0, 0, .30), transparent 64%),
    linear-gradient(160deg, #1b4470 0%, #16395f 52%, #112c4d 100%);
}

/* La rejilla de puntos y el ruido se conservan; solo bajan de intensidad y
   toman el azul claro como currentColor. Las máscaras quedan intactas. */
html[data-tema="oscuro"] .seccion::before { color: var(--azul-claro); opacity: .10; }
html[data-tema="oscuro"] .hero {
  background:
    radial-gradient(48% 60% at 100% 0%, rgba(255, 238, 0, .10), transparent 70%),
    linear-gradient(135deg, #112c4d 0%, #10294a 46%, #16395f 100%);
}
html[data-tema="oscuro"] .hero-circulo { background: radial-gradient(circle at 30% 30%, #1b4470 0%, #16395f 45%, #112c4d 100%); }
html[data-tema="oscuro"] .tarjeta-mini { background: var(--superficie-2); }
html[data-tema="oscuro"] .tarjeta-mini__tile { background: var(--superficie); }
html[data-tema="oscuro"] .tarjeta-mini small { color: var(--texto-suave); }
html[data-tema="oscuro"] .garabato { stroke: var(--azul-claro); }
html[data-tema="oscuro"] .mercados-barra { border-top-color: rgba(140, 189, 236, .22); }

/* Manchas de fondo: en claro son tintes; acá pasan a superficie para que no
   queden como dos puntos encendidos sobre el fondo base. */
html[data-tema="oscuro"] .mancha--am { background: var(--superficie-2); }
html[data-tema="oscuro"] .mancha--az { background: var(--superficie); }

/* Botones ------------------------------------------------------------------
   En claro el botón principal es tinta con letra blanca. En oscuro pasa al
   amarillo institucional con letra --tinta: 15:1. */
html[data-tema="oscuro"] .btn {
  background: var(--amarillo); color: var(--tinta);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
}
html[data-tema="oscuro"] .btn:hover {
  background: var(--amarillo); filter: saturate(1.1);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .65);
}
html[data-tema="oscuro"] .btn--marca,
html[data-tema="oscuro"] .btn--marca:hover { background: var(--amarillo); color: var(--tinta); }

/* Cabecera -----------------------------------------------------------------
   Mismo vidrio esmerilado, con el fondo base al 88%. */
html[data-tema="oscuro"] .nav { background: rgba(13, 35, 64, .88); }
html[data-tema="oscuro"] .cabecera.encogida .nav { background: rgba(13, 35, 64, .82); }

/* Luz, en oscuro: el cursor pasa a `screen`
   (multiply desaparece sobre fondo oscuro) y el brillo interior de las
   tarjetas baja para que no lave la superficie. */
html[data-tema="oscuro"] .tarjeta::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 238, 0, .07), transparent 70%); }
html[data-tema="oscuro"] .cabecera.encogida .nav { box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .5); }

/* Logos: versión en negativo. El de la cabecera va siempre a la vista; el del
   hero conserva su estado "apagado", que acá es blanco al 55% y no gris. */
html[data-tema="oscuro"] .nav-logo img { content: url("../img/logo-blanco.png?v=20260919"); }
html[data-tema="oscuro"] .foco__logo {
  content: url("../img/logo-blanco.png?v=20260919");
  filter: opacity(.55);
}
html[data-tema="oscuro"] .foco.encendido .foco__logo { filter: opacity(1); }

/* Riel social --------------------------------------------------------------
   Al pasar el cursor la pastilla se llena de azul claro, así que el icono
   cambia a tinta: blanco sobre #8cbdec daría 1.9:1. */
html[data-tema="oscuro"] .riel a { background: var(--superficie); }
html[data-tema="oscuro"] .riel a:hover .ic { color: var(--tinta); }

/* Hero: foco y cordel ------------------------------------------------------ */
html[data-tema="oscuro"] .foco__disco { background: var(--superficie); }
html[data-tema="oscuro"] .cordel__nota { background: var(--superficie); }
html[data-tema="oscuro"] .cordel__cable {
  background: linear-gradient(180deg, #8cbdec 0%, #2a5580 100%);
}
html[data-tema="oscuro"] .cordel__tirador {
  background: radial-gradient(circle at 34% 30%, #eef4fb 0%, #c3d6ec 40%, #8cbdec 100%);
  box-shadow: 0 0 0 2.5px var(--fondo-base), var(--sombra);
}
html[data-tema="oscuro"] .foco.encendido .cordel__tirador {
  box-shadow: 0 0 0 2.5px var(--fondo-base), var(--sombra-alta);
}
html[data-tema="oscuro"] .cordel:focus-visible .cordel__tirador {
  box-shadow: 0 0 0 3px var(--fondo-base), 0 0 0 6px var(--amarillo);
}

/* Tarjetas y cuadros de icono ---------------------------------------------- */
html[data-tema="oscuro"] .tarjeta {
  background: linear-gradient(168deg, #16395f 0%, #112c4d 100%);
}
html[data-tema="oscuro"] .tarjeta:hover { border-color: var(--azul-claro); }
html[data-tema="oscuro"] .tile {
  background: linear-gradient(150deg, #1b4470 0%, #16395f 100%);
}
html[data-tema="oscuro"] .tarjeta:hover .tile .ic,
html[data-tema="oscuro"] .industria summary:hover .tile .ic { color: var(--tinta); }

/* Canales ------------------------------------------------------------------ */
html[data-tema="oscuro"] .perfil .mini { background: var(--superficie-2); }

/* Acordeón de industrias --------------------------------------------------- */
html[data-tema="oscuro"] .industria { background: linear-gradient(168deg, #16395f 0%, #112c4d 100%); }

/* Metodología -------------------------------------------------------------- */
/* El hilo conector necesita el borde, no la superficie: con --superficie-2
   sobre el fondo base la línea de 2px prácticamente desaparece. */

/* Video y reel ------------------------------------------------------------- */
html[data-tema="oscuro"] .reel-bloque {
  background: var(--superficie); border-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .chip-red {
  background: var(--superficie-2); border-color: var(--borde-oscuro);
}

/* Fundador ----------------------------------------------------------------- */
html[data-tema="oscuro"] .preguntas .chk .ic { color: var(--tinta); }

/* Oficina ------------------------------------------------------------------
   El mapa viene de un iframe de Google: no acepta estilos, así que se invierte
   desde afuera. La rotación de tono devuelve los azules del agua y las vías. */
html[data-tema="oscuro"] .oficina__mapa iframe {
  filter: invert(.91) hue-rotate(180deg) saturate(.72) brightness(.95);
}

/* Cierre y formulario ------------------------------------------------------ */
html[data-tema="oscuro"] .wa-directo {
  background: var(--superficie); border-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .wa-directo:hover { background: var(--superficie-2); }
html[data-tema="oscuro"] .formulario {
  background: linear-gradient(170deg, #16395f 0%, #112c4d 100%);
}
html[data-tema="oscuro"] .campo input:focus,
html[data-tema="oscuro"] .campo select:focus,
html[data-tema="oscuro"] .campo textarea:focus {
  background: var(--superficie-2); border-color: var(--amarillo);
  box-shadow: 0 0 0 4px rgba(255, 238, 0, .22);
}
html[data-tema="oscuro"] .campo input::placeholder,
html[data-tema="oscuro"] .campo textarea::placeholder {
  color: var(--texto-suave); opacity: .68;
}

/* Pie ----------------------------------------------------------------------
   En claro ya es azul oscuro. Acá baja un escalón más para seguir separándose
   del resto de la página, y conserva la línea amarilla de 4px de arriba. */
html[data-tema="oscuro"] .pie {
  color: var(--texto-suave);
  background-color: #081a30;
  background-image:
    linear-gradient(var(--amarillo), var(--amarillo)),
    radial-gradient(52% 60% at 96% 0%, rgba(255, 238, 0, .08), transparent 58%),
    radial-gradient(64% 72% at 0% 100%, rgba(0, 0, 0, .40), transparent 62%),
    linear-gradient(168deg, #0d2340 0%, #081a30 52%, #081a30 100%);
  background-size: 100% 4px, auto, auto, auto;
  background-position: top left, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
html[data-tema="oscuro"] .pie::before { opacity: .07; }
html[data-tema="oscuro"] .pie::after { opacity: .08; }
html[data-tema="oscuro"] .pie-nav a { color: var(--texto-suave); }

/* Botón flotante de WhatsApp ----------------------------------------------- */
html[data-tema="oscuro"] .flotante { box-shadow: 0 12px 32px -6px rgba(0, 0, 0, .55); }
html[data-tema="oscuro"] .flotante:hover { box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .65); }

/* Correcciones del tema oscuro medidas en navegador ----------------------- */

/* El marcador pinta una franja amarilla DETRAS de las palabras. En claro el
   texto marcado es oscuro y se lee sobre los dos fondos; en oscuro el texto
   pasa a #eef4fb y sobre el amarillo cae a 1.09:1. Acá la franja cubre la
   caja entera y el texto vuelve a tinta, que sobre amarillo da 15:1.       */
html[data-tema="oscuro"] .marcador,
html[data-tema="oscuro"] .revela.oculta .marcador,
html[data-tema="oscuro"] .oculta .marcador {
  color: var(--tinta);
  background-size: 100% 1.06em;
  background-position: 0 92%;
  padding-inline: .12em;
  border-radius: 3px;
}
html[data-tema="oscuro"] .revela.oculta .marcador,
html[data-tema="oscuro"] .oculta .marcador { background-size: 0% 1.06em; }

/* Estados del formulario: el rojo y el verde de tema claro dan 1.8:1 y 2.4:1
   sobre la superficie oscura. Son colores funcionales, no de marca, así que
   se aclaran hasta pasar AA sin tocar la paleta institucional.             */
html[data-tema="oscuro"] .form-estado[data-tipo="error"] { color: #ffb4ab; }
html[data-tema="oscuro"] .form-estado[data-tipo="ok"] { color: #7fe0ae; }

/* .cita y .retrato__acento son dos bloques en amarillo suave: en tema oscuro
   quedaban como dos parches luminosos. Pasan a superficie con el amarillo
   reducido al filo, que es el mismo gesto con menos masa.                  */
html[data-tema="oscuro"] .cita { background: var(--superficie); }
html[data-tema="oscuro"] .cita p { color: var(--texto); }
html[data-tema="oscuro"] .retrato__acento { background: var(--superficie-2); }

/* Interruptor de la luz, en oscuro */
html[data-tema="oscuro"] .tema {
  background: var(--superficie); border-color: var(--borde-oscuro); color: var(--amarillo);
}
html[data-tema="oscuro"] .tema:hover {
  background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta);
}
html[data-tema="oscuro"] .tema:focus-visible { outline-color: var(--amarillo); }

/* El panel del menú solo existe abajo de 900px: en escritorio .nav-links es
   una fila sin fondo, y pintarla ahí dibujaba una caja sobre la cabecera.   */
@media (max-width: 900px) {
  html[data-tema="oscuro"] .nav-links {
    background: var(--superficie);
    border-bottom-color: var(--borde-oscuro);
  }
  html[data-tema="oscuro"] .nav-links li { border-top-color: var(--borde-oscuro); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .revela, .revela.oculta { opacity: 1; transform: none; }
  .progreso span { transform: scaleX(0) !important; }
  .marcador, .revela.oculta .marcador, .oculta .marcador { background-size: 100% .36em; }
  .ruta::before, .ruta:has(.etapa.oculta)::before { transform: none; transition: none; }
  .etapa.oculta .etapa__num { transform: none; }
  .chispa, .tarjeta-mini { animation: none; }
  /* Luz: sin campo, sin cursor, sin imán */
  .palabra__in, .oculta .palabra__in { transform: none; }
  .btn { --bx: 0px; --by: 0px; }
  .btn::after { display: none; }
  .seccion--oscura { --entra: 1; transform: none; }
  .industria[open] .industria__cuerpo li { animation: none; }
  .retrato__marco, .retrato__marco img, .retrato__acento { transform: none; }
  /* Acotado a .encendido: el cordel tiene que poder apagar también acá.
     El cambio de estado es instantáneo, que es justo lo correcto. */
  .foco.encendido .foco__logo { filter: none; }
  .foco.encendido .foco__halo { transform: scale(1); opacity: 1; }
  .foco.encendido .foco__rayo { transform: scaleY(1); opacity: 1; }
  .cordel__tirador { animation: none; }
}

/* Standalone-page legal wrapper (page.php, 404.php), ported verbatim from
   the approved static privacy page's inline styles
   (`/site/aviso-de-privacidad.html`) so both templates match its look. */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 36px 0 12px; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; }
.legal em { color: var(--azul); font-style: normal; font-weight: 600; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.pendiente p, .pendiente em { color: var(--tinta); }
.pendiente { display: flex; gap: 14px; align-items: flex-start; background: var(--amarillo-suave); border-radius: var(--radio); padding: 22px; margin: 28px 0; }