/* Variables de color */
/* =========================
   MENÚ PRINCIPAL (solo 1er nivel)
   ========================= */

   *, *::before, *::after{
  box-sizing: border-box;
}
.jdg-nav .jdg-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.jdg-nav .jdg-menu > li{
  margin: 0.5rem 5px 0 0;
  position: relative;
}

.jdg-nav .jdg-menu > li > a{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  color: var(--color-negro);
  text-decoration: none;
  overflow: hidden;
  transition: color 0.2s ease;
}

.jdg-nav .jdg-menu > li > a::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background-color: var(--color-principal);
  z-index: -1;
  transition: height 0.2s ease-in-out;
}

.jdg-nav .jdg-menu > li > a:hover::before{ height: 100%; }
.jdg-nav .jdg-menu > li > a:hover{ color: var(--color-blanco); }

.logo {
  display: inline-block;
  margin-bottom: 0px;
  margin-top: 1px;
}

.mi_logo {
  margin-top: 1px;
  position: fixed;
  z-index: 1009 !important;


}

.barra_superior_menu_wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.barra_superior_menu {
  position: relative;
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
  z-index: 1001;
}

.cabecera {
  position: relative;   /* ← ESTA es la línea */
  background-color: #fbfbfb;
  backdrop-filter: blur(10px) saturate(180%);
  border-radius: 10px;
  width: 100%;
  z-index: 1005;        /* y deja solo uno */
}

.cabecera_movil {
  width: 100%;
  z-index: 1000;
  background-color: #fbfbfb;
}

.maximo_menu {
  max-width: 1366px;
  margin: 0 auto;
}

.menu-item {
  margin-left: auto;
}

/* NAVEGACIÓN Y MENÚ */
nav ul {
  list-style: none;
  margin: 0;

  display: flex;
}

nav ul li {
  margin: 0.5rem 5px 0 0;
  position: relative;
}

nav ul li a {
  position: relative;
  display: inline-block;
  padding: 10px 20px; /* Mantén este valor según tu diseño actual */
  font-size: 1.2rem;
  color: var(--color-negro);
  text-decoration: none;
  overflow: hidden;
  transition: color 0.2s ease;
}

nav ul li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--color-principal); /* Azul corporativo */
  z-index: -1;
  transition: height 0.2s ease-in-out;
}

nav ul li a:hover::before {
  height: 100%; /* La cortinilla se extiende hacia abajo */
}

nav ul li a:hover {
  color: var(--color-blanco); /* Cambia el color del texto al hacer hover */
}



/* =========================
   SUBMENÚ (contenedor)
   ========================= */
.submenu{
  position: fixed;
  left: 0;
  top: 80px;
  width: 100%;
  visibility: hidden;
  padding: 2rem;
  z-index: 2000;          /* sube por encima del hero sí o sí */
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.6s, opacity 0.4s, visibility 0.6s;
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  background-color: #fbfbfb;
}

/* Abierto por JS */
.jdg-menu > li.open > .submenu{
  opacity: 1;
  visibility: visible;
  height: 60vh;
}

/* ✅ IMPORTANTÍSIMO: lo de dentro NO es flex */
.submenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: block !important;
}

.posicion_submenu{
  display: block;
}
.posicion_submenu li{
  display: block;
}



/* ❌ Antes se abría con hover directo */
/*
nav ul li:hover > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  height: 85vh;
}
*/

/* ✅ Ahora solo se abre con la clase .open (controlada por JS) */
nav ul li.open > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  height: 50vh;
}

.titulo_menu {
  font-size: 1.8rem;
  font-weight: 800;
}

.posicion_submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.posicion_submenu li {
  display: block;
  border-bottom: 1px dotted #ccc;
}

.posicion_submenu li:last-child {
  border-bottom: none;
}

.posicion_submenu li a {
  text-decoration: none;
  color: #010102;
  font-size: 1.3rem;
}

.posicion_submenu li:hover a {
  color: #9D202C;
  font-weight: bold;
}

.tabulado_subseccion {
  margin-left: 1.3rem;
  color: #0056b3;
}

/* BOTÓN DE SCROLL */
#scrollBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: var(--color-blanco);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1002;
}

#scrollBtn:hover {
  background-color: #0056b3;
}

#miCabecera .navbar-nav {
  max-height: 550px;
  overflow-y: auto;
}

.col-md-4 img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

#estatutos, #codigo, #reglamento {
  scroll-margin-top: 150px; /* Ajusta este valor según la altura de la cabecera */
}

.search-form {
  display: inline-flex;
  align-items: center;
  border-radius: 1px;
  padding: 15px 10px;
  height: 1px;
}

.search-input {
  border: none;
  outline: none;
  padding: 0 10px;
  font-size: 14px;
  width: 150px;
  transition: width 0.3s ease;
  border-radius: 3px;
}

.search-input:focus {
  width: 300px;
}
@media (max-width: 768px){
  .search-input,
  .search-input:focus{
    width: 100%;
    max-width: 100%;
  }
}

.search-btn {
  background-color: transparent;
  border: none;
  color: #FBFBFB;
  cursor: pointer;
  padding: 5px;
  font-size: 18px;
}

.search-btn:hover {
  color: #007bff;
}

/* Contenedor general de los iconos de RRSS y el buscador */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinea a la derecha */
}

.social-icons {
  display: flex;
}

.search-container {
  display: flex;
  align-items: center;
  width: auto;
}

.search-container .gcse-search {
  max-width: 180px; /* Ajusta el ancho */
}

.gsc-search-button-v2 {
  font-size: 0!important;
  padding: 6px 6px!important;
}
.table.gsc-search-box td.gsc-input {}

.desplazamiento_buscador {
  margin-right: 160px;
}
.gsc-input{}

.gsib_a {
  padding: 0px 0px 0px 0px!important;
}

.gcsc-branding {
  text-align: left !important;
}

.gsc-control-cse {
  text-align: left !important;
}

.gsc-results .gsc-cursor-box {
  text-align: left !important;
}

.gsc-results .gsc-webResult,
.gsc-results .gsc-imageResult {
  text-align: left !important;
}

.gsc-webResult.gsc-result {
  display: block;
}
/* =========================
   FIX: centrar cabecera como el hero
   ========================= */

/* la barra entera ocupa 100% */
.jdg-nav,
.cabecera{
  width: 100%;
}

/* centra el contenido interno */
.cabecera{
  display: flex;
  justify-content: center;
}

/* contenedor real del menú (similar a tu hero-portada-inner) */
.maximo_menu{
  width: 100%;
  max-width: 1280px;
  padding: 0 40px;          /* ajusta a tu gusto */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* empuja el menú a la derecha */
.jdg-nav .jdg-menu{
  margin-left: auto;
}

/* evita que el logo se encoja raro */
.mi_logo{
  flex: 0 0 auto;
}
/* =========================
   CABECERA JDG – layout centrado
   ========================= */
/* ===== FIX: submenu full width tipo mega-menu ===== */
.jdg-nav { position: relative; z-index: 3000; }

/* Desktop */
@media (min-width: 992px){
  .jdg-nav .jdg-menu > li.has-submenu { position: static; } /* clave */

  .jdg-nav .submenu{
    display: block;               /* lo controlas por height/visibility */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 72px !important;         /* ajusta a la altura real de tu cabecera */
    width: 100% !important;

    max-width: none !important;
    min-width: 0 !important;

    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;

    padding: 2rem;
    background: #fbfbfb;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(15,23,42,.18);
    backdrop-filter: blur(10px) saturate(180%);
    transition: height .35s ease, opacity .2s ease, visibility .2s ease;
    z-index: 9999;
    transform: none !important;   /* fuera el translateX */
  }

  .jdg-nav .jdg-menu > li.open > .submenu{
    visibility: visible;
    opacity: 1;
              /* tu valor actual */
  }
}

/* Contenedor de la imagen */
.hero-foto-wrap{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Imagen */
.hero-foto-wrap img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.01);
}

/* Contenedor (si lo tienes en 2 columnas, no lo rompo) */
.opciones-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

/* En móvil: una columna */
@media (max-width: 900px){
  .opciones-hero { grid-template-columns: 1fr; }
}

/* El botón */
.opcion-hero{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 14px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);

  text-decoration: none;
  color: #111;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Icono consistente */
.opcion-hero i{
  font-size: 18px;
  opacity: .9;
}

/* Hover (sin circo) */
.opcion-hero:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18);
}

/* Foco accesible (teclado) */
.opcion-hero:focus-visible{
  outline: 3px solid rgba(32,52,108,.35); /* tu azul */
  outline-offset: 3px;
}

/* Estado activo/seleccionado si lo necesitas */
.opcion-hero.is-active{
  border-color: rgba(140,24,36,.35); /* tu rojo */
  box-shadow: 0 12px 30px rgba(140,24,36,.10);
}