/* Phoenicia — estilos de «Perspectiva» (indice del blog y articulo) */

/* ---------- INTRO ---------- */
  /* .intro vive en base.css */

/* ---------- LISTADO Y ARTICULO ---------- */
.listado{ padding:20px 0 90px; }
.listado-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:40px 34px;
}
.listado-img{ width:100%; height:210px; object-fit:cover; border-radius:var(--radio); display:block; margin-bottom:16px; }
.listado-categoria{
  font-size:0.75rem; letter-spacing:2px; text-transform:uppercase;
  color: var(--taupe); font-weight:500; margin-bottom:8px;
}
.listado-titulo{ font-size:1.5rem; margin-bottom:8px; }
.listado-titulo a:hover{ color: var(--gold-texto); }
.listado-fecha{ font-size:0.8rem; color: var(--taupe); margin-bottom:10px; }
.listado-extracto{ font-size:0.93rem; margin-bottom:14px; }
.listado-vacio{ padding:40px 0; color: var(--taupe); }

.articulo{ padding:20px 0 90px; }
.articulo-cabecera{ padding-block:40px 10px; max-width:820px; }
.articulo-cabecera h1{ font-size:clamp(1.61rem, 6.1vw, 2.6rem); }
.articulo-fecha{ font-size:0.85rem; color: var(--taupe); margin-top:12px; }
.articulo-img{ width:100%; max-height:460px; object-fit:cover; border-radius:var(--radio); margin:24px 0 36px; display:block; }
.articulo-cuerpo{ max-width:760px; }
.articulo-cuerpo p{ margin-bottom:20px; }
.articulo-cuerpo h2{ font-size:clamp(1.35rem, 4.2vw, 1.8rem); margin:34px 0 14px; }
.articulo-cuerpo h3{ font-size:1.35rem; margin:26px 0 12px; }
.articulo-cuerpo ul{ list-style:disc; padding-left:24px; margin-bottom:20px; }
.articulo-cuerpo li{ margin-bottom:8px; }
.articulo-cuerpo a{ color: var(--gold-texto); border-bottom:1px solid var(--gold-texto); }
.articulo-cuerpo img{ border-radius:var(--radio); margin:20px 0; }


/* Paginacion de Laravel */
nav[role="navigation"][aria-label]{ margin-top:50px; }
nav[role="navigation"] svg{ width:18px; height:18px; }

/* ---------- PAGINACION ---------- */
.paginacion{ margin-top:54px; }
.paginacion-lista{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.paginacion-item a,
.paginacion-item span{
  display:flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--border-soft); border-radius:var(--radio);
  font-size:0.88rem; font-weight:500; color: var(--navy-heading);
}
.paginacion-item a:hover{ border-color: var(--gold-texto); color: var(--gold-texto); }
.paginacion-item--actual span{ background: var(--navy-heading); border-color: var(--navy-heading); color: var(--white); }
.paginacion-item--inactivo span{ color: var(--border-soft); }