/* ReserApp — sitio público (portada, privacidad, términos)
   Mismos tokens de color que la app principal, para que se sienta la misma marca. */

:root {
    --primary: #6B5B95;
    --primary-dark: #4A3F6B;
    --primary-light: #F0E6FF;
    --secondary: #FF9500;
    --surface: #FAFAF8;
    --outline: #8B7BA8;
    --on-surface: #3D3D3A;
    --border: #E4DCF3;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 20px rgba(107, 91, 149, 0.10);
    --shadow-lg: 0 12px 40px rgba(107, 91, 149, 0.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--on-surface);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* --- Barra superior, compartida en las 3 páginas --- */
/* sticky + fondo esmerilado: se queda arriba al hacer scroll y gana sombra propia
   (ver .site-nav.is-scrolled / site.js) — patrón estándar de sitio profesional. */
/* Fondo sólido, no esmerilado — el "backdrop-filter: blur" que tenía antes obliga al
   navegador a recalcular el desenfoque en cada frame de scroll (la barra es sticky,
   así que está "activa" todo el tiempo) y es lo que se sentía pesado/no fluido. Un
   color sólido da el mismo look limpio sin ese costo. */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
    padding: 18px 24px;
    background: var(--surface);
    transition: box-shadow 0.2s ease;
}

.site-nav.is-scrolled {
    box-shadow: 0 2px 18px rgba(107, 91, 149, 0.14);
}

/* white-space:nowrap a propósito — sin esto, en una rotación de pantalla o un ancho
   intermedio el texto "ReserApp" podía partirse en 2 líneas dentro del mismo link
   flex y superponerse visualmente con el logo (ver reporte de este bug). Con esto el
   nombre nunca se parte, como mucho el link completo se ve más angosto. */
.site-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.site-nav-brand:hover { opacity: 0.85; }

.site-nav-brand img {
    height: 34px;
    width: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.site-nav-brand:hover img {
    transform: rotate(-6deg) scale(1.05);
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-nav-links a {
    color: var(--outline);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.15s;
}

.site-nav-links a:hover,
.site-nav-links a.active {
    color: var(--primary);
}

/* Botón hamburguesa: oculto en escritorio, mismo ícono que usa la app principal para
   el menú lateral. Solo aparece por debajo del punto de quiebre de abajo. */
.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--primary-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.site-nav-toggle:hover { background: var(--primary-light); }

/* --- Portada --- */
.hero {
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
                linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 30px 24px 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    margin-top: 20px;
}

.hero h1 {
    font-size: clamp(34px, 6vw, 56px);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero p.subtitle {
    font-size: clamp(16px, 2.4vw, 20px);
    opacity: 0.92;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.hero-cta {
    margin-top: 36px;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover { transform: translateY(-2px); }

.btn-white {
    background: white;
    color: var(--primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.6);
}

/* Tarjetas de módulos, superpuestas al borde inferior del hero */
.modulos {
    max-width: 960px;
    margin: -60px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.modulo-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 26px 20px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.modulo-card .material-symbols-rounded {
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 14px;
    padding: 12px;
    font-size: 28px;
    margin-bottom: 14px;
}

.modulo-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.modulo-card p {
    margin: 0;
    font-size: 13px;
    color: var(--outline);
    line-height: 1.4;
}

/* --- Secciones de contenido de la portada --- */
main.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 90px 24px 40px;
}

.section-eyebrow {
    color: var(--secondary);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

section.block {
    margin-bottom: 64px;
}

section.block h2 {
    font-size: 28px;
    margin: 0 0 16px;
    color: var(--primary-dark);
}

section.block p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--on-surface);
}

.pasos {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.paso {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.paso-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.paso p { margin: 0; font-size: 15px; }
.paso strong { color: var(--primary-dark); }

.contact-card {
    background: linear-gradient(135deg, var(--primary-light), #FAF6FF);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    border: 1px solid var(--border);
}

.contact-card h2 { color: var(--primary-dark); margin-top: 0; }

.contact-card a.mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
}

/* --- Páginas legales (privacidad / términos) --- */
.legal-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 10px 24px 56px;
    text-align: center;
}

.legal-hero .material-symbols-rounded {
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 14px;
    font-size: 30px;
    margin-bottom: 16px;
}

.legal-hero h1 { margin: 4px 0 6px; font-size: 32px; }
.legal-hero .updated { opacity: 0.85; font-size: 14px; margin: 0; }

.legal-card {
    max-width: 720px;
    margin: -32px auto 60px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 44px 40px;
    position: relative;
    z-index: 2;
}

.legal-card h2 {
    color: var(--primary-dark);
    font-size: 19px;
    margin: 32px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-card h2:first-child { margin-top: 0; }

.legal-card p, .legal-card li {
    line-height: 1.7;
    font-size: 15px;
}

.legal-card ul { padding-left: 20px; }

.legal-card a { font-weight: 600; }

/* --- Footer compartido --- */
footer.site-footer {
    text-align: center;
    padding: 36px 24px 44px;
    color: var(--outline);
    font-size: 14px;
}

footer.site-footer .footer-links {
    margin-bottom: 10px;
}

footer.site-footer a {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
    margin: 0 12px;
}

footer.site-footer a:hover { text-decoration: underline; }

footer.site-footer p { margin: 0; opacity: 0.8; }

/* Menú hamburguesa en vez de forzar los 4 links junto al logo — con poco ancho eso
   se veía apretado y a veces se superponía (ver reporte de este bug). El panel de
   links se despliega debajo de la barra, no encima del logo, y nunca compite con él
   por espacio. */
@media (max-width: 560px) {
    .site-nav {
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .site-nav-toggle {
        display: flex;
    }

    /* display:none en vez de animar max-height — animar alto obliga a recalcular el
       layout en cada frame (se sentía pesado). display:none/flex es instantáneo, y el
       pequeño keyframe de abajo (transform+opacity, ver .is-open) le da igual una
       entrada suave sin ese costo. */
    .site-nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-top: 14px;
    }

    .site-nav-links.is-open {
        display: flex;
        animation: navLinksIn 0.18s ease both;
    }

    @keyframes navLinksIn {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .site-nav-links a {
        width: 100%;
        padding: 10px 4px;
        border-top: 1px solid var(--border);
        font-size: 15px;
    }

    .legal-card { padding: 32px 22px; margin-top: -24px; }
    main.page { padding-top: 70px; }
}

/* ============================================
   ANIMACIONES
   ============================================ */

/* Entrada del hero al cargar la página — cada elemento aparece con un pequeño
   desfase (delay) para que se sienta como una secuencia, no todo de golpe. */
/* Distancias y duraciones cortas a propósito (16px / ~0.4s, curva ease-out) — una
   animación más larga o con más recorrido es lo que se sentía "pesada" antes. */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero h1 { animation: fadeSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both; }
.hero .subtitle { animation: fadeSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.hero-cta { animation: fadeSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }

.legal-hero .material-symbols-rounded { animation: fadeSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.legal-hero h1 { animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.legal-hero .updated { animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }

/* Aparición al hacer scroll (ver site.js, que agrega "is-visible" cuando el elemento
   entra en pantalla) — arranca invisible/corrido y se asienta en su lugar. Si el
   navegador no soporta IntersectionObserver, site.js lo revela de una a todos. */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Aparición escalonada de las tarjetas de módulo y los pasos — cada una un poco más
   tarde que la anterior, sin depender de JS para el delay (solo para el disparo). */
.modulos .modulo-card:nth-child(1) { transition-delay: 0s; }
.modulos .modulo-card:nth-child(2) { transition-delay: 0.05s; }
.modulos .modulo-card:nth-child(3) { transition-delay: 0.1s; }
.modulos .modulo-card:nth-child(4) { transition-delay: 0.15s; }

.pasos .paso:nth-child(1) { transition-delay: 0s; }
.pasos .paso:nth-child(2) { transition-delay: 0.06s; }
.pasos .paso:nth-child(3) { transition-delay: 0.12s; }

/* Micro-interacciones al pasar el mouse — cortas y solo con transform (sin animar
   box-shadow de forma continua, que obliga a repintar) para que se sientan livianas. */
.modulo-card {
    transition: transform 0.15s ease-out;
}

.modulo-card:hover {
    transform: translateY(-4px);
}

.modulo-card:hover .material-symbols-rounded {
    transform: scale(1.08);
}

.modulo-card .material-symbols-rounded {
    transition: transform 0.15s ease-out;
}

.paso {
    transition: transform 0.15s ease-out, border-color 0.15s ease-out;
}

.paso:hover {
    transform: translateX(3px);
    border-color: var(--primary);
}

.contact-card a.mail {
    transition: transform 0.15s ease-out;
}

.contact-card a.mail:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(107, 91, 149, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}