/* ==========================================================================
   Ceuta nos une — hoja de estilo única.

   El sistema visual sale del cartel oficial: tintas de serigrafía sobre papel
   crema, trama de semitono, tipografía condensada de cartel, bordes gruesos y
   sombras duras. Nada de esquinas redondeadas ni degradados.

   Sobre los dos carmines: el del cartel (#F02448) sobre el papel solo da 3,3:1
   de contraste, insuficiente para leer. Se reserva para superficies grandes y
   elementos gráficos; el texto y los botones usan #C71B3A (4,6:1).
   ========================================================================== */

:root {
  --papel:        #F7E3D3;
  --papel-claro:  #FDF1E6;
  --papel-linea:  #E6D2C4;
  --carmin:       #F02448;
  --carmin-osc:   #C71B3A;
  --oro:          #FCC018;
  --tinta:        #35101B;
  --gris:         #6A4048;
  --gris-claro:   #8A5A5F;
  --marcador:     #A98A88;

  --display: Anton, "Arial Narrow", sans-serif;
  --texto:   Archivo, "Helvetica Neue", Helvetica, sans-serif;

  --ancho: 1240px;
  --borde-panel:  4px;
  --borde-pieza:  3px;
  --sombra-dura:  9px 9px 0 var(--tinta);
  --sombra-suave: 6px 6px 0 rgba(53, 16, 27, 0.22);

  --transicion: 240ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* El papel del cartel: su textura sobre el color liso. El color va debajo, así
     que si la imagen no cargara la web se ve igual, solo que sin grano. */
  --papel-textura: var(--papel) url("/media/fondo.webp") repeat;
  --papel-textura-escala: 642px;   /* medio mosaico: a tamaño natural el motivo sale enorme */
}

/* ------------------------------------------------------------------ base -- */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden de HTML pierde frente a cualquier display explícito
   (.boton es inline-flex...). Sin esto, lo que se oculta desde JavaScript
   seguiría viéndose. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* La textura del cartel, en mosaico. Va con el color de papel debajo, así que
     si la imagen no cargara la web se ve igual, solo que lisa. El original trae
     un viñeteado que impide repetirlo, de modo que el mosaico sale del centro
     reflejado: los bordes opuestos son idénticos y no hay junta posible. */
  background: var(--papel-textura);
  background-size: var(--papel-textura-escala);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; margin: 0; }

a { color: var(--carmin-osc); }
a:hover { color: var(--carmin); }

img { max-width: 100%; display: block; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--oro); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--carmin-osc); outline-offset: 3px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--carmin-osc); color: var(--papel-claro);
  padding: 0.7rem 1.2rem; text-decoration: none;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.04em;
  border: var(--borde-pieza) solid var(--tinta);
  transition: top var(--transicion);
}
.saltar:focus { top: 1rem; }

/* Etiquetas en versalitas: sustituyen a la monoespaciada del diseño anterior */
.etiqueta, .barra__nav a, .chip, .tarjeta__provincia, .tarjeta__enlace,
.portada__cifras dt, .cuenta__bloque span, .mapa__pie, .lugares__contador,
.postal__origen, .postal__fecha, .postal__reportar, .campo label,
.campo legend, .contador, .pie__legal {
  font-family: var(--texto);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* El me gusta. En un muro de apoyo es la acción natural, así que tiene más
   presencia que denunciar: color de marca y el corazón se rellena al darlo. */
.postal__megusta {
  display: inline-flex; align-items: center; gap: 0.32rem;
  min-height: 32px; padding: 0.25rem 0.5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--gris);
  font-family: var(--texto); font-size: 0.82rem; font-weight: 700;
  transition: color var(--transicion), transform var(--transicion);
}

.postal__megusta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

.postal__megusta:hover { color: var(--carmin); }
.postal__megusta:active { transform: scale(0.92); }

.postal__megusta--mio { color: var(--carmin); }
.postal__megusta--mio svg { fill: currentColor; }

.postal__megusta-n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .postal__megusta { transition: none; }
  .postal__megusta:active { transform: none; }
}

/* Cuando un mensaje se retira por denuncias, su tarjeta se queda en el sitio con
   el motivo: si desapareciera de golpe, quien acaba de denunciarlo no sabría si
   ha funcionado. */
.postal--retirada {
  display: flex; align-items: center; justify-content: center;
  min-height: 7rem;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.8;
}

.postal__retirada {
  margin: 0; padding: 0 1rem;
  text-align: center; font-size: 0.92rem; line-height: 1.5;
  color: var(--gris);
}

/* --------------------------------------------------- trama de semitono ---- */
/* Un punto cada 5 px sobre los fondos planos: es lo que hace que la pantalla
   parezca papel impreso y no una web más. */

.trama {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at center, rgba(53, 16, 27, 0.18) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
}
.trama--clara {
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.22) 1.1px, transparent 1.3px);
}
.trama--oro {
  background-image: radial-gradient(circle at center, rgba(252, 192, 24, 0.14) 1.1px, transparent 1.3px);
}

/* --------------------------------------------------- gironado (marca) ---- */
/* Ocho sectores alternos desde el centro: el motivo de la bandera de Ceuta. */

.portada__gyronny, .proponer__gyronny, .pie__gyronny, .barra__gyronny {
  background-image: conic-gradient(
    from 22.5deg,
    currentColor 0deg 45deg, transparent 45deg 90deg,
    currentColor 90deg 135deg, transparent 135deg 180deg,
    currentColor 180deg 225deg, transparent 225deg 270deg,
    currentColor 270deg 315deg, transparent 315deg 360deg
  );
}

/* ------------------------------------------------------------ barra sup -- */

.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  background: var(--tinta);
  color: var(--papel);
  border-bottom: var(--borde-pieza) solid var(--tinta);
}

.barra__marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: 1.2rem;
  letter-spacing: 0.03em; text-decoration: none; text-transform: uppercase;
  color: var(--papel);          /* si no, hereda el carmín de `a` y no contrasta */
  padding: 0.55rem 0;           /* área de pulsación cómoda en el móvil */
}
.barra__marca:hover { color: var(--oro); }

/* El logo oficial. Va con alto fijo y ancho automático: es una pieza cerrada y
   no se deforma ni se le aplica el skew que sí llevaba el nombre compuesto. */
.barra__logo { display: block; height: 2.4rem; width: auto; }

.barra__gyronny {
  width: 1.4rem; height: 1.4rem; flex: none;
  color: var(--papel); background-color: var(--tinta);
  border: 2px solid var(--papel);
}

.barra__nav { display: flex; gap: clamp(0.9rem, 2.5vw, 2.2rem); }

.barra__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.76rem; text-decoration: none; color: var(--papel);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicion), color var(--transicion);
}
.barra__nav a:hover { border-bottom-color: var(--oro); color: var(--oro); }

@media (max-width: 620px) {
  .barra { padding-inline: 1rem; gap: 0.6rem; }
  .barra__marca { font-size: 1rem; white-space: nowrap; gap: 0.45rem; }
  .barra__gyronny { width: 1.1rem; height: 1.1rem; }
  .barra__logo { height: 1.85rem; }
  .barra__nav { gap: 0.8rem; min-width: 0; }
  .barra__nav a { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
  .barra__nav a:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------- portada - */

.portada {
  position: relative; isolation: isolate;
  background: var(--papel-textura);
  background-size: var(--papel-textura-escala); color: var(--tinta);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

.portada__gyronny {
  position: absolute; z-index: -1;
  top: 50%; left: 84%; translate: -50% -50%;
  width: min(130vw, 1200px); aspect-ratio: 1;
  color: rgba(53, 16, 27, 0.05);
  mask-image: radial-gradient(circle, #000 32%, transparent 68%);
  animation: girar 300s linear infinite;
}
@keyframes girar { to { rotate: 360deg; } }

.portada__contenido {
  position: relative; z-index: 1;
  max-width: var(--ancho); margin-inline: auto;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .portada__contenido { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.portada__antetitulo {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--texto); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--carmin-osc); margin: 0 0 1.1rem;
}
@media (max-width: 620px) {
  /* Sin esto el separador queda colgando al final de la primera línea */
  .portada__antetitulo { font-size: 0.64rem; letter-spacing: 0.1em; gap: 0.4rem; }
}

.pulso {
  width: 10px; height: 10px; border-radius: 50%; background: var(--carmin);
  box-shadow: 0 0 0 0 rgba(240, 36, 72, 0.6);
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  70%  { box-shadow: 0 0 0 12px rgba(240, 36, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 36, 72, 0); }
}

/* El titular del cartel: relleno oro con contorno carmín, ligeramente inclinado */
/* Antes esto era "CEUTA NOS UNE" compuesto en Anton, en oro con contorno carmín:
   una imitación del logo hecha con CSS. Ahora es el logo de verdad. */
.portada__titulo {
  margin: 0 0 1.1rem;
}

.portada__logo {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  animation: subir 850ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 60ms;
}

@keyframes subir {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: translateY(0); }
}

.portada__reclamo {
  font-family: var(--display); font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  line-height: 0.98; color: var(--carmin); text-transform: uppercase;
  transform: skewX(-5deg); transform-origin: left top;
  margin: 0 0 0.8rem;
}

.portada__lema {
  font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 600; font-style: italic;
  color: var(--carmin-osc); margin: 0 0 1.4rem; max-width: 34ch;
}

.portada__cada {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  font-family: var(--display); font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  font-style: italic; color: var(--tinta);
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Bloque de fecha, calcado del cartel */
.fecha {
  position: relative; isolation: isolate;
  border: var(--borde-panel) solid var(--tinta);
  background: var(--papel-claro);
  box-shadow: var(--sombra-dura);
  padding: clamp(1.3rem, 3vw, 2rem);
  overflow: hidden;
}
.fecha > * { position: relative; z-index: 1; }

.fecha__dia {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 0.98; text-transform: uppercase;
}
.fecha__dia em {
  font-family: var(--texto); font-style: normal; font-weight: 500;
  font-size: 0.7em; text-transform: lowercase;
}

.fecha__numero { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.1rem 0 -0.2rem; }
.fecha__numero b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(5rem, 15vw, 10.5rem); line-height: 0.8;
}
.fecha__numero span {
  font-family: var(--texto); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 2rem);
}

.fecha__mes {
  font-family: var(--display); font-size: clamp(2rem, 5.5vw, 3.9rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: -0.01em;
}

.fecha__donde { margin: 1rem 0 0; font-size: 0.98rem; font-weight: 700; line-height: 1.45; }

/* Cuenta atrás */
.cuenta {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 1.9rem);
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: var(--borde-pieza) solid var(--tinta);
}
.cuenta__bloque { display: flex; flex-direction: column; }
.cuenta__bloque b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1;
  color: var(--carmin-osc); font-variant-numeric: tabular-nums;
}
.cuenta__bloque span { font-size: 0.66rem; color: var(--tinta); margin-top: 0.35rem; }
.cuenta--pasado b { color: var(--tinta); }

/* Cifras */
.portada__cifras {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem);
  margin: 0; padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: var(--borde-pieza) solid var(--tinta);
}
.portada__cifras dt { font-size: 0.7rem; color: var(--gris-claro); }
.portada__cifras dd {
  margin: 0.3rem 0 0; font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1;
}

/* Banda del cartel */
.banda {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--carmin-osc); color: var(--papel-claro);
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  text-align: center;
}
.banda p {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--display); font-size: clamp(0.9rem, 2.2vw, 1.3rem);
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25;
}
.banda__escudo { position: relative; z-index: 1; flex: none; width: 30px; height: 30px; }
@media (max-width: 620px) { .banda__escudo { display: none; } }

/* ----------------------------------------------------------------- botones - */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.18rem);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border: var(--borde-pieza) solid var(--tinta);
  text-decoration: none; cursor: pointer; background: none; color: var(--tinta);
  box-shadow: 5px 5px 0 var(--tinta);
  transition: transform var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion), color var(--transicion);
}
.boton:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinta); }
.boton:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--tinta); }

.boton--brasa { background: var(--carmin-osc); color: var(--papel-claro); }
.boton--brasa:hover { background: var(--carmin); }
.boton--linea { background: var(--oro); color: var(--tinta); }
.boton--linea:hover { background: var(--papel-claro); }

.boton--mini {
  font-family: var(--texto); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1rem; white-space: nowrap;
  background: var(--oro); color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
}
.boton--mini:hover { background: var(--papel-claro); }

.boton[disabled] { opacity: 0.5; cursor: progress; transform: none; }

/* ------------------------------------------------------------- secciones -- */

.seccion__cabecera {
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.2rem);
}

.etiqueta { font-size: 0.75rem; color: var(--carmin-osc); margin: 0 0 0.8rem; }
.etiqueta--claro { color: var(--oro); }

.seccion__titulo {
  font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 0.94;
  text-transform: uppercase; margin-bottom: 0.6rem;
}
.seccion__titulo--claro { color: var(--papel); }

.seccion__texto { max-width: 56ch; color: var(--gris); margin: 0; }
.seccion__texto--claro { color: rgba(247, 227, 211, 0.78); }

/* --------------------------------------------------------------- lugares -- */

.lugares { padding-bottom: clamp(3rem, 7vw, 5rem); }

.lugares__cuerpo {
  max-width: var(--ancho); margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .lugares__cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .lugares__mapa { position: sticky; top: 5rem; }
}

#mapa {
  height: clamp(320px, 52vh, 560px);
  background: var(--papel-claro);
  border: var(--borde-panel) solid var(--tinta);
  box-shadow: var(--sombra-dura);
  z-index: 1;
}

.mapa__pie { font-size: 0.7rem; color: var(--gris-claro); margin: 0.9rem 0 0; }

/* Marcador: un punto carmín con borde de tinta, como los del cartel */
/* El punto se ve de 18 px, pero su área de pulsación es de 24: es lo que pide
   la WCAG 2.5.8 y lo que hace falta para acertarle con el dedo, ahora que hay
   89 concentraciones y en Andalucía se amontonan. El margen centra el punto
   dentro del icono de Leaflet, así que a la vista nada cambia. */
.pin {
  width: 18px; height: 18px; border-radius: 50%;
  margin: 3px;
  background: var(--carmin); border: 3px solid var(--tinta);
  transition: transform 180ms ease;
}
.pin--activo { transform: scale(1.4); background: var(--oro); }

.leaflet-container { font-family: var(--texto); background: var(--papel-claro); }
.leaflet-tile-pane { filter: saturate(0.35) contrast(0.92) sepia(0.18); }
.leaflet-popup-content-wrapper {
  background: var(--papel-claro); color: var(--tinta);
  border-radius: 0; border: var(--borde-pieza) solid var(--tinta);
  box-shadow: 5px 5px 0 rgba(53, 16, 27, 0.3);
}
.leaflet-popup-content { margin: 0.85rem 1rem; font-size: 0.9rem; line-height: 1.5; }
.leaflet-popup-content b { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }
.leaflet-popup-content .hora { font-weight: 700; color: var(--carmin-osc); }
.leaflet-popup-tip { background: var(--papel-claro); border: var(--borde-pieza) solid var(--tinta); }
.leaflet-control-attribution {
  background: rgba(253, 241, 230, 0.9) !important; color: var(--gris) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--carmin-osc) !important; }
.leaflet-bar a {
  background: var(--papel-claro); color: var(--tinta);
  border-color: var(--tinta); font-family: var(--display);
}
.leaflet-bar a:hover { background: var(--oro); color: var(--tinta); }

/* Filtros */
.filtros { display: grid; gap: 0.9rem; margin-bottom: 1.2rem; }

.buscador {
  display: flex; align-items: center; gap: 0.7rem;
  border: var(--borde-pieza) solid var(--tinta);
  background: var(--papel-claro);
  padding: 0.7rem 0.9rem;
}

/* Buscar la concentración más cercana. Solo en móviles y tabletas: ahí la
   posición viene del GPS y es de calle, mientras que en un ordenador se deduce
   de la conexión y puede errar por kilómetros, que para esto no sirve de nada.
   Se distingue por el tipo de puntero y no por el ancho de la pantalla: un móvil
   girado sigue siendo un móvil, y una ventana estrecha en un portátil no lo es. */
.cerca, #cerca-estado { display: none; }

@media (pointer: coarse) {
  #cerca-estado { display: block; }
  .cerca { display: inline-flex; }
}

.cerca {
  align-items: center; gap: 0.5rem;
  min-height: 46px; margin-top: 0.7rem; padding: 0.6rem 1rem;
  background: var(--tinta); color: var(--papel);
  border: var(--borde-pieza) solid var(--tinta);
  box-shadow: 4px 4px 0 var(--oro);
  font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cerca svg { width: 18px; height: 18px; flex: none; color: var(--oro); }

.cerca:hover, .cerca:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--oro); }
.cerca:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--oro); }
.cerca[disabled] { opacity: 0.7; cursor: progress; }

/* Por id y no por clase: mostrarEstado() reescribe className entero, así que una
   clase propia se perdería en cuanto se pinte el primer mensaje. */
#cerca-estado {
  margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.5; min-height: 1.2em;
  color: var(--gris);
}
#cerca-estado.estado--ok  { color: var(--carmin-osc); font-weight: 700; }
#cerca-estado.estado--mal { color: var(--carmin-osc); }

@media (prefers-reduced-motion: reduce) {
  .cerca, .cerca:hover, .cerca:focus-visible, .cerca:active { transition: none; transform: none; }
}
.buscador svg {
  width: 19px; height: 19px; flex: none; fill: none;
  stroke: var(--gris-claro); stroke-width: 2.4; stroke-linecap: round;
}
.buscador input {
  border: 0; background: none; width: 100%; padding: 0;
  font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em;
}
.buscador input::placeholder { color: var(--marcador); text-transform: uppercase; }
.buscador input:focus { outline: none; }
.buscador:focus-within { border-color: var(--carmin-osc); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.7rem; padding: 0.4rem 0.9rem;
  border: 2px solid var(--tinta); background: none; color: var(--tinta);
  cursor: pointer; transition: all var(--transicion);
}
.chip:hover { background: var(--oro); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

.lugares__contador { font-size: 0.72rem; color: var(--gris-claro); margin: 0 0 0.9rem; }

/* Tarjetas de lugar */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }

.tarjeta {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem;
  background: var(--papel-claro);
  border: var(--borde-pieza) solid var(--tinta);
  border-left-width: 12px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-left-color var(--transicion);
}
.tarjeta:hover, .tarjeta--activa {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(53, 16, 27, 0.22);
  border-left-color: var(--carmin);
}

.tarjeta__hora {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1;
  color: var(--carmin-osc); grid-row: span 2; align-self: start;
  font-variant-numeric: tabular-nums;
}
.tarjeta__ciudad {
  font-family: var(--display); font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  line-height: 1; text-transform: uppercase;
}
.tarjeta__provincia { font-size: 0.66rem; color: var(--gris-claro); margin-top: 0.25rem; }
.tarjeta__cuerpo { grid-column: 2; }
.tarjeta__lugar { font-weight: 700; margin: 0.5rem 0 0; }
.tarjeta__dir { color: var(--gris); font-size: 0.94rem; margin: 0.15rem 0 0; }
.tarjeta__notas {
  font-size: 0.88rem; color: var(--gris); font-style: italic;
  margin: 0.5rem 0 0; padding-left: 0.8rem; border-left: 4px solid var(--oro);
}

.tarjeta__convoca {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--carmin-osc);
}
.tarjeta__acciones { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.8rem; }
.tarjeta__enlace {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 0.7rem; color: var(--carmin-osc); text-decoration: none;
  border: 0; background: none; padding: 0.35rem 0; cursor: pointer;
  box-shadow: inset 0 -2px 0 currentColor;
}
.tarjeta__enlace:hover { color: var(--tinta); }

.vacio {
  padding: 2.5rem 1rem; text-align: center; color: var(--gris);
  border: var(--borde-pieza) dashed var(--tinta);
  background: var(--papel-claro);
}

.aviso {
  font-size: 0.9rem; color: var(--gris); margin-top: 1.5rem;
  padding-left: 1rem; border-left: 5px solid var(--oro);
}
.aviso--sutil { font-style: italic; }

/* -------------------------------------------------------------- proponer -- */

.proponer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem);
  display: grid; gap: clamp(2rem, 5vw, 3.8rem); grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .proponer { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
  .proponer__intro { position: sticky; top: 5rem; }
}

.proponer__gyronny {
  position: absolute; z-index: -1; top: -18%; left: -16%;
  width: min(90vw, 800px); aspect-ratio: 1;
  color: rgba(252, 192, 24, 0.05);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}

.proponer__intro { max-width: 46ch; position: relative; z-index: 1; }
.proponer .seccion__titulo { margin-bottom: 0.8rem; }

.pasos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.pasos li {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.98rem; color: rgba(247, 227, 211, 0.86);
}
.pasos b {
  font-family: var(--display); font-size: 1rem; color: var(--tinta);
  background: var(--oro); width: 1.9rem; height: 1.9rem; flex: none;
  display: grid; place-items: center;
}

.proponer__nota {
  margin-top: 2rem; padding: 1.1rem 1.2rem;
  border: var(--borde-pieza) solid var(--oro); color: var(--oro);
  font-size: 0.95rem; line-height: 1.5;
}
.proponer__nota p { margin: 0; }

/* ----------------------------------------------------------- formularios -- */

.formulario {
  position: relative; z-index: 1;
  display: grid; gap: 1.3rem 1.2rem; grid-template-columns: 1fr; align-content: start;
}
@media (min-width: 620px) {
  .formulario { grid-template-columns: 1fr 1fr; }
  .campo:not(.campo--mitad) { grid-column: 1 / -1; }
}

.campo { display: grid; gap: 0.45rem; min-width: 0; }

.campo label, .campo legend { font-size: 0.68rem; color: var(--oro); }
.campo label b { color: var(--oro); }   /* el carmín sobre la tinta no llegaba a 4,5:1 */

.campo input, .campo textarea, .campo select {
  background: var(--papel-claro);
  border: var(--borde-pieza) solid var(--papel);
  padding: 0.75rem 0.9rem;
  color: var(--tinta);
  width: 100%;
  transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; font-family: var(--texto); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--marcador); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); }
.campo input[aria-invalid="true"] { border-color: var(--carmin); }
.campo input[type="file"] { padding: 0.55rem; font-size: 0.85rem; }

.campo__ayuda {
  font-size: 0.85rem; color: rgba(247, 227, 211, 0.65); margin: 0;
  font-family: var(--texto); font-weight: 400; letter-spacing: 0; text-transform: none;
}

.campo--grupo {
  border: var(--borde-pieza) solid rgba(247, 227, 211, 0.34);
  padding: 1.2rem; gap: 1rem;
}
.campo--grupo legend { padding: 0 0.5rem; }

.campo__conboton { display: flex; gap: 0.6rem; align-items: stretch; }
.campo__conboton input { flex: 1; min-width: 0; }

.rejilla-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

.sugerencias {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  border: var(--borde-pieza) solid var(--papel);
  background: var(--papel-claro); color: var(--tinta);
  max-height: 220px; overflow-y: auto;
}
.sugerencias li {
  padding: 0.6rem 0.8rem; cursor: pointer; font-size: 0.9rem;
  border-bottom: 2px solid var(--papel-linea);
}
.sugerencias li:last-child { border-bottom: 0; }
.sugerencias li:hover, .sugerencias li:focus { background: var(--oro); outline: none; }

.minimapa {
  height: 220px; margin-top: 0.7rem;
  border: var(--borde-pieza) solid var(--papel); z-index: 1;
}

.formulario__pie {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  padding-top: 0.5rem;
}
.formulario .boton { border-color: var(--papel); box-shadow: 5px 5px 0 var(--oro); }
.formulario .boton:hover { box-shadow: 3px 3px 0 var(--oro); }

.estado { margin: 0; font-size: 0.92rem; min-height: 1.2em; }
.estado--ok  { color: var(--oro); font-weight: 700; }
.estado--mal { color: #FF8FA3; font-weight: 700; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.turnstile:empty { display: none; }
.turnstile { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ muro -- */

.muro {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--papel-textura);
  background-size: var(--papel-textura-escala);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.postal-nueva {
  position: relative; isolation: isolate;
  max-width: var(--ancho);
  width: calc(100% - clamp(2rem, 8vw, 6rem));
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--tinta); color: var(--papel);
  border: var(--borde-panel) solid var(--tinta);
  /* En oro y no en tinta: el formulario ya es oscuro, así que una sombra oscura
     no lo despegaba del papel. Es el recurso del cartel. */
  box-shadow: 9px 9px 0 var(--oro);
  display: grid; gap: 1.4rem; grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .postal-nueva { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; }
}

.postal-nueva__cuerpo { display: grid; align-content: start; gap: 0.5rem; }
.postal-nueva__cuerpo textarea {
  background: var(--papel-claro);
  border: var(--borde-pieza) solid var(--papel);
  padding: 1rem;
  color: var(--tinta);
  font-family: var(--texto); font-size: 1.05rem; line-height: 1.6;
  resize: vertical; min-height: 8rem; width: 100%;
}
.postal-nueva__cuerpo textarea:focus { outline: none; border-color: var(--oro); }
.postal-nueva__cuerpo textarea::placeholder { color: var(--marcador); }

.contador { font-size: 0.68rem; color: rgba(247, 227, 211, 0.6); margin: 0; text-align: right; }
.contador--limite { color: var(--oro); }

.postal-nueva__meta { display: grid; gap: 1rem; align-content: start; }
.postal-nueva__meta .boton { justify-self: start; }

.previa { position: relative; margin-top: 0.5rem; }
.previa img { max-height: 160px; width: auto; border: var(--borde-pieza) solid var(--papel); }
.previa__quitar {
  position: absolute; top: 0.4rem; right: 0.4rem;
  background: var(--tinta); color: var(--papel);
  border: 2px solid var(--papel);
  font-family: var(--texto); font-weight: 700; font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; cursor: pointer;
}
.previa__quitar:hover { background: var(--carmin-osc); }

/* Rejilla de postales */
.mensajes {
  position: relative; z-index: 1;
  max-width: var(--ancho); margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  columns: 1; column-gap: 1.3rem;
}
@media (min-width: 640px)  { .mensajes { columns: 2; } }
@media (min-width: 1000px) { .mensajes { columns: 3; } }

.postal {
  break-inside: avoid; margin-bottom: 1.3rem;
  background: var(--papel-claro);
  border: var(--borde-pieza) solid var(--tinta);
  padding: 1.1rem 1.2rem 0.9rem;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.postal:nth-child(3n)   { rotate: -0.5deg; }
.postal:nth-child(4n+1) { rotate:  0.55deg; }
.postal:hover {
  transform: translate(2px, 2px); rotate: 0deg;
  box-shadow: 3px 3px 0 rgba(53, 16, 27, 0.22);
}

.postal__foto {
  width: 100%; height: auto; max-height: 420px; object-fit: cover;
  margin-bottom: 0.9rem; background: var(--papel-linea);
  border: 2px solid var(--tinta);
}

.postal__texto { margin: 0 0 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.postal__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; padding-top: 0.7rem; border-top: 2px solid var(--papel-linea);
}
.postal__firma { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }
.postal__origen { font-size: 0.64rem; color: var(--gris-claro); }
.postal__fecha { font-size: 0.66rem; color: var(--gris-claro); }

.postal__reportar {
  display: inline-flex; align-items: center; min-height: 28px;
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0.1rem;
  font-size: 0.62rem; color: var(--gris-claro); opacity: 0;
  transition: opacity var(--transicion), color var(--transicion);
}
/* Con el teclado no hay hover: el botón debe poder alcanzarse igualmente */
.postal:focus-within .postal__reportar { opacity: 1; }
.postal:hover .postal__reportar, .postal__reportar:focus-visible { opacity: 1; }
.postal__reportar:hover { color: var(--carmin-osc); }

.postal--nueva { animation: entrar 600ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes entrar {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.muro__mas { text-align: center; margin-top: 1.8rem; position: relative; z-index: 1; }

/* ------------------------------------------------------------------- pie -- */

.pie {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tinta); color: rgba(247, 227, 211, 0.76);
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.pie__gyronny {
  position: absolute; z-index: -1; bottom: -55%; left: 50%; translate: -50% 0;
  width: min(120vw, 900px); aspect-ratio: 1;
  color: rgba(252, 192, 24, 0.055);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}

.pie__marca { margin: 0 0 1.2rem; }

.pie__marca img { display: block; width: min(16rem, 62%); height: auto; margin-inline: auto; }
/* ------------------------------------------------------------- redes ------ */
/* Los iconos van en oro sobre tinta y con el borde grueso del cartel, no como
   pastillas redondas de plantilla. El cuadro de pulsación es de 48 px: son
   enlaces que se buscan con el pulgar, muchas veces por la calle. */

.redes { margin: 0 0 1.8rem; }

.redes__titulo {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.94rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 227, 211, 0.72);
}

.redes__lista {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0; padding: 0; list-style: none;
}

.redes__lista a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: var(--oro);
  border: var(--borde-pieza) solid rgba(252, 192, 24, 0.55);
  transition: color var(--transicion), background var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}

.redes__lista svg { width: 22px; height: 22px; }

.redes__lista a:hover,
.redes__lista a:focus-visible {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--tinta);
  transform: translateY(-2px);
}

/* En la barra de arriba. Sobre tinta el oro sí funciona, que es donde estaba
   pensado. Se esconden en el móvil: el logo, los enlaces y cuatro iconos piden
   474 px y en 390 no caben. Ahí toman el relevo los de la portada. */

.redes--barra { margin: 0; flex: none; }

.redes--barra .redes__lista { gap: 0.4rem; }

.redes--barra .redes__lista a {
  width: 34px; height: 34px;
  color: var(--oro);
  border: 2px solid rgba(252, 192, 24, 0.45);
}

.redes--barra .redes__lista svg { width: 15px; height: 15px; }

.redes--barra .redes__lista a:hover,
.redes--barra .redes__lista a:focus-visible {
  background: var(--oro); border-color: var(--oro); color: var(--tinta);
}

/* Cada una en su sitio: arriba en pantalla ancha, en la portada en el móvil. */
@media (max-width: 900px) { .redes--barra { display: none; } }
@media (min-width: 901px) { .redes--mini { display: none; } }

/* La versión pequeña de la portada. Va en carmín y no en oro: el oro está pensado
   para el fondo de tinta del pie, y sobre el papel claro no se veía. */

.redes--mini { margin: 1.6rem 0 0; }

.redes--mini .redes__titulo {
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--gris);
}

.redes--mini .redes__lista { gap: 0.55rem; justify-content: flex-start; }

.redes--mini .redes__lista a {
  width: 38px; height: 38px;
  color: var(--papel-claro);
  background: var(--carmin-osc);
  border-color: var(--carmin-osc);
}

.redes--mini .redes__lista svg { width: 17px; height: 17px; }

.redes--mini .redes__lista a:hover,
.redes--mini .redes__lista a:focus-visible {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--oro);
}

.redes__nota {
  margin: 0.5rem auto 0;
  max-width: 44ch;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(247, 227, 211, 0.6);
}

.redes__cuenta {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(247, 227, 211, 0.72);
}

.pie__texto { max-width: 62ch; margin: 0 auto 1.5rem; font-size: 0.95rem; }
.pie__texto a, .pie__legal a { color: var(--oro); }
.pie__legal { font-size: 0.66rem; color: rgba(247, 227, 211, 0.55); margin: 0; }
.pie__legal a { margin-left: 0.8rem; }

/* ------------------------------------------------ aparición al desplazar -- */

.revelar {
  opacity: 0; transform: translateY(20px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}
.revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- difunde -- */
/* Franja de cierre: el cartel oficial y la petición de difundirlo. Va después
   del muro porque es la salida natural — quien ha leído hasta aquí es quien
   más probablemente lo comparta. */

.difunde {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem);
  /* La franja del cartel y el pie son los dos oscuros y se fundían en una sola
     mancha. Los marcos en oro la recortan como pieza propia, que es como el
     cartel separa sus bloques. */
  border-top: var(--borde-panel) solid var(--oro);
  border-bottom: var(--borde-panel) solid var(--oro);
}

.difunde__gyronny {
  position: absolute; z-index: -1; top: 50%; left: 88%; translate: -50% -50%;
  width: min(100vw, 800px); aspect-ratio: 1;
  color: rgba(252, 192, 24, 0.06);
  mask-image: radial-gradient(circle, #000 32%, transparent 68%);
  background-image: conic-gradient(
    from 22.5deg,
    currentColor 0deg 45deg, transparent 45deg 90deg,
    currentColor 90deg 135deg, transparent 135deg 180deg,
    currentColor 180deg 225deg, transparent 225deg 270deg,
    currentColor 270deg 315deg, transparent 315deg 360deg
  );
}

.difunde__cuerpo {
  position: relative; z-index: 1;
  max-width: var(--ancho); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr; justify-items: center; text-align: center;
}
@media (min-width: 860px) {
  .difunde__cuerpo {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; justify-items: start; text-align: left;
  }
}

/* El cartel, con la sombra dura en oro */
.difunde__cartel { position: relative; margin: 0; max-width: 330px; }
.difunde__cartel::before {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  background: var(--oro);
}
.difunde__cartel img {
  position: relative; width: 100%; height: auto;
  border: var(--borde-panel) solid var(--oro);
}

/* El límite de medida es para la lectura, no para los botones ni la nota:
   si no, los dos botones no caben en una línea y se apilan sin necesidad. */
.difunde__texto { max-width: 62ch; }
.difunde__texto .seccion__texto { max-width: 48ch; }
.difunde__acciones {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem;
  justify-content: center;
}
@media (min-width: 860px) { .difunde__acciones { justify-content: flex-start; } }

.difunde .boton { border-color: var(--papel); }
.difunde .boton--linea { box-shadow: 5px 5px 0 var(--carmin-osc); }
.difunde .boton--linea:hover { box-shadow: 3px 3px 0 var(--carmin-osc); }
.difunde .boton--brasa { box-shadow: 5px 5px 0 var(--oro); }
.difunde .boton--brasa:hover { box-shadow: 3px 3px 0 var(--oro); }

.difunde__nota {
  margin: 1.6rem 0 0; padding: 1rem 1.1rem;
  border: 2px solid rgba(247, 227, 211, 0.3);
  font-size: 0.92rem; line-height: 1.55; color: rgba(247, 227, 211, 0.72);
}
.difunde__nota--ok { border-color: var(--oro); color: var(--oro); }

/* ================================================== página /propon ======== */

.propon-cab {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--papel-textura);
  background-size: var(--papel-textura-escala);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
}
.propon-cab__cuerpo { position: relative; z-index: 1; max-width: var(--ancho); margin-inline: auto; }
.volver { text-decoration: none; }

/* Dos caminos con obligaciones distintas: quien solo apunta una convocatoria
   ajena no tiene ningún trámite; quien convoca, sí. Mezclarlos en un único
   formulario dejaba a la segunda persona sin enterarse. */
.bifurca {
  display: grid; gap: 1.1rem; grid-template-columns: 1fr;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 760px) { .bifurca { grid-template-columns: 1fr 1fr; } }

.bifurca__via {
  display: grid; gap: 0.5rem; align-content: start;
  padding: 1.4rem 1.5rem;
  background: var(--papel-claro); color: var(--tinta); text-decoration: none;
  border: var(--borde-pieza) solid var(--tinta);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.bifurca__via:hover {
  transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(53, 16, 27, 0.22);
  color: var(--tinta);
}
.bifurca__via--legal { background: var(--tinta); color: var(--papel); }
.bifurca__via--legal:hover { color: var(--papel); }

.bifurca__marca {
  font-family: var(--display); font-size: 1rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; background: var(--oro); color: var(--tinta);
}
.bifurca__titulo {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: uppercase; line-height: 1.05;
}
.bifurca__texto { font-size: 0.98rem; line-height: 1.55; opacity: 0.86; }
.bifurca__accion {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--carmin-osc); margin-top: 0.4rem;
}
.bifurca__via--legal .bifurca__accion { color: var(--oro); }

/* Bloque del trámite */
.convocar {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}
.convocar__cuerpo { position: relative; z-index: 1; max-width: var(--ancho); margin-inline: auto; }

.convocar__pasos {
  display: grid; gap: 1.2rem; margin-top: clamp(1.8rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .convocar__pasos { grid-template-columns: 1fr 1fr; } }

.paso {
  border: var(--borde-pieza) solid rgba(247, 227, 211, 0.3);
  padding: 1.3rem 1.4rem;
}
.paso__titulo {
  font-family: var(--display); font-size: 1.3rem; text-transform: uppercase;
  color: var(--oro); margin-bottom: 0.7rem;
}
.paso p { margin: 0 0 0.7rem; font-size: 0.98rem; line-height: 1.6; color: rgba(247,227,211,.86); }
.paso p:last-child { margin-bottom: 0; }
.paso a { color: var(--oro); font-weight: 700; }
.paso__nota { font-size: 0.9rem !important; color: rgba(247,227,211,.62) !important; font-style: italic; }
.paso__lista { margin: 0; padding-left: 1.1rem; font-size: 0.96rem; line-height: 1.7; color: rgba(247,227,211,.86); }
.paso__lista b { color: var(--papel); }

.convocar__avisos {
  margin-top: 1.6rem; padding: 1.3rem 1.4rem;
  border-left: 5px solid var(--oro); background: rgba(247, 227, 211, 0.05);
}
.convocar__avisos p { margin: 0 0 0.8rem; font-size: 0.96rem; line-height: 1.6; color: rgba(247,227,211,.86); }
.convocar__avisos p:last-child { margin-bottom: 0; }
.convocar__avisos b { color: var(--oro); }
.convocar__fuente { font-size: 0.86rem !important; color: rgba(247,227,211,.58) !important; }

/* Recordatorio justo antes de enviar */
.recordatorio {
  grid-column: 1 / -1; margin: 0;
  padding: 0.9rem 1.1rem;
  border: 2px dashed rgba(252, 192, 24, 0.5);
  font-size: 0.94rem; line-height: 1.55; color: var(--oro);
}
.recordatorio a { color: var(--oro); }

/* En /propon el formulario ocupa toda la página, no media */
.propon-cab + .convocar + .proponer { padding-top: clamp(3rem, 7vw, 5rem); }

/* Llamada a proponer, en la portada */
.llamada {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--papel-claro);
  border-top: var(--borde-pieza) solid var(--tinta);
  border-bottom: var(--borde-pieza) solid var(--tinta);
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1rem, 4vw, 3rem);
}
.llamada__cuerpo {
  position: relative; z-index: 1;
  max-width: var(--ancho); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.llamada .seccion__titulo { font-size: clamp(1.9rem, 5vw, 3rem); }
.llamada .seccion__texto { max-width: 52ch; }
.vacio .boton { margin-top: 1rem; }
.vacio p { margin: 0; }
/* En las páginas donde la marca del pie es un enlace, conserva su color */
.pie__marca a { display: block; color: inherit; text-decoration: none; }

/* En pantalla táctil no hay hover: sin esto, el botón para avisar de un
   contenido inadecuado queda invisible para la mayoría de visitantes, y es el
   único mecanismo de moderación pública de un muro que se publica sin revisar. */
@media (hover: none) {
  .postal__reportar { opacity: 1; }
}
.postal__reportar { min-height: 44px; font-size: 0.7rem; }

/* 21. El contador quedaba por debajo del contraste legible */
.contador { font-size: 0.76rem; color: rgba(247, 227, 211, 0.8); }

/* 19. Las fotos provocaban saltos de maquetación al cargar dentro de columns */
.postal__foto { aspect-ratio: 4 / 3; }

/* ============================== muro: formulario en móvil ================ */
/* Medido en un iPhone real: el formulario ocupaba 1,02 pantallas y el botón
   Publicar quedaba 175 px por debajo del pliegue. Lo secundario se pliega y el
   estado sube por encima del botón, que es donde se lee. */

html { scroll-padding-top: 5rem; }   /* la barra fija tapaba 73 px al saltar a un ancla */

/* El textarea crece con el texto: antes se veían 4 líneas de las 14 que
   ocupaba un mensaje normal, y había que hacer scroll dentro de la caja. */
.postal-nueva__cuerpo textarea {
  field-sizing: content;
  max-height: 60svh;
  resize: none;              /* el tirador no sirve con el dedo y ocupa una esquina */
}

.campo__titulo {
  font-family: var(--texto); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--oro);
}

/* Bloque plegable con lo opcional */
.extra {
  border: 2px solid rgba(247, 227, 211, 0.28);
  padding: 0 0.9rem;
}
.extra > summary {
  list-style: none; cursor: pointer;
  padding: 0.9rem 0; min-height: 44px;
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.92rem; color: var(--oro);
}
.extra > summary::-webkit-details-marker { display: none; }
.extra > summary::before {
  content: "+"; font-family: var(--display); font-size: 1.2rem; line-height: 1;
  width: 1.5rem; height: 1.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--oro); color: var(--tinta);
}
.extra[open] > summary::before { content: "−"; }
.extra[open] { padding-bottom: 1.1rem; }
.extra .campo + .campo { margin-top: 1rem; }

/* El control de fichero nativo solo tenía 21,7 px pulsables y mostraba
   "Ningún ar...ccionado", cortado a la mitad. Ahora es una etiqueta-botón. */
.boton--foto {
  justify-self: stretch; width: 100%;
  font-family: var(--texto); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: none;
  padding: 0.8rem 1.2rem;
}
#m-photo:focus-visible + .boton--foto { outline: 3px solid var(--oro); outline-offset: 3px; }

.antes {
  margin: 0; padding: 0.9rem 1rem;
  border-left: 4px solid rgba(247, 227, 211, 0.3);
  font-size: 0.9rem; line-height: 1.55; color: rgba(247, 227, 211, 0.75);
}
.antes a { color: var(--oro); }

/* Etiquetas: estaban a 10,88 px en versalitas, el punto más difícil de leer
   del formulario justo donde va la única instrucción de cada campo. */
.postal-nueva .campo label,
.postal-nueva .campo__titulo { font-size: 0.82rem; letter-spacing: 0.1em; }
.postal-nueva .campo__ayuda { font-size: 0.88rem; }

.postal-nueva .previa__quitar {
  position: static; margin-top: 0.6rem;
  min-height: 44px; padding: 0.5rem 1rem; font-size: 0.75rem;
}

@media (max-width: 860px) {
  /* Publicar es el objetivo principal: ocupaba 124 px pegado a la izquierda */
  .postal-nueva__meta .boton--brasa { justify-self: stretch; width: 100%; }
  /* A 320 px, márgenes y padding se comían el 30 % del ancho */
  .postal-nueva { width: calc(100% - clamp(1rem, 4vw, 6rem)); }
}

/* ------------------------------------------------------- el copiloto ------- */
/* Lo que se ve cuando un asistente de navegador está manejando la página.
   La idea: nada puede pasar en silencio. Cada acción del agente deja una marca
   en la pantalla y una frase, con las mismas palabras que recibe el modelo, para
   que quien está delante pueda contrastar lo que le cuentan con lo que ve. */

.copiloto {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px clamp(16px, 4vw, 32px);
  background: var(--tinta);
  border-top: var(--borde-pieza) solid var(--oro);
  color: var(--papel);
  animation: copiloto-entra 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes copiloto-entra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.copiloto__texto {
  flex: 1 1 260px;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.45;
}

.copiloto__texto::before {
  content: "El asistente: ";
  font-weight: 700;
  color: var(--oro);
}

.copiloto__apagar {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  background: none;
  border: 2px solid rgba(247, 227, 211, 0.5);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.copiloto__apagar:hover,
.copiloto__apagar:focus-visible {
  background: var(--carmin-osc);
  border-color: var(--papel);
}

/* Franja viva mientras una herramienta está trabajando. */
[data-agente="trabajando"] body::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 950;
  background: linear-gradient(90deg, var(--oro), var(--carmin), var(--oro));
  background-size: 200% 100%;
  animation: agente-trabaja 1.1s linear infinite;
}

@keyframes agente-trabaja {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

/* La tarjeta a la que el agente acaba de llevar el mapa. */
.tarjeta--senalada {
  animation: senalar 2.6s ease-out;
}

@keyframes senalar {
  0%, 100% { box-shadow: none; }
  15%      { box-shadow: 0 0 0 5px var(--oro); }
  60%      { box-shadow: 0 0 0 3px var(--oro); }
}

/* Provincias que siguen sin nada convocado: el hueco se ve, no se cuenta. */
.chip--hueco {
  border-style: dashed !important;
  opacity: 0.75;
}

/* Un campo que ha escrito el asistente, no la persona. */
.campo--del-agente {
  background: rgba(252, 192, 24, 0.22) !important;
  box-shadow: inset 3px 0 0 var(--oro);
  transition: background 600ms ease-out;
}

/* El botón de enviar cuando le toca a la persona. */
.boton--te-toca {
  box-shadow: 0 0 0 3px var(--oro), var(--sombra-suave);
}

.aviso-agente {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: var(--borde-pieza) solid var(--oro);
  background: rgba(252, 192, 24, 0.12);
  font-size: 0.96rem;
  line-height: 1.5;
  font-weight: 600;
}

/* ------------------------------------------- el escrito para la Delegación -- */

.escrito {
  margin: 0 0 32px;
  padding: clamp(20px, 4vw, 32px);
  background: var(--papel-claro);
  border: var(--borde-panel) solid var(--tinta);
  box-shadow: var(--sombra-suave);
  color: var(--tinta);
}

.escrito__titulo {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.escrito__aviso {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: var(--borde-pieza) solid var(--carmin-osc);
  background: rgba(199, 27, 58, 0.08);
  font-size: 0.96rem;
  line-height: 1.5;
}

.escrito__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.escrito__campos label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 700;
}

.escrito__campos input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 2px solid var(--tinta);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
}

.escrito__campos input:focus-visible {
  outline: 3px solid var(--carmin-osc);
  outline-offset: 1px;
}

.escrito__cuerpo {
  margin: 0 0 20px;
  padding: 18px;
  max-height: 420px;
  overflow: auto;
  background: #fff;
  border: 2px solid var(--papel-linea);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.escrito .estado--ok  { color: #1B7A3D; }
.escrito .estado--mal { color: var(--carmin-osc); }

@media (prefers-reduced-motion: reduce) {
  .copiloto { animation: none; }
  .tarjeta--senalada { animation: none; box-shadow: 0 0 0 4px var(--oro); }
  [data-agente="trabajando"] body::before { animation: none; }
}

/* ------------------------------------------------ las provincias vacías ---- */
/* Los chips del filtro solo existen para las provincias que ya tienen algo.
   Los huecos, por definición, no están ahí: hay que pintarlos aparte. */

.huecos {
  margin: 18px 0 4px;
  padding: 18px 20px;
  border: var(--borde-pieza) dashed var(--marcador);
  background: rgba(252, 192, 24, 0.06);
}

.huecos__titulo {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.huecos__tira {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.huecos__pie {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.85;
}

a.chip--hueco {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

a.chip--hueco:hover,
a.chip--hueco:focus-visible {
  border-style: solid !important;
  opacity: 1;
  background: var(--oro);
  color: var(--tinta);
}

.chip--tuya {
  border-style: solid !important;
  opacity: 1 !important;
  background: var(--carmin-osc);
  color: var(--papel-claro);
  font-weight: 700;
}

/* -------------------------------------------- grupos de puntos del mapa ---- */
/* Con 89 concentraciones, Andalucía era una mancha de círculos superpuestos que
   no se podían ni distinguir ni pulsar. Los puntos cercanos se juntan en uno con
   la cuenta y se separan al acercarse. Los estilos son propios: los de serie del
   agrupador son azules con degradado y no pintan nada aquí. */

.grupo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--oro);
  border: 3px solid var(--tinta);
  box-shadow: 0 0 0 3px rgba(247, 227, 211, 0.75);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: transform 180ms ease;
}

.grupo--med { font-size: 1.05rem; }
.grupo--gra { font-size: 1.15rem; background: var(--carmin); color: var(--papel-claro); }

.leaflet-marker-icon:hover .grupo,
.leaflet-marker-icon:focus-visible .grupo { transform: scale(1.12); }

/* Animación del agrupador al abrirse y cerrarse (viene de la propia librería). */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* ------------------------------------------- ver más lugares del listado --- */

.mas-lugares { display: flex; justify-content: center; margin: 1.6rem 0 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .redes__lista a { transition: none; }
  .redes__lista a:hover, .redes__lista a:focus-visible { transform: none; }
  .grupo { transition: none; }
  .leaflet-cluster-anim .leaflet-marker-icon,
  .leaflet-cluster-anim .leaflet-marker-shadow { transition: none; }
}

/* ------------------------------------------- listado completo en texto ----- */
/* La página /lugares existe para quien no ejecuta JavaScript: buscadores,
   modelos de lenguaje y quien llegue con mala conexión. Hereda la tipografía y
   los colores del sitio, pero sin nada que dependa de scripts. */

.lugares__todos { margin: 1.4rem 0 0; font-size: 0.95rem; }

.listado-plano {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem;
}

.listado-plano h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}

.listado-plano h2 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  text-transform: uppercase;
  margin: 2.4rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--borde-pieza) solid var(--tinta);
}

.listado-plano ul { margin: 0; padding-left: 1.2rem; }
.listado-plano li { margin-bottom: 0.7rem; line-height: 1.5; }
.listado-plano small { color: var(--gris); }

.listado-plano__pie {
  margin-top: 3rem; padding-top: 1.2rem;
  border-top: 2px solid var(--papel-linea);
  font-size: 0.9rem; color: var(--gris);
}

/* La invitación a colaborar del pie. Va en el mismo tono discreto que el aviso
   legal: quien viene a mirar dónde es su concentración no necesita verla, y a
   quien busca cómo ayudar le basta con que esté. */
.pie__codigo {
  max-width: 62ch;
  margin: 0 auto 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(247, 227, 211, 0.78);
}
.pie__codigo a { color: var(--oro); }