/* ═══════════════════════════════════════════════════════
   ARCHEON · Cinematic Layer
   Loader · Custom Cursor · Scroll · Section Beats
═══════════════════════════════════════════════════════ */

/* Hide native cursor globally when custom cursor is active */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}

/* ───── ENTRY SPLASH (audio context unlock screen) ───── */
.entry-splash {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above preloader (10000) */
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .55s cubic-bezier(.22,1,.36,1);
}
.entry-splash.done {
  opacity: 0;
  pointer-events: none;
}
.entry-splash.removed {
  display: none;
}
.entry-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  animation: entryFadeIn 1s cubic-bezier(.22,1,.36,1) backwards;
}
.entry-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.025em;
  line-height: 1;
}
.entry-cta {
  position: relative;
  background: transparent;
  border: 1px solid var(--paper);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background .3s, color .3s;
}
.entry-cta:hover {
  background: var(--paper);
  color: var(--ink);
}
.entry-cta-arrow {
  display: inline-block;
  transition: transform .3s;
}
.entry-cta:hover .entry-cta-arrow {
  transform: translateX(4px);
}
/* Pulsing ring around CTA to draw attention */
.entry-cta::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid var(--paper);
  opacity: 0;
  animation: entryPulse 2.4s ease-out infinite;
  pointer-events: none;
}
.entry-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.7;
  margin-top: 4px;
}
@keyframes entryFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entryPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-splash { display: none !important; }
}

/* ───── LOADER ───── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 32px;
  transition: opacity .6s ease, transform .9s cubic-bezier(.77,0,.18,1);
  will-change: transform, opacity;
}
.preloader.done {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2%);
}
.preloader.removed { display: none; }

.pre-top,
.pre-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
}
.pre-top .pre-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pre-top .pre-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 var(--blue);
  animation: prePulse 1.4s ease-out infinite;
}
@keyframes prePulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,110,245,.5); }
  80%  { box-shadow: 0 0 0 12px rgba(59,110,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,110,245,0); }
}

.pre-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.pre-wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--paper);
  display: flex;
  overflow: visible;
}
.pre-wordmark .pre-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}
.pre-wordmark.revealed .pre-letter {
  transform: translateY(0);
  opacity: 1;
}
.pre-wordmark .pre-letter:nth-child(1) { transition-delay: 0.02s; }
.pre-wordmark .pre-letter:nth-child(2) { transition-delay: 0.07s; }
.pre-wordmark .pre-letter:nth-child(3) { transition-delay: 0.12s; }
.pre-wordmark .pre-letter:nth-child(4) { transition-delay: 0.17s; }
.pre-wordmark .pre-letter:nth-child(5) { transition-delay: 0.22s; }
.pre-wordmark .pre-letter:nth-child(6) { transition-delay: 0.27s; }
.pre-wordmark .pre-letter:nth-child(7) { transition-delay: 0.32s; }
.pre-wordmark em {
  font-style: italic;
  color: var(--blue);
}

.pre-bar-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.pre-bar {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.pre-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--pre-pct, 0%);
  background: var(--paper);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.pre-pct {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}

/* ───── CUSTOM CURSOR (refined sizes — less "fat") ───── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .3s cubic-bezier(.22,1,.36,1),
              height .3s cubic-bezier(.22,1,.36,1),
              background .2s,
              border-radius .3s,
              border-width .3s;
  will-change: transform;
}
.cursor.hidden { opacity: 0; }
.cursor.is-hover {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--paper);
  mix-blend-mode: difference;
}
.cursor.is-cta {
  width: 44px;
  height: 44px;
  background: var(--blue);
  mix-blend-mode: normal;
  border: none;
}
.cursor.is-text {
  width: 2px;
  height: 22px;
  border-radius: 1px;
  background: var(--paper);
  mix-blend-mode: difference;
}

.cursor-label {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
}
.cursor-label.shown { opacity: 1; }

@media (pointer: coarse) {
  .cursor, .cursor-label { display: none; }
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: auto !important; }
}

/* ───── SCROLL PROGRESS ───── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1001;
  pointer-events: none;
  background: transparent;
}
.scroll-progress::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--scroll-pct, 0%);
  background: var(--blue);
  transition: width .1s linear;
}

/* ───── LENIS smooth scroll glue ───── */
html.lenis { height: auto; }
html.lenis body { height: auto; overflow: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ───── CINEMATIC REVEAL (overrides of .reveal for theatrical entry) ───── */
.cin-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s cubic-bezier(.22,1,.36,1),
              transform 1.2s cubic-bezier(.22,1,.36,1);
}
.cin-reveal.in {
  opacity: 1;
  transform: none;
}

.cin-split {
  display: block;
  overflow: hidden;
}
.cin-split-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.cin-split.in .cin-split-inner { transform: translateY(0); }

/* Section labels that slide in from the side */
.section-marker {
  position: absolute;
  top: 40px;
  left: 32px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .8s, transform .8s;
  transition-delay: .3s;
}
.section-marker.in { opacity: 1; transform: none; }
.section-marker .dot { display: inline-block; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; margin-right: 10px; vertical-align: middle; }

@media (max-width: 720px) {
  .section-marker { display: none; }
  .pre-wordmark { font-size: clamp(3rem, 18vw, 8rem); }
}

/* ───── HERO ENTRANCE — fade-up after preload (CSS-driven, no GSAP conflict) ───── */
.hero-meta .eyebrow,
.hero-lede,
.hero-ctas,
.hero-stats > li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
}
body.preload-done .hero-meta .eyebrow {
  opacity: 1; transform: none; transition-delay: 0s;
}
body.preload-done .hero-lede {
  opacity: 1; transform: none; transition-delay: 0.2s;
}
body.preload-done .hero-ctas {
  opacity: 1; transform: none; transition-delay: 0.45s;
}
body.preload-done .hero-stats > li {
  opacity: 1; transform: none;
}
body.preload-done .hero-stats > li:nth-child(1) { transition-delay: 0.65s; }
body.preload-done .hero-stats > li:nth-child(2) { transition-delay: 0.73s; }
body.preload-done .hero-stats > li:nth-child(3) { transition-delay: 0.81s; }

/* ───── HERO — extra depth ───── */
.hero-title {
  position: relative;
  z-index: 3;
}

/* ───── LETTER-BY-LETTER ANIMATION (replaces line-based) ─────
   Each letter starts hidden + offset, fades up with staggered delay.
   Uses --i (set in JS) for stagger. Trigger via parent class:
   - .hero-title in body.hero-split-ready
   - .section-title / .page-title with class .visible (added by reveal observer)
*/
.split-word {
  display: inline-block;
  white-space: nowrap; /* previene break mid-word entre letras inline-block */
}
.split-letter {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  opacity: 0;
  transform: translateY(0.6em) rotateX(-25deg);
  filter: blur(8px);
  transform-origin: 50% 100%;
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1),
              transform 0.85s cubic-bezier(.22,1,.36,1),
              filter 0.6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 32ms);
  will-change: transform, opacity, filter;
}
/* Hero — animate on body.hero-split-ready */
body.hero-split-ready .hero-title .split-letter {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Section/page titles — animate when their reveal parent gets .visible/.in */
.reveal.visible .split-letter,
.reveal.in .split-letter,
.reveal-left.visible .split-letter,
.reveal-left.in .split-letter,
.reveal-right.visible .split-letter,
.reveal-right.in .split-letter,
.cin-reveal.in .split-letter,
.cin-reveal.visible .split-letter,
.section-title.visible .split-letter,
.page-title.visible .split-letter,
.section-title.in .split-letter,
.page-title.in .split-letter {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .split-letter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-delay: 0 !important;
  }
}
.hero-title .hero-line {
  display: block;
  overflow: hidden;
}
.hero-title .hero-line-inner {
  display: inline-block;
  transform: translateY(105%);
  will-change: transform;
}
.preloader.done ~ * .hero-title .hero-line-inner,
body.preload-done .hero-title .hero-line-inner {
  animation: heroLineIn 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
body.preload-done .hero-title .hero-line:nth-child(1) .hero-line-inner { animation-delay: .1s; }
body.preload-done .hero-title .hero-line:nth-child(2) .hero-line-inner { animation-delay: .22s; }
body.preload-done .hero-title .hero-line:nth-child(3) .hero-line-inner { animation-delay: .34s; }
@keyframes heroLineIn {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* ───── AUDIO TOGGLE (boton bottom-left con bars animadas cuando esta on) ───── */
.audio-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(10,10,11,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .25s, color .25s, transform .25s;
}
.audio-toggle:hover { border-color: var(--paper); transform: translateY(-2px); }
.audio-toggle .bars {
  display: flex; align-items: flex-end; gap: 2.5px;
  height: 13px;
}
.audio-toggle .bars span {
  display: block; width: 2px; background: currentColor; border-radius: 1px;
  height: 30%;
  transition: height .2s;
}
.audio-toggle.on .bars span:nth-child(1) { animation: eq 1s ease-in-out 0s   infinite; }
.audio-toggle.on .bars span:nth-child(2) { animation: eq 1s ease-in-out .2s  infinite; }
.audio-toggle.on .bars span:nth-child(3) { animation: eq 1s ease-in-out .4s  infinite; }
.audio-toggle.on .bars span:nth-child(4) { animation: eq 1s ease-in-out .1s  infinite; }
.audio-toggle:not(.on) .bars span { height: 30% !important; }

/* ───── NAV PENDING — feedback minimo durante el delay del sonido al navegar ───── */
body.is-navigating { cursor: progress; }
body.is-navigating::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  z-index: 99999;
  pointer-events: none;
  animation: navPendingBar 700ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes navPendingBar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes eq {
  0%,100% { height: 30%; }
  50%     { height: 90%; }
}
@media (max-width: 720px) {
  .audio-toggle { left: 16px; bottom: 72px; }
}

/* ───── SECTION RAIL — fixed left-side numbered markers (B3.2) ───── */
.section-rail {
  position: fixed;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none; /* solo los items reciben clicks */
}
.section-rail .rail-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity .35s ease, color .35s ease, transform .35s ease;
}
.section-rail .rail-num {
  display: inline-block;
  min-width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.section-rail .rail-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transition: width .4s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.section-rail .rail-label {
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s ease;
  white-space: nowrap;
}
.section-rail .rail-item:hover {
  opacity: 1;
  color: var(--paper);
}
.section-rail .rail-item:hover .rail-line { width: 26px; opacity: 1; }
.section-rail .rail-item:hover .rail-label { opacity: 1; transform: none; }
.section-rail .rail-item.active {
  opacity: 1;
  color: var(--paper);
}
.section-rail .rail-item.active .rail-line {
  width: 32px;
  opacity: 1;
  background: var(--blue);
  animation: railPulse 2.4s ease-in-out infinite;
}
.section-rail .rail-item.active .rail-label {
  opacity: 1;
  transform: none;
}
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 60%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 0%, transparent); }
}
@media (max-width: 1024px) {
  .section-rail { display: none; }
}

/* ───── CURSOR TRAIL (B3.5) ───── */
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: calc(7px - var(--ti, 0) * 0.8px);
  height: calc(7px - var(--ti, 0) * 0.8px);
  border-radius: 50%;
  background: var(--paper);
  opacity: calc(0.32 - var(--ti, 0) * 0.045);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  will-change: transform;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-trail { display: none; }
}

/* ───── SCROLL PERCENT INDICATOR (B3.5) ───── */
.scroll-percent {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--mute);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.scroll-percent.is-active { opacity: 0.75; }
.scroll-percent .sp-num {
  color: var(--paper);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.scroll-percent .sp-sep { opacity: .5; margin: 0 1px; }
.scroll-percent .sp-max { opacity: .5; }
@media (max-width: 720px) {
  .scroll-percent { right: 14px; bottom: 80px; font-size: 9px; }
  .scroll-percent .sp-num { font-size: 12px; }
}

/* ───── SCROLL-DRAWN SVG LINES (Lusion-style, B3 extra) ───── */
.scroll-line-container {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1; /* sobre el bg de seccion, debajo del texto/cards */
  overflow: visible;
}
.scroll-line-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.scroll-line-path {
  fill: none;
  stroke: rgba(26, 86, 219, 0.65);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(26, 86, 219, 0.35));
}
.scroll-line-dot {
  fill: rgba(26, 86, 219, 0.95);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 8px rgba(26, 86, 219, 0.7));
}
@media (max-width: 768px) {
  .scroll-line-container { display: none; } /* ahorro mobile */
}
@media (prefers-reduced-motion: reduce) {
  .scroll-line-container { display: none; }
}

/* ───── PER-SECTION BACKGROUND IMAGES (B4 — Nano Banana arquitectonico) ─────
   Cada seccion principal puede tener su imagen de fondo subtil + overlay oscuro.
   Generar imagenes con Nano Banana y guardar como:
     assets/img/bg-ofertas.png      (1920x1080, oscuro, geometrico)
     assets/img/bg-proceso.png      (1920x1080, lineas / blueprint)
     assets/img/bg-tecnologia.png   (1920x1080, tech / circuitry abstract)
     assets/img/bg-areas.png        (opcional)
   El overlay oscuro asegura legibilidad del texto. Si la imagen no existe (404)
   simplemente se muestra negro plano. */
.has-bg-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  z-index: -2;
  filter: contrast(1.08) saturate(0.85) brightness(0.95);
  transition: opacity .8s ease;
}
.has-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.7) 0%, rgba(10,10,11,0.92) 100%),
    radial-gradient(ellipse at bottom right, rgba(10,10,11,0.95) 0%, transparent 45%);
  z-index: -1;
  pointer-events: none;
}
.has-bg-image > .container,
.has-bg-image > * { position: relative; z-index: 1; }

/* Per-section background image hooks — activan via class .has-bg-image en <section> */
#ofertas.has-bg-image::before    { background-image: url('img/bg-ofertas.png'); }
#proceso.has-bg-image::before    { background-image: url('img/bg-proceso.png'); background-position: 30% 30%; }
#tecnologia.has-bg-image::before { background-image: url('img/bg-tecnologia.png'); opacity: 0.18; }
#areas.has-bg-image::before      { background-image: url('img/bg-areas.png'); }

/* ───── STARFIELD CANVAS (cielo nocturno animado) ───── */
#stars-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* detras de TODO el contenido (no afecta layout) */
  pointer-events: none;
  display: block;
}
/* Hago html con bg dark + body transparente para que el canvas (z:-1) sea visible
   sin necesidad de tocar el z-index/position de sections. Asi no rompe ningun layout. */
html { background: #08080f; }
body { background: transparent; }

/* ───── PAGE TRANSITION CURTAIN (cortina vertical premium con marca + linea animada) ───── */
.page-transition-curtain {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #0e0e18 0%, #08080f 70%);
  transform: translateY(100%);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(.83,0,.17,1);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.page-transition-curtain.is-rising {
  transform: translateY(0%);
  transition-duration: 0.65s;
}
.page-transition-curtain.is-falling {
  transform: translateY(-100%);
  transition-duration: 0.85s;
}
/* Sutil scanline / grain overlay durante la transicion */
.page-transition-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 4px
    );
  pointer-events: none;
}
/* Halo blue radial pulsando atras */
.page-transition-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(59,110,245,0.10) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.page-transition-curtain.is-rising::after { opacity: 1; transition-delay: 0.2s; }

.ptc-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease 0.15s, transform 0.55s cubic-bezier(.22,1,.36,1) 0.15s;
}
.is-rising .ptc-inner { opacity: 1; transform: translateY(0); }

.ptc-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .42em;
  color: rgba(239, 236, 228, 0.85);
  text-transform: uppercase;
}
.ptc-mark-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px var(--blue);
  animation: ptcDot 1.6s ease-in-out infinite;
}
@keyframes ptcDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}

.ptc-line {
  width: 280px;
  max-width: 60vw;
  height: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.ptc-line-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--blue), rgba(239,236,228,0.9), var(--blue), transparent);
  transform: translateX(-30%);
}
.is-rising .ptc-line-fill {
  animation: ptcLineSweep 1.4s cubic-bezier(.45,0,.55,1) 0.25s forwards;
}
@keyframes ptcLineSweep {
  0%   { width: 0;    transform: translateX(0); }
  60%  { width: 100%; transform: translateX(0); }
  100% { width: 100%; transform: translateX(80%); opacity: 0; }
}

.ptc-dest {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--paper);
  letter-spacing: -.01em;
}
.ptc-dest-prefix {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.65em;
  color: var(--blue);
  letter-spacing: 0;
}

.page-transition-label {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 4px;
  color: rgba(239, 236, 228, 0.45);
  opacity: 0;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.page-transition-label.is-visible { opacity: 1; }

/* ───── TECNOLOGIA SECTION — bg ambient sutil ───── */
#tecnologia {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(26, 86, 219, 0.05) 0%,
    transparent 70%
  );
}

/* ───── MANIFIESTO — quitar bg image + overlay para que se vean las estrellas ───── */
#servicios::before,
#servicios::after {
  display: none !important;
}

/* ───── PAGE TRANSITIONS — fade + subtle slide between subpages ───── */
.page-transitioning .main-swap {
  pointer-events: none;
}
.main-swap {
  transition: opacity .35s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}
.main-swap.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
}
.main-swap.is-entering {
  opacity: 0;
  transform: translateY(20px);
}
.main-swap.is-entered {
  opacity: 1;
  transform: none;
}
/* Subtle blue progress bar on top during transition */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  z-index: 10005;
  transition: width .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  pointer-events: none;
  opacity: 0;
}
.page-progress.is-active {
  opacity: 1;
}

/* prefers-reduced-motion kill switch */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  .cursor, .cursor-label { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
  .cin-reveal, .cin-split-inner, .section-marker {
    opacity: 1 !important; transform: none !important;
  }
  body.preload-done .hero-title .hero-line-inner { animation: none !important; transform: none !important; }
  .hero-meta .eyebrow, .hero-lede, .hero-ctas, .hero-stats > li {
    opacity: 1 !important; transform: none !important;
  }
}

/* ───── ACCESSIBILITY ─────────────────────────────────────── */

/* Skip-to-content link — invisible hasta que recibe foco con Tab */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top .25s cubic-bezier(.22,1,.36,1);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: none;
}

/* Focus visible global — solo cuando se navega con teclado, no con mouse */
*:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Excepciones: elementos que ya manejan su propio foco visual */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none; /* el border-bottom del .cta-form ya marca el focus */
}

/* ───── HOVER UNDERLINE — nav links + footer links + anchors ───── */
.nav-links a,
.nav-mobile a,
.footer-cols a,
.footer-bottom a {
  position: relative;
  text-decoration: none;
  transition: color .25s ease;
}
.nav-links a::after,
.nav-mobile a::after,
.footer-cols a::after,
.footer-bottom a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1.5px;
  background: var(--blue);
  transition: width .35s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.nav-links a:hover::after,
.nav-mobile a:hover::after,
.footer-cols a:hover::after,
.footer-bottom a:hover::after { width: 100%; }
/* Active nav link (current page) — siempre con underline */
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after,
.nav-mobile a[aria-current="page"]::after { width: 100%; }
/* Skip los CTAs (que ya tienen su propio estilo) */
.nav-links a.nav-cta::after,
.nav-mobile a.nav-cta::after { display: none; }

/* ───── HOVER FAQ — la pregunta se desplaza + barra azul, queda persistente al abrir ───── */
.faq-item summary {
  position: relative;
  transition: padding-left .35s cubic-bezier(.22,1,.36,1), color .25s ease;
}
.faq-item summary:hover,
.faq-item.is-open summary {
  padding-left: 14px;
}
.faq-item summary:hover .faq-q,
.faq-item.is-open summary .faq-q {
  color: var(--paper);
}
.faq-item summary:hover .faq-ic {
  border-color: var(--blue);
  background: rgba(59, 110, 245, .08);
}
.faq-item summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 2px;
  height: 60%;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.faq-item summary:hover::before,
.faq-item.is-open summary::before {
  transform: translateY(-50%) scaleY(1);
}

/* ───── FAQ TRAVELING UNDERLINE — linea fina azul que viaja por debajo del texto
   siguiendo la posicion del cursor. Width = cursor X. Top = linea bajo el cursor. ───── */
.faq-a p {
  cursor: default;
}
.travel-underline {
  position: absolute;
  left: 0;
  top: var(--ul-y, -100px);
  width: 0;
  height: 1.5px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(59, 110, 245, 0.55) 25%,
    rgba(59, 110, 245, 0.95) 75%,
    rgba(120, 175, 255, 1) 100%
  );
  box-shadow: 0 0 8px rgba(59, 110, 245, 0.55), 0 0 14px rgba(59, 110, 245, 0.25);
  border-radius: 2px;
  opacity: 0;
  transition:
    width 0.18s cubic-bezier(.22,1,.36,1),
    top 0.22s cubic-bezier(.22,1,.36,1),
    opacity 0.4s ease;
  will-change: width, top, opacity;
}
.faq-a p.underline-on .travel-underline {
  width: var(--ul-x, 0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .travel-underline { display: none; }
}

/* ───── REDUCED MOTION ───── */
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after,
  .footer-cols a::after,
  .footer-bottom a::after { transition: none; }
  .spotlight-text {
    background-image: none;
    -webkit-text-fill-color: var(--paper);
    color: var(--paper);
  }
}