/* ==========================================================
   amPARo · páginas interiores
   Cada página vive en el color de su capa. La cabecera es un
   campo de capa; las secciones alternan campo y blanco.
   ========================================================== */

.pagina {
  overflow-x: clip;
}

.seccion {
  padding-block: var(--e-8) var(--e-9);
}

.seccion--blanco {
  background: var(--blanco);
  color: var(--negro);
  --foco: var(--negro);
}

.seccion__cabeza {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.seccion__cabeza h2 {
  font-size: var(--t-h2);
  max-width: 16ch;
}

.seccion__cabeza p {
  max-width: 40ch;
  font-size: var(--t-destacado);
  line-height: 1.45;
}

/* ---------- Cabecera de capa ---------- */

.cabecera {
  padding-block: var(--e-7) var(--e-6);
}

.cabecera__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}

.cabecera__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}

.cabecera h1 {
  color: var(--capa-tinta);
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

/* Sobre salmón: el texto de la cabecera es grande (≥24px) */
.cabecera__bajada {
  max-width: 34ch;
  color: var(--capa-tinta);
  font-size: var(--t-destacado);
  font-weight: 600;
  line-height: 1.4;
}

[data-capa="reconocer"] .cabecera__bajada {
  font-size: 1.5rem;
  line-height: 1.3;
}

.cabecera__par {
  display: none;
}

.cabecera__par .par {
  --par-ancho: 17rem;
  --par-proporcion: 1.9;
  --tam: 46%;
  --guino-y: calc(100% + 0.25rem);
  color: var(--capa-tinta);
}

.cabecera__accesos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.cabecera .chips {
  margin-top: var(--e-6);
}

@media (min-width: 48em) {
  .cabecera {
    padding-block: var(--e-8) var(--e-7);
  }

  .cabecera__grilla {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }

  .cabecera__par {
    display: flex;
    justify-content: center;
    padding-bottom: var(--e-6);
  }
}

/* ---------- Chips de filtro ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 1.15rem 0.5rem 0.9rem;
  border: 2px solid var(--capa);
  border-radius: var(--r-d);
  background: var(--blanco);
  color: var(--capa-en-blanco);
  font-weight: 800;
  font-size: var(--t-cuerpo);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 180ms var(--curva-salida),
    color 180ms var(--curva-salida),
    transform var(--dur-toque) var(--curva-salida);
}

.chip:active {
  transform: scale(0.96);
}

.chip[aria-current="true"] {
  background: var(--capa);
  color: var(--capa-sobre);
}

/* Sobre un campo de color, los chips son neutros */
.chips--campo .chip {
  border-color: var(--blanco);
  color: var(--negro);
}

.chips--campo .chip[aria-current="true"] {
  border-color: var(--negro);
  background: var(--negro);
  color: var(--blanco);
}

@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-current="true"]):hover {
    box-shadow: inset 0 0 0 1px currentColor;
  }
}

.estado-lista {
  margin-top: var(--e-4);
  font-weight: 700;
  font-size: var(--t-chico);
}

/* ---------- Vacío: un elemento solo, abierto, esperando su par ---------- */

.vacio {
  display: grid;
  justify-items: start;
  gap: var(--e-4);
  max-width: 34rem;
  padding-block: var(--e-6);
}

.vacio__forma {
  width: 5.5rem;
  transform: rotate(-8deg);
}

.vacio__titulo {
  font-size: var(--t-h3);
}

.vacio p {
  font-size: var(--t-destacado);
  line-height: 1.45;
}

/* ---------- Agenda ---------- */

.agenda {
  padding-block: var(--e-6) var(--e-9);
}

.mes + .mes {
  margin-top: var(--e-8);
}

.mes__titulo {
  font-size: var(--t-h3);
  margin-bottom: var(--e-5);
}

.grilla-planes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  margin: 0;
}

.grilla-planes > li {
  display: flex;
}

.grilla-planes .plan {
  width: 100%;
}

@media (min-width: 40em) {
  .grilla-planes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grilla-planes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.agenda__talleres {
  max-width: 40ch;
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-chico) var(--r-medio) var(--r-medio) var(--r-chico);
  background: var(--verde); /* taller: cruce capa 3 + capa 4 */
  font-weight: 600;
}

/* ---------- Detalle de plan ---------- */

.detalle {
  padding-block: var(--e-5) var(--e-9);
}

.volver {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: var(--e-4);
  font-weight: 800;
}

.plan--detalle {
  max-width: 64rem;
}

.plan--detalle .plan__imagen {
  aspect-ratio: 4 / 5;
  background: var(--blanco);
}

.plan--detalle .plan__imagen img {
  object-fit: contain; /* el afiche entero, sin recortar */
}

/* La etiqueta de tipo se apoya en el borde inferior de la imagen (acá es 4:5) */
.plan--detalle .plan__tipo {
  top: calc(100cqi * 5 / 4 - 2.75rem);
}

.plan--detalle .plan__titulo {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

.plan--detalle .plan__cuando {
  font-size: var(--t-destacado);
}

.plan--detalle .plan__lugar {
  font-size: var(--t-cuerpo);
}

/* En el detalle, primero el "Voy" (la acción principal) y después cómo llegar */
.plan__acciones {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  padding-top: var(--e-2);
}

.plan--detalle .voy {
  margin-top: var(--e-2);
}

button.enlace {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--t-cuerpo);
  text-decoration-line: underline;
}

.plan__acciones .boton {
  font-size: var(--t-cuerpo);
  min-height: 2.875rem;
}

.plan__pasado {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-chico);
  background: var(--negro);
  color: var(--blanco);
  font-weight: 700;
}

@media (min-width: 52em) {
  .plan--detalle {
    flex-direction: row;
    border-radius: 18rem 18rem var(--r-medio) var(--r-medio) / 12rem 12rem var(--r-medio) var(--r-medio);
  }

  .plan--detalle .plan__imagen {
    flex: 0 0 48%;
    aspect-ratio: auto;
    min-height: 34rem;
  }

  .plan--detalle .plan__cuerpo {
    padding: var(--e-8) var(--e-6) var(--e-6);
    gap: var(--e-4);
  }

  .plan--detalle .plan__tipo {
    top: auto;
    bottom: var(--e-4);
  }
}

/* ---------- Testimonios ---------- */

.muro {
  columns: 1;
  column-gap: var(--e-7);
}

.muro > .testimonio {
  break-inside: avoid;
  margin-bottom: var(--e-7);
}

@media (min-width: 40em) {
  .muro {
    columns: 2;
  }
}

@media (min-width: 64em) {
  .muro {
    columns: 3;
  }
}

.cierre {
  padding-block: var(--e-8);
}

.cierre__grilla {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}

.cierre h2 {
  color: var(--capa-tinta);
  font-size: var(--t-h2);
  max-width: 15ch;
}

/* ---------- Lugares (mapa de Rosario, en lista) ---------- */

.lugares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e-6);
  margin: 0;
}

@media (min-width: 44em) {
  .lugares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 70em) {
  .lugares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lugar {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-block: var(--e-5) var(--e-6);
  border-top: 3px solid var(--capa);
}

.lugar__nombre {
  font-size: var(--t-h3);
  line-height: 1;
}

.lugar__nota {
  font-size: var(--t-cuerpo);
  line-height: 1.5;
}

.lugar__quien,
.lugar__donde {
  font-size: var(--t-chico);
  color: var(--negro-suave);
}

.lugar__donde a {
  color: var(--capa-en-blanco);
  font-weight: 800;
}

/* ---------- Lista / mapa ---------- */

.vista-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-4);
}

.vista-barra .estado-lista {
  margin: 0;
}

.vista-barra--campo {
  margin-top: var(--e-8);
}

/* Dos opciones pegadas: la elegida se llena (en blanco: color de capa; en campo: negro) */
.vista {
  display: inline-flex;
  padding: 3px;
  border: 2px solid var(--capa);
  border-radius: 999px;
  background: var(--blanco);
}

.vista__op {
  min-height: 2.5rem;
  padding: 0.35rem 1rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--capa-en-blanco);
  font-weight: 800;
  font-size: var(--t-chico);
  line-height: 1.1;
  transition:
    background-color 180ms var(--curva-salida),
    color 180ms var(--curva-salida);
}

.vista__op[aria-pressed="true"] {
  background: var(--capa);
  color: var(--capa-sobre);
}

.campo .vista {
  border-color: var(--blanco);
}

.campo .vista__op {
  color: var(--negro);
}

.campo .vista__op[aria-pressed="true"] {
  background: var(--negro);
  color: var(--blanco);
}

/* El mapa vive en una ventana con forma de arco */
.mapa {
  position: relative;
  height: min(68svh, 36rem);
  margin-top: var(--e-5);
  overflow: hidden;
  border-radius: 50% 50% var(--r-medio) var(--r-medio) / 4.5rem 4.5rem var(--r-medio) var(--r-medio);
  background: var(--blanco);
  isolation: isolate;
  z-index: 0;
}

.mapa__error {
  position: absolute;
  inset: auto var(--e-5) var(--e-5);
  padding: var(--e-4);
  border-radius: var(--r-medio);
  background: var(--blanco);
  color: var(--negro);
  font-weight: 700;
}

.mapa__nota {
  margin-top: var(--e-3);
  font-size: var(--t-chico);
}

/* Controles de MapLibre con la tipografía y los colores de amPARo */
.mapa.maplibregl-map {
  font-family: var(--fuente-texto);
}

.mapa .maplibregl-ctrl-bottom-left .maplibregl-ctrl {
  margin: 0 0 var(--e-4) var(--e-4);
}

.mapa .maplibregl-ctrl-group {
  border: 2px solid var(--negro);
  border-radius: var(--r-chico);
  box-shadow: none;
  overflow: hidden;
}

.mapa .maplibregl-ctrl-group button {
  width: 2.75rem;
  height: 2.75rem;
}

.mapa .maplibregl-ctrl-attrib {
  font-size: 11px;
}

/* Aviso "usá dos dedos": en negro del logo, no en el gris por defecto */
.mapa .maplibregl-cooperative-gesture-screen {
  background: rgb(35 31 32 / 0.72);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: var(--t-cuerpo);
}

/* Pines: un óvalo solo, abierto. Al abrir su ficha, llega su par. Son botones. */
.pin {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  isolation: isolate;
}

.pin__a,
.pin__b {
  position: absolute;
  inset: 0;
}

.pin path {
  stroke: var(--blanco);
  stroke-width: 9px;
  paint-order: stroke;
}

.pin__b {
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translate(45%, -30%) scale(0.6);
  transition:
    transform var(--dur-par) var(--curva-movimiento),
    opacity 180ms var(--curva-salida);
}

.pin--activo .pin__b,
.pin--fijo .pin__b {
  opacity: 1;
  transform: translate(30%, -20%) scale(0.7);
}

.pin--fijo .pin__b path {
  stroke: none;
}

.pin__n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: 900;
  font-size: 0.8125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pin:focus-visible {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Ficha (popup) */
.ficha .maplibregl-popup-content {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-6) var(--e-4) var(--e-4);
  border: 2px solid var(--azul);
  border-radius: var(--r-chico) var(--r-medio) var(--r-medio) var(--r-medio);
  box-shadow: none;
  color: var(--negro);
  font-family: var(--fuente-texto);
  font-size: var(--t-chico);
  line-height: 1.4;
}

.ficha .maplibregl-popup-content p {
  margin: 0;
}

.ficha.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.ficha.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.ficha.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--azul);
}

.ficha.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.ficha.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.ficha.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--azul);
}

.ficha.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--azul);
}

.ficha.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--azul);
}

.ficha__titulo {
  font-size: 1.375rem;
  line-height: 1;
}

.ficha__voz {
  font-size: var(--t-cuerpo);
}

/* Testimonio en el mapa de orígenes: cruce capa 1 + capa 2 */
.ficha__voz--cruce {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.15;
}

.ficha__voz--cruce .comilla-abre,
.ficha__voz--cruce .comilla-cierra {
  color: var(--salmon);
}

.ficha__meta {
  color: var(--negro-suave);
}

.ficha__enlace {
  justify-self: start;
  color: var(--azul) !important;
  font-weight: 800;
}

.ficha .maplibregl-popup-close-button {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.375rem;
  color: var(--negro);
  border-radius: 0 var(--r-medio) 0 var(--r-chico);
}

/* Rosario: el destino de todas las líneas */
.destino {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.2rem 0.65rem 0.25rem 0.3rem;
  border-radius: 999px;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: var(--t-mini);
  pointer-events: none;
}

.destino__forma {
  width: 0.9rem;
}

.destino__forma path {
  fill: var(--blanco) !important;
}

/* ---------- Orígenes ---------- */

.origenes-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}

.origenes-grilla__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}

.origenes-grilla__texto h2 {
  font-size: var(--t-h2);
}

.origenes-grilla__texto p {
  max-width: 34ch;
  font-size: var(--t-destacado);
  line-height: 1.45;
}

.provincias {
  display: grid;
  gap: var(--e-6);
  margin: var(--e-5) 0 0;
}

.provincia h3 {
  font-size: var(--t-destacado);
  margin-bottom: var(--e-3);
}

.ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}

.ciudad,
.ciudad summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.5rem;
  padding: 0.35rem 0.9rem 0.4rem;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--negro);
  font-weight: 700;
  font-size: var(--t-chico);
  font-variant-numeric: tabular-nums;
}

.ciudad__n {
  color: var(--azul);
  font-weight: 900;
}

/* Cruce capa 1 + capa 2: una ciudad que tiene un testimonio */
details.ciudad {
  display: block;
  padding: 0;
  background: none;
  border-radius: var(--r-medio);
}

details.ciudad summary {
  list-style: none;
  cursor: pointer;
}

details.ciudad summary::-webkit-details-marker {
  display: none;
}

.ciudad__voz {
  position: relative;
  width: 1.4rem;
  height: 1rem;
  isolation: isolate;
  flex: none;
}

.ciudad__voz span {
  position: absolute;
  top: 0;
  width: 1rem;
}

.ciudad__voz span:first-child {
  left: 0;
}

.ciudad__voz span:last-child {
  left: 0.4rem;
  mix-blend-mode: multiply;
}

details.ciudad[open] summary {
  border-radius: var(--r-medio) var(--r-medio) 0 0;
}

.ciudad__testimonio {
  max-width: 22rem;
  padding: var(--e-3) var(--e-4) var(--e-4);
  border-radius: 0 var(--r-medio) var(--r-medio) var(--r-medio);
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
}

.ciudad__testimonio small {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--fuente-texto);
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--negro-suave);
}

@media (min-width: 60em) {
  .origenes-grilla {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }

  .origenes-grilla__texto {
    grid-column: 1 / span 6;
  }

  .origenes-grilla > [data-origen] {
    grid-column: 8 / -1;
    display: flex;
    justify-content: flex-end;
  }

  .provincias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Cómo sumarte ---------- */

.formas-de-sumarse {
  display: grid;
  gap: var(--e-6);
  margin: 0;
}

.formas-de-sumarse dt {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1;
}

.formas-de-sumarse dd {
  margin: var(--e-2) 0 0;
  max-width: 40ch;
  font-size: var(--t-destacado);
  line-height: 1.45;
}

@media (min-width: 52em) {
  .formas-de-sumarse > div {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--e-6);
    padding-top: var(--e-5);
    border-top: 2px solid var(--negro);
  }

  .formas-de-sumarse dd {
    margin: 0;
  }
}

.texto-largo {
  display: grid;
  gap: var(--e-4);
  max-width: var(--ancho-lectura);
  font-size: var(--t-destacado);
  line-height: 1.55;
}

.sumarte__red {
  display: grid;
  gap: var(--e-2);
  max-width: var(--ancho-lectura);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 2px solid var(--verde);
}

/* ---------- Formularios ---------- */

.formulario {
  display: grid;
  gap: var(--e-5);
  max-width: 36rem;
}

.campo-form {
  display: grid;
  gap: var(--e-2);
}

.campo-form label,
.campo-form legend {
  font-weight: 800;
  font-size: var(--t-cuerpo);
}

.campo-form label span,
.campo-form legend span {
  font-weight: 600;
  color: inherit;
  opacity: 0.85;
}

.ayuda {
  font-size: var(--t-chico);
  line-height: 1.4;
}

textarea.campo-texto {
  min-height: 8rem;
  resize: vertical;
}

.contador {
  justify-self: end;
  font-size: var(--t-mini);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.error {
  font-size: var(--t-chico);
  font-weight: 800;
}

.error:empty {
  display: none;
}

fieldset.campo-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.casillas {
  display: grid;
  gap: var(--e-2);
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  font-weight: 600 !important;
  cursor: pointer;
}

.casilla input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--negro);
  flex: none;
}

.formulario__aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-chico) var(--r-medio) var(--r-medio) var(--r-chico);
  background: var(--blanco);
  color: var(--negro);
  font-size: var(--t-chico);
  line-height: 1.45;
}

.seccion--blanco .formulario__aviso {
  background: var(--capa);
}

.formulario .boton {
  justify-self: start;
}

.formulario .boton[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Al mandar, el formulario se cierra y el par se junta */
.enviado {
  display: grid;
  justify-items: start;
  gap: var(--e-4);
  max-width: 36rem;
}

/* El foco se mueve acá al mandar (lectores de pantalla), sin recuadro visible */
.enviado:focus {
  outline: none;
}

.enviado__titulo {
  font-size: var(--t-h3);
}

.enviado p {
  font-size: var(--t-destacado);
  line-height: 1.45;
}

.enviado .par {
  --par-ancho: 12rem;
  --par-proporcion: 1.9;
  --tam: 48%;
  --guino-y: calc(100% + 0.25rem);
  --guino-x: 0%;
  --guino-traslado: 0 0;
  --guino-alineacion: left;
  margin-bottom: 5.5rem; /* lugar para el guiño, que aparece debajo del par */
}

.formularios-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}

@media (min-width: 60em) {
  .formularios-grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------- 404 ---------- */

.perdido {
  min-height: 70svh;
  display: grid;
  align-content: center;
  gap: var(--e-5);
  padding-block: var(--e-8);
}

.perdido__forma {
  width: 7rem;
  transform: rotate(-10deg) translateX(1rem);
}

.perdido h1 {
  font-size: var(--t-h2);
  max-width: 14ch;
}

.perdido p {
  font-size: var(--t-destacado);
  max-width: 34ch;
}