/*
Theme Name:  Digesto Rufino
Theme URI:   https://digesto.infoconectados.com
Description: Tema oficial del Digesto Municipal del H. Concejo Deliberante de Rufino, Santa Fe. Diseñado por InfoConectados.
Author:      InfoConectados
Version:     1.0.0
Text Domain: digesto-rufino
*/

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --azul:       #0d1f35;
  --azul-medio: #1a3a5c;
  --celeste:    #2176ae;
  --celeste-vivo: #4a9fd4;
  --celeste-claro: #a8d8f0;
  --sol:        #f4c430;
  --sol-oscuro: #d4a418;
  --blanco:     #f4f0e8;
  --crema:      #faf7f2;
  --borde:      #e0d8c8;
  --texto:      #1a2030;
  --texto-suave:#4a5060;
  --rojo:       #c0392b;
  --radio:      2px;
  --sombra:     0 2px 16px rgba(13,31,53,.10);
  --sombra-lg:  0 8px 40px rgba(13,31,53,.16);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  background: var(--crema);
  color: var(--texto);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--celeste); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azul); }

img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--azul);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 18px; }
h5 { font-size: 15px; }

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--celeste);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--celeste);
  flex-shrink: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1320px; }

/* ============================================================
   FRANJAS BANDERA
   ============================================================ */
.franja-bandera {
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    var(--celeste-vivo) 0 33.33%,
    #fff 33.33% 66.66%,
    var(--celeste-vivo) 66.66% 100%
  );
}

/* ============================================================
   BARRA INSTITUCIONAL
   ============================================================ */
.barra-institucional {
  background: var(--azul);
  padding: 6px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.barra-institucional__texto {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.barra-institucional__accesos {
  display: flex;
  gap: 18px;
  align-items: center;
}

.barra-institucional__accesos a {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--celeste-claro);
  transition: color .2s;
}
.barra-institucional__accesos a:hover { color: #fff; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--azul);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--sombra);
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 28px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__escudo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.site-logo__texto { line-height: 1.2; }

.site-logo__nombre {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: .3px;
  display: block;
}

.site-logo__sub {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--celeste);
  display: block;
  margin-top: 2px;
}

/* Nav */
.site-nav { display: flex; align-items: stretch; }

.site-nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--azul);
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all .2s;
}

.site-nav a:hover,
.site-nav a.current-page,
.site-nav a.current-menu-item {
  color: var(--celeste);
  border-bottom-color: var(--celeste);
}

.site-nav a.nav-cta {
  background: var(--celeste);
  color: #fff;
  margin: 10px 0 10px 8px;
  border-bottom: none;
  border-radius: var(--radio);
  padding: 0 20px;
}
.site-nav a.nav-cta:hover { background: var(--azul); color: #fff; border-bottom-color: transparent; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 0;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--azul);
  transition: all .25s;
}

/* ============================================================
   HERO
   ============================================================ */
.site-hero {
  background: var(--azul);
  padding: 80px 28px 72px;
  position: relative;
  overflow: hidden;
}

.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(74,159,212,.04) 40px,
    rgba(74,159,212,.04) 42px
  );
}

.site-hero__bandera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: .06;
  pointer-events: none;
}
.site-hero__franja { flex: 1; }
.site-hero__franja:nth-child(1),
.site-hero__franja:nth-child(3) { background: var(--celeste-vivo); }
.site-hero__franja:nth-child(2) { background: #fff; flex: 1.2; }

.site-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.site-hero__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.site-hero__kicker span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--celeste-claro);
}
.site-hero__kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--celeste-vivo);
  flex-shrink: 0;
}

.site-hero__title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(36px, 5vw, 58px);
  color: #fff;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 18px;
}
.site-hero__title em { font-style: italic; color: var(--sol); }

.site-hero__desc {
  font-size: 16px;
  color: rgba(255,255,255,.55);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.8;
}

.site-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }

.site-hero__stats {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--celeste);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 200px;
}

.stat-item {}
.stat-item__num {
  font-family: 'Libre Baskerville', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--sol);
  line-height: 1;
  display: block;
}
.stat-item__lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: block;
  margin-top: 4px;
}

/* ============================================================
   FRANJA INFO
   ============================================================ */
.franja-info {
  background: var(--celeste);
  padding: 14px 28px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.franja-info__item {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: 8px;
}
.franja-info__item strong { color: #fff; }
.franja-info__item::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--sol);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radio);
  border: none;
  cursor: pointer;
  transition: all .22s;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--celeste);
  color: #fff;
}
.btn--primary:hover {
  background: var(--azul);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(33,118,174,.4);
}

.btn--outline {
  background: transparent;
  color: rgba(255,255,255,.75);
  border: 2px solid rgba(255,255,255,.2);
}
.btn--outline:hover {
  border-color: var(--celeste-vivo);
  color: var(--celeste-claro);
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: transparent;
  color: var(--celeste);
  border: 2px solid var(--celeste);
}
.btn--outline-dark:hover {
  background: var(--celeste);
  color: #fff;
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.site-main {
  padding: 60px 0 80px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.content-area {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 28px;
}

.content-area--full {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 28px;
}

/* ============================================================
   WIDGETS / SIDEBAR
   ============================================================ */
.widget {
  background: #fff;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--celeste);
  padding: 24px;
  margin-bottom: 24px;
}

.widget-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--celeste);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 18px;
}

.widget ul li {
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--texto-suave); }
.widget ul li a:hover { color: var(--celeste); }

/* ============================================================
   CARDS / POSTS
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.post-card {
  background: #fff;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--celeste);
  overflow: hidden;
  transition: all .22s;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-top-color: var(--sol);
}

.post-card__img { aspect-ratio: 16/9; overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-card__img img { transform: scale(1.04); }

.post-card__body { padding: 20px 22px 22px; }

.post-card__cat {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--celeste);
  margin-bottom: 8px;
  display: block;
}

.post-card__title {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px;
  color: var(--azul);
  line-height: 1.35;
  margin-bottom: 10px;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--celeste); }

.post-card__excerpt {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.7;
  margin-bottom: 16px;
}

.post-card__meta {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.entry-header {
  background: var(--azul);
  padding: 52px 60px;
  margin-bottom: 0;
}

.entry-header .entry-cat {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--celeste-claro);
  display: block;
  margin-bottom: 12px;
}

.entry-header .entry-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(24px, 4vw, 38px);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 16px;
  max-width: 720px;
}

.entry-header .entry-meta {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.entry-content {
  background: #fff;
  border: 1px solid var(--borde);
  padding: 48px 52px;
  font-size: 16px;
  line-height: 1.85;
  color: #2a3040;
}

.entry-content h2,
.entry-content h3 { margin: 1.8em 0 .6em; }

.entry-content p  { margin-bottom: 1.3em; }

.entry-content blockquote {
  border-left: 4px solid var(--celeste);
  padding: 16px 24px;
  background: #edf5fb;
  margin: 24px 0;
  font-style: italic;
  color: var(--azul);
}

.entry-content a { color: var(--celeste); border-bottom: 1px solid rgba(33,118,174,.3); }
.entry-content a:hover { border-bottom-color: var(--celeste); }

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 32px 0 0;
  flex-wrap: wrap;
}

.page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  border-radius: var(--radio);
  transition: all .18s;
  background: #fff;
}
.page-numbers:hover,
.page-numbers.current {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: var(--azul-medio);
  padding: 10px 28px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a, .breadcrumb span {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.breadcrumb a:hover { color: var(--celeste-claro); }
.breadcrumb .sep { color: rgba(255,255,255,.2); }
.breadcrumb .current { color: rgba(255,255,255,.75); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #07111f;
  border-top: 4px solid var(--celeste);
}

.site-footer__body {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 56px 28px 36px;
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer-marca__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-marca__nombre {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  display: block;
}
.footer-marca__sub {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--celeste-vivo);
  display: block;
}
.footer-marca__desc {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  line-height: 1.7;
  margin-bottom: 18px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.footer-social a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(74,159,212,.25);
  background: rgba(74,159,212,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: var(--radio);
  transition: all .2s;
  text-decoration: none;
}
.footer-social a:hover {
  border-color: var(--celeste-vivo);
  background: rgba(74,159,212,.18);
}

.footer-col h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--celeste-vivo);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
  transition: color .18s;
}
.footer-col a:hover { color: rgba(255,255,255,.75); }

.site-footer__base {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 28px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer__copy {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.18);
}
.site-footer__copy a { color: var(--celeste-vivo); }

/* ============================================================
   MISC UTILS
   ============================================================ */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .site-footer__body { grid-template-columns: 1fr 1fr; }
  .site-hero__inner  { grid-template-columns: 1fr; }
  .site-hero__stats  { display: none; }
}

@media (max-width: 768px) {
  .barra-institucional { display: none; }
  .site-header__inner  { padding: 0 18px; }
  .site-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--borde); box-shadow: var(--sombra-lg); padding: 16px 0; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 24px; border-bottom: none; margin-bottom: 0; border-bottom: 1px solid var(--borde) !important; }
  .site-nav a.nav-cta { margin: 8px 16px; }
  .nav-toggle { display: flex; }
  .content-area { grid-template-columns: 1fr; }
  .entry-header  { padding: 36px 20px; }
  .entry-content { padding: 28px 20px; }
  .site-footer__body { grid-template-columns: 1fr; gap: 28px; }
}