/* base.css — chasis compartido: tokens, reset, tipografía, .container/.kicker/.section/.card, nav, footer, back-to-top, scroll progress */

@font-face { font-family:'Poppins'; src:url('../assets/fonts/Poppins-Light.ttf'); font-weight:300; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/Poppins-Regular.ttf'); font-weight:400; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/Poppins-SemiBold.ttf'); font-weight:600; }
@font-face { font-family:'Poppins'; src:url('../assets/fonts/Poppins-ExtraBold.ttf'); font-weight:800; }

@property --border-angle {
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* Paleta Good 2026 (Look&feel_Good_2026.pdf, p.5): #2d2e3e · #6934b7 · #dd007f · #52cebf.
   --bg y --bg-deep sostienen el tema oscuro del sitio, que la paleta impresa no cubre.
   --blue se conserva como color de apoyo en degradados; no es de la paleta oficial. */
:root {
  --bg:#10122A; --bg-deep:#090b20; --panel:#2d2e3e;
  --violet:#6934b7; --magenta:#dd007f; --cyan:#52cebf;
  --blue:#2E5BFF; --white:#FFFFFF; --muted:#A9B1CE;
  --section-indicator-size:clamp(.9rem,1.1vw,1.05rem);
  --section-indicator-leading:1.45;
  --section-indicator-tracking:.24em;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--white); font-family:'Poppins',sans-serif; overflow-x:hidden; }

html { scrollbar-width:thin; scrollbar-color:var(--magenta) var(--bg); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--magenta); border-radius:10px; box-shadow:0 0 8px rgba(221,0,127,.6); }
::-webkit-scrollbar-thumb:hover { background:var(--magenta); }

.section { min-height:auto; display:flex; align-items:center; position:relative; padding:9vh 0; }
/* Aire sobre el destino de un ancla. El mismo valor vive como AIRE en core.js para los enlaces
   entre páginas, que necesitan calcular el punto de llegada antes de iniciar el scroll nativo. */
:target { scroll-margin-top:90px; }

.section-full { min-height:100vh; }
.container { width:min(1100px,88vw); margin:0 auto; }
.kicker { color:var(--cyan); font-weight:600; letter-spacing:.35em; font-size:.75rem; margin-bottom:1.2rem; }
h1 { font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:800; line-height:1.1; }
h2 { font-size:clamp(1.6rem,3.5vw,2.8rem); font-weight:800; line-height:1.15; }
h3 { font-size:1.3rem; font-weight:600; }
em { font-style:normal; color:var(--magenta); }
.muted { color:var(--muted); }
.card { background:var(--panel); border-radius:18px; padding:2rem; }

.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between;
  align-items:center; gap:2vw; padding:1.1rem 4vw;
  background:linear-gradient(to bottom, rgba(16,18,42,.65), transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.site-scroll-progress { position:fixed; inset:0 0 auto; z-index:60; height:3px; pointer-events:none;
  background:rgba(255,255,255,.08); }
.site-scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--magenta) 0%, var(--violet) 34%, var(--blue) 67%, var(--cyan) 100%);
  box-shadow:0 0 10px rgba(221,0,127,.8), 0 0 20px rgba(46,91,255,.48); will-change:transform; }
.nav-logo { height:1.9rem; width:auto; flex-shrink:0; }
.nav-menu { display:flex; gap:clamp(1.15rem,1.8vw,2.1rem); list-style:none; }
.nav-menu a { position:relative; display:inline-block; color:var(--white); text-decoration:none;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em;
  opacity:.7; padding-bottom:.35rem; transition:opacity .2s ease; }
.nav-menu a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--magenta); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a.active { opacity:1; }
.nav-menu a:hover::after, .nav-menu a:focus-visible::after, .nav-menu a.active::after { transform:scaleX(1); }
.nav-cta { background:var(--magenta); color:var(--white); text-decoration:none; font-weight:600;
  font-size:.85rem; padding:.6rem 1.2rem; border-radius:99px; flex-shrink:0; }
.nav { transition:padding .3s ease; }
.nav.nav-compact { padding-top:.45rem; padding-bottom:.45rem; }
.nav-logo-link { display:flex; align-items:center; flex-shrink:0; }
.nav-item { position:relative; }
.nav-item.active > a { opacity:1; }
.nav-item.active > a::after { transform:scaleX(1); }
/* La sección abierta se queda subrayada mientras dura el panel, también con el
   cursor dentro de él: el puntero ya salió del <li>, pero el menú sigue vivo. */
.nav-item.open > a { opacity:1; }
.nav-item.open > a::after { transform:scaleX(1); }
.nav-menu a[aria-disabled="true"] { opacity:.42; cursor:default; }
.nav-menu a[aria-disabled="true"]:hover::after { transform:scaleX(0); }
/* --- Mega-menú: panel de pantalla completa ---------------------------------
   Cada sección abre un panel fijo anclado al borde derecho (51% del ancho) y,
   en la mitad libre, una fotografía de la marca. Al posarse sobre un enlace,
   los hermanos se atenúan.

   Dos condiciones estructurales:
   a) El panel cuelga de <body>, no de .nav — la barra lleva backdrop-filter y
      eso la vuelve bloque contenedor de sus hijos fixed. Lo mueve nav.js.
   b) Los enlaces de la barra van alineados a la derecha, dentro de la banda
      del panel: si quedan centrados, bajar el cursor desde un enlace no llega
      al desplegable y se cierra antes de alcanzarlo. */
:root { --mega-ancho:51%; --mega-curva:cubic-bezier(.65,0,.35,1);
  --mega-curva-color:cubic-bezier(.4,0,.2,1); --mega-dur:.4s; }
.nav-mega.mega-portal { position:fixed; inset:0; transform:none; width:auto; min-width:0;
  max-width:none; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; display:block; z-index:40;
  pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity var(--mega-dur) var(--mega-curva), visibility 0s linear var(--mega-dur); }
.nav-mega.mega-portal.mega-visible { opacity:1; visibility:visible;
  transition:opacity var(--mega-dur) var(--mega-curva), visibility 0s linear 0s; }
/* La fotografía no captura el puntero: atravesarla hacia la izquierda cierra el panel. */
.mega-portal .mega-foto { position:absolute; inset:0 auto 0 0; width:calc(100% - var(--mega-ancho));
  overflow:hidden; pointer-events:none; }
.mega-portal .mega-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); animation:mega-respirar 26s ease-in-out infinite; }
.mega-portal .mega-foto::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,11,32,.45) 0%, rgba(9,11,32,.1) 45%, rgba(9,11,32,.82) 100%),
    linear-gradient(180deg, rgba(9,11,32,.6) 0%, rgba(9,11,32,0) 32%); }
@keyframes mega-respirar {
  0%,100% { transform:scale(1.06) translate3d(0,0,0); }
  50%     { transform:scale(1.14) translate3d(-1.5%,-1%,0); } }
.mega-portal .mega-panel { position:absolute; inset:0 0 0 auto; width:var(--mega-ancho);
  background:var(--bg-deep); pointer-events:none; display:flex; flex-direction:column;
  align-items:flex-start; padding:7.5rem clamp(2rem,4vw,3.5rem) 3rem;
  transform:translateX(40px); transition:transform var(--mega-dur) var(--mega-curva); }
/* Corredor invisible entre el primer enlace de la barra y el panel. Permite bajar
   desde "Desafíos" y luego desplazarse a la derecha sin perder el desplegable. */
.mega-portal .mega-panel::after { content:''; position:absolute; top:0; right:100%; bottom:0;
  width:clamp(180px,16vw,260px); pointer-events:auto; }
.mega-portal.mega-visible .mega-panel { transform:translateX(0); pointer-events:auto; }
.mega-portal .mega-lista { list-style:none; margin:0; padding:0; }
.mega-portal .mega-lista li + li { margin-top:.7rem; }
.mega-portal .mega-lista a, .mega-portal .mega-todo { color:var(--white); text-decoration:none;
  font-size:clamp(1.3rem,1.85vw,1.85rem); line-height:1.25; font-weight:500; letter-spacing:-.03em;
  text-transform:none; opacity:1; }
.mega-portal .mega-lista a { display:inline-block; padding:0; border-radius:0; background:none;
  transition:color var(--mega-dur) var(--mega-curva-color); }
.mega-portal .mega-lista:has(a:hover) a:not(:hover),
.mega-portal .mega-lista:has(a:focus-visible) a:not(:focus-visible) { color:var(--muted); }
.mega-portal .mega-lista a:hover:not([aria-disabled="true"]),
.mega-portal .mega-lista a:focus-visible { color:var(--white); }
.mega-portal .mega-lista a[aria-disabled="true"] { color:var(--muted); cursor:default; }
.mega-portal .mega-lista a::after, .mega-portal .mega-todo::after { display:none; }
.mega-portal .mega-todo { position:relative; display:inline-block; margin-top:2.4rem;
  padding-left:2.4rem; color:var(--muted);
  transition:color var(--mega-dur) var(--mega-curva-color), transform var(--mega-dur) var(--mega-curva-color); }
.mega-portal .mega-todo::before { content:'↳'; position:absolute; left:0; color:inherit; }
.mega-portal .mega-todo:hover, .mega-portal .mega-todo:focus-visible {
  color:var(--white); transform:translateX(6px); }
/* Velo sobre el resto de la página mientras hay un panel abierto. */
.mega-velo { position:fixed; inset:0; z-index:39; background:rgba(9,11,32,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--mega-dur) var(--mega-curva) .2s, visibility 0s linear var(--mega-dur); }
body.mega-abierto .mega-velo { opacity:1; visibility:visible;
  transition:opacity var(--mega-dur) var(--mega-curva) .2s, visibility 0s linear 0s; }
/* Enlaces pegados a la derecha: es lo que pone la barra dentro de la banda del panel. */
@media (min-width:981px) {
  .nav-menu { margin-left:auto; }
  .nav-cta { margin-left:1.6rem; }
}
.nav-toggle { display:none; flex-direction:column; gap:5px; width:34px; padding:8px 4px;
  background:none; border:0; cursor:pointer; }
.nav-toggle span { display:block; height:2px; background:var(--white); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease; }
.nav.nav-open .nav-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
.nav.nav-open .nav-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.nav-backdrop { display:none; }

/* Componente compartido: rueda de los tres pilares */
.cultura-componente { --area:var(--cyan); display:grid; grid-template-columns:minmax(360px,.95fr) minmax(320px,1.05fr);
  gap:clamp(2rem,6vw,6rem); align-items:center; }
.cultura-componente[data-active="engagement"] { --area:var(--cyan); }
.cultura-componente[data-active="experiencia"] { --area:var(--violet); }
.cultura-componente[data-active="endomarketing"] { --area:var(--magenta); }
.cultura-wheel { position:relative; width:min(540px,100%); aspect-ratio:1; margin:auto; }
.cultura-wheel::before { content:''; position:absolute; inset:11%; border-radius:50%; opacity:.55;
  background:radial-gradient(circle, color-mix(in srgb, var(--area) 24%, transparent), transparent 67%);
  filter:blur(14px); transition:background .45s ease; }
.cultura-wheel-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cultura-orbita { fill:none; stroke:rgba(255,255,255,.09); stroke-width:1; stroke-dasharray:2 9; }
.cultura-arcos path { fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.12); stroke-width:1;
  transform-origin:210px 210px; transition:fill .35s ease, transform .35s ease, filter .35s ease; }
.cultura-arcos path:hover { fill:rgba(255,255,255,.11); }
.cultura-arcos path.is-active { fill:var(--area); transform:scale(1.025);
  filter:drop-shadow(0 16px 24px color-mix(in srgb, var(--area) 24%, transparent)); }
.cultura-centro { position:absolute; inset:32%; z-index:2; border:1px solid rgba(255,255,255,.13);
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(16,18,42,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 30px rgba(255,255,255,.035), 0 22px 60px rgba(0,0,0,.24); }
.cultura-centro::after { content:''; width:30%; height:2px; margin-top:.85rem; border-radius:2px;
  background:var(--area); box-shadow:0 0 14px var(--area); transition:background .35s ease; }
.cultura-centro span { color:var(--muted); font-size:clamp(.52rem,1vw,.66rem); letter-spacing:.18em;
  text-transform:uppercase; }
.cultura-centro strong { margin-top:.2rem; font-size:clamp(1.15rem,2.5vw,1.85rem); text-transform:uppercase; }
.cultura-nodo { position:absolute; z-index:3; appearance:none; border:0; background:transparent; color:var(--muted);
  font:600 clamp(.65rem,1.2vw,.82rem)/1.2 'Poppins',sans-serif; text-transform:uppercase;
  letter-spacing:.12em; cursor:pointer; display:flex; align-items:center; gap:.55rem;
  transition:color .25s ease, transform .25s ease; }
.cultura-nodo:hover, .cultura-nodo:focus-visible, .cultura-nodo.is-active { color:var(--white); }
.cultura-nodo:focus-visible { outline:2px solid var(--white); outline-offset:7px; border-radius:4px; }
.cultura-nodo.is-active { transform:translateY(-2px); }
.cultura-nodo-num { width:1.65rem; height:1.65rem; display:grid; place-items:center; border-radius:50%;
  color:var(--bg); background:var(--area); font-size:.55rem; letter-spacing:0; }
.cultura-nodo-engagement { top:5.5%; left:50%; transform:translateX(-50%); }
.cultura-nodo-engagement.is-active { transform:translate(-50%,-2px); }
.cultura-nodo-experiencia { right:-3%; bottom:22%; }
.cultura-nodo-endomarketing { left:-6%; bottom:22%; }
.cultura-panel { --spot-x:50%; --spot-y:50%; position:relative; min-height:430px;
  padding:clamp(1.7rem,4vw,3rem); overflow:hidden; display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.11); border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:0 26px 70px rgba(0,0,0,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform-style:preserve-3d; will-change:transform; }
.cultura-panel::before { content:''; position:absolute; width:220px; height:220px; top:-100px; right:-90px;
  border-radius:50%; background:var(--area); opacity:.16; filter:blur(45px); transition:background .4s ease; }
.cultura-panel::after { content:''; position:absolute; inset:-1px; z-index:3; padding:2px;
  border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(210px circle at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--area) 95%, white), color-mix(in srgb, var(--area) 42%, transparent) 38%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--area) 60%, transparent)); transition:opacity .25s ease; }
.cultura-panel.is-spotlit::after { opacity:1; }
.cultura-border-runner { --border-angle:0deg; position:absolute; inset:-1px; z-index:2;
  padding:2px; border-radius:inherit; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--border-angle), transparent 0deg 278deg,
    color-mix(in srgb, var(--area) 12%, transparent) 302deg, var(--area) 326deg,
    white 338deg, var(--area) 348deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 7px var(--area));
  animation:cultura-border-orbit 3.2s linear infinite paused; transition:opacity .25s ease; }
.cultura-panel.is-spotlit .cultura-border-runner { opacity:.9; animation-play-state:running; }
@keyframes cultura-border-orbit { to { --border-angle:360deg; } }
.cultura-panel-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cultura-panel-indice { color:var(--muted); font-size:.68rem; letter-spacing:.16em; }
.cultura-panel-accion { display:inline-flex; align-items:center; gap:.5rem; color:var(--area);
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.cultura-panel-accion::before { content:''; width:24px; height:1px; background:currentColor; }
.cultura-panel-titulo { margin-top:clamp(2rem,5vw,3.8rem); font-size:clamp(2rem,4vw,3.5rem); line-height:1; }
.cultura-panel-texto { max-width:520px; margin-top:1.15rem; color:var(--muted); line-height:1.75; }
.cultura-tags { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.cultura-tags li { padding:.55rem .85rem; border:1px solid rgba(255,255,255,.12); border-radius:99px;
  background:rgba(10,12,32,.28); color:var(--white); font-size:.72rem; }
.cultura-panel-nav { width:100%; margin-top:auto; padding-top:clamp(1.5rem,3vw,2.4rem);
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; }
.cultura-flecha { width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  background:rgba(255,255,255,.035); color:var(--white); cursor:pointer; font-size:1.1rem;
  transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.cultura-flecha:hover, .cultura-flecha:focus-visible { background:var(--area); border-color:var(--area);
  color:var(--bg); transform:scale(1.05); }
.cultura-progreso { height:2px; overflow:hidden; background:rgba(255,255,255,.1); }
.cultura-progreso span { display:block; width:100%; height:100%; background:var(--area); transform-origin:left;
  transition:transform .35s ease, background .35s ease; }

.back-to-top { position:fixed; right:2rem; bottom:2rem; z-index:40; width:48px; height:48px;
  border-radius:50%; border:none; cursor:pointer; background:var(--magenta); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
  box-shadow:0 10px 26px -8px rgba(221,0,127,.65); }
.back-to-top.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover { background:var(--cyan); }
.back-to-top svg { width:20px; height:20px; }
/* Anillo de avance de lectura. La pista tenue es el ::before del botón; el relleno es un
   elemento aparte al que una máscara cónica le revela solo hasta --avance grados, que core.js
   actualiza en cada scroll. Sin SVG ni stroke-dasharray: es la técnica de la referencia Davies,
   adaptada de un botón cuadrado a uno circular. */
.back-to-top::before { content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.16); pointer-events:none; }
.back-to-top-anillo { position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--cyan); pointer-events:none;
  -webkit-mask-image:conic-gradient(#000 var(--avance,0deg), transparent 0);
  mask-image:conic-gradient(#000 var(--avance,0deg), transparent 0); }
/* Rebote de la flecha, tomado de la referencia Davies: dos saltos y una pausa larga en el mismo
   ciclo de 2s. Las alturas se bajaron de -8/-5px a -6/-4px porque nuestra flecha es más grande
   dentro del botón y con las originales llegaba a rozar el borde. Solo corre con el botón visible. */
.back-to-top.visible svg { animation:flecha-rebote 2s linear infinite; }
@keyframes flecha-rebote {
  0%, 20%, 50%, 80%, 100% { transform:translateY(0); }
  40% { transform:translateY(-6px); }
  60% { transform:translateY(-4px); }
}
.footer-wrap { display:flex; flex-direction:column; }
.footer-status { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.footer-status .kicker { margin:0; }
.footer-status > p:last-child { display:flex; align-items:center; gap:.6rem; color:var(--muted);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; }
.footer-status-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 14px rgba(53,214,160,.85); animation:footer-status-pulse 2.4s ease-in-out infinite; }
@keyframes footer-status-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.45; transform:scale(.7); }
}
.footer-hero { display:flex; flex-direction:column; align-items:stretch; gap:clamp(2.5rem,5vh,4rem);
  padding:clamp(3rem,7vh,5.5rem) 0; }
.footer-hero h2 { max-width:900px; font-size:clamp(3.3rem,8.25vw,7.7rem); line-height:.88; letter-spacing:-.045em; }
.footer-hero h2 em { text-shadow:0 0 35px rgba(221,0,127,.36); }
.footer-cta { position:relative; isolation:isolate; overflow:hidden; display:grid;
  grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.3rem,2.5vw,2rem) clamp(1.25rem,3.2vw,3rem); border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(255,255,255,.24); color:var(--white); text-decoration:none; }
.footer-cta::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--cyan);
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.footer-cta:hover::before, .footer-cta:focus-visible::before { transform:scaleY(1); }
.footer-cta:hover, .footer-cta:focus-visible { color:var(--bg); }
.footer-cta-label { font-size:clamp(1.25rem,2.4vw,2.25rem); font-weight:600; letter-spacing:-.035em; }
.footer-cta-meta { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.14em;
  transition:color .3s ease; }
.footer-cta:hover .footer-cta-meta, .footer-cta:focus-visible .footer-cta-meta { color:rgba(16,18,42,.68); }
.footer-cta-icon { width:clamp(36px,4vw,50px); aspect-ratio:1; display:grid; place-items:center;
  margin-left:clamp(-2rem,-2vw,-.75rem); color:#25D366;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), color .3s ease; }
.footer-cta-icon svg { width:100%; height:100%; fill:currentColor; }
.footer-cta:hover .footer-cta-icon, .footer-cta:focus-visible .footer-cta-icon {
  color:var(--bg); transform:scale(1.1) rotate(-4deg); }
.footer-divider { height:1px; background:rgba(255,255,255,.17); }
.footer-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
  gap:clamp(2rem,5vw,4.5rem); padding:3rem 0; }
.footer-sitemap { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.6rem; }
.footer-brand #thumb-svg { width:clamp(130px,13vw,190px); margin:0 0 1.2rem; }
.footer-brand p { max-width:340px; font-size:.82rem; line-height:1.65; }
.footer-brand address { margin-top:1.2rem; color:var(--muted); font-style:normal; font-size:.82rem; line-height:1.6; }
.footer-social { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.2rem; }
.footer-social a { color:var(--muted); font-size:.78rem; text-decoration:none; }
.footer-social a:hover:not([aria-disabled="true"]) { color:var(--white); }
.footer-links a[aria-disabled="true"], .footer-social a[aria-disabled="true"] { opacity:.45; cursor:default; }
.footer-label { margin-bottom:1rem; color:var(--muted); font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.footer-links a, .footer-web { position:relative; color:var(--white); text-decoration:none; font-size:.85rem; }
.footer-links a::after, .footer-web::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.footer-links a:hover::after, .footer-web:hover::after { transform:scaleX(1); }
.footer-column address { margin-bottom:1rem; color:var(--white); font-size:.82rem; font-style:normal; line-height:1.7; }
.footer-wordmark { --wordmark-x:50%; --wordmark-y:50%; position:relative; isolation:isolate; width:100%;
  height:clamp(140px,18vw,245px); margin:clamp(-1rem,-1vw,0rem) 0 -1px; overflow:hidden;
  cursor:crosshair; user-select:none; }
.footer-wordmark-svg { position:absolute; top:0; left:0; width:100%; height:clamp(180px,24vw,330px); overflow:visible; }
.footer-wordmark-svg text { fill:transparent; font-family:'Poppins',sans-serif; font-size:350px;
  font-weight:800; text-anchor:middle; paint-order:stroke; stroke-linecap:round; stroke-linejoin:round; }
.footer-wordmark-base text { stroke:rgba(255,255,255,.27); stroke-width:1.5px; }
.footer-wordmark-glow {
  -webkit-mask-image:radial-gradient(circle 180px at var(--wordmark-x) var(--wordmark-y), #000 0%, transparent 72%);
  mask-image:radial-gradient(circle 180px at var(--wordmark-x) var(--wordmark-y), #000 0%, transparent 72%);
  opacity:0; filter:drop-shadow(0 0 7px rgba(255,77,109,.8)) drop-shadow(0 0 20px rgba(139,92,246,.55));
  transition:opacity .22s ease, filter .25s ease; }
.footer-wordmark-glow text { stroke:url(#good-ai-gradient); stroke-width:3px; }
.footer-wordmark.is-hovered .footer-wordmark-glow { opacity:1;
  filter:drop-shadow(0 0 10px rgba(255,138,0,.9)) drop-shadow(0 0 26px rgba(139,92,246,.72)); }
.footer-bottom { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:2rem;
  padding:1.4rem 0 0; border-top:1px solid rgba(255,255,255,.1); color:var(--muted);
  font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; }
.footer-bottom p:nth-child(2) { text-align:right; }

/* Hero de sección — variante liviana, sin secuencia de frames */
.seccion-hero { min-height:auto; padding:clamp(9rem,16vh,12rem) 0 clamp(4rem,8vh,7rem);
  position:relative; overflow:hidden; }
.seccion-hero::before { content:''; position:absolute; inset:0; z-index:0; opacity:.5;
  background:url('../assets/brand/textura-fondo-glow.jpg') center/cover no-repeat;
  /* La textura terminaba a ras del hero y dejaba un escalón horizontal contra la sección
     siguiente, visible en las cuatro portadas. Se desvanece antes del borde inferior —también
     antes del recorte de `.editorial-hero`, cuyo ::before sobresale un 12%— para que la portada
     entregue el fondo sin costura. */
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 50%,transparent 88%); }
.seccion-hero .container { position:relative; z-index:1; }
.seccion-hero-bajada { max-width:58ch; margin-top:1.6rem; font-size:1.05rem; line-height:1.7; }
.seccion-hero-bajada p + p { margin-top:1rem; }

/* Portadas editoriales de las secciones principales. Perspectivas fija el canon: misma
   composición, escala, dos pinturas y movimiento de textura en todas las páginas que lo usan. */
.editorial-hero::before { inset:-12% 0; transform:translate3d(0,var(--editorial-hero-parallax-y,0px),0) scale(1.06);
  transform-origin:center; will-change:transform; }
.editorial-hero-container { display:flex; flex-direction:column; }
.editorial-hero-container > .breadcrumb { margin:0 0 clamp(2.2rem,5vh,3.5rem); }
.editorial-hero-content { display:flex; flex-direction:column; align-items:flex-start; width:min(920px,100%); }
.editorial-hero-content > .kicker { max-width:none; margin:0 0 1.15rem; color:var(--cyan);
  font-size:var(--section-indicator-size); font-weight:600; line-height:var(--section-indicator-leading);
  letter-spacing:var(--section-indicator-tracking); text-transform:uppercase; }
.editorial-hero-title { display:flex; flex-direction:column; width:100%; max-width:none; margin:0;
  row-gap:-.045em; font-size:min(clamp(4.1rem,7.8vw,7.5rem),calc(min(920px,92vw)/(var(--editorial-title-ch,16)*.5)));
  font-weight:700; line-height:.98;
  letter-spacing:-.045em; font-variant-ligatures:none; }
body[data-section="desafios"] .editorial-hero-title { --editorial-title-word-ch:12; }
body[data-section="como-ayudamos"] .editorial-hero-title,
body[data-section="experiencia"] .editorial-hero-title { --editorial-title-word-ch:15; }
.editorial-title-line { display:block; width:max-content; max-width:100%; overflow:visible;
  box-sizing:content-box; padding:.18em .14em .24em .02em; margin:-.18em -.14em -.1em -.02em; }
.editorial-title-line > span { display:block; white-space:nowrap; }
.editorial-title-outline > span { color:transparent; -webkit-text-stroke:1.35px rgba(255,255,255,.92);
  text-shadow:0 12px 36px rgba(3,5,20,.18); }
.editorial-title-solid { align-self:flex-end; }
.editorial-title-solid > span { color:#fff; background:none; -webkit-text-fill-color:#fff;
  mix-blend-mode:exclusion; text-shadow:none; }
.editorial-hero-content > .seccion-hero-bajada { max-width:42ch; margin:clamp(1.25rem,2.4vh,1.8rem) 0 0;
  color:rgba(255,255,255,.82); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.55; }

@media (max-width:640px) {
  .editorial-hero::before { inset:-10% 0; transform:translate3d(0,var(--editorial-hero-parallax-y,0px),0) scale(1.08); }
  .editorial-hero-container > .breadcrumb { margin-bottom:2.2rem; font-size:.72rem; }
  .editorial-hero-content { width:100%; }
  .editorial-hero-content > .kicker { max-width:30ch; line-height:1.8; }
  .editorial-hero-title { font-size:min(clamp(3.15rem,14vw,4.25rem),calc(88vw/(var(--editorial-title-word-ch,9)*.55)));
    line-height:1.02; row-gap:.04em; }
  .editorial-title-line { width:100%; max-width:100%; box-sizing:border-box;
    padding:.18em .08em .24em 0; margin:-.18em -.08em -.1em 0; }
  .editorial-title-line > span { white-space:normal; }
  .editorial-title-solid { align-self:flex-start; }
  .editorial-hero-content > .seccion-hero-bajada { max-width:29ch; margin-top:1.2rem; font-size:.96rem; line-height:1.55; }
}
@media (prefers-reduced-motion:reduce) {
  .editorial-hero::before { transform:scale(1.06); }
}

.breadcrumb { display:flex; gap:.6rem; margin-bottom:1.8rem; color:var(--muted); font-size:.78rem; }
.breadcrumb a, .breadcrumb [aria-current="page"] { position:relative; display:inline-block; padding-bottom:.28rem; color:var(--muted); text-decoration:none; transition:color .25s ease; }
.breadcrumb a::after, .breadcrumb [aria-current="page"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--magenta); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.breadcrumb a:hover, .breadcrumb a:focus-visible, .breadcrumb [aria-current="page"] { color:var(--white); }
.breadcrumb a:hover::after, .breadcrumb a:focus-visible::after, .breadcrumb [aria-current="page"]::after { transform:scaleX(1); }

/* CTA de cierre — banda neutra, un solo botón */
.cta-cierre { text-align:center; padding:clamp(5rem,11vh,9rem) 0; border-top:1px solid rgba(255,255,255,.1); }
.cta-cierre h2 { margin-bottom:2rem; }
.btn-primario { display:inline-block; padding:.95rem 2rem; border-radius:999px;
  background:var(--magenta); color:var(--white); font-weight:600; text-decoration:none;
  transition:transform .2s ease, background .2s ease; }
.btn-primario:hover { transform:translateY(-2px); background:var(--cyan); color:var(--bg); }

.site-footer { padding:clamp(4rem,8vh,7rem) 0 2rem; position:relative; overflow:hidden; }

.desafios-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.desafio-card { min-height:250px; display:flex; flex-direction:column; padding:clamp(1.4rem,2.5vw,2rem);
  border:1px solid rgba(255,255,255,.1); border-radius:18px; background:linear-gradient(145deg,rgba(30,36,64,.78),rgba(19,22,50,.58));
  color:var(--white); text-decoration:none; transition:transform .3s ease,border-color .3s ease,background .3s ease; }
.desafio-card::before { content:''; width:36px; height:2px; margin-bottom:auto; background:var(--cyan); box-shadow:0 0 12px rgba(82,206,191,.5); }
.desafio-card:nth-child(3n+2)::before { background:var(--magenta); }
.desafio-card:nth-child(3n)::before { background:var(--violet); }
.desafio-card > span { margin:1.7rem 0 .65rem; color:var(--muted); font-size:.62rem; letter-spacing:.16em; }
.desafio-card h3 { max-width:24ch; font-size:clamp(1.05rem,1.7vw,1.45rem); line-height:1.35; }
.desafio-card b { margin-top:1.5rem; color:var(--cyan); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.desafio-card:hover { transform:translateY(-6px); border-color:rgba(82,206,191,.4); background:var(--panel); }

@media (max-width: 980px) {
  body.nav-menu-open { overflow:hidden; }
  .nav-backdrop { position:fixed; inset:0; z-index:49; display:block; padding:0; border:0;
    background:rgba(5,7,22,.68); opacity:0; visibility:hidden; pointer-events:none;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    transition:opacity .25s cubic-bezier(.645,.045,.355,1),visibility 0s linear .25s; }
  .nav-backdrop.is-visible { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .nav-toggle { display:flex; order:3; }
  .nav-menu { position:fixed; inset:auto 0 0; top:56px; height:calc(100vh - 56px);
    flex-direction:column; gap:0; padding:1.5rem 6vw 7rem; overflow-y:auto; background:var(--bg);
    transform:translateX(100%); visibility:hidden; pointer-events:none;
    transition:transform .25s cubic-bezier(.645,.045,.355,1),visibility 0s linear .25s; }
  .nav-menu[data-open] { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
  .nav-item > a { display:block; padding:.8rem 0; }
  /* En móvil el panel a media pantalla no cabe: los desplegables no se mueven a
     <body>, se quedan en su <li> y solo aparece la lista dentro del panel lateral. */
  .nav-mega { position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; padding:.2rem 0 .6rem .9rem; background:none; border:0; box-shadow:none; display:none; }
  .nav-item.open .nav-mega { display:block; transform:none; }
  .nav-mega::before { display:none; }
  .mega-foto { display:none; }
  .mega-panel { display:block; padding:.35rem 0 .6rem .35rem; background:none; }
  .mega-lista { list-style:none; margin:0; padding:0; }
  .mega-lista a { display:block; padding:.55rem 0; color:var(--white); text-decoration:none;
    font-size:1.02rem; font-weight:400; line-height:1.35; letter-spacing:0; text-transform:none; }
  .mega-lista a[aria-disabled="true"] { color:var(--muted); cursor:default; }
  .mega-lista a::after, .mega-todo::after { display:none; }
  .mega-todo { position:relative; display:inline-block; margin-top:.7rem; padding-left:1.5rem;
    color:var(--muted); text-decoration:none; font-size:1.02rem; }
  .mega-todo::before { content:'↳'; position:absolute; left:0; }
  .mega-velo { display:none; }
  .nav-cta { margin-left:auto; }
}
@media (max-width: 760px) {
  .cultura-componente { grid-template-columns:1fr; gap:1.5rem; }
  .cultura-wheel { width:min(410px,92vw); }
  .cultura-nodo { font-size:.6rem; letter-spacing:.08em; }
  .cultura-nodo-experiencia { right:-1%; }
  .cultura-nodo-endomarketing { left:-2%; }
  .cultura-panel { min-height:440px; border-radius:22px; }
  .footer-status { align-items:flex-start; flex-direction:column; gap:1rem; }
  .footer-hero { gap:2.5rem; padding:3rem 0; }
  .footer-hero h2 { font-size:clamp(2.8rem,13vw,4.6rem); line-height:.88; }
  .footer-cta { grid-template-columns:1fr auto; gap:1rem; padding:1.25rem 1rem; }
  .footer-cta-meta { display:none; }
  .footer-cta-label { max-width:230px; font-size:1.15rem; line-height:1.2; }
  .footer-cta-icon { width:42px; margin-left:0; }
  .footer-column address { font-size:.75rem; overflow-wrap:anywhere; }
  .footer-wordmark { height:92px; margin-top:1.5rem; }
  .footer-wordmark-svg { height:125px; }
  .footer-wordmark-glow {
    -webkit-mask-image:linear-gradient(100deg, transparent 4%, #000 40%, #000 62%, transparent 96%);
    mask-image:linear-gradient(100deg, transparent 4%, #000 40%, #000 62%, transparent 96%);
    opacity:1;
  }
  .footer-bottom { grid-template-columns:1fr; gap:.6rem; }
  .footer-bottom p:nth-child(2) { text-align:left; font-size:.53rem; }
  .nav-cta { font-size:.72rem; padding:.5rem .9rem; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-sitemap { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .footer-sitemap { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega,.nav-menu,.nav-backdrop,.nav-toggle span,.mega-velo,
  .mega-portal .mega-panel,.mega-portal .mega-lista a,.mega-portal .mega-todo {
    transition:none!important; }
  .mega-portal .mega-foto img { animation:none; transform:scale(1.06); }
  .mega-portal .mega-todo:hover,.mega-portal .mega-todo:focus-visible { transform:none; }
  .footer-status-dot { animation:none; }
  .back-to-top.visible svg { animation:none; }
  .footer-wordmark-glow {
    -webkit-mask-image:linear-gradient(100deg, transparent 4%, #000 40%, #000 62%, transparent 96%);
    mask-image:linear-gradient(100deg, transparent 4%, #000 40%, #000 62%, transparent 96%);
    opacity:1;
  }
}
@media (max-width:980px) {
  .desafios-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .desafios-grid { grid-template-columns:1fr; }
  .desafio-card { min-height:210px; }
}
@media (prefers-reduced-motion:reduce) {
  .desafio-card { transition:none; }
}

/* Cursor global: punto aprobado en laboratorio (10px) y estados Ver / Drag. El seguimiento y las
   escalas los anima cursor.js con los tiempos de Tres Mares. screen conserva el texto blanco por
   encima del círculo en la paleta oscura de Good; el fondo al 88% aporta la transparencia sutil. */
.cursor-dot { position:fixed; top:0; left:0; z-index:300; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:50%; background:var(--magenta); pointer-events:none;
  opacity:0; will-change:transform; }
.cursor-special { position:fixed; top:0; left:0; z-index:301; display:none; place-items:center;
  width:clamp(72px,5.375vw,86px); height:clamp(72px,5.375vw,86px);
  margin-left:clamp(-43px,-2.6875vw,-36px); margin-top:clamp(-43px,-2.6875vw,-36px);
  border-radius:50%; background:rgba(221,0,127,.88); color:var(--white); mix-blend-mode:screen;
  pointer-events:none; opacity:0; transform:scale(0); transform-origin:50% 50%; will-change:transform; }
.cursor-special span { opacity:0; font:700 clamp(10px,.75vw,12px)/1 'Poppins',sans-serif;
  letter-spacing:.08em; text-transform:uppercase; }
@media (hover:none),(pointer:coarse) { .cursor-dot,.cursor-special { display:none!important; } }

/* Bloque de cifras — compartido por el Home y el hub de Experiencia.
   Vivía duplicado en home.css y experiencia.css, y las copias se separaron: solo el Home recibió
   el odómetro por dígito. Aquí queda una sola definición para que no vuelvan a divergir. */
.stats-wrap { border-top:1px solid rgba(255,255,255,.2); }
.stats-heading { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0 2.2rem;
  color:var(--muted); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
/* `1fr` a secas, no `minmax(0,1fr)`: el mínimo automático deja que la columna central crezca hasta
   contener a `+100.000` (468 px frente a 316 px de las laterales). Con el mínimo forzado a 0 la
   pista no puede crecer y la cifra invade la columna siguiente. Por lo mismo `.stat` no lleva
   `min-width:0`. */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); }
.stat { min-height:250px; display:flex; flex-direction:column; justify-content:space-between;
  padding-right:clamp(1.2rem,3vw,3rem); }
.stat + .stat { padding-left:clamp(1.2rem,3vw,3rem); border-left:1px solid rgba(255,255,255,.15); }
.stat-index { color:var(--muted); font-size:.6rem; letter-spacing:.16em; }
.stat-num,[data-odometer] { display:inline-grid; grid-template-areas:'number'; align-self:flex-start; width:max-content; margin-top:auto;
  font-size:clamp(4rem,7.6vw,7.8rem); font-weight:800; line-height:.82; letter-spacing:-.08em;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Reserva invisible del valor final: la cifra no cambia de ancho ni de posición mientras rueda. */
.stat-num::after,[data-odometer]::after { content:attr(data-reserva); grid-area:number; visibility:hidden; pointer-events:none; }
/* La cifra cuenta sobre su propio texto; `::after` mantiene reservado el ancho del valor final desde
   el primer cuadro, así la caja no cambia de tamaño mientras los números avanzan. */
.stat:nth-child(2) .stat-num { color:var(--cyan); font-size:clamp(3rem,6vw,6.3rem); }
.stat-label { margin-top:1.4rem; color:var(--muted); font-size:.82rem; line-height:1.45; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:760px) {
  .stats-heading { font-size:.53rem; }
  .stats-row { grid-template-columns:1fr; }
  .stat { min-height:190px; padding:1.2rem 0; }
  .stat + .stat { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.15); }
  .stat-num,.stat:nth-child(2) .stat-num { font-size:clamp(3.8rem,18vw,5.2rem); }
}

/* Cierre violeta + sticky reveal del footer compartido por todo el sitio. */
.cta-cierre,.caso-close,.conversemos-contacto {
  background:
    linear-gradient(180deg,rgba(18,18,54,.08),rgba(31,22,78,.7)),
    url('../assets/brand/textura-fondo-glow.jpg') center/cover;
}
@media (min-width:761px) {
  body:has(> .site-footer) { background:var(--bg-deep); }
  body > main,
  body > section,
  body > header,
  body > aside {
    position:relative;
    z-index:2;
  }
  body > main {
    background:var(--bg);
    box-shadow:0 44px 90px rgba(0,0,0,.38);
  }
  body > .cta-cierre,
  body > main > .cta-cierre,
  body > main > .caso-close,
  body > main > .conversemos-contacto {
    box-shadow:0 44px 90px rgba(0,0,0,.38);
  }
  body > .site-footer {
    position:sticky;
    bottom:0;
    z-index:0;
    transform:translate3d(0,var(--footer-sticky-nudge,0px),0);
    visibility:hidden;
    clip-path:inset(var(--footer-reveal-clip,100%) 0 0);
    background:var(--bg-deep);
  }
  body.footer-reveal-ready > .site-footer { visibility:visible; }
}

/* Franja de desenfoque fija al pie de la ventana, en todo el sitio (ver js/blur-inferior.js).
   Tres capas con backdrop-filter creciente, cada una enmascarada en su propia franja: la cascada
   es la que da la rampa suave, un blur unico deja un corte duro.

   CONTRATO DE CAPAS — la franja ocupa el z-index 30:
     · nada del sitio debe ocupar el rango 21-38, reservado alrededor de la franja;
     · lo que deba leerse nitido POR ENCIMA de ella sube a 31 (ver el hero de capacidades);
     · controles marcados con data-blur-exclusion apagan la franja solo mientras la intersectan;
     · quedan siempre por encima el mega-menu (39/40), la barra (50), el progreso (60) y el
       cursor (300/301), y por debajo el contenido corriente (0-20) y el footer sticky (0). */
.site-blur-bottom { position:fixed; left:0; right:0; bottom:0; z-index:30; height:20vh;
  pointer-events:none; }
.site-blur-bottom.is-returning { transition:opacity .16s cubic-bezier(.22,1,.36,1); }
.site-blur-bottom.is-context-transition { transition:opacity .18s cubic-bezier(.22,1,.36,1); }
.site-blur-bottom span { position:absolute; inset:0; }
.site-blur-bottom span:nth-child(1) { backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
  mask-image:linear-gradient(rgba(0,0,0,0) 50%,#000 62.5%,#000 75%,rgba(0,0,0,0) 87.5%);
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 50%,#000 62.5%,#000 75%,rgba(0,0,0,0) 87.5%); }
.site-blur-bottom span:nth-child(2) { backdrop-filter:blur(3.5px); -webkit-backdrop-filter:blur(3.5px);
  mask-image:linear-gradient(rgba(0,0,0,0) 62.5%,#000 75%,#000 87.5%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 62.5%,#000 75%,#000 87.5%,rgba(0,0,0,0) 100%); }
.site-blur-bottom span:nth-child(3) { backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  mask-image:linear-gradient(rgba(0,0,0,0) 75%,#000 87.5%,#000 100%);
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 75%,#000 87.5%,#000 100%); }
@media (max-width:640px) { .site-blur-bottom { height:16vh; } }

/* Flecha de descenso canónica para CTA de heroes. No usar el carácter tipográfico ↓: el chevrón,
   su círculo y su movimiento se reutilizan donde el hero adopta este patrón. */
.hero-scroll-icon { position:relative; width:38px; height:38px; flex:0 0 38px; border:1px solid rgba(255,255,255,.32);
  border-radius:50%; color:#fff; background:transparent;
  transition:transform .3s ease,border-color .3s ease,background .3s ease; }
.hero-scroll-icon::before { content:""; position:absolute; left:50%; top:50%; display:block;
  width:11px; height:8px; margin:-4px 0 0 -5.5px; background:currentColor;
  clip-path:polygon(0 0,50% 68%,100% 0,100% 29%,50% 100%,0 29%);
  animation:hero-scroll-icon 2s ease-in-out infinite; }
@keyframes hero-scroll-icon { 0% { transform:translateY(-10%); opacity:0; } 50% { transform:translateY(0); opacity:1; } 100% { transform:translateY(10%); opacity:0; } }
@keyframes hero-kicker-reveal { to { opacity:1; } }
@keyframes hero-actions-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }