:root{
  /* Colores */
  --color-principal:#032A53;
  --color-secundario:#f8f8f8;
  --color-texto:#0A0C1C;
  --color-texto-secundario:#4e4e4e;
  --color-hover:#e0e0e0;
  --color-fondo:#FFFFFF;
  --color-borde:#E8E8EA;
  --color-paginacion:#f5f5f5;
  --color-paginacion-hover:#e0e0e0;
  --color-paginacion-activa:#032A53;

  /* Tamaños */
  --tamano-h1:3.1rem;
  --tamano-h1-movil:2rem;
  --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.4rem;
  --tamano-featured-category-movil:.9rem;
}

/* ===== Reset base ===== */
*,*::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);
}

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

/* ===== Buscador ===== */
.cfpn-search{
  width:min(1100px,96%);
  margin:0 auto 16px;
  display:flex; gap:10px; align-items:center;
}
.cfpn-search__input{
  flex:1; height:40px; padding:0 12px;
  border:1px solid var(--color-borde);
  border-radius:8px; font-size:14px; background:#fff; color:var(--color-texto);
}
.cfpn-search__input:focus{
  outline:none; border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.cfpn-btn{
  height:40px; padding:0 14px; border:0; border-radius:8px;
  font-weight:600; font-size:14px; color:#fff; background:#1677ff; cursor:pointer;
}
.cfpn-btn:hover{ filter:brightness(1.05); }
.cfpn-btn:active{ transform:translateY(0); }

/* ===== Filtros (móvil) ===== */
.cfpn-filter-container{
  display:none; flex-direction:column; align-items:center; padding:10px;
}
.cfpn-pilares{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; margin-bottom:20px; width:100%; max-width:300px;
}
.cfpn-pilar{
  padding:10px 15px; background:var(--color-secundario);
  color:var(--color-principal); border:0; border-radius:8px;
  font-size:var(--tamano-boton); cursor:pointer;
  transition:background-color .3s ease, color .3s ease;
}
.cfpn-pilar.activo,.cfpn-pilar[aria-pressed="true"],
.cfpn-pilar:hover,.cfpn-pilar:focus{
  background:var(--color-principal); color:#fff; outline:none;
}

/* Dropdown tags móvil */
.cfpn-tag-dropdown{ width:100%; max-width:300px; padding:0 10px; margin-bottom:20px; }
.cfpn-tag-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;
}
.cfpn-tag-dropdown select:focus{
  outline:none; border-color:var(--color-principal);
  box-shadow:0 0 5px rgba(3,42,83,.5);
}

/* ===== Navegación (desktop) ===== */
.cfpn-nav-pilares{
  display:flex; justify-content:center; align-items:center; padding:10px 0;
}
.cfpn-nav-pilares ul{
  list-style:none; margin:0; padding:0; display:flex; align-items:center;
}
.cfpn-nav-item{ position:relative; margin:0 15px; }
.cfpn-nav-link{
  text-decoration:none; color:var(--color-principal);
  font-size:var(--tamano-link); padding:5px 10px; cursor:pointer;
  transition:background-color .3s ease, color .3s ease;
  border-radius:8px;
}
.cfpn-nav-link:hover,.cfpn-nav-link.active,.cfpn-nav-item:hover .cfpn-nav-link{
  background:var(--color-principal); color:#fff;
}
.cfpn-nav-link::after{ content:' \25BE'; font-size:12px; }
.no-class::after{ content:'' !important; }

/* Dropdown desktop (una sola definición, con scroll) */
.cfpn-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;
}
.cfpn-nav-item:hover .cfpn-dropdown-menu,
.cfpn-nav-link:focus + .cfpn-dropdown-menu{ display:block; }
.cfpn-dropdown-menu label{
  display:flex; align-items:center; margin-bottom:5px; cursor:pointer;
  padding:5px; border-radius:4px;
}
.cfpn-dropdown-menu label:hover{ background:#f0f0f0; }
.cfpn-dropdown-menu input[type="checkbox"]{ margin:0; }
.cfpn-dropdown-menu label span{ margin-left:8px; }

/* Botón reset (desktop) */
.cfpn-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;
}
.cfpn-reset-filters:hover{ background:var(--color-hover); }
.cfpn-reset-filters:active{ transform:translateY(0); }

/* ===== Featured ===== */
#featured-post-container-noticias{
  position:relative; width:calc(100% - 4%); max-width:1055px; height:250px;
  margin:40px auto; border-radius:12px; overflow:hidden; box-sizing:border-box;
}
.cfpn-featured-post{
  position:relative; width:100%; height:250px;
  background-size:cover; background-position:center; border-radius:12px;
  transition:background-image .3s ease;
}
.cfpn-featured-post-content{
  position:absolute; bottom:15px; left:40px; padding:20px; width:calc(100% - 80px);
  display:flex; flex-direction:column; gap:16px;
}
.cfpn-featured-post-category{
  background:var(--color-principal); color:#fff; padding:4px 10px; border-radius:16px;
  font-size:var(--tamano-featured-category); font-weight:500; text-decoration:none; text-transform:capitalize;
  transition:background-color .3s ease; align-self:flex-start;
}
.cfpn-featured-post-category:hover{ background:var(--color-hover); }
.cfpn-featured-post-title-link{ text-decoration:none; color:inherit; }
.cfpn-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; }
.cfpn-featured-post-meta{
  display:flex; flex-direction:row; align-items:center; gap:20px;
  font-family:'Work Sans',sans-serif; font-size:var(--tamano-featured-meta); color:#fff;
}
.cfpn-featured-post-author,.cfpn-featured-post-date{ font-size:var(--tamano-featured-meta); }

/* ===== Grid & Cards ===== */
#grid-placeholder-noticias{
  /* Fija ancho/centrado para que NO cambie al entrar/salir el loader */
  display:block;
  width:min(1100px,96%);
  margin:0 auto;
  scroll-margin-top:50px; /* para scroll-to-grid */
}
.cfpn-post-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; padding:20px; max-width:1100px; margin:0 auto;
}
.cfpn-post-card{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  height:100%; 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);
  padding:16px; gap:16px; text-decoration:none; color:inherit; cursor:pointer;
  transition:box-shadow .3s ease;
}
.cfpn-post-card:hover,.cfpn-post-card:focus{ box-shadow:0 4px 8px rgba(0,0,0,.15); outline:none; }
.cfpn-post-card-top{ display:flex; flex-direction:column; gap:10px; }
.cfpn-post-card-image{ width:100%; height:169px; overflow:hidden; border-radius:6px; }
.cfpn-post-card-image img{ width:100%; height:100%; object-fit:cover; }
.cfpn-post-card-title-link{ text-decoration:none; color:inherit; }
.cfpn-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;
}
.cfpn-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; align-self:flex-start;
  text-transform:capitalize; transition:background-color .3s ease;
}
.cfpn-post-card-category:hover{ background:var(--color-hover); color:#002990; }
.cfpn-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;
}
.cfpn-post-card-author,.cfpn-post-card-date{ font-size:14px; color:var(--color-texto-secundario); }

/* ===== Paginación ===== */
.cfpn-pagination{ text-align:center; margin:20px 0; }
.cfpn-pagination ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.cfpn-pagination li{ display:block; }
.cfpn-pagination a,.cfpn-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;
}
.cfpn-pagination a:hover{ background:var(--color-paginacion-hover); }
a.cfpn-pagination.page-numbers.current,
span.page-numbers.current{
  background:var(--color-paginacion-activa); color:#fff;
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .cfpn-h1-noticias{ font-size:var(--tamano-h1-movil); margin:15px 0; }
  .cfpn-nav-pilares{ display:none; }          /* ocultar desktop-nav en móvil */
  .cfpn-filter-container{ display:flex; }     /* mostrar filtros móvil */
  .cfpn-post-grid{ grid-template-columns:1fr; padding:10px; max-width:100%; }
  .cfpn-reset-filters{ display:none; }

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

  .cfpn-search{ width:94%; }
}

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

/* ===== Scroll global (opcional) ===== */
html{ scroll-behavior:smooth; }

/* ===== Loader suave (sin “bailes”) ===== */
#grid-placeholder-noticias.is-loading{
  position:relative;
  opacity:.6;
  transition:opacity .2s ease;
}
#grid-placeholder-noticias.is-loading::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle closest-side,currentColor 90%,transparent 92%) center / 10px 10px no-repeat,
    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%) center / 22px 22px no-repeat;
  animation:cfpn-spin 1s linear infinite; opacity:.9;
}
@keyframes cfpn-spin{ to{ transform:rotate(360deg); } }