:root{
  --topbar-height: 44px;
  --masthead-height: 160px;
  --cats-height: 52px;
--brand-primary:#155a9b;
  --brand-primary-strong: #0f467a;
  --brand-navy: #0b1e33;
  --brand-accent: #2f76bd;
  --brand-accent-soft: #eaf3fb;
  --page-bg: #f4f8fc;
  --surface: #ffffff;
  --surface-muted: #f7fbff;
  --text: #102236;
  --muted: #5f7287;
  --border: #d9e4ef;
  --shadow-sm: 0 8px 24px rgba(10, 30, 55, 0.06);
  --shadow-md: 0 14px 34px rgba(10, 30, 55, 0.10);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  color: var(--text);
  background:
    linear-gradient(180deg, #edf5fc 0%, #f7fbff 180px, var(--page-bg) 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

a{ color: var(--brand-accent); }
a:hover{ color: var(--brand-primary-strong); }

/* =========================
   TOP BAR
========================= */
.topbar{
  background: linear-gradient(90deg, var(--brand-navy), #123457 70%, var(--brand-primary-strong));
  position: sticky;
  top: 0;
  z-index: 1045;
  min-height: var(--topbar-height);
  box-shadow: 0 6px 18px rgba(6, 20, 35, 0.15);
}

.topbar-pill{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .95;
  color: #fff;
}
.topbar-link{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 12px;
}
.topbar-link:hover{ text-decoration: underline; }
.topbar-brand{
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 700;
  opacity: .95;
}
.icon-link{
  background: none;
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 0;
  display: inline-block;
  font-size: 30px; /* tamaño grande */
  text-decoration: none;
}
.icon-link:hover{
  transform: scale(1.2);
}

/* =========================
   MASTHEAD
========================= */
.masthead{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  position: sticky;
  top: var(--topbar-height);
  z-index: 1040;
}
.masthead-inner{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 14px;
  align-items: center;
  min-height: var(--masthead-height);
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}
.masthead-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.masthead-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.header-search{ width: 100%; }
.header-search--compact{ max-width: 380px; }
.header-search .form-control,
.header-search .input-group-text{
  border-color: var(--border);
  background: #fff;
}
.header-search .form-control{
  border-left: 0;
  box-shadow: none;
}
.header-search .form-control:focus{
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 .2rem rgba(21, 90, 155, .12);
}
.header-search .input-group-text{
  border-right: 0;
  color: var(--brand-primary);
}
@media (max-width: 767.98px){
  .masthead-inner{
    grid-template-columns: 56px 1fr 56px;
  }
  .header-search{ display: none; }
  .masthead-right{ justify-content: flex-end; }
}
.masthead-btn{
  color: var(--brand-primary-strong);
  font-size: 26px;
  line-height: 1;
}
.masthead-btn:hover{ color: var(--brand-navy); }

.brand{
  text-decoration: none;
  color: var(--brand-primary);
  display: inline-block;
}

.brand-logo{
  display:block;
  width: auto;
  height: auto;
  max-height: 152px;
  object-fit: contain;
  margin:0 auto;
}
.brand-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: 1;
}
.brand-subtitle{
  font-size: 11px;
  letter-spacing: .45em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--brand-primary);
}

/* ====== Mobile compact header ====== */
@media (max-width: 767.98px){
  :root{
    --masthead-height: 74px;
  }

  .cats{
    display: none !important;
  }

  .masthead-inner{
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    gap: 8px;
  }

  .brand-logo{
    max-height: 58px;
    max-width: 220px;
  }
}

@media (max-width: 767.98px){
  .offcanvas{
    width: 85vw;
    max-width: 320px;
  }
}

.offcanvas{
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  top: 0;
  bottom: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  z-index: 1064;
}
.offcanvas-header{
  flex: 0 0 auto;
}
.offcanvas-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.offcanvas-backdrop.show{
  z-index: 1055;
}
.offcanvas .list-group-item{
  border-color: var(--border);
}
.offcanvas .list-group-item:hover{
  background: var(--brand-accent-soft);
}

/* =========================
   CATEGORY NAV
========================= */
.cats{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  position: sticky;
  top: calc(var(--topbar-height) + var(--masthead-height));
  z-index: 1035;
}
.cats-nav .nav-link{
  color: var(--text);
  font-size: 13px;
  padding: .5rem .7rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.cats-nav .nav-link:hover{
  text-decoration: none;
  background: var(--brand-accent-soft);
  color: var(--brand-primary-strong);
}
.cats-nav .nav-link.active{
  color: #fff;
  text-decoration: none;
  background: var(--brand-primary);
}

/* =========================
   COMMON
========================= */
.kicker{
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.byline{
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

/* =========================
   LEFT/RIGHT CARDS
========================= */
.news-card{
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}
.news-card:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.news-img{
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: transparent;
  box-shadow: var(--shadow-sm);
}
.news-img img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.news-img:hover img,
.story-img:hover img,
.hero-img:hover img,
.featured-thumb:hover img{
  transform: scale(1.04);
}
.news-body{
  padding-top: 12px;
}
.news-title{
  font-size: 19px;
  line-height: 1.2;
  margin: 0;
  font-weight: 800;
}
.news-title a{
  color: var(--text);
  text-decoration: none;
}
.news-title a:hover{ text-decoration: underline; }

/* =========================
   HERO (centro)
========================= */
.hero{
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 22px;
}
@media (max-width: 991.98px){
  .hero{
    border-left: 0;
    border-right: 0;
    padding: 0;
  }
}

.hero-img{
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  box-shadow: var(--shadow-md);
}
.hero-img img{
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.hero-body{
  padding-top: 16px;
}
.hero-title{
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-title a{
  color: var(--text);
  text-decoration: none;
}
.hero-title a:hover{ text-decoration: underline; }

.hero-meta{
  margin-top: 10px;
  color: #3f5367;
  font-size: 12px;
}
.hero-excerpt{
  margin-top: 10px;
  color: #4e6276;
  font-size: 14px;
  max-width: 62ch;
}

/* =========================
   OPINION BOX
========================= */
.opinion{
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.opinion-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--brand-navy);
}
.opinion-item{
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.opinion-item:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.opinion-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid rgba(21, 90, 155, .12);
}
.opinion-author{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary-strong);
  margin-bottom: 2px;
}
.opinion-link{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  display: inline-block;
}
.opinion-link:hover{ text-decoration: underline; }

/* =========================
   SECCIONES REUTILIZABLES
========================= */
.section-block{
  border-top: 1px solid var(--border);
  padding-top: 18px;
  max-width: 1220px;
  margin: 0 auto;
}

.section-shell--white .section-block{
  background: var(--surface);
  padding: 18px 18px 12px;
  border-radius: 22px;
  border: 1px solid rgba(21, 90, 155, .08);
  box-shadow: var(--shadow-sm);
}

.section-title{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 14px 0;
  color: var(--brand-navy);
}

.section-bottom-line{
  border-bottom: 1px solid var(--border);
  margin-top: 10px;
}

.section-shell--red{ background: transparent; }
.section-shell--red .section-block{
  border-top: 0;
  padding: 18px 18px 12px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--brand-primary-strong), var(--brand-primary));
  box-shadow: var(--shadow-md);
}
.section-shell--red .section-title,
.section-shell--red .story-title a,
.section-shell--red .byline{
  color: #fff;
}
.section-shell--red .kicker{
  color: rgba(255,255,255,.9);
}
.section-shell--red .story-excerpt{
  color: rgba(255,255,255,.92);
}
.section-shell--red .section-bottom-line{
  border-bottom-color: rgba(255,255,255,.35);
}
@media (min-width: 992px){
  .section-shell--red .grid-sep > [class*="col-"]:not(:last-child){
    border-right-color: rgba(255,255,255,.2);
  }
}

.grid-sep > [class*="col-"]{
  padding: 0 16px;
}
@media (min-width: 992px){
  .grid-sep > [class*="col-"]:not(:last-child){
    border-right: 1px solid var(--border);
  }
}

.story-img{
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: var(--shadow-sm);
}
.story-img img{
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.story--tall .story-img img{ height: 210px; }
.story--short .story-img img{ height: 170px; }

.story-title{
  margin: 0;
  line-height: 1.2;
  font-weight: 900;
}
.story-title a{
  color: var(--text);
  text-decoration: none;
}
.story-title a:hover{ text-decoration: underline; }

.story-excerpt{
  font-size: 13px;
  color: #4e6276;
  margin-top: 6px;
}

/* =========================
   LO DESTACADO
========================= */
.featured{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px){
  .featured-top-left,
  .featured-bottom-left{
    border-right: 1px solid var(--border);
  }
}

.featured-top-left{ padding-right: 18px; }
.featured-top-right{ padding-left: 18px; }

.featured-bottom-left{ padding-right: 18px; }
.featured-bottom-right{ padding-left: 18px; }

.featured-bottom{ margin-top: 44px; }

.featured-hero-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2.2vw, 32px);
}
.featured-hero-title a{
  color: var(--text);
  text-decoration: none;
}
.featured-hero-title a:hover{ text-decoration: underline; }

.featured-hero-excerpt{
  margin: 8px 0 0;
  color: #4e6276;
  font-size: 12px;
  line-height: 1.35;
  max-width: 68ch;
}

.featured-hero-img img{ height: 255px; }
@media (min-width: 992px){
  .featured-hero-img img{ height: 270px; }
}

.featured-hero-img--bottom img{ height: 240px; }
@media (min-width: 992px){
  .featured-hero-img--bottom img{ height: 260px; }
}

.featured-list{
  border-top: 1px solid var(--border);
}
.featured-item{
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.featured-item:last-child{ border-bottom: 0; }

.featured-thumb{
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  display: block;
  box-shadow: var(--shadow-sm);
}
.featured-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.featured-item-title{
  margin: 0;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
}
.featured-item-title a{
  color: var(--text);
  text-decoration: none;
}
.featured-item-title a:hover{ text-decoration: underline; }

.featured-mini-card{ padding-bottom: 18px; }
.featured-mini-card:last-child{ padding-bottom: 0; }

.featured-mini-img img{ height: 110px; }
@media (min-width: 992px){
  .featured-mini-img img{ height: 115px; }
}

.featured-mini-title{
  margin: 0;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}
.featured-mini-title a{
  color: var(--text);
  text-decoration: none;
}
.featured-mini-title a:hover{ text-decoration: underline; }

@media (max-width: 991.98px){
  .featured{ max-width: none; }
  .featured-top-left,
  .featured-top-right,
  .featured-bottom-left,
  .featured-bottom-right{
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
  .featured-bottom{ margin-top: 28px; }
}

body {
  display: flex;
  margin: 0;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

#main-cat{
  flex: 1;
  max-width: 1220px;
  margin: 0 auto;
}

.site-footer{
  background: linear-gradient(135deg, var(--brand-navy), #143a61 70%, var(--brand-primary));
  color: #fff;
  margin-top: auto;
  box-shadow: 0 -10px 28px rgba(10, 30, 55, 0.08);
}

.site-footer a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.site-footer a:hover{
  color: #fff;
  text-decoration: underline;
}

/* =========================
   NOTICIA
========================= */
article img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
article hr{
  border: 0;
  border-top: 1px solid rgba(16,34,54,.12);
  margin: 28px 0;
}
article h2{
  font-weight: 800;
  margin-top: 26px;
  margin-bottom: 12px;
  line-height: 1.2;
  color: var(--brand-navy);
}
article h3{
  font-weight: 750;
  margin-top: 22px;
  margin-bottom: 10px;
  line-height: 1.25;
  color: var(--brand-primary-strong);
}
article figure{ margin: 18px 0; }
article figcaption{
  font-size: .9rem;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
}

hr { background-color: var(--border); }
blockquote{
  border-left: 4px solid var(--brand-accent);
  margin: 1.25rem 0;
  padding-left: 1rem;
  color: #33485d;
}
.noticia-img {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.noticia-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   AJUSTES GENERALES EXTRA
========================= */
.container-fluid{
  max-width: 1400px;
}

.card,
.table,
.alert,
.form-control,
.form-select,
.btn,
.input-group-text{
  border-radius: 12px;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(21, 90, 155, .45);
  box-shadow: 0 0 0 .2rem rgba(21, 90, 155, .12);
}

.btn-primary{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover{
  background-color: var(--brand-primary-strong);
  border-color: var(--brand-primary-strong);
}


/* ===== Chrome fijo global ===== */
.site-chrome-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1060;
}

.site-chrome-fixed .topbar,
.site-chrome-fixed .masthead,
.site-chrome-fixed .cats{
  position: relative;
  top: auto;
}

.site-chrome-fixed .topbar{ z-index: 1063; }
.site-chrome-fixed .masthead{ z-index: 1062; }
.site-chrome-fixed .cats{ z-index: 1061; }

body{
  padding-top: calc(var(--topbar-height) + var(--masthead-height) + var(--cats-height));
}

@media (max-width: 767.98px){
  body{
    padding-top: calc(var(--topbar-height) + var(--masthead-height));
  }
}


#share-fb i { color: #1877F2 !important; }
#share-wa i { color: #25D366 !important; }
#share-x i { color: #000000 !important; }