/* ==========================================================================
   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);
}

/* ------------------------------------------------------------------ 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;
  background: var(--papel);
  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;
}

/* --------------------------------------------------- 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;
}

.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 {
  font-size: 0.76rem; text-decoration: none; color: var(--papel);
  padding-bottom: 3px; 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; }
  .barra__gyronny { width: 1.2rem; height: 1.2rem; }
  .barra__nav { gap: 0.9rem; }
  .barra__nav a { font-size: 0.66rem; letter-spacing: 0.08em; white-space: nowrap; }
  .barra__nav a:nth-child(2) { display: none; }
}

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

.portada {
  position: relative; isolation: isolate;
  background: var(--papel); 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 */
.portada__titulo {
  font-size: clamp(3.6rem, 13vw, 8.5rem);
  line-height: 0.86;
  margin: 0 0 1rem;
  text-transform: uppercase;
  transform: skewX(-5deg);
  transform-origin: left top;
}

.portada__titulo .linea {
  display: block;
  color: var(--oro);
  -webkit-text-stroke: 0.055em var(--carmin);
  paint-order: stroke fill;
  animation: subir 850ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.portada__titulo .linea--1 { animation-delay: 60ms; }
.portada__titulo .linea--2 { animation-delay: 200ms; }

@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 */
.pin {
  width: 18px; height: 18px; border-radius: 50%;
  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;
}
.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 {
  font-size: 0.7rem; padding: 0.4rem 0.8rem;
  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__acciones { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.8rem; }
.tarjeta__enlace {
  font-size: 0.7rem; color: var(--carmin-osc); text-decoration: none;
  border: 0; background: none; padding: 0 0 2px; cursor: pointer;
  border-bottom: 2px solid 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(--carmin); }

.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);
  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);
  box-shadow: var(--sombra-dura);
  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 {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 0.62rem; color: var(--gris-claro); opacity: 0;
  transition: opacity var(--transicion), color var(--transicion);
}
.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 {
  font-family: var(--display); font-size: clamp(2rem, 6vw, 3.6rem);
  color: var(--oro); -webkit-text-stroke: 0.035em var(--carmin);
  paint-order: stroke fill;
  letter-spacing: 0.02em; margin: 0 0 1rem; text-transform: uppercase;
  transform: skewX(-5deg);
}
.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; }
}