/* ============================================================
   HEADER — Sistema de Inteligencia Turística (SIT)
   BEM: .header > __logo | __rotulo | __nav | __burger | __line
   ============================================================ */

/* ---------------------------------------------------------- */
/* Contenedor principal                                        */
/* ---------------------------------------------------------- */

.header {
   font-family: var(--tipografia-base);
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   font-size: 15px;

   position: sticky;
   top: 0;
   z-index: 100;

   width: 100%;
   height: 100px;

   background-color: var(--cabecera-background);
   color: var(--base-color);

   /* Distribución en fila — desktop */
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;

   padding: 0 1.5rem;
   box-sizing: border-box;

   /* Sombra en scroll — transición suave */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0);
   transition: box-shadow 0.5s ease;
}

/* Sombra activa (añadida por JS al hacer scroll) */
.header--scrolled {
   box-shadow: 0 4px 16px var(--shadow-color);
}


/* ---------------------------------------------------------- */
/* Contenedor interior — limita el contenido a 1080 px         */
/* ---------------------------------------------------------- */

.header__inner {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;

   width: 100%;
   max-width: 1080px;
   height: 100%;
   margin: 0 auto;
}


/* ---------------------------------------------------------- */
/* Zona 1 — Logo  (10%)                                        */
/* ---------------------------------------------------------- */

.header__logo {
   flex: 0 0 10%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.header__logo img,
.header__logo .custom-logo {
   max-height: 75px;
   width: auto;
   display: block;
}


/* ---------------------------------------------------------- */
/* Zona 2 — Rotulación  (20%)                                  */
/* ---------------------------------------------------------- */

.header__rotulo {
   flex: 0 0 35%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.header__rotulo-texto {
   font-family: var(--tipografia-titulo_1);
   font-size: 22px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   line-height: 1.1;
   color: var(--base-color);

   /* Oculto en móvil; visible en desktop */
   display: block;
}

/* Abreviatura "SIT" sólo visible en móvil */
.header__rotulo-abreviatura {
   display: none;
}


/* ---------------------------------------------------------- */
/* Zona 3 — Navegación / Menú  (70%)                           */
/* ---------------------------------------------------------- */

.header__nav {
   flex: 0 0 55%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.header__links {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: nowrap;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 0.25rem;
}

.header__links>li {
   position: relative;
   margin: 0 0.33rem;
}

ul.header__links>li {
   padding-right: 20px;
}

.header__links>li>a {
   font-family: var(--tipografia-base);
   font-size: 14px;
   font-weight: 400;
   color: #00000099;
   text-decoration: none;
   transition: color 0.25s ease;
}

.header__links>li>a:hover {
   color: var(--base-color);
}


/* ---------------------------------------------------------- */
/* Botón hamburguesa (oculto en desktop)                       */
/* ---------------------------------------------------------- */

.header__burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;

   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;

   /* espacio mínimo táctil */
   min-width: 44px;
   min-height: 44px;
}

.header__line {
   display: block;
   height: 2px;
   width: 28px;
   background-color: var(--base-color);
   border-radius: 2px;
   transition: transform 0.45s ease, opacity 0.35s ease;
   transform-origin: center;
}


/* ---------------------------------------------------------- */
/* Submenús — desktop                                          */
/* ---------------------------------------------------------- */

.sub-menu {
   position: absolute;
   top: calc(100% + 12px);
   left: 0;
   background-color: var(--menu-background_01);
   min-width: 220px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
   list-style: none;
   margin: 0;
   padding: 0;

   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease-in-out;
}

.sub-menu>li {
   padding: 12px 20px 0;
}

.sub-menu>li:first-child {
   border-top: 3px solid var(--base-color);
   padding-top: 16px;
}

.sub-menu>li:last-child {
   padding-bottom: 16px;
}

.sub-menu>li>a {
   font-family: var(--tipografia-base);
   font-size: 12px;
   font-weight: 400;
   color: #00000099;
   text-decoration: none;
   transition: padding-left 0.2s ease-in-out, color 0.2s ease;
}

.sub-menu>li>a:hover {
   border-left: 2px solid var(--base-color);
   padding-left: 10px;
   color: var(--base-color);
}

.menu-item-has-children>a::after {
   content: '›';
   font-family: var(--tipografia-base);
   font-size: 14px;
   font-weight: 800;
   color: var(--base-color);
   padding-left: 4px;
}

.menu-item {
   margin: 0;
}


/* ============================================================
   RESPONSIVO — Móvil  (≤ 800 px)
   ============================================================ */

@media screen and (max-width: 800px) {

   /* Cabecera: fila de 3 elementos en móvil */
   .header {
      height: 64px;
      padding: 0 1rem;
      position: fixed;
      border-bottom: 2px solid var(--base-color);
   }

   /* Logo: ajustado a la izquierda */
   .header__logo {
      flex: 0 0 auto;
      justify-content: flex-start;
   }

   .header__logo img,
   .header__logo .custom-logo {
      max-height: 45px;
   }

   /* Rotulación: "SIT" centrado */
   .header__rotulo {
      flex: 1;
      justify-content: center;
   }

   .header__rotulo-texto {
      display: none;
      /* oculta el texto largo */
   }

   .header__rotulo-abreviatura {
      display: block;
      font-family: var(--tipografia-titulo_1);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--base-color);
   }

   /* Hamburguesa: lado derecho */
   .header__burger {
      display: flex;
      flex: 0 0 auto;
      order: 3;
   }

   /* Menú: oculto, se despliega hacia abajo */
   .header__nav {
      flex: none;
      position: fixed;
      top: 64px;
      /* separado de la cabecera */
      left: 0;
      width: 100%;
      background-color: var(--menu-background_01);
      overflow: hidden;

      /* Transición de despliegue */
      max-height: 0;
      transition: max-height 0.45s ease, box-shadow 0.45s ease;
      box-shadow: none;
      z-index: 99;
   }

   /* Menú abierto (clase añadida por JS) */
   .header__nav--open {
      max-height: 100vh;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
   }

   /* Links en columna dentro del panel desplegado */
   .header__links {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 1rem 1.5rem 1.5rem;
      gap: 0;
   }

   .header__links>li {
      width: 100%;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   }

   ul.header__links>li {
      padding-right: 0;
   }

   .header__links>li>a {
      display: block;
      padding: 12px 0;
   }

   /* Submenú en móvil: inline, sin posición absoluta */
   .sub-menu {
      position: static;
      box-shadow: none;
      min-width: auto;
      width: 100%;
      max-height: 0;
      transition: max-height 0.4s ease-in-out;
   }

   .sub-menu>li {
      padding: 0 0 0 16px;
   }

   .sub-menu>li:first-child {
      border-top: none;
      padding-top: 0;
   }

   .sub-menu>li:last-child {
      padding-bottom: 8px;
   }

   /* Padre con hijos: click para desplegar (no hover) */
   li.menu-item-has-children>a {
      pointer-events: none;
   }

   .menu-item {
      margin: 0;
   }
}


/* ============================================================
   Animaciones hamburguesa → X
   (Clases añadidas / quitadas por JS)
   ============================================================ */

/* Línea 1: rota hacia arriba formando el brazo superior de la X */
.header__line--line1.cross1 {
   transform: translateY(7px) rotate(45deg);
}

/* Línea 2: desaparece */
.header__line--line2.cross2 {
   opacity: 0;
   transform: scaleX(0);
}

/* Línea 3: rota hacia arriba formando el brazo inferior de la X */
.header__line--line3.cross3 {
   transform: translateY(-7px) rotate(-45deg);
}