/* ═══════════════════════════════════════════════════════════════
   Umbral — hoja de estilo única

   La dirección visual sale de Zaragoza: ladrillo mudéjar, azulejo
   vidriado verde, yeso y latón de portal antiguo. El latón solo en
   filetes de 1-2 px; en cuanto pasa a ser fondo, la web se vuelve
   dorada y deja de parecer una agencia de barrio.

   La única pieza cara es el vano: el arco rebajado recortado sobre
   cada foto, que al pulsar la tarjeta se abre y se convierte en el
   hero de la ficha. Todo lo demás está quieto a propósito.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --verde-azulejo: #1E3A33;
  --yeso: #E4E2DB;
  --ladrillo: #9E4A31;
  --laton: #C39A4E;
  --tinta: #23201C;

  --yeso-hondo: #D8D5CC;
  --verde-hondo: #142722;
  --tinta-suave: rgba(35 32 28 / 0.66);
  --claro-suave: rgba(228 226 219 / 0.84);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* Espaciado intencionado, no pasos al azar */
  --e1: 0.5rem;
  --e2: 0.875rem;
  --e3: 1.375rem;
  --e4: 2.25rem;
  --e5: 3.5rem;
  --e6: 5.5rem;
  --e7: 8rem;

  --ancho: 76rem;
  --muelle: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Base ─────────────────────────────────────────────────────── */

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

html {
  /* Sin scroll horizontal a 375: cualquier cosa que se pase se corta aquí
     en vez de generar barra en el documento entero.
     'clip' y no 'hidden': hidden convierte la raíz en un contenedor de
     scroll y eso deja de pegar la franja de arriba (position: sticky).
     clip recorta igual y no crea contenedor. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--yeso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── Franja de demostración ───────────────────────────────────────
   Se publica como demo de portfolio, no como la web de una agencia, y
   eso hay que decirlo antes que nada. Pegada arriba en vez de flotando:
   una barra fija de verdad se come el hero en móvil. */

.franja {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--e2);
  background: var(--verde-azulejo);
  color: var(--claro-suave);
  border-bottom: 1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  padding: 0.45rem clamp(0.75rem, 3vw, 1.25rem);
}
.franja[hidden] { display: none; }

/* Con la franja pegada arriba, un salto a #inmuebles dejaría el titular
   justo debajo de ella. Se reserva su alto en el destino del ancla. */
:target, [id] { scroll-margin-top: 5.5rem; }

.franja-texto {
  margin: 0;
  flex: 1;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.franja-cta {
  color: var(--laton);
  text-decoration-color: color-mix(in srgb, var(--laton) 55%, transparent);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.franja-cta:hover { color: var(--yeso); }

.franja-cerrar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--yeso) 28%, transparent);
  color: var(--claro-suave);
  cursor: pointer;
  transition: border-color 0.2s var(--muelle), color 0.2s var(--muelle);
}
.franja-cerrar:hover { border-color: var(--laton); color: var(--yeso); }

/* En móvil el CTA baja a su propia línea en vez de partirse por la mitad. */
@media (max-width: 32rem) {
  .franja-cta { display: block; white-space: normal; margin-top: 0.15rem; }
}

img, video, svg { max-width: 100%; height: auto; display: block; }
.vano-def { position: absolute; width: 0; height: 0; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e2); }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Foco visible siempre. Nada de outline: none sin sustituto. */
:focus-visible {
  outline: 2px solid var(--ladrillo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Tipografía de servicio ───────────────────────────────────── */

.dato, .dato * { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ladrillo);
  margin: 0 0 var(--e1);
}
.eyebrow-claro { color: var(--laton); }

.seccion-titulo {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  margin-bottom: var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 1px solid color-mix(in srgb, var(--laton) 60%, transparent);
}
.seccion-subtitulo { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: var(--e2); }
.seccion-nota { color: var(--tinta-suave); max-width: 46ch; margin-bottom: var(--e4); }

/* ── Botones ──────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border: 1px solid var(--verde-azulejo);
  background: var(--verde-azulejo);
  color: var(--yeso);
  cursor: pointer;
  transition: transform 0.25s var(--muelle), opacity 0.25s var(--muelle);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton-ladrillo { background: var(--ladrillo); border-color: var(--ladrillo); color: var(--yeso); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: var(--tinta); }

/* El botón de WhatsApp sin número real: se ve, no engaña. */
.boton-inerte { opacity: 0.55; cursor: not-allowed; }
.boton-inerte:hover { transform: none; }

/* ── Cabecera ─────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  padding-block: var(--e3);
}

.marca { text-decoration: none; display: grid; gap: 0.15rem; }
.marca-nombre {
  font-family: var(--serif);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.marca-descriptor {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* A 375 los cuatro enlaces a 13 px se pasan 30 px del ancho y "Nosotros"
   cae a una segunda línea, que empuja el hero 90 px hacia abajo. Con 12 px
   y menos hueco caben los cuatro en una sola línea. */
.nav { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline; }
@media (min-width: 40rem) { .nav { gap: var(--e3); } }
.nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--muelle);
}
@media (min-width: 40rem) { .nav a { font-size: 0.8125rem; letter-spacing: 0.06em; } }
.nav a:hover, .nav a[aria-current='page'] { border-bottom-color: var(--laton); }
.nav-destacado {
  color: var(--ladrillo);
  border-bottom: 1px solid color-mix(in srgb, var(--ladrillo) 45%, transparent) !important;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.hero { position: relative; margin-bottom: var(--e6); }

/* En móvil, 16/9 sobre 375 px da un hero de 211 px: una franja, no una
   entrada. Ahí manda el alto de pantalla y la foto se recorta en vertical. */
.hero-medio {
  position: relative;
  /* El width explícito no sobra: con aspect-ratio y max-height, y sin ancho
     definido, el navegador estrecha la caja para mantener la proporción en
     vez de recortar. A 1440 el hero salía de 1248 px y dejaba una franja de
     yeso a la derecha en vez de ir a sangre. */
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 26rem;
  max-height: 78svh;
  overflow: hidden;
  background: var(--verde-hondo);
}
@media (min-width: 40rem) {
  .hero-medio { aspect-ratio: 16 / 9; min-height: 0; max-height: 78vh; }
}
.hero-foto, .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En vertical, el centro del plano es solo tela: recortado a 4/5 se pierden
     la ventana y el jardín, y queda un textil verde sin lectura. Desplazando
     el encuadre a la derecha vuelve a entrar el borde de la ventana. */
  object-position: 80% center;
}
@media (min-width: 40rem) { .hero-foto, .hero-video { object-position: center; } }
.hero-video { z-index: 1; }

/* Deriva lenta de 24 s. Solo transform, sin tocar layout. */
.deriva { animation: deriva 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes deriva {
  from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, 0.8%, 0); }
}

.hero-medio::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgb(20 39 34 / 0.86) 0%, rgb(20 39 34 / 0.52) 42%, rgb(20 39 34 / 0.12) 74%),
    linear-gradient(to top, rgb(20 39 34 / 0.55), transparent 45%);
}

.hero-texto {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  padding-bottom: var(--e5);
  color: var(--yeso);
}
.hero-titular {
  font-size: clamp(2.75rem, 8.5vw, 6.5rem);
  max-width: 14ch;
  margin-bottom: var(--e2);
}
.hero-bajada {
  max-width: 42ch;
  color: var(--claro-suave);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  margin: 0;
}

/* ── El vano ──────────────────────────────────────────────────────
   El arco va con clip-path referenciando el <clipPath> del documento.
   El pseudoelemento dibuja el filete de latón siguiendo el mismo arco,
   porque un borde normal se recortaría con la forma. */

.vano {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--yeso-hondo);
}
.vano img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: url(#vano);
  transition: transform 0.5s var(--muelle);
}
/* Igual que el hero de portada: a 375, 16/9 deja el vano en 211 px de alto
   y el arco no se llega a leer como arco. */
.vano-grande img { aspect-ratio: 4 / 3; max-height: 72vh; }
@media (min-width: 40rem) { .vano-grande img { aspect-ratio: 16 / 9; } }

.tarjeta-enlace:hover .vano img { transform: scale(1.03); }

/* ── Buscador ─────────────────────────────────────────────────── */

.buscador { background: var(--yeso-hondo); padding-block: var(--e5); margin-bottom: var(--e6); }

.buscador-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--e3);
}
.campo { display: grid; gap: 0.4rem; margin: 0; }
.campo label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.campo select, .campo input {
  font-family: var(--mono);
  font-size: 0.9375rem;
  padding: 0.75em 0.9em;
  border: 1px solid color-mix(in srgb, var(--tinta) 28%, transparent);
  border-radius: 0;
  background: var(--yeso);
  color: var(--tinta);
  width: 100%;
}
.campo input::placeholder { color: color-mix(in srgb, var(--tinta) 42%, transparent); }
.requerido { color: var(--ladrillo); }

.buscador-resultado {
  margin: var(--e3) 0 0;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

/* ── Rejilla de inmuebles ─────────────────────────────────────── */

.inmuebles { margin-bottom: var(--e6); }

.rejilla {
  display: grid;
  gap: var(--e5) var(--e4);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .rejilla { grid-template-columns: 1fr 1fr; } }

.tarjeta[hidden] { display: none; }
.tarjeta-enlace { text-decoration: none; display: block; }
.tarjeta-texto { padding-top: var(--e3); }
.tarjeta-titular {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: var(--e1);
}
.tarjeta-precio {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ladrillo);
  margin-bottom: var(--e1);
}
.precio-periodo { font-size: 0.8em; color: var(--tinta-suave); }

.tarjeta-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}
.tarjeta-datos li + li { position: relative; padding-left: 0.9rem; }
.tarjeta-datos li + li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 0.85em;
  transform: translateY(-50%);
  background: var(--laton);
}

.rejilla-vacia { margin-top: var(--e4); color: var(--tinta-suave); }

/* ── Banda del propietario ────────────────────────────────────── */

.banda-propietario {
  position: relative;
  isolation: isolate;
  background: var(--verde-azulejo);
  color: var(--yeso);
  padding-block: var(--e7);
  margin-bottom: var(--e6);
  overflow: hidden;
}
.banda-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.banda-propietario::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, var(--verde-hondo) 12%, rgb(20 39 34 / 0.72) 68%);
}
.banda-texto { max-width: 44rem; }
.banda-titular {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  margin-bottom: var(--e2);
}
.banda-bajada { color: var(--claro-suave); margin-bottom: var(--e4); max-width: 46ch; }

/* ── Equipo ───────────────────────────────────────────────────── */

.equipo { margin-bottom: var(--e6); }
/* Dos columnas en móvil: en una sola, cuatro retratos cuadrados a ancho
   completo son 2000 px de scroll para leer cuatro nombres. */
.equipo-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e4) var(--e3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56rem) { .equipo-lista { grid-template-columns: repeat(4, 1fr); gap: var(--e4); } }
.equipo-foto { margin: 0 0 var(--e2); }

/* Los cuatro retratos son de fotógrafos distintos y van en fila. Se igualan
   con el mismo recorte cuadrado y un grado de color por persona.

   El grado no se escribe aquí: viene en --retrato-filtro, que build.mjs monta
   desde equipo_grados de cliente.json. Es pulido de imagen, cambia foto a
   foto, y quien lo ajusta no tiene por qué abrir esta hoja. El valor de
   reserva es el grado base, por si algún día falta la variable. */
.equipo-foto img, .agente-foto img {
  aspect-ratio: 1;
  object-fit: cover;
  filter: var(--retrato-filtro, sepia(0.16) saturate(0.92) contrast(1.04));
}
.equipo-nombre { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 0.1rem; }
.equipo-linea { font-size: 0.9375rem; color: var(--tinta-suave); margin: var(--e1) 0 0; }

/* ── Zonas ────────────────────────────────────────────────────── */

.zonas { margin-bottom: var(--e6); }
.zonas-cuerpo { display: grid; gap: var(--e4); }
@media (min-width: 56rem) { .zonas-cuerpo { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.zonas-mapa { margin: 0; background: var(--yeso-hondo); padding: var(--e3); }
.zonas-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.zona { border-top: 1px solid color-mix(in srgb, var(--laton) 55%, transparent); padding-top: var(--e2); }
.zona-nombre { font-size: 1.4rem; margin-bottom: 0.2rem; }
.zona-nota { color: var(--tinta-suave); font-size: 0.9375rem; margin: 0; }
.zona-dato { font-size: 0.875rem; margin-top: var(--e1); }
.zona-fuente { display: block; font-size: 0.75rem; color: var(--tinta-suave); }

/* ── Contacto ─────────────────────────────────────────────────── */

.contacto { margin-bottom: var(--e6); }
.contacto-caja { max-width: 40rem; }
.contacto-linea { margin: 0 0 0.35rem; }
.contacto-hueco, .pie-hueco { color: var(--tinta-suave); font-style: italic; }
.contacto .boton { margin-top: var(--e3); }

/* ── Ficha ────────────────────────────────────────────────────── */

.ficha-hero { margin-bottom: var(--e5); }
.ficha-encabezado { padding-top: var(--e4); }
.ficha-titular { font-size: clamp(2rem, 5.5vw, 3.4rem); max-width: 20ch; margin-bottom: var(--e2); }
.ficha-precio { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ladrillo); margin: 0; }

.galeria {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
  margin-bottom: var(--e6);
}
@media (min-width: 56rem) { .galeria { grid-template-columns: 1fr 1fr; } }
.galeria-foto { margin: 0; }
.galeria-foto img { aspect-ratio: 3 / 2; object-fit: cover; }
.galeria-foto figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  padding-top: 0.5rem;
}

.ficha-columnas { display: grid; gap: var(--e5); margin-bottom: var(--e6); }
@media (min-width: 56rem) { .ficha-columnas { grid-template-columns: 1.5fr 1fr; align-items: start; } }

.ficha-parrafo { max-width: 62ch; margin-bottom: var(--e3); }
.ficha-parrafo.destacado {
  border-left: 2px solid var(--laton);
  padding-left: var(--e3);
  font-size: 1.0625rem;
}
.ficha-principal .seccion-titulo { margin-top: var(--e5); }
.ficha-principal > .seccion-titulo:first-child { margin-top: 0; }
.ficha-plano { margin: 0 0 var(--e4); background: var(--yeso-hondo); padding: var(--e3); }

/* Datos duros: mono, en filas de dos columnas con filete fino */
.datos-duros { margin: 0 0 var(--e5); font-size: 0.875rem; }
.dato-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.dato-fila dt { color: var(--tinta-suave); }
.dato-fila dd { margin: 0; text-align: right; font-weight: 500; }

.agente {
  background: var(--yeso-hondo);
  padding: var(--e3);
  margin-bottom: var(--e4);
}
.agente-foto { margin: 0 0 var(--e2); width: 7.5rem; }
.agente-nombre { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.agente-linea { font-size: 0.875rem; color: var(--tinta-suave); margin: 0.2rem 0 var(--e3); }

.ficha-mapa { margin: 0; }
.ficha-mapa img { background: var(--yeso-hondo); padding: var(--e2); }
.ficha-mapa figcaption {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  padding-top: var(--e1);
}

/* Gastos de compra */
.costes { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: var(--e2); }
.costes th { text-align: left; font-weight: 400; padding: 0.7rem 0; vertical-align: top; }
.costes td { text-align: right; padding: 0.7rem 0; white-space: nowrap; vertical-align: top; }
.costes tr { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); }
.costes-detalle {
  display: block;
  font-size: 0.75rem;
  color: var(--tinta-suave);
  max-width: 42ch;
  line-height: 1.5;
}
.costes-condicional th, .costes-condicional td { color: var(--tinta-suave); }
.costes-total { border-bottom: 2px solid var(--laton); }
.costes-total th, .costes-total td { font-weight: 600; color: var(--ladrillo); }
.costes-aviso, .costes-fuente {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  max-width: 60ch;
  margin-bottom: var(--e1);
}

/* ── vender.html ──────────────────────────────────────────────── */

.vender-hero { padding-block: var(--e6) var(--e5); }
.vender-titular { font-size: clamp(2.25rem, 6.5vw, 4.5rem); max-width: 18ch; margin-bottom: var(--e3); }
.vender-bajada { font-size: clamp(1.0625rem, 2vw, 1.375rem); color: var(--tinta-suave); max-width: 48ch; }

.vender-columnas { display: grid; gap: var(--e5); margin-bottom: var(--e6); }
@media (min-width: 56rem) { .vender-columnas { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.vender-pasos .seccion-titulo { margin-top: var(--e5); }
.vender-pasos > .seccion-titulo:first-child { margin-top: 0; }

.pasos { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e4); }
.paso { display: grid; gap: 0.3rem; }
.paso-numero {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--laton);
}
.paso-titulo { font-size: 1.35rem; }
.paso-texto { color: var(--tinta-suave); margin: 0; max-width: 54ch; }

.honorarios {
  font-size: clamp(2.5rem, 7vw, 4rem);
  /* La mono a tamaño de display se abre demasiado y "3 % + IVA" se lee como
     cuatro cosas sueltas en vez de como una cifra. */
  letter-spacing: -0.05em;
  color: var(--ladrillo);
  line-height: 1;
  margin: 0 0 var(--e2);
}
.honorarios-detalle { max-width: 52ch; }

.vender-formulario { position: sticky; top: var(--e3); }
.formulario {
  background: var(--verde-azulejo);
  color: var(--yeso);
  padding: var(--e4);
  display: grid;
  gap: var(--e3);
}
.formulario .seccion-titulo { border-bottom-color: color-mix(in srgb, var(--laton) 70%, transparent); margin: 0; }
.formulario .seccion-nota { color: var(--claro-suave); margin: 0; }
.formulario .campo label { color: var(--claro-suave); }
.formulario .campo input {
  background: color-mix(in srgb, var(--verde-hondo) 70%, transparent);
  border-color: color-mix(in srgb, var(--laton) 45%, transparent);
  color: var(--yeso);
}
.formulario .campo input::placeholder { color: rgb(228 226 219 / 0.45); }
.formulario .boton { background: var(--ladrillo); border-color: var(--ladrillo); justify-self: start; }
.formulario-nota { font-family: var(--mono); font-size: 0.75rem; color: var(--claro-suave); margin: 0; }

/* ── nosotros.html ────────────────────────────────────────────── */

/* Sin max-width en el contenedor: .contenedor ya centra, y estrecharlo aquí
   dejaba el bloque centrado en vez de alineado con el resto de la página.
   La medida de lectura la ponen el titular y los párrafos, cada uno la suya. */
.nosotros-texto { padding-block: var(--e6) var(--e5); }
.nosotros-titular { font-size: clamp(2.25rem, 6vw, 4rem); max-width: 18ch; margin-bottom: var(--e4); }
.nosotros-parrafo { font-size: 1.125rem; max-width: 62ch; margin-bottom: var(--e3); }
.nosotros-nota {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  border-left: 2px solid var(--laton);
  padding-left: var(--e3);
  max-width: 54ch;
}
.nosotros-ambiente { margin-bottom: var(--e6); }
.nosotros-video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Bloque de ambiente: clips verticales en fila. El formato retrato manda
   aquí, así que la caja mantiene 9/16 y el vídeo la llena. */
.ambiente { margin-bottom: var(--e6); }
.ambiente-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e2);
}
.ambiente-clip {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--yeso-hondo);
  display: block;
}
@media (min-width: 56rem) { .ambiente-fila { gap: var(--e3); } }
.ambiente-nota {
  font-size: 0.75rem;
  color: var(--tinta-suave);
  margin: var(--e2) 0 0;
}

/* ── Páginas legales ──────────────────────────────────────────── */

.legal-cuerpo { padding-block: var(--e5) var(--e6); max-width: 46rem; }
.legal-titular { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--e2); }
.legal-entradilla { color: var(--tinta-suave); margin-bottom: var(--e5); }
.legal-seccion { margin-bottom: var(--e4); }
.legal-parrafo { max-width: 64ch; }
.legal-pendiente {
  background: var(--yeso-hondo);
  border-left: 2px solid var(--ladrillo);
  padding: var(--e3);
}

/* ── Pie ──────────────────────────────────────────────────────── */

.pie {
  background: var(--verde-azulejo);
  color: var(--claro-suave);
  padding-block: var(--e5) var(--e4);
  margin-top: var(--e6);
}
.pie-columnas {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--e4);
  border-bottom: 1px solid color-mix(in srgb, var(--laton) 40%, transparent);
}
.pie .eyebrow { color: var(--laton); }
.pie-marca { font-family: var(--serif); font-size: 1.75rem; color: var(--yeso); margin: 0 0 0.2rem; }
.pie-linea { margin: 0 0 0.3rem; font-size: 0.9375rem; }
.pie-hueco { color: rgb(228 226 219 / 0.55); }

.pie-legal {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  padding-top: var(--e3);
  display: grid;
  gap: var(--e2);
}
.pie-legal nav { display: flex; flex-wrap: wrap; gap: var(--e3); }
.pie-legal a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.pie-demo {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  color: rgb(228 226 219 / 0.6);
  max-width: 72ch;
  margin: 0;
}

/* ── Aviso de cookies ─────────────────────────────────────────────
   Propio y sin cargar nada hasta que se responde. En móvil ocupa la
   franja de abajo, nunca media pantalla. */

.cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: var(--e2);
}
.cookies[hidden] { display: none; }
.cookies-caja {
  width: min(100% - 1rem, 38rem);
  margin-inline: auto;
  background: var(--tinta);
  color: var(--yeso);
  padding: var(--e3);
  display: grid;
  gap: var(--e2);
  box-shadow: 0 1px 2px rgb(35 32 28 / 0.2), 0 12px 32px rgb(35 32 28 / 0.28);
}
.cookies-titulo { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.cookies-texto { font-size: 0.875rem; margin: 0; color: rgb(228 226 219 / 0.8); }
.cookies-botones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cookies .boton-fantasma { color: var(--yeso); border-color: rgb(228 226 219 / 0.5); }
.cookies .boton:not(.boton-fantasma) { background: var(--laton); border-color: var(--laton); color: var(--tinta); }

/* ── Aparición de secciones ───────────────────────────────────────
   Una sola vez, corta, y solo opacity y transform. */

.reveal { transition: opacity 0.6s var(--muelle), transform 0.6s var(--muelle); }

/* El estado oculto solo se aplica si hay JavaScript para quitarlo. Sin
   scripting-enabled, o sin JS, el contenido nace visible: nunca se queda
   una sección en blanco porque no cargue app.js. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ── El vano que se abre ──────────────────────────────────────────
   Transición entre documentos. Donde no esté soportada, la navegación
   es un corte limpio y no se rompe nada. */

@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-group(*) {
  animation-duration: 0.52s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Movimiento reducido ──────────────────────────────────────────
   Todo quieto y la transición del vano pasa a corte directo. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .deriva { animation: none; transform: scale(1.04); }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}