/* ============================================================
   Portal Javier Navarro — estilos de página de colección
   Complementa a portal.css. Lo usan los index.html de cada colección.
   ============================================================ */

.page-hero{padding:clamp(3rem,6vw,5rem) 0}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);color:#fff;margin-bottom:1.1rem;max-width:20ch}
.page-hero__lead{font-size:clamp(1.02rem,1.7vw,1.18rem);color:#cfd9e6;max-width:60ch}
.page-hero__facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.page-hero__facts span{
  font-size:.8rem;font-weight:600;color:#e8c9ad;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.3rem .8rem;
}

/* Tarjetas de concepto numeradas */
.concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.concept{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.concept__n{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--accent);letter-spacing:.08em}
.concept h3{font-size:1.1rem;margin:.5rem 0 .55rem}
.concept p{font-size:.93rem;color:var(--ink-2);line-height:1.6}

/* Itinerarios numerados */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:3.4rem;color:var(--ink-2);font-size:1rem;line-height:1.6}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-family:var(--serif);font-weight:700;
}
.steps strong{color:var(--ink);display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:.2rem}

/* Dos columnas */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* Línea temporal / listado con marca lateral */
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;border-left:2px solid var(--line);padding-left:1.8rem}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:calc(-1.8rem - 6px);top:.55rem;
  width:10px;height:10px;border-radius:50%;background:var(--accent);
}
.timeline h3{font-size:1.08rem;margin-bottom:.3rem}
.timeline p{font-size:.95rem;color:var(--ink-2);line-height:1.6}

/* Tabla temática */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
table.data th,table.data td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)}
table.data th{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
table.data td{color:var(--ink-2)}
table.data tr:last-child td{border-bottom:0}
table.data td strong{color:var(--ink)}