/* ============================================================
   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(6rem, 14vh, 9rem);
  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));
    padding-top: clamp(4.5rem, 10vh, 6.5rem);
  }
}

.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 {
  min-height: 5.25rem;
  visibility: hidden;
}

#franja-clima.clima-lista {
  visibility: visible;
}

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

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

.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;
}

.estado { white-space: nowrap; }

/* El ícono de clima es la referencia visual del cuarto dato, igual que el
   punto de .estado lo es para el horario: 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; }

/* El punto se dibuja SÓLO cuando main.js ya decidió el estado y puso la
   clase. Colgado de .estado a secas, aparecía un cuadrado sin texto al lado
   antes de que corriera el JS -y para siempre si el JS nunca llegaba, que
   es un escenario real con la señal del campo-. */
.estado--abierto::before,
.estado--cerrado::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin: 0 0.4em 0 0.6em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05em;
}

/* Sobre la foto oscura del hero el verde de marca no llega a AA: esta
   variante clara del mismo matiz sí, y en el pie -también oscuro- sirve
   igual. */
.estado--abierto { color: #57d98a; font-weight: 500; }
.estado--cerrado { color: rgba(255, 255, 255, 0.62); }

/* ------------------------------------------------------------ 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(140px, 11vw, 175px);
  height: auto;
}


/* ----------------------------------------------------------------- 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(6rem, 22vh, 9rem); }
}


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

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

@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; }
}