/* =====================================================================
   Inicio (portada). Móvil: lema, «9 de 13», distancia al quórum, h1, entradilla.
   Escritorio (≥ 900 px): texto a la izquierda (7 de 12) y hemiciclo a la derecha (5 de 12).
   Bajo 900 px el hemiciclo no se muestra en la portada (la distancia cuenta la historia).
   ===================================================================== */

/* ---------- Primer pantallazo ---------- */
.seccion--portada { padding-top: var(--e-5); }
.hero__grid { display: grid; gap: var(--e-5); min-width: 0; }
.hero__izq { display: contents; }
.hero__izq > * { min-width: 0; }
.hero__lema { order: 1; margin: 0; }
.hero__cifra { order: 2; }
.hero__cifra .cifra__valor { white-space: nowrap; }
.hero__titulo { order: 3; margin: 0; }
.hero__miniatura { order: 4; margin-top: calc(-1 * var(--e-2)); }
.hero__enlace-hemi { order: 5; margin: calc(-1 * var(--e-3)) 0 0; }
.hero__hemi { display: none; }
.hero__texto { order: 7; margin: 0; }
.hero__acciones { order: 8; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.hero__corte { order: 9; margin: 0; }

/* ---------- Campo rojo de identidad (sitio.css: .campo-rojo) ----------
   El héroe es el campo rojo del emblema: el mismo en claro y en oscuro. Dentro, los tokens del campo
   (blanco y rosa claro) dan la lectura; hemiciclo y miniatura de la distancia se dibujan con ellos. */
/* Móvil: el emblema en la esquina superior derecha del campo, para que el título entre en el primer pantallazo */
.hero__emblema { order: 0; display: block; position: absolute; top: var(--e-3); right: var(--margen); width: 64px; height: 64px; margin: 0; z-index: 1; }
.hero__lema { padding-right: 76px; }
.campo-rojo.seccion--portada { padding-top: var(--e-4); }
.hero__cifra .cifra__valor { color: #FFFFFF; }
.campo-rojo .hero__titulo { color: #FFFFFF; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); }
.campo-rojo .hero__texto { color: #FFFFFF; }
.campo-rojo .hero__corte { color: var(--identidad-texto-2); }
/* El hemiciclo va en el panel de papel de sitio.css (sus colores de datos se restablecen ahí) */
@media (min-width: 900px) {
  .hero__emblema { position: static; width: 128px; height: 128px; margin-bottom: var(--e-3); }
  .hero__lema { padding-right: 0; }
  .campo-rojo.seccion--portada { padding-top: var(--e-5); }
  /* El emblema del campo rojo es el protagonista: la marca de agua se deja más tenue para no tapar el hemiciclo */
  .campo-rojo--emblema.seccion--portada::after { opacity: .1; }
  .campo-rojo .hero__titulo { font-size: clamp(2.4rem, 1.5rem + 2.2vw, 3.8rem); }
  .hero__cifra .cifra__valor { font-size: clamp(6rem, 9vw, 9rem); }
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); align-items: start; }
  .hero__izq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); grid-column: 1 / span 7; }
  .hero__izq > .hero__miniatura,
  .hero__enlace-hemi { display: none; }
  .hero__hemi { display: block; grid-column: 8 / span 5; order: 0; }
  .hero__titulo { font-size: clamp(2rem, 1.3rem + 1.7vw, 3.1rem); }
  .hero__texto { max-width: 62ch; }
}

/* ---------- Banda de tinta: las otras tres cifras de 5.1 (la de 9 de 13 va arriba) ---------- */
.banda-cifras-sec { padding: var(--e-6) 0; }
.banda-cifras__titulo { color: var(--banda-texto-2); margin: 0 0 var(--e-4); }
.banda-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.banda-cifras .cifra--compacta .cifra__valor { font-size: 2.4rem; }
@media (min-width: 900px) {
  .banda-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Logro principal (L01) ---------- */
#logro .logro { gap: var(--e-3); max-width: 80ch; }
.logro__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.logro__titulo { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); max-width: 28ch; margin: 0; }
.logro__credito { color: var(--tinta-2); margin: 0; font-size: .95rem; }
.logro__texto { margin: 0; max-width: 68ch; }
.logro__que-sigue { max-width: 64ch; }
.logro__lateral { display: grid; gap: var(--e-3); align-content: start; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
.logro__duracion .cifra__valor { font-size: 2.25rem; }
.logro__documentos { margin: 0; }
.logro__accion { margin: 0; }
@media (min-width: 900px) {
  #logro .logro {
    max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e-6);
    row-gap: var(--e-3);
    grid-template-areas:
      "meta lateral"
      "titulo lateral"
      "credito lateral"
      "texto lateral"
      "sigue lateral";
    align-items: start;
  }
  .logro__meta { grid-area: meta; }
  .logro__titulo { grid-area: titulo; }
  .logro__credito { grid-area: credito; }
  .logro__texto { grid-area: texto; }
  .logro__que-sigue { grid-area: sigue; }
  .logro__lateral { grid-area: lateral; align-self: start; padding: var(--e-4); background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--tinta); }
}

/* ---------- Lo que te afecta: tarjetas con barras a escala común ---------- */
.afecta { display: grid; gap: var(--e-3); margin-top: var(--e-4); min-width: 0; }
@media (min-width: 640px) { .afecta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .afecta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.caso-card { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.caso-card .antetitulo { margin: 0; }
.caso-card__titulo { font: 650 1.2rem/1.25 var(--serif); margin: 0; }
.caso-card__pregunta { font: italic 400 1.05rem/1.4 var(--serif); margin: 0; }
.caso-card__texto { font-size: .95rem; color: var(--tinta-2); margin: 0; }
.caso-card__barras { list-style: none; margin: auto 0 0; padding: var(--e-2) 0 0; border-top: 1px solid var(--linea); display: grid; gap: .35rem; }
.caso-card__fila { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; font-size: var(--t-dato); color: var(--tinta-2); }
.caso-card__etq { white-space: nowrap; }
.caso-card__pista { display: block; height: 8px; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 1px; overflow: hidden; }
.caso-card__barra { display: block; height: 100%; background: var(--tinta); }
.caso-card__n { font: 700 .95rem/1 var(--serif); color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }
.caso-card__detalle { font-size: .95rem; }
.caso-card__detalle summary { cursor: pointer; font-weight: 650; }
.caso-card__detalle p { margin: var(--e-2) 0 0; color: var(--tinta-2); }
.caso-card__enlace { margin: 0; }
.caso-card .pendiente { font: 650 .8rem/1.4 var(--sans); }
.caso-card__titulo .pendiente { font: 650 1rem/1.4 var(--sans); }

/* ---------- Cierre: el lema como tríptico (cada palabra con sus cifras y su enlace) ---------- */
.triptico { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-5); }
.triptico__col { display: grid; gap: var(--e-3); align-content: start; border-top: 3px solid var(--tinta); padding-top: var(--e-3); }
.triptico__enlace-bloque { display: flex; flex-direction: column; gap: var(--e-2); color: var(--tinta); text-decoration: none; }
.triptico__enlace-bloque:hover .triptico__palabra { color: var(--rojo-hondo); }
.triptico__palabra { font: 600 clamp(2rem, 1.2rem + 2.2vw, 3rem)/1 var(--serif); letter-spacing: -.02em; }
.triptico__caption { font: 650 .95rem/1.3 var(--sans); color: var(--tinta-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.triptico__datos { display: grid; gap: var(--e-3); }
.triptico__datos .cifra { border-top: 0; padding-top: 0; }
.triptico__peticiones { margin: 0; font-size: .95rem; color: var(--tinta-2); }
.triptico__peticiones span { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.triptico__col { grid-auto-rows: auto; align-content: start; }
@media (min-width: 900px) { .triptico { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: var(--e-5); } }
.cierre__texto { margin-top: var(--e-3); }
.cierre__enlaces { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
.cierre__enlaces li { margin: 0; }
#cierre { background: var(--papel-2); }

/* Separación entre la composición de vías y su enlace */
#vias .vias-caja + p { margin: var(--e-5) 0 0; }

/* Caso sin publicar (caso 03): su estado ocupa el lugar de las barras, alineado al pie */
.caso-card--pendiente .caso-card__estado { margin: auto 0 0; padding-top: var(--e-2); border-top: 1px solid var(--linea); }
.caso-card--pendiente .caso-card__texto { margin-bottom: var(--e-2); }
.caso-card__estado { margin-bottom: 0; }
.caso-card__estado .estado { font-size: .9rem; }
/* El primer pantallazo termina antes: la banda asoma en escritorio */
.seccion--portada { padding-bottom: var(--e-5); }
.banda-cifras .cifra__valor { font-size: 2.6rem; line-height: 1; }

/* ---------- Un año de trabajo, en cifras (V44 y V42 compactos + cifras por id) ---------- */
.hicimos { display: grid; gap: var(--e-5); margin-top: var(--e-4); min-width: 0; }
.hicimos__graficos { display: grid; gap: var(--e-5); min-width: 0; }
.hicimos__cifras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.hicimos__cifra { min-width: 0; }
.hicimos__cifra .cifra { border-top: 2px solid var(--tinta); }
@media (min-width: 900px) {
  .hicimos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--e-6); }
  .hicimos__cifras { grid-template-columns: 1fr; }
}

/* ---------- Cómo participar ---------- */
.participa { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); min-width: 0; }
.participa__item { min-width: 0; }
.participa__titulo { font: 650 1.2rem/1.25 var(--serif); margin: 0 0 var(--e-2); }
.participa__titulo a { color: var(--tinta); text-decoration: none; border-bottom: 1.5px solid var(--linea-fuerte); }
.participa__titulo a:hover { border-color: var(--tinta); color: var(--rojo-hondo); }
.participa__texto { margin: 0; color: var(--tinta-2); font-size: .98rem; }
@media (min-width: 640px) { .participa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .participa { grid-template-columns: repeat(4, minmax(0, 1fr)); } }