/*
Theme Name: CILA Theme
Description: Tema custom con header de dos barras, panel de submenú por clic, iconos personalizables y footer pulido.
Version: 1.3.2
Text Domain: cila-theme
*/

/*========================
  Variables & Base
========================*/
:root{
  /* Paleta */
  --blue1:#28549E;
  --blue2:#183F81;
  --blueSoft:#2f5fb4;

  /* Transparencia real de la barra de menú (sube/baja) */
  --navAlpha: .12;            /* .10 muy transparente · .30 más sólida */
  --navBlue1:#28549E;
  --navBlue2:#183F81;

  --purple:#6C2BBF;

  --ink:#0f172a;
  --muted:#64748b;
  --panel:#ffffff;
  --footer:#071947;

  --radius:14px;

  /* Márgenes laterales generales (edge-to-edge = 0) */
  --edge:0px;

  /* Márgenes específicos de header y footer (separación del borde) */
  --header-edge:40px;
  --footer-edge:40px;

  /* Fuente del sitio */
  --site-font: "Segoe UI", SegoeUI, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Base tipográfica con Segoe UI sin alterar tamaño/grosor/colores */
html, body, button, input, select, textarea {
  font-family: var(--site-font) !important;
}
h1,h2,h3,h4,h5,h6,
p, a, li, dt, dd, small, label, blockquote, figcaption,
th, td, legend, caption {
  font-family: var(--site-font) !important;
}
/* Gutenberg / Elementor */
.wp-block,
.wp-block *:not(i):not(.fa):not([class*="fa-"]):not(.dashicons):not(.material-icons):not(.material-symbols),
.elementor,
.elementor *:not(i):not(.fa):not([class*="fa-"]):not(.dashicons):not(.material-icons):not(.material-symbols){
  font-family: var(--site-font) !important;
}
/* No forzar sobre icon fonts / monospace */
.fa,[class*="fa-"],.dashicons,
.material-icons,.material-symbols,
code,kbd,pre,samp{ font-family: inherit; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; color:var(--ink); background:#fff; font-size:16px; line-height:1.6; }
a{ color:var(--blue1); text-decoration:none; }

/* contenedores a 100% ancho (edge-to-edge) */
.container,.wrap{ max-width:none; width:100%; padding-left:var(--edge); padding-right:var(--edge); }
.hidden{ display:none; }

/*========================
  Header
========================*/
.site-header{
  position:sticky; top:0; z-index:9999;
  background:transparent;   /* <<< transparente para ver el contenido detrás */
  box-shadow:none;          /* la sombra la tiene la topbar */
}

/* Topbar (barra superior blanca) */
.topbar{
  background:#fff;
  border-bottom:1px solid #eef2ff;
  box-shadow:0 8px 24px rgba(2,6,23,.08); /* sombra movida aquí */
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:12px 0; flex-wrap:nowrap;
}

/* split + márgenes a los bordes */
.topbar .brand{ display:flex; align-items:center; gap:16px; margin-left:var(--header-edge); }
.topbar .right{ display:flex; align-items:center;margin-right:var(--header-edge); }

.dashed{
	border: 1px solid #0606062e;
	height: 50px;
	margin: 0 20px;
}

.topbar .content-phones{
	display:flex;
	gap:20px;
}

.brand .site-logo{ display:flex; align-items:center; gap:10px; }
.brand .address{ font-weight:600; }
.topbar .phones a{ color:var(--ink); text-decoration:none; }

.cta .button{
  display:inline-block; padding:10px 18px; border-radius:8px;
  border:2px solid #17428C; color:#17428C; background:#fff;
  transition:all .18s ease;
}
.cta .button:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(59,91,204,.15); }

/* Iconos topbar como imagen */
.icon-img{ width:18px; height:18px; display:inline-block; vertical-align:-3px; margin-right:6px; }
.icon{ display:inline-flex; width:18px; height:18px; vertical-align:-3px; margin-right:6px; color:var(--blue2); }

/* =========================================================
   Subheader / Navbar súper translúcida (texto 100% opaco)
   ========================================================= */
.navbar{
  position: relative;
  background: transparent !important;              /* sin fondo sólido */
  color:#fff;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  isolation: isolate;                              /* capa propia para el ::before */
}
.navbar .wrap{
  position: relative; z-index: 1;                  /* el texto va arriba */
  background: #17428c99 !important;
  display:flex; align-items:center; justify-content:left; /* menú centrado */
  padding:10px 0; gap:16px; padding-left:0; padding-right:0;
}

/* Enlaces del menú blancos y nítidos */
.navbar a{ color:#fff; text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.12); }
.navbar a:hover{ opacity:.95; }

/* Lámina translúcida (color+blur) debajo del texto */
.navbar::before{
  content:"";
  position:absolute; inset:0;
  /* Opacidad controlada con --navAlpha */
  background: linear-gradient(
    180deg,
    rgba(40,84,158, var(--navAlpha)),
    rgba(24,63,129, var(--navAlpha))
  );
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  pointer-events: none;
  z-index: 0;
}

/* Fallback cuando no hay backdrop-filter */
@supports not ((backdrop-filter: blur(1px))){
  .navbar::before{
    background: linear-gradient(180deg, rgba(40,84,158,.70), rgba(24,63,129,.70));
  }
}

/*========================
  Menú principal (centrado)
========================*/
.primary-menu{
  list-style:none; margin: 0 var(--header-edge);; padding:0;
  display:flex; gap:50px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.primary-menu>li{ position:relative; }
.primary-menu>li>a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 6px; border-radius:10px;
  font-weight:600; letter-spacing:.2px;
  transition:color .15s ease;
}

/* Subrayado animado al hover/activo */
.primary-menu>li>a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px;
  height:2px; background:#fff; opacity:0; transform:scaleX(.6);
  transform-origin:center; transition:opacity .2s, transform .2s;
}
.primary-menu>li:hover>a::after,
.primary-menu>li.is-active>a::after{ opacity:1; transform:scaleX(1); }

/* Caret sólo si tiene hijos */
.primary-menu>li.menu-item-has-children>a::after{
  content:"▾"; position:static; margin-left:6px; opacity:.9; height:auto; background:none; transform:none;
}

/* Ocultamos dropdown nativo; usamos panel por clic */
.primary-menu .sub-menu{ display:none !important; }

/*========================
  Panel inferior por CLIC
========================*/
.mega-panel{
  display:none; /* evita barra blanca al cerrar */
  background:#fff; border-top:1px solid #e5e7eb;
  box-shadow:0 26px 60px rgba(2,6,23,.14);
  opacity:0; transform:translateY(8px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  will-change:opacity, transform;
}
.mega-panel.open{ display:block; opacity:1; transform:none; pointer-events:auto; }
.mega-panel .wrap{ padding-top:18px; padding-bottom:22px; }
.mega-grid{ display:grid; grid-template-columns:repeat(4, minmax(220px, 1fr)); gap:24px; }
.mega-grid > li{ list-style:none; }

/* Tarjetas del panel (versión texto plano tipo lista) */
.mega-grid a.tile{
  display:block; border-radius:12px; padding:14px;
  border:1px solid #eef2ff; 
  background:#fff;
}
.mega-grid a.tile:hover{
  transform:translateY(-2px);
	background:#fff;
}
.tile-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.tile-icon{ width:28px; height:28px; border-radius:8px; background:#eef2ff; display:flex; align-items:center; justify-content:center; font-size:18px; overflow:hidden; }
.tile-title{ font-weight:700; }
.menu-desc{ color:var(--muted); font-size:13px; margin-top:4px; line-height:1.35; }

/*========================
  Contenido
========================*/
main{ padding:32px 0; }
.entry-title{ margin-top:0; }
.post{ margin-bottom:40px; }

/*========================
  Barra social flotante
========================*/
.floating-social{
  position:fixed; right:18px; bottom:7vh; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  transition:opacity .18s, transform .18s;
}
.floating-social.hide{ opacity:0; transform:translateY(20px); pointer-events:none; }
.floating-social .float-btn{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#DB0A1C;
  box-shadow:0 10px 24px rgba(225,29,72,.35);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.floating-social .float-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(225,29,72,.42);
  background:#990612;
}
.floating-social img{ width:22px; height:22px; display:block; filter:brightness(0) invert(1); }

/*========================
  Footer
========================*/
.site-footer{ margin-top:48px; background:var(--footer); color:#e6edff; }
.site-footer a{ color:#fff; }

/* top */
.footer-top{ padding:36px 0; }
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start;
}
/* márgenes hacia los bordes, estilo header */
.footer-top .footer-grid > .footer-brand{ margin-left:var(--footer-edge); }
.footer-top .footer-grid > .footer-map{ margin-right:var(--footer-edge); }

/* Marca + contenido */
.footer-brand{ display:flex; flex-direction:column; gap:14px; }

/* Logo en “cajita” blanca */
.logo-card{
  background:#fff; border-radius:12px; padding:12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.logo-card img{ display:block; max-width:160px; height:auto; }

/* Texto */
.footer-brand .meta{ color:#bfd0ff; }
.footer-brand .meta p{ margin:0 0 6px 0; }

/* Contacto: icono + texto en una sola línea */
.footer-contact{
  max-width:760px; display:grid; row-gap:10px;
}
.contact-row{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-width:0;
}
.contact-row p{
  margin:0; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(13px,1vw,16px); line-height:1.25; color:#e6edff;
}
.icon-chip{
  width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-chip img{ width:18px; height:18px; display:block; filter:brightness(0) invert(1); }

/* Redes */
.footer-social a{
  display:inline-flex; width:36px; height:36px; border-radius:8px;
  background:#DB0A1C; align-items:center; justify-content:center;
  margin-right:10px; transition:transform .18s ease, background .18s ease;
}
.footer-social a:hover{ transform:translateY(-2px); background:#990612; }
.footer-social a img{ width:18px; height:18px; display:block; }

/* Mapa */
.footer-map h3{ margin-top:0; color:#e6edff; }
.footer-map iframe{ width:100%; height:220px; border:0; border-radius:12px; }

/* bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 0; font-size:14px; color:#c5d4ff;
}
.footer-bottom .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-left:var(--footer-edge); padding-right:var(--footer-edge);
}
.footer-tagline{ opacity:.9; }

/*========================
  Responsive
========================*/
@media (max-width:1400px){
  :root{ --header-edge:20px; --footer-edge:20px; }
}

@media (max-width:1024px){
  .mega-grid{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-map iframe{ height:200px; }
}

@media (max-width:960px){
  :root{ --header-edge:5px; --footer-edge:20px; }
  .topbar .address, .topbar .phones{ display:none; } /* compactar */
  .primary-menu{ gap:16px; }
  .mega-grid{ grid-template-columns:1fr; }
  .floating-social{ right:12px; bottom:6vh; }

  /* en 1 columna, respetar márgenes laterales */
  .footer-top .footer-grid > .footer-brand,
  .footer-top .footer-grid > .footer-map{
    margin-left:var(--footer-edge); margin-right:var(--footer-edge);
  }
}

/* ===== Topbar: split izquierda/derecha usando --header-edge ===== */
.topbar .wrap{
  display:flex;
  align-items:center;
  gap:0px;
}
/* IZQUIERDA */
.topbar .brand{
  margin-left: var(--header-edge);
  display:flex;
  align-items:center;
  gap:50px;
  flex: 1 1 auto;            /* ocupa el espacio disponible a la izquierda */
}
/* DERECHA */
.topbar .right{
  margin-left:auto;
  margin-right: var(--header-edge);
  display:flex;
  align-items:center;
  justify-content:flex-end;  /* contenido pegado a su lado derecho */
  text-align:right;
}
.topbar .phones{ white-space:nowrap; } /* evita saltos entre los números */

/* ===== Submenú estilo lista (como referencia) ===== */
.mega-panel{
  background:#fff;
  border-top:1px solid #e5e7eb;
  box-shadow:0 26px 60px rgba(2,6,23,.10);
}
.mega-panel .wrap{
  padding-top:18px;
  padding-bottom:22px;
  padding-left: var(--header-edge);
  padding-right: var(--header-edge);
}
.mega-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  column-gap: 56px;
  row-gap: 18px;
}
.mega-grid > li{ list-style:none; }
.mega-grid a.tile{
  display:block;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  transform:none !important;
  transition:color .18s ease, background-color .18s ease;
}
.tile-head{ display:block; margin-bottom:4px; }
.tile-icon{ display:none; } /* oculta el cuadrito del icono */
.tile-title{
  display:block;
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  color:#0f172a;
  margin:0 0 4px 0;
}
.menu-desc{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:#6B7280;
}

.mega-grid a.tile:hover .tile-title{
  color:#143F8F;
}

.mega-grid a.tile:hover .menu-desc{
  color:#143F8F;
}

.primary-menu>li.is-active>a{
  background:transparent;
  color:#fff;
}
@media (max-width:1200px){
  .mega-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); column-gap:36px; }
}
@media (max-width:992px){
  .mega-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); column-gap:28px; }
}
@media (max-width:640px){
  .mega-panel .wrap{ padding-left:16px; padding-right:16px; }
  .mega-grid{ grid-template-columns:1fr; }
}

/*========================
  Layout al ras / Elementor
========================*/
/* Sin espacio arriba en páginas hechas con Elementor */
.elementor-page main,
.elementor-page main > .wrap,
.elementor-page .entry-content { padding-top:0 !important; margin-top:0 !important; }

/* La PRIMERA sección de Elementor: sin padding ni margen */
.elementor-page .elementor-section:first-of-type{
  margin-top:0 !important;
  padding-top:0 !important;
}
/* Si usas contenedores (Flexbox Container) */
.elementor-page .e-con:first-of-type{
  margin-top:0 !important;
  padding-top:0 !important;
}
/* Evita que el body deje un hueco arriba */
body.elementor-page { margin-top:0 !important; }

/* MAIN: elimina padding (y cualquier max-width que impida ancho completo) */
main.container{
  padding: 0 !important;
  max-width: 100% !important;
  width: 100%;
}
/* Wrapper de contenido sin padding extra */
main.container .entry-content{
  margin: 0 !important;
  padding: 0 !important;
}
/* FOOTER: elimina cualquier margen externo */
footer.site-footer,
.site-footer{
  margin: 0 !important;
}
/* (Opcional) eliminar márgenes del primer/último bloque */
.entry-content > *:first-child{ margin-top: 0 !important; }
.entry-content > *:last-child{  margin-bottom: 0 !important; }
/* (Opcional – Elementor) eliminar padding/márgenes por defecto en secciones boxeadas */
.elementor-section.elementor-section-boxed > .elementor-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-section{
  margin-top: 0;
  margin-bottom: 0;
}

/* ===== Página individual de noticia (estructura mejorada) ===== */
.single-cila_news { background:#fff; }

/* Contenedor principal del artículo */
.news-article{
  max-width: min(100vw, 92vw);
  margin: 0 150px;
  padding: clamp(18px, 3vw, 28px) 0 40px;
}

/* ----------------- HERO / BANNER ----------------- */
/* Alto responsivo tipo “hero” (centrado y recortado) */
.news-hero{
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Limita el ancho visual para que el banner no “desborde” demasiado */
.news-hero__media{
  position: relative;
  max-width: min(100vw, 100vw);
  margin: 0 auto;
  height: clamp(280px, 42vw, 520px);   /* alto responsivo */
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2,6,23,.14);
  isolation: isolate;
}

/* Imagen/Video centrados y recortados */
.news-hero__img,
.news-hero__video,
.news-hero__placeholder{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;            /* recorte */
  object-position: center;      /* centrado */
  display:block;
}

/* Por si no hay media */
.news-hero__placeholder{ background:#e5e7eb; }

/* Máscara (degradado sutil abajo) para integración con el cuerpo */
.news-hero__mask{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.06) 92%, rgba(0,0,0,.12) 100%);
  z-index:1;
}

/* ----------------- Título / Contenido / Fecha ----------------- */
.news-article__head{ margin-top: clamp(18px, 3.2vw, 28px); }

.news-title{
  margin:0 0 8px 0;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.18;
  text-align:left;
  color:#17428C;
  font-size: clamp(26px, 3.3vw, 40px);
}

.news-content{
  margin-top: clamp(8px, 1.4vw, 12px);
  color:#111827;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height:1.75;
  text-align:left;
}

/* Párrafos con primera línea sangrada suave (opcional) */
.news-content p{ text-indent: 26px; }
.news-content p:first-child{ text-indent: 0; }

/* Fecha al final */
.news-article__foot{
  display:flex; justify-content:left;
  margin-top: clamp(20px, 3vw, 36px);
}
.news-date{
  color:#6b7280;
  font-size: .95rem;
  background:#f8fafc;
  border:1px solid #eef2ff;
  border-radius: 999px;
  padding: 8px 14px;
}

/* Ajustes para contenido insertado (imágenes dentro del texto) */
.news-content img{
  display:block; max-width:100%; height:auto; margin: 18px auto;
  border-radius:12px; box-shadow:0 10px 28px rgba(2,6,23,.10);
}
.news-content figure{ margin: 18px auto; }
.news-content figcaption{ color:#6b7280; font-size:.9rem; text-align:center; }

/* Video embebido en contenido */
.news-content iframe, .news-content video{
  width:100%; height:auto; display:block; border-radius:12px; margin:18px 0;
}

/* En móviles permite mayor altura al hero para composición */
@media (max-width: 640px){
  .news-hero__media{ height: clamp(280px, 58vw, 420px); }
}

/* Contenedor interno del navbar en dos columnas */
.navbar .nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* menú izq, selector der */
  gap:16px;
}

/* Lado izquierdo y derecho */
.navbar .nav-left{ min-width:0; }
.navbar .nav-right{ flex-shrink:0; }

/* El menú ya trae su propio gap; lo alineamos a la izquierda */
.navbar .primary-menu{
  justify-content:flex-start;      /* antes estaba centrado */
  margin-left: var(--header-edge, 0);
  margin-right: 0;
}

/* El chip del selector (shortcode) respeta tu línea visual */
.navbar .nav-right .cila-langswitch{ margin-right: var(--header-edge, 0); }

/* Responsive: cuando no quepa, el selector baja a segunda línea */
@media (max-width: 1024px){
  .navbar .nav-inner{ flex-wrap:wrap; row-gap:10px; }
  .navbar .nav-right{ width:100%; display:flex; justify-content:flex-end; }
  .navbar .primary-menu{ flex-wrap:wrap; }
}

.site-header .topbar .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:5px;
}
.site-header .brand { display:flex; align-items:center; gap:12px; }
.site-header .brand .address { margin:0; font-size:14px; }
.site-header .right { display:flex; align-items:center; gap:12px; }
.site-header .right .dashed { border:none; border-left:1px solid #cfd7e3; height:28px; margin:0 4px; }
.site-header .cta .button { border-radius:14px; padding:10px 18px; font-weight:600; }


/* Navbar desktop */
.navbar .nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-right { margin-left:auto; }

/* Quick search (oculta por defecto en desktop) */
.quick-search { display:none; padding:10px 16px; }
.quick-search form { max-width:900px; margin:0 auto; }

/* Drawer */
.mobile-drawer { position:fixed; top:0; right:-100%; width:min(420px, 86vw); height:100dvh; background:#0d2a55; color:#fff; z-index:9999; display:flex; flex-direction:column; transition:right .28s ease; }
.mobile-drawer.open { right:0; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.36); z-index:9998; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.drawer-header .drawer-logo img { max-height:34px; }
.drawer-close { background:transparent; border:none; color:#fff; font-size:36px; line-height:1; }
.drawer-payments { display:flex; gap:12px; padding:8px 16px 0; }
.drawer-payments .pay-item { flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff; text-decoration:none; background:#133a79; padding:10px 12px; border-radius:12px; }
.drawer-payments .pay-item img { width:32px; height:32px; }

.drawer-nav { overflow:auto; padding:8px 6px; }
.mobile-menu, .mobile-menu ul { list-style:none; margin:0; padding:0; }
.mobile-menu > li { border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-menu a { display:block; padding:12px 16px; color:#fff; text-decoration:none; }
.mobile-menu li.menu-item-has-children > button.subtoggle {
  background:none; border:none; color:#fff; font-size:18px; margin-right:6px; float:right; padding:12px; cursor:pointer;
}
.mobile-menu li.menu-item-has-children > ul { display:none; background:rgba(255,255,255,.06); }
.mobile-menu li.menu-item-has-children.open > ul { display:block; }
.mobile-menu li.menu-item-has-children.open > a { background:rgba(255,255,255,.08); }

.drawer-footer { margin-top:auto; padding:16px; display:grid; gap:12px; }
.drawer-cta { display:block; text-align:center; background:#fff; color:#0d2a55; font-weight:700; padding:12px 14px; border-radius:14px; text-decoration:none; }

/* Breakpoints */
@media (max-width: 1400px) {
  /* Mostrar hamburguesa y ocultar navbar de escritorio */
  .nav-toggle { display:flex; }
  .navbar .nav-inner { display:none; }

  /* Compactar topbar derecha */
  .site-header .right { gap:8px; }
  .site-header .right .tarjeta-link span,
  .site-header .right .pse-link span { display:none; } /* solo iconos, como en la captura estrecha */
  .site-header .right .tarjeta-link img { width:34px; height:34px; }
  .site-header .right .pse-link img { width:36px; height:34px; }

  /* Mostrar buscador “píldora” bajo el header */
  .quick-search { display:block; }
  .quick-search input[type="search"] { border-radius:999px; height:48px; }
}

@media (max-width: 768px) {
  .site-header .brand { gap:8px; }
  .site-header .brand .address { display:none; } /* ocultar dirección en móvil, sólo logo */
  .site-header .right .content-phones, .site-header .right .dashed { display:none; } /* en móvil solo pagos + CTA + hamburguesa */
}

.topbar .wrap{ gap:12px; padding:10px 0; }
.topbar .brand{ gap:14px; }
.topbar .brand .address{ font-size:14px; color:#1f2937; }
.topbar .right{ gap:12px; }

/* Chips de pagos como en mock: sólo iconos en móvil, con etiqueta en tablet */
.topbar .tarjeta-link a,
.topbar .pse-link a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:0px; border-radius:12px;
}
.topbar .tarjeta-link img{ width:44px; height:44px; }
.topbar .pse-link img{ width:46px; height:44px; }
.topbar .tarjeta-link span,
.topbar .pse-link span{ font-weight:600; color:#0f172a; white-space:nowrap; }

.topbar .dashed{ width:1px; height:28px; border-left:1px solid #DFE5F0; margin:0 8px; }

/* ===== QuickBar (buscador + idioma) ===== */
.quickbar{ display:none; padding:10px 16px 12px; background:transparent; }
.quickbar .qs-left form{ margin:0; }
.quickbar input[type="search"]{
  width:100%; height:48px; border-radius:14px; padding:0 16px 0 42px;
}
.quickbar .qs-right{ display:flex; align-items:center; padding-left:12px; }


/* pie del drawer */
.drawer-footer{ margin-top:auto; padding:14px 16px 16px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:12px; }
.drawer-cta{ display:block; text-align:center; background:#fff; color:#0D2A55; font-weight:800; padding:12px 14px; border-radius:14px; }

/* ====== Ajustes visuales para parecerse al mock ====== */
@media (max-width:768px){
  .cta .button{ padding:10px 16px; border-radius:14px; }
	.topbar .right{gap: 0px;}
  .nav-toggle{ width:44px; height:44px; }
}

.floating-social {
  transition: opacity .25s ease, transform .25s ease;
}

.drawer-open .floating-social {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* === Contenedor derecho del navbar === */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* Contenedor interno (alineación horizontal) */
.nav-right-inner {
  display: flex;
  align-items: center;
}

.nav-right-inner .dashed{
	border: none;
	border-left : 1px solid #cfd7e3;
	height: 28px;
	margin: 0 4px;
}

/* Imagen Phidias */
.phidias-link img {
  width: 78px;
  height: 30px;
  display: block;
  transition: transform .2s ease;
	margin: 0 10px;
}
.phidias-link:hover img {
  transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE: Single noticia (cila_news)
   ========================================= */

/* Ajustar márgenes laterales del artículo */
.news-article {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 48px) 40px;
}

/* Título más adaptable */
.news-title {
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.2;
  word-break: break-word;
}

/* Contenido con mejor lectura */
.news-content {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.8;
}

/* Asegurar que las imágenes y videos sean fluidos */
.news-content img,
.news-content iframe,
.news-content video {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 18px auto;
  display: block;
}

/* --- HERO RESPONSIVO --- */
.news-hero__media {
  height: clamp(220px, 45vw, 520px);
}

/* Mantener proporción y evitar que el contenido se corte demasiado */
.news-hero__img,
.news-hero__video {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* --- BREAKPOINTS --- */
@media (max-width: 1024px) {
  .news-article {
    padding: 24px 32px;
  }
}

@media (max-width: 768px) {
  .news-article {
    padding: 20px 20px;
    margin: 0;
  }
  .news-hero__media {
    height: clamp(240px, 60vw, 380px);
  }
  .news-title {
    font-size: clamp(22px, 6vw, 30px);
  }
}

@media (max-width: 480px) {
  .news-article {
    padding: 16px;
  }
  .news-hero__media {
    height: clamp(200px, 68vw, 340px);
  }
  .news-title {
    font-size: 22px;
  }
  .news-content {
    font-size: 15px;
  }
  .news-date {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}