/* ══════════════════════════════════════════════════════════════
   SECCIÓN: CÓMO FUNCIONA — Blindafon
   Mobile-first. Sticky scroll 400vh. 4 pasos.
   Variables dinámicas actualizadas por JS según el paso activo.
══════════════════════════════════════════════════════════════ */

/* Paleta dinámica de esta sección (JS las muta en tiempo real) */
#como-funciona {
  --cf-fondo:        #F5F1EA;   /* cream → navy durante paso 2 */
  --cf-trazo:        #1F2C4C;   /* navy → cream durante paso 2 */
  --cf-texto:        #1F2C4C;
  --cf-pantalla-bg:  #E8E2D5;   /* cream oscuro → navy oscuro */
  --cf-indicador-op: 0.4;
}

/* ── Sección base ── */
#como-funciona {
  position: relative;
  background: var(--cf-fondo);
  transition: background 0.05s linear; /* JS la reemplaza con GSAP */
}

/* ── Spacer de 500vh que genera el scroll (paso 4 dura 200vh) ── */
.cf-spacer {
  height: 500vh;
  position: relative;
}

/* ── Sticky container (viewport fijo durante los 400vh) ── */
.cf-sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 var(--space-sm);
}

/* ── Título de sección ── */
.cf-etiqueta {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cf-trazo);
  opacity: 0.5;
  margin-top: 0;
  margin-bottom: 0.25rem;
  transition: color 0.05s linear;
}

.cf-titulo-seccion {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cf-texto);
  margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
  text-align: center;
  transition: color 0.05s linear;

  /* Oculto inicialmente — JS lo revela al entrar viewport */
  opacity: 0;
  transform: translateY(20px);
}

/* ── Teléfono SVG wrapper ── */
.cf-telefono-wrap {
  position: relative;
  /* Altura del teléfono: 40vh mobile, 50vh desktop */
  height: clamp(240px, 40vh, 50vh);
  width: auto;
  flex-shrink: 0;
}

#telefono-svg {
  height: 100%;
  width: auto;
  display: block;
  will-change: transform, filter;
}

/* Trazo dinámico (stroke del SVG) */
.cf-trazo-dinamico {
  stroke: var(--cf-trazo);
  transition: stroke 0.05s linear; /* JS reemplaza con GSAP */
}

/* Relleno dinámico (pequeños detalles del SVG) */
.cf-relleno-dinamico {
  fill: var(--cf-trazo);
  transition: fill 0.05s linear;
}

/* ── Capa de animaciones superpuesta a la pantalla del SVG ── */
#cf-animacion-layer {
  position: absolute;
  /* Estas coordenadas se calibran via JS al montar (getBoundingClientRect) */
  /* Los valores aquí son aproximados para evitar layout shifts */
  top: 12%;
  left: 10%;
  width: 80%;
  height: 76%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 4px;
}

/* Canvas de partículas (paso 1: polvo, paso 4: flotantes) */
#cf-canvas-particulas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Gota azul fosforescente (paso 2) ── */
#cf-gota-azul {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.cf-gota-circulo {
  width: 18px;
  height: 22px;
  background: #4DD8FF;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:
    0 0 8px rgba(77, 216, 255, 0.8),
    0 0 20px rgba(77, 216, 255, 0.4);
  margin: 0 auto;
}

.cf-gota-expansion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: rgba(77, 216, 255, 0.3);
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Escáner UV (paso 3) ── */
#cf-scanner-uv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.cf-franja-uv {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(139, 92, 246, 0.5),
    rgba(34, 211, 238, 0.7),
    rgba(139, 92, 246, 0.5),
    transparent
  );
  filter: blur(3px);
  will-change: transform;
}

/* ── Moléculas hexagonales SVG (paso 3) ── */
#cf-moleculas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.cf-molecula {
  opacity: 0;
  /* Las nanopartículas son círculos — no necesitan transform-box */
  will-change: opacity, r;
}

.cf-linea-mol {
  opacity: 0;
  will-change: opacity;
}

.cf-circuito {
  opacity: 0;
  will-change: opacity;
}

/* ── Glow de pantalla blindada (paso 4) ── */
#cf-glow-pantalla {
  position: absolute;
  inset: -4px;
  border-radius: 4px;
  box-shadow:
    inset 0 0 20px rgba(77, 216, 255, 0.0),
    0 0 0px rgba(77, 216, 255, 0.0);
  pointer-events: none;
  will-change: box-shadow;
}

/* ── Indicador de paso: 1 / 4 ── */
.cf-indicador {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cf-trazo);
  opacity: var(--cf-indicador-op);
  margin-top: clamp(0.25rem, 0.75vh, 0.5rem);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  transition: color 0.05s linear;
  will-change: opacity;
}

#cf-paso-actual {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #F18B3B; /* naranja fijo — no cambia con el fondo */
  will-change: opacity;
}

/* Acento naranja en el título de sección */
.cf-titulo-acento {
  color: #F18B3B;
}

.cf-indicador-sep,
.cf-indicador-total {
  opacity: 0.5;
}

/* ── Cartas de título ── */
.cf-cartas-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: clamp(4.5rem, 12vh, 7rem);
  overflow: hidden;
}

.cf-carta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(110%);
  opacity: 0;
  will-change: transform, opacity;
}

.cf-carta--activa {
  transform: translateX(0);
  opacity: 1;
}

.cf-carta-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.375rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cf-texto);
  text-align: center;
  line-height: 1.1;
  transition: color 0.05s linear;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .cf-sticky-container {
    padding: 0 clamp(2rem, 5vw, 5rem);
  }

  .cf-telefono-wrap {
    height: clamp(300px, 52vh, 62vh);
  }

  #cf-animacion-layer {
    top: 12%;
    left: 10%;
    width: 80%;
    height: 76%;
  }

  .cf-cartas-wrapper {
    max-width: 600px;
    height: clamp(5rem, 12vh, 7rem);
  }

  .cf-carta-titulo {
    font-size: clamp(1.75rem, 3vw, 3rem);
  }
}

/* ── Subtítulo dentro de la carta paso 4 ── */
.cf-carta-subtitulo {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-weight: 400;
  color: var(--cf-texto);
  letter-spacing: 0.01em;
  margin-top: 0.25rem;
  text-align: center;
  opacity: 0.85;
  transition: color 0.05s linear;
}

.cf-carta-subtitulo .cf-mf-numero {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #F18B3B;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — 4 estados estáticos
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Mostrar las 4 cartas como lista vertical, sin sticky */
  #como-funciona {
    --cf-fondo: #F5F1EA;
    --cf-trazo: #1F2C4C;
    --cf-texto: #1F2C4C;
  }

  .cf-spacer {
    height: auto; /* 500vh colapsado en reduced-motion */
  }

  .cf-sticky-container {
    position: relative;
    height: auto;
    min-height: 0;
    padding-bottom: 4rem;
  }

  .cf-telefono-wrap {
    height: clamp(200px, 40vw, 280px);
  }

  .cf-cartas-wrapper {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .cf-carta {
    position: relative;
    transform: none;
    opacity: 1;
    margin-bottom: 1rem;
  }

  #cf-animacion-layer,
  #cf-gota-azul,
  #cf-scanner-uv,
  #cf-moleculas-svg,
  #cf-canvas-particulas,
  #cf-glow-pantalla {
    display: none;
  }

}