/* ==========================================================================
   css/pages/index.css — Inicio. Solo layout y ajustes propios de la página (prefijo .home-).
   Requiere css/base.css y css/site.css. Móvil primero; breakpoints 600 / 768 / 900 / 1024.
   Los ajustes sobre componentes compartidos van siempre acotados con .page-index.
   ========================================================================== */

/* ---------- Hero ----------
   El velo de base tiñe la foto aérea de azul plano en claro. Acá se reemplaza por tinta neutra
   (el mismo #0B1020 de los tokens oscuros) con caída direccional: protege el texto de la izquierda
   y deja respirar la ciudad a la derecha. Se mantiene el blanco muy por encima de AA. */
.page-index .hero__scrim {
  background:
    linear-gradient(96deg, rgb(11 16 32 / .62) 0%, rgb(11 16 32 / .55) 44%, rgb(11 16 32 / .34) 72%, rgb(11 16 32 / .10) 100%),
    linear-gradient(180deg, rgb(11 16 32 / .34) 0%, rgb(11 16 32 / .06) 30%, rgb(11 16 32 / .24) 70%, rgb(11 16 32 / .62) 100%);
}
.page-index .hero__content { max-width: 60rem; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(5rem, 11vw, 9rem); }
/* Dos líneas parejas en vez de tres desparejas: el título gana proporción y firmeza. */
.page-index .hero--full .hero__content h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.5rem); }
.page-index .hero__content .lead { max-width: 46ch; }
/* El crédito vuelve al pie de la foto, apenas por encima de la tarjeta de cifras que se solapa. */
.page-index .hero--full .hero__credit {
  top: auto; bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + .85rem);
  left: var(--gutter); right: auto;
  color: rgb(255 255 255 / .72); letter-spacing: .04em;
}

/* ---------- Quiénes somos ---------- */
.home-intro { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .home-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 6rem); }
  .home-intro__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.home-intro__aside h2 { margin-bottom: var(--sp-6); }
.home-intro__lead { color: var(--text-muted); font-size: 1.0625rem; max-width: 40ch; text-wrap: pretty; }
.home-intro__since { display: grid; gap: .35rem; margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); max-width: 26rem; }
.home-intro__year { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); line-height: .95; letter-spacing: -.035em; color: var(--primary-strong); }
.home-intro__year-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); text-wrap: pretty; }
.home-intro__body .prose { max-width: 62ch; }
.home-intro__actions { margin-top: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .home-intro__body { padding-top: .5rem; } }

/* ---------- Secretarías ----------
   Dos columnas anchas: el título entra en una línea y las cuatro tarjetas cierran con la misma
   fila de pie (responsables + “Conocer más”) alineada al fondo. */
@media (min-width: 1200px) { .home-secretarias { gap: clamp(1.25rem, 2.2vw, 1.75rem); } }
.page-index .secretaria-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  padding-left: clamp(1.75rem, 3.2vw, 2.5rem);
}
.page-index .secretaria-card__title { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); }
.page-index .secretaria-card__text { flex: 1 1 auto; max-width: 52ch; }
.page-index .secretaria-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.page-index .secretaria-card__people { margin: 0; align-items: center; }
.page-index .secretaria-card__foot .link-arrow { margin-left: auto; }

/* ---------- Explorador: mapa + buscador + partidos ---------- */
.home-explorer__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; }
@media (min-width: 1024px) {
  .home-explorer__grid { grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .8fr); }
}

/* Tarjeta del mapa: el lienzo ocupa todo el alto disponible de la columna. */
.home-map { display: flex; flex-direction: column; min-height: 26rem; }
.home-map__stage {
  position: relative; flex: 1 1 auto;
  min-height: clamp(22rem, 46vw, 30rem);
  display: grid; align-content: center; padding: clamp(.75rem, 2.5vw, 1.5rem);
}
.home-map__cta { position: absolute; top: .75rem; right: .75rem; z-index: 900; box-shadow: var(--shadow); }

/* Mapa real (Leaflet): el lienzo se estira a toda la caja; el radio lo recorta .map-teaser. */
.home-map__stage.is-mapa { display: block; padding: 0; }
.home-map__stage.is-mapa .home-map__canvas {
  position: absolute; inset: 0; width: auto; height: auto; border-radius: 0;
}
.home-map__canvas { width: 100%; height: clamp(22rem, 46vw, 30rem); overflow: hidden; background: var(--surface-2); }
.home-map__canvas .leaflet-control-attribution { font-size: .625rem; }
/* Un punto de contraste sobre el teselado gris de Esri, sin salirse de la paleta. */
.page-index .home-map__canvas .leaflet-tile-pane { filter: contrast(1.12) brightness(.97) saturate(1.08); }
[data-theme="dark"] .page-index .home-map__canvas .leaflet-tile-pane { filter: brightness(.66) saturate(.72) contrast(1.06); }
@media (max-width: 63.99rem) {
  .home-map__stage.is-mapa .home-map__canvas { pointer-events: none; }
  .home-map__stage.is-mapa .home-map__cta { pointer-events: auto; }
}

/* Mapa esquemático (alternativa sin Leaflet) */
.home-map__svg { width: 100%; height: auto; display: block; }
.home-map__grid { fill: none; stroke: var(--border); stroke-width: .6; }
.home-map__g circle { fill: var(--dot, var(--c)); stroke: var(--surface); stroke-width: .8; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); }
.home-map__g { --dot: var(--c); transition: opacity var(--dur-base); }
[data-theme="dark"] .home-map__g { --dot: color-mix(in srgb, var(--c) 62%, #fff); }
.home-map__svg.is-dim .home-map__g { opacity: .12; }
.home-map__svg.is-dim .home-map__g.is-hl { opacity: 1; }
.home-map__svg.is-dim .home-map__g.is-hl circle { transform: scale(1.6); }
.home-map__label { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-muted); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.home-map__sede { fill: none; stroke: var(--primary-strong); stroke-width: 2; }
.home-map__empty { padding: var(--sp-8); text-align: center; color: var(--text-muted); }
@media (max-width: 599px) { .home-map__g circle { r: 4.6; stroke-width: 1.2; } }
@media (min-width: 600px) and (max-width: 899px) { .home-map__g circle { r: 3.6; } }

/* Leyenda por tipo: pie de la tarjeta del mapa. En móvil, fila con scroll y snap. */
.home-map__legend { gap: .5rem; padding: var(--sp-4) clamp(.75rem, 2.5vw, 1.25rem); }
.home-map__legend .chip { text-decoration: none; }
.home-map__legend .chip:hover { transform: translateY(-1px); }
@media (max-width: 599px) {
  .home-map__legend {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .home-map__legend::-webkit-scrollbar { display: none; }
  .home-map__legend > * { flex: none; scroll-snap-align: start; }
  .home-map__legend .chip { min-height: 2.5rem; }
}

/* Buscador */
.home-search { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.home-search__form { display: grid; gap: var(--sp-3); }
.home-search__label { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1.2; }
.home-search__hint { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.home-search__hint > span { margin-right: .15rem; }
.home-search__ej { font-weight: 600; }
.home-search__status {
  min-height: 1.25rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-3);
}
.home-search__status::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.home-search__results { flex: 1; align-content: start; gap: 0; }
.home-search__results .result { padding: .625rem .5rem; align-items: center; }
.home-search__results .result + .result { border-top: 1px solid var(--border); }
.home-search__results .result__meta { display: block; }
.home-search__results .empty { padding: var(--sp-6) var(--sp-4); }
.home-search__results .empty strong { font-size: 1.125rem; }
.home-search__more { margin-top: auto; }
/* La fila entera es el enlace: la flecha es sólo la señal de destino. */
.page-index .result__action {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.page-index .result__action svg { width: 1rem; height: 1rem; }
.page-index .result:hover .result__action, .page-index .result:focus-visible .result__action { transform: translateX(3px); background: var(--primary-soft-2); }

/* Partidos */
.home-regions { display: grid; gap: var(--sp-3); margin-top: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 600px) { .home-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } }
.home-region {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sp-4); row-gap: .15rem;
  padding: clamp(1.125rem, 2.4vw, 1.5rem) clamp(1.125rem, 2.4vw, 1.5rem) clamp(1.125rem, 2.4vw, 1.5rem) clamp(1.25rem, 2.6vw, 1.75rem);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--text);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.home-region:hover, .home-region:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); color: var(--text); }
.home-region__name { grid-column: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1.1; }
.home-region__count { grid-column: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--primary-strong); margin-top: .35rem; }
.home-region__label { grid-column: 1; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.home-region__go { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.home-region:hover .home-region__go { transform: translateX(3px); background: var(--primary-soft-2); }
.home-explorer__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--fs-small); color: var(--text-muted); text-wrap: pretty; }

/* ---------- Noticias ---------- */
.home-news__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Encuadres: el retrato se centra en la cabeza; del afiche vertical se toma la banda de la foto. */
.home-news__img--retrato { object-position: 50% 10%; }
.home-news__img--afiche { object-position: 50% 79%; transform: scale(1.2); }
.page-index .card--hover:hover .home-news__img--afiche { transform: scale(1.25); }

/* ---------- Radio ---------- */
.home-radio__meta { margin: var(--sp-6) 0 0; }

/* ---------- Presidente ---------- */
.home-president { --c: var(--primary); max-width: 60rem; margin-inline: 0; }
.page-index .home-president__photo {
  width: clamp(8.5rem, 15vw, 12.5rem); height: auto; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); object-fit: cover; object-position: 56% 44%;
  background: var(--surface-2); box-shadow: var(--shadow); filter: contrast(1.05) saturate(.97);
}
@media (min-width: 768px) {
  .page-index .home-president { gap: var(--sp-4) clamp(2rem, 5vw, 3.5rem); align-items: center; }
  .page-index .home-president__photo { grid-row: 1 / span 2; align-self: center; }
  .page-index .home-president .quote__text { grid-column: 2; justify-self: start; align-self: end; }
  .page-index .home-president .quote__author { grid-column: 2; justify-self: start; align-self: start; }
}

/* ---------- Ejes de trabajo ---------- */
.home-pilares .section__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.home-pilares .pillar__text { max-width: 34ch; }

/* ---------- Cierre: CTA ---------- */
@media (min-width: 900px) {
  .page-index .cta-band__actions { flex-direction: column; align-items: stretch; width: min(100%, 18rem); }
}

/* ---------- Ajustes de móvil ---------- */
@media (max-width: 599px) {
  /* Botones apilados: todos del mismo ancho. */
  .page-index .btn-group:not(.home-intro__actions) { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  .page-index .btn-group:not(.home-intro__actions) > .btn { width: 100%; }
  .page-index .cta-band__actions { display: grid; grid-template-columns: 1fr; }
  .page-index .cta-band__actions > .btn { width: 100%; }
  /* En vertical la foto se protege con una sola caída: el texto ocupa casi todo el alto. */
  .page-index .hero__scrim {
    background: linear-gradient(180deg, rgb(11 16 32 / .38) 0%, rgb(11 16 32 / .56) 16%, rgb(11 16 32 / .70) 55%, rgb(11 16 32 / .84) 100%);
  }
  /* El filete del eyebrow pasa arriba: el texto arranca en el mismo borde que el h1. */
  .page-index .hero__content .eyebrow { display: block; text-wrap: balance; }
  .page-index .hero__content .eyebrow::before { display: block; margin-bottom: .45rem; }
  .page-index .home-search__ej { min-height: 2.25rem; }
  .page-index .secretaria-card__people { flex-wrap: nowrap; }
  .page-index .result__action { width: 1.75rem; height: 1.75rem; }
}

/* ---------- Impresión ---------- */
@media print {
  .home-map__cta, .home-search__more, .home-search__hint { display: none !important; }
}

/* Novedades de la portada: las publicaciones de Instagram son afiches con texto, así que se
   muestran completas sobre un fondo neutro (mismo criterio que la página de Noticias). */
#home-news-list .novedad-card .card__media {
  height: clamp(13rem, 22vw, 17rem);
  aspect-ratio: auto;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
#home-news-list .novedad-card .card__media img { width: 100%; height: 100%; object-fit: contain; }