/* ===========================================================================
   ASTRA TELECOM — Inmersión avanzada (Nivel 1+)
   Progreso, índice, texto que se arma, clip transitions, mapa, parallax,
   cursor magnético, scroll horizontal. Todo nativo / SEO-safe.
   Activo solo con body[data-immersive="on"].
   =========================================================================== */

/* ---------- 1 · Barra de progreso + índice de secciones ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent); pointer-events: none;
}
body[data-immersive="off"] .scroll-progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .scroll-progress {
    animation: progressGrow linear both; animation-timeline: scroll(root);
  }
  @keyframes progressGrow { to { transform: scaleX(1); } }
}

.section-index {
  position: fixed; right: clamp(.7rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: .9rem; align-items: flex-end;
}
@media (max-width: 1100px), (hover: none) { .section-index { display: none; } }
body[data-immersive="off"] .section-index { display: none; }
.section-index a { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.section-index .si-label {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
  opacity: 0; transform: translateX(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.section-index .si-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2);
  background: transparent; transition: border-color .3s, background .3s, transform .3s; }
.section-index a:hover .si-label { opacity: 1; transform: none; }
.section-index a.active .si-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.section-index a.active .si-label { opacity: 1; transform: none; color: var(--ink); }
/* sobre secciones oscuras */
.section-index.on-dark a .si-dot { border-color: rgba(236,231,221,.4); }
.section-index.on-dark a.active .si-dot { background: #fff; border-color: #fff; }
.section-index.on-dark .si-label { color: rgba(236,231,221,.7); }
.section-index.on-dark a.active .si-label { color: #fff; }

/* ---------- 3 · Texto que se arma (palabra por palabra) ---------- */
.reveal-words .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .reveal-words .w {
    animation: wordUp linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
  }
  body[data-immersive="on"] .reveal-words .w:nth-child(n) { animation-delay: 0ms; }
  @keyframes wordUp { from { opacity: 0; transform: translateY(.5em) rotate(1.5deg); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
}
/* el stagger real se hace con animation-range por palabra vía JS variables */
.reveal-words .w { --i: 0; }
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .reveal-words .w {
    animation-range: entry calc(0% + var(--i) * 2%) entry calc(50% + var(--i) * 2%);
  }
}

/* ---------- 5 · Transiciones con clip-path entre bandas oscuras ---------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .story,
  body[data-immersive="on"] .cta-band,
  body[data-immersive="on"] .imageband {
    animation: clipReveal linear both; animation-timeline: view();
    animation-range: cover 0% cover 18%;
  }
  @keyframes clipReveal {
    from { clip-path: inset(14% 0 0 0 round 28px); }
    to   { clip-path: inset(0 0 0 0 round 0px); }
  }
}

/* ---------- 6 · Mapa de cobertura animado (SVG nodos) ---------- */
.coverage { position: relative; overflow: hidden; }
.covermap { position: relative; width: 100%; aspect-ratio: 5 / 4; }
.covermap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.covermap .cm-link { stroke: var(--accent); stroke-width: 1; fill: none; opacity: .35;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.covermap .cm-node { fill: var(--accent); }
.covermap .cm-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .5; }
.covermap .cm-hub { fill: var(--accent); }
.covermap .cm-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.covermap .cm-label.hub { fill: var(--ink); font-weight: 500; }
.covermap .cm-pt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .covermap .cm-link {
    animation: drawLink linear both; animation-timeline: view(); animation-range: entry 5% cover 35%;
  }
  @keyframes drawLink { to { stroke-dashoffset: 0; opacity: .35; } }
  body[data-immersive="on"] .covermap .cm-pt {
    animation: popPt linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
  }
  @keyframes popPt { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
  body[data-immersive="on"] .covermap .cm-ring {
    transform-box: fill-box; transform-origin: center;
    animation: pulse 3s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.5); opacity: 0; } }
}
.covermap .cm-pt { transform-box: fill-box; transform-origin: center; }
/* layout: mapa a la derecha, texto izquierda — reusa coverage__grid */
.coverage__grid.has-map { grid-template-columns: 1fr 1.05fr; }
@media (max-width: 860px) { .coverage__grid.has-map { grid-template-columns: 1fr; } .covermap { aspect-ratio: 4/3; max-width: 520px; } }

/* ---------- 7 · Parallax profundo (capas a distinta velocidad) ---------- */
.parallax-deep { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] [data-pspeed] {
    animation: pdrift linear both; animation-timeline: view(); animation-range: cover;
  }
  @keyframes pdrift { from { transform: translateY(calc(var(--ps, 1) * -22px)); } to { transform: translateY(calc(var(--ps, 1) * 22px)); } }
}

/* ---------- 4 · Scroll horizontal fijado (galería) ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body[data-immersive="on"] .hpin { height: 300vh; position: relative; }
  body[data-immersive="on"] .hpin__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
  body[data-immersive="on"] .hpin__track {
    display: flex; gap: clamp(1rem,2vw,1.6rem); padding-inline: var(--gutter); will-change: transform;
    animation: hscroll linear both; animation-timeline: view(); animation-range: contain 0% contain 100%;
  }
  /* fallback handled by JS if needed */
  @keyframes hscroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--hx, 40vw))); } }
  body[data-immersive="on"] .hpin .gallery__panel { flex: 0 0 auto; width: clamp(280px, 30vw, 440px); }
}

/* ---------- 8 · Cursor magnético / microinteracciones ---------- */
.magnetic { will-change: transform; transition: transform .35s var(--ease); }
@media (hover: none) { .magnetic { transform: none !important; } }

/* ---------- Paneles de la galería horizontal ---------- */
.hpin { background: var(--bg); border-top: 1px solid var(--line); }
.hpin__track { display: flex; gap: clamp(1rem,2vw,1.6rem); align-items: center; }
.hpin__intro { width: clamp(260px, 26vw, 360px); padding-right: 1rem; }
.gallery__panel { flex: 0 0 auto; }
.gallery__panel .gallery__item { width: clamp(280px, 32vw, 440px); aspect-ratio: 3/4; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); }
.gallery__panel .gallery__item image-slot { width: 100%; height: 100%; }
.gallery__panel .gallery__item .cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(20,17,14,.5); backdrop-filter: blur(6px); padding: .45em .75em; border-radius: 999px; }
.gallery__item.end { display: flex; align-items: flex-end; }
.hpin__cta { position: absolute; left: 14px; bottom: 52px; z-index: 4; }

/* Desktop con pin: track se traslada por JS; sin scroll interno */
@media (min-width: 900px) {
  .hpin__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
  .hpin__track { padding-inline: var(--gutter); will-change: transform; }
}
/* Móvil/tablet: galería deslizable horizontal */
@media (max-width: 899px) {
  .hpin { height: auto !important; padding-block: var(--section-y); }
  .hpin__sticky { height: auto; }
  .hpin__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 1rem; -webkit-overflow-scrolling: touch; }
  .hpin__track > * { scroll-snap-align: start; }
  .hpin__intro { width: 70vw; }
}

/* ---------- Tarjetas de Soluciones: tilt 3D + texto que aparece ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* la tarjeta no se mueve como bloque (deja vía libre al tilt) */
  body[data-immersive="on"] .services__grid .svc { animation: none; }
  /* el contenido aparece en secuencia al entrar */
  body[data-immersive="on"] .services__grid .svc .svc__tag,
  body[data-immersive="on"] .services__grid .svc h3,
  body[data-immersive="on"] .services__grid .svc p {
    animation: svcContentIn linear both;
    animation-timeline: view();
  }
  body[data-immersive="on"] .services__grid .svc .svc__tag { animation-range: entry 6% entry 34%; }
  body[data-immersive="on"] .services__grid .svc h3       { animation-range: entry 12% entry 42%; }
  body[data-immersive="on"] .services__grid .svc p        { animation-range: entry 18% entry 52%; }
  @keyframes svcContentIn {
    from { opacity: 0; transform: translateY(16px); filter: blur(2px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* La rejilla completa se endereza desde una inclinación 3D al entrar */
  body[data-immersive="on"] .services__grid {
    transform-style: preserve-3d;
    animation: gridRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes gridRise {
    from { opacity: .55; transform: perspective(1400px) rotateX(9deg) translateY(40px) scale(.985); transform-origin: 50% 0; }
    to   { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0) scale(1); }
  }
}

/* Elevación con sombra al pasar el cursor (no usa transform: compatible con tilt) */
.svc.tilt { transition: box-shadow .4s var(--ease), background .3s var(--ease); }
.svc.tilt:hover { box-shadow: var(--shadow-lg); z-index: 2; }

/* ---------- Inmersión en páginas internas ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero interior: la imagen gana profundidad al hacer scroll */
  body[data-immersive="on"] .page-hero__media image-slot {
    animation: pageHeroZoom linear both; animation-timeline: view(); animation-range: cover;
  }
  @keyframes pageHeroZoom { from { transform: scale(1.12) translateY(-2%); } to { transform: scale(1) translateY(2%); } }
  body[data-immersive="on"] .page-hero__media { overflow: hidden; }

  /* chips de marcas: aparecen escalonados */
  body[data-immersive="on"] .brand-chip {
    animation: chipIn linear both; animation-timeline: view(); animation-range: entry 0% entry 75%;
  }
  @keyframes chipIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

  /* listas de "qué incluye / casos de uso": cada punto entra desde la izquierda */
  body[data-immersive="on"] .pillar .prose ul li {
    animation: liIn linear both; animation-timeline: view(); animation-range: entry 0% entry 85%;
  }
  @keyframes liIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

  /* chips "otros servicios": entran desde la derecha */
  body[data-immersive="on"] .pillar__aside .chip {
    animation: zoneIn linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
  }
}