/* ============================================================
   SITE-EXTRA.CSS
   Hoja de estilos compartida: menú móvil, tarjetas de vídeo
   (reels de Instagram) y animaciones de aparición.
   Se añade en TODAS las páginas junto al <style> propio de cada una.
   ============================================================ */

/* ---------- BOTÓN HAMBURGUESA ---------- */
.nav-burger{
    display:none;
    width:38px;height:38px;
    background:none;border:1px solid var(--border);
    border-radius:2px;
    cursor:pointer;
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
    position:relative;
    z-index:1200;
}
.nav-burger span{
    display:block;width:18px;height:1.5px;
    background:var(--text);transition:transform .3s ease,opacity .3s ease;
}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- OVERLAY / DRAWER MÓVIL ---------- */
.nav-overlay{
    position:fixed;inset:0;
    background:rgba(4,5,8,0.7);
    backdrop-filter:blur(6px);
    z-index:1090;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
}
.nav-overlay.open{opacity:1;pointer-events:auto;}

@media(max-width:1100px){
    .nav-burger{display:flex;}
    .nav-links{
        position:fixed;top:0;right:0;bottom:0;
        width:min(320px,80vw);
        background:var(--bg-card);
        border-left:1px solid var(--border);
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0 !important;
        padding:6.5rem 2.2rem 2rem !important;
        transform:translateX(100%);
        transition:transform .35s cubic-bezier(.4,0,.2,1);
        z-index:1100;
        overflow-y:auto;
    }
    .nav-links.open{transform:translateX(0);display:flex !important;}
    .nav-links a{
        width:100%;padding:0.9rem 0;
        border-bottom:1px solid var(--border);
        font-size:0.82rem !important;
    }
    .nav-links .nav-auth{
        border-left:none !important;border-top:1px solid var(--border);
        padding-left:0 !important;padding-top:1.5rem !important;
        margin-top:0.5rem;flex-direction:column;align-items:flex-start !important;
        gap:0.9rem !important;width:100%;
    }
}

/* ---------- SECCIÓN VÍDEOS / REELS ---------- */
.reels-section{
    padding:6rem 0 7rem;
    border-top:1px solid var(--border);
}
.reels-section .section-label{
    font-size:0.68rem;letter-spacing:0.35em;text-transform:uppercase;
    color:var(--accent);font-weight:600;margin-bottom:1.2rem;
    display:flex;align-items:center;gap:1rem;
}
.reels-section .section-label::before{
    content:'';display:block;width:2rem;height:1px;background:var(--accent);
}
.reels-heading{
    font-family:var(--serif);font-size:2.6rem;font-weight:300;
    margin-bottom:0.6rem;line-height:1.1;
}
.reels-desc{
    color:var(--muted);font-size:0.92rem;max-width:560px;
    font-weight:300;margin-bottom:3rem;line-height:1.7;
}
.reels-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
}
.reel-card{
    display:flex;align-items:center;gap:1.1rem;
    padding:1.4rem 1.5rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    text-decoration:none;color:var(--text);
    transition:border-color .3s ease,transform .3s ease,background .3s ease;
    position:relative;overflow:hidden;
}
.reel-card:hover{
    border-color:rgba(79,209,197,0.35);
    transform:translateY(-3px);
}
.reel-card::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 85% -10%,rgba(79,209,197,0.14),transparent 60%);
    opacity:0;transition:opacity .35s ease;
}
.reel-card:hover::after{opacity:1;}
.reel-icon{
    flex:0 0 auto;width:42px;height:42px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%);
    color:#fff;
}
.reel-icon svg{width:20px;height:20px;}
.reel-body{display:flex;flex-direction:column;gap:0.35rem;min-width:0;}
.reel-num{
    font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--accent);font-weight:600;
}
.reel-cta{
    font-size:0.82rem;color:var(--muted);
    display:flex;align-items:center;gap:0.4rem;
    transition:color .25s ease;
}
.reel-card:hover .reel-cta{color:var(--text);}
.reel-cta svg{width:12px;height:12px;flex:0 0 auto;transition:transform .25s ease;}
.reel-card:hover .reel-cta svg{transform:translate(2px,-2px);}

@media(max-width:1024px){
    .reels-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
    .reels-section{padding:4rem 0 5rem;}
    .reels-grid{grid-template-columns:1fr;}
    .reels-heading{font-size:2rem;}
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease;
}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- MENSAJES DE FORMULARIO (contacto) ---------- */
.form-msg{
    margin-top:1.2rem;padding:0.9rem 1.2rem;
    font-size:0.82rem;border:1px solid var(--border);
    display:none;line-height:1.6;
}
.form-msg.show{display:block;}
.form-msg.ok{border-color:rgba(79,209,197,0.4);color:var(--accent);}
.form-msg.err{border-color:rgba(229,62,62,0.4);color:#e55353;}
.form-submit[disabled]{opacity:0.55;cursor:not-allowed;}