/* =============== VARIABLES & RESET =============== */
:root{
  --color-header:#303030;
  --color-footer:#c6c6c6;
  --color-detail:#c16eab;
  --color-dark:#545452;
  --color-gris:#e5e3e3;
  --color-light:#f2f2f2;
  --border:1px solid #ddd;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{font-family:'Avenir-Roman',system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* =============== HEADER BASE =============== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:100px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--color-header);
  padding:0 50px;
}
.header-link{display:flex;align-items:center;text-decoration:none}
.header-image{height:60px;width:auto}

/* =============== NAV DESKTOP =============== */
.header-menu-sidebar{flex:1;display:flex;justify-content:center;align-items:center}
.nav{display:flex}
.nav-list{display:flex;list-style:none;gap:20px;align-items:center}
.nav-item{position:relative}
.nav-link{
  position:relative; display:block; padding:10px 15px; font-size:15px;
  color:var(--color-gris); text-decoration:none; transition:color .2s ease;
}
.nav-link::after{
  content:""; position:absolute; left:15px; bottom:6px; height:2px; width:0;
  background:var(--color-detail); transition:width .25s ease-in-out;
}
.nav-link:hover::after{ width:calc(100% - 30px) }

/* =============== SUBMENÚ (DESKTOP) =============== */
.submenu{
  position:absolute; left:0; top:100%; margin-top:6px; min-width:260px;
  background:#fff; border:var(--border); border-radius:1px;
  box-shadow:0 6px 16px rgba(0,0,0,.10); list-style:none; padding:8px 0; z-index:1001;
  opacity:0; visibility:hidden; transform:translateY(8px);
  pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.submenu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.nav-item:hover>.submenu,
.nav-item:focus-within>.submenu,
.nav-item.submenu-active>.submenu{
  opacity:1; visibility:visible; transform:translateY(0);
  pointer-events:auto; transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.submenu-link{display:block; padding:10px 18px; color:#303030; text-decoration:none; font-size:14px}
.submenu-link:hover{ color:#f2f2f2 ;background:#c16eab}

/* =============== LANGUAGE (DESKTOP) =============== */
.header-right{display:flex;align-items:center;gap:10px}
.language-switcher{display:flex;align-items:center;gap:5px;text-decoration:none;cursor:pointer}
.language-text{font-size:14px;color:var(--color-gris)}
.language-icon{background:none;border:none;font-size:12px;color:var(--color-gris);cursor:pointer;padding:0}

/* =============== RESPONSIVE CONTROLS =============== */
.header-right-responsive{display:none;align-items:center;gap:15px}
.language-switcher-responsive{display:flex;align-items:center;gap:5px;text-decoration:none}
.language-text-responsive{font-size:14px;color:var(--color-gris)}
.language-icon-responsive{background:none;border:none;font-size:12px;color:var(--color-gris);cursor:pointer}
.abrir-menu,.cerrar-menu{display:none}

/* =============== BREAKPOINTS DESKTOP TUNING =============== */
@media (min-width:1367px) and (max-width:1919px){
  .site-header{height:90px;padding:0 40px}
  .header-image{height:55px}
  .nav-link{font-size:14px;padding:10px 12px}
  .submenu{min-width:250px}
}
@media (max-width:1366px) and (min-width:1280px){
  .site-header{height:85px;padding:0 30px}
  .header-image{height:50px}
  .nav-link{font-size:13px;padding:8px 10px}
  .nav-link::after{left:10px}
  .nav-link:hover::after{width:calc(100% - 20px)}
  .submenu{min-width:240px}
  .language-text{font-size:13px}
}

/* =============== MOBILE / TABLET (OFF-CANVAS) =============== */
/* ===== SOLO ajustes móviles y estados ===== */
@media (max-width:1279px){
  .site-header{height:70px;padding:0 15px}
  .header-image{height:45px}

  /* el contenedor se mantiene para que el <nav> fijo pueda mostrarse */
  .header-menu-sidebar{display:contents}
  .header-right{display:none}

  .header-right-responsive{display:flex;margin-left:auto;gap:12px;align-items:center}
  .abrir-menu{
    display:block; font-size:28px; background:none; border:none; color:var(--color-gris);
    cursor:pointer; padding:10px; line-height:1; z-index:1200;
  }

  /* Drawer */
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px, 86vw);
    background:var(--color-header); box-shadow:-2px 0 12px rgba(0,0,0,.35);
    display:flex; flex-direction:column; padding:80px 20px 20px; z-index:1100;
    transform:translateX(100%); transition:transform .3s ease-in-out; overflow-y:auto;
  }
  .nav.nav-open{ transform:translateX(0) }

  /* Botón cerrar: oculto por defecto, visible sólo con menú abierto */
  .cerrar-menu{
    display:none; font-size:28px; background:none; border:none; color:var(--color-gris);
    position:absolute; top:20px; right:20px; cursor:pointer; z-index:1201;
  }
  body.menu-open .cerrar-menu{ display:block }

  .nav-list{flex-direction:column;width:100%;gap:0}
  .nav-item{position: relative; width:100%;border-bottom:1px solid rgba(229,227,227,.1)}
  .nav-link{padding:15px 10px;font-size:15px;width:100%}
  .nav-link::after{display:none}

  /* Submenús como acordeón */
  .submenu{
    position:static; margin:0; padding:0; min-width:auto;
    border:none; box-shadow:none; background: rgba(0,0,0,.20);
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    display:none; /* controlado por .nav-item.active */
  }
  .nav-item.active > .submenu{ display:block }
  .submenu-link{ color: var(--color-gris); padding:12px 12px 12px 32px }
  .submenu-link i.bi{ color:#cfcfcf }
  .submenu-link:not(:has(i))::before{
    background: #cfcfcf;
  }
}

/* Overlay */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.nav-overlay.show{opacity:1; pointer-events:auto}

/* ===== Estados cuando el menú está abierto ===== */
body.menu-open .abrir-menu{ visibility:hidden }                  /* oculta hamburguesa */
body.menu-open .language-switcher-responsive{ opacity:0; pointer-events:none; transition:opacity .2s } /* oculta EN */


/* =============== MOBILE SMALL =============== */
@media (max-width:480px){
  .site-header{height:65px;padding:0 10px}
  .header-image{height:40px}
  .nav{width:min(300px, 90vw)}
}