/* ==========================================================================
   Tu Equipo IA — Lista de espera
   Tema oscuro derivado del design system (Branding/design-system/tokens.css).
   Los colores de marca no se tocan; los tonos oscuros son variaciones del
   Azul Noche (#10223D), igual que el sistema ya define --azul-900.
   ========================================================================== */

:root {
  /* Paleta maestra (no tocar) */
  --azul-equipo: #009EC5;
  --azul-noche:  #10223D;
  --crema:       #F7F6F2;
  --dorado:      #FFC31A;
  --blanco:      #FFFFFF;

  /* Variaciones tonales del azul */
  --azul-400: #00AAD4;
  --azul-300: #7FD0E5;
  --azul-700: #007C9B;
  --dorado-borde: #F0B400;
  --dorado-claro: #FFD968;

  /* Superficies oscuras (sombras del Azul Noche) */
  --fondo:        #060F1C;
  --superficie:   #0C1A2E;
  --superficie-2: #10223D;
  --superficie-3: #162B49;

  --linea:        rgba(247, 246, 242, 0.10);
  --linea-fuerte: rgba(247, 246, 242, 0.18);

  --texto:   var(--crema);
  --texto-2: rgba(247, 246, 242, 0.70);
  --texto-3: rgba(247, 246, 242, 0.46);

  /* Funcionales */
  --rojo:       #FF6B5E;
  --rojo-fondo: rgba(196, 69, 59, 0.14);
  --rojo-borde: rgba(255, 107, 94, 0.38);
  --verde:      #2BD49A;

  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radio:    16px;
  --radio-lg: 24px;
  --ancho:    1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Ambiente: auroras de marca + rejilla. Todo decorativo, sin capturar clics.
   -------------------------------------------------------------------------- */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.aurora--turquesa {
  width: 62vw; height: 62vw;
  top: -22vw; left: -12vw;
  background: radial-gradient(circle, rgba(0, 158, 197, 0.55) 0%, rgba(0, 158, 197, 0) 68%);
  animation: flotar 22s ease-in-out infinite;
}

.aurora--dorada {
  width: 46vw; height: 46vw;
  top: 8vw; right: -14vw;
  background: radial-gradient(circle, rgba(255, 195, 26, 0.30) 0%, rgba(255, 195, 26, 0) 68%);
  animation: flotar 28s ease-in-out infinite reverse;
}

.aurora--baja {
  width: 70vw; height: 50vw;
  bottom: -20vw; left: 20vw;
  background: radial-gradient(circle, rgba(0, 158, 197, 0.35) 0%, rgba(0, 158, 197, 0) 70%);
  animation: flotar 34s ease-in-out infinite;
}

.rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 246, 242, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 246, 242, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
}

@keyframes flotar {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vw, 4vw, 0) scale(1.12); }
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.contenido { position: relative; z-index: 1; }

.envoltorio {
  width: min(100% - 40px, var(--ancho));
  margin-inline: auto;
}

.estrecho { max-width: 780px; margin-inline: auto; }

section { padding: 84px 0; }

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  margin: 0 0 18px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

h1 { font-size: clamp(38px, 6.2vw, 68px); font-weight: 900; }
h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }

p { margin: 0 0 18px; }

.entradilla {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--texto-2);
}

.destello {
  background: linear-gradient(100deg, var(--dorado) 12%, var(--dorado-claro) 48%, var(--dorado) 84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.turquesa { color: var(--azul-300); }
.fuerte   { color: var(--crema); font-weight: 700; }
.subrayado {
  color: var(--crema);
  font-weight: 700;
  box-shadow: inset 0 -0.42em 0 rgba(0, 158, 197, 0.34);
}

.centro { text-align: center; }

/* --------------------------------------------------------------------------
   Etiqueta superior
   -------------------------------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 158, 197, 0.42);
  background: rgba(0, 158, 197, 0.10);
  color: var(--azul-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(0, 158, 197, 0.22);
}

.etiqueta--dorada {
  border-color: rgba(255, 195, 26, 0.45);
  background: rgba(255, 195, 26, 0.10);
  color: var(--dorado);
  box-shadow: 0 0 34px rgba(255, 195, 26, 0.20);
}

.punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--azul-equipo);
  box-shadow: 0 0 0 0 rgba(0, 158, 197, 0.8);
  animation: latir 2.4s ease-out infinite;
}

.etiqueta--dorada .punto { background: var(--dorado); box-shadow: 0 0 0 0 rgba(255, 195, 26, 0.8); }

@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(0, 158, 197, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(0, 158, 197, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 158, 197, 0); }
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 42px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.boton--principal {
  background: linear-gradient(135deg, var(--dorado-claro) 0%, var(--dorado) 52%, var(--dorado-borde) 100%);
  color: var(--azul-noche);
  box-shadow:
    0 0 0 1px rgba(255, 195, 26, 0.55),
    0 12px 34px rgba(255, 195, 26, 0.30),
    0 0 74px rgba(255, 195, 26, 0.24);
}

.boton--principal:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 195, 26, 0.7),
    0 16px 42px rgba(255, 195, 26, 0.40),
    0 0 104px rgba(255, 195, 26, 0.34);
}

.boton--verde {
  background: linear-gradient(135deg, #3BE0AB 0%, #16B67F 100%);
  color: #04261B;
  box-shadow:
    0 0 0 1px rgba(43, 212, 154, 0.5),
    0 12px 34px rgba(22, 182, 127, 0.32),
    0 0 74px rgba(22, 182, 127, 0.26);
}

.boton--verde:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(43, 212, 154, 0.7),
    0 16px 42px rgba(22, 182, 127, 0.42),
    0 0 104px rgba(22, 182, 127, 0.34);
}

/* Brillo que barre el botón */
.boton::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-22deg);
  animation: barrido 4.6s ease-in-out infinite;
}

@keyframes barrido {
  0%, 62% { left: -140%; }
  100%    { left: 165%; }
}

.boton--grande { padding: 22px 52px; font-size: 17px; }
.boton--ancho  { width: 100%; }

.bajo-boton {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--texto-3);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.portada {
  padding: 116px 0 96px;
  text-align: center;
}

.portada__logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 26px rgba(0, 158, 197, 0.55));
}

.portada h1 { margin-top: 26px; }

.portada .entradilla { margin-inline: auto; max-width: 660px; }

.aviso-puertas {
  max-width: 660px;
  margin: 26px auto 38px;
  padding: 18px 24px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: rgba(16, 34, 61, 0.55);
  color: var(--texto-2);
  font-size: 16px;
}

.micro-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--texto-3);
}

.micro-datos span { display: inline-flex; align-items: center; gap: 8px; }

.sellos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.sello {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: rgba(12, 26, 46, 0.8);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
}

.sello b { color: var(--crema); }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.tarjeta {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radio-lg);
  border: 1px solid var(--linea);
  background:
    linear-gradient(180deg, rgba(22, 43, 73, 0.75) 0%, rgba(12, 26, 46, 0.85) 100%);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 158, 197, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 46px rgba(0, 158, 197, 0.16);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: rgba(0, 158, 197, 0.14);
  border: 1px solid rgba(0, 158, 197, 0.34);
  box-shadow: 0 0 26px rgba(0, 158, 197, 0.22);
}

.tarjeta__icono svg { width: 22px; height: 22px; stroke: var(--azul-300); }

.tarjeta p { margin: 0; color: var(--texto-2); font-size: 15.5px; }

.tarjeta--dorada .tarjeta__icono {
  background: rgba(255, 195, 26, 0.14);
  border-color: rgba(255, 195, 26, 0.38);
  box-shadow: 0 0 26px rgba(255, 195, 26, 0.22);
}

.tarjeta--dorada .tarjeta__icono svg { stroke: var(--dorado); }

.tarjeta__cinta {
  position: absolute;
  top: 18px; right: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 195, 26, 0.14);
  border: 1px solid rgba(255, 195, 26, 0.38);
  color: var(--dorado);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Autoridad
   -------------------------------------------------------------------------- */
.autoridad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 16px;
  margin-top: 42px;
}

.dato {
  padding: 26px 22px;
  border-radius: var(--radio-lg);
  border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(22, 43, 73, 0.7), rgba(12, 26, 46, 0.86));
  text-align: center;
}

.dato__cifra {
  display: block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--dorado);
  text-shadow: 0 0 30px rgba(255, 195, 26, 0.35);
}

.dato__texto {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--texto-2);
  line-height: 1.45;
}

.cita {
  max-width: 720px;
  margin: 46px auto 0;
  padding: 30px 34px;
  border-radius: var(--radio-lg);
  border: 1px solid rgba(0, 158, 197, 0.3);
  background: rgba(0, 158, 197, 0.07);
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  box-shadow: 0 0 60px rgba(0, 158, 197, 0.12);
}

/* --------------------------------------------------------------------------
   Lista de ventajas
   -------------------------------------------------------------------------- */
.ventajas {
  list-style: none;
  max-width: 720px;
  margin: 42px auto 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ventajas li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 22px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: rgba(12, 26, 46, 0.7);
  font-size: 16px;
  color: var(--texto-2);
}

.ventajas li b { color: var(--crema); }

.tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(0, 158, 197, 0.16);
  border: 1px solid rgba(0, 158, 197, 0.45);
  color: var(--azul-300);
  font-size: 13px;
  font-weight: 900;
}

.tick--verde {
  background: rgba(43, 212, 154, 0.14);
  border-color: rgba(43, 212, 154, 0.45);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Bloque de cierre / precio
   -------------------------------------------------------------------------- */
.cierre {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 54px 40px;
  border-radius: 30px;
  border: 1px solid rgba(255, 195, 26, 0.32);
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(255, 195, 26, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(22, 43, 73, 0.9), rgba(6, 15, 28, 0.94));
  text-align: center;
  box-shadow: 0 0 90px rgba(255, 195, 26, 0.12);
}

.precio {
  font-size: clamp(50px, 9vw, 86px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 10px 0 14px;
}

/* --------------------------------------------------------------------------
   Ventana emergente
   -------------------------------------------------------------------------- */
.fondo-ventana {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 10, 20, 0.82);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fondo-ventana.abierta { opacity: 1; visibility: visible; }

.ventana {
  position: relative;
  width: min(100%, 470px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 38px 34px 32px;
  border-radius: 26px;
  border: 1px solid rgba(0, 158, 197, 0.38);
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(0, 158, 197, 0.16), transparent 62%),
    linear-gradient(180deg, #102340 0%, #081426 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 90px rgba(0, 158, 197, 0.18);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.fondo-ventana.abierta .ventana { transform: translateY(0) scale(1); }

.ventana h3 {
  font-size: 27px;
  font-weight: 900;
  margin-bottom: 8px;
}

.ventana__intro {
  color: var(--texto-2);
  font-size: 15px;
  margin-bottom: 26px;
}

.cerrar {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-3);
  font-size: 17px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cerrar:hover { color: var(--crema); border-color: var(--linea-fuerte); }

.campo { margin-bottom: 16px; text-align: left; }

.campo label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.campo input {
  width: 100%;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(6, 15, 28, 0.75);
  color: var(--crema);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo input::placeholder { color: rgba(247, 246, 242, 0.32); }

.campo input:focus {
  outline: none;
  border-color: var(--azul-equipo);
  box-shadow: 0 0 0 4px rgba(0, 158, 197, 0.18);
}

.campo input[aria-invalid="true"] {
  border-color: var(--rojo);
  box-shadow: 0 0 0 4px rgba(196, 69, 59, 0.16);
}

.error {
  display: none;
  margin-top: 7px;
  font-size: 13px;
  color: var(--rojo);
}

.error.visible { display: block; }

.oculto-bot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.ventana__pie {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--texto-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Paso 2
   -------------------------------------------------------------------------- */
.progreso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 44px;
}

.paso { display: flex; align-items: center; gap: 11px; }

.paso__bola {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  border: 1px solid var(--linea-fuerte);
  background: rgba(12, 26, 46, 0.8);
  color: var(--texto-3);
}

.paso--hecho .paso__bola {
  background: linear-gradient(135deg, #3BE0AB, #16B67F);
  border-color: transparent;
  color: #04261B;
  box-shadow: 0 0 26px rgba(22, 182, 127, 0.4);
}

.paso--activo .paso__bola {
  background: linear-gradient(135deg, var(--dorado-claro), var(--dorado));
  border-color: transparent;
  color: var(--azul-noche);
  box-shadow: 0 0 30px rgba(255, 195, 26, 0.45);
}

.paso__texto {
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.paso--hecho .paso__texto,
.paso--activo .paso__texto { color: var(--texto); }

.linea-progreso {
  width: clamp(40px, 12vw, 96px);
  height: 2px;
  background: linear-gradient(90deg, var(--verde), rgba(255, 195, 26, 0.5));
  border-radius: 2px;
}

.gratis {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 22px;
  margin: 8px 0 34px;
  border-radius: 999px;
  border: 1px solid rgba(43, 212, 154, 0.4);
  background: rgba(43, 212, 154, 0.09);
  font-size: 14px;
  color: var(--texto-2);
}

.gratis b {
  color: var(--verde);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.alerta {
  position: relative;
  max-width: 720px;
  margin: 0 auto 42px;
  padding: 26px 28px;
  border-radius: var(--radio-lg);
  border: 1px solid var(--rojo-borde);
  background: var(--rojo-fondo);
  box-shadow: 0 0 60px rgba(196, 69, 59, 0.18);
  text-align: left;
}

.alerta__titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(196, 69, 59, 0.3);
  border: 1px solid var(--rojo-borde);
  color: #FFD5D0;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.alerta p { margin: 0; color: rgba(255, 228, 225, 0.92); font-size: 16px; }

.alerta p b { color: #FFFFFF; }

.pie {
  padding: 40px 0 50px;
  border-top: 1px solid var(--linea);
  text-align: center;
  font-size: 13px;
  color: var(--texto-3);
}

.pie a { color: var(--texto-3); }

/* --------------------------------------------------------------------------
   Aparición al desplazar
   -------------------------------------------------------------------------- */
.aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.aparece.visible { opacity: 1; transform: none; }

@media (max-width: 640px) {
  section { padding: 62px 0; }
  .cierre { padding: 40px 24px; }
  .ventana { padding: 32px 24px 26px; }
  .boton { padding: 17px 28px; font-size: 14px; width: 100%; }
  .progreso { gap: 9px; }
  .paso__texto { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; }
}