/* ============================================================
   T11 · PÁGINA GENÉRICA
   Apoyar la candidatura · Contacto · Sobre este sitio · Noticias
   Requiere estilo-base.css y estilo-seccion.css cargados antes.
   IIF · UMSA — v1.0 · septiembre de 2026

   Corresponde al tipo de contenido «Pagina» (§5.7 de la
   arquitectura): todo lo que no es Hito, Persona, Experimento,
   Documento, Noticia ni Termino. No define ningún color propio:
   toda la paleta vive en el bloque :root de estilo-base.css.
   ============================================================ */

.pagina{max-width:var(--read); margin:0 auto; padding:44px 24px 0;}
.pagina h2{font-size:clamp(24px,3.4vw,31px); line-height:1.15; letter-spacing:-.02em;
  margin:52px 0 14px; padding-top:26px; border-top:1px solid var(--line);}
.pagina h2:first-child{margin-top:0; padding-top:0; border-top:none;}
.pagina h3{font-family:var(--sans); font-size:17px; letter-spacing:-.01em; margin:30px 0 8px;}
.pagina p{margin:0 0 18px;}
.pagina ul,.pagina ol{margin:0 0 18px; padding-left:22px;}
.pagina li{margin-bottom:9px;}

/* ---- pasos numerados: «cómo apoyar», «estado del expediente» ---- */
ol.pasos{list-style:none; padding:0; counter-reset:paso; margin:26px 0;}
ol.pasos li{counter-increment:paso; position:relative; padding:0 0 0 52px; margin-bottom:26px;}
ol.pasos li::before{content:counter(paso); position:absolute; left:0; top:1px;
  width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font:700 15px/34px var(--sans); text-align:center; font-variant-numeric:tabular-nums;}
ol.pasos b{display:block; font-family:var(--sans); font-size:16.5px; letter-spacing:-.01em;
  margin-bottom:5px;}
ol.pasos p{margin:0; font-size:15.5px; color:var(--muted); line-height:1.6;}

/* ---- ficha de datos: contacto, licencias ---- */
.datos{margin:26px 0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); overflow:hidden;}
.datos .fila{display:grid; grid-template-columns:minmax(0,1fr); gap:2px;
  padding:15px 20px; border-top:1px solid var(--line); font-family:var(--sans);}
.datos .fila:first-child{border-top:none;}
@media(min-width:620px){
  .datos .fila{grid-template-columns:minmax(150px,.42fr) minmax(0,1fr); gap:20px; align-items:baseline;}
}
.datos dt,.datos .k{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);}
.datos dd,.datos .v{margin:0; font-size:16px; line-height:1.5; overflow-wrap:anywhere;}
/* La glosa va SIEMPRE en su propia línea. El selector nombra dd y .v por
   separado: `.datos dd,.datos .v small` sólo alcanzaría al segundo, y la nota
   quedaba pegada al correo en la misma línea. */
.datos dd small,.datos .v small{display:block; margin-top:4px; font-size:13.5px;
  color:var(--muted); line-height:1.5;}

/* ---- estado del expediente: lista con marca de avance ---- */
ul.avance{list-style:none; padding:0; margin:26px 0;}
ul.avance li{position:relative; padding:0 0 0 30px; margin-bottom:14px;
  font-family:var(--sans); font-size:15.5px; line-height:1.6;}
ul.avance li::before{content:""; position:absolute; left:2px; top:7px;
  width:12px; height:12px; border-radius:50%; border:2px solid var(--line); background:var(--bg);}
ul.avance li.hecho::before{background:var(--ok); border-color:var(--ok);}
ul.avance li.curso::before{background:var(--warn); border-color:var(--warn);}
ul.avance li b{font-weight:700;}
ul.avance li .est{display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-top:2px;}
ul.avance li.hecho .est{color:var(--ok);}
ul.avance li.curso .est{color:var(--warn);}

/* ---- índice de noticias ---- */
.lista-noticias{max-width:var(--read); margin:0 auto; padding:36px 24px 0;}
.lista-noticias a.item{display:block; text-decoration:none; color:var(--fg);
  padding:22px 0; border-top:1px solid var(--line);}
.lista-noticias a.item:hover h3{color:var(--accent);}
.lista-noticias time{display:block; font-family:var(--sans); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.lista-noticias h3{margin:0 0 7px; font-size:21px; line-height:1.25; letter-spacing:-.015em;}
.lista-noticias p{margin:0; font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--muted);}

@media print{
  ol.pasos li::before{background:transparent; border:1px solid currentColor}
  .datos,.pagina h2{break-inside:avoid}
}