/* ==========================================================================
   27 · DOMICILIOS — el mapa manda

   Antes esto era una planilla de kilometros y, despues, una foto del barrio con
   bandas rellenas encima. Las dos fallaban por lo mismo: nadie sabe donde
   quedan sus 2,5 km, y un relleno encima de la ciudad borra el unico dato con
   el que se decide —por donde pasa el borde—.

   Ahora el mapa se arrastra, los aros son BORDE con forro de crema debajo, y
   los numeros viven al lado, no encima de las calles.
   ========================================================================== */

.domi {
  background: var(--surface);
  border: 1px solid var(--linea-sutil);
  border-radius: 18px;
  padding: 20px 22px 16px;
  margin-bottom: 22px;
}

.domi__cab h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.18rem;
  margin: 0 0 6px;
}

.domi__cab h2 svg { width: 22px; height: 22px; color: var(--rojo); }

.domi__cab p {
  margin: 0 0 16px;
  max-width: 66ch;
  color: var(--tinta-3);
  font-size: .92rem;
  line-height: 1.5;
}

.domi__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea-sutil);
}

/* ==========================================================================
   28 · EL LIENZO — el motor de mapa, sin nada de este cliente

   Lo pinta `panel/js/21-lienzo.js`. Va acá y no en su propia hoja porque hoy lo
   usa una sola pantalla; el dia que lo use otra, se saca y se pone antes de
   esta —el orden de los <link> del panel ES la cascada—.

   `.lz__mundo` es lo unico que se transforma, y lleva `will-change` porque se
   mueve en cada cuadro de un arrastre: sin eso el navegador recompone la capa
   entera y el arrastre se siente pegajoso en un portatil modesto.
   ========================================================================== */

.lz {
  position: relative;
  overflow: hidden;
  background: #ece4d8;              /* el color del papel de OpenStreetMap */
  cursor: grab;
  touch-action: none;               /* al arrastrar el mapa no se mueve la pagina */
  user-select: none;
}

.lz--moviendo { cursor: grabbing; }

.lz__mundo {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  z-index: 1;
}

/* Cada tesela entra con un desvanecido corto. Aparecer de golpe, una a una y en
   desorden, se ve como un error de carga; asi se lee como que el mapa se esta
   dibujando. */
.lz__t {
  position: absolute;
  opacity: 0;
  transition: opacity .2s linear;
  pointer-events: none;
}

.lz__t--ok { opacity: 1; }

/* Las del nivel anterior se quedan OPACAS hasta que se retiran. Desvanecerlas
   mientras entran las nuevas dejaria un momento con las dos a medias y el fondo
   asomando entre ellas, que es justo el parpadeo que se queria evitar. */
.lz__t--vieja { opacity: 1; transition: none; }

.lz__capa {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;             /* el contenedor decide que se agarra */
  overflow: visible;
}

/* ==========================================================================
   28b · GOOGLE MAPS

   El mapa de Google va en un div PROPIO con su propio contexto de apilamiento
   (`z-index: 1`). Si se le entrega el contenedor pelado, sus divs quedan al
   lado de los mandos flotantes y su logo —que lleva un z-index enorme— se sube
   encima de todo. Encerrandolo, todo lo suyo queda contenido debajo.

   El logo y los avisos legales de Google NO se tapan ni se quitan: su licencia
   lo exige y ademas son lo que dice de donde sale el mapa.
   ========================================================================== */

.gmapa__cuadro {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #e8e0d5;
}

.gmapa__capa {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;             /* el contenedor decide que se agarra */
  overflow: visible;
}

/* La regla de escala se sube por encima del logo de Google, que vive abajo a la
   izquierda. Encimarselo seria taparle la marca a quien nos presta el mapa. */
.domi-lienzo--google .domi-escala { bottom: 32px; }

/* El credito de OpenStreetMap. Su licencia (ODbL) obliga a decir de donde sale
   el mapa, y aca hace mas falta que en ningun sitio: las teselas se sirven
   desde nuestro propio dominio y nada mas las delata. */
.lz__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2px 7px;
  border-radius: 8px 0 0 0;
  background: rgba(253, 244, 231, .82);
  color: var(--tinta-3);
  font-size: .64rem;
  text-decoration: none;
}

.lz__credito:hover { color: var(--tinta); text-decoration: underline; }

/* Lo que paso con el mapa, cuando paso algo. Amarillo y no rojo: la pantalla
   funciona igual, solo que con otro mapa. */
.domi-nota {
  margin: 0 0 14px;
  padding: 9px 13px;
  border-radius: 11px;
  background: var(--ambar-sua);
  border: 1px solid rgba(240, 144, 30, .35);
  color: var(--tinta-2);
  font-size: .84rem;
  line-height: 1.45;
}

/* ==========================================================================
   29 · EL TALLER — mapa a la izquierda, precios a la derecha
   ========================================================================== */

.domi-taller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 16px;
  align-items: start;
}

.domi-lienzo {
  position: relative;
  height: clamp(380px, 56vh, 560px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
}

/* El puntero dice que se puede agarrar antes de intentarlo: sin esto hay que
   descubrir por tanteo que el trazo del aro se arrastra. */
.domi-lienzo--aro, .domi-lienzo--moviendo { cursor: ew-resize; }

/* --- Los mandos flotantes -------------------------------------------------
   Vidrio sobre el mapa en vez de una barra encima: asi el mapa ocupa todo el
   cuadro —que es la pieza que hay que mirar— y los mandos no le quitan alto.
------------------------------------------------------------------------- */
.domi-flota {
  position: absolute;
  z-index: 3;
  background: rgba(253, 244, 231, .84);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 253, 249, .8);
  border-radius: 14px;
  box-shadow: var(--sombra-2);
}

.domi-flota--tl {
  top: 12px;
  left: 12px;
  display: grid;
  gap: 1px;
  padding: 8px 14px;
  max-width: 62%;
}

.domi-flota--tl b {
  font-family: var(--display);
  font-size: .95rem;
  line-height: 1.2;
}

.domi-flota--tl span {
  font-size: .78rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* Este no es una tarjeta: es el sitio donde se apilan tres, cada una con su
   propio vidrio. */
.domi-flota--tr {
  top: 12px;
  right: 12px;
  display: grid;
  justify-items: end;
  gap: 8px;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.domi-estilos, .domi-zoom {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

/* Los mandos van SOLIDOS y el vidrio se queda para los rotulos. En un boton
   opaco un `backdrop-filter` no deja pasar nada —no hay nada que dejar pasar—
   y a cambio abre un contexto de composicion que en algunos motores le lava el
   color al fondo. Se noto con el boton activo, que salia rosa palido con el
   texto invisible. */
.domi-estilos button, .domi-zoom button, .domi-volver {
  border: 0;
  background: var(--crema);
  color: var(--tinta-2);
  font-family: var(--sans);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.domi-estilos button {
  padding: 6px 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.domi-estilos button.on { background: var(--rojo); color: var(--crema); }

.domi-zoom button {
  width: 34px;
  height: 34px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.domi-volver {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  box-shadow: var(--sombra-2);
}

.domi-volver svg { width: 17px; height: 17px; color: var(--rojo); }

.domi-estilos button:hover:not(.on),
.domi-zoom button:hover:not(:disabled),
.domi-volver:hover { background: var(--surface); }

.domi-zoom button:disabled { color: var(--arena); cursor: default; }

.domi-estilos button:focus-visible,
.domi-zoom button:focus-visible,
.domi-volver:focus-visible { outline: 2px solid var(--rojo); outline-offset: -2px; }

/* --- La regla de escala ---------------------------------------------------
   Un corchete invertido debajo del numero, que es como se dibuja en cualquier
   mapa impreso. Dice de un golpe cuanto mide lo que se esta viendo, sin tener
   que buscar un aro y leerle el kilometraje.
------------------------------------------------------------------------- */
.domi-escala {
  bottom: 12px;
  left: 12px;
  padding: 5px 11px 7px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.domi-escala::after {
  content: '';
  display: block;
  width: var(--largo, 80px);
  height: 5px;
  margin-top: 3px;
  border: 2px solid var(--tinta-2);
  border-top: 0;
  transition: width .12s linear;
}

/* --- La pastilla de «probar una direccion» -------------------------------- */
.domi-prueba {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 20px));
  padding: 6px 13px 7px;
  display: grid;
  gap: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(253, 244, 231, .92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 253, 249, .8);
  border-radius: 13px;
  box-shadow: var(--sombra-2);
}

.domi-prueba--abajo { transform: translate(-50%, 14px); }

.domi-prueba b {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.domi-prueba span { font-size: .72rem; color: var(--tinta-3); }
.domi-prueba--fuera b { color: var(--rojo); }

/* ==========================================================================
   30 · LOS AROS

   La rampa de la marca, de cerca a lejos. Los siete pasos ya estan en
   01-base.css y van de lo calido a lo intenso, que es lo que se quiere decir.
   El color se define UNA vez en `--tono` porque lo comparten tres cosas —el
   trazo del aro, el tirador y la pastilla de la lista—: si se separan, la fila
   y su aro dejan de ser lo mismo a la vista.
   ========================================================================== */

/* Cada tono lleva SU propia opacidad, y no una sola para todos. Un rojo
   profundo al 8 % pesa el doble que un amarillo al 8 %: con la misma cifra para
   los siete, las bandas de fuera se ven mas sucias que las de dentro sin que
   eso signifique nada. Bajando la tinta segun se oscurece el tono, las siete
   pesan igual. */
.banda--0 { --tono: var(--amarillo);   --alfa: .10; }
.banda--1 { --tono: var(--naranja-cl); --alfa: .09; }
.banda--2 { --tono: var(--naranja);    --alfa: .08; }
.banda--3 { --tono: var(--rojo-vivo);  --alfa: .07; }
.banda--4 { --tono: var(--rojo);       --alfa: .065; }
.banda--5 { --tono: var(--rojo-osc);   --alfa: .055; }
.banda--6 { --tono: var(--rojo-prof);  --alfa: .05; }

/* Alrededor del 7 %: se intuye y no tapa. Da la sensacion de «mas cerca, mas
   calido» sin quitarle una sola calle al mapa. La version anterior iba entre el
   20 y el 42 % y por eso no se veia nada debajo. */
.banda {
  fill: var(--tono);
  fill-opacity: var(--alfa);
  transition: fill-opacity .16s var(--ease);
}

/* El que se esta tocando sube un pelo, lo justo para saber QUE pedazo de ciudad
   es esa fila. Subirlo mas seria repetir el error de las bandas rellenas: lo
   que se esta editando es el BORDE, y el borde lo señala el halo de abajo. */
.banda--on { fill-opacity: calc(var(--alfa) + .06); }

/* EL HALO ES EL RESALTE DE VERDAD.

   Al arrastrar un aro, lo que hay que ver es por donde va pasando la linea
   —sobre que calles cae— asi que la señal va PEGADA a la linea y no repartida
   por el area. Un trazo ancho y flojo del mismo tono la despega del mapa sin
   tapar nada mas alla de catorce pixeles a cada lado. */
.aro__halo {
  fill: none;
  stroke: var(--tono);
  stroke-width: 14;
  stroke-opacity: .2;
  pointer-events: none;
}

/* El forro va debajo del color para que el aro se lea igual sobre un parque
   verde, una avenida naranja o una manzana gris. Es lo que hace la cartografia
   de toda la vida con los rotulos, y sirve igual para una linea. */
.aro__forro {
  fill: none;
  stroke: var(--crema);
  stroke-width: 6;
  stroke-opacity: .75;
}

.aro {
  fill: none;
  stroke: var(--tono);
  stroke-width: 2.5;
  stroke-opacity: .95;
  transition: stroke-width .16s var(--ease);
}

.aro--on { stroke-width: 4; stroke-opacity: 1; }

.aro__t { pointer-events: none; }

.aro__punto {
  fill: var(--crema);
  stroke: var(--tono);
  stroke-width: 3.5;
  transition: r .16s var(--ease);
}

.aro__t--on .aro__punto { r: 9.5; }

/* --- El local, latiendo ---------------------------------------------------
   Cuesta diez lineas y es lo que hace que el mapa se vea vivo en vez de
   impreso. El pulso ademas señala el centro desde el que se mide todo, que es
   informacion y no adorno.
------------------------------------------------------------------------- */
.aro__centro { fill: var(--rojo); stroke: var(--crema); stroke-width: 3; }

.aro__latido {
  fill: none;
  stroke: var(--rojo);
  animation: domi-latido 2.4s var(--ease-suave) infinite;
}

@keyframes domi-latido {
  0%   { r: 7;  stroke-width: 3; opacity: .65; }
  75%  { r: 26; stroke-width: 1; opacity: 0; }
  100% { r: 26; stroke-width: 1; opacity: 0; }
}

.aro__prueba path { fill: var(--nori); stroke: var(--crema); stroke-width: 2; }
.aro__prueba-ojo { fill: var(--crema); }

/* ==========================================================================
   31 · LA LISTA — cada aro con su precio
   ========================================================================== */

.domi-lista {
  background: var(--crema);
  border: 1px solid var(--linea-sutil);
  border-radius: 16px;
  padding: 14px 14px 16px;
}

.domi-lista h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1rem;
}

.domi-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.domi-fila {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 10px;
  transition: background .14s var(--ease);
}

.domi-fila--on { background: var(--surface); box-shadow: var(--sombra-1); }

/* No es adorno: es lo que dice QUE aro del mapa es esta fila. Sin ella hay que
   ir contando circulos de dentro hacia fuera, que es el trabajo que el mapa
   venia a quitar. */
.domi-pastilla {
  height: 26px;
  border-radius: 3px;
  background: var(--tono);
  opacity: .85;
}

.domi-fila--on .domi-pastilla { opacity: 1; }

.domi-campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 4px 10px;
}

.domi-campo:focus-within {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-sua);
}

.domi-campo span { color: var(--tinta-3); font-size: .82rem; }

.domi-campo input {
  width: 6ch;
  border: 0;
  background: transparent;
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tinta);
  text-align: right;
  padding: 2px 0;
}

.domi-campo input:focus { outline: none; }

/* El kilometro va en susurro: es el RESULTADO de arrastrar el aro, no la
   pregunta. Se puede teclear —a veces hace falta afinar sin arrastrar— pero no
   compite con el precio, que es la decision de verdad. */
.domi-hasta {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: .73rem;
  color: var(--tinta-3);
  white-space: nowrap;
}

.domi-hasta input {
  width: 3.4ch;
  border: 0;
  border-bottom: 1px dashed var(--linea);
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
  text-align: right;
  padding: 0 1px;
}

.domi-hasta input:focus { outline: none; border-bottom-color: var(--rojo); }

.domi-lista__pie {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea-sutil);
}

.domi-lista__pie .btn { width: 100%; justify-content: center; }

.domi-pista, .domi-sin {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--tinta-3);
  line-height: 1.45;
}

.domi-sin { margin: 0; }

/* ==========================================================================
   32 · LAS ZONAS — la tabla de barrios con precio propio
   ========================================================================== */

.domi-tabla { width: 100%; border-collapse: collapse; }

.domi-tabla td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--linea-sutil);
  vertical-align: middle;
}

.domi-tabla tr:last-child td { border-bottom: 0; }

.domi-precio { white-space: nowrap; font-variant-numeric: tabular-nums; }
.domi-quitar { width: 1%; text-align: right; }
.domi-veces { color: var(--tinta-3); font-size: .84rem; }
.domi-nueva { color: var(--arena); font-style: italic; }

/* ==========================================================================
   33 · Pantalla angosta

   El mapa arriba y la lista debajo. El mapa pierde alto pero no se parte: es la
   pieza con la que se decide, y una lista de cuatro numeros se lee igual de
   bien en una columna.
   ========================================================================== */
@media (max-width: 940px) {
  .domi-taller { grid-template-columns: minmax(0, 1fr); }
  .domi-lienzo { height: clamp(320px, 48vh, 460px); }
}

@media (max-width: 620px) {
  .domi { padding: 16px 14px 12px; }
  .domi-flota--tl { max-width: 54%; padding: 6px 11px; }
  .domi-flota--tl b { font-size: .86rem; }
  .domi-flota--tl span { font-size: .72rem; }
  .domi-estilos button { padding: 6px 11px; }

  .domi-fila { grid-template-columns: 6px auto auto 1fr; gap: 8px; }
  .domi-fila .domi-quitar, .domi-fila .btn--min { justify-self: end; }

  .domi-tabla--zonas, .domi-tabla--zonas tbody,
  .domi-tabla--zonas tr, .domi-tabla--zonas td { display: block; }
  .domi-tabla--zonas tr {
    position: relative;
    padding: 10px 44px 10px 0;
    border-bottom: 1px solid var(--linea-sutil);
  }
  .domi-tabla--zonas td { border-bottom: 0; padding: 3px 0; }
  .domi-tabla--zonas .domi-quitar { position: absolute; top: 12px; right: 0; width: auto; }
}

/* ==========================================================================
   34 · La tira de cotizar, dentro de la bandeja de WhatsApp

   Vive en este archivo y no en 15-whatsapp.css porque comparte `.domi-campo`
   con la pantalla de precios: el campo de pesos se ve igual en los dos sitios,
   y partirlo en dos hojas es como se empiezan a separar.

   Amarilla y no roja: es algo que hay que hacer, no algo que salio mal.
   ========================================================================== */

.wadom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 6px 14px;
  margin: 0; padding: 8px 12px 8px 12px;
  background: linear-gradient(100deg, rgba(247, 183, 51, .22), rgba(240, 144, 30, .12));
  border-top: 1px solid rgba(240, 144, 30, .35);
  animation: waal-entra .45s var(--resorte) both;
}

/* La pregunta y la dirección, un renglón cada una: lo que no cabe se corta y
   queda entero en el `title`. La dirección también está en el hilo. */
.wadom__que { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wadom__que > div { min-width: 0; }
.wadom__que svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%; flex: none;
  color: var(--nori); background: var(--naranja-cl);
}
.wadom__que strong, .wadom__que span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wadom__que strong { font-size: .9rem; line-height: 1.3; }
.wadom__que span { color: var(--tinta-2); font-size: .8rem; line-height: 1.35; }

/* La distancia solo aparece cuando el punto cayó FUERA del radio, así que
   cuando aparece es una advertencia, no un dato de adorno: va en el tono del
   aviso y no en el gris de la dirección. */
.wadom__km {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--naranja) 16%, transparent);
  /* El naranja de la marca sobre su propio tinte no se lee: hay que bajarlo.
     No se inventa un token nuevo para un sitio. */
  color: color-mix(in srgb, var(--naranja) 55%, var(--tinta));
  font-size: .74rem;
  font-style: normal;
  font-weight: 600;
}

.wadom__fila { display: flex; align-items: center; gap: 8px; }
.wadom__fila .domi-campo { background: var(--surface); padding-block: .35rem; }
.wadom__fila .domi-campo input { width: 7ch; font-size: 1.05rem; }
.wadom__fila .btn { padding: .5rem .85rem; }

/* El segundo renglón: dejarlo fijo y «no llegamos», en letra chica y en una
   línea —baja a otra solo si no caben—. Más callados que el precio: lo normal
   es que sí lleguen y que se cobre. */
.wadom__mas {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
  padding-left: 40px;
  color: var(--tinta-3);
  font-size: .78rem;
}
.wadom__mas .btn { padding: .22rem .6rem; font-size: .78rem; }

.wadom__guardar {
  display: flex; align-items: center; gap: 6px;
  margin: 0 auto 0 0;
}

.wadom__guardar input[type="text"] {
  width: 14ch;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  color: var(--tinta);
  padding: 2px 8px;
}

.wadom__guardar input[type="text"]:focus {
  outline: none;
  border-color: var(--naranja);
}

/* NO LLEGAMOS: fuera del radio (`--lejos`) sube de tono, porque ahí es tan
   probable como el sí. CANCELAR LA COTIZACIÓN es la ✕ del primer renglón
   (`.waal__x`, la de las otras franjas): no resuelve el domicilio, lo borra,
   y por eso es lo más callado. */
.wadom--lejos .wadom__no { background: var(--surface); border-color: var(--naranja); color: var(--tinta); font-weight: 600; }
.wadom__fila .waal__x { margin-left: -2px; }

/* La vista previa del mensaje, con cara de burbuja de WhatsApp: es exactamente
   lo que va a leer el cliente. */
.wafz { padding: 4px 0; }
.wafz__b {
  max-width: 34rem;
  margin-left: auto;
  padding: 10px 12px;
  border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, #25d366 16%, var(--surface));
  color: var(--tinta);
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.wafz__b a { color: inherit; text-decoration: underline; }

@media (max-width: 720px) {
  .wadom { grid-template-columns: 1fr; }
  .wadom__mas { padding-left: 0; }
}

/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .aro__latido { animation: none; opacity: 0; }
  .aro, .aro__punto, .banda, .domi-fila, .lz__t, .domi-escala::after { transition: none; }
  .lz__mundo { will-change: auto; }
}