/* =====================================================================
   SpotAIGen design system — "Studio Gold"
   Night-studio navy, warm gold light, cream paper sections.
   Only change colors through these variables.
   ===================================================================== */

:root {
    /* Night (dark sections) */
    --as-fondo: #070a12;
    --as-fondo-2: #0a0f1b;
    --as-superficie: #0e1424;
    --as-superficie-2: #141c30;
    --as-borde: rgba(244, 185, 66, 0.14);
    --as-borde-fuerte: rgba(244, 185, 66, 0.34);

    /* Gold */
    --as-oro: #f4b942;
    --as-oro-claro: #ffd98a;
    --as-oro-hondo: #c98a1c;
    --as-oro-tinta: #1b1404;          /* text on gold */

    /* Cream (light sections) */
    --as-crema: #f7f2e8;
    --as-crema-2: #efe7d6;
    --as-tinta: #15161d;
    --as-tinta-2: #4f4c58;

    --as-texto: #f4f1ea;
    --as-texto-2: #b6bfd1;
    --as-texto-3: #7d889e;

    --as-ok: #34d399;
    --as-error: #fb7185;

    --as-degradado: linear-gradient(100deg, #ffe2a0 0%, #f4b942 45%, #d38b1a 100%);
    --as-degradado-boton: linear-gradient(180deg, #ffd27a 0%, #f4b942 55%, #e0a02c 100%);
    /* Neutral elevation: gold is reserved for what you can press, never for halos */
    --as-brillo: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
    --as-radio: 18px;
    --as-fuente: 'Onest', 'Segoe UI', system-ui, sans-serif;
    --as-fuente-display: 'Sora', 'Onest', system-ui, sans-serif;
    --as-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
    scroll-behavior: smooth; scrollbar-color: #2a3550 var(--as-fondo);
    /* Mobile: no gray tap flash (every control has its own :active) and no font inflation */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
.as-body button, .as-body a, .as-body summary, .as-body [role="button"] { touch-action: manipulation; }
.as-body button, .as-body summary, .as-boton, .as-boton-borde { -webkit-user-select: none; user-select: none; }

.as-body {
    background: var(--as-fondo);
    color: var(--as-texto);
    font-family: var(--as-fuente);
    caret-color: var(--as-oro);
    -webkit-font-smoothing: antialiased;
}
.as-body ::selection { background: rgba(244, 185, 66, 0.85); color: var(--as-oro-tinta); }
.as-body h1, .as-body h2, .as-body h3, .as-display { font-family: var(--as-fuente-display); letter-spacing: -0.025em; text-wrap: balance; }
.as-body :focus-visible { outline: 2px solid var(--as-oro); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--as-fondo); }
::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 99px; border: 2px solid var(--as-fondo); }
::-webkit-scrollbar-thumb:hover { background: #3a4868; }

/* Dark pages: a quiet night-blue depth, no colored spotlight */
.as-aurora { background: linear-gradient(180deg, #0b1120, var(--as-fondo) 60%); }

/* One gold word in the hero headline (the brief asks for it): solid, not gradient text */
.as-texto-degradado { color: var(--as-oro); }
.as-oro { color: var(--as-oro); }

/* Surfaces */
.as-tarjeta {
    background: linear-gradient(180deg, var(--as-superficie-2), var(--as-superficie));
    border: 1px solid var(--as-borde);
    border-radius: var(--as-radio);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}
.as-tarjeta-hover { transition: border-color .2s ease, transform .2s var(--as-ease-out), box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
    .as-tarjeta-hover:hover { border-color: var(--as-borde-fuerte); transform: translateY(-2px); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .9); }
}

.as-vidrio {
    background: rgba(10, 15, 27, 0.72);
    border: 1px solid var(--as-borde);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Cream paper sections */
.as-crema { background: var(--as-crema); color: var(--as-tinta); }
.as-crema ::selection { background: var(--as-oro); color: var(--as-oro-tinta); }
.as-crema .as-sub { color: var(--as-tinta-2); }

/* Buttons: gold pills */
.as-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 48px; padding: 0 1.5rem; border-radius: 999px;
    font-weight: 700; font-size: .95rem; color: var(--as-oro-tinta);
    background: var(--as-degradado-boton);
    box-shadow: var(--as-brillo), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(150, 95, 10, 0.35);
    transition: transform .16s var(--as-ease-out), filter .2s ease;
}
@media (hover: hover) and (pointer: fine) { .as-boton:hover { filter: brightness(1.06); } }
.as-boton:active, .as-boton-borde:active { transform: scale(.97); }
.as-boton:disabled { opacity: .6; cursor: wait; transform: none; }

.as-boton-borde {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 48px; padding: 0 1.4rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; color: var(--as-texto);
    border: 1px solid rgba(244, 241, 234, 0.28);
    background: rgba(255, 255, 255, 0.03);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--as-ease-out);
}
.as-crema .as-boton-borde { color: var(--as-tinta); border-color: rgba(21, 22, 29, 0.25); }
@media (hover: hover) and (pointer: fine) {
    .as-boton-borde:hover { background: rgba(244, 185, 66, 0.1); border-color: var(--as-oro); color: #fff; }
    .as-crema .as-boton-borde:hover { background: rgba(244, 185, 66, 0.18); border-color: var(--as-oro-hondo); color: var(--as-tinta); }
}

/* Forms */
.as-input {
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: rgba(7, 10, 18, 0.75); color: var(--as-texto);
    border: 1px solid rgba(182, 191, 209, 0.22); border-radius: 12px;
    font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.as-input::placeholder { color: var(--as-texto-3); }
.as-input:focus { border-color: var(--as-oro); box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.16); }

.as-enlace { color: var(--as-oro); font-weight: 600; text-underline-offset: 3px; }
.as-enlace:hover { color: var(--as-oro-claro); text-decoration: underline; }

/* Logo mark */
.as-logo-marca {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: var(--as-oro-tinta);
    background: var(--as-degradado-boton);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Gold sound waveform */
.as-onda { display: flex; align-items: center; gap: 4px; }
.as-onda span {
    width: 4px; border-radius: 99px;
    background: linear-gradient(180deg, #ffe2a0, #f4b942 50%, #c98a1c);
    transform-origin: center;
    animation: as-onda 1.2s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.as-onda span:nth-child(3n) { animation-duration: .9s; }
.as-onda span:nth-child(4n) { animation-duration: 1.5s; }
.as-onda span:nth-child(5n) { animation-duration: 1.05s; }
@keyframes as-onda { from { transform: scaleY(.22); } to { transform: scaleY(1); } }

.as-flotar { animation: as-flotar 7s ease-in-out infinite; }
@keyframes as-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Scroll reveal (only hidden when the "js" class is set by head_comun); transform + opacity only, no blur */
.js .as-revelar { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--as-ease-out), transform .6s var(--as-ease-out); }
.js .as-revelar.visible { opacity: 1; transform: none; }

/* Featured plan: gold border, neutral depth */
.as-plan-destacado {
    background:
        linear-gradient(180deg, #19223a, #0f1628) padding-box,
        var(--as-degradado) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95);
}

@media (prefers-reduced-motion: reduce) {
    .as-onda span, .as-flotar { animation: none !important; }
    /* Reduced motion keeps the fade, drops the movement */
    .js .as-revelar { transform: none; transition: opacity .3s ease; }
    .as-boton:active, .as-boton-borde:active { transform: none; }
    html { scroll-behavior: auto; }
}

/* Legal documents (terms, privacy) */
.legal { color: var(--as-texto-2); font-size: 15.5px; line-height: 1.75; }
.legal h1 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.15; }
.legal .legal-fecha { margin-top: .5rem; font-size: .85rem; color: var(--as-texto-3); }
.legal h2 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 2.6rem 0 .8rem; scroll-margin-top: 1.5rem; display: flex; gap: .7rem; align-items: baseline; }
.legal h2 .num { color: var(--as-oro); font-size: .95rem; }
.legal h3 { color: #fff; font-size: 1.02rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.legal p { margin: .7rem 0; max-width: 72ch; }
.legal ul { margin: .7rem 0; padding-left: 1.2rem; list-style: disc; max-width: 72ch; }
.legal li { margin: .35rem 0; }
.legal li::marker { color: var(--as-oro); }
.legal strong { color: #fff; }
.legal a { color: var(--as-oro); text-decoration: underline; text-underline-offset: 3px; }
.legal .tabla { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .9rem; }
.legal .tabla th { text-align: left; color: #fff; font-weight: 700; padding: .65rem .8rem; background: rgba(244,185,66,.08); border-bottom: 1px solid var(--as-borde-fuerte); }
.legal .tabla td { padding: .65rem .8rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
.legal .tabla-contenedor { overflow-x: auto; }
.legal .destacado { margin: 1.2rem 0; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(244,185,66,.07); border: 1px solid rgba(244,185,66,.28); color: var(--as-texto); }