/* Cabecera: barra secundaria, cabecera fija con logo y menú, submenús, buscador y menú móvil. */

/* --- Barra secundaria --- */
.cabecera-sec {
  background-color: var(--color-crema);
  color: var(--color-titulos);
  font-size: var(--secundario-texto);
  line-height: 23px;
  font-weight: 600;
}
.cabecera-sec .contenedor {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--cabecera-secundaria-alto);
}
.cabecera-sec a { color: var(--color-titulos); }
.cabecera-sec-info { display: flex; align-items: center; gap: 12px; }
.cabecera-telefono { display: inline-flex; align-items: center; gap: 4px; }
.cabecera-telefono .icono { width: 12px; height: 12px; }
.redes-cabecera { display: flex; gap: 12px; list-style: none; padding: 0; }
.redes-cabecera .icono { width: 14px; height: 14px; }
.menu-secundario { display: flex; list-style: none; padding: 0; margin: 0; }
.menu-secundario li { padding-right: 15px; }
.menu-secundario li:last-child { padding-right: 0; }
.menu-secundario a { display: block; transition: opacity .4s; }
.menu-secundario a:hover { opacity: .7; }

/* --- Cabecera principal --- */
.cabecera {
  position: relative;
  z-index: 99999;
  background-color: var(--color-crema);
  box-shadow: 0 1px 0 var(--color-sombra-cabecera);
  transition: background-color .4s, color .4s, transform .4s, opacity .4s ease-in-out;
}
.cabecera-cont { display: flex; align-items: stretch; justify-content: space-between; }
.logo-cont { display: flex; align-items: center; flex: none; }
.logo-cont a { display: block; line-height: 0; }
#logo { width: auto; max-width: none; transition: all .4s ease-in-out; }

.nav-cont { display: flex; align-items: flex-start; }

/* Menú principal */
.menu-principal { display: flex; list-style: none; margin: 0; padding: 0; }
.menu-principal > li {
  position: relative;
  padding-right: 22px;
  font-size: var(--menu-texto);
  font-weight: var(--peso-menu);
  line-height: 14px;
}
.menu-principal > li:last-child { padding-right: 0; }
.menu-principal a {
  display: block;
  color: var(--color-texto);
  transition: opacity .4s ease-in-out, background-color .4s ease-in-out;
}
.menu-principal > li > a { position: relative; padding-bottom: var(--nav-relleno); }
.menu-principal a:hover { opacity: .7; }
.menu-principal li.activo > a,
.menu-principal li.ancestro > a { color: var(--color-rojo); }

/* Flecha de los elementos con submenú (ETmodules «3») */
.menu-principal > li.tiene-hijos > a { padding-right: 20px; }
.menu-principal > li.tiene-hijos > a::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../icons/desplegable.svg") center / 14px no-repeat;
  mask: url("../icons/desplegable.svg") center / 14px no-repeat;
}
.menu-principal > li.menu-idioma > a { padding-right: 20px; }

/* Submenús */
.menu-principal .submenu {
  position: absolute; top: 100%; left: 0; z-index: 9999;
  width: var(--submenu-ancho);
  padding: 20px 0;
  list-style: none;
  background-color: var(--color-crema);
  border-top: var(--submenu-borde) solid var(--color-rojo);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  text-align: left;
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease-in-out, visibility .2s;
}
.menu-principal li:hover > .submenu,
.menu-principal li:focus-within > .submenu { visibility: visible; opacity: 1; }
.menu-principal .submenu li { position: relative; padding: 0 20px; margin: 0; font-size: 14px; line-height: 2em; }
.menu-principal .submenu a { width: 200px; padding: 6px 20px; }
.menu-principal .submenu a:hover { opacity: .7; background-color: rgba(0, 0, 0, .03); }
.menu-principal .submenu .submenu { left: var(--submenu-ancho); top: -23px; }
.menu-principal .submenu li.tiene-hijos > a::after {
  content: ""; position: absolute; right: 20px; top: 6px; width: 16px; height: 2em;
  background-color: currentColor;
  -webkit-mask: url("../icons/flecha-derecha.svg") center / 12px no-repeat;
  mask: url("../icons/flecha-derecha.svg") center / 12px no-repeat;
}
.menu-idioma .submenu { width: auto; }
.menu-idioma .submenu a { width: auto; }
.menu-idioma img { display: inline-block; vertical-align: baseline; }

/* Buscador */
.buscar-boton {
  flex: none; border: 0; background: none; padding: 0;
  margin: 0 0 0 22px; color: var(--color-texto); font-size: 17px; line-height: 14px;
}
.buscar-boton .icono { display: block; width: 17px; height: 17px; margin-top: -2px; }
.buscar { position: absolute; inset: 0; background-color: var(--color-crema); z-index: 2; }
.buscar[hidden] { display: none; }
.buscar-form { display: flex; align-items: center; height: 100%; }
.buscar-form input {
  flex: 1; border: 0; background: transparent; color: var(--color-texto);
  font: inherit; font-size: var(--menu-texto); font-weight: var(--peso-menu);
}
.buscar-form input:focus { outline: none; }
.buscar-cerrar { border: 0; background: none; color: var(--color-texto); font-size: 24px; }

/* Menú móvil */
.menu-movil { display: none; }
.menu-movil-lista[hidden] { display: none; }

/* --- Escritorio: cabecera fija --- */
@media only screen and (min-width: 981px) {
  .pagina { padding-top: calc(var(--cabecera-secundaria-alto) + var(--cabecera-alto) - 1px); } /* Divi: 160 px */
  .cabecera-sec { position: fixed; top: 0; left: 0; width: 100%; z-index: 100000; }
  .cabecera { position: fixed; top: var(--cabecera-secundaria-alto); left: 0; width: 100%; }
  .cabecera-cont { height: var(--cabecera-alto); }
  #logo { height: var(--cabecera-alto); }
  .nav-cont { padding-top: var(--nav-relleno); }
  .menu-movil-lista { display: none !important; }

  /* Cabecera reducida al desplazarse (Divi: .et-fixed-header) */
  .cabecera.fija .cabecera-cont { height: 80px; }
  .cabecera.fija #logo { height: 80px; }
  .cabecera.fija .nav-cont { padding-top: 33px; }
  .cabecera.fija .menu-principal > li { font-size: var(--menu-fijo-texto); }
  .cabecera.fija .menu-principal > li > a { padding-bottom: 33px; color: var(--color-negro); }
  .cabecera.fija .menu-principal li.activo > a,
  .cabecera.fija .menu-principal li.ancestro > a { color: var(--color-rojo); }
  .cabecera.fija .menu-principal .submenu li { font-size: 14px; }
}

/* --- Tablet y móvil --- */
@media only screen and (max-width: 980px) {
  .cabecera-sec .contenedor { justify-content: center; }
  .cabecera-sec-menu, .redes-cabecera { display: none; }
  .cabecera-sec-info { padding: 7px 0; }
  .cabecera-cont { height: var(--cabecera-alto-movil); align-items: center; }
  #logo { height: var(--logo-alto-movil); }
  .nav-principal { display: none; }
  .buscar-boton { margin: 0 35px 0 0; }
  .nav-cont { align-items: center; }
  .menu-movil { display: flex; align-items: center; }
  .menu-movil-texto { display: none; }
  .menu-movil-boton { border: 0; background: none; padding: 0; color: var(--color-texto); font-size: 32px; line-height: 0; }
  .menu-movil-lista {
    position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999;
    margin: 0; padding: 5%;
    list-style: none;
    background-color: var(--color-crema);
    border-top: 3px solid var(--color-rojo);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .menu-movil-lista li { font-size: 14px; font-weight: var(--peso-menu); }
  .menu-movil-lista a {
    display: block; padding: 10px 5%;
    color: var(--color-texto);
    border-bottom: 1px solid rgba(0, 0, 0, .03);
  }
  .menu-movil-lista li.activo > a { color: var(--color-rojo); }
  .menu-movil-lista .submenu { list-style: none; padding: 0 0 0 5%; position: static; visibility: visible; opacity: 1; box-shadow: none; border: 0; width: auto; }
  .menu-movil-lista .submenu a { width: auto; }
}