:root {
    --color-primary: #005792; /* Azul profundo profesional */
    --color-primary-dark: #003459;
    --color-secondary: #903930; /* Melocotón/naranja suave */
    --color-accent: #E57C23;

    --color-background-body: #F8F9FA; /* Gris muy claro para el cuerpo */
--color-background-light: #F8F9FA; /* Blanco para elementos como cards, nav */
--color-background-footer: #2B303A; /* Gris oscuro para footer */

    font-family: 'Segoe UI', sans-serif;
/*  font-family:    'Montserrat', sans-serif;
font-family:    'Open Sans', sans-serif;*/
    --border-radius-base: 0.375rem; /* Bootstrap's default */
    --border-radius-lg: 0.5rem;
    --box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --box-shadow-md: 0 .5rem 1rem rgba(0,0,0,.1);
}
html {
/* Por defecto son 16px; poner, por ejemplo, 18px 
hará que 1rem = 18px y todos los rem escalen automáticamente */
}

body {
    font-family: var(--font-family-body);
    background-color: var(--color-background-body);
    color: var(--color-text-primary);
    font-size: 1rem; /* 16px base */
    line-height: 1.6;
}




.hero {
background: var(--color-secondary) url('images/fondo.webp') center center repeat;
background-size: auto;
color: #fff;
padding: 2rem 1rem 3rem 1rem;
position: relative;
text-align: center;
}

.hero::after {
content: '';
position: absolute;
bottom: 0;              /* pegar al pie del hero */
left: 0;
width: 100%;
height: 60px;           /* ■ Ajusta a la altura real de tu imagen */
background: 
url('images/hero-border.webp') 
bottom center    /* ③ posición de la imagen */
repeat-x;        /* repetir a lo largo del eje X */
pointer-events: none;   /* para que no interfiera con clics */
z-index: 2;             /* por encima del patrón del hero */
}

.hero .overlay-box {
background: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius-lg);
padding: 2rem;
margin: 0 auto;
}

.hero h1 {
font-size: 2.5rem;
color: #fff;
font-weight: bold;
}

.hero p {
color: #ccc;
}

/* === SEARCH BOX DEL NAVBAR === */
.navbar .search-box {
margin-left: 1rem;
}

.navbar .search-box form {
display: flex;
align-items: center;
border-radius: 30px;
overflow: hidden;
background: white;
min-width: 250px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .search-box input {
border: none;
padding: 0.5rem 1rem;
flex: 1;
outline: none;
font-size: 0.9rem;
height: 38px; /* Altura específica para navbar */
background: transparent;
}

.navbar .search-box input::placeholder {
color: #6c757d;
}

.navbar .search-box button {
background-color: var(--color-secondary);
color: white;
border: none;
padding: 0.5rem 1rem;
height: 38px; /* Misma altura que el input */
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
cursor: pointer;
}

.navbar .search-box button:hover {
background-color: var(--color-primary-dark);
}

.navbar .search-box button img {
width: 20px;
height: 20px;
}

/* === SEARCH BOX DEL HERO === */
.hero .search-box {
display: flex;
border-radius: 30px;
overflow: hidden;
margin: 0 auto;
justify-content: center;
}

.hero .search-box form {
display: flex;
border-radius: 30px;
overflow: hidden;
max-width: 400px;
width: 100%;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero .search-box input {
border: none;
padding: 0.75rem 1rem; /* Más padding para el hero */
flex: 1;
border-radius: 30px 0 0 30px;
font-size: 1rem; /* Tamaño más grande para hero */
outline: none;
}

.hero .search-box input::placeholder {
color: #6c757d;
}

.hero .search-box button {
background-color: var(--color-secondary);
color: #fff;
border: none;
padding: 0.75rem 1.5rem; /* Más padding para el hero */
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
cursor: pointer;
}

.hero .search-box button:hover {
background-color: var(--color-primary-dark);
}

.hero .search-box button img {
width: 24px; /* Más grande para hero */
height: 24px;
}

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
.navbar .search-box {
margin-left: 0;
margin-top: 1rem;
width: 100%;
}

.navbar .search-box form {
min-width: 100%;
}

.hero .search-box form {
max-width: 100%;
}
}














/* Ad styling */
.adsbygoogle {
    background-color: var(--color-background-body); /* Fondo más sutil */
    border: 1px dashed var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-base);

    min-height: 400px; /* Altura mínima general */
}
/* Tus alturas específicas para adsbygoogle y adsbygoogle-noablate se mantienen */
.adsbygoogle-noablate{ min-height: 67px; }
@media(min-width: 768px) {
  .adsbygoogle { min-height: 280px; } /* Ajustado de tu CSS original */
  .adsbygoogle-noablate{ min-height: 126px; }
}
.vert{ min-height: 600px!important; } /* Esto ya lo tenías */


/* --- Footer --- */
footer.site-footer { /* Añade esta clase al footer */
    background-color: var(--color-background-footer);
    color: var(--color-text-on-dark);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
footer.site-footer a {
    color: var(--color-secondary);
    font-weight: 600;
}
footer.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}
footer.site-footer p {
    margin-bottom: 0.5rem;
}

/* Clases de utilidad de tu CSS original que podrían ser útiles */
.visible { content-visibility: auto; contain-intrinsic-size: 1000px; }
.vl { content-visibility: auto; contain-intrinsic-size: 50px; }
#video-container { position: relative; width: 100%; max-width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom:1rem;}
#video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* Fallback de anuncios */
.ad-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 8px; padding: 20px; height:280px; }
@media(max-width: 768px) { .ad-fallback { height:380px; } }
.ad-fallback-image { max-width: 100%; height: auto; border-radius: 8px;}
.ad-fallback-content { margin-top: 10px;}
.ad-fallback-content h3 { font-size: 18px; color: #333; margin: 10px 0;}
.ad-fallback-content p { font-size: 14px; color: #666;}
.ad-fallback-cta { display: inline-block; margin-top: 10px; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px;}
.ad-fallback-cta:hover { background-color: #0056b3;}
.hidden { display: none;}
.ad-fallback { text-align: center; margin: 0px 0;}

/* === BANDERAS EN DROPDOWNS === */
.dropdown-item {
display: flex;
align-items: center;
}

.dropdown-item img.flag {
margin-right: 8px;
vertical-align: middle;
flex-shrink: 0; /* Evita que la imagen se comprima */
}

.flag {
display: inline-flex;
align-items: center;
justify-content: center;
}

/* === FIX PARA DROPDOWN QUE SE CORTA EN CARDS === */

/* Permitir que los dropdowns escapen de las cards */
.card.dropdown-container,
.card:has(.dropdown) {
position: static !important;
overflow: visible !important;
}

.card-body:has(.dropdown) {
position: static !important;
}

/* Asegurar z-index correcto para dropdowns */
.dropdown-menu {
z-index: 1051 !important;
position: absolute !important;
}

.dropdown-toggle {
z-index: 1050 !important;
position: relative !important;
}

/* Para dropdowns multicolumna específicamente */
.dropdown-menu.col3 {
z-index: 1051 !important;
min-width: 600px;
max-height: 400px;
overflow-y: auto;
}

@media (min-width: 768px) {
.dropdown-menu.col3 {
column-count: 3;
column-gap: 1rem;
padding: 1rem;
}

.dropdown-menu.col3 .dropdown-item {
break-inside: avoid;
margin-bottom: 0.25rem;
display: block;
width: 100%;
}
}

/* En pantallas pequeñas, hacer dropdown de una sola columna */
@media (max-width: 767.98px) {
.dropdown-menu.col3 {
column-count: 1;
min-width: 250px;
}
}

/* Fix específico para cuando el dropdown se abre hacia arriba */
.dropdown-menu[data-bs-popper*="top"] {
position: absolute !important;
z-index: 1051 !important;
}
.dropdown-menu.col2 { column-count: 2; }
.dropdown-menu.col3 { column-count: 3; }


.dropdown-item:hover{color:#ffffff;text-decoration:none;background-color:var(--color-secondary)}
    /* Estilo para enlaces con apariencia de botones blancos con elevación al hover */
.list-unstyled li .btn-item {
display: block;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
padding: 0.75rem 1rem;
width: 100%;
text-align: left;
color: #005792;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 10px;

}
.list-unstyled li .btn-item:hover {
transform: translateY(-4px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
text-decoration: none;
}

.accordion-button {
background-color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
color: #fff;
background-color: #8b3d3d;
}

:root {
--chip-bg       : var(--bs-light);
--chip-border   : var(--bs-gray-300);
--chip-text     : var(--bs-gray-800);
--chip-bg-hover : var(--color-secondary);
--chip-text-hover: #fff;
}

/* -------------------  tarjeta  ------------------- */
.card {
backdrop-filter: blur(2px);               /* sutil efecto “frosted” */
}
.card-header {
background: var(--color-secondary);
}


/* Efecto hover sencillo para todos los enlaces del sidebar */
.card .list-unstyled a {
transition: background-color 0.25s ease;
position: relative;
}

.card .list-unstyled a:hover {
background-color: #e9ecef;
color: var(--color-primary) !important;
text-decoration: none;
}

.card .list-unstyled a:hover span {
color: var(--color-primary);
transform: translateX(4px);
transition: transform 0.25s ease;
}

/* Solo la bandera y el texto se mueven */
.card .list-unstyled a:hover img {
transform: translateX(4px) scale(1.05);
transition: transform 0.25s ease;
}

/* El contenedor de elementos internos */
.card .list-unstyled a span,
.card .list-unstyled a img {
transition: transform 0.25s ease;
}

/* Efecto al hacer clic */
.card .list-unstyled a:active span,
.card .list-unstyled a:active img {
transform: translateX(4px) scale(0.98);
}


/* -------------------  chip / botón  ------------------- */
.btn-chip {
display         : block;
padding         : .55rem 1rem;
border          : 1px solid var(--chip-border);
border-radius   : 999px;                  /* forma píldora              */
background-color: var(--chip-bg);
color           : var(--chip-text);
text-decoration : none;
text-align      : center;
font-size       : .95rem;
transition      : all .18s ease-in-out;
box-shadow      : 0 1px 2px rgb(0 0 0 /.05);
}
.btn-chip:hover,
.btn-chip:focus {
background-color: var(--chip-bg-hover);
color           : var(--chip-text-hover);
transform       : translateY(-2px);
box-shadow      : 0 6px 12px rgb(0 0 0 /.15);
}

.btn-granate {
background-color: var(--color-secondary);
color           : #fff;
border-radius   : 999px;
padding         : .55rem 1rem;
text-decoration : none;
font-size       : .95rem;
transition      : all .18s ease-in-out;
}
.btn-granate:hover, .btn-granate:focus {
background-color: var(--color-primary-dark);
color           : #fff;
transform       : translateY(-2px);
box-shadow      : 0 6px 12px rgb(0 0 0 /.15);
}

/* -------------------  modo oscuro opcional  ------------------- */
@media (prefers-color-scheme: dark) {
:root {
--chip-bg       : var(--bs-gray-800);
--chip-border   : var(--bs-gray-700);
--chip-text     : var(--bs-gray-200);
}
.card { background-color:#1e293b; }
}
.hero .breadcrumb-item + .breadcrumb-item::before {
content: "›";
color: rgba(255,255,255,0.6);
font-weight: bold;
font-size: 1.1em;
}

.hero .breadcrumb {
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hover-opacity-100:hover {
opacity: 1 !important;
transition: opacity 0.3s ease;
}

.backdrop-blur {
backdrop-filter: blur(10px);
}