/* Dónde hace falta ayuda — Litoral
   Estudio Houston · octubre 2026

   Una pantalla por paso, pensada para un celular. Todo lo que hay que tocar
   mide 48 píxeles o más, y nunca hay dos decisiones en la misma pantalla.
   Paleta oficial: navy #001434, naranja #FF8926 / #FF9926. */

:root {
  /* La paleta sale del logo (unaGauchada.ar.ai): amarillo #FFCE00 sobre gris
     #333333, con el ocre #EFB111 del patron. Los nombres de las variables
     quedan como estaban a proposito --navy es ahora el gris oscuro y
     --naranja el amarillo para no tocar 40 lugares del archivo. */
  --navy: #242424;          /* gris profundo. El del logo (#333333) quedaba lavado en pantalla */
  --naranja: #FFCE00;       /* el amarillo del logo, antes naranja */
  --naranja-2: #FFD93D;     /* un punto mas claro, para hovers */
  --ocre: #EFB111;          /* el del patron: amarillo que SI se lee sobre blanco */
  --gris: #8A8A8A;
  --gris-texto: #555555;
  --card: #F2F2F0;
  --naranja-suave: #FFF6D9;
  --blanco: #ffffff;
  --verde: #1f8a5b;
  --azul: #1f5f9e;
  --azul-suave: #F3F3F1;
  --rojo: #c62828;
  --borde: #DCDCD8;

  --ancho: 40rem;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(0, 20, 52, .12), 0 8px 24px rgba(0, 20, 52, .06);
  --tipo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 1rem;
  /* Medium, no Regular: a tamaño chico y sobre fondo claro la Montserrat 400
     se lee demasiado fina, sobre todo en los textos grises. Los títulos y las
     etiquetas ya declaran su propio peso, así que esto solo levanta el cuerpo. */
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  background: var(--blanco);
}

h1, h2, h3 { text-wrap: balance; margin: 0 0 .5rem; line-height: 1.15; }
h1 { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

/* ======================================================== barra de arriba */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy);
  color: var(--blanco);
  border-bottom: 3px solid var(--naranja);
}

.barra__interior {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .5rem;
  min-height: 56px;
}

.volver {
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  background: transparent;
  border: 0;
  color: var(--blanco);
  cursor: pointer;
  padding: .6rem .25rem;
  min-height: 44px;
  flex: none;
}

.barra__donde {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #B5B5B5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================== pantallas */

.pantalla { padding-block: 2rem 3rem; }

.pantalla--inicio {
  /* Degrade gris apenas perceptible: le saca lo plano al fondo sin que se
     note que hay dos colores. De #3A3A3A a #2B2B2B. */
  background: linear-gradient(170deg, #2E2E2E 0%, #242424 45%, #181818 100%);
  color: var(--blanco);
  padding-block: 3rem 3.5rem;
  border-bottom: 5px solid var(--naranja);
}

.pantalla--final {
  background: var(--card);
  min-height: 60vh;
}

.marca {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanco);   /* en blanco: el amarillo se guarda para el logo y el boton */
  margin-bottom: .75rem;
}

.bajada { font-size: 1.05rem; color: var(--gris-texto); max-width: 32rem; }
.pantalla--inicio .bajada { color: #DADADA; }

.paso {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre);   /* sobre blanco el amarillo no se lee: va el ocre */
  margin-bottom: .4rem;
}

.sello {
  display: inline-block;
  background: var(--verde);
  color: var(--blanco);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

.nota { color: var(--gris-texto); font-size: .95rem; max-width: 32rem; }

.resumen {
  margin-top: 1.75rem;
  font-size: .88rem;
  color: #B5B5B5;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 1rem;
}

.subtitulo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 1.5rem 0 .25rem;
}

/* ============================================================== elecciones */

.eleccion { display: grid; gap: .75rem; margin-top: 1.5rem; }
.eleccion--lista { margin-top: 1.25rem; }

.opcion {
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.1rem 1.25rem;
  min-height: 72px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  background: var(--blanco);
  color: var(--navy);
  transition: transform .1s ease, border-color .15s ease;
}
.opcion:active { transform: scale(.99); }

.opcion__titulo { font-size: 1.15rem; font-weight: 800; }
.opcion__nota { font-size: .86rem; opacity: .75; }

.opcion--naranja { background: var(--naranja); }
.opcion--naranja:hover { background: var(--naranja-2); }
.opcion--claro { background: var(--blanco); }
.opcion--claro:hover { background: #EDEDEB; }

.opcion--linea {
  background: var(--card);
  border-color: var(--borde);
}
.opcion--linea:hover { border-color: var(--naranja); background: var(--naranja-suave); }
.opcion--urgente { border-left: 6px solid var(--rojo); }

/* ================================================================= botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.boton--primario { background: var(--naranja); color: var(--navy); }
.boton--primario:hover { background: var(--naranja-2); }
.boton--claro { background: var(--blanco); color: var(--navy); border-color: var(--borde); }
.boton--claro:hover { background: #EDEDEB; }
.boton--borde { background: transparent; border-color: currentColor; color: inherit; }
.boton--borde:hover { background: rgba(255, 137, 38, .14); }
.boton--chico { min-height: 44px; padding: .45rem 1rem; font-size: .9rem; }
.boton--ancho { width: 100%; margin-top: 1.25rem; }
.boton[disabled] { opacity: .55; cursor: progress; }

/* ================================================================= campos */

.campo { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; min-width: 0; }
.campo--doble { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 34rem) {
  .campo--doble { grid-template-columns: 1fr 1fr; align-items: start; }
}

label { font-weight: 600; font-size: .95rem; }
.obligatorio { color: var(--rojo); }

input[type="text"], input[type="tel"], input[type="number"], input[type="date"], textarea, select {
  font: inherit;
  width: 100%;
  min-height: 52px;
  padding: .7rem .85rem;
  border: 2px solid #CCCCCC;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--navy);
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--naranja); }

.ayuda { font-size: .82rem; color: var(--gris); margin: 0; }

.casilleros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.casillero {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--blanco);
  border: 2px solid #CCCCCC;
  border-radius: var(--radio);
  padding: .7rem .8rem;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 56px;
}
.casillero input { width: 22px; height: 22px; accent-color: var(--naranja); flex: none; }
.casillero:has(input:checked) { border-color: var(--naranja); background: var(--naranja-suave); }

.interruptor {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  color: var(--gris-texto);
  cursor: pointer;
  padding-block: .4rem;
}
.interruptor input { width: 22px; height: 22px; accent-color: var(--naranja); flex: none; }
.interruptor--alto { align-items: flex-start; padding-top: 1.9rem; }

.error {
  background: #ffe2e2;
  color: #8e1b1b;
  border-radius: var(--radio);
  padding: .8rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  margin: 1.25rem 0 0;
}

.aviso {
  background: var(--naranja-suave);
  border-left: 4px solid var(--naranja);
  border-radius: 6px;
  padding: .8rem .9rem;
  font-size: .86rem;
  color: #6b3b00;
  margin: 1.25rem 0 0;
}

/* =================================================================== mapas */

.mapa {
  height: 22rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  margin-top: .5rem;
  background: var(--card);
  z-index: 0;
}
.mapa--chico { height: 15rem; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--gris-texto);
}

.punto {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  margin-right: .25rem;
  vertical-align: -1px;
}
.punto--urgente { background: var(--rojo); }
.punto--pendiente { background: var(--ocre); }
.punto--camino { background: var(--azul); }
.punto--deposito { background: var(--navy); border-radius: 2px; }
.punto--resuelto { background: var(--verde); }

.marcador {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.marcador--urgente { background: var(--rojo); }
.marcador--pendiente { background: var(--ocre); border-color: var(--navy); }
.marcador--camino { background: var(--azul); }
.marcador--deposito { background: var(--navy); border-radius: 3px; }
.marcador--resuelto { background: var(--verde); }

/* ================================================================ tarjetas */

.lista, .puntos-zona { display: grid; gap: 1rem; }

.pedido {
  border: 1px solid #d9dfea;
  border-left: 5px solid var(--naranja);
  border-radius: var(--radio);
  padding: 1rem;
  background: var(--blanco);
  box-shadow: var(--sombra);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pedido--urgente { border-left-color: var(--rojo); }
.pedido--camino { border-left-color: var(--azul); }
.pedido--deposito { border-left-color: var(--navy); }
.pedido--resuelto { border-left-color: var(--verde); opacity: .72; }

.pedido__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.pedido__zona { font-weight: 700; font-size: 1.05rem; margin: 0; }
.pedido__calle { font-size: .88rem; color: var(--gris-texto); margin: 0; }
.pedido__detalle { font-size: .9rem; margin: 0; color: var(--gris-texto); }
.pedido__datos { font-size: .82rem; color: var(--gris); margin: 0; font-variant-numeric: tabular-nums; }
.pedido__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; }

.etiqueta {
  background: var(--naranja-suave);
  color: #8a4a00;
  border-radius: 6px;
  padding: .2rem .5rem;
  font-size: .78rem;
  font-weight: 600;
}
.etiqueta--urgente { background: #ffe2e2; color: #8e1b1b; }
.etiqueta--cubierta { background: #EFEFED; color: #5a6782; }
.etiqueta--oficial { background: var(--navy); color: var(--blanco); }

.vacio {
  color: var(--gris-texto);
  background: var(--card);
  border-radius: var(--radio);
  padding: 1.5rem;
  text-align: center;
  margin: 0;
}

/* ------------------------------------------------------- quién va a ir --- */

.ayudas {
  background: var(--azul-suave);
  border-radius: 8px;
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ayudas__titulo {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
}

.ayuda-fila { display: flex; flex-direction: column; gap: .15rem; }
.ayuda-fila + .ayuda-fila { border-top: 1px solid rgba(0, 20, 52, .1); padding-top: .6rem; }
.ayuda-fila__quien { margin: 0; font-weight: 600; font-size: .92rem; }
.ayuda-fila__lleva { margin: 0; font-size: .86rem; color: var(--gris-texto); }
.ayuda-fila__detalle { margin: 0; font-size: .82rem; color: var(--gris); }

/* ============================================================== la ficha */

.ficha {
  background: var(--card);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-top: 1rem;
}
.ficha__etiqueta {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  margin: .75rem 0 0;
}
.ficha__etiqueta:first-child { margin-top: 0; }
.ficha__dato { font-size: 1.1rem; font-weight: 700; margin: 0 0 .25rem; }

/* ============================================================== plegable */

.plegable {
  margin-top: 2rem;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 0 1rem;
  background: var(--blanco);
}
.plegable summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  padding: 1rem 0;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.plegable[open] summary { border-bottom: 1px solid #E7E7E5; }
.plegable .formulario { padding-bottom: 1.5rem; }

/* =============================================================== estrofa */

.estrofa { background: var(--navy); color: var(--blanco); padding-block: 3rem; }
.estrofa blockquote { margin: 0; text-align: center; }
.estrofa p {
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.estrofa cite {
  font-style: normal;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
}

/* =================================================================== pie */

.pie {
  background: var(--navy);
  color: #DADADA;
  padding-block: 2rem 2.5rem;
  font-size: .88rem;
  border-top: 3px solid rgba(255, 255, 255, .1);
}
.pie strong { color: var(--blanco); }
.pie__emergencias { color: var(--naranja); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ================================================================== firma */
/* La marca va al pie del todo, sobre blanco y chica: la página es de la
   gente, no una pieza de Houston. Pedido de Raul, 29/10. */

.firma {
  background: var(--blanco);
  border-top: 3px solid var(--naranja);
  padding-block: 2rem 2.5rem;
}

.firma__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.firma img { width: 92px; height: auto; flex: none; }

.firma__texto { min-width: 0; }
.firma__texto p { margin: 0 0 .35rem; font-size: .9rem; color: var(--gris-texto); }
.firma__texto strong { color: var(--navy); }

.firma__links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.firma__links a {
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--naranja);
  padding-bottom: 1px;
  font-size: .95rem;
}
.firma__links a:hover { color: var(--naranja); }


/* ------------------------------------------------------------------ pasalo
   El bloque de compartir. Va con fondo claro a proposito: corta entre la
   aplicacion y el navy del pie, y se ve apenas uno termina de leer. */
.pasalo {
  background: var(--naranja-suave);
  border-block: 3px solid var(--naranja);
  padding-block: 2.25rem 2.5rem;
}
.pasalo__titulo {
  margin: 0 0 .4rem;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  color: var(--navy);
}
.pasalo__nota {
  margin: 0 0 1.15rem;
  max-width: 34rem;
  font-size: .95rem;
  color: var(--gris-texto);
}
.pasalo__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.pasalo__aviso {
  margin: .8rem 0 0;
  min-height: 1.2em;
  font-size: .88rem;
  font-weight: 700;
  color: var(--verde);
}
.compartir-inicio { margin-top: 1.15rem; }


/* -------------------------------------------------------------- descriptor
   La bajada del nombre. «Una gauchada» es el nombre y queda fijo; esta linea
   dice de que se trata hoy, y es lo unico que hay que cambiar si manana el
   problema es un incendio o un temporal en vez de una crecida. */
.descriptor {
  font-size: clamp(2.25rem, 9.6vw, 3.3rem);
  font-weight: 300;              /* Montserrat fina */
  color: var(--naranja);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.005em;
  max-width: none;
  text-wrap: balance;            /* reparte las dos lineas donde se puede */
  margin: .15rem 0 1.7rem;
}


/* --------------------------------------------------------------- pasos
   Los tres golpes del inicio. Reemplazan a la bajada larga: el que cae de
   un grupo de Facebook sin saber que es esto tiene tres segundos de
   atencion, y una frase de dos renglones no se lee. */
.pasos {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .55rem;
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 600;
  color: var(--blanco);
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--naranja);
  color: var(--navy);
  font-size: .85rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}


/* ----------------------------------------------------------- logotipo
   El h1 es el logotipo. El alt lleva el nombre, asi que el buscador y el
   lector de pantalla siguen leyendo 'unaGauchada.ar' aunque no haya texto. */
.logotipo img {
  width: 100%;
  max-width: 17rem;
  height: auto;
  display: block;
  /* Se dibuja de izquierda a derecha al cargar, como si lo escribieran. */
  animation: escribir 1.15s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes escribir {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}


/* ------------------------------------------------------------ latido
   Un punto que late al lado del contador. No es un adorno: el contador es
   el unico dato en vivo de la pantalla, y latiendo dice 'esto esta pasando
   ahora'. Lento a proposito: es una pagina sobre gente con el agua adentro,
   no una alarma. */
.resumen { display: flex; align-items: baseline; gap: .55rem; }
.resumen::before {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--naranja);
  transform: translateY(-1px);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 206, 0, .55); }
  50%      { opacity: .45; box-shadow: 0 0 0 7px rgba(255, 206, 0, 0); }
}

/* ========================================================== SEÑALÉTICA
   Lenguaje tomado de las referencias de cartelería que cargó Raul (mesa 6
   del .ai): paneles de destino con el nombre, el dato chico y una flecha
   gorda a la derecha. Encaja de casualidad perfecta, porque lo que hace
   esta página es exactamente eso: decirte adónde ir y qué hay. */

.eleccion--lista .opcion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  border-left: 7px solid var(--navy);
  border-radius: 4px;            /* casi recto, como un cartel */
  padding: .95rem 1.1rem;
}
.eleccion--lista .opcion__titulo { grid-column: 1; line-height: 1.15; }
.eleccion--lista .opcion__nota   { grid-column: 1; }

/* La flecha. Es el gesto que hace que un bloque sea un cartel y no una caja. */
.eleccion--lista .opcion::after {
  content: "↗";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  transition: transform .12s ease;
}
.eleccion--lista .opcion:hover::after { transform: translate(3px, -3px); }

/* El borde izquierdo dice el estado sin leer nada, igual que el color de
   un cartel de ruta. */
.eleccion--lista .opcion--urgente { border-left-color: var(--rojo); }

/* La etiqueta inclinada, de las referencias: negra, chiquita, torcida.
   Se usa para el estado, que es el dato que hay que ver de un saque. */
.cartelito {
  display: inline-block;
  background: var(--navy);
  color: var(--naranja);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  margin-right: .4rem;
  transform: rotate(-2.5deg);
}
.cartelito--urgente { background: var(--rojo); color: #fff; }
.cartelito--solo    { background: var(--ocre); color: var(--navy); }


/* ----------------------------------------------------- botones de cartel
   Los dos botones grandes, en el lenguaje de los bloques PARK ZONE de la
   referencia: color pleno, titulo en mayuscula, icono a la izquierda y la
   flecha gorda a la derecha. Esquinas casi rectas: un cartel no las tiene
   blandas. */
.opcion--cartel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1.05rem;
  row-gap: .15rem;
  align-items: center;
  border-radius: 4px;
  padding: 1.15rem 1.2rem;
}
.opcion__icono { grid-row: 1 / span 2; width: 3.2rem; height: 3.2rem; flex: none; }
.opcion--cartel .opcion__titulo {
  grid-column: 2;
  align-self: end;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.1rem, 4.4vw, 1.3rem);
}
.opcion--cartel .opcion__nota { grid-column: 2; align-self: start; }
.opcion--cartel::after {
  content: "↗";
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  transition: transform .12s ease;
}
.opcion--cartel:hover::after { transform: translate(3px, -3px); }

/* El relleno del icono sale del fondo del boton: por eso el mismo dibujo
   sirve sobre el amarillo y sobre el blanco. */
.opcion--cartel .sombra {
  fill: #000; stroke: #000; stroke-width: 7;
  stroke-linejoin: round; stroke-linecap: round;
}
.opcion--cartel .cuerpo {
  stroke: #000; stroke-width: 6.5; fill: var(--papel, #fff);
  stroke-linejoin: round; stroke-linecap: round;
}
.opcion--cartel .cuerpo .vacio { fill: none; }
.opcion--naranja { --papel: var(--naranja); }
.opcion--naranja:hover { --papel: var(--naranja-2); }
.opcion--claro { --papel: var(--blanco); }
.opcion--claro:hover { --papel: #EDEDEB; }


/* -------------------------------------------------- marcadores con simbolo
   Cada marcador del mapa lleva su simbolo adentro, en el lenguaje de los
   pictogramas de senalizacion. El que espera no lleva ninguno: es el estado
   normal, y el simbolo esta para marcar lo que se sale de ahi. */
.marcador {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  box-sizing: border-box;
}
.marcador--pendiente { width: 18px; height: 18px; }

/* El punto de donaciones: un cuadrado con una cajita blanca adentro. */
.marcador--deposito { border-radius: 5px; }
.marcador--deposito::before {
  content: "";
  width: 12px;
  height: 9px;
  border: 2.5px solid #fff;
  border-radius: 1px;
  box-shadow: inset 0 2.5px 0 #fff;
}

/* La leyenda usa los mismos simbolos que el mapa, o no sirve de leyenda. */
.punto {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.punto--pendiente { width: .75rem; height: .75rem; }
.punto--deposito { border-radius: 3px; }
.punto--deposito::before {
  content: "";
  width: 8px; height: 6px;
  border: 1.6px solid #fff;
  border-radius: 1px;
  box-shadow: inset 0 1.6px 0 #fff;
}

/* ================================================= BOTONES, UNIFICADOS
   Raul marcó que los botones de «Pasalo» no convivían con el resto: los
   cartelitos tienen actitud y los botones eran de catálogo. Ahora todos
   hablan el mismo idioma que la cartelería: esquinas casi rectas, título
   en mayúscula y apretado. Un botón de cartel no tiene las esquinas
   blandas ni habla en minúscula. */
.boton {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
}

/* Las acciones que mandan algo a algún lado llevan la flecha, igual que
   los bloques de la lista. */
.boton--primario::after,
.pasalo__botones .boton--claro::after {
  content: "↗";
  margin-left: .5rem;
  font-size: 1.15em;
  line-height: 0;
  display: inline-block;
  transform: translateY(.08em);
  transition: transform .12s ease;
}
.boton--primario:hover::after,
.pasalo__botones .boton--claro:hover::after { transform: translate(3px, calc(.08em - 3px)); }

/* El título del bloque es una etiqueta pegada, como las de la referencia:
   negra, torcida, con el nombre adentro. */
.pasalo__titulo {
  display: inline-block;
  background: var(--navy);
  color: var(--naranja);
  padding: .3rem .85rem .35rem;
  transform: rotate(-2deg);
  margin-bottom: .9rem;
}


/* ------------------------------------------------- iconos de necesidades */
.casillero { --papel: var(--blanco); }
.casillero:has(input:checked) { --papel: var(--naranja-suave); }
.casillero .icono { width: 2rem; height: 2rem; flex: none; }
.casillero .sombra {
  fill: #000; stroke: #000; stroke-width: 7;
  stroke-linejoin: round; stroke-linecap: round;
}
.casillero .cuerpo {
  stroke: #000; stroke-width: 6.5; fill: var(--papel);
  stroke-linejoin: round; stroke-linecap: round;
}
.casillero .cuerpo .vacio { fill: none; }

/* ===================================== CORRECCIONES DE COMPOSICIÓN (1/11)
   Raul: «la sombra no le queda bien» y «esta parte hay que reformularla».

   1. LA SOMBRA SE VA EN TAMAÑO CHICO. En la referencia esos iconos están a
      tamaño de lámina; a 2-3 rem adentro de un botón, la silueta corrida
      sólo ensucia la forma. Se conserva el dibujo, se apaga la sombra. */
.opcion--cartel .sombra,
.casillero .sombra { display: none; }
.opcion--cartel .cuerpo,
.casillero .cuerpo { stroke-width: 5.5; }

/* 2. LOS TRES PASOS DEJAN DE PARECER UN TERCER BOTÓN. Antes eran tres
      círculos amarillos rellenos, que competían con el botón amarillo de
      abajo: cuatro amarillos apilados. Ahora es una regla vertical y el
      número en hueco. Dice lo mismo y pesa la mitad. */
.pasos { border-left: 3px solid var(--naranja); padding-left: 1rem; margin-left: .15rem; }
.pasos li { padding-left: 1.6rem; font-weight: 500; }
.pasos li::before {
  background: none;
  color: var(--naranja);
  font-size: .95rem;
  width: 1.1rem;
  height: auto;
  top: 0;
}

/* 3. AIRE ALREDEDOR DEL LOGO. Era el primer renglón de una lista; ahora es
      el encabezado. */
.pantalla--inicio .marca { margin-bottom: 1.1rem; }
.pantalla--inicio .eleccion { margin-top: 1.9rem; }

/* 4. EL CONTADOR SE PEGA A LOS BOTONES. Es la prueba de que hay algo del
      otro lado: separado flotaba. */
.resumen { margin-top: 1.1rem; border-top: none; padding-top: 0; font-size: .85rem; }

/* 5. EL BOTÓN DE COMPARTIR SALE DEL INICIO. Estaba repetido con el bloque
      «Pasalo» de más abajo y sumaba una cuarta caja a la pila. */
.compartir-inicio { display: none; }

/* ================================================= EL INICIO EN DOS MITADES
   Idea de Raul, mirando una landing: la mitad de la pantalla es una imagen.
   Sólo que en vez de una foto va EL MAPA DE VERDAD, con los pedidos que hay
   ahora. Una foto de una inundación sería decoración; el mapa es la prueba. */
.envoltorio--ancho { max-width: 64rem; }

.inicio__grilla { display: grid; gap: 1.5rem; }
.inicio__texto { min-width: 0; }
.inicio__mapa { min-width: 0; display: grid; gap: .8rem; align-content: start; }

.mapaHero {
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--naranja);
  background: #DADADA;
}
.mapaHero .leaflet-container { background: #DADADA; }

/* Las pastillas: el dato en vivo, leído de un vistazo. El número en amarillo
   y la palabra chica al lado, como el «40 / years of experiences» de la
   referencia — con la diferencia de que el nuestro es real y se actualiza. */
.pastillas { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.pastilla {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: .35rem .85rem .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: #DADADA;
}
.pastilla b {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--naranja);
  line-height: 1;
}
.pastilla--aviso { border-style: dashed; color: #B5B5B5; }

@media (min-width: 56rem) {
  .inicio__grilla {
    grid-template-columns: 1fr 1fr;
    gap: 2.6rem;
    align-items: center;
  }
  .mapaHero { height: 400px; }
}

/* ============================== JERARQUÍA DEL INICIO, VUELTA DADA (1/11)
   Raul: «unaGauchada.ar va más chico, y Dónde hace falta ayuda más grande,
   en dos líneas, con una versión más fina de la tipografía».
   Es el criterio correcto para esto: en una emergencia importa más lo que
   la página HACE que cómo se llama. La marca queda de firma; el mensaje,
   de titular. */
.logotipo img { max-width: 11.5rem; }


/* El logotipo y el titular quedaron pegados al cambiar la jerarquía: con los
   dos en amarillo y sin aire en el medio se leían como un solo bloque. */
.logotipo { margin: .3rem 0 .85rem; line-height: 0; }

/* El titular en mayúscula (pedido de Raul). Con el peso fino queda editorial,
   y encaja con el idioma de la cartelería, que habla en mayúscula.
   Los ajustes que pide la caja alta: no comprimir las letras —en mayúscula
   el espaciado negativo las amontona—, interlínea más corta porque no hay
   descendentes, y más ancho de caja porque la mayúscula ocupa más. */

/* Al doble, para ver (pedido de Raul). A este tamaño la caja de 13ch ya no
   entra en un celular, así que se suelta y parte sola contra el ancho; y la
   interlínea baja todavía más, porque en display la mayúscula pide menos aire
   entre renglones. */

/* El doble era mucho: queda en el medio. Más grande que el original pero sin
   comerse la pantalla, y en el celular entra en dos o tres renglones. */


/* ================================================== EL PIE (pedido de Raul)
   1. La firma de Martín Fierro, fina y chica: es un pie de cita, no un
      titular. Antes competía con la estrofa. */
.estrofa cite { font-weight: 300; font-size: .68rem; opacity: .85; }

/* 2. Los números de emergencia, uno por renglón y con el mismo gesto que la
      etiqueta de «Pasalo»: un bloque pegado y apenas torcido. Sobre el fondo
      oscuro el bloque va en amarillo —uno negro no se vería—, con el texto
      en gris oscuro.
      Y van como enlace `tel:`: en un celular, en una emergencia, se marcan
      de un toque en vez de copiarse a mano. */
.emergencias {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.emergencia {
  display: inline-block;
  background: var(--naranja);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .32rem .85rem .38rem;
  transform: rotate(-1.6deg);
}
.emergencia b { font-size: 1.05rem; letter-spacing: .02em; }
.emergencia:hover { background: var(--naranja-2); }
/* Cada una con su inclinación: así parecen pegadas y no generadas. */
.emergencias li:nth-child(2) .emergencia { transform: rotate(1.1deg); }
.emergencias li:nth-child(3) .emergencia { transform: rotate(-.7deg); }

/* Centrado (pedido de Raul): así se alinea con la estrofa de arriba, que ya
   estaba centrada, y el pie queda como un bloque y no como dos criterios. */
.pie { text-align: center; }
.emergencias { align-items: center; }

/* La firma de Houston, centrada y en dos renglones (pedido de Raul). */
.firma__interior {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
}
.firma__links { justify-content: center; }

/* Al meterle el icono, al texto le quedó menos lugar y las palabras largas
   —«Medicamentos», «electrodomésticos»— se cortaban contra el borde. En un
   casillero de un formulario eso no es un detalle: hay que poder leer qué
   se está marcando. */
.casillero span {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
}
.casillero .icono { width: 1.75rem; height: 1.75rem; }
.casilleros { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }


/* ------------------------------------------------------------------ origen
   «Por qué existe esto»: cuenta de dónde sale la página y qué hace. Pedido
   por Raul el 1/11 para que vaya ARRIBA de la estrofa de Martín Fierro.
   Va en blanco entre «Pasalo» (amarillo claro) y la estrofa (gris oscuro):
   es el único texto largo de la página, así que tiene que ser el más fácil
   de leer de todos, y de paso corta la transición de amarillo a gris.
   El título repite el gesto de «Pasalo» —bloque pegado y apenas torcido—
   para que los dos se lean como de la misma familia. */
.origen {
  background: var(--blanco);
  padding-block: 2.5rem 2.75rem;
}
.origen__titulo {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .3rem .85rem .35rem;
  background: var(--navy);
  color: var(--naranja);
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  transform: rotate(-2deg);
}
.origen p {
  margin: 0 0 .85rem;
  max-width: 34rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--gris-texto);
}
.origen strong { color: var(--navy); }

/* La primera línea es la idea entera en un renglón: va más grande y en tinta
   firme. `p.origen__lead` y no `.origen__lead` a propósito —`.origen p` le
   gana por especificidad y haría falta un !important. */
.origen p.origen__lead {
  font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}