/* ============================================================
   SASSAN FORMACIÓN — Cabecera / Navbar
   Archivo: hello-elementor-child/inc/cabecera.css
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
    --sn-dark:      #174060;
    --sn-primary:   #216191;
    --sn-light:     #5B96C4;
    --sn-soft:      #B3D6F1;
    --sn-pale:      #E3EDFF;
    --sn-white:     #ffffff;
    --sn-text:      #3a3a3a;
    --sn-shadow:    0 2px 20px rgba(23,64,96,.1);
    --sn-shadow-lg: 0 8px 32px rgba(23,64,96,.14);
    --sn-transition: all .25s ease;
    --sn-height:    72px;
    --sn-font:      'Nunito', sans-serif;
    --sn-radius:    10px;
}

/* ── Reset mínimo ─────────────────────────────────────────── */
.sn-header *, .sn-header *::before, .sn-header *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.sn-header ul { list-style: none; }
.sn-header a  { text-decoration: none; color: inherit; }

/* ── Header principal ─────────────────────────────────────── */
.sn-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    9999;
    background: var(--sn-white);
    box-shadow: var(--sn-shadow);
    font-family: var(--sn-font);
    transition: var(--sn-transition);
}

/* Clase añadida por JS cuando el usuario hace scroll */
.sn-header.sn-scrolled {
    box-shadow: var(--sn-shadow-lg);
}

/* ── Inner: layout del navbar ─────────────────────────────── */
.sn-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--sn-height);
    max-width:       1280px;
    margin:          0 auto;
    padding:         0 28px;
    gap:             24px;
}

/* ── Logo ─────────────────────────────────────────────────── */
.sn-logo {
    flex-shrink: 0;
    display:     block;
    line-height: 0;
}
.sn-logo img {
    height:     44px;
    width:      auto;
    display:    block;
    transition: opacity .2s ease;
}
.sn-logo:hover img { opacity: .85; }

/* ── Navegación desktop ───────────────────────────────────── */
.sn-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.sn-nav__list {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.sn-nav__link {
    display:       block;
    padding:       8px 14px;
    border-radius: var(--sn-radius);
    font-size:     .9rem;
    font-weight:   600;
    color:         var(--sn-dark);
    transition:    var(--sn-transition);
    white-space:   nowrap;
}
.sn-nav__link:hover {
    background: var(--sn-pale);
    color:      var(--sn-primary);
}
.sn-nav__link--active {
    background: var(--sn-pale);
    color:      var(--sn-primary);
    font-weight: 700;
}

/* ── Acciones: teléfono + botones ─────────────────────────── */
.sn-actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

/* Teléfono */
.sn-tel {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--sn-dark);
    transition:  var(--sn-transition);
    white-space: nowrap;
}
.sn-tel i      { color: var(--sn-light); font-size: .8rem; }
.sn-tel:hover  { color: var(--sn-primary); }

/* Botones */
.sn-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       9px 20px;
    border-radius: var(--sn-radius);
    font-family:   var(--sn-font);
    font-size:     .875rem;
    font-weight:   700;
    white-space:   nowrap;
    cursor:        pointer;
    transition:    var(--sn-transition);
    border:        2px solid transparent;
    text-decoration: none;
}

/* Solicitar información — relleno azul oscuro */
.sn-btn--primary {
    background:   var(--sn-dark);
    color:        #ffffff !important;
    border-color: var(--sn-dark);
}
.sn-btn--primary:hover {
    background:   var(--sn-primary);
    border-color: var(--sn-primary);
    color:        #ffffff !important;
    transform:    translateY(-1px);
    box-shadow:   0 4px 16px rgba(23,64,96,.25);
}

/* Campus — outline azul */
.sn-btn--campus {
    background:   transparent;
    color:        var(--sn-primary);
    border-color: var(--sn-primary);
}
.sn-btn--campus:hover {
    background:   var(--sn-primary);
    color:        var(--sn-white);
    transform:    translateY(-1px);
    box-shadow:   0 4px 16px rgba(33,97,145,.25);
}

/* ── Burger (solo móvil) ──────────────────────────────────── */
.sn-burger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        8px;
    border-radius:  var(--sn-radius);
    transition:     var(--sn-transition);
    flex-shrink:    0;
}
.sn-burger:hover { background: var(--sn-pale); }
.sn-burger span {
    display:       block;
    width:         24px;
    height:        2px;
    background:    var(--sn-dark);
    border-radius: 2px;
    transition:    var(--sn-transition);
    transform-origin: center;
}

/* Burger animado cuando el menú está abierto */
.sn-burger.sn-burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sn-burger.sn-burger--open span:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}
.sn-burger.sn-burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Menú móvil ───────────────────────────────────────────── */
.sn-mobile-menu {
    display:    flex;
    flex-direction: column;
    background: var(--sn-white);
    border-top: 1px solid var(--sn-pale);
    padding:    20px 24px 28px;
    gap:        4px;
    /* Animación de apertura */
    max-height: 0;
    overflow:   hidden;
    transition: max-height .35s ease, padding .3s ease;
    padding-top:    0;
    padding-bottom: 0;
}
.sn-mobile-menu.sn-mobile-menu--open {
    max-height:     600px;
    padding-top:    20px;
    padding-bottom: 28px;
}
.sn-mobile-menu__list {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    margin-bottom:  20px;
}
.sn-mobile-menu__link {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    border-radius: var(--sn-radius);
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--sn-dark);
    transition:    var(--sn-transition);
    border-bottom: 1px solid var(--sn-pale);
}
.sn-mobile-menu__link i      { color: var(--sn-light); width: 18px; text-align: center; font-size: .9rem; }
.sn-mobile-menu__link:hover  { background: var(--sn-pale); color: var(--sn-primary); }
.sn-mobile-menu__link--active { background: var(--sn-pale); color: var(--sn-primary); font-weight: 700; }

.sn-mobile-menu__footer {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding-top:    16px;
    border-top:     1px solid var(--sn-pale);
}
.sn-mobile-menu__tel {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--sn-dark);
}
.sn-mobile-menu__tel i { color: var(--sn-light); }

/* ── Sin offset automático ───────────────────────────────────
   Elementor gestiona su propio layout. El header sticky
   flota sobre el contenido (z-index: 9999).
   Para que el primer bloque no quede tapado:
   → En Elementor, añade un "Spacer" de 72px al inicio de la página,
     O activa padding superior en la primera sección.            */

/* ── Offset del header fijo ──────────────────────────────────
   padding-top en body = altura del header.
   Hello Elementor usa un layout simple donde esto funciona
   sin romper nada. NO añadir margin-top por JS además de esto. */
body {
    padding-top: var(--sn-height) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sn-tel { display: none; }
    .sn-nav__link { padding: 7px 10px; font-size: .85rem; }
}

@media (max-width: 900px) {
    .sn-nav      { display: none; }
    .sn-actions  { display: none; }
    .sn-burger   { display: flex; }
}

@media (max-width: 480px) {
    .sn-header__inner { padding: 0 16px; }
    .sn-logo img      { height: 36px; }
}

/* ── Anti-Elementor: forzar colores de botones del header ────────────────── */
body .sn-btn--primary,
body .sn-btn--primary:link,
body .sn-btn--primary:visited   { background: var(--sn-dark) !important; color: #ffffff !important; border: 2px solid var(--sn-dark) !important; }
body .sn-btn--primary:hover     { background: var(--sn-primary) !important; border-color: var(--sn-primary) !important; color: #ffffff !important; }
body .sn-btn--campus,
body .sn-btn--campus:link,
body .sn-btn--campus:visited    { background: transparent !important; color: var(--sn-primary) !important; border: 2px solid var(--sn-primary) !important; }
body .sn-btn--campus:hover      { background: var(--sn-primary) !important; color: #ffffff !important; }