/* ===========================================================================
   STAGE — Landing "/app"
   Design system: Material + Liquid Glass (tokens --gl-*)
   Paleta oficial: #e63946 #457b9d #f1faee #1d3557 #a8dadc #24292b
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Orkney',sans-serif;
  color:#24292b;
  /* Liquid-glass tokens */
  --gl-blur:20px; --gl-sat:1.8;
  --gl-surface:rgba(255,255,255,.58); --gl-hl:rgba(255,255,255,.75);
  --gl-e1:0 1px 2px rgba(29,53,87,.05),0 10px 28px rgba(29,53,87,.09),inset 0 1px 0 var(--gl-hl);
  --gl-e2:0 1px 2px rgba(29,53,87,.05),0 4px 14px rgba(29,53,87,.07),inset 0 1px 0 var(--gl-hl);
  --gl-e3:0 2px 4px rgba(29,53,87,.10),0 10px 26px rgba(29,53,87,.15);
  --gl-e4:0 4px 8px rgba(29,53,87,.12),0 18px 40px rgba(29,53,87,.20);
  --gl-t:box-shadow .34s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.2,.8,.2,1),background-color .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease;
  --gl-bg:radial-gradient(120% 92% at 8% 0%,rgba(168,218,220,.55) 0%,transparent 56%),radial-gradient(112% 80% at 96% 8%,rgba(230,57,70,.14) 0%,transparent 58%),radial-gradient(100% 70% at 50% 100%,rgba(69,123,157,.18) 0%,transparent 56%),#f1faee;
  background:var(--gl-bg);
  background-size:160% 160%,160% 160%,160% 160%,auto;
  animation:glDrift 38s ease-in-out infinite;
}

h1,h2,h3,h4{font-family:'Orkney',sans-serif;font-weight:500;letter-spacing:-.014em;margin:0}

@keyframes glDrift{
  0%{background-position:0% 0%,100% 0%,50% 100%,0 0}
  50%{background-position:8% 5%,92% 7%,44% 95%,0 0}
  100%{background-position:0% 0%,100% 0%,50% 100%,0 0}
}

a{color:#457b9d;text-decoration:none}
a:hover{color:#1d3557}

/* Navegación interna suave; deja aire para el header pegajoso (~64px) */
html{scroll-behavior:smooth}
#top,#como,#cuenta,#planes{scroll-margin-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

@media (prefers-reduced-motion: reduce){
  body{animation:none}
}

/* ---------------------------------------------------------------------------
   Logo STAGE — wordmark badge (rojo con texto azul claro, fuente Anton).
   Reemplaza la imagen del logo anterior; no depende de archivos externos.
   --------------------------------------------------------------------------- */
.logo-badge{
  display:inline-flex;align-items:center;
  font-family:'Orkney',Impact,'Arial Narrow',sans-serif;
  background:#e63946;color:#a8dadc;
  letter-spacing:.10em;line-height:1;
  padding:8px 13px 6px;border-radius:9px;
  font-size:22px;text-transform:uppercase;
  box-shadow:var(--gl-e2);
}
.logo-badge:hover{color:#a8dadc}
.logo-badge--sm{font-size:18px;padding:6px 10px 4px;border-radius:7px}

/* ---------------------------------------------------------------------------
   Overlay del formulario "Solicitar acceso". Oculto por defecto; JS lo abre.
   --------------------------------------------------------------------------- */
.overlay{ display:none; }
.overlay.is-open{ display:flex; }
[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------------
   Responsive — el prototipo era solo desktop; reglas mínimas para móvil/tablet.
   --------------------------------------------------------------------------- */
@media (max-width: 900px){
  .grid-hero{ grid-template-columns:1fr !important; gap:40px !important; padding-top:64px !important; padding-bottom:64px !important; }
  .hero-title{ font-size:clamp(44px,11vw,72px) !important; }
  .grid-4{ grid-template-columns:repeat(2,1fr) !important; }
  .grid-3{ grid-template-columns:1fr !important; }
  .grid-2{ grid-template-columns:1fr !important; gap:32px !important; }
  .faq-grid{ grid-template-columns:1fr !important; }
  .section-title{ font-size:34px !important; }
  .watermark-ic{ display:none !important; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns:1fr !important; }
  .nav-links{ display:none !important; }
  .header-inner{ padding:12px 18px !important; gap:14px !important; }
  .section-pad{ padding-left:18px !important; padding-right:18px !important; }
  .hero-title{ font-size:clamp(38px,12vw,60px) !important; }
}