/* ============================
   Base & variables
============================ */
:root{
  --text:#0b1220;
  --text-muted:#5f6368;
  --ink:#2b2b2b;
  --paper:#ffffff;
  --line:#ececec;
  --soft:#f6f7f8;
  --danger-soft:#ffebee;
  --danger:#c62828;
  --shadow-1: 0 6px 18px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --radius-lg:.9rem;
  --radius-md:.75rem;
}

/* Optional reset suave */
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}


/* ============================
   Utilidades de espaciado (equivalentes Bootstrap)
============================ */
.mb-0{margin-bottom:0!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.me-2{margin-right:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}

/* ============================
   Tipografía específica
============================ */
.titulo-main{
  color:var(--text);
  font-weight:700;
  line-height:1.25;
  font-size:clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom:.25rem;
}
.news-lead{
  color:var(--text-muted);
  font-size:clamp(1rem, .95rem + .4vw, 1.15rem);
  margin-bottom:.25rem !important;
}
.news-body{
  color:#333;
  line-height:1.9;
  font-size:clamp(1rem, .98rem + .2vw, 1.08rem);
  text-align:justify;
}
.news-body p{ margin-bottom:1rem; }

/* ============================
   Card (border-0, shadow-sm)
============================ */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.border-0{ border:none!important; }
.shadow-sm{ box-shadow:var(--shadow-1); }
.card .card-body{
  padding:1.25rem;
}
@media (min-width:768px){
  .card .card-body{ padding:1.5rem; }
}
main > header.card{
  overflow:hidden; /* redondeo para imagen */
}

/* ============================
   Badges
============================ */
.badge{
  display:inline-block;
  border-radius:9999px;
  padding:.4rem .65rem;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1;
  font-size:.875rem;
}
.bg-light.text-dark{
  background:var(--soft);
  color:var(--ink);
  border:1px solid var(--line);
}
.bg-danger-soft{
  background:var(--danger-soft);
  color:var(--danger);
  border:1px solid #f7c9cf;
}
.news-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

/* ============================
   Ratio 16:9 nativo
============================ */
.ratio{
  width:100%;
  aspect-ratio:16/9;       /* navegadores modernos */
  background:#f2f2f2;
  position:relative;
}
.ratio > img,
.ratio > iframe,
.ratio > video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Fallback (si necesitas soportar navegadores sin aspect-ratio)
.ratio{ position:relative; height:0; padding-bottom:56.25%; }
.ratio > img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
*/

/* ============================
   Breadcrumb nativo
============================ */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
  gap:.25rem;
  color:#6b7280;
  font-size:.95rem;
}
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li+li::before{
  content:"/"; color:#9aa0a6; margin:0 .5rem;
}
.breadcrumb a{ color:#4b5563; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ============================
   Galería
============================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem;
}
@media (min-width:576px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:992px){ .gallery-grid{ grid-template-columns:repeat(5, 1fr); } }

.thumb{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:.6rem;
  border:1px solid var(--line);
  background:#fafafa;
}
.thumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  transition:transform .25s ease, filter .25s ease;
  display:block;
}
.thumb:hover img{
  transform:scale(1.03);
  filter:contrast(1.02) saturate(1.02);
}

/* ============================
   Botón “volver”
============================ */
.btn{
  display:inline-block;
  cursor:pointer;
  user-select:none;
  border-radius:.6rem;
  padding:.5rem .9rem;
  font-size:1rem;
  line-height:1.2;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline-secondary{
  background:transparent;
  color:#4a4f55;
  border:1px solid #d4d7dc;
}
.btn-outline-secondary:hover{
  background:#eef1f4;
  color:#2b2f33;
  border-color:#c7ccd2;
}