@charset "utf-8";

/* ==========================================================================
   1. VARIABLES GLOBALES
========================================================================== */
:root {
  --brand-blue: #4FA3D1;

  /* Dark panels */
  --panel-bg: #1f2328;
  --panel-bg-2: #2a3038;
  --panel-shadow: rgba(0,0,0,.35);

  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255,255,255,.72);

  /* Topbar */
  --topbar-bg: #e9e9ea;
  --topbar-text: #2b2f36;
  --topbar-link: #1b1f27;
  --topbar-cta: #d81b60;

  /* Otros */
  --wa: #25d366;
  --hero-band-color: rgba(180,180,0,0.55);
}

/* ==========================================================================
   2. ESTILOS BASE Y TIPOGRAFÍA
========================================================================== */
html, body, td, th {
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Nota: Cuidado con este !important global, puede pisar otros estilos a futuro */
a { 
  text-decoration: none !important; 
} 

.titulo-principal {
  margin-bottom: 6px;
  font-size: 1.7rem;
}

.titulo-secundario {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .titulo-principal { font-size: 1.1rem; }
  .titulo-secundario { font-size: 0.9rem; }
}

/* ==========================================================================
   3. CABECERA: BARRA SUPERIOR (TOPBAR E INFO STRIP)
========================================================================== */
/* Topbar (Menú superior institucional) */
.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  border-bottom: 4px solid var(--brand-blue);
}
.topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 7px 0;
}
.topbar a {
  color: var(--topbar-link);
  text-decoration: none;
  font-weight: 500;
}
.topbar a:hover { 
  text-decoration: underline !important; 
}
.topbar .topbar-cta {
  color: var(--topbar-cta);
  font-weight: 600;
  text-decoration: underline !important;
}
.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .topbar .topbar-inner { justify-content: center; }
  .topbar .topbar-left { width: 100%; justify-content: center; text-align: center; }
  .topbar .topbar-right { justify-content: center; gap: 14px; }
}

/* Barra Superior de Info (Noticias/Chips) */
.top-info-strip {
  width: 100%;
  background: #e5e5e5;
}
.info-strip-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.info-strip-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  background: #cc1f72;
}
.info-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none !important;
}
.info-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.info-chip-strong {
  font-weight: 700;
}
.sin-borde,
.info-chip:last-child {
  border-right: none !important;
}
.info-strip-right {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: #d9d9d9;
}
.info-news-link {
  display: block;
  width: 100%;
  padding: 8px 14px;
  color: #111 !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
  .top-info-strip .container { padding-left: 0; padding-right: 0; }
  .info-strip-row { flex-direction: column; }
  .info-strip-left { width: 100%; justify-content: center; text-align: center; flex-wrap: wrap; }
  .info-strip-right { width: 100%; }
  .info-chip { padding: 10px 12px; font-size: 11px; }
  .info-news-link { padding: 8px 12px; font-size: 11px; white-space: normal; overflow: visible; text-overflow: unset; }
}

/* ==========================================================================
   4. NAVEGACIÓN PRINCIPAL (NAVBAR Y MEGA MENÚ)
========================================================================== */
.navbar-custom {
  background: var(--brand-blue);
  padding: 0 !important;
}
.navbar-custom,
.navbar-custom .container,
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-nav,
.navbar-custom .nav-item {
  align-items: stretch !important;
}
.navbar-custom .navbar-brand {
  padding: .45rem 0;
  display: flex;
  align-items: center;
}
.navbar-toggler { border: none; }
.navbar-toggler:focus { outline: none; box-shadow: none; }
.navbar-toggler-icon { background-image: none; }
.navbar-toggler-icon::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  font-size: 22px;
}

/* Botones del Menú */
.nav-linklike {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 1rem 1rem;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff !important;
  font-weight: 500;
  white-space: nowrap;
  word-break: keep-all;
  font-family: "Raleway", system-ui, -apple-system, sans-serif !important;
}
.nav-linklike:focus { outline: none; box-shadow: none; }
.nav-linklike.is-active {
  background: var(--panel-bg-2) !important;
  color: var(--text-on-dark) !important;
}

/* Botón Buscar */
.search-btn {
  color: #fff;
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 1rem;
  white-space: nowrap;
}
.search-btn:focus { outline: none; box-shadow: none; }
.search-btn:hover { opacity: .9; }

/* Contenedores Desplegables (Drawers) */
.drawer {
  background: var(--panel-bg);
  box-shadow: 0 14px 30px var(--panel-shadow);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s ease, opacity .18s ease;
  border: 0 !important;
}
.drawer.is-open { opacity: 1; }
.search-drawer.is-open { max-height: 120px; }
.search-inner { display: flex; align-items: center; padding: 18px 0; }
.search-icon { margin-right: 12px; color: var(--text-on-dark-muted); font-size: 18px; }
.search-input {
  border: none;
  font-size: 26px;
  font-weight: 500;
  padding: 0;
  height: auto;
  background: transparent;
  color: var(--text-on-dark);
  box-shadow: none !important;
  font-family: "Raleway", system-ui, -apple-system, sans-serif !important;
}
.search-input::placeholder { color: rgba(255,255,255,.55); }

.mega-drawer.is-open { max-height: 520px; }
.mega-inner { padding: 18px 0 22px; }
.mega-col-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-on-dark);
  margin: 0 0 10px;
}
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li { margin: 0 0 7px; }
.mega-list a {
  color: var(--text-on-dark-muted) !important;
  font-size: 14px;
  font-weight: 500;
}
.mega-list a:hover { color: var(--text-on-dark) !important; text-decoration: underline !important; }

/* Responsive del Navbar */
@media (min-width: 768px) {
  .navbar-custom .navbar-nav { flex-wrap: nowrap !important; width: 100%; }
  .navbar-custom .navbar-nav .nav-item { flex: 1 1 0; display: flex; }
  .nav-linklike { width: 100%; height: 100%; }
  .search-btn { flex: 0 0 auto; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .nav-linklike { font-size: 14px; padding: .95rem .7rem; }
}
@media (min-width: 1200px) {
  .nav-linklike { font-size: 15px; }
}
@media (max-width: 767.98px) {
  .navbar-custom .navbar-collapse { margin-top: 8px; }
  .navbar-nav { width: 100%; }
  .navbar-nav .nav-item { display: block; width: 100%; }
  .nav-linklike { display: block; width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 15px; }
  .nav-linklike.is-active { width: 100% !important; background: var(--panel-bg-2) !important; }
  .search-btn { width: 100%; justify-content: flex-start; padding: 1rem 15px; }
  .search-inner { padding: 12px 0; }
  .search-input { font-size: 18px; }
  
  .mega-inline-host { background: var(--panel-bg-2); }
  .mega-inline-host.is-open { max-height: 560px; }
  .mega-inline-host .container { padding-left: 15px !important; padding-right: 15px !important; }
  .mega-inline-host .mega-inner { padding: 12px 0 14px; }
  .mega-inline-host .mega-col-title { font-size: 13px; margin: 8px 0 6px; }
  .mega-inline-host .mega-list a { font-size: 13px; color: rgba(255,255,255,.82) !important; }
  .mega-inline-host .mega-list a:hover { color: rgba(255,255,255,1) !important; }
}

/* ==========================================================================
   5. COMPONENTES PRINCIPALES (HERO, BLOG, AUTORIDADES, WP)
========================================================================== */
/* Hero Header */
.hero-header { position: relative; width: 100%; }
.hero-header picture,
.hero-header img { display: block; width: 100%; height: auto; }
.hero-band {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  background: var(--hero-band-color);
  padding: 12px 0;
}
.hero-title {
  margin: 0; color: #fff; font-size: 2rem; font-weight: 500; text-align: center;
}

/* Grilla de Novedades (Blog) */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; margin-top: 1rem; width: 100%;
}
.blog-grid .post-item {
  display: flex; flex-direction: column; height: 100%;
  border: none !important; box-shadow: none !important;
  background: transparent; padding: 0; margin: 0;
}
.blog-grid .post-item img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 1rem;
}
.blog-grid .post-item h2 {
  font-size: 1.15rem; line-height: 1.35; margin: 0 0 .75rem 0; color: #222; font-weight: 700;
}
.blog-grid .post-item p {
  font-size: .95rem; line-height: 1.55; color: #444; margin: 0 0 1rem 0; flex-grow: 1;
}
.blog-grid .post-item a,
.novedades-link {
  color: #1f2328 !important; font-weight: 700; text-decoration: none !important; margin-top: auto;
}
.blog-grid .post-item a:hover,
.novedades-link:hover { text-decoration: underline !important; }

@media (min-width: 768px) {
  .blog-grid.blog-grid-2, .blog-grid.blog-grid-3, .blog-grid.blog-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .blog-grid.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .blog-grid.blog-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.blog-grid.blog-grid-4 .post-item img { aspect-ratio: 1 / 1.414; /* proporción A4 */ }

/* Contenido traído de WordPress */
.wp-page-content { width: 100%; max-width: 100%; }
.wp-page-title { font-size: 2rem; line-height: 1.2; margin-bottom: 1.25rem; font-weight: 700; color: #222; }
.wp-page-body { width: 100%; max-width: 100%; font-size: 1rem; line-height: 1.7; color: #333; overflow-wrap: anywhere; word-break: break-word; }
.wp-page-body * { max-width: 100%; box-sizing: border-box; }
.wp-page-body p, .wp-page-body li, .wp-page-body a, .wp-page-body span, .wp-page-body strong, .wp-page-body em { overflow-wrap: anywhere; word-break: break-word; }
.wp-page-body img { max-width: 100%; height: auto; display: block; }
.wp-page-body figure { max-width: 100%; margin: 1rem 0; }
.wp-page-body iframe, .wp-page-body video, .wp-page-body embed, .wp-page-body object { max-width: 100%; }
.wp-page-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-page-body pre, .wp-page-body code { white-space: pre-wrap; word-break: break-word; }
.wp-page-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.wp-page-body .wp-block-column { flex: 1 1 280px; min-width: 0; }

@media (max-width: 767.98px) {
  .wp-page-title { font-size: 1.6rem; }
  .wp-page-body { font-size: .98rem; line-height: 1.65; }
  .wp-page-body .wp-block-columns { gap: 16px; }
}

/* Autoridades Balance */
.autoridades-balance { column-count: 3; column-gap: 40px; }
.autoridades-balance h4 { column-span: all; margin: 1.8rem 0 1rem 0; font-size: 1.4rem; }
.autoridades-balance p { break-inside: avoid; margin: 0 0 0.9rem 0; line-height: 1.5; }
.autoridades-balance strong { display: inline-block; margin-bottom: 2px; }

@media (max-width: 900px) {
  .autoridades-balance { column-count: 1; }
}

/* ==========================================================================
   6. ELEMENTOS FLOTANTES (WHATSAPP)
========================================================================== */
.whatsapp {
  position: fixed;
  right: 40px; bottom: 40px; z-index: 100;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  color: #fff !important;
  background-color: var(--wa);
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
}
@media (max-width: 767.98px) {
  .whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 28px; }
}

/* ==========================================================================
   7. PIE DE PÁGINA (FOOTER)
========================================================================== */
.footer-dark {
  background: #4a4a4a;
  padding: 60px 0;
  color: #fff;
  font-size: 14px;
}
.footer-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 14px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 6px;
}
.footer-links a {
  color: #e4e4e4 !important;
  text-decoration: none !important;
  transition: opacity .2s ease;
}
.footer-links a:hover {
  opacity: .7;
  color: #ffffff !important;
}
.footer-dark a {
  color: #e4e4e4 !important;
  text-decoration: none !important;
}
.footer-dark a:hover {
  color: #ffffff !important;
}