/*
 * Cabecera del sitio público (barra de contacto + navegación principal).
 *
 * Se carga después de style.css y usa clases propias, para no heredar los
 * conflictos del tema (navbar-dark sobre fondo blanco, .searchform pensada
 * para un input, etc.).
 */

:root {
  --ferc-verde: #1ba12d;
  --ferc-verde-texto: #0f7a20; /* variante con contraste AA sobre blanco */
  --ferc-verde-suave: #eaf6ec;
  --ferc-dorado: #fcc616;
  --ferc-tinta: #1a1a1a;
  --ferc-tinta-suave: #4a4a4a;
  --ferc-borde: rgba(0, 0, 0, 0.08);
  --ferc-nav-alto: 76px;
}

.site-header {
  position: relative;
  z-index: 1030;
  font-family: "Montserrat", Arial, sans-serif;
}

/* ---------------------------------------------------------------- Barra de contacto */

.topbar {
  background: var(--ferc-dorado);
  color: var(--ferc-tinta);
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  min-height: 44px;
  padding: 6px 0;
}

.topbar-contact,
.topbar-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}

.topbar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--ferc-tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.topbar-contact a:hover,
.topbar-contact a:focus {
  color: #000;
  text-decoration: underline;
}

.topbar-contact .fa {
  font-size: 15px;
}

.topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ferc-tinta);
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.topbar-social a:hover,
.topbar-social a:focus {
  background: var(--ferc-verde);
  color: #fff;
}

/* En móvil el correo suele desbordar: se muestra solo el teléfono, que es
   la vía de contacto que de verdad se usa desde el celular. */
@media (max-width: 575.98px) {
  .topbar-inner {
    justify-content: center;
  }

  .topbar-contact .topbar-email {
    display: none;
  }
}

/* ---------------------------------------------------------------- Navegación */

.mainnav {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--ferc-borde);
  transition: box-shadow 0.2s ease;
}

.mainnav.is-stuck {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.mainnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--ferc-nav-alto);
}

.mainnav-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 0;
  border-radius: 6px;
}

.mainnav-logo img {
  display: block;
  width: auto;
  height: 52px;
  max-width: 100%;
}

/* ---------------------------------------------------------------- Botón hamburguesa */

.mainnav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ferc-borde);
  border-radius: 8px;
  background: #fff;
  color: var(--ferc-tinta);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.mainnav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.mainnav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ferc-verde-texto);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.mainnav-toggle-bars span:nth-child(1) { top: 0; }
.mainnav-toggle-bars span:nth-child(2) { top: 7px; }
.mainnav-toggle-bars span:nth-child(3) { top: 14px; }

.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- Menú */

/* Los enlaces se estiran a toda la altura de la barra para que el subrayado
   del elemento activo quede pegado a su borde inferior. */
.mainnav-menu {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: 24px;
}

.mainnav-list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mainnav-item {
  position: relative;
  display: flex;
}

.mainnav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: var(--ferc-tinta);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.mainnav-link:hover,
.mainnav-link:focus {
  color: var(--ferc-verde-texto);
  border-bottom-color: var(--ferc-verde);
  text-decoration: none;
}

.mainnav-item.is-active > .mainnav-link {
  color: var(--ferc-verde-texto);
  border-bottom-color: var(--ferc-verde);
}

.mainnav-caret {
  font-size: 11px;
  transition: transform 0.2s ease;
}

/* La flecha solo es un botón aparte en móvil, donde el submenú es un
   acordeón; en escritorio abre con hover y no hace falta. */
.mainnav-subtoggle {
  display: none;
}

/* Submenú de Créditos */

.mainnav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ferc-borde);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mainnav-item.has-submenu:hover > .mainnav-submenu,
.mainnav-item.has-submenu.is-open > .mainnav-submenu,
.mainnav-item.has-submenu:focus-within > .mainnav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mainnav-item.has-submenu:hover > .mainnav-link .mainnav-caret,
.mainnav-item.has-submenu.is-open > .mainnav-link .mainnav-caret {
  transform: rotate(180deg);
}

.mainnav-sublink {
  display: block;
  padding: 12px 20px;
  color: var(--ferc-tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mainnav-sublink:hover,
.mainnav-sublink:focus,
.mainnav-sublink.is-active {
  background: var(--ferc-verde-suave);
  color: var(--ferc-verde-texto);
  text-decoration: none;
}

/* Botón de acceso al portal */

.mainnav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  align-self: center;
  padding: 13px 22px;
  border-radius: 8px;
  background: var(--ferc-verde);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.mainnav-cta:hover,
.mainnav-cta:focus {
  background: var(--ferc-verde-texto);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- Foco visible */

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid var(--ferc-verde-texto);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Móvil y tablet */

@media (max-width: 991.98px) {
  :root {
    --ferc-nav-alto: 68px;
  }

  .mainnav-toggle {
    display: inline-flex;
  }

  .mainnav-logo img {
    height: 44px;
  }

  /* El menú pasa a ser un panel desplegable a lo ancho de la pantalla. */
  .mainnav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: 0;
    overflow: hidden auto;
    background: #fff;
    border-top: 1px solid var(--ferc-borde);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
    transition: max-height 0.28s ease;
  }

  .mainnav-menu.is-open {
    max-height: calc(100vh - var(--ferc-nav-alto));
  }

  .mainnav-list {
    display: block;
    padding: 8px 0;
  }

  /* Cada fila es un flex: el enlace ocupa el ancho disponible, la flecha
     queda a la derecha con su misma altura y el submenú salta abajo. */
  .mainnav-item {
    display: flex;
    flex-wrap: wrap;
  }

  .mainnav-link {
    flex: 1 1 auto;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ferc-borde);
    border-left: 4px solid transparent;
    font-size: 15px;
    white-space: normal;
  }

  .mainnav-link .mainnav-caret {
    display: none;
  }

  .mainnav-subtoggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ferc-borde);
    border-left: 1px solid var(--ferc-borde);
    background: #fff;
    color: var(--ferc-verde-texto);
    font-size: 20px;
    cursor: pointer;
  }

  .mainnav-subtoggle .fa {
    transition: transform 0.2s ease;
  }

  .mainnav-item.is-open > .mainnav-subtoggle {
    background: var(--ferc-verde-suave);
  }

  .mainnav-item.is-open > .mainnav-subtoggle .fa {
    transform: rotate(180deg);
  }

  .mainnav-submenu {
    flex: 1 0 100%;
  }

  .mainnav-link:hover,
  .mainnav-link:focus {
    background: var(--ferc-verde-suave);
    color: var(--ferc-verde-texto);
    border-bottom-color: var(--ferc-borde);
    border-left-color: var(--ferc-verde);
  }

  .mainnav-item.is-active > .mainnav-link {
    background: var(--ferc-verde-suave);
    color: var(--ferc-verde-texto);
    border-left-color: var(--ferc-verde);
    border-bottom-color: var(--ferc-borde);
  }

  /* Submenú: acordeón controlado por el botón de la flecha. */
  .mainnav-submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f7f7f7;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .mainnav-item.has-submenu.is-open > .mainnav-submenu {
    display: block;
  }

  .mainnav-item.has-submenu:hover > .mainnav-submenu,
  .mainnav-item.has-submenu:focus-within > .mainnav-submenu {
    display: none;
  }

  .mainnav-item.has-submenu.is-open:hover > .mainnav-submenu,
  .mainnav-item.has-submenu.is-open:focus-within > .mainnav-submenu {
    display: block;
  }

  .mainnav-sublink {
    padding: 15px 20px 15px 38px;
    border-bottom: 1px solid var(--ferc-borde);
  }

  .mainnav-cta {
    display: flex;
    margin: 16px 20px 20px;
    padding: 16px 22px;
    font-size: 15px;
  }
}

/* Evita que la página de atrás se desplace con el menú abierto. */
body.menu-abierto {
  overflow: hidden;
}

@media (min-width: 992px) {
  body.menu-abierto {
    overflow: visible;
  }
}