/* ==========================================================================
   MAKE YOUR SALES EASIER — hoja de estilo de la web
   Blanco corporativo + azul marino (#0B2545) y azul eléctrico (#1F7BFF).
   Todo el color se cambia aquí abajo, en un solo sitio.
   ========================================================================== */

:root{
  --marino:      #0B2545;
  --marino-2:    #123A66;
  --marino-3:    #071A33;
  --azul:        #1F7BFF;
  --azul-osc:    #0F5FD6;
  --azul-suave:  #E8F1FF;
  /* ⚠️ WEB v2: el azul eléctrico sobre blanco da 3,9:1 y el texto pequeño
     pide 4,5:1. Para LETRA PEQUEÑA sobre blanco va este, un punto más
     oscuro (4,9:1). El #1F7BFF sigue en botones, rayas e iconos. */
  --azul-texto:  #1A6BE6;
  --tinta:       #16202B;
  --gris:        #5A6B7C;
  --gris-claro:  #677789;   /* era #8496A6 (3,0:1); ahora 4,6:1 */
  --linea:       #E3E9F0;
  --fondo:       #FFFFFF;
  --fondo-2:     #F6F9FC;
  --verde:       #12A85C;

  --ancho:       1180px;
  --radio:       16px;
  --radio-g:     26px;
  --sombra:      0 1px 2px rgba(11,37,69,.06), 0 8px 24px rgba(11,37,69,.08);
  --sombra-g:    0 30px 70px rgba(11,37,69,.18);
  --fuente:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-t:    "Archivo", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  color-scheme: light;   /* la web es blanca a propósito, también en móviles en modo oscuro */
}

*,*::before,*::after{ box-sizing:border-box; }
/* ⚠️ Sin esto, un display:flex/grid se come al atributo hidden y el
   elemento sigue viéndose. Pasó con la barra del buscador. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--fuente); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{
  font-family:var(--fuente-t); color:var(--marino); margin:0 0 .5em;
  line-height:1.14; letter-spacing:-.022em; font-weight:800; text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); }
h3{ font-size:1.28rem; font-weight:700; letter-spacing:-.012em; }
p{ margin:0 0 1.1em; }
.gris{ color:var(--gris); }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }
.seccion{ padding:100px 0; }
.seccion--gris{ background:var(--fondo-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.centrado{ text-align:center; }
.medida{ max-width:720px; }
.centrado .medida{ margin-left:auto; margin-right:auto; }

/* --- Etiqueta pequeña sobre los títulos -------------------------------- */
.etiqueta{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-texto); margin-bottom:14px;
}

/* --- Botones ----------------------------------------------------------- */
.boton{
  font-family:var(--fuente-t);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:12px; font-weight:700; font-size:1.02rem;
  border:2px solid transparent; cursor:pointer; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.boton:hover{ transform:translateY(-2px); }
.boton--azul{ background:var(--azul); color:#fff; box-shadow:0 8px 22px rgba(31,123,255,.32); }
.boton--azul:hover{ background:var(--azul-osc); box-shadow:0 14px 30px rgba(31,123,255,.38); }
.boton--linea{ background:#fff; color:var(--marino); border-color:var(--linea); box-shadow:var(--sombra); }
.boton--linea:hover{ border-color:var(--azul); color:var(--azul); }
/* ⚠️ WEB v2: blanco sobre el verde de antes (#12A85C) daba 3,1:1. */
.boton--verde{ background:#0E7C45; color:#fff; box-shadow:0 8px 22px rgba(14,124,69,.28); }
.boton--verde:hover{ background:#0B6A3A; }
.boton--claro{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35); }
.boton--claro:hover{ background:rgba(255,255,255,.18); }
.botones{ display:flex; gap:14px; flex-wrap:wrap; }
.centrado .botones{ justify-content:center; }

/* --- Cabecera ---------------------------------------------------------- */
.cabecera{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.cabecera.pegada{ border-bottom-color:var(--linea); box-shadow:0 4px 20px rgba(11,37,69,.06); }
.cabecera__caja{ display:flex; align-items:center; gap:28px; height:74px; }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none !important; flex-shrink:0; }
/* ⚠️ WEB v3 (07/10/2026): aquí iba una «M» con flecha DIBUJADA en SVG que
   no era su logo (él: «¿qué son estos símbolos? No son los míos»). Ahora
   va SU símbolo, recortado de sus logos (sacar_simbolo.py): el azul sobre
   la cabecera blanca y el plateado cuando la cabecera se pone oscura. */
.marca__simbolo{ height:36px; width:auto; display:block; }
.marca__simbolo--oscuro{ display:none; }
.cabecera-oscura .marca__simbolo--claro{ display:none; }
.cabecera-oscura .marca__simbolo--oscuro{ display:block; }
.marca__texto{ font-family:var(--fuente-t); font-weight:800; font-size:.94rem; line-height:1.08; color:var(--marino); letter-spacing:.01em; }
.marca__texto small{ display:block; font-size:.64rem; font-weight:600; letter-spacing:.2em; color:var(--azul-texto); }
.menu{ display:flex; gap:6px; margin-left:auto; align-items:center; }
.menu a{
  color:var(--marino); font-weight:600; font-size:.97rem; padding:9px 14px;
  border-radius:9px; text-decoration:none !important; transition:background .18s, color .18s;
}
.menu a:hover{ background:var(--azul-suave); color:var(--azul); }
.menu a.activo{ color:var(--azul); background:var(--azul-suave); }
/* ⚠️ WEB v2: «.menu a» ganaba a «.boton--azul» y el botón de la cabecera
   salía con la letra AZUL MARINO sobre azul (3,9:1) en todas las páginas
   de cabecera blanca; y al pasar el ratón se volvía azul clarito. Pasaba
   también en la web publicada. */
.menu a.boton--azul, .menu a.boton--azul:hover{ color:#fff; }
.menu a.boton--azul:hover{ background:var(--azul-osc); }
.cabecera .boton{ padding:11px 20px; font-size:.94rem; }
.hamburguesa{ display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer; }
.hamburguesa span{ display:block; width:24px; height:2px; background:var(--marino); margin:5px 0; transition:.25s; }

/* --- Portada ----------------------------------------------------------- */
.portada{ position:relative; padding:64px 0 0; overflow:hidden; }
.portada__fondo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(31,123,255,.13), transparent 62%),
    radial-gradient(600px 400px at 92% 30%, rgba(11,37,69,.07), transparent 60%);
}

.portada__caja{ position:relative; z-index:1; text-align:center; }

.portada h1{ margin-bottom:20px; }
.portada h1 em{ font-style:normal; color:var(--azul); }
.portada__lema{ font-size:clamp(1.08rem,2vw,1.3rem); color:var(--gris); max-width:640px; margin:0 auto 32px; }
.portada .botones{ margin-bottom:18px; }

/* --- Portátil 3D ------------------------------------------------------- */
.escena{ perspective:1700px; perspective-origin:50% 42%; margin:56px auto 0; max-width:960px; padding:0 12px 30px; }

.tapa{
  position:relative; transform-style:preserve-3d; transform-origin:50% 100%;
  transform:rotateX(var(--tapa,-90deg)); border-radius:16px 16px 4px 4px;
}

.brillo{
  position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background:linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 26%, transparent 52%);
  opacity:var(--brillo,.85); transition:opacity .3s;
}

.base{
  height:16px; border-radius:0 0 14px 14px; transform-origin:50% 0;
  background:linear-gradient(180deg,#2a3a4f,#16202e 55%,#0d1520);
  box-shadow:0 26px 50px rgba(11,37,69,.34);
  position:relative;
}
.base::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:16%; height:5px; border-radius:0 0 8px 8px; background:rgba(255,255,255,.13);
}

/* --- Rejilla de tarjetas ---------------------------------------------- */
.rej{ display:grid; gap:22px; }
.rej--2{ grid-template-columns:repeat(2,1fr); }
.rej--3{ grid-template-columns:repeat(3,1fr); }

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:30px 26px; box-shadow:var(--sombra);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tarjeta:hover{ transform:translateY(-5px); box-shadow:var(--sombra-g); border-color:#CFE0F7; }
.tarjeta h3{ margin-bottom:8px; }
.tarjeta p{ margin:0; color:var(--gris); font-size:.98rem; }
.icono{
  width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--azul-suave); color:var(--azul); margin-bottom:18px;
}
.icono svg{ width:25px; height:25px; }
.icono--verde{ background:#E4F6EC; color:var(--verde); }

/* --- Bloque oscuro ----------------------------------------------------- */
.oscuro{
  background:linear-gradient(165deg, var(--marino) 0%, var(--marino-3) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.oscuro h2,.oscuro h3{ color:#fff; }
.oscuro p{ color:rgba(255,255,255,.76); }
.oscuro .etiqueta{ color:#6FB0FF; }
.oscuro::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 12% 0%, rgba(31,123,255,.28), transparent 60%);
  pointer-events:none;
}
.oscuro .contenedor{ position:relative; z-index:1; }
.frase-grande{
  font-family:var(--fuente-t);
  font-size:clamp(2rem,4.4vw,3.3rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.12; margin:0 0 22px;
}
.frase-grande span{ color:#6FB0FF; }

/* --- Maqueta de borrador de Outlook ------------------------------------ */
.borrador{
  background:#fff; border-radius:14px; overflow:hidden; color:var(--tinta);
  box-shadow:0 30px 70px rgba(0,0,0,.45); text-align:left; max-width:520px;
}
.borrador__barra{
  background:#F3F5F8; border-bottom:1px solid var(--linea); padding:10px 16px;
  font-size:.78rem; font-weight:700; color:var(--gris); display:flex; align-items:center; gap:8px;
}
.borrador__punto{ width:9px; height:9px; border-radius:50%; background:#E0574F; }
.borrador__campos{ padding:14px 18px; border-bottom:1px solid var(--linea); font-size:.86rem; color:var(--gris); }
.borrador__campos b{ color:var(--marino); font-weight:700; }
.borrador__cuerpo{ padding:18px; font-size:.92rem; line-height:1.7; color:#31404F; min-height:150px; }
.borrador__pie{
  padding:12px 18px; background:#FAFBFD; border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--gris);
}
.borrador__pie .falso-boton{
  background:var(--azul); color:#fff; padding:7px 18px; border-radius:7px; font-weight:700; font-size:.84rem;
}
.cursor{ display:inline-block; width:2px; height:1em; background:var(--azul); vertical-align:-2px; animation:parpadeo 1s steps(2) infinite; }
@keyframes parpadeo{ 50%{ opacity:0; } }

/* --- Pasos ------------------------------------------------------------- */
.paso{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:96px; }
.paso:nth-child(even) .paso__texto{ order:2; }
.paso__num{
  font-family:var(--fuente-t);
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--marino); color:#fff; font-weight:800; font-size:1.12rem; margin-bottom:18px;
}
.paso__visual{
  border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra-g);
  background:var(--marino-3); border:1px solid var(--linea);
}
.lista-marcas{ list-style:none; padding:0; margin:0; }
.lista-marcas li{ position:relative; padding-left:32px; margin-bottom:12px; color:var(--gris); }
.lista-marcas li::before{
  content:""; position:absolute; left:0; top:8px; width:18px; height:18px; border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.lista-marcas li b{ color:var(--marino); }

/* --- EL RECORRIDO: EL PROGRAMA CONTÁNDOSE ENTERO ----------------------- */
/* Va en el sitio donde iría el vídeo. Diez capítulos, unos dos minutos y
   medio, con la barra lateral del programa a la izquierda, el escenario
   en el centro y la explicación en cristiano debajo. */

.demo{
  border-radius:var(--radio-g); overflow:hidden; color:#E6EEF9;
  background:linear-gradient(158deg,#0e1e35 0%,#0a1526 55%,#060d19 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--sombra-g);
  font-size:.95rem;
}



/* ⚠️ ESTA ANIMACIÓN NO LLEVA OPACIDAD A PROPÓSITO (30/08/2026). La
   llevaba, y cuando el navegador congela la pestaña —pasa en cuanto la
   ventana no se está mirando— la animación se queda parada A MEDIAS y el
   contenido se queda INVISIBLE, con opacidad 0. Medido. Moviendo sólo la
   posición, lo peor que puede pasar es que aparezca sin deslizarse. */


.cursor{ display:inline-block; width:2px; height:1em; background:var(--azul); vertical-align:-2px; animation:parpadeo 1s steps(2) infinite; }
@keyframes parpadeo{ 50%{ opacity:0; } }



/* --- Preguntas --------------------------------------------------------- */
.pregunta{ border-bottom:1px solid var(--linea); }
.pregunta__t{
  font-family:var(--fuente-t);
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:24px 44px 24px 0; font-size:1.1rem; font-weight:700; color:var(--marino); position:relative; line-height:1.4;
}
.pregunta__t::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-9px;
  border-right:2.5px solid var(--azul); border-bottom:2.5px solid var(--azul);
  transform:rotate(45deg); transition:transform .28s ease;
}
.pregunta.abierta .pregunta__t::after{ transform:rotate(225deg); margin-top:-4px; }
.pregunta__r{ max-height:0; overflow:hidden; transition:max-height .34s ease; }
.pregunta__r > div{ padding:0 40px 26px 0; color:var(--gris); }
.pregunta__r p:last-child{ margin-bottom:0; }

/* --- Formulario -------------------------------------------------------- */
.formulario{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-g);
  padding:38px; box-shadow:var(--sombra-g);
}

.formulario .boton{ width:100%; }
.formulario__nota{ font-size:.86rem; color:var(--gris-claro); margin:14px 0 0; text-align:center; }

/* --- Ficha de persona -------------------------------------------------- */
.persona{ display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start; }
.retrato{
  border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra-g);
  background:var(--fondo-2); border:1px solid var(--linea);
  aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--gris-claro); text-align:center; padding:22px; font-size:.88rem;
}
.retrato svg{ width:62px; height:62px; margin-bottom:14px; opacity:.35; }
/* cuando el retrato es una foto de verdad y no el hueco gris */
img.retrato{ display:block; padding:0; object-fit:cover; object-position:50% 22%; width:100%; }
.cita{
  border-left:4px solid var(--azul); padding:6px 0 6px 24px; margin:0 0 26px;
  font-size:1.24rem; font-weight:600; color:var(--marino); line-height:1.5;
}

/* --- Pie --------------------------------------------------------------- */
.pie{ background:var(--marino-3); color:rgba(255,255,255,.66); padding:70px 0 34px; font-size:.94rem; }
.pie__caja{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; align-items:start; }
.pie__logo{ width:230px; margin-bottom:20px; }
.pie h4{ color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.pie a{ color:rgba(255,255,255,.78); display:block; padding:5px 0; text-decoration:none; }
.pie a:hover{ color:#fff; text-decoration:none; }
.pie__linea{
  border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.85rem; color:rgba(255,255,255,.62);
}

/* --- Aparecer al deslizar ---------------------------------------------- */
.aparece{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.aparece.visto{ opacity:1; transform:none; }
.aparece.d1{ transition-delay:.09s; } .aparece.d2{ transition-delay:.18s; }
.aparece.d3{ transition-delay:.27s; } 

/* --- Barra fija de contacto en el móvil -------------------------------- */
.barra-movil{ display:none; }

/* --- Pantallas medianas y móvil ---------------------------------------- */
@media (max-width:980px){
  
  .rej--3{ grid-template-columns:1fr; }
  .paso{ grid-template-columns:1fr; gap:30px; margin-bottom:64px; }
  .paso:nth-child(even) .paso__texto{ order:0; }
  .persona{ grid-template-columns:1fr; gap:30px; }
  .retrato{ max-width:280px; }
  .pie__caja{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; padding-bottom:72px; }
  .seccion{ padding:68px 0; }
  .hamburguesa{ display:block; }
  .menu{
    position:absolute; top:74px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; padding:12px; gap:2px; border-bottom:1px solid var(--linea);
    box-shadow:0 18px 30px rgba(11,37,69,.1); display:none;
  }
  .menu.abierto{ display:flex; }
  .menu a{ padding:14px; }
  .cabecera .boton{ display:none; }
  .rej--2{ grid-template-columns:1fr; }
  .escena{ perspective:1100px; margin-top:38px; }
  .formulario{ padding:26px 20px; }
  .pie__caja{ grid-template-columns:1fr; gap:30px; }
  .barra-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80; gap:10px; padding:10px 12px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--linea); box-shadow:0 -6px 22px rgba(11,37,69,.1);
  }
  .barra-movil .boton{ flex:1; padding:13px 10px; font-size:.94rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .aparece{ opacity:1; transform:none; }
}

/* --- Filas de datos en el aviso legal y la privacidad ------------------ */
/* ⚠️ NO se reutiliza .demo__campo aquí: ésa es del panel OSCURO y pinta el
   valor en blanco, que sobre la tarjeta blanca no se ve. Costó una
   captura darse cuenta. */
.dato{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:.95rem;
}
.dato:last-child{ border-bottom:0; }
.dato span{ color:var(--gris); flex:none; }
.dato b{ color:var(--marino); font-weight:700; text-align:right; }

/* ==========================================================================
   LA PUESTA EN ESCENA (10/09/2026)
   ==========================================================================
   Rediseño de la portada y del recorrido del producto: tipografía
   protagonista, capas flotantes, profundidad y una secuencia atada al
   deslizamiento.

   ⚠️ CUATRO REGLAS QUE NO SE SALTAN. Las cuatro vienen de fallos ya
     pagados y están apuntadas en [web-animacion-trampas]:

   1. **NADA DEPENDE DEL JAVASCRIPT PARA VERSE.** Todo lo de aquí abajo se
      compone y se lee SIN una sola línea de JS. El escenario pegado sólo
      se enciende si el JS ha marcado <html class="js">. Si el JS falla o
      está desactivado, la portada se ve entera y quieta. Nunca se deja
      una sección transparente esperando una animación.
   2. **SÓLO transform y opacity** en lo que se mueve al deslizar. Nada de
      animar width, top o filter dentro del bucle.
   3. **UN SOLO CONTROLADOR.** El JS escribe variables CSS en un único
      elemento por escena y el CSS hace el resto. No hay un segundo
      escuchador de scroll encima de los mismos elementos.
   4. **prefers-reduced-motion devuelve la composición COMPLETA y quieta**,
      no una versión mutilada.
   ========================================================================== */

:root{
  --marino-4:  #050B16;   /* el fondo más hondo, para el cierre */
  --ambar:     #E0A32E;
  --ambar-cl:  #F5CF7A;
  --azul-cl:   #6FB0FF;
}

/* ── Tipografía protagonista ──────────────────────────────────────────── */
.display{
  font-family:var(--fuente-t); font-weight:800; line-height:.88;
  letter-spacing:-.045em; margin:0; text-wrap:balance;
}
.display .linea{ display:block; }
.display .pal{ display:inline-block; }

/* El contorno, que es la firma de este tipo de composición */
.pal--contorno{
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.70);
}

@media (max-width:760px){ .pal--contorno{ -webkit-text-stroke-width:1.3px; } }

/* ⚠️ Si el navegador no entiende -webkit-text-stroke, «color:transparent»
   dejaría la palabra INVISIBLE. Con esto vuelve a pintarse rellena. */
@supports not (-webkit-text-stroke:1px #000){
  .pal--contorno{ color:rgba(255,255,255,.72); }
  
}

/* La palabra enorme del fondo */
.marca-agua{
  position:absolute; left:50%; top:50%; z-index:0;
  font-family:var(--fuente-t); font-weight:800; text-transform:uppercase;
  letter-spacing:-.05em; white-space:nowrap; pointer-events:none;
  font-size:clamp(5rem, 19vw, 17rem); line-height:1; margin:0;
  color:transparent; -webkit-text-stroke:1.5px rgba(11,37,69,.11);
  transform:translate3d(-50%, calc(-50% + var(--par-fondo, 0px)), 0);
  will-change:transform;
}
.cierre .marca-agua, .promesa .marca-agua{
  -webkit-text-stroke-color:rgba(255,255,255,.10);
}
/* ⚠️ WEB v2: la marca de agua es un <p>, y «.cierre p» (más fuerte que
   «.marca-agua» a secas) le ponía COLOR y un ancho de 620 px: salía
   «DIEZ MIN» relleno en gris tapando el texto. Por eso en la web de antes
   estaba escondida en la portada. Con esto vuelve a ser sólo el contorno. */
.cierre .marca-agua, .promesa .marca-agua{ color:transparent; max-width:none; margin:0; }
@supports not (-webkit-text-stroke:1px #000){ .marca-agua{ display:none; } }

/* ── Ambientes: el fondo de cada escena ───────────────────────────────── */
.ambiente{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ambiente--marino{
  background:
    radial-gradient(120% 78% at 50% -12%, #17375F 0%, transparent 56%),
    radial-gradient(88% 60% at 86% 104%, #10294A 0%, transparent 60%),
    linear-gradient(180deg, #0B2545 0%, #050B16 100%);
}

.ambiente--noche{
  background:
    radial-gradient(70% 50% at 50% 40%, #123A66 0%, transparent 62%),
    linear-gradient(180deg, #071A33 0%, #050B16 100%);
}
/* Un grano finísimo: textura sin coste de filtro. Fuera en el móvil. */
.ambiente::after{
  content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:3px 3px;
}
@media (max-width:760px){ .ambiente::after{ display:none; } }

/* ── LA PORTADA ───────────────────────────────────────────────────────── */
.portada2{ --alto-guia:235vh; }

.portada2 .etiqueta{ color:var(--azul-cl); margin-bottom:18px; }

.portada2 h1{
  font-size:clamp(2.4rem, 7.2vw, 6.4rem);
  color:#fff; margin:0 0 22px; text-transform:uppercase;
}
.portada2 h1 .pal--azul{ color:var(--azul-cl); }

.portada2 .botones{ justify-content:center; }





/* (Aquí estuvo «.inventario», la lista de las ocho funciones. La
    sustituyó «.indice» el 10/09/2026: mismo contenido, sin cajas y
    con el número que se enciende. Ver el bloque del final.) */

/* ── El cierre ────────────────────────────────────────────────────────── */
.cierre{
  position:relative; overflow:hidden; padding:140px 0; text-align:center;
  color:#fff;
}
.cierre__caja{ position:relative; z-index:2; }
.cierre .display{
  color:#fff; font-size:clamp(2.2rem, 6.2vw, 5.2rem); margin-bottom:26px;
  text-transform:uppercase;
}
.cierre .display .pal--azul{ color:var(--azul-cl); }
.cierre p{ color:rgba(233,240,250,.78); max-width:620px; margin:0 auto 34px; }
.cierre .botones{ justify-content:center; }

/* ── Entrada coordinada al cargar ─────────────────────────────────────── */
/* ⚠️ Sólo hay estado inicial oculto si el JS ha marcado <html class="js">.
   Sin JS no se esconde nada: se ve la composición entera. */
.js .entra{ opacity:0; transform:translate3d(0,24px,0); }
.js .entra.dentro{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),
             transform .85s cubic-bezier(.2,.7,.3,1);
}

/* ⚠️ Lo mismo con .aparece, que ya existía: estaba a opacity:0 SIN
   condición, así que sin JavaScript la web se quedaba con secciones
   enteras invisibles. Ahora sólo se esconde si el JS está vivo.
   (Esta regla va después de la original de arriba y la deroga.) */
.aparece{ opacity:1; transform:none; }
.js .aparece{ opacity:0; transform:translateY(26px); }
.js .aparece.visto{ opacity:1; transform:none; }

/* ── La cabecera cuando va por encima de una escena oscura ────────────── */
/* Por defecto NO se aplica: la cabecera sigue siendo la blanca de siempre.
   La clase la pone el mismo controlador que mueve la portada. */
.cabecera-oscura .cabecera{
  background:rgba(8,20,40,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.cabecera-oscura .cabecera.pegada{ border-bottom-color:rgba(255,255,255,.12); box-shadow:none; }
.cabecera-oscura .marca__texto{ color:#fff; }
.cabecera-oscura .menu a{ color:rgba(255,255,255,.86); }
.cabecera-oscura .menu a:hover,
.cabecera-oscura .menu a.activo{ background:rgba(255,255,255,.12); color:#fff; }
.cabecera-oscura .menu .boton--azul{ background:var(--azul); color:#fff; }
.cabecera-oscura .hamburguesa span{ background:#fff; }

/* ── Botones: respuesta discreta, y que se entienda también en táctil ─── */
/* El :hover se limita a los aparatos con puntero de verdad; en una
   pantalla táctil el estado que importa es :active, que sí se nota. */
.boton:focus-visible{ outline:3px solid var(--azul-cl); outline-offset:3px; }
.boton:active{ transform:translateY(1px) scale(.99); }
@media (hover:hover){
  .boton--azul:hover, .boton--verde:hover{ transform:translateY(-2px); }
}

/* ── Móvil: menos capas, menos profundidad, nada pegado ───────────────── */
@media (max-width:900px){

  .marca-agua{ transform:translate3d(-50%,-50%,0); }
  
  .cierre{ padding:90px 0; }
}

/* ── Sin movimiento: la composición entera, quieta ────────────────────── */
@media (prefers-reduced-motion:reduce){

  .marca-agua{ transform:translate3d(-50%,-50%,0); }

  /* ⚠️ Estas dos van con !important a propósito: son la red. Sin ellas,
     «.js .entra» y «.js .aparece» (más específicas que la regla vieja de
     .aparece de arriba) dejarían la página en blanco a quien pide no
     tener movimiento, si el JS se atasca antes de repartir las clases. */
  .js .entra,
  .js .aparece{ opacity:1 !important; transform:none !important; }
}

.cierre .etiqueta{ color:var(--azul-cl); }

/* En una pantalla táctil no hay puntero: el :hover se queda PEGADO
   después de tocar y la tarjeta se queda levantada. Ahí no se usa. */
@media (hover:none){
  .boton:hover{ transform:none; }
  .tarjeta:hover{ transform:none; box-shadow:var(--sombra); border-color:var(--linea); }
}

/* ══════════════════════════════════════════════════════════════════════
   EL ÍNDICE DE LAS OCHO FUNCIONES  (10/09/2026)
   ══════════════════════════════════════════════════════════════════════
   Sustituye a las ocho tarjetas con borde en rejilla 2×4. Él lo dijo con
   estas palabras: «me molan las opciones, pero no me gusta el formato en
   el que se presentan».

   Aquí no hay ni una caja: dos columnas, un filete finísimo por fila y el
   número grande. Dos movimientos, los dos discretos:
     · el número se enciende en AZUL cuando la fila llega a la pantalla
       —lo marca web.js poniendo la clase «tocado»—, y
     · el filete de arriba se pinta de izquierda a derecha al pasar por
       encima con el ratón o al llegar con el tabulador.

   ⚠️ Sin JavaScript no se pierde nada: sin la clase «tocado» las filas se
     ven igual, sólo que el número se queda gris. Nunca hay texto oculto
     esperando una animación.
   ══════════════════════════════════════════════════════════════════════ */
.indice{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 70px;
  margin-top:54px; max-width:1100px; margin-left:auto; margin-right:auto;
}
.indice__fila{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:26px;
  align-items:start; padding:30px 0; border-top:1px solid var(--linea);
}
/* el filete que se pinta al pasar por encima */
.indice__fila::after{
  content:""; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:var(--azul); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.indice__fila:hover::after,
.indice__fila:focus-within::after{ transform:scaleX(1); }

.indice__n{
  font-family:var(--fuente-t); font-weight:800; font-size:2.6rem; line-height:.9;
  color:var(--linea); font-variant-numeric:tabular-nums; width:64px;
  transition:color .45s ease;
}
.indice__fila.tocado .indice__n{ color:var(--azul); }

.indice__fila h3{ font-size:1.24rem; margin:2px 0 9px; }
.indice__fila p{ margin:0; color:var(--gris); font-size:.99rem; line-height:1.72; }
.indice__fila .ui-icon{
  width:19px; height:19px; fill:none; stroke:var(--gris-claro); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; margin-right:9px;
  transition:stroke .45s ease;
}
.indice__fila.tocado .ui-icon,
.indice__fila:hover .ui-icon{ stroke:var(--azul); }

@media (max-width:860px){
  .indice{ grid-template-columns:1fr; gap:0; }
  .indice__n{ font-size:2rem; width:48px; }
  .indice__fila{ padding:24px 0; gap:18px; }
}
@media (prefers-reduced-motion:reduce){
  /* Quieto, pero con el color puesto: se ve el resultado, no el camino. */
  .indice__fila::after{ transform:scaleX(1); }
  .indice__n{ color:var(--azul); }
  .indice__fila .ui-icon{ stroke:var(--azul); }
}

/* ══════════════════════════════════════════════════════════════════════
   LA PROMESA — «El programa prepara. Usted tiene la última palabra.»
   ══════════════════════════════════════════════════════════════════════
   Va justo después del recorrido del portátil, y es EL mensaje del
   producto. Antes era texto gris pequeño a la derecha de un titular, o
   sea, lo mismo que cualquier otra sección.

   Ahora es un alto en el camino: fondo oscuro, tipografía grande con la
   palabra «Usted» en contorno, y los tres puntos en horizontal. Le cambia
   el ambiente a la página entre el recorrido y el índice de funciones, y
   deja claro cuál es la frase que hay que recordar.
   ══════════════════════════════════════════════════════════════════════ */
.promesa{ position:relative; overflow:hidden; padding:120px 0; color:#fff; }
.promesa__caja{ position:relative; z-index:2; }
.promesa .etiqueta{ color:var(--azul-cl); }
.promesa .display{
  color:#fff; font-size:clamp(2.1rem, 5.4vw, 4.2rem); margin:14px 0 26px;
}
.promesa__lema{
  color:rgba(233,240,250,.78); font-size:1.08rem; line-height:1.72;
  max-width:620px; margin:0 0 12px;
}
.promesa__enlace{
  display:inline-flex; align-items:center; gap:12px; color:var(--azul-cl);
  font-family:var(--fuente-t); font-weight:700; font-size:1rem;
  text-decoration:none !important;
}
.promesa__enlace .ui-icon{
  width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;
}
.promesa__enlace:hover .ui-icon{ transform:translateX(5px); }

.promesa__tres{
  display:grid; grid-template-columns:repeat(3,1fr); gap:46px; margin:62px 0 44px;
}
.promesa__p{ position:relative; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); }
/* El filete se pinta al llegar, igual que en el índice de funciones: es
   la misma familia, pero en horizontal y sobre oscuro, para que no
   parezca la misma sección dos veces. */
.promesa__p::after{
  content:""; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:var(--azul-cl); transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.promesa__p.tocado::after{ transform:scaleX(1); }
.promesa__p b{
  display:block; font-family:var(--fuente-t); font-weight:800; font-size:1.9rem;
  line-height:1; color:rgba(255,255,255,.26); margin-bottom:14px;
  font-variant-numeric:tabular-nums; transition:color .5s ease;
}
.promesa__p.tocado b{ color:var(--azul-cl); }
.promesa__p h3{ color:#fff; font-size:1.14rem; margin:0 0 9px; }
.promesa__p p{ color:rgba(233,240,250,.66); font-size:.97rem; line-height:1.7; margin:0; }

@media (max-width:900px){
  .promesa{ padding:78px 0; }
  .promesa__tres{ grid-template-columns:1fr; gap:26px; margin:40px 0 32px; }
}
@media (prefers-reduced-motion:reduce){
  .promesa__p::after{ transform:scaleX(1); }
  .promesa__p b{ color:var(--azul-cl); }
}

/* ══════════════════════════════════════════════════════════════════════
   EL HILO — la parte de PEDIDOS de «Cómo funciona»
   ══════════════════════════════════════════════════════════════════════
   Era una tarjeta blanca con cuatro filas y cuatro colores distintos
   (azul, ámbar, verde y morado) que no son de la marca.

   Ahora son cuatro hitos colgando de una línea que se va pintando de azul
   según se baja. Es la opción «C» que le enseñé para las ocho funciones:
   le gustó, no se usó allí, y aquí encaja mejor porque son PASOS en
   orden, no una lista de cosas sueltas.
   ══════════════════════════════════════════════════════════════════════ */
.hilo{ position:relative; margin-top:10px; }
.hilo__raya{ position:absolute; left:26px; top:10px; bottom:34px; width:2px; background:var(--linea); }
.hilo__raya i{
  position:absolute; inset:0; transform-origin:top;
  background:linear-gradient(180deg, var(--azul), #6FB0FF);
  transform:scaleY(var(--avance, 0)); transition:transform .12s linear;
}
.hilo__hito{
  position:relative; display:grid; grid-template-columns:54px 1fr; gap:28px;
  align-items:start; padding:0 0 40px;
}
.hilo__hito:last-child{ padding-bottom:0; }
.hilo__pt{
  width:54px; height:54px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:var(--fondo);
  border:2px solid var(--linea); color:var(--gris-claro);
  font-family:var(--fuente-t); font-weight:800; font-size:.94rem;
  font-variant-numeric:tabular-nums;
  transition:border-color .45s, color .45s, background .45s, transform .45s, box-shadow .45s;
}
.hilo__hito.tocado .hilo__pt{
  border-color:var(--azul); background:var(--azul); color:#fff;
  transform:scale(1.06); box-shadow:0 8px 22px rgba(31,123,255,.30);
}
.hilo__hito h3{ margin:13px 0 8px; font-size:1.2rem; }
.hilo__hito p{ margin:0; color:var(--gris); font-size:.99rem; line-height:1.72; max-width:620px; }

@media (max-width:700px){
  .hilo__hito{ grid-template-columns:44px 1fr; gap:18px; padding-bottom:30px; }
  .hilo__pt{ width:44px; height:44px; font-size:.84rem; }
  .hilo__raya{ left:21px; }
}
@media (prefers-reduced-motion:reduce){
  .hilo__raya i{ transform:scaleY(1); }
  .hilo__hito .hilo__pt{ border-color:var(--azul); background:var(--azul); color:#fff; }
}

/* --- La cabecera de esa sección, y las etiquetas de sector ------------ */
.pedidos{ background:var(--fondo-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.pedidos__caja{ display:grid; grid-template-columns:1fr 1.15fr; gap:76px; align-items:start; }
.pedidos__intro .display{
  color:var(--marino); font-size:clamp(1.9rem, 3.6vw, 3rem); margin:14px 0 22px;
}
.pedidos__intro > p{ color:var(--gris); font-size:1.02rem; line-height:1.75; }
.sectores{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 18px; }
.sectores span{
  background:var(--fondo); border:1px solid var(--linea); border-radius:999px;
  padding:8px 15px; font-size:.85rem; font-weight:600; color:var(--marino);
}
.pedidos__nota{ font-size:.94rem; color:var(--gris-claro); line-height:1.7; margin:0; }
@media (max-width:980px){
  .pedidos__caja{ grid-template-columns:1fr; gap:38px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LOS SECTORES  (10/09/2026)
   ══════════════════════════════════════════════════════════════════════
   Antes eran cuatro pastillas sueltas —Industria, Mobiliario, Hostelería,
   Distribución— que no salían de ningún sitio.

   Ahora son LAS CINCO FAMILIAS DE VERDAD, las que el programa lleva en
   `sectores.py`, con lo que cambia en cada una: cómo se llama la pestaña
   y qué trae el listado de la semana. Es el argumento de «esto no es sólo
   para fábricas», y está escrito con lo que hace el programa, no con lo
   que nos gustaría que hiciera.
   ══════════════════════════════════════════════════════════════════════ */
.sectores{ margin:28px 0 20px; }
.sectores__fila{
  display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:22px;
  padding:15px 0; border-top:1px solid var(--linea); align-items:baseline;
}
.sectores__fila--cab{
  border-top:0; padding-bottom:6px;
  font-size:.7rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gris-claro);
}
.sectores__fila b{ color:var(--marino); font-weight:700; font-size:.98rem; }
.sectores__fila span{ color:var(--gris); font-size:.93rem; line-height:1.5; }
.sectores__fila .pest{
  color:var(--azul); font-weight:700; font-family:var(--fuente-t);
}
@media (max-width:760px){
  /* En vertical la fila de encabezados no sirve: cada dato lleva el suyo. */
  .sectores__fila--cab{ display:none; }
  .sectores__fila{ grid-template-columns:1fr; gap:5px; padding:16px 0; }
  .sectores__fila span::before{
    content:attr(data-r) " · "; color:var(--gris-claro); font-weight:700;
    font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LA RUTA — «El recorrido» de «Quién está detrás»
   ══════════════════════════════════════════════════════════════════════
   Eran cuatro tarjetas iguales sobre fondo oscuro. Pero eso no es una
   lista: es una LÍNEA DE TIEMPO —oficio, problema, herramienta,
   producto—, y contada como cuatro cajas se pierde justo lo que tiene de
   bueno, que es el orden.
   Va en horizontal a propósito, para que no se confunda con el hilo
   vertical de «Cómo funciona».
   ══════════════════════════════════════════════════════════════════════ */
.ruta{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:56px; }

@media (max-width:900px){
  .ruta{ grid-template-columns:1fr; gap:0; margin-top:38px; }

}

.grupo-p__t{
  font-family:var(--fuente-t); font-weight:800; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul);
  padding-bottom:14px; margin:0 0 4px; border-bottom:2px solid var(--marino);
}
.pregunta__t{ transition:color .2s ease; }
.pregunta__t:hover{ color:var(--azul); }
.pregunta.abierta .pregunta__t{ color:var(--azul); }

/* La tabla de sectores va a lo ancho, no dentro de la columna del texto:
   metida ahí se quedaba en 491 px y tres columnas de texto no caben. */
.pedidos__sectores{ margin-top:70px; padding-top:42px; border-top:1px solid var(--linea); }
.pedidos__st{
  font-family:var(--fuente-t); font-weight:800; font-size:1.24rem;
  color:var(--marino); margin:0 0 6px;
}
.pedidos__sectores .sectores__fila{ grid-template-columns:1.4fr .8fr 1.4fr; }
.pedidos__sectores .pedidos__nota{ margin-top:22px; max-width:820px; }
@media (max-width:760px){
  .pedidos__sectores .sectores__fila{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA TRAYECTORIA — «Quién está detrás» (10/09/2026)
   ══════════════════════════════════════════════════════════════════════
   Sustituye a la «.ruta» de cuatro pasos (oficio → problema → herramienta
   → producto), que era un resumen abstracto. Ahora es la trayectoria de
   verdad, que él dictó: conservas en Argentina, banca, aduanas, su propia
   empresa de informática, promoción inmobiliaria en España y embalaje.

   Y es el mejor argumento que tiene la web, porque coincide con los
   sectores que el programa contempla: ha vendido en casi todos ellos.

   Va sobre fondo oscuro y con las entradas CORTAS a propósito: una línea
   de tiempo se ojea, no se lee. Lo largo está arriba, en su historia.
   ══════════════════════════════════════════════════════════════════════ */
.trayectoria{ position:relative; margin-top:54px; }
.trayectoria__raya{
  position:absolute; left:7px; top:10px; bottom:22px; width:2px;
  background:rgba(255,255,255,.16);
}
.trayectoria__raya i{
  position:absolute; inset:0; transform-origin:top;
  background:linear-gradient(180deg, var(--azul), #6FB0FF);
  transform:scaleY(var(--avance, 0)); transition:transform .14s linear;
}
.trayectoria__hito{
  position:relative; display:grid;
  grid-template-columns:16px 200px 1fr; gap:0 30px;
  align-items:start; padding:0 0 34px;
}
.trayectoria__hito:last-child{ padding-bottom:0; }
.trayectoria__pt{
  width:16px; height:16px; border-radius:50%; margin-top:7px;
  background:var(--marino-3); border:2px solid rgba(255,255,255,.3);
  transition:background .45s, border-color .45s, transform .45s, box-shadow .45s;
}
.trayectoria__hito.tocado .trayectoria__pt{
  background:var(--azul); border-color:var(--azul); transform:scale(1.25);
  box-shadow:0 0 0 5px rgba(31,123,255,.18);
}
.trayectoria__cuando{
  font-family:var(--fuente-t); font-weight:800; font-size:1.02rem;
  color:rgba(255,255,255,.92); line-height:1.3;
}
.trayectoria__cuando small{
  display:block; font-family:var(--fuente); font-weight:600; font-size:.76rem;
  letter-spacing:.13em; text-transform:uppercase; margin-top:5px;
  color:var(--azul-cl);
}
.trayectoria__que h3{ color:#fff; font-size:1.1rem; margin:0 0 7px; }
.trayectoria__que p{ color:rgba(255,255,255,.7); font-size:.96rem; line-height:1.68; margin:0; }
.trayectoria__que b{ color:#fff; font-weight:600; }
/* El hito de hoy, marcado: es donde desemboca todo */
.trayectoria__hito--hoy .trayectoria__que h3{ color:var(--azul-cl); }
.trayectoria__hito--hoy .trayectoria__pt{
  background:var(--azul); border-color:var(--azul);
}

@media (max-width:820px){
  .trayectoria__hito{ grid-template-columns:16px 1fr; gap:0 20px; padding-bottom:30px; }
  .trayectoria__cuando{ grid-column:2; margin-bottom:10px; font-size:.96rem; }
  .trayectoria__que{ grid-column:2; }
  .trayectoria__cuando small{ display:inline; margin:0 0 0 10px; }
}
@media (prefers-reduced-motion:reduce){
  .trayectoria__raya i{ transform:scaleY(1); }
  .trayectoria__hito .trayectoria__pt{ background:var(--azul); border-color:var(--azul); }
}

/* ══════════════════════════════════════════════════════════════════════
   WEB v2 (30/09/2026) — MÁS VIVA SIN PESAR MÁS
   ══════════════════════════════════════════════════════════════════════
   Él: «más rápida, con un diseño más guay, las animaciones más guays».
   Todo lo de aquí respeta las cuatro reglas de «LA PUESTA EN ESCENA»:
   nada depende del JS para verse, sólo se mueve transform/opacity en lo
   que va atado al deslizamiento, un solo controlador (web.js) y
   prefers-reduced-motion lo deja todo quieto y entero (la regla de
   arriba «*{animation:none; transition:none}» sigue mandando).
   ══════════════════════════════════════════════════════════════════════ */

/* ── El brillo que sigue al ratón ──────────────────────────────────────
   La clase .brilla la pone web.js SÓLO con ratón de verdad y sin
   reduced-motion. Sin ella no existe ni el pseudo-elemento. */
.brilla{ position:relative; isolation:isolate; }
.brilla::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(360px circle at var(--x,50%) var(--y,50%), rgba(31,123,255,.10), transparent 65%);
}
.brilla:hover::before{ opacity:1; }
/* Sobre fondo oscuro la luz es clara */
.hero-workflow article.brilla::before,
.promesa__p.brilla::before{
  background:radial-gradient(320px circle at var(--x,50%) var(--y,50%), rgba(150,190,255,.16), transparent 65%);
}
.cierre.brilla::before{
  background:radial-gradient(700px circle at var(--x,50%) var(--y,50%), rgba(90,150,255,.14), transparent 60%);
}
/* En la tarjeta blanca, además, el borde se enciende donde está el ratón */
.tarjeta.brilla::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  pointer-events:none; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(260px circle at var(--x,50%) var(--y,50%), rgba(31,123,255,.65), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.tarjeta.brilla:hover::after{ opacity:1; }
.indice__fila.brilla::before{ inset:0 -20px; border-radius:14px; }

/* ── Botones: un destello que cruza al pasar y la flecha que empuja ── */
.boton--azul, .boton--verde{ position:relative; overflow:hidden; isolation:isolate; }
.boton--azul::after, .boton--verde::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
.boton .ui-icon{ transition:transform .25s ease; }
@media (hover:hover){
  .boton--azul:hover::after, .boton--verde:hover::after{ transform:translateX(120%); }
  .boton:hover .ui-icon{ transform:translateX(4px); }
}

/* ── La cabecera: barra de lo leído y cambio suave a oscura ──────────── */
.cabecera::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, #1F7BFF, #6FB0FF 60%, #A9D4FF);
  transform-origin:0 50%; transform:scaleX(var(--progreso, 0)); pointer-events:none;
}
.cabecera{ transition:background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.marca__texto, .marca__texto small, .menu a{ transition:color .35s ease, background-color .2s ease; }
.cabecera-oscura .marca__texto small{ color:var(--azul-cl); }

/* ── Menú del móvil: la hamburguesa se convierte en X ──────────────── */
.hamburguesa.abierta span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa.abierta span:nth-child(2){ opacity:0; }
.hamburguesa.abierta span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@keyframes menu-baja{ from{ transform:translateY(-10px); } }
@media (max-width:760px){
  .menu.abierto{ animation:menu-baja .28s cubic-bezier(.2,.7,.2,1); }
  /* ⚠️ Con la cabecera oscura, los enlaces van en blanco: el menú
     desplegable no puede seguir siendo blanco o no se leen. */
  .cabecera-oscura .menu{ background:#0A1628; border-color:rgba(255,255,255,.1); }
}

/* ── Paso de una página a otra: fundido suave, la cabecera quieta ───────
   Sólo Chrome, Edge y Safari 18.2+. En Firefox, o con reduced-motion, se
   cambia de página como siempre: no se pierde nada. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
}
.cabecera{ view-transition-name:cabecera; }
.barra-movil{ view-transition-name:barra-movil; }
::view-transition-old(root){ animation:.2s ease-in both vt-sale; }
::view-transition-new(root){ animation:.45s cubic-bezier(.2,.7,.2,1) both vt-entra; }
@keyframes vt-sale{ to{ opacity:0; } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(16px); } }

/* ── Lo que corre solo se para con la pestaña oculta (lo marca web.js) ── */
.quieto .aurora i, .quieto .suelo::before, .quieto .sales-solid{ animation-play-state:paused !important; }