/* ============================================================
   VOYA · Sistema de diseño compartido
   Glassmorphism premium · tono claro · moderno y futurista
   Inspiración: Apple · Raycast · Linear (modo claro)
   ------------------------------------------------------------
   Este archivo define los tokens y las primitivas visuales que
   comparten landing, antes y durante. Cada pantalla añade sus
   propias reglas en su style.css.
   ============================================================ */

:root{
  /* ---------- Fondos ---------- */
  --bg-primary:#F8F7FF;
  --bg-secondary:#FFFFFF;
  --bg-tint:#EEF2FF;

  /* ---------- Glass ---------- */
  --glass:rgba(255,255,255,0.7);
  --glass-strong:rgba(255,255,255,0.88);
  --glass-soft:rgba(255,255,255,0.5);
  --glass-border:rgba(255,255,255,0.9);
  --blur:blur(20px);
  --blur-sm:blur(12px);

  /* ---------- Identidad Voya ---------- */
  --coral:#FF5C35;
  --coral-light:rgba(255,92,53,0.08);
  --coral-tint:rgba(255,92,53,0.14);
  --coral-ink:#D8411A;
  --indigo:#667eea;
  --violet:#764ba2;

  /* ---------- Acentos legibles sobre fondo claro ---------- */
  --mint:#0FA98F;
  --mint-light:rgba(15,169,143,0.09);
  --mint-border:rgba(15,169,143,0.26);
  --amber:#A9741B;
  --amber-light:rgba(255,179,71,0.15);
  --amber-border:rgba(255,179,71,0.4);

  /* ---------- Pasteles suaves (tags, chips) ---------- */
  --pastel-lavender:#EFF0FE;
  --pastel-lavender-ink:#5A5BD0;
  --pastel-mint:#E7F7F3;
  --pastel-mint-ink:#0A8872;
  --pastel-peach:#FFF1EC;
  --pastel-peach-ink:#C44A24;
  --pastel-sky:#EBF4FF;
  --pastel-sky-ink:#2A62A6;
  --pastel-sand:#FBF4E9;
  --pastel-sand-ink:#8A6512;

  /* ---------- Texto ---------- */
  --text-primary:#0F0F1A;
  --text-secondary:#6B7280;
  --text-muted:rgba(15,15,26,0.4);

  /* ---------- Degradados ---------- */
  --gradient-hero:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#FF5C35 100%);
  --gradient-card:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.6));
  --gradient-text:linear-gradient(135deg,#FF5C35,#764ba2);
  --gradient-coral:linear-gradient(135deg,#FF7049,#FF5C35);
  --gradient-page:linear-gradient(180deg,#F8F7FF 0%,#EEF2FF 100%);

  /* ---------- Sombras ---------- */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg:0 24px 64px rgba(0,0,0,0.12);
  --shadow-coral:0 8px 24px rgba(255,92,53,0.3);
  --shadow-coral-hover:0 14px 34px rgba(255,92,53,0.38);

  /* ---------- Bordes y radios ---------- */
  --border:rgba(0,0,0,0.06);
  --border-strong:rgba(0,0,0,0.1);
  --r-xl:20px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;
  --r-pill:100px;

  /* ---------- Movimiento ---------- */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --t:0.3s ease;

  color-scheme:light;
}

/* ============================================================
   RESET
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;max-width:100%;}

html{
  /* overflow-x:hidden; */ /* Eliminado: rompe position:sticky en navegadores */
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-size:14px;
  line-height:1.6;
  /* overflow-x:hidden; */ /* Eliminado: rompe position:sticky en navegadores */
  width:100%;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
button{font-family:inherit;color:inherit;}
img{max-width:100%;display:block;}
input,select,textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  font-family:inherit;
  color-scheme:light;
}
[hidden]{display:none !important;}

:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
}

/* ============================================================
   TIPOGRAFÍA PREMIUM
   ============================================================ */
h1,h2,h3,h4{
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--text-primary);
  font-weight:800;
}

/* Números y cifras grandes con degradado coral → violeta */
.grad-text,
.num-grad{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--coral);
}

/* ============================================================
   PRIMITIVA GLASS
   ============================================================ */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md);
  border-radius:var(--r-lg);
}

.glass-lift{
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.glass-lift:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

/* ============================================================
   BOTÓN PRIMARIO CORAL (+ ripple suave al click)
   ============================================================ */
.v-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-weight:700;
  border:none;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t), opacity var(--t);
  -webkit-tap-highlight-color:transparent;
}
.v-btn--coral{
  background:var(--coral);
  color:#fff;
  box-shadow:var(--shadow-coral);
}
.v-btn--coral:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-coral-hover);
}
.v-btn--coral:active{transform:translateY(0);}

/* Ripple sin JavaScript: se comprime al presionar y se expande al soltar. */
.v-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:240%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  transform:translate(-50%,-50%) scale(1);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:transform 0.55s ease-out, opacity 0.55s ease-out;
}
.v-btn:active::after{
  transform:translate(-50%,-50%) scale(0);
  opacity:0.55;
  transition:none;
}

/* ============================================================
   REVELADO AL SCROLL
   El observer existente añade .is-visible al contenedor;
   los hijos .reveal entran escalonados sin tocar el JS.
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.is-visible .reveal{opacity:1;transform:none;}
.is-visible .reveal:nth-child(1){transition-delay:0.05s;}
.is-visible .reveal:nth-child(2){transition-delay:0.14s;}
.is-visible .reveal:nth-child(3){transition-delay:0.23s;}
.is-visible .reveal:nth-child(4){transition-delay:0.32s;}
.is-visible .reveal:nth-child(5){transition-delay:0.41s;}
.is-visible .reveal:nth-child(6){transition-delay:0.5s;}

/* ============================================================
   ANIMACIONES COMPARTIDAS
   ============================================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes floatSoft{
  0%,100%{transform:translateY(0) rotate(var(--tilt,0deg));}
  50%{transform:translateY(-14px) rotate(var(--tilt,0deg));}
}
@keyframes auroraDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(4%,-3%,0) scale(1.06);}
  66%{transform:translate3d(-3%,4%,0) scale(0.97);}
}
@keyframes shimmerSlide{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(220%);}
}
@keyframes popScale{
  0%{transform:scale(1);}
  40%{transform:scale(1.28);}
  65%{transform:scale(0.9);}
  100%{transform:scale(1);}
}
@keyframes spinSoft{
  to{transform:rotate(360deg);}
}

.anim-fade-up{animation:fadeUp 0.6s var(--ease) both;}

/* ============================================================
   AURORA DECORATIVA (manchas de color difuminadas)
   ============================================================ */
.aurora{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.aurora::before,
.aurora::after{
  content:"";
  position:absolute;
  width:60vmax;
  height:60vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.5;
}
.aurora::before{
  top:-26vmax;
  left:-18vmax;
  background:radial-gradient(circle,rgba(102,126,234,0.42),transparent 68%);
  animation:auroraDrift 22s ease-in-out infinite;
}
.aurora::after{
  bottom:-30vmax;
  right:-20vmax;
  background:radial-gradient(circle,rgba(255,92,53,0.3),transparent 68%);
  animation:auroraDrift 28s ease-in-out infinite reverse;
}

/* ============================================================
   LOADING ELEGANTE
   ============================================================ */
.v-spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2.5px solid rgba(15,15,26,0.08);
  border-top-color:var(--coral);
  animation:spinSoft 0.75s linear infinite;
}
.v-skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(15,15,26,0.05);
  border-radius:var(--r-sm);
}
.v-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85),transparent);
  animation:shimmerSlide 1.3s ease-in-out infinite;
}

/* ============================================================
   SCROLLBARS DISCRETOS
   ============================================================ */
*{scrollbar-width:thin;scrollbar-color:rgba(15,15,26,0.16) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(15,15,26,0.14);border-radius:var(--r-sm);}
::-webkit-scrollbar-thumb:hover{background:rgba(15,15,26,0.24);}

/* ============================================================
   ACCESIBILIDAD: respeta la preferencia de menos movimiento
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
}