/* =========================================================
   ARTÍCULOS — hoja pulida y sin duplicados
   - Fix jitter loader (scrollbar-gutter + spinner fijo)
   - Estructura limpia por secciones
   ========================================================= */


/* ---------- 1) Tokens ---------- */
:root{
  /* Colores */
  --color-principal: #032A53;
  --color-secundario: #f8f8f8;
  --color-texto: #0A0C1C;
  --color-texto-secundario: #97989F;
  --color-hover: #e0e0e0;
  --color-fondo: #FFFFFF;
  --color-borde: #E8E8EA;
  --color-paginacion: #f5f5f5;
  --color-paginacion-hover: #e0e0e0;
  --color-paginacion-activa: #032A53;
  --color-boton-reset-hover: #e0e0e0;

  /* Tamaños */
  --tamano-h1: 3.1rem;
  --tamano-h1-movil: 2rem;
  --tamano-texto-info: 1.2rem;
  --tamano-texto-info-movil: 1rem;
  --tamano-boton: 16px;
  --tamano-link: 18px;
  --tamano-paginacion: 14px;
  --tamano-reset-button: 16px;
  --tamano-featured-title: 24px;
  --tamano-featured-category: 14px;
  --tamano-featured-meta: 16px;
  --tamano-featured-title-movil: 1.6rem;
  --tamano-featured-category-movil: 0.9rem;
}

/* ---------- 2) Reset básico ---------- */
*,*::before,*::after{ box-sizing: border-box; }
body{
  font-family: 'Work Sans', sans-serif;
  margin:0; padding:0;
  background: var(--color-fondo);
  color: var(--color-texto);
}

/* ---------- 3) Título ---------- */
.h1-articulos{
  text-align:center;
  font-size: var(--tamano-h1);
  color: var(--color-principal);
  margin:20px 0;
  font-weight:800;
  text-transform:uppercase;
}

/* ---------- 4) Buscador (desktop + móvil) ---------- */
.art-searchbar.container{
  max-width:1160px;
  margin:0 auto 18px;
  padding:0 12px;
}
.art-search{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 0 3%;
}
.art-search__input{
  flex:1 1 auto;
  height:44px;
  padding:0 14px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:14px; line-height:1;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .2s, box-shadow .2s;
}
.art-search__input::placeholder{ color:#8a93a2; }
.art-search__input:focus{
  outline:none;
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(30,111,255,.15);
}
.art-search__btn{
  flex:0 0 auto;
  height:44px;
  padding:0 16px;
  border:0; border-radius:10px;
  background:#1677ff; color:#fff;
  font-weight:600; cursor:pointer;
  transition:transform .02s ease, filter .2s ease;
}
.art-search__btn:hover{ filter:brightness(1.05); }
.art-search__btn:active{ transform:translateY(1px); }

/* ---------- 5) Filtros (móvil) ---------- */
.filter-container{
  display:none;              /* Se muestra solo en móvil */
  flex-direction:column;
  align-items:center;
  background:transparent;    /* limpio (antes había un reset duplicado) */
  box-shadow:none;
  border:0;
  padding:10px;
  margin-top:0;
}
.pilares{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:20px;
  width:100%;
  max-width:300px;
}
.pilar{
  padding:10px 15px;
  background:var(--color-secundario);
  color:var(--color-principal);
  border:none; border-radius:8px;
  font-size:var(--tamano-boton);
  cursor:pointer;
  transition:background-color .3s ease, color .3s ease;
}
.pilar.activo,
.pilar[aria-pressed="true"],
.pilar:hover,
.pilar:focus{
  background:var(--color-principal);
  color:#fff;
  outline:none;
}
.subcategoria-dropdown{
  width:100%; max-width:300px;
  padding:0 10px; margin-bottom:20px;
}
.subcategoria-dropdown select{
  width:100%; padding:10px; font-size:16px;
  border:1px solid #e0e0e0; border-radius:8px;
  background:#f5f5f5;
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg fill="%2397979F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  cursor:pointer;
}
.subcategoria-dropdown select:focus{
  outline:none;
  border-color:var(--color-principal);
  box-shadow:0 0 5px rgba(3,42,83,.5);
}

/* ---------- 6) Filtros (desktop) ---------- */
.nav-pilares{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0;
}
.nav-pilares ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center;
}
.nav-item{ position:relative; margin:0 15px; }
.nav-link{
  text-decoration:none;
  color:var(--color-principal);
  font-size:var(--tamano-link);
  padding:5px 10px; cursor:pointer;
  border-radius:12px;          /* para que el hover no cambie el box */
  transition: background-color .2s, color .2s;
}
.nav-link:hover,
.nav-link.active,
.nav-item:hover .nav-link{
  background:var(--color-principal);
  color:#fff;
}
.nav-link::after{ content:" ▾"; font-size:12px; }
.dropdown-menu{
  display:none; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid #e0e0e0;
  padding:10px; border-radius:8px;
  z-index:1000; min-width:200px;
  max-height:300px; overflow-y:auto;
}
.nav-item:hover .dropdown-menu{ display:block; }
.dropdown-menu label{
  display:flex; align-items:center;
  margin-bottom:5px; cursor:pointer;
  padding:5px; border-radius:4px;
}
.dropdown-menu label:hover{ background:#f0f0f0; }
.dropdown-menu input[type="checkbox"]{ margin:0; }
.dropdown-menu label span{ margin-left:8px; }

/* Botón reset (desktop) */
.reset-filters{
  margin-left:30px; padding:8px 16px;
  background:var(--color-principal); color:#fff;
  border:0; border-radius:8px;
  font-size:var(--tamano-reset-button);
  cursor:pointer;
  transition: background-color .3s ease, transform .2s ease, color .2s;
}
.reset-filters:hover{
  background:var(--color-boton-reset-hover);
  color:#333;
}
button:focus{ background:var(--color-principal); color:#fff; }

/* ---------- 7) Featured ---------- */
#featured-post-container{
  position:relative; width:calc(100% - 4%);
  max-width:1055px; margin:40px auto;
  border-radius:12px; overflow:hidden;
  box-sizing:border-box;
}
.featured-post{
  position:relative; width:100%;
  height:250px; border-radius:12px; overflow:hidden;
}
.featured-post-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.featured-post::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,22,36,.4), rgba(20,22,36,.4));
  z-index:2;
}
.featured-post-content{
  position:absolute; bottom:15px; left:40px;
  padding:20px; width:calc(100% - 80px);
  display:flex; flex-direction:column; gap:16px;
  z-index:3;
}
.featured-post-category{
  background:var(--color-principal); color:#fff;
  padding:0 10px; border-radius:16px;
  font-size:var(--tamano-featured-category);
  font-weight:500; text-decoration:none;
  text-transform:capitalize; align-self:flex-start;
  transition:background-color .3s ease;
}
.featured-post-category:hover{ background:var(--color-hover); }
.featured-post-title-link{ text-decoration:none; color:inherit; }
.featured-post-title{
  font-family:'Montserrat', sans-serif;
  font-size:var(--tamano-featured-title);
  font-weight:600; line-height:1.2;
  color:#fff; margin:0 0 10px;
  text-transform:uppercase;
}
.featured-post-meta{
  display:flex; align-items:center; gap:20px;
  font-family:'Work Sans', sans-serif;
  font-size:var(--tamano-featured-meta); color:#fff;
}
.featured-post-author,.featured-post-date{
  display:inline-block; font-size:var(--tamano-featured-meta);
}

/* ---------- 8) Grilla ---------- */
#grid-placeholder{ scroll-margin-top:50px; color:#0b2a4a; } /* color del spinner */
.post-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap:20px; padding:20px;
  max-width:1100px; margin:0 auto;
}

/* ---------- 9) Cards ---------- */
.post-card{
  position:relative; display:flex; flex-direction:column;
  justify-content:space-between; gap:16px;
  height:100%; padding:16px;
  border:1px solid var(--color-borde);
  border-radius:12px; overflow:hidden;
  background:var(--color-fondo);
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  text-decoration:none; color:inherit; cursor:pointer;
  transition: box-shadow .3s ease;
}
.post-card:hover,.post-card:focus{
  box-shadow:0 4px 8px rgba(0,0,0,.15); outline:none;
}
.post-card-top{ display:flex; flex-direction:column; gap:10px; }
.post-card-image{ width:100%; height:169px; overflow:hidden; border-radius:6px; }
.post-card-image img{ width:100%; height:100%; object-fit:cover; }
.post-card-title-link{ text-decoration:none; color:inherit; }
.post-card-title{
  font-family:'Montserrat', sans-serif;
  font-size:20px; font-weight:600; line-height:1.2;
  color:var(--color-texto); margin:0 0 10px;
}
.post-card-category{
  display:inline-block; background:var(--color-principal); color:#fff;
  padding:4px 10px; border-radius:16px;
  font-size:14px; font-weight:500; text-decoration:none;
  text-transform:capitalize; transition:background-color .3s ease;
}
.post-card-category:hover{ background:var(--color-boton-reset-hover); color:#333; }
.post-card-meta{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.post-card-author,.post-card-date{
  font-size:14px; color:var(--color-texto-secundario);
}

/* ---------- 10) Paginación ---------- */
/* ---------- 10) Paginación ----------
   Igualada visualmente a la de Noticias Home (.cfpn-pagination)
-------------------------------------------------------------- */
.pagination{
  text-align: center;
  margin: 20px 0;
}

.pagination ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination li{
  display: block;
}

.pagination a,
.pagination span{
  display: block;
  padding: 8px 12px;
  background: var(--color-paginacion);
  color: #333;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color .3s ease, color .3s ease;
}

.pagination a:hover{
  background: var(--color-paginacion-hover);
}

/* Estado activo: soporta tanto la estructura
   antigua (.active) como la típica de paginate_links (.current) */
.pagination .active a,
.pagination .active span,
.pagination .page-numbers.current,
.pagination .current{
  background: var(--color-paginacion-activa);
  color: #fff;
}


/* ---------- 11) Loader sin “bamboleo” ---------- */
#grid-placeholder{
  contain: layout paint;     /* aísla el reflow del spinner */
  position: relative;
}
#grid-placeholder.is-loading{
  opacity:.6; transition:opacity .2s; pointer-events:none;
}
#grid-placeholder.is-loading::before{
  content:""; position:absolute; inset:0; background:transparent;
}
#grid-placeholder.is-loading::after{
  content:""; position:absolute; width:40px; height:40px;
  left:50%; top:50%;
  transform: translate(-50%, -50%);  /* centrado */
  background-image:
    radial-gradient(circle closest-side, currentColor 90%, transparent 92%),
    conic-gradient(from 0deg,
      transparent 10%, currentColor 10% 20%,
      transparent 20% 30%, currentColor 30% 40%,
      transparent 40% 50%, currentColor 50% 60%,
      transparent 60% 70%, currentColor 70% 80%,
      transparent 80% 90%, currentColor 90% 100%);
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:12px 12px, 100% 100%;
  animation: spin 1s linear infinite;
  transform-origin:50% 50%;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- 12) Responsive móvil ---------- */
@media (max-width:768px){
  .h1-articulos{ font-size:var(--tamano-h1-movil); margin:15px 0; }

  /* Desktop OFF en móvil */
  .nav-pilares{ display:none; }

  /* Filtros ON en móvil */
  .filter-container{ display:flex; }

  .post-grid{ grid-template-columns:1fr; padding:10px; max-width:100%; }

  .reset-filters{ display:none; }

  /* Destacado */
  #featured-post-container{
    width:calc(100% - 4%); max-width:100%;
    margin:20px 10px;
  }
  .featured-post{ height:auto; min-height:205px; }
  .featured-post-content{
    bottom:10px; left:10px; right:10px;
    padding:5px; gap:10px; width:auto;
  }
  .featured-post-title{ font-size:16px; line-height:1.2; }
  .featured-post-category{ font-size:12px; }
  .featured-post-meta{ flex-direction:column; align-items:flex-start; gap:0; }
  .featured-post-author,.featured-post-date{ font-size:14px; }

  /* Buscador compact */
  .art-searchbar.container{ padding:0 16px; }
  .art-search__btn{ padding:0 14px; }
}

/* ---------- 13) Accesibilidad ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}