/* ========= PALETA INSTITUCIONAL (Fiestas Barbastro 2025) ========= */
:root{
  /* Base*/
  --azul:#2f4f88;
  --verde:#2b9c70;
  --mostaza:#d8a738;
  --rojo:#c44132;

  --papel:#f7f5ef;
  --tinta:#2d2d2d;
  --gris-suave:#d9d7d2;

  --radius:0px;
  --sombra:0 4px 12px rgba(0,0,0,.08);

  /* Semánticas (por si luego cambiamos la paleta sin tocar componentes) */
  --bg:var(--papel);
  --text:var(--tinta);
  --brand:var(--azul);
  --accent:var(--mostaza);
  --success:var(--verde);
  --danger:var(--rojo);
  --border:var(--gris-suave);
}

/* ========= BASE ========= */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;border-radius:calc(var(--radius) / 2)}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}

/* ========= TIPOGRAFÍA ========= */
h1,h2,h3,h4{font-weight:700;line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(2rem,2.6vw,2.6rem)}
h2{font-size:clamp(1.6rem,2vw,2rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.lead{font-size:1.125rem;opacity:.9}

/* ========= CONTENEDORES ========= */
.container-narrow{max-width:960px;margin:auto;padding:0 1rem}
.section{padding:3.5rem 0;border-top:1px solid var(--border)}

/* ========= BOTONES (vintage sobrio) ========= */
.btn{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  box-shadow:var(--sombra);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--primario{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
}
.btn--primario:hover{filter:brightness(1.05)}

.btn--verde{
  background:var(--success);
  color:#fff;
  border-color:transparent;
}
.btn--borde{
  background:transparent;
  border-color:var(--brand);
  color:var(--brand);
}

 /*========= TARJETAS ========= */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.card__body{padding:1rem}
.card__meta{font-size:.85rem;color:#666}



/* ========= BANNERS EDITORIALES ========= */
/* Banner Editorial - base */
.banner-editorial {
  color: #fff;
  padding: 1.8rem 2rem;
  margin: 0 0 0rem;
  border-radius: 0;
}

.banner-editorial .banner-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: #fff;
}

.banner-editorial p {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0.3rem 0;
}

/* Variantes por color (usamos tu paleta institucional) */
.banner-editorial.verde   { background: var(--verde); }
.banner-editorial.mostaza { background: var(--mostaza); }
.banner-editorial.rojo    { background: var(--rojo); }
.banner-editorial.azul    { background: var(--azul); }



/* ========= GRID BLOG (Joomla formato blog) ========= */
/* Contenedor estándar de listados en Cassiopeia */
.blog-items,
.items-leading,
.items-more{
  display:grid;
  gap:1.25rem;
}
/* 1 destacado en “leading”, resto en grid 2/3 col */
.items-leading{grid-template-columns:1fr}
.items-leading .item{grid-column:1;}

/* Resto de artículos */
.blog-items{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.blog-items .item,
.items-more .item{
  list-style:none;
}
.blog-items .item .item-content,
.items-leading .item .item-content{
  composes: card__body;
}
.blog-items .item,
.items-leading .item{
  composes: card;
}

/* Imágenes destacadas */
.blog-items .item img,
.items-leading .item img{
  width:100%;height:220px;object-fit:cover;display:block;
}

/* ========= FOOTER ========= */
.footer{
  background:var(--papel);
  border-top:4px solid var(--danger);
  color:var(--text);
}
.footer .grid-child{padding:1.25rem 0}
.footer a{color:var(--brand)}
.footer a:hover{text-decoration:underline}

/* ========= UTILIDADES ========= */
.badge{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:.35rem;
  background:color-mix(in oklab, var(--mostaza) 25%, #fff);
  border:1px solid color-mix(in oklab, var(--mostaza) 40%, var(--border));
  font-size:.85rem;
}

/* Separadores finos “imprenta” */
.hr{
  height:1px;background:var(--border);
  margin:1.5rem 0;position:relative;
}
.hr--roja{background:var(--danger)}
.hr--mostaza{background:var(--mostaza)}

/* ===== HERO con vídeo ===== */
.hero-archivo{
  position: relative;
  width: 100%;
  height: 500px;                /* ajusta a tu gusto */
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 0;
}

/* Vídeo a cover */
.hero-archivo__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Velo para legibilidad del texto */
.hero-archivo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,.50));
  z-index: 1;
}

/* Contenido */
.hero-archivo__inner{
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 2rem 1rem;
  text-align: center;
  color: #fff;
}

.hero-ttl{
  font-size: 2.4rem;
  margin: 0 0 .6rem;
  font-weight: 800;
}

.hero-sub{
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 1.2rem;
  opacity: .95;
}

/* CTAs del hero */
.hero-archivo__actions{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
}

.btn-hero{
  display:inline-block;
  padding:.7rem 1.3rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

/* usa tu verde institucional para consistencia */
.btn-hero--solid{
  background: var(--verde);
  color:#fff !important;
  border:2px solid var(--verde);
}
.btn-hero--solid:hover{
  background: transparent;
  color: #fff !important;
  border-color:#fff;
  transform: translateY(-2px);
}

.btn-hero--outline{
  background: transparent;
  color:#fff !important;
  border:2px solid #fff;
}
.btn-hero--outline:hover{
  background:#fff; color: var(--verde) !important;
  transform: translateY(-2px);
}

/* Full-bleed en Cassiopeia (módulo con clase “hero-full”) */
.moduletable.hero-full{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  padding: 0; border: 0;
}
.container-below-top, .below-top, .container-below-top .moduletable.hero-full{
  padding:0 !important; margin:0 !important;
}

/* Responsive */
@media (max-width: 768px){
  .hero-archivo{ height: 300px; }
  .hero-ttl{ font-size: 1.9rem; }
  .hero-sub{ font-size: 1rem; }
}

/* Accesibilidad: usuarios que prefieren menos movimiento → pausa vídeo */
@media (prefers-reduced-motion: reduce){
  .hero-archivo__video{ animation: none; }
  .hero-archivo__video{ display:none; }
  .hero-archivo{ background: #1d2d48 url('/images/destacadas/inicio.jpg') center/cover no-repeat; }
}




.fondos-cards { margin-top: .5rem; }
.card-fondos{border:0;background:var(--papel);box-shadow:var(--sombra);border-radius:12px;overflow:hidden;position:relative}
.card-fondos::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--verde)}
.card-fondos .img-wrap{overflow:hidden}
.card-fondos img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .45s ease,filter .45s ease}
.card-fondos .card-body{padding:1.25rem 1.25rem 1.5rem}
.card-fondos .card-title{font-size:1.35rem;margin:0 0 .35rem;color:var(--tinta);border-left:6px solid var(--verde);padding-left:.5rem}
.card-fondos .card-text{margin:0;color:#5a5a5a}
.card-fondos:hover{box-shadow:0 10px 24px rgba(0,0,0,.12);transform:translateY(-2px);transition:transform .25s ease,box-shadow .25s ease}
.card-fondos:hover img{transform:scale(1.06);filter:saturate(1.05) contrast(1.02)}

/* Sección portada Archivo – estilos institucionales */
.mod-archivo-home{
  background: var(--papel);
  border-top: 6px solid var(--brand); /* azul institucional */
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 2rem;
  margin: 2rem 0;
}
.mod-archivo-head .section-title{
  color: var(--brand);
  font-size: 1.9rem;
  margin: 0 0 1rem;
  font-weight: 800;
}

/* Grid responsive 2 columnas (principal + aside) */
.mod-archivo-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 992px){
  .mod-archivo-grid{ grid-template-columns: 1fr; }
}

/* Texto y listas */
.mod-archivo-main p{ line-height: 1.7; margin: .75rem 0; color: var(--tinta); }
.mod-archivo-main h3{
  margin-top: 1.25rem;
  font-size: 1.25rem;
  border-left: 6px solid var(--verde);
  padding-left: .5rem;
  color: var(--tinta);
}
.mod-archivo-main .bullets{ margin: .5rem 0 1rem 1.2rem; }
.mod-archivo-main .bullets li{ margin:.25rem 0; }

/* Aside con dato destacado */
.mod-archivo-aside .stat-card{
  background: #fff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--verde);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: var(--sombra);
  margin-bottom: .75rem;
}
.stat-num{ font-size: 2rem; font-weight: 800; color: var(--verde); line-height: 1; }
.stat-txt{ color: #5a5a5a; margin-top: .25rem; }
.mod-archivo-aside .note{
  background: rgba(43,156,112,.08);
  border: 1px solid rgba(43,156,112,.25);
  color: #2b6f56;
  border-radius: 10px;
  padding: .75rem 1rem;
}

/* Botón sólido verde */
.btn--solid {
  background: var(--verde);
  color: #fff !important;
  border: 2px solid var(--verde);
  transition: all .3s ease;
}
.btn--solid:hover {
  background: transparent;
  color: var(--verde) !important;
  border: 2px solid var(--verde);
}

/* Botón outline verde */
.btn--outline {
  background: transparent;
  color: var(--verde) !important;
  border: 2px solid var(--verde);
  transition: all .3s ease;
}
.btn--outline:hover {
  background: transparent; /* no cambia */
  color: var(--verde) !important;
  border: 2px solid var(--verde);
}

/*prueba destacados inicio*/
/* ===== Post-its con cinta (para .secciones-destacadas) ===== */

/* alturas iguales */
.secciones-destacadas .col-md-4{ display:flex }
.secciones-destacadas .col-md-4 > .tarjeta{ flex:1 }

/* BASE post-it (SIN cinta por defecto) */
.secciones-destacadas .tarjeta{
  position:relative; display:block; width:100%;
  background:#fff8c6; color:#2a2a2a;
  border:0; border-radius:8px;
  box-shadow:0 10px 18px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.04) inset;
  transform:rotate(-1.1deg);
  transition:transform .2s, box-shadow .2s;
  padding:1rem .95rem .95rem;
  isolation:isolate;
}

/* IMPORTANTÍSIMO: NO hay ::before aquí */
.secciones-destacadas .tarjeta::before,
.secciones-destacadas .tarjeta::after{ content:none !important; }

/* enlace y texto */
.secciones-destacadas .tarjeta > a{ display:block; color:inherit !important; text-decoration:none !important; }
.secciones-destacadas .tarjeta h3{ margin:0 0 .25rem; font-weight:800; font-size:1.1rem; }
.secciones-destacadas .tarjeta p{ margin:0; font-size:.95rem; line-height:1.45; opacity:.95; }

/* acento lateral */
.secciones-destacadas .tarjeta.sd--verde  { border-left:7px solid var(--verde); }
.secciones-destacadas .tarjeta.sd--mostaza{ border-left:7px solid var(--mostaza); }
.secciones-destacadas .tarjeta.sd--azul   { border-left:7px solid var(--azul); }
.secciones-destacadas .tarjeta.sd--roja   { border-left:7px solid var(--rojo); }

/* hover */
.secciones-destacadas .tarjeta:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 16px 28px rgba(0,0,0,.16), 0 1px 0 rgba(0,0,0,.05) inset;
}

/* ——— Variantes de cinta (SOLO si hay clase) ——— */
.secciones-destacadas .tarjeta.cinta--centro::before{
  content:""; position:absolute; top:-10px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:74px; height:20px; border-radius:2px;
  background:rgba(255,255,255,.66);
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset, 0 2px 6px rgba(0,0,0,.08);
  z-index:2;
}
.secciones-destacadas .tarjeta.cinta--diagonal::before{
  content:""; position:absolute; top:-8px; left:-8px;
  width:62px; height:18px; transform:rotate(-14deg);
  background:rgba(255,255,255,.70); border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.09) inset, 0 2px 6px rgba(0,0,0,.10);
  z-index:2;
}
.secciones-destacadas .tarjeta.cinta--diagonal::after{
  content:""; position:absolute; top:-6px; right:-10px;
  width:54px; height:16px; transform:rotate(11deg);
  background:rgba(255,255,255,.58); border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset, 0 2px 6px rgba(0,0,0,.08);
  z-index:2;
}

/* descansos visuales */
.secciones-destacadas .tarjeta.papel--blanco      { background:#fffef9; }
.secciones-destacadas .tarjeta.papel--gris        { background:#f2efe7; }
.secciones-destacadas .tarjeta.papel--verde-claro { background: color-mix(in oklab, var(--verde) 8%, #fff); }

/* accesibilidad y responsive */
.secciones-destacadas .tarjeta > a:focus-visible{ outline:3px solid var(--mostaza); outline-offset:4px; border-radius:6px; }
@media (max-width:576px){ .secciones-destacadas .tarjeta{ transform:none; } }

/* ===== CABECERA — Hero style sobre fondo azul ===== */
.hdr{ position:sticky; top:0; z-index:1000; overflow:visible; }

/* Banda azul grande (degradado sutil) */
.hdr--A .hdrA__band{
  height: 110px;
  
  border-bottom:none;
  position: relative;
}

/* Barra interna: se coloca encima de la banda azul */
.hdr--A .hdrA__bar{
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: min(1200px, 100%);
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;  /* separa logo a la izq. y menú a la der. */
  margin-left: -50px;
      
  max-width: 100%; 
}

/* Marca: sello + texto a la izquierda */
.hdr--A .brand{
  display: flex; align-items: center; gap: 0 rem;
  color: #fff; text-decoration: none;
  white-space: nowrap;
   
}

/* Sello grande “saliéndose” por arriba */
.hdr--A .brand__badge{ line-height: 0; margin-top: -14px; }
.hdr--A .brand__badge img{ height: 150px; width: auto; display: block; }

/* Texto marca */
.hdr--A .brand__text{ display: flex; gap: .5rem; align-items: baseline; }
.hdr--A .brand__text strong{
  font-weight: 900; letter-spacing: .06em; color:#fff;
}
.hdr--A .brand__text em{
  font-style: normal; color:#fff; opacity:.95; font-weight:700;
}

/* Menú a la derecha */
.hdr--A .navA{ margin-left: auto; }
.hdr--A .navA ul{
  display:flex; gap: 2rem; margin:0; padding:0; list-style:none;
}

/* Enlaces: blancos, mayúsculas, tipografía del hero */
.hdr--A .navA a{
  color:#fff; text-decoration:none;
  text-transform: uppercase;
  font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");     /* igual que el hero */
  font-weight: 700; letter-spacing:.02em;
  line-height: 1; padding:.25rem 0; position:relative;
  transition: opacity .2s ease;
}
.hdr--A .navA a:hover{ opacity:.95; }

/* Subrayado blanco en hover/activo */
.hdr--A .navA a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:#fff; transition: width .22s ease; border-radius:2px;
}
.hdr--A .navA a:hover::after,
.hdr--A .navA li.current > a::after,
.hdr--A .navA li.active  > a::after{
  width:100%;
}

/* Responsivo */
@media (max-width: 980px){
  .hdr--A .brand__badge img{ height: 84px; }
  .hdr--A .navA ul{ gap: 1.2rem; }
}
@media (max-width: 760px){
  .hdr--A .hdrA__band{ height: 130px; }               /* un poco más de alto */
  .hdr--A .hdrA__bar{ flex-wrap: wrap; justify-content:center; }
  .hdr--A .navA{ width:100%; order:2; }
  .hdr--A .navA ul{ justify-content:center; }
  .hdr--A .brand{ order:1; width:100%; justify-content:center; }
}
/* Contenedor del texto del logo */
.brand__text {
  display: flex;
  flex-direction: column;   /* fuerza a 2 líneas */
  line-height: 1.1;
}

/* Título principal (BARBASTRO) */
.brand__title {
  font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");  /* o la que uses en el hero */
  font-weight: 900;
  font-size: 1.5rem;           /* hazlo más grande, ajusta al gusto */
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

/* Subtítulo (Archivo Municipal) */
.brand__subtitle {
  font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); 
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  opacity: .95;
}

/* === Footer base === */
.foot-archivo{ background: var(--papel); color: var(--tinta); }
.foot__inner{ 
  max-width: 1200px; margin:auto; padding: 2rem 1rem;
  display:grid; gap:2rem;
}
.foot__brand .brand-archivo{ color: inherit; text-decoration: none; display:flex; gap:.6rem; align-items:center; }
.foot__brand .brand-archivo__mark{ height:48px }
.foot__brand .brand-archivo__title{ font-weight:900; letter-spacing:.06em }
.foot__brand .brand-archivo__sub{ font-weight:700; color: var(--azul) }

.foot__contact{ list-style:none; margin: .5rem 0 1rem; padding:0 }
.foot__contact li{ margin:.25rem 0 }

/* mapa web */
.foot__sitemap{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }
.foot__sitemap h3, .foot__notes h3{ font-size:1.05rem; margin:0 0 .5rem }
.foot__sitemap ul{ list-style:none; margin:0; padding:0 }
.foot__sitemap li{ margin:.25rem 0 }
.foot__sitemap a{ text-decoration:none; color: var(--azul) }
.foot__sitemap a:hover{ text-decoration:underline }

/* barra legal */
.foot__legal{ border-top: 4px solid var(--danger); background: #fff }
.foot__legal-inner{
  max-width:1200px; margin:auto; padding:.85rem 1rem;
  display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
.foot__legal a{ color: var(--azul); text-decoration:none; margin-right:1rem }
.foot__legal a:hover{ text-decoration:underline }

/* Responsive */
@media (max-width: 900px){
  .foot__inner{ grid-template-columns:1fr }
  .foot__sitemap{ grid-template-columns:1fr }
}

/* === Opción A ajustes === */
.footA .foot__inner{ grid-template-columns: 1.2fr 1fr 1fr }

/* === Opción B (banda azul) === */
.footB__band{
  background: var(--azul); color:#fff;
  border-top: 6px solid var(--danger);
  padding: 1rem 1rem;
  display:flex; align-items:center; gap:1rem; max-width:100%;
}
.footB__band .brand-archivo__mark{ height:44px }
.footB__band .brand-archivo__sub{ color:#fff; opacity:.9 }
.footB__quick{ margin-left:auto; display:flex; gap:1.2rem }
.footB__quick a{ color:#fff; text-decoration:none; font-weight:700; position:relative; }
.footB__quick a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#fff; transition:width .2s }
.footB__quick a:hover::after{ width:100% }
.footB__legal{ border-top:0 } /* ya tenemos rojo arriba */

/* === Opción C (editorial) === */
.footC__hero{
  background: var(--azul); color:#fff; text-align:center; padding: 2rem 1rem; 
  border-top:6px solid var(--danger);
}
.footC__hero h2{ margin:0 0 .5rem; font-size:1.6rem }
.footC__grid{ grid-template-columns: 1.5fr 1fr }
.cols-2{ columns: 2; gap: 2rem; list-style:none; margin:0; padding:0 }
.cols-2 li{ break-inside: avoid; margin:.25rem 0 }
@media (max-width: 900px){ .footC__grid{ grid-template-columns:1fr } .cols-2{ columns:1 } }
/* Hace que este módulo se comporte como el header full-width */
.moduletable.foot-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: 0;
  border: 0;
}
/* === BOTONES INSTITUCIONALES === */
.btn,
button,
input[type="submit"] {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;                /* menos redondeado */
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  background: var(--verde);
  color: #fff !important;
  border: 2px solid var(--verde);
  cursor: pointer;
}

/* Hover → transparente pero mantiene verde */
.btn:hover,
button:hover,
input[type="submit"]:hover {
  background: transparent;
  color: var(--verde) !important;
  border: 2px solid var(--verde);
  transform: translateY(-2px);
}

/* Focus accesible */
.btn:focus-visible {
  outline: 3px solid var(--mostaza);
  outline-offset: 3px;
}

/*misma altura grid*/
.blog-items .item { transition: transform .18s ease, box-shadow .18s ease; }
.blog-items .item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* ——— EXPO BANDOS – ajuste fuerte para vista Blog ——— */

/* Títulos más pequeños (ganando especificidad) */
.blog .item .item-title,
.blog .item .item-title a,
.blog .page-header h2,
.blog .page-header h2 a {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  margin: 0 0 .55rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Miniaturas con altura fija y recorte suave (si quieres recorte) */
.blog .item-image img,
.blog .item figure img,
.blog .item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Tarjeta limpia y consistente */
.blog .item {
  background: #fff;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease

  /* ===== CABECERA: en móvil NO usamos banda+barra absoluta (evita que el menú se monte sobre el hero) ===== */
@media (max-width: 991.98px){

  /* La cabecera pasa a ser el “fondo azul” */
  .hdr--A{
    background: linear-gradient(180deg, #1d2d48, #2f4f88);
  }

  /* La banda deja de mandar alturas */
  .hdr--A .hdrA__band{
    display:none !important;
  }

  /* La barra deja de ser absoluta: ahora es flujo normal y crece */
  .hdr--A .hdrA__bar{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: .75rem 16px 1rem !important;

    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:.5rem !important;
  }

  /* Logo más pequeño */
  .hdr--A .brand__badge{
    margin-top:-6px !important;
  }
  .hdr--A .brand__badge img{
    height: 92px !important;
    width: auto !important;
  }
  .hdr--A .brand__badge .px-4{
    padding-left:.25rem !important;
    padding-right:.25rem !important;
  }

  /* Menú debajo, dentro del azul */
  .hdr--A .navA{
    width:100% !important;
    margin-left:0 !important;
  }
  .hdr--A .navA ul{
    margin:.25rem 0 0 !important;
    padding:0 !important;
    list-style:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important; /* derecha */
    gap:.35rem !important;
  }
  .hdr--A .navA a{
    font-size:.95rem !important;
    padding:.15rem 0 !important;
  }
}