/* ============================================================
   T2 · PORTADA DE SECCIÓN
   La montaña · Pasado · Presente · Futuro · Recursos
   Requiere estilo-base.css cargado antes.
   IIF · UMSA — v1.0 · septiembre de 2026

   Una sola hoja sirve para las cinco portadas de sección: sólo
   cambia el contenido. No define ningún color propio.
   ============================================================ */

.sec-hero{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--brand-soft),transparent);}
.sec-hero-in{max-width:var(--wide); margin:0 auto; padding:56px 24px 46px;}
.crumb{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;}
.crumb a{color:var(--muted); text-decoration:none;} .crumb a:hover{color:var(--accent);}
.sec-hero .rotulo{font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
h1{font-size:clamp(36px,5.8vw,56px); line-height:1.03; letter-spacing:-.03em; margin:0 0 16px; max-width:18ch;}
.sec-hero p.lead{font-size:21px; line-height:1.55; color:var(--muted); max-width:64ch; margin:0;}

/* cifras de cabecera de la sección */
.sec-cifras{max-width:var(--wide); margin:0 auto; padding:30px 24px 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:20px 26px;
  font-family:var(--sans);}
.sec-cifras .c b{display:block; font-size:clamp(24px,3.4vw,32px); line-height:1; letter-spacing:-.02em;
  color:var(--accent); font-variant-numeric:tabular-nums;}
.sec-cifras .c span{display:block; margin-top:6px; font-size:13px; line-height:1.45; color:var(--muted);}

/* bloque de puertas: las subpáginas de la sección */
.puertas{max-width:var(--wide); margin:0 auto; padding:44px 24px 0;}
.puertas h2{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; padding-top:26px;
  border-top:1px solid var(--line);}
.puertas:first-of-type h2{padding-top:0; border-top:none;}
.puertas p.desc{font-size:17px; line-height:1.6; color:var(--muted); max-width:66ch; margin:0 0 24px;}

.tarjetas{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px;}
.t{display:flex; flex-direction:column; gap:9px; text-decoration:none; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  transition:border-color .15s, transform .15s;}
a.t:hover{border-color:var(--accent); transform:translateY(-2px);}
.t .kicker{display:block; font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
/* display:block es necesario: en la tarjeta destacada el rótulo y el título
   van dentro de un mismo <div> y, siendo inline, caerían en la misma línea */
.t b{display:block; font-family:var(--sans); font-size:18px; line-height:1.25; letter-spacing:-.012em;}
.t p{margin:0; font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--muted);}
.t .ir{margin-top:auto; padding-top:8px; font-family:var(--sans); font-size:13px; font-weight:700;
  color:var(--accent2);}
a.t:hover .ir{text-decoration:underline;}
.t.pendiente-pag{cursor:default;}
.t .pend{margin-top:auto; padding-top:8px;}
.t .pend span{display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft);
  padding:3px 8px; border-radius:20px; line-height:1.5;}

/* tarjeta ancha destacada */
.t.destacada{grid-column:1/-1; border-left:3px solid var(--accent); background:var(--accent-soft);
  border-color:transparent;}
@media(min-width:900px){
  .t.destacada{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:26px; align-items:center;}
  .t.destacada .col-b{display:flex; flex-direction:column; gap:9px;}
}
.t.destacada b{margin-top:8px; font-family:var(--serif); font-size:clamp(22px,3vw,28px); line-height:1.2;}
.t.destacada p{font-size:15px;}

/* cierre de sección */
.sec-cierre{max-width:var(--read); margin:0 auto; padding:52px 24px 0;}

@media print{
  .sec-hero{background:transparent}
  .t,.sec-cifras .c{break-inside:avoid}
  .tarjetas{grid-template-columns:1fr 1fr}
}