/* ============================================================
   Báscula Garaipena — hoja de estilos única
   Reglas: sin esquinas redondeadas, el verde sólo para acciones,
   el rojo sólo como acento. Font-size mínimo 16px, excepto las
   etiquetas de dato -.franja__etiqueta y .pie__datos dt- que, por
   decisión explícita, pueden bajar a 12px (hoy están en 13px).
   Esa lista vive también en tools/verificar.py: si se agrega otra
   etiqueta, hay que agregarla en los dos lados.
   ============================================================ */

/* font-display: optional (no swap) en las dos fuentes precargadas: con
   swap, el h1 -que mide el ancho máximo en ch, así que literalmente
   cambia de tamaño según la fuente activa- se dibuja primero con la
   fuente de reemplazo, salta de línea distinto, y al terminar de cargar
   Roboto Serif se reacomoda: eso era el salto que se veía al recargar en
   celular. Con optional el navegador decide una sola vez, casi
   siempre a favor de la fuente real porque está precargada, y nunca
   reacomoda a mitad de render. */
@font-face {
  font-family: "Roboto Serif";
  src: url("../fonts/roboto-serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400-500.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --blanco: #ffffff;
  /* Neutros cálidos: un negocio de campo con blanco de oficina se enfría.
     --negro pasa a ser un carbón con tierra adentro, y la base de la
     página es un papel roto en vez de blanco puro. */
  --negro: #100f0d;
  --papel: #f4f1ea;
  --papel-hondo: #e9e4d8;
  --tinta: #171512;
  --rojo: #c1121f;
  --verde: #0b7a3d;
  --verde-hondo: #074522;

  /* Mismo matiz que --rojo (h355°, misma saturación), aclarado. --rojo
     puro sobre --negro da 3,03:1 -por debajo de los 4,5:1 que AA exige
     para texto normal-, así que no puede usarse para texto legible sobre
     el pie. Esta variante da 5,02:1: sigue leyéndose como "el rojo de la
     marca", con margen de sobra sobre el mínimo. Uso exclusivo: texto
     seguí usando --rojo: ahí ya da 6,2:1 de sobra. */
  --rojo-sobre-negro: #ee4451;

  --linea: rgba(23, 21, 18, 0.14);
  --gris: #6a635a;

  --radio: 10px;
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* Chevron -Heroicons, MIT- como máscara de color, para no repetir el
     SVG en el HTML. Se usa en las indicaciones de Cómo llegar. */
  --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8.25%204.5%207.5%207.5-7.5%207.5%22/%3E%3C/svg%3E");

  --titulo: "Roboto Serif", Georgia, serif;
  --texto: "Inter", system-ui, -apple-system, sans-serif;
  --numero: "Inter", system-ui, -apple-system, sans-serif;

  /* Tope de ancho del contenido: sin esto, en un monitor grande las
     líneas se estiran o el texto queda pegado al borde izquierdo con
     medio ancho de pantalla vacío al lado. */
  --ancho-max: 84rem;

  /* Alto real de la barra fija de acciones. En celular es lo que la barra
     tapa de la pantalla, y de ahí sale el alto de cada momento a pantalla
     completa; en el resto de los tamaños la barra no existe y vale cero. */
  --barra: 0px;
  --aire: clamp(1.75rem, 3.5vw, 3rem);
  --margen: clamp(1.15rem, 3.2vw, 2.5rem);
}

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

/* Nada lleva esquinas redondeadas salvo lo que las pide a propósito
   (botones y el mapa). El reset ya no lo prohíbe de forma global porque
   la regla del proyecto pasó a ser "esquinas suaves donde se toca". */

html {
  -webkit-text-size-adjust: 100%;
  /* Saca el rebote elástico al llegar arriba o abajo del todo -el
     "glow" de Edge/Chrome en Windows, el rubber-band en iOS/macOS-. */
  overscroll-behavior: none;
  /* La barra de desplazamiento también es parte de la página: con el
     estilo del sistema queda una franja azul-grisácea de Windows al
     costado de un papel cálido. Firefox usa estas dos propiedades. */
  scrollbar-width: thin;
  scrollbar-color: #a89f8e var(--papel-hondo);
}

/* Chrome, Edge y Safari. El borde del mismo color que el riel es lo que
   deja el pulgar angosto y centrado sin dibujar un segundo carril. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--papel-hondo); }

::-webkit-scrollbar-thumb {
  background: #a89f8e;
  border: 3px solid var(--papel-hondo);
  border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover { background: var(--gris); }
}

body {
  margin: 0;
  overscroll-behavior: none;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  /* 1.08 es interlineado de titular de UNA línea. El h1 real de la página
     ("El peso exacto de lo que sale de tu campo") envuelve a 2-3 líneas en
     celular, y ahí ese valor apretaba los renglones entre sí. */
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; }

/* Sin esto, Chrome/Safari en celular pintan un flash gris translúcido
   sobre todo el link o botón al tocarlo -el resaltado táctil por
   default-, que se ve como un brillo raro encima del degradado y la
   sombra propios. El :active de cada botón ya da su propio feedback. */
a, button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

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

/* Copiar el teléfono o la dirección es de las cosas que más se hacen acá.
   Sin esto, ese momento se pinta con el azul del sistema operativo: la
   única superficie de la página que no habla la paleta. */
::selection {
  background: var(--rojo);
  color: var(--blanco);
}

/* Oculto a la vista pero disponible para lectores de pantalla: nunca
   display: none, porque eso lo saca del árbol de accesibilidad y un
   role="status" con contenido oculto así jamás se anuncia. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- carga */

/* Pantalla de carga breve, sólo en CSS -sin JS de por medio-: se pinta
   opaca desde el primer instante y se desvanece sola por animación, así
   que nunca puede quedar trabada esperando a que algo la saque. */
.carga {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--negro);
  pointer-events: none;
  animation: carga-desvanecer .4s var(--curva) .35s forwards;
}

.carga img { width: 130px; height: auto; opacity: .9; }

@keyframes carga-desvanecer {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .carga { animation-duration: .01ms; animation-delay: .2s; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  /* svh (alto "chico", con la barra del navegador ya contada) en vez de
     dvh: dvh se recalcula en vivo, y en el celular la barra de direcciones
     se colapsa recién después de cargar la página -eso hacía que el hero
     creciera y todo lo de abajo saltara hacia arriba justo después del
     primer render-. Con svh el alto es estable desde el primer instante. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Zona franca para el logo, que vive en absoluto arriba a la izquierda. */
  padding-top: clamp(8rem, 18vh, 11rem);
  overflow: hidden;
  background: var(--negro);
}

@media (max-width: 700px) {
  :root { --barra: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* En el teléfono cada momento ocupa UNA pantalla, ni más ni menos. Antes
     el hero medía 88svh y en una misma vista entraban el final de la foto,
     el bloque de papel de la sección siguiente y el arranque de la otra
     foto: la página se leía a pedazos y donde terminaba una imagen asomaba
     una franja blanca.

     El alto es 100dvh MENOS lo que mide la barra fija: así el momento llena
     exactamente lo que se ve por encima de la barra, sin que por abajo
     asome nada de lo que viene. dvh y no svh porque es la única unidad que
     sigue a la barra de direcciones cuando se colapsa -con svh la sección
     queda unos 60px más corta que la pantalla y esa franja vuelve a
     aparecer-. La línea con svh queda arriba como respaldo para los
     navegadores que no entienden dvh. */
  .hero {
    min-height: calc(100svh - var(--barra));
    min-height: calc(100dvh - var(--barra));
    /* Zona franca para el logo + el teléfono debajo (~120px) y un respiro
       antes del titular: pegados se leían como un solo bloque apretado. */
    padding-top: 9rem;
  }
}

.hero picture {
  /* La foto (position: absolute) ya se posiciona contra .hero sin importar
     este envoltorio, pero display: contents saca a <picture> de la caja
     del flex layout para que no exista como ítem propio (vacío) entre la
     foto y .hero__texto. */
  display: contents;
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.12) saturate(0.85) brightness(0.72);
}

/* El zoom al pasar el mouse lo reemplazó el ambiente de abajo: la foto
   respira sola, sin depender de que alguien le pase el cursor por encima
   -que en celular, que es donde se mira esta página, no pasa nunca-. */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Dos velos: uno arriba, que asegura el contraste del logo sin dibujarle
     un recuadro encima; otro abajo, para el titular. Ninguno se percibe
     como una capa: se leen como la luz de la propia foto. */
  background:
    linear-gradient(to bottom,
      rgba(16, 15, 13, 0.55) 0%,
      rgba(16, 15, 13, 0.22) 13%,
      rgba(16, 15, 13, 0) 28%),
    linear-gradient(to top,
      rgba(16, 15, 13, 0.93) 0%,
      rgba(16, 15, 13, 0.78) 26%,
      rgba(16, 15, 13, 0.42) 52%,
      rgba(16, 15, 13, 0) 76%),
    radial-gradient(125% 85% at 12% 85%, rgba(16, 15, 13, 0.6), transparent 68%);
}

.hero__texto {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen) clamp(1.5rem, 3vw, 2.25rem);
  color: var(--blanco);
}

/* El titular es el protagonista de la página y tiene que crecer con la
   pantalla: con el tope viejo -2.15rem- quedaba del mismo tamaño en un
   celular que en un monitor de 27", perdido en el medio de la foto. */
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .38);
}

.hero__bajada {
  font-size: clamp(16px, 1.35vw, 19px);
  max-width: 42ch;
  margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;
  color: rgba(255, 255, 255, 0.88);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

@media (max-width: 700px) {
  .hero__texto { padding-bottom: 1.1rem; }
  .hero__bajada { margin-top: .6rem; }
  .hero__acciones { margin-top: 1.1rem; }
}

/* Los botones hablan el mismo idioma que el resto de la página: superficie
   plana, una línea de pelo como canto y la sombra apoyada haciendo el peso.
   Nada de degradado, bisel ni brillo: eso era el único material con relieve
   de plástico en una página que en todo lo demás es plana y editorial. */
.accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px es la altura que ya usan el botón de WhatsApp del pie y el enlace
     a Maps: una sola medida de zona táctil en toda la página. */
  min-height: 44px;
  padding: 0 1.15rem;
  /* Reseteo para cuando .accion se aplica a un <button>: el UA stylesheet
     no le hereda font-family al <button> como sí hace con <a>, y le dibuja
     un borde 3D fuera de paleta. font: inherit toma la tipografía del body
     (Inter) y las líneas de abajo vuelven a fijar tamaño y peso. */
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radio);
  /* Mayúsculas espaciadas: el mismo recurso que las etiquetas de dato de la
     franja y el índice de las escenas, en su versión accionable. */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: transform .12s var(--curva), box-shadow .18s var(--curva),
              background-color .18s var(--curva), border-color .18s var(--curva);
}

/* La luz de la página entra por arriba: el canto superior es el único que
   se enciende y el resto del contorno apenas existe. El interior queda
   plano y el peso lo da la sombra proyectada, no un volumen falso. */
.accion--verde {
  background: var(--verde);
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.26);
  color: var(--blanco);
  box-shadow: 0 2px 10px rgba(7, 53, 27, 0.38);
}

/* Sobre la foto del hero, la acción secundaria no necesita una chapa gris:
   alcanza con la línea de pelo -el mismo recurso que separa las
   indicaciones- y un velo mínimo que la despega del fondo. */
.accion--linea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  border-top-color: rgba(255, 255, 255, 0.46);
  color: var(--blanco);
  box-shadow: 0 2px 10px rgba(7, 6, 5, 0.32);
}

/* Cómo llegar y WhatsApp ya están en la barra fija de abajo en celular:
   acá sólo hacen falta en pantallas donde esa barra no aparece. Va
   DESPUÉS de .accion a propósito: misma especificidad que .accion, y
   antes perdía contra su display: inline-flex por venir antes en el
   archivo -por eso los botones seguían viéndose en celular-. */
@media (max-width: 700px) {
  .accion--pc { display: none; }
}

/* La elevación sólo donde hay mouse de verdad: en pantalla táctil un
   :hover pegajoso deja el botón levantado después de tocarlo. El
   desplazamiento es de un píxel y la sombra crece con él: el botón se
   levanta, no salta. */
@media (hover: hover) and (pointer: fine) {
  .accion:hover { transform: translateY(-1px); }

  .accion--verde:hover {
    background: #0d8c48;
    box-shadow: 0 6px 18px rgba(7, 53, 27, 0.45);
  }

  .accion--linea:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.52);
    box-shadow: 0 6px 18px rgba(7, 6, 5, 0.4);
  }
}

/* Va DESPUÉS del bloque de hover a propósito: misma especificidad, así
   que al presionar con el mouse encima gana el :active por orden. Con la
   duración recortada, el botón acusa recibo del toque casi al instante,
   que es lo único que le dice a quien está en el campo con mala señal
   que la página registró el toque y no se colgó el teléfono. La sombra se
   achata junto con el botón: si sólo se moviera el botón, el movimiento
   se leería de mentira. */
.accion:active {
  transform: scale(.97);
  box-shadow: 0 1px 4px rgba(7, 6, 5, 0.3);
  transition-duration: .06s;
}

/* Todos los botones de la página viven sobre una foto oscura, y ahí el
   anillo verde del foco global casi no se ve -y sobre el propio botón
   verde, directamente desaparece-. Blanco, como en la barra fija. */
.accion:focus-visible,
.mapa-abrir:focus-visible {
  outline-color: var(--blanco);
}

::selection { background: var(--rojo); color: var(--blanco); }

/* ---------------------------------------------------------------- franja */

/* Los datos se apoyan sobre la escena, separados por líneas de pelo: es el
   dato más útil de la página y no merece una franja aparte que parezca un
   pie de página perdido. */
/* Sin filete divisorio ni línea de arriba: el aire entre columnas ya separa
   cada dato, no hace falta una raya. */
/* Tres estados, no dos: los cuatro datos en fila sólo entran de 1000px
   para arriba. Entre 700 y 1000 iban igual en cuatro columnas y cada dato
   se partía en dos o tres renglones -"Ruta 65 km 12 ·" y abajo "Daireaux"-,
   que es la peor forma de leer una dirección. */
.franja {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.4rem) var(--margen) clamp(1.5rem, 3vw, 2.25rem);
  color: var(--blanco);
}

.franja__dato { margin: 0; font-size: 16px; color: rgba(255, 255, 255, 0.94); }

/* El clima tarda en llegar -es un pedido a un tercero-, y antes arrancaba
   con display: none hasta tenerlo: cuando por fin aparecía, sumaba una
   fila entera y todo lo de arriba -anclado abajo del hero con
   justify-content: flex-end- saltaba hacia arriba. Con min-height el
   espacio de las tres líneas -etiqueta, dato, detalle- queda reservado
   desde el primer render, oculto con visibility en vez de display: así
   no hay nada que reacomodar cuando el dato llega. */
#franja-clima { display: none; }

.js #franja-clima {
  display: block;
  /* Medido con el dato puesto -etiqueta, dato y detalle en dos líneas-:
     si el reservado fuera más chico, la fila crecería unos píxeles justo
     al llegar el clima y algo se movería igual. */
  min-height: 5.4rem;
}

/* El pedido falló: main.js le pone hidden y el lugar se libera. Hace falta
   esta regla porque la de arriba -más específica que el display: none que
   los navegadores le dan a [hidden]- si no, lo dejaría visible. */
.js #franja-clima[hidden] { display: none; }

/* Mientras el dato viaja, en su lugar hay dos barras tenues que laten: se
   lee como "esto está viniendo" en vez de un hueco vacío que después se
   llena de golpe. Ocupan lo mismo que el dato real, así nada se mueve
   cuando llega. La etiqueta CLIMA se ve desde el primer dibujado. */
.js #franja-clima:not(.clima-lista) #clima::before,
.js #franja-clima:not(.clima-lista) #clima-detalle::before {
  content: "";
  display: inline-block;
  height: 0.95em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  animation: clima-latido 1.5s var(--curva) infinite;
  vertical-align: -0.1em;
}

.js #franja-clima:not(.clima-lista) #clima::before { width: 11rem; }

/* El detalle arranca vacío y .clima-detalle:empty lo esconde: mientras se
   espera hay que devolverlo a la vista para que su barra se dibuje. */
.js #franja-clima:not(.clima-lista) #clima-detalle {
  display: block;
}

.js #franja-clima:not(.clima-lista) #clima-detalle::before {
  width: min(100%, 17rem);
  animation-delay: .2s;
}

@keyframes clima-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Y cuando llega, entra con un fundido corto -no un parpadeo- sobre el
   lugar que las barras ya ocupaban. */
.js #franja-clima.clima-lista #clima,
.js #franja-clima.clima-lista .clima-detalle {
  animation: clima-entra .4s var(--curva) both;
}

@keyframes clima-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1000px) {
  .franja { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .franja {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding-block: .75rem 1.25rem;
  }

  /* En el celular la etiqueta va a la izquierda del dato y no encima: son
     cuatro renglones menos, y con eso la portada deja de apretarse y el
     clima no queda cortado por la barra fija. Con padding + absolute y no
     con grid, porque el dato es texto corrido mezclado con spans y grid
     convertiría cada pedazo de texto en una celda aparte. */
  .franja__dato {
    position: relative;
    padding-left: 6.4rem;
  }

  .franja__dato .franja__etiqueta {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    /* Mismo alto de renglón que el dato (16px x 1,6) para que la etiqueta
       quede alineada con la primera línea. */
    line-height: 1.6rem;
    letter-spacing: 0.12em;
  }
}

.franja__etiqueta {
  display: block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 0.3rem;
}

.mono {
  font-family: var(--numero);
  font-weight: 500;
  /* Cifras de ancho fijo: los números alinean en columna sin usar
     una monoespaciada. */
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* El ícono de clima es la referencia visual del cuarto dato, algo que se reconoce de un
   vistazo, sin tener que leer la palabra. */
#clima {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#clima svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* Segunda línea del clima: mismo tamaño que el cuerpo -16px es el piso del
   sitio-, con menos contraste de color en vez de menos tamaño para leerse
   como secundaria. */
.clima-detalle {
  display: block;
  margin-top: 0.3rem;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}

.clima-detalle:empty { display: none; }

/* Aviso bajo el horario: en cosecha el horario cambia, así que se muestra
   como dato habitual con una salida para confirmarlo, en vez de un cartel
   de "Abierto ahora" que podría mentir. Mismo tratamiento que .clima-detalle. */
.horario-rango { white-space: nowrap; }

.horario-nota {
  display: block;
  margin-top: 0.3rem;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}

.horario-consulta {
  display: inline-block;
  margin-top: 0.3rem;
  color: #57d98a;
  font-weight: 500;
  text-underline-offset: 0.2em;
}

.horario-consulta:hover { color: var(--blanco); }

/* ------------------------------------------------------------ barra fija */

.barra-fija { display: none; }

@media (max-width: 700px) {
  .barra-fija {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 10;
    /* Sin borde: la barra apoya directamente sobre la página. La sombra
       -ancha y sin dirección de línea- es lo que la despega del contenido
       que pasa por debajo al scrollear, sin dibujar un filo. */
    box-shadow: 0 -10px 24px rgba(16, 15, 13, 0.3);
  }

  /* Sin background ni color acá: los pone cada variante. Antes esta regla
     -más específica que .barra-fija__verde y .barra-fija__gris- los pintaba
     de blanco y obligaba a que las dos variantes usaran !important para
     recuperar su propio color. */
  .barra-fija a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* La zona segura de abajo -la franja del indicador de inicio en los
       iPhone- se suma como padding DENTRO de cada botón, así el fondo de
       cada uno llega hasta el borde de la pantalla y el texto queda por
       encima del indicador en vez de debajo. */
    min-height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s var(--curva);
  }

  /* Mismos colores planos que los botones de arriba: la barra es el mismo
     par de acciones, anclado al borde de la pantalla. */
  .barra-fija__verde {
    background: var(--verde);
    color: var(--blanco);
  }

  .barra-fija__gris {
    background: #23211d;
    color: #efeae1;
  }

  /* Respuesta al toque, igual que en .accion: la barra está pegada a los
     bordes, así que no puede achicarse -no habría hacia dónde-, y el
     acuse de recibo lo da el fondo. */
  .barra-fija__verde:active { background: var(--verde-hondo); }
  .barra-fija__gris:active { background: #14120f; }

  /* El foco global dibuja el anillo hacia AFUERA (outline-offset: 3px),
     y estos dos botones están pegados a los tres bordes de la pantalla
     en position: fixed, así que ese anillo queda recortado por el viewport.
     Acá el anillo va hacia ADENTRO del botón (offset negativo), donde
     siempre entra completo. Los dos van con fondo oscuro -verde y gris-,
     así que ninguno usa el anillo verde por default: los dos lo pintan
     blanco, que da contraste de sobra sobre cualquiera de los dos fondos. */
  .barra-fija a:focus-visible {
    outline: 3px solid var(--blanco);
    outline-offset: -3px;
  }

  /* El lugar que ocupa la barra lo reserva el pie, no el body: ver la
     regla al final del bloque del pie. Con padding en el body ese tramo se
     pintaba del color del papel y quedaba una franja blanca al final de la
     página; siendo padding del pie, lo que hay detrás de la barra es el
     negro del pie y no se ve ningún corte. */
}

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

.seccion {
  /* Sin grilla de dos columnas y sin filete divisorio: las secciones se
     separan por cambio de material -papel, foto, color-, no por una raya. */
  padding: var(--aire) var(--margen);
  max-width: var(--ancho-max);
  margin: 0 auto;
}

@media (max-width: 700px) {
  /* El bloque de papel también es un momento y también ocupa su pantalla:
     antes medía menos de la mitad y quedaba encajado entre dos fotos como
     un recorte blanco. Con la pantalla entera, el aire alrededor pasa a ser
     parte del momento en vez de una sobra. */
  .seccion {
    /* Se le descuenta la cortina roja: viene inmediatamente después y es
       parte del mismo momento -es el remate de lo que dice la sección-, así
       que las dos juntas tienen que sumar una pantalla. El descuento va
       holgado a propósito: si sobra, lo que asoma abajo es la foto oscura
       de la escena siguiente; si faltara, asomaría el papel. */
    min-height: calc(100svh - var(--barra) - 8rem);
    min-height: calc(100dvh - var(--barra) - 8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(1.5rem, 5vw, 2.5rem);
  }

  /* El h2 lleva el filete rojo del ancho de su texto. Como ítem de un flex
     en columna se estiraría a todo el ancho y el filete con él; align-self
     lo devuelve a medir lo que mide el título. */
  .seccion h2 { align-self: flex-start; }
}

.seccion h2 {
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  margin-bottom: clamp(0.9rem, 2vw, 1.35rem);
  padding-top: 1rem;
  border-top: 3px solid var(--rojo);
  display: inline-block;
}

/* Asimetría: el cuerpo no arranca pegado al título, entra desplazado hacia
   la derecha. No es una segunda columna: es el mismo bloque, corrido. */
.seccion__cuerpo { max-width: 40rem; }

@media (min-width: 901px) {
  .seccion__cuerpo { margin-left: clamp(0rem, 12vw, 11rem); }
}

/* El peso 500 ya viene en el mismo archivo de Inter (font-weight: 400 500),
   así que distinguir el párrafo líder no cuesta un byte de descarga. */
.destacado {
  font-size: clamp(16px, 1.1vw, 17px);
  font-weight: 500;
  margin: 0 0 1.1rem;
}

/* La cita es apoyo del párrafo que la introduce, no un pull-quote: con el
   clamp anterior (17-20px) le ganaba en tamaño a .destacado (16-18px) en
   TODO el rango de anchos, que es jerarquía dada vuelta. Con 1.5vw contra
   1.6vw, y topes 17.5 contra 18, ahora queda por debajo o igual siempre. */
/* La cita se abre a todo el ancho de la sección y sube de cuerpo: es el
   argumento de venta del negocio, no una nota al pie. */
.cita {
  border-top: 3px solid var(--rojo);
  padding-top: 1.5rem;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  max-width: 52rem;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
  text-wrap: pretty;
}

/* Párrafos largos de una sola tirada: evita que la última línea quede con
   una palabra suelta. Donde el navegador no lo soporta se ignora solo. */
.destacado,
.cita,
.indicaciones li {
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ banda */

.banda { margin: 0; }

.banda img {
  width: 100%;
  height: clamp(150px, 20vw, 245px);
  object-fit: cover;
  filter: contrast(1.12) saturate(0.85);
}

/* --------------------------------------------------------------- aparición */



@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- indicaciones */

.indicaciones { margin: 0 0 1.75rem; padding: 0; list-style: none; }

.indicaciones li {
  padding: 0.8rem 0 0.8rem 1.5rem;
  border-top: 1px solid var(--linea);
  position: relative;
}

.indicaciones li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 0.75rem;
  height: 2px;
  background: var(--rojo);
}

/* -------------------------------------------------------------------- marca */

.marca {
  position: absolute;
  z-index: 5;
  top: clamp(1.25rem, 3vw, 2.25rem);
  left: var(--margen);
}

.marca img {
  width: clamp(210px, 16.5vw, 262px);
  height: auto;
}

/* Teléfono arriba a la derecha, centrado en la altura del logo (el logo
   mide 0,325 de su ancho de alto, así que su mitad es 0,1625). Si cambia
   el ancho del logo, cambiarlo también acá. */
.tel-arriba {
  position: absolute;
  z-index: 5;
  top: calc(clamp(1.25rem, 3vw, 2.25rem) + clamp(210px, 16.5vw, 262px) * 0.1625);
  right: var(--margen);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--blanco);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  transition: color .15s var(--curva);
}

.tel-arriba svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

.tel-arriba:hover { color: var(--rojo-sobre-negro); }
.tel-arriba:active { opacity: .7; }

/* En celular angosto el logo agrandado ocupa más de la mitad del ancho y
   el número ya no entra al lado: baja debajo del logo, alineado a la
   izquierda con él. */
@media (max-width: 560px) {
  .tel-arriba {
    top: calc(clamp(1.25rem, 3vw, 2.25rem) + clamp(210px, 16.5vw, 262px) * 0.325 + 0.4rem);
    left: var(--margen);
    right: auto;
    transform: none;
    font-size: 16px;
  }
}


/* ----------------------------------------------------------------- granos */

/* El recorrido de un pesaje: cuatro pasos con ícono propio -Heroicons,
   MIT-, en vez de una fila de palabras sueltas. A diferencia de las
   capacidades de El servicio, acá el orden SÍ es real y fijo: no hay
   forma de recibir el ticket antes de pesar. El chevron entre pasos se
   posiciona aparte, no como pseudo-elemento del <li>, porque el <li>
   ahora es él mismo un ícono + una palabra en fila, y necesita su propio
   espacio sin que un tercer elemento se le sume adentro. */
.pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
}

.pasos li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: clamp(2.25rem, 5vw, 3rem);
}

.pasos li:last-child { padding-right: 0; }

.pasos li svg {
  width: clamp(24px, 2.6vw, 30px);
  height: clamp(24px, 2.6vw, 30px);
  color: var(--rojo);
  flex-shrink: 0;
}

.pasos li span {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  white-space: nowrap;
}

.pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: clamp(0.5rem, 1.5vw, 0.9rem);
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: var(--rojo);
  -webkit-mask: var(--chevron) no-repeat center / contain;
  mask: var(--chevron) no-repeat center / contain;
}

@media (max-width: 759px) {
  /* En fila angosta los 4 pasos no entran y se envuelven a mitad de
     camino: el chevron de "siguiente paso" quedaba apuntando a la nada
     en el borde. Apilados en columna, el orden ya lo dice el propio
     orden vertical. El corte estaba en 560px, pero la fila deja de entrar
     bastante antes: alrededor de 625px "Te vas" ya se caía al renglón de
     abajo y "Recibís el ticket" quedaba con el chevron colgado. */
  .pasos {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    margin-top: 1.75rem;
  }

  .pasos li { padding-right: 0; }
  .pasos li span { white-space: normal; }
  .pasos li:not(:last-child)::after { content: none; }
}


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

/* Una sola columna a todo el ancho, en tres filas separadas por filetes: la
   marca con la acción arriba, los datos en el medio y el remate abajo. La
   versión de dos columnas dejaba medio pie vacío en negro. */
/* El negro va a sangre, de borde a borde: lo que se limita es el CONTENIDO,
   con un padding lateral que se estira hasta centrar una caja de --ancho-max.
   Con max-width sobre el propio pie, la banda negra se cortaba donde
   terminaba el contenido y quedaban dos franjas blancas a los costados. */
.pie {
  padding:
    clamp(1rem, 1.8vw, 1.4rem)
    max(var(--margen), (100% - var(--ancho-max)) / 2)
    clamp(0.75rem, 1.2vw, 1rem);
  background: var(--negro);
  color: var(--blanco);
}

/* El bloque principal es la marca y el contacto directo: pesan más que
   los datos de abajo, así que van primero y más grandes. */
.pie__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
}

.pie__logo { width: clamp(102px, 8.5vw, 130px); height: auto; }

.pie__contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}

.pie__telefono {
  font-size: 18px;
  font-weight: 500;
  color: var(--blanco);
  text-decoration: none;
  transition: color .15s var(--curva);
}

.pie__telefono:hover { color: var(--rojo-sobre-negro); }
.pie__telefono:active { opacity: .7; }

/* Botón circular con el glifo de WhatsApp: acá el ícono ya identifica la
   acción, un botón con texto al lado sería redundante. */
.whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde);
  /* Misma sombra que el botón verde del hero: un solo peso para el mismo
     color y la misma acción. */
  box-shadow: 0 2px 10px rgba(7, 53, 27, 0.38);
  flex-shrink: 0;
  transition: background-color .15s var(--curva), transform .15s var(--curva),
              box-shadow .18s var(--curva);
}

.whatsapp svg {
  width: 22px;
  height: 22px;
  fill: var(--blanco);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp:hover {
    background: #0d8c48;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(7, 53, 27, 0.45);
  }
}

.whatsapp:active {
  transform: scale(.94);
  box-shadow: 0 1px 4px rgba(7, 53, 27, 0.32);
  transition-duration: .06s;
}

/* Datos prácticos: una sola línea corrida, con menos peso que el bloque
   de contacto y sin las etiquetas de la grilla anterior -acá el contexto
   ya deja claro qué es cada dato-. */
.pie__linea {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.pie__punto {
  display: inline-block;
  margin: 0 0.6em;
  color: rgba(255, 255, 255, 0.35);
}

/* Sin línea divisoria: ya venía pedido para el resto del pie, y acá el
   salto de tamaño (14px contra los 15-18px de arriba) alcanza para
   separar el remate del resto sin dibujar un borde. */
.pie__firma {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.75rem;
  margin: clamp(0.9rem, 1.8vw, 1.3rem) 0 0;
}

.pie__nombre {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: 0.13em;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.pie__lugar { color: rgba(255, 255, 255, 0.5); font-size: 14px; }

@media (max-width: 560px) {
  .pie__principal { align-items: flex-start; }
  .pie__contacto { width: 100%; justify-content: space-between; }
}

/* Va acá y no en el bloque de la barra fija: allá queda ANTES de la regla
   .pie de arriba, cuyo padding en atajo vuelve a fijar los cuatro lados y
   se lo comía. El pie se estira hasta debajo de la barra -su negro es lo
   que se ve detrás- y suma su propio aire para que la última línea no
   quede tapada. */
@media (max-width: 700px) {
  .pie { padding-bottom: calc(var(--barra) + clamp(0.75rem, 1.2vw, 1rem)); }
}


/* ------------------------------------------------------- cortina de color */

/* El color de marca entra como bloque grande, pero no como un ladrillo
   plano de punta a punta: es un panel que arranca en el borde izquierdo,
   se corta en diagonal y deja ver el papel del otro lado. Se mete por
   debajo de la escena siguiente: es la única superposición de la página. */
.cortina {
  position: relative;
  z-index: 2;
  color: var(--blanco);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  margin-bottom: clamp(-3.5rem, -4.5vw, -2rem);
}

.cortina::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* La luz entra por arriba a la izquierda, como en el resto de la página:
     el rojo se aclara ahí y se hunde hacia el borde de abajo. */
  background:
    radial-gradient(120% 150% at 6% -10%, #d92433 0%, transparent 58%),
    linear-gradient(168deg, var(--rojo) 0%, #96101b 100%);
  clip-path: polygon(0 0, 78% 0, 70% 100%, 0 100%);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32);
}

.cortina .cita {
  position: relative;
  border: 0;
  margin: 0 auto;
  max-width: var(--ancho-max);
  padding: 0 var(--margen);
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.cortina .cita span,
.cortina .cita { display: block; }

/* La medida del texto se corta antes del filo de la diagonal, para que
   ningún renglón quede pisando el borde del panel. */
@media (min-width: 901px) {
  .cortina .cita { max-width: min(var(--ancho-max), 42rem); margin-left: max(var(--margen), (100% - var(--ancho-max)) / 2); padding-left: 0; padding-right: 0; }
}

@media (max-width: 900px) {
  .cortina::before { clip-path: none; }
}

@media (max-width: 700px) {
  .cortina { padding-block: 1.1rem; }
}

/* ---------------------------------------------------------------- escenas */

/* Una foto a sangre que sostiene contenido encima, en vez de una banda
   decorativa que corta el texto en dos. */
.escena {
  position: relative;
  display: flex;
  align-items: center;
  /* Recortada, no a pantalla completa: la foto es el fondo del contenido,
     no una pantalla en sí misma. Así el panel rojo de arriba y la escena
     entran juntos en una misma vista, sin que ninguno quede cortado. */
  min-height: min(72vh, 620px);
  overflow: hidden;
  background: var(--negro);
  isolation: isolate;
}

/* Igual que en .hero: sin esto, <picture> queda como ítem propio (vacío)
   del flex container, entre la foto (position: absolute) y el contenido. */
.escena picture {
  display: contents;
}

.escena__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.86);
}

.escena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* El velo carga sobre la derecha, que es el lado donde se apoya el bloque
   de texto; la escena siguiente lo hará al revés, para que el peso visual
   vaya cambiando de lado a medida que se baja. */
.escena--datos::before {
  background:
    linear-gradient(to left,
      rgba(16, 15, 13, 0.94) 0%,
      rgba(16, 15, 13, 0.82) 40%,
      rgba(16, 15, 13, 0.34) 74%,
      rgba(16, 15, 13, 0.12) 100%),
    linear-gradient(to bottom, rgba(16, 15, 13, 0.55), transparent 30%),
    /* El borde de abajo se apaga hasta el negro para entregarle la página a
       la escena siguiente. Sin esto, el maíz iluminado terminaba de golpe
       contra el cielo de la escena del campo y quedaba una costura recta
       cruzando la pantalla. */
    linear-gradient(to top, rgba(16, 15, 13, 0.92) 0%, transparent 20%);
}

.escena__contenido {
  position: relative;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) var(--margen);
  color: var(--blanco);
}

.escena h2 {
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  margin: 0;
}

.escena--datos .escena__contenido {
  /* Aire extra arriba: la cortina roja se le monta encima. */
  padding-top: clamp(4.5rem, 9vw, 7rem);
}

/* Etiqueta, título y datos van juntos en un solo bloque, alineado al
   costado oscuro de la foto -donde el velo da contraste de sobra-, en vez
   de correr cada pieza por su lado con un cálculo propio. */
.escena__indice {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 0.6rem;
}

.escena--datos .escena__bloque {
  max-width: 34rem;
}

.escena__nota {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 901px) {
  .escena--datos .escena__bloque { margin-left: auto; }
}

.escena--datos h2 { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }

@media (max-width: 900px) {
  .escena { min-height: 0; padding-block: clamp(2.25rem, 6vw, 4rem); }
  .escena--datos .escena__bloque { max-width: none; }
}

@media (max-width: 700px) {
  .escena__contenido { padding-block: 1.75rem; }

  /* Misma regla que el hero y la sección de papel: una foto, una pantalla.
     La de arriba -max-width: 900px- las dejaba con el alto del contenido,
     que en el teléfono son unos 430px sobre una pantalla de 844. */
  .escena {
    min-height: calc(100svh - var(--barra));
    min-height: calc(100dvh - var(--barra));
    padding-block: clamp(2.25rem, 6vw, 4rem);
  }
}

/* Sólo pantallas bajas -horizontal en el teléfono, notebook con poco
   alto-: antes esta regla también entraba por ancho, así que un celular
   parado (angosto pero alto) perdía el hero a pantalla completa. */
@media (max-height: 620px) {
  .hero { min-height: auto; padding-top: clamp(8rem, 26vh, 11rem); }
}


/* --------------------------------------------------- escena: cómo llegar */

/* El velo carga sobre la izquierda -al revés que la escena anterior- y el
   borde de abajo se funde con el carbón del pie, para que la foto entregue
   al pie sin un corte seco. */
.escena--llegar { min-height: min(86vh, 760px); }

@media (max-width: 700px) {
  .escena--llegar {
    min-height: calc(100svh - var(--barra));
    min-height: calc(100dvh - var(--barra));
  }
}

.escena--llegar::before {
  background:
    linear-gradient(to right,
      rgba(16, 15, 13, 0.95) 0%,
      rgba(16, 15, 13, 0.84) 42%,
      rgba(16, 15, 13, 0.36) 76%,
      rgba(16, 15, 13, 0.14) 100%),
    linear-gradient(to top, var(--negro) 0%, transparent 24%),
    /* El otro lado de la misma costura: el cielo de esta escena se apaga
       arriba para encontrarse con el negro de la escena anterior. */
    linear-gradient(to bottom, rgba(16, 15, 13, 0.9) 0%, transparent 18%);
}

.llegar__cuerpo { max-width: 44rem; }

/* Cuadro del mapa: en computadora va a la derecha de las indicaciones,
   sobre el lado claro de la foto; en celular, abajo de todo, a lo ancho.
   Mismo radio, borde de un píxel y sombra que los botones de la escena. */
.mapa {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radio);
  overflow: hidden;
  background: #2a2824; /* lo que se ve mientras carga el mapa */
  box-shadow: 0 10px 32px rgba(7, 6, 5, 0.45);
  /* Apenas transparente: se funde un poco con la foto en vez de quedar
     pegado encima como un recorte. Al pasarle el mouse o tocarlo vuelve a
     verse entero, para usarlo sin el velo. */
  opacity: 0.9;
  transition: opacity .25s var(--curva);
}

.mapa:hover,
.mapa:focus-within { opacity: 1; }

.mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 901px) {
  /* Texto y mapa forman un solo bloque centrado en la pantalla, con un
     espacio fijo entre los dos: antes el texto iba pegado a la izquierda,
     el mapa a la derecha y en el medio quedaba un hueco que crecía con el
     monitor. Las filas 1fr de arriba y abajo centran el título y la lista
     a la altura del mapa, en vez de dejarlos colgados del borde de arriba. */
  .escena--llegar .escena__contenido {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 34rem);
    grid-template-rows: 1fr auto auto 1fr;
    justify-content: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .escena--llegar h2 {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0.5rem;
  }

  .escena--llegar .llegar__cuerpo { grid-column: 1; grid-row: 3; }

  .escena--llegar .llegar__mapa {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }

  .escena--llegar .mapa { margin-top: 0; }
}

@media (max-width: 700px) {
  .mapa { aspect-ratio: 16 / 11; }
}

/* Sin filetes entre los puntos: el aire ya los separa. Cada uno lleva un
   chevron en vez de punto -ver la regla más abajo-, porque son postas en
   el camino hasta la báscula. */
.escena--llegar .indicaciones {
  list-style: none;
  margin: 0;
  padding: 0;
}

.escena--llegar .indicaciones li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2.1rem;
  color: rgba(255, 255, 255, 0.9);
}

.escena--llegar .indicaciones li + li { margin-top: 0.15rem; }

/* Chevron en vez de un punto: cada indicación es un paso a seguir, no un
   ítem suelto de lista. Mismo ícono -Heroicons, MIT- que el enlace a Maps
   de abajo, así los dos hablan el mismo idioma visual. Va como máscara de
   color en vez de <svg> repetido en cada <li>: una sola declaración, y
   hereda el color de marca sin duplicar el ícono en el HTML. */
.escena--llegar .indicaciones li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 13px;
  height: 13px;
  background-color: var(--rojo-sobre-negro);
  -webkit-mask: var(--chevron) no-repeat center / contain;
  mask: var(--chevron) no-repeat center / contain;
}

/* Es la misma acción que el botón "Cómo llegar" del hero, así que usa el
   mismo material: contorno de un píxel sobre la foto, interior plano y la
   sombra apoyada. Antes era una frase suelta con un pin al lado y la
   página terminaba con tres formas distintas para la misma acción. */
.mapa-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-top-color: rgba(255, 255, 255, 0.46);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 10px rgba(7, 6, 5, 0.32);
  color: var(--blanco);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform .12s var(--curva), box-shadow .18s var(--curva),
              background-color .18s var(--curva), border-color .18s var(--curva);
}

.mapa-abrir svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Debajo del mapa, del mismo ancho que el cuadro: se leen como una sola
   pieza -el mapa y su acción- en vez de un botón suelto al costado. */
.llegar__mapa .mapa-abrir {
  display: flex;
  width: 100%;
  margin-top: 0.85rem;
}

@media (hover: hover) and (pointer: fine) {
  .mapa-abrir:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.52);
    box-shadow: 0 6px 18px rgba(7, 6, 5, 0.4);
  }
}

.mapa-abrir:active {
  transform: scale(.97);
  box-shadow: 0 1px 4px rgba(7, 6, 5, 0.3);
  transition-duration: .06s;
}


/* ------------------------------------------------------------ movimiento */

/* Todo entra, nada aparece: desplazamiento corto y fundido, escalonado por
   posición dentro de su bloque, siguiendo el orden de lectura. */
.listo .entra {
  opacity: 0;
  transform: translateY(13px);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.listo .visible > .entra { opacity: 1; transform: none; }

/* Único movimiento de ambiente de la página: la foto del hero respira muy
   despacio. Sólo donde hay mouse: en celular gasta batería y no aporta. */
@media (hover: hover) and (pointer: fine) {
  .hero__foto {
    animation: respirar 30s ease-in-out infinite alternate;
    transform-origin: 50% 62%;
  }
}

@keyframes respirar {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .listo .entra { opacity: 1; transform: none; }
  .hero__foto { animation: none; }
}