/* ================================================================
   LUCA AESCH — styles.css
   Edita los colores aquí y se actualizan en todas las páginas.
   ================================================================ */

/* ── Colores del sitio (cambia solo acá) ──────────────────────── */
:root {
    --bg:         #EDE8DF;   /* fondo crema */
    --bg-nav:     #1A1520;   /* nav y footer oscuro */
    --bg-card:    #FAFAF6;   /* fondo de cards */
    --text:       #241A0E;   /* texto principal espresso */
    --text-muted: #7A6E65;   /* texto secundario */
    --accent:     #B8892A;   /* dorado/ámbar */
}

/* ── Body: crema + textura papel ─────────────────────────────── */
body {
    background-color: var(--bg);
    color: var(--text);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E"),
        repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, rgba(36,26,14,0.030) 27px, rgba(36,26,14,0.030) 28px);
    background-attachment: local, local;
}

/* ── Nav, footer y mobile menu siempre oscuros ───────────────── */
#main-nav,
#mobile-menu,
footer {
    background-color: var(--bg-nav) !important;
    color: #EDE8DF !important;
}

/* ── Secciones con bg-morado-profundo → oscuras ──────────────── */
section.bg-morado-profundo,
section[class*="bg-morado-profundo"] {
    background-color: var(--bg-nav) !important;
}

/* ── Cards blancas → color del sistema ───────────────────────── */
.bg-white { background-color: var(--bg-card) !important; }
.bg-stone-100 { background-color: #E2DCCF !important; }

/* ── Barra de progreso de scroll ─────────────────────────────── */
#scroll-bar {
    position: fixed; top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), #D4A040);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ── Vistas SPA ──────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ── Menú móvil ──────────────────────────────────────────────── */
#mobile-menu {
    display: none;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
#mobile-menu.open { display: flex; transform: translateX(0); }

/* ── Animaciones reveal al hacer scroll ──────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity  0.85s cubic-bezier(0.25,0.46,0.45,0.94),
        transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Sombras de secciones ────────────────────────────────────── */
section {
    box-shadow:
        0 2px 6px   rgba(36,26,14,0.05),
        0 10px 28px rgba(36,26,14,0.08),
        0 32px 64px rgba(36,26,14,0.06),
        0 56px 96px rgba(36,26,14,0.03) !important;
}

/* ── Cards de sesión: esquinas redondeadas + borde ámbar ─────── */
.session-card {
    background: var(--bg-card);
    border-radius: 24px;
    border: 1.5px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1.5px rgba(184,137,42,0.22),
        inset 0 0 0 1.5px rgba(184,137,42,0.08),
        0 4px 12px  rgba(36,26,14,0.07),
        0 14px 36px rgba(36,26,14,0.09),
        0 40px 72px rgba(36,26,14,0.06);
    transition:
        transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94),
        box-shadow 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    position: relative;
    overflow: hidden;
}
/* degradé en el borde */
.session-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(145deg,
        rgba(184,137,42,0.50) 0%,
        rgba(184,137,42,0.08) 45%,
        rgba(184,137,42,0.40) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.session-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 0 0 1.5px rgba(184,137,42,0.40),
        0 6px 18px  rgba(36,26,14,0.09),
        0 24px 52px rgba(36,26,14,0.12),
        0 56px 88px rgba(36,26,14,0.08);
}
.session-card > div:first-child {
    border-radius: 22px 22px 0 0;
    overflow: hidden;
}

/* ── Spotlight desactivado ───────────────────────────────────── */
[data-spotlight]::after { display: none; }

/* ── Carrusel de testimonios ─────────────────────────────────── */
.testimonial-outer { overflow: hidden; }
.testimonial-container {
    display: flex; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding-bottom: 0.5rem;
}
.testimonial-container:active { cursor: grabbing; }
.testimonial-card {
    flex: 0 0 min(380px, 85vw);
    background: var(--bg-card);
    border: 1px solid rgba(36,26,14,0.08);
    padding: 2.5rem;
    scroll-snap-align: start;
    box-shadow: 0 4px 12px rgba(36,26,14,0.06), 0 16px 40px rgba(36,26,14,0.07);
}

/* ── Ocultar scrollbar ───────────────────────────────────────── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid rgba(36,26,14,0.10); }
.faq-question {
    width: 100%; display: flex;
    justify-content: space-between; align-items: center;
    padding: 1.5rem 0; text-align: left;
    cursor: pointer; background: none; border: none;
}
.faq-answer {
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height 0.45s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.45s;
}
.faq-item.open .faq-answer { max-height: 350px; padding-bottom: 1.5rem; }
.faq-icon { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Tabs ────────────────────────────────────────────────────── */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeSlide 0.4s ease; }
.tab-link {
    color: rgba(36,26,14,0.35);
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
    padding-bottom: 1.5rem;
    background: none;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer;
}
.tab-link.active  { color: var(--text); border-bottom-color: var(--accent); }
.tab-link:hover   { color: var(--accent); }
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pasos de preparación ────────────────────────────────────── */
.prep-step { display: flex; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid rgba(36,26,14,0.07); }
.prep-step:last-child { border-bottom: none; }

/* ── Modal ───────────────────────────────────────────────────── */
#email-modal { display: none; }
#email-modal.open { display: flex; }

/* ── Nav al hacer scroll ─────────────────────────────────────── */
#main-nav { transition: background 0.4s, box-shadow 0.4s; }
#main-nav.scrolled {
    background: rgba(26,21,32,0.98) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important;
}

/* ── Botones magnéticos ──────────────────────────────────────── */
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); display: inline-block; }

/* ── Parallax imagen hero ────────────────────────────────────── */
#hero-img-wrap { overflow: hidden; position: relative; }
#hero-parallax-img { will-change: transform; }

/* ── Peso de fuente Jost por pantalla ────────────────────────── */
@media (min-width: 768px)  { p.font-sans, span.font-sans { font-weight: 400; } }
@media (min-width: 1024px) {
    p.font-sans, span.font-sans { font-weight: 400; }
    #main-nav a, #main-nav button, #main-nav li button { font-weight: 500 !important; }
}

/* ── Tamaños de título responsivos ──────────────────────────── */
h1 { font-size: clamp(1.65rem, 3.5vw + 0.5rem, 2.5rem) !important; line-height: 1.2 !important; }
h2 { font-size: clamp(1.45rem, 3vw + 0.5rem, 3.5rem)   !important; line-height: 1.15 !important; }

/* ── Bordes tintados ─────────────────────────────────────────── */
.border-stone-200 { border-color: rgba(36,26,14,0.10) !important; }
.border-stone-100 { border-color: rgba(36,26,14,0.06) !important; }
.border-stone-300 { border-color: rgba(36,26,14,0.14) !important; }

/* ── Texto del hero (h1 principal) ──────────────────────────── */
#hero-headline { color: #241A0E !important; }