:root {
    --color-bg: #FFFFFF;
    --color-surface: #F7F9FC;
    --color-surface-alt: #EEF2F7;
    --color-border: #E1E7F0;

    --color-text: #12202F;
    --color-text-muted: #5B6B7F;

    --color-primary: #2ECEC6;
    --color-primary-dark: #24A8A1;
    --color-primary-contrast: #0B1729;

    --color-accent-blue: #BFE3E0;

    --radius: 12px;
    --radius-lg: 20px;

    --max-width: 1120px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
    overflow-x: hidden;
}

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: inherit;
}

/* ============================================================================
   Temas de sección: cada <section> declara un tema (.theme-dark / .theme-blue /
   .theme-light) que redefine este set de variables LOCALES. Todo lo de adentro
   (tarjetas, chips, textos) usa estas variables en vez de los tokens globales de
   :root, así que agregar/cambiar el tema de una sección no requiere tocar cada
   componente por separado.
   ============================================================================ */

section {
    padding: 72px 0;
    --s-bg: var(--color-bg);
    --s-text: var(--color-text);
    --s-muted: var(--color-text-muted);
    --s-surface: var(--color-surface);
    --s-border: var(--color-border);
    --s-chip-bg: var(--color-surface-alt);
    background: var(--s-bg);
    color: var(--s-text);
}

/* Antes era un tema oscuro navy para el hero; se dejó de usar fondo azul a propósito
   (feedback de producto) — ahora es un degradé clarísimo, casi blanco, con un dejo de
   turquesa, así el hero sigue distinguiéndose del resto sin volver a un fondo oscuro. */
section.theme-blue {
    --s-bg: linear-gradient(165deg, #F3FBFA 0%, #FFFFFF 78%);
    --s-text: #12202F;
    --s-muted: #5B6B7F;
    --s-surface: #FFFFFF;
    --s-border: #E1E7F0;
    --s-chip-bg: #EEF2F7;
}

section.theme-light {
    --s-bg: #F7F9FC;
    --s-text: #12202F;
    --s-muted: #5B6B7F;
    --s-surface: #FFFFFF;
    --s-border: #E1E7F0;
    --s-chip-bg: #EEF2F7;
}

/* ---------- Botones (mismas clases que el resto del sitio, para que se vean iguales) ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    border: none;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: 0 8px 24px rgba(46, 206, 198, 0.28);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-primary[aria-disabled="true"] {
    background: var(--s-surface);
    color: var(--s-muted);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-ghost {
    background: transparent;
    color: var(--s-text);
    border: 1px solid var(--s-border);
    padding: 10px 20px;
    font-size: 0.92rem;
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-large {
    padding: 17px 34px;
    font-size: 1.1rem;
}

.buy-note {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--s-muted);
}

/* ---------- Nav ---------- */

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.landing-nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}

.nav-logo {
    height: 30px;
    width: auto;
    display: block;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding: 72px 0 40px;
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(46, 206, 198, 0.16);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 6vw, 3.1rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hero h1 .accent {
    color: var(--color-primary);
}

.hero-sub {
    margin: 0 0 28px;
    font-size: 1.08rem;
    color: var(--s-muted);
    max-width: 46ch;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

/* ---------- Escena 3D ----------
   A propósito SIN tarjeta/borde/fondo propio: el cartel tiene que flotar directo sobre el
   fondo de la sección (estilo Apple), no verse "metido en una caja". El único efecto es un
   resplandor suave detrás, con máscara radial para que se disuelva en los bordes sin dejar
   un rectángulo visible. */

.model-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin: 0 auto;
}

.model-glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 45%, rgba(46, 206, 198, 0.30), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

.model-stage canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
    cursor: grab;
    touch-action: pan-y;
}

.model-stage canvas:active {
    cursor: grabbing;
}

.model-stage.is-ready canvas {
    opacity: 1;
}

.model-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 32px;
}

.model-fallback img {
    height: 40px;
    width: auto;
    opacity: 0.9;
}

.model-fallback p {
    margin: 0;
    color: var(--s-muted);
    font-size: 0.85rem;
    max-width: 26ch;
}

.model-stage.is-ready .model-fallback,
.model-stage.has-error .model-fallback {
    display: none;
}

.model-stage.has-error .model-fallback {
    display: flex;
}

.model-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--s-muted);
}

/* ---------- Secciones genéricas ---------- */

.section-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}

.section-heading h2 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    color: var(--s-text);
}

.section-heading p {
    margin: 0;
    color: var(--s-muted);
}

/* ---------- Problema ---------- */

.problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.problem-card {
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--radius);
    padding: 22px;
}

.problem-card .emoji {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 10px;
}

.problem-card h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    color: var(--s-text);
}

.problem-card p {
    margin: 0;
    color: var(--s-muted);
    font-size: 0.92rem;
}

/* ---------- Cómo funciona ---------- */

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.step-card {
    position: relative;
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--radius);
    padding: 26px 22px 22px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 800;
    margin-bottom: 14px;
}

.step-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--s-text);
}

.step-card p {
    margin: 0;
    color: var(--s-muted);
    font-size: 0.92rem;
}

/* ---------- Features ---------- */

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.feature-card {
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--radius);
    padding: 22px;
}

.feature-card .emoji {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--s-text);
}

.feature-card p {
    margin: 0;
    color: var(--s-muted);
    font-size: 0.9rem;
}

/* ---------- Para quién ---------- */

.who-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.who-chips li {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--s-chip-bg);
    border: 1px solid var(--s-border);
    font-size: 0.9rem;
    color: var(--s-muted);
}

/* ---------- CTA final ---------- */

.final-cta {
    text-align: center;
}

.final-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 4.5vw, 2.3rem);
    font-weight: 800;
    color: var(--s-text);
}

.final-cta p {
    margin: 0 0 28px;
    color: var(--s-muted);
}

.final-cta .hero-ctas {
    justify-content: center;
}

/* ---------- Footer ---------- */

.landing-footer {
    padding: 32px 0 40px;
    text-align: center;
}

.landing-footer p {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--s-muted);
}

.landing-footer .footer-brand {
    font-weight: 700;
    color: var(--s-text);
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- Layout desktop ---------- */

@media (min-width: 860px) {
    .hero .wrap {
        grid-template-columns: 1.05fr 0.95fr;
    }

    .hero-sub {
        max-width: 40ch;
    }

    .problem-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1120px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}