/* ============================================================================
   Sartori & Martino Propiedades — el sitio público

   Hoja separada de `sistema.css` a propósito: el panel se mira ocho horas por
   día y prioriza densidad; esto lo abre una persona una vez, casi siempre desde
   el celular, decidiendo si nos confía su propiedad.

   Sin webfonts y sin JavaScript, como el resto del proyecto: no hay Node ni
   build, y una animación no justifica traerlos.

   ── Cómo está armada (rehecha el 2026-08-05, mirándola en pantalla) ─────────

   1. **Cada sección maneja su ancho.** Las que llevan fondo van de borde a
      borde y su contenido vive en `.adentro`, que tiene el ancho máximo. Antes
      había un contenedor global, y para que una sección tocara los bordes había
      que sacarla con un margen negativo — que abre scroll horizontal.

   2. **`.adentro` tiene tope, y no es una contradicción con "que ocupe toda la
      pantalla".** Los fondos llegan al borde; el CONTENIDO no puede: en un
      monitor de 2.500 px, ocho tarjetas en una fila quedan de 280 px y el texto
      se parte en tiras. El tope está alto (1.680) para que se llene de verdad.

   3. **Las secciones alternan fondo** —negro, hueso, blanco— para que la página
      tenga ritmo en vez de ser una sábana de tarjetas blancas.

   4. **La serif de la marca titula.** Es la misma letra del logotipo, y es lo
      que separa una página de inmobiliaria de una plantilla genérica.
   ============================================================================ */

:root {
  /* La marca */
  --noche: #0E100D;
  --noche-2: #171A16;
  --tinta: #1C1F1A;
  --tinta-2: #5A6172;
  --tinta-3: #8B93A1;
  --linea: #E4E7EF;

  /* Los fondos. El hueso es apenas cálido: contra el blanco puro de las
     tarjetas da la separación sin necesidad de bordes en todo. */
  --blanco: #FFFFFF;
  --hueso: #F6F4F0;

  --acento: #0F6B3A;
  --acento-osc: #0B5530;
  --acento-claro: #7FC49A;
  --acento-suave: #E6F2EB;

  --rojo-suave: #FBE9EA;

  --italia-verde: #128A44;
  --italia-blanco: #F2F2F2;
  --italia-rojo: #CE2B37;

  /* Las del isotipo, que es un componente compartido con el panel y saca sus
     colores de variables. Acá vive sobre negro, así que van en claro. */
  --iso-pared: rgba(255, 255, 255, .06);
  --iso-franja-media: var(--italia-blanco);
  --iso-linea: rgba(255, 255, 255, .34);
  --iso-monograma: rgba(255, 255, 255, .82);

  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --fuente-marca: 'Times New Roman', Times, Georgia, serif;

  --sombra: 0 1px 2px rgba(20, 23, 26, .04), 0 12px 32px rgba(20, 23, 26, .07);
  --sombra-alta: 0 2px 4px rgba(20, 23, 26, .05), 0 22px 48px rgba(20, 23, 26, .12);

  /* La curva de iOS: arranca rápido y frena suave. Es la diferencia entre que
     algo "se mueva" y que algo "responda". */
  --curva: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  /* La página abre con el hero negro: sin esto, el rebote del scroll en Mac
     muestra una franja blanca arriba del negro. */
  background: linear-gradient(var(--noche) 0 50vh, var(--blanco) 50vh);
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; }

/* El ancho de lectura de cada sección. Ver el punto 2 del encabezado. */
.adentro {
  width: min(1680px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

.sr-solo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------- Cabecera */

/* Flota como material translúcido y el contenido pasa POR DEBAJO, en vez de ser
   una franja opaca que se come una tira de pantalla. El `saturate()` no es
   decorativo: sin él lo que se ve a través del blur queda lavado. */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 16, 13, .72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.cabecera-adentro {
  width: min(1680px, 100%); margin-inline: auto;
  padding: 15px clamp(20px, 4vw, 72px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* La marca escrita, no el archivo del logo: el porqué está en el layout, arriba
   del markup. En dos palabras, el isologo es muy ancho y a la altura de una
   barra su texto interno queda en 5 px. */
.marca { text-decoration: none; display: block; }
.marca-nombre {
  font-family: var(--fuente-marca);
  font-size: 21px; line-height: 1.05; white-space: nowrap;
  text-transform: uppercase; display: block; color: #fff;
  /* Tracking positivo: en versalitas, a este tamaño, las letras pegadas se leen
     como una mancha. Es la regla inversa a la de los títulos grandes. */
  letter-spacing: .04em;
}
.marca-pie { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.marca-sub {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .34em;
  color: rgba(255, 255, 255, .72); margin-right: -.34em;
}
.bandera {
  width: 30px; height: 7px; flex-shrink: 0; border-radius: 1px;
  background: linear-gradient(to right,
    var(--italia-verde) 0 33.34%,
    var(--italia-blanco) 33.34% 66.67%,
    var(--italia-rojo) 66.67% 100%);
}

.cabecera-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cabecera-nav a {
  text-decoration: none; color: rgba(255, 255, 255, .78);
  font-weight: 600; font-size: 15px; transition: color .18s var(--curva);
}
.cabecera-nav a:hover { color: #fff; }

/* Las dos preferencias del sistema que la translucidez obliga a respetar. */
@media (prefers-reduced-transparency: reduce) {
  .cabecera { background: var(--noche); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .cabecera {
    background: #000; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid #fff;
  }
  .cabecera-nav a { color: #fff; }
}

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

.hero {
  background: var(--noche);
  color: #fff;
  /* El degradado radial da profundidad sin una foto: la luz cae donde está el
     isotipo y el texto queda sobre la parte más oscura, que es donde tiene que
     estar para leerse. */
  background-image:
    radial-gradient(90ch 70ch at 78% 34%, rgba(18, 138, 68, .16), transparent 70%),
    radial-gradient(60ch 60ch at 12% 88%, rgba(255, 255, 255, .05), transparent 70%);
  /* Sube por debajo de la cabecera, que es translúcida: el contenido tiene que
     pasarle por atrás para que el vidrio se note. */
  margin-top: -84px; padding-top: 84px;
  padding-bottom: clamp(30px, 5vh, 56px);
}

.hero-grilla {
  display: grid; align-items: center; gap: clamp(30px, 4vw, 70px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: min(78vh, 720px);
  padding-block: clamp(48px, 8vh, 96px);
}

.hero-sobre {
  text-transform: uppercase; letter-spacing: .2em; font-size: 12px;
  font-weight: 700; color: var(--acento-claro); margin: 0 0 22px;
}

/* La serif de la marca, tamaño de portada. El tracking negativo es obligatorio
   a esta escala: las letras de un display se leen demasiado separadas si se deja
   el valor del cuerpo de texto. */
.hero h1 {
  font-family: var(--fuente-marca);
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.04; letter-spacing: -.022em; font-weight: 400;
  margin: 0 0 26px; color: #fff;
}
.hero-bajada {
  font-size: clamp(17px, 1.25vw, 21px); line-height: 1.5;
  color: rgba(255, 255, 255, .74); max-width: 46ch; margin: 0 0 34px;
}

.hero-marca { display: grid; place-items: center; }
.hero-isotipo { height: clamp(190px, 24vw, 400px); width: auto; }

/* ⛔ Acá vivían las credenciales del pie del hero (propiedades administradas,
   edificios, zonas). Santino las mandó sacar el 2026-08-05 mirándolas, y el CSS
   se fue con ellas: dejar las clases sin uso es lo que hace que dentro de tres
   meses nadie sepa si esto todavía se dibuja en algún lado. */

/* --------------------------------------------------------------- Secciones */

.seccion { padding-block: clamp(64px, 10vh, 132px); }
.seccion-hueso { background: var(--hueso); }
.seccion-oscura { background: var(--noche); color: #fff; }

.seccion-encabezado { margin-bottom: clamp(40px, 6vh, 68px); max-width: 34ch; }
.seccion-sobre {
  text-transform: uppercase; letter-spacing: .2em; font-size: 12px;
  font-weight: 700; color: var(--acento); margin: 0 0 16px;
}
.seccion-oscura .seccion-sobre { color: var(--acento-claro); }
.seccion-encabezado h2 {
  font-family: var(--fuente-marca); font-weight: 400;
  font-size: clamp(28px, 3.1vw, 48px); line-height: 1.1; letter-spacing: -.018em;
  margin: 0;
}

/* Qué hacemos: lista editorial numerada, no ocho cajas. La línea de arriba y el
   número son lo que la hace leer como un índice y no como un tarjetero. */
.servicios {
  display: grid; gap: clamp(28px, 3vw, 52px) clamp(28px, 3vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.servicio { border-top: 1px solid var(--linea); padding-top: 20px; }
.servicio-n {
  display: block; font-family: var(--fuente-marca); font-size: 15px;
  color: var(--acento); letter-spacing: .1em; margin-bottom: 12px;
}
.servicio h3 {
  font-size: 19px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.01em;
}
.servicio p { color: var(--tinta-2); margin: 0; font-size: 15.5px; }

/* Los pasos, sobre negro */
.pasos {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(26px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.paso { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 22px; }
.paso-n {
  display: block; font-family: var(--fuente-marca); font-size: 40px;
  line-height: 1; color: var(--acento-claro); margin-bottom: 14px;
}
.paso h3 { font-size: 19px; margin: 0 0 10px; color: #fff; letter-spacing: -.01em; }
.paso p { color: rgba(255, 255, 255, .68); margin: 0; font-size: 15.5px; }

/* --------------------------------------------------------------- Las colocadas */
/* Las que ya tienen inquilino, en la portada (tanda 63). Reusa `.tarjeta*` del
   listado —misma pieza, misma forma— y le saca lo que la hace un link. */

.colocadas {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ⚠️ Quieta a propósito: `.tarjeta` se levanta con el mouse porque en el listado
   es un `<a>` que abre la ficha. Acá no lleva a ningún lado —estas propiedades no
   están publicadas y su ficha da 404—, y una tarjeta que reacciona como un botón
   y no hace nada al apretarla se lee como que la página está rota. */
.tarjeta-colocada,
.tarjeta-colocada:hover,
.tarjeta-colocada:active { transform: none; box-shadow: none; }
.tarjeta-colocada:hover .tarjeta-foto img { transform: none; }

/* El cartel va en gris de marca y no en el verde del acento: "Alquilada" no es una
   oferta ni una llamada a apretar nada, es el estado en el que quedó. */
.tarjeta-colocada .tarjeta-etiqueta { background: rgba(14, 16, 13, .72); }

/* Sin foto, un recuadro liso: el hueso del fondo ya lo separa del blanco de la
   tarjeta y no hace falta escribir nada adentro. */
.tarjeta-colocada .tarjeta-sin-foto { background: var(--hueso); }

/* El cierre */
.cierre { background: var(--hueso); }
.cierre-adentro { text-align: center; max-width: 60ch; margin-inline: auto; }
.cierre h2 {
  font-family: var(--fuente-marca); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px); letter-spacing: -.02em; margin-bottom: 18px;
}
.cierre p { color: var(--tinta-2); font-size: 17.5px; margin: 0 auto 30px; max-width: 46ch; }

/* --------------------------------------------------------------- El listado */
/* (apagado hoy; se prende con SITIO_PROPIEDADES_VISIBLES) */

.portada { padding-block: clamp(46px, 7vh, 80px) 30px; }
.portada h1 {
  font-family: var(--fuente-marca); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.02em;
}
.portada-bajada { color: var(--tinta-2); max-width: 62ch; margin: 0 0 26px; font-size: 17px; }

.buscador { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.buscador input[type="text"] {
  flex: 1 1 320px; padding: 13px 15px; font-size: 16px; font-family: var(--fuente);
  border: 1px solid var(--linea); border-radius: 11px; background: var(--blanco);
  color: var(--tinta); transition: border-color .18s var(--curva);
}
.link-limpiar { font-size: 14px; color: var(--tinta-2); }

.solapas { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.solapa {
  text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: 14.5px;
  padding: 9px 16px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--blanco); transition: all .18s var(--curva);
}
.solapa:hover { border-color: var(--acento); color: var(--acento); }
.solapa.activa { background: var(--acento); border-color: var(--acento); color: #fff; }
.solapa-cuenta { opacity: .7; font-weight: 500; }

.cuantas { color: var(--tinta-2); font-size: 14.5px; margin: 8px 0 18px; }

.grilla {
  display: grid; gap: 26px; padding-bottom: 70px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.tarjeta {
  text-decoration: none; color: inherit; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--curva), transform .25s var(--curva);
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }
/* Feedback en el apretón, no al soltar: es lo que hace que un click se sienta
   directo en vez de diferido. */
.tarjeta:active { transform: translateY(-1px) scale(.995); transition-duration: .09s; }

.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--hueso); overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-sin-foto { height: 100%; display: grid; place-items: center; color: var(--tinta-3); font-size: 14px; }
.tarjeta-etiqueta {
  position: absolute; left: 13px; top: 13px;
  background: rgba(14, 16, 13, .8); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.tarjeta-cuerpo { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-titulo { font-size: 17.5px; margin: 0; letter-spacing: -.01em; }
.tarjeta-donde { color: var(--tinta-2); font-size: 14px; margin: 0; }
.tarjeta-precio {
  font-family: var(--fuente-marca); font-size: 24px; margin: 10px 0 0; letter-spacing: -.01em;
}
.tarjeta-precio-nota { font-family: var(--fuente); font-size: 13px; color: var(--tinta-2); }
.tarjeta-datos { color: var(--tinta-2); font-size: 14px; margin: 2px 0 0; }

.vacio { text-align: center; padding: 70px 20px 90px; max-width: 52ch; margin-inline: auto; }
.vacio p { color: var(--tinta-2); margin-bottom: 22px; }

/* --------------------------------------------------------------- La ficha */

.volver {
  display: inline-block; margin: 26px 0 10px; font-size: 14.5px;
  text-decoration: none; color: var(--tinta-2); transition: color .18s var(--curva);
}
.volver:hover { color: var(--acento); }

.ficha { padding-bottom: 80px; }

.galeria { display: grid; gap: 10px; margin-bottom: 34px; }
.galeria-grande {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px;
  background: var(--hueso);
}
.galeria-resto { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.galeria-resto img,
.galeria-resto video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
  transition: transform .3s var(--curva);
}
/* El video ocupa el ancho completo de la grilla: en 140px no se ve nada y los controles no entran. */
.galeria-resto video { grid-column: 1 / -1; aspect-ratio: 16 / 9; background: #000; }
.galeria-resto a:hover img { transform: scale(1.03); }

.ficha-cuerpo {
  display: grid; gap: clamp(30px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
  align-items: start;
}

.etiqueta {
  display: inline-block; background: var(--acento-suave); color: var(--acento-osc);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.ficha-datos h1 {
  font-family: var(--fuente-marca); font-weight: 400;
  font-size: clamp(26px, 3vw, 42px); letter-spacing: -.02em;
}
.ficha-donde { color: var(--tinta-2); margin: 0 0 24px; font-size: 17px; }

.precios {
  border: 1px solid var(--linea); border-radius: 14px; padding: 6px 18px;
  margin-bottom: 26px; background: var(--blanco);
}
.renglon-precio {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.renglon-precio:last-child { border-bottom: 0; }
.renglon-precio span { color: var(--tinta-2); font-size: 14.5px; }
/* El total va más grande porque es el número que la persona compara con otro
   aviso: núcleo §3, el candidato mira alquiler + expensas como un solo número. */
.renglon-precio.fuerte strong { font-family: var(--fuente-marca); font-size: 26px; }

.caracteristicas { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.caracteristicas li {
  background: var(--hueso); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; color: var(--tinta-2);
}
.ficha-texto { font-size: 16.5px; max-width: 72ch; }

.consulta {
  border: 1px solid var(--linea); border-radius: 18px; padding: 24px;
  background: var(--blanco); box-shadow: var(--sombra); position: sticky; top: 100px;
}
.consulta h2 { font-size: 20px; }
.consulta-bajada { color: var(--tinta-2); font-size: 14.5px; margin: 0 0 18px; }
.consulta-legal { color: var(--tinta-3); font-size: 12.5px; margin: 14px 0 0; }

.separador { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--tinta-3); font-size: 13px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linea); }

.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.campo :is(input, textarea) {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: var(--fuente);
  border: 1px solid var(--linea); border-radius: 11px; background: var(--blanco);
  color: var(--tinta); resize: vertical; transition: border-color .18s var(--curva);
}
.campo :is(input, textarea):hover { border-color: #cfd5e2; }
.campo small { display: block; color: var(--tinta-3); font-size: 12.5px; margin-top: 5px; }

/* El campo trampa: invisible para una persona, irresistible para un robot. */
.trampa { display: none; }

/* --------------------------------------------------------------- Botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fuente); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--curva), color .2s var(--curva),
              transform .2s var(--curva), box-shadow .2s var(--curva);
}
.btn-grande { padding: 16px 30px; font-size: 16.5px; }
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-osc); transform: translateY(-1px); box-shadow: var(--sombra); }
.btn-verde { background: var(--acento); color: #fff; }
.btn-verde:hover { background: var(--acento-osc); transform: translateY(-1px); box-shadow: var(--sombra-alta); }
/* Sobre el hero negro, el botón va claro: el verde sobre negro pierde presencia
   y esto es lo único que se quiere que se apriete en toda la portada. */
.btn-claro { background: #fff; color: var(--noche); }
.btn-claro:hover { background: rgba(255, 255, 255, .88); transform: translateY(-1px); }
.btn-whatsapp { background: #25D366; color: #0b3b1e; width: 100%; }
.btn-whatsapp:hover { background: #1EBE5A; }
.btn-ancho { width: 100%; }

/* El apretón, no la soltada. 90 ms: por debajo del umbral en que se percibe
   como demora, por encima de lo que se ve como un parpadeo. */
.btn:active { transform: translateY(0) scale(.975); transition-duration: .09s; }

/* Foco visible y consistente en todo lo que se puede tabular: es lo que hace
   que la página se pueda usar sin mouse. */
:is(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :is(a):focus-visible, .seccion-oscura :is(a):focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------- Avisos */

.franja-avisos { background: var(--blanco); padding-top: 22px; }
.aviso { border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; font-size: 15px; }
.aviso-ok { background: var(--acento-suave); color: var(--acento-osc); }
.aviso-error { background: var(--rojo-suave); color: #8f2933; }

/* --------------------------------------------------------------- Pie */

.pie { background: var(--noche); color: rgba(255, 255, 255, .6); padding-block: 44px; }
.pie-adentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.pie-nota { font-size: 12.5px; text-transform: uppercase; letter-spacing: .16em; }

/* ============================================================================
   LA ANIMACIÓN AL SCROLLEAR

   Lo que pidió Santino: *"una de esas como las de Apple, que cuando scroleás con
   la ruedita se anima"*. Va con CSS puro (`animation-timeline`), sin una línea
   de JavaScript: el navegador la maneja fuera del hilo principal, así que no
   trabaja el scroll. Solo se animan `transform` y `opacity`, que son las dos
   propiedades que el compositor resuelve sin repintar.

   ⚠️ **El estado inicial (invisible) vive DENTRO del `@supports`, y ese es todo
   el cuidado que hay que tener.** Afuera, un navegador que no soporta
   `animation-timeline` —Firefox, Safari hasta hace poco— dejaría el contenido
   **oculto para siempre**: una página en blanco que en esta máquina se ve
   perfecta.

   ⚠️ Y respeta `prefers-reduced-motion`.
   ============================================================================ */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes irse-arriba {
  to { opacity: 0; transform: translateY(-46px) scale(.97); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }

    /* La portada se va hacia arriba mientras bajás. Es el gesto que hace que la
       página se sienta "de Apple" y no un fade suelto. */
    .hero-texto, .hero-marca {
      animation: irse-arriba linear both;
      animation-timeline: scroll();
      animation-range: 0 78vh;
    }
  }
}

/* --------------------------------------------------------------- Celular */

@media (max-width: 900px) {
  /* El hero pasa a una columna y el isotipo baja de tamaño: en el celular la
     marca no puede comerse la mitad de la primera pantalla. */
  .hero-grilla { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 24px; }
  .hero-marca { order: -1; justify-items: start; }
  .hero-marca .isotipo { height: 120px; }
  .hero h1 br { display: none; }
  .seccion-encabezado h2 br { display: none; }

  .ficha-cuerpo { grid-template-columns: 1fr; }
  .consulta { position: static; }
  .btn-grande { width: 100%; }
}