/* =============================================================
   GRUPO GURÚ 2026 — Módulos de alto impacto y motion
   Se carga DESPUÉS de gg-2026.css y añade:
   · secciones oscuras cinematográficas con navegación adaptativa
   · track horizontal anclado (scroll vertical → desplazamiento lateral)
   · tarjetas que se apilan al hacer scroll
   · texto que se revela palabra por palabra ligado al scroll
   · reveal de imágenes por máscara y cursor personalizado
   ============================================================= */

:root{
  --noche:#070B14;
  --noche-2:#0E1524;
  --noche-3:#18202F;
  --linea-noche:rgba(255,255,255,.12);
  --texto-noche:rgba(226,235,247,.72);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Secciones oscuras ---------- */
.gg-dark{
  position:relative;background:var(--noche);color:var(--texto-noche);
  isolation:isolate;
  /* `clip` recorta como `hidden` pero NO crea contexto de scroll, así que
     no rompe el position:sticky del track anclado que va dentro. */
  overflow:clip;
}
@supports not (overflow:clip){ .gg-dark:not(.gg-track){overflow:hidden} }
.gg-dark h1,.gg-dark h2,.gg-dark h3,.gg-dark h4{color:#fff}
.gg-dark strong{color:#fff}
.gg-dark .gg-lede{color:rgba(226,235,247,.82)}
.gg-dark .gg-eyebrow{color:#4FD0F5}
.gg-dark .gg-btn--ghost{background:transparent;color:#fff;border-color:var(--linea-noche);box-shadow:none}
.gg-dark .gg-btn--ghost:hover{border-color:#4FD0F5;color:#4FD0F5;background:rgba(79,208,245,.06)}
.gg-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 15% 0%,rgba(0,169,224,.16),transparent 62%),
    radial-gradient(50vw 46vw at 88% 90%,rgba(245,130,32,.13),transparent 60%);
}
/* trama sutil de líneas, da textura sin ensuciar */
.gg-dark__grid{
  position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(85% 75% at 50% 45%,#000,transparent 82%);
}

/* la cabecera se adapta al color de la sección que atraviesa */
.gg-header.is-dark{background:rgba(7,11,20,.78);border-bottom-color:var(--linea-noche)}
.gg-header.is-dark .gg-menu > li > a{color:rgba(255,255,255,.86)}
.gg-header.is-dark .gg-menu > li > a:hover,
.gg-header.is-dark .gg-menu > li.current-menu-item > a{color:#fff;background:rgba(255,255,255,.1)}
.gg-header.is-dark .gg-topbar{color:rgba(226,235,247,.6);border-bottom-color:var(--linea-noche)}
.gg-header.is-dark .gg-burger{background:rgba(255,255,255,.06);border-color:var(--linea-noche)}
.gg-header.is-dark .gg-burger span{background:#fff}
.gg-header.is-dark .gg-brand img{filter:brightness(0) invert(1)}

/* ---------- 2. Hero cinematográfico ---------- */
.gg-cine{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;overflow:hidden;background:var(--noche)}
.gg-cine__stage{position:absolute;inset:0;z-index:0}
.gg-cine__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.2s var(--ease-out),visibility 1.2s;
}
.gg-cine__slide.is-active{opacity:1;visibility:visible}
.gg-cine__img{
  position:absolute;inset:-6%;background-size:cover;background-position:center;
  transform:scale(1.06) translate3d(calc(var(--mx,0)*-18px),calc(var(--my,0)*-12px),0);
  transition:transform 1s cubic-bezier(.2,.8,.3,1);
}
.gg-cine__slide.is-active .gg-cine__img{animation:ggCineZoom 16s ease-out forwards}
@keyframes ggCineZoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.gg-cine__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--noche) 2%,rgba(7,11,20,.86) 26%,rgba(7,11,20,.36) 58%,rgba(7,11,20,.62) 100%),
    linear-gradient(105deg,rgba(7,11,20,.78) 0%,transparent 55%);
}
.gg-cine__in{position:relative;z-index:2;width:min(100% - 2.6rem,var(--container));margin-inline:auto;padding:0 0 clamp(6rem,11vh,9rem);text-align:center}
.gg-cine__title{
  font-family:var(--ff-display);font-weight:800;color:#fff;
  font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.98;letter-spacing:-.045em;
  margin:0 0 1.2rem;text-wrap:balance;
}
.gg-cine__title .gg-word{display:inline-block;overflow:hidden;vertical-align:top}
.gg-cine__title .gg-word > span{
  display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .95s var(--ease-out),opacity .7s ease;
}
/* El título vive en .gg-cine__in, fuera de los slides: el disparador es la
   propia sección cuando el JS la marca lista. */
.gg-cine.is-ready .gg-cine__title .gg-word > span{transform:none;opacity:1}
.gg-cine__title .gg-word:nth-child(n+9) > span{transition-delay:.06s}
.gg-cine__lede{max-width:62ch;margin:0 auto 2.2rem;color:rgba(226,235,247,.84);font-size:clamp(1.02rem,1.5vw,1.24rem)}
.gg-cine__lede,.gg-cine__in .gg-eyebrow,.gg-cine__in .gg-btns{opacity:0;transform:translateY(22px);transition:opacity .8s ease .4s,transform .9s var(--ease-out) .4s}
.gg-cine__in .gg-eyebrow{transition-delay:.15s}
.gg-cine__in .gg-btns{transition-delay:.55s;justify-content:center}
.gg-cine.is-ready .gg-cine__lede,.gg-cine.is-ready .gg-eyebrow,.gg-cine.is-ready .gg-btns{opacity:1;transform:none}
/* sin JS el titular debe verse igual */
html:not(.gg-js) .gg-cine__title .gg-word > span{transform:none;opacity:1}
html:not(.gg-js) .gg-cine__lede,html:not(.gg-js) .gg-cine__in .gg-eyebrow,
html:not(.gg-js) .gg-cine__in .gg-btns{opacity:1;transform:none}

/* barra de progreso de las diapositivas */
.gg-cine__nav{position:absolute;left:0;right:0;bottom:2.2rem;z-index:3}
.gg-cine__nav-in{width:min(100% - 2.6rem,var(--container));margin-inline:auto;display:flex;gap:1.1rem;align-items:stretch;padding-right:clamp(0px,15vw,190px)}
.gg-cine__tab{
  flex:1;text-align:left;background:none;border:0;padding:.9rem 0 0;cursor:pointer;
  color:rgba(255,255,255,.5);font-family:var(--ff-display);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;position:relative;
  transition:color .4s;
}
.gg-cine__tab::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}
.gg-cine__tab::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--grad-brand)}
.gg-cine__tab.is-active{color:#fff}
.gg-cine__tab.is-active::after{animation:ggTab var(--dur,7500ms) linear forwards}
@keyframes ggTab{from{width:0}to{width:100%}}

/* ---------- 2b. Hero de páginas interiores, versión oscura ---------- */
.gg-phero--dark{
  background:var(--noche);min-height:clamp(400px,62vh,600px);
  padding:calc(var(--nav-h) + 6rem) 0 4.4rem;
}
.gg-phero--dark .gg-phero__bg{opacity:1;filter:saturate(1.05)}
.gg-phero--dark::after{
  background:
    radial-gradient(58% 66% at 50% 52%,rgba(7,11,20,.72),rgba(7,11,20,.86) 62%,rgba(7,11,20,.94) 100%),
    linear-gradient(to bottom,rgba(7,11,20,.92) 0%,rgba(7,11,20,.5) 34%,var(--noche) 100%);
}
.gg-phero--dark h1{color:#fff;font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:-.04em;line-height:1.02}
.gg-phero--dark .gg-lede{color:rgba(226,235,247,.84)}
.gg-phero--dark .gg-crumbs{color:rgba(226,235,247,.55)}
.gg-phero--dark .gg-crumbs a:hover{color:#4FD0F5}
.gg-phero--dark .gg-eyebrow{color:#4FD0F5}
/* el titular entra palabra por palabra, igual que en la portada */
.gg-phero--dark h1 .gg-word{display:inline-block;overflow:hidden;vertical-align:top}
.gg-phero--dark h1 .gg-word > span{
  display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .9s var(--ease-out),opacity .65s ease;
}
.gg-phero--dark.is-in h1 .gg-word > span{transform:none;opacity:1}
html:not(.gg-js) .gg-phero--dark h1 .gg-word > span{transform:none;opacity:1}

/* ---------- 2c. Contenido de páginas interiores ----------
   Columna más ancha, texto justificado y una imagen de apertura. */
.gg-content--ancho{max-width:1040px}
.gg-content--ancho p,
.gg-content--ancho li{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
  font-size:clamp(1rem,1.12vw,1.09rem);line-height:1.82;
}
.gg-content--ancho .gg-lede{text-align:justify}
/* los títulos no se justifican nunca: se centran y respiran */
.gg-content--ancho h2{
  text-align:center;margin-top:3.2rem;
  font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;
}
.gg-content--ancho h3{text-align:center;margin-top:2.2rem}
.gg-content--ancho .gg-table td,.gg-content--ancho .gg-table th{text-align:left;hyphens:none}
.gg-content--ancho .gg-check li{text-align:left}

/* imagen de apertura del artículo, con revelado por máscara */
.gg-figura-cont{margin:0 0 3rem;position:relative}
.gg-figura-cont .gg-mask{aspect-ratio:16/9;border-radius:var(--r-l);box-shadow:var(--sombra-2)}
.gg-figura-cont figcaption{
  margin-top:.9rem;text-align:center;font-size:.85rem;color:var(--texto-2);
  font-family:var(--ff-display);letter-spacing:.04em;
}
/* la máscara del reveal usa el color de la sección, no siempre el oscuro */
.gg-light .gg-mask::after{background:var(--nieve)}

@media (max-width:680px){
  /* justificar en columnas estrechas abre ríos: se desactiva */
  .gg-content--ancho p,.gg-content--ancho li,.gg-content--ancho .gg-lede{text-align:left;hyphens:none}
}

/* ---------- 3. Track horizontal anclado ---------- */
/* nada de overflow aquí: el anclaje sticky necesita el scroll del documento */
.gg-track{position:relative;background:var(--noche);overflow:visible}
.gg-track__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.gg-track__rail{display:flex;gap:clamp(1rem,2vw,1.8rem);padding-inline:clamp(1.3rem,6vw,7rem);will-change:transform}
.gg-track__head{flex:none;width:min(78vw,420px);align-self:center;padding-right:2rem}
.gg-track__card{
  flex:none;width:min(76vw,376px);border-radius:var(--r-l);overflow:hidden;position:relative;
  background:var(--noche-2);border:1px solid var(--linea-noche);
  display:flex;flex-direction:column;min-height:min(66vh,520px);
  transition:border-color .5s,transform .6s var(--ease-out);
}
.gg-track__card:hover{border-color:rgba(79,208,245,.5);transform:translateY(-6px)}
.gg-track__media{position:relative;height:56%;overflow:hidden;flex:none}
.gg-track__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out);filter:saturate(1.05)}
.gg-track__card:hover .gg-track__media img{transform:scale(1.07)}
.gg-track__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--noche-2),transparent 62%)}
.gg-track__num{
  position:absolute;top:1rem;left:1.2rem;z-index:2;font-family:var(--ff-display);
  font-size:.76rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.62);
}
.gg-track__body{padding:0 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1;margin-top:-1.6rem;position:relative;z-index:2}
.gg-track__body h3{font-size:1.42rem;margin-bottom:.5rem;color:#fff}
.gg-track__body p{font-size:.95rem;margin-bottom:1.1rem}
.gg-track__precio{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--linea-noche);font-family:var(--ff-display);font-size:.85rem;color:rgba(226,235,247,.6)}
.gg-track__precio b{display:block;font-size:1.45rem;color:#fff;font-weight:800;letter-spacing:-.02em}
.gg-track__card .gg-link{color:#4FD0F5}
.gg-track__card .gg-link:hover{color:#FFAE63}
.gg-track__barra{position:absolute;left:clamp(1.3rem,6vw,7rem);right:clamp(1.3rem,6vw,7rem);bottom:2.4rem;height:2px;background:rgba(255,255,255,.14);border-radius:2px}
.gg-track__barra i{display:block;height:100%;width:0;background:var(--grad-brand);border-radius:2px}

/* ---------- 4. Tarjetas apiladas ---------- */
.gg-stack{position:relative}
.gg-stack__item{position:sticky;top:calc(var(--nav-h) + 2.2rem);margin-bottom:1.4rem}
.gg-stack__card{
  display:grid;grid-template-columns:96px 1fr;gap:1.8rem;align-items:start;
  padding:2.4rem 2.6rem;border-radius:var(--r-l);
  background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra-2);
  transition:transform .6s var(--ease-out),opacity .6s;
}
.gg-dark .gg-stack__card{background:var(--noche-2);border-color:var(--linea-noche);box-shadow:none}
.gg-stack__n{
  display:grid;place-items:center;width:72px;height:72px;border-radius:22px;
  font-family:var(--ff-display);font-size:1.5rem;font-weight:800;color:#fff;background:var(--grad-btn);
}
.gg-stack__card h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:.5rem}
.gg-stack__card p{margin:0;max-width:70ch}

/* ---------- 5. Texto revelado palabra por palabra ---------- */
.gg-scrub{font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;line-height:1.16;
  font-size:clamp(1.6rem,3.6vw,3rem);text-wrap:balance;margin:0}
.gg-scrub .gg-w{transition:color .35s linear,opacity .35s linear;color:rgba(255,255,255,.16)}
.gg-scrub .gg-w.on{color:#fff}
.gg-light .gg-scrub .gg-w{color:rgba(11,18,32,.16)}
.gg-light .gg-scrub .gg-w.on{color:var(--tinta)}

/* ---------- 6. Reveal de imágenes por máscara ---------- */
.gg-mask{position:relative;overflow:hidden;border-radius:var(--r-l)}
.gg-mask img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.16);transition:transform 1.5s var(--ease-out)}
.gg-mask::after{content:"";position:absolute;inset:0;background:var(--noche);transform-origin:right center;transition:transform 1.1s var(--ease-out)}
.gg-mask.is-in img{transform:scale(1)}
.gg-mask.is-in::after{transform:scaleX(0)}

/* ---------- 7. Cifra gigante con scrub ---------- */
.gg-figuras{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;text-align:center}
.gg-figura b{
  display:block;font-family:var(--ff-display);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(3.2rem,8vw,7rem);background:var(--grad-texto);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gg-figura span{display:block;margin-top:.6rem;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(226,235,247,.55)}
.gg-light .gg-figura span{color:var(--texto-2)}

/* ---------- 8. Cursor personalizado ---------- */
.gg-cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--azul-vivo);pointer-events:none;z-index:9999;mix-blend-mode:difference;
  transform:translate3d(-50%,-50%,0);transition:width .3s var(--ease-out),height .3s var(--ease-out),background .3s;
  will-change:transform;
}
.gg-cursor.is-big{width:64px;height:64px;background:rgba(0,169,224,.35)}
@media (hover:none),(pointer:coarse){.gg-cursor{display:none}}

/* ---------- 9. Marquesina de gran formato ---------- */
.gg-mq{overflow:hidden;padding:clamp(2.4rem,5vw,4rem) 0;border-block:1px solid var(--linea-noche)}
.gg-light .gg-mq{border-color:var(--linea)}
.gg-mq__track{display:flex;width:max-content;gap:3.4rem;animation:ggMq 34s linear infinite}
.gg-mq:hover .gg-mq__track{animation-play-state:paused}
@keyframes ggMq{to{transform:translateX(-50%)}}
.gg-mq span{
  display:flex;align-items:center;gap:3.4rem;white-space:nowrap;
  font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.4vw,3.4rem);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.34);
}
.gg-light .gg-mq span{-webkit-text-stroke-color:rgba(11,18,32,.22)}
.gg-mq span i{width:12px;height:12px;border-radius:50%;background:var(--naranja-vivo);flex:none;-webkit-text-stroke:0}

/* ---------- 10. Bloque de imagen a sangre con texto ---------- */
.gg-full{position:relative;min-height:min(88svh,760px);display:flex;align-items:center;overflow:hidden}
.gg-full__bg{position:absolute;inset:-8%;background-size:cover;background-position:center;transform:translate3d(0,var(--par,0),0) scale(1.06)}
.gg-full::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(7,11,20,.9) 5%,rgba(7,11,20,.6) 52%,rgba(7,11,20,.86) 100%)}
.gg-full .gg-container{z-index:2;text-align:center}

/* ---------- 11. Responsive ---------- */
@media (max-width:900px){
  .gg-figuras{grid-template-columns:1fr;gap:2.2rem}
  .gg-stack__card{grid-template-columns:1fr;gap:1rem;padding:1.8rem 1.6rem}
  .gg-stack__item{position:static}
  .gg-track__sticky{height:auto;padding:3rem 0}
  .gg-track__rail{flex-direction:column;transform:none!important;padding-inline:1.3rem}
  .gg-track__head,.gg-track__card{width:100%}
  .gg-track__card{min-height:0}
  .gg-track__media{height:210px}
  .gg-track__barra{display:none}
  .gg-cine__nav-in{padding-right:0;gap:.5rem}
  .gg-cine__tab{font-size:0;padding-top:.6rem}
  .gg-cine__tab::before,.gg-cine__tab::after{height:3px}
}
@media (max-width:680px){
  .gg-cine{min-height:100svh}
  .gg-cine__in{padding-bottom:7rem}
  .gg-cine__title{font-size:clamp(2.1rem,9vw,3rem)}
  /* en vertical el texto ocupa casi toda la pantalla: el velo se cierra
     para que el rótulo y el párrafo no compitan con las zonas claras */
  .gg-cine__veil{
    background:
      linear-gradient(to top,var(--noche) 4%,rgba(7,11,20,.92) 30%,rgba(7,11,20,.72) 62%,rgba(7,11,20,.8) 100%);
  }
  .gg-cine__lede{font-size:1rem;line-height:1.6}
  .gg-cine__in .gg-btns{flex-direction:column;align-items:stretch}
  .gg-cine__in .gg-btn{width:100%}
}

/* ---------- 12. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .gg-track__rail{transform:none!important;flex-direction:column}
  .gg-track__sticky{position:static;height:auto}
  .gg-stack__item{position:static}
  .gg-mask::after{display:none}
  .gg-mask img{transform:none}
  .gg-scrub .gg-w{color:inherit!important}
  .gg-cine__slide.is-active .gg-cine__img{animation:none}
  .gg-cursor{display:none}
}