/* Estilos de las páginas públicas de Control: presentación, acceso, novedades y contraseña.
   Las utilidades vienen de Tailwind; acá quedan sólo animaciones, fondos y detalles que Tailwind no cubre. */
[v-cloak], [hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', sans-serif; font-feature-settings: 'cv11', 'ss01'; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.tabular { font-variant-numeric: tabular-nums; }
:target { scroll-margin-top: 6rem; }
::selection { background: rgb(52 87 213 / .18); }

/* Fondos: cuadrícula tenue que se desvanece y un halo con el azul de Control. */
.bg-grid {
  background-image: linear-gradient(rgb(24 27 32 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(24 27 32 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.bg-grid-dark {
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 70%);
}
.halo { background: radial-gradient(closest-side, rgb(52 87 213 / .22), transparent); filter: blur(10px); }
.text-gradient { background: linear-gradient(100deg, #3457d5 10%, #6366f1 55%, #1f9d6c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Aparición al hacer scroll. */
/* Corta y disparada antes de que la sección entre en pantalla: al bajar rápido no tiene que quedar nada en blanco. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Mock del producto: tarjetas flotantes y barras que crecen. */
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.flotar { animation: flotar 6s ease-in-out infinite; }
.flotar-lento { animation: flotar 8s ease-in-out -3s infinite; }
@keyframes crecer { from { transform: scaleY(0); } }
.barra { transform-origin: bottom; animation: crecer .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes avanzar { from { width: 0; } }
.progreso { animation: avanzar 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 200ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.entrar { animation: entrar .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.latido { animation: latido 2s ease-in-out infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.cursor::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: cursor 1s steps(1) infinite; }

/* Acceso: sacudida suave cuando algo falla y casillas del código de verificación. */
@keyframes sacudir { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.sacudir { animation: sacudir .45s cubic-bezier(.36,.07,.19,.97) both; }
.otp-input { caret-color: transparent; color: transparent; letter-spacing: 0; }
.otp-input::selection { background: transparent; }
.campo:focus-within .campo-icono { color: #3457d5; }

/* FAQ: el contenido se abre sin saltos. */
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-body { animation: entrar .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flotar, .flotar-lento, .barra, .progreso, .entrar, .latido, .sacudir, .cursor::after, details[open] .faq-body { animation: none; }
}