/* ============================================================================
   TEMPLUM — Portada
   Negro y oro. Un solo negro, un solo oro, un solo acabado.
   Tipografia: Playfair Display (marca) + Open Sans (interfaz y datos).
   ==========================================================================*/

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Color ---------------------------------------------------------------
     El original no tenia ningun color: el oro vivia dentro de las fotos.
     Aqui el oro es de la pagina — filetes, cifras, bordes y botones.       */
  --negro:        #0a0908;   /* fondo base                                 */
  --negro-2:      #100e0b;   /* seccion elevada                            */
  --negro-3:      #17140f;   /* tarjeta                                    */
  --negro-4:      #1f1a13;   /* borde suave / relleno de campo             */

  --oro:          #c9a24b;   /* EL oro. No hay otro.        8.1:1 s/ negro */
  --oro-claro:    #e8ce8b;
  --oro-oscuro:   #8a6a2a;
  --oro-linea:    rgba(201, 162, 75, .34);
  --oro-tenue:    rgba(201, 162, 75, .14);
  --oro-humo:     rgba(201, 162, 75, .09);

  --marfil:       #efe9dc;   /* texto principal            16.3:1 s/ negro */
  --marfil-2:     #a9a08e;   /* texto secundario            7.7:1 s/ negro */

  /* Cobre oxidado para los errores. No un rojo de sistema: un rojo puro es lo
     unico de la paleta que no podria estar en una fotografia de travertino, y
     se ve como una alerta de navegador pegada encima. Este es el mismo oro
     bajado de tono, asi que avisa sin salirse de la casa.  7.3:1 s/ negro-3 */
  --alerta:       #e08a5f;
  --alerta-linea: rgba(224, 138, 95, .48);

  /* Un unico acabado de oro para todo lo que brilla. */
  --acabado-oro: linear-gradient(150deg,
                  #f6e4b0 0%, #e8ce8b 18%, #c9a24b 46%,
                  #8a6a2a 68%, #d8b869 88%, #f6e4b0 100%);

  /* Tipografia ---------------------------------------------------------- */
  --serif:  "Playfair Display", "Georgia", serif;
  --sans:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-wordmark: clamp(3.2rem, 12vw, 9rem);
  --t-display:  clamp(2.5rem, 5.6vw, 4rem);    /* 64 */
  --t-h2:       clamp(1.9rem, 3.9vw, 3rem);    /* 48 */
  --t-h3:       clamp(1.35rem, 2.1vw, 1.6875rem); /* 27 */
  --t-lead:     clamp(1.075rem, 1.5vw, 1.3125rem);
  --t-cuerpo:   1.0625rem;
  --t-ui:       0.9375rem;
  --t-cejilla:  0.72rem;
  --t-pie:      0.875rem;

  --lh-display: 1.06;
  --lh-titulo:  1.18;
  --lh-cuerpo:  1.62;

  --track-cejilla: .34em;
  --track-wordmark: .1em;

  /* Retícula ------------------------------------------------------------ */
  --contenedor: 1280px;
  --contenido:  1154px;
  --margen:     clamp(20px, 5vw, 63px);
  --barra:      76px;

  /* Ritmo vertical ------------------------------------------------------ */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --seccion: clamp(72px, 9vw, 128px);

  --transicion: 320ms cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 16px); }

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--serif);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  /* `clip` y no `hidden`: `hidden` convierte al body en contenedor de scroll
     y el escenario `sticky` del recorrido dejaria de pegarse al viewport.  */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: -.01em;
}

p { margin: 0; }

::selection { background: var(--oro); color: var(--negro); }

:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: 50%; top: -100px; z-index: 200;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: var(--oro); color: var(--negro);
  font-family: var(--sans); font-size: var(--t-ui); font-weight: 700;
}
.saltar:focus { top: 12px; }

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

/* ------------------------------------------------------------- Envoltura */
.envoltura {
  width: 100%;
  max-width: calc(var(--contenido) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { position: relative; padding-block: var(--seccion); }
.seccion--elevada { background: var(--negro-2); }

/* Filo de oro entre secciones */
.seccion + .seccion::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--oro-linea) 22%, var(--oro-linea) 78%, transparent);
}

/* --------------------------------------------------------------- Texturas
   Celosia de rombos + grano. Es el "maximalismo" que no estorba la lectura:
   vive en el fondo, nunca debajo de un parrafo largo.                      */
.celosia { position: relative; isolation: isolate; }
.celosia::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    repeating-linear-gradient(45deg,  var(--oro-humo) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, var(--oro-humo) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .25) 55%, transparent);
          mask-image: linear-gradient(#000, rgba(0, 0, 0, .25) 55%, transparent);
  pointer-events: none;
}

.grano {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- Ornamentos */
.filete {
  display: flex; align-items: center; gap: 14px;
  color: var(--oro);
}
.filete::before, .filete::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-linea) 40%, var(--oro));
}
.filete::after { transform: scaleX(-1); }
.filete i {
  width: 7px; height: 7px; flex: none;
  background: var(--oro); transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--oro-tenue);
}
.filete--corto { max-width: 260px; }
.filete--izq { justify-content: flex-start; }
.filete--izq::before { display: none; }
.filete--izq::after { max-width: 180px; flex: 0 0 180px; }

/* Filete con volutas — el ornamento de marca */
.filete--orla i {
  width: 92px; height: 26px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='26' fill='none' stroke='%23c9a24b' stroke-width='1.1'%3E%3Cpath d='M2 13h16'/%3E%3Cpath d='M90 13H74'/%3E%3Cpath d='M18 13c6 0 8-6 14-6s8 4 8 6-2 6-8 6-8-6-14-6z'/%3E%3Cpath d='M74 13c-6 0-8-6-14-6s-8 4-8 6 2 6 8 6 8-6 14-6z'/%3E%3Cpath d='M46 6l7 7-7 7-7-7z' fill='%23c9a24b'/%3E%3C/svg%3E");
  transform: none; box-shadow: none; background-color: transparent;
}

/* Numeral romano dentro de un rombo */
.numeral {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  font-family: var(--serif); font-size: .8rem; font-weight: 700;
  letter-spacing: 0; color: var(--oro);
  position: relative;
}
.numeral::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--oro-linea); rotate: 45deg;
}

/* Marca de agua: la T como textura, nunca como segundo logotipo */
.marca-agua {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: center / auto 118% no-repeat url("../img/logo-t-marca.png");
  opacity: .045;
}

/* Pinstripes de oro en los márgenes de la página */
.marco-pagina { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
.marco-pagina::before, .marco-pagina::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 17px;
  background: repeating-linear-gradient(90deg,
              var(--oro-linea) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  opacity: .55;
}
.marco-pagina::before { left: 16px; }
.marco-pagina::after  { right: 16px; }
@media (max-width: 1320px) { .marco-pagina { display: none; } }

/* Esquinas de marco */
.esquinas { position: relative; }
.esquinas > .esq {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  border: 1px solid var(--oro); opacity: .8;
}
.esquinas > .esq:nth-of-type(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.esquinas > .esq:nth-of-type(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.esquinas > .esq:nth-of-type(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.esquinas > .esq:nth-of-type(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* ---------------------------------------------------------- Tipos de texto */
.cejilla {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: var(--t-cejilla);
  font-weight: 600;
  letter-spacing: var(--track-cejilla);
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}
.cejilla::before {
  content: ""; width: 34px; height: 1px; background: var(--oro); flex: none;
}
.cejilla--centrada { justify-content: center; }
.cejilla--centrada::after {
  content: ""; width: 34px; height: 1px; background: var(--oro); flex: none;
}

.titulo   { font-size: var(--t-display); line-height: var(--lh-display); }
.titulo-2 { font-size: var(--t-h2); }
.titulo-3 { font-size: var(--t-h3); font-weight: 400; }

.oro-liquido {
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lead {
  font-size: var(--t-lead);
  color: var(--marfil-2);
  max-width: 62ch;
}

.cuerpo { color: var(--marfil-2); max-width: 68ch; }
.cuerpo strong { color: var(--marfil); font-weight: 600; }

/* ---------------------------------------------------------------- Botones */
.boton {
  --relleno: 17px 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: var(--relleno);
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--oro);
  background: transparent;
  color: var(--oro);
  cursor: pointer;
  position: relative;
  isolation: isolate;          /* encierra el ::before dorado en el botón */
  overflow: hidden;
  transition: color var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.boton:hover { box-shadow: 0 0 0 1px var(--oro), 0 12px 30px rgba(201, 162, 75, .18); }
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--acabado-oro);
  transform: translateY(101%);
  transition: transform var(--transicion);
}
.boton > * { position: relative; }
.boton:hover, .boton:focus-visible { color: var(--negro); }
.boton:hover::before, .boton:focus-visible::before { transform: translateY(0); }

.boton--solido { color: var(--negro); }
.boton--solido::before { transform: translateY(0); }
.boton--solido:hover::before, .boton--solido:focus-visible::before {
  transform: translateY(0); filter: brightness(1.12);
}

.boton .flecha { transition: transform var(--transicion); }
.boton:hover .flecha { transform: translateX(5px); }

/* Enlace de texto con subrayado de oro */
.enlace {
  color: var(--oro);
  text-decoration: none;
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 6px;
  background-image: linear-gradient(var(--oro), var(--oro));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--transicion), color var(--transicion);
}
.enlace:hover { color: var(--oro-claro); background-size: 40% 1px; }

/* =========================================================== Barra superior */
.barra {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--barra);
  display: flex; align-items: center;
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--oro-tenue);
  transition: background var(--transicion), border-color var(--transicion);
}
.barra.es-solida {
  background: rgba(10, 9, 8, .96);
  border-bottom-color: var(--oro-linea);
}
.barra .envoltura {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: calc(var(--contenedor) + var(--margen) * 2);
}

.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.marca img { height: 40px; width: auto; }
.marca .nombre {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--marfil);
  text-transform: uppercase;
}

/* El hueco cede antes que la palabra. Con la letra legal dentro son siete
   enlaces mas el corte, y a 34px fijos «La Hera» y el boton de contacto
   partian en dos lineas a 1440. */
.menu { display: flex; align-items: center; gap: clamp(15px, 1.7vw, 30px); }
.menu a {
  font-family: var(--sans); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marfil-2); text-decoration: none;
  padding-block: 6px; position: relative;
  white-space: nowrap;
  transition: color var(--transicion);
}
/* Un boton de barra que parte en dos lineas deja de leerse como boton. */
.barra .boton { white-space: nowrap; }

/* ------------------------------------------------- Desplegable de inmuebles
   El sitio original anida dos niveles de hover: Inmuebles > Puebla > ficha.
   Dos niveles colgando del puntero se cierran solos en cuanto el raton se
   desvia un pixel, y en teclado son una trampa. Aqui el desplegable abre UN
   panel con los tres estados a la vista en columnas: la misma informacion,
   una sola interaccion, y todo el inventario legible de un vistazo.        */
.desplegable { position: relative; }
.desplegable__boton {
  font-family: var(--sans); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marfil-2); background: none; border: 0; cursor: pointer;
  padding-block: 6px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--transicion);
}
.desplegable__boton:hover,
.desplegable__boton[aria-expanded="true"] { color: var(--oro); }

/* Cheurón dibujado, no un carácter: un glifo suelto hereda la tipografía y
   no coincide con el resto del sistema de trazos. */
.desplegable__boton .caret {
  width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transicion);
}
.desplegable__boton[aria-expanded="true"] .caret { transform: translateY(1px) rotate(-135deg); }

/* El panel ARRANCA pegado al botón (`top: 100%`), sin hueco. La separación
   visual de 15px la hace un borde superior transparente, y `background-clip:
   padding-box` impide que el fondo se pinte debajo de él: se ve el mismo aire
   de antes, pero la caja del panel toca la del botón y el puntero nunca sale
   del desplegable al bajar.

   Antes había 14px de hueco real y el menú se cerraba en la cara a mitad de
   camino. Se intentó puentear con un pseudo-elemento —primero en el panel,
   luego en el botón— y ninguno llegaba a recibir el puntero: en el hueco
   respondía siempre la `.envoltura` de la barra. En vez de seguir peleando
   con el reparto de capas, se quita el hueco.

   La línea de oro de arriba, que el borde transparente se llevaba, vuelve
   como sombra interior. */
.desplegable__panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  /* 860 y no 640: Puebla tiene once inmuebles y los otros dos estados uno
     cada uno, así que en tres columnas estrechas el panel se estiraba hacia
     abajo con dos tercios de vacío al lado. Cabe: el botón está centrado y a
     1086px —lo más angosto antes de que entre el cajón— admite 942 sin
     salirse de la pantalla. El `max-width` es el cinturón por si la barra
     cambia de orden. */
  min-width: 860px;
  max-width: calc(100vw - 32px);
  padding: var(--s-4);
  background: rgba(12, 10, 8, .98);
  background-clip: padding-box;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--oro-linea);
  border-top: 15px solid transparent;
  box-shadow: inset 0 1px 0 var(--oro-linea), 0 26px 70px rgba(0, 0, 0, .62);
}
.desplegable__panel[hidden] { display: none; }


.desplegable__destacado {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; margin-bottom: var(--s-3);
  border: 1px solid var(--oro-tenue);
  background: var(--oro-humo);
  color: var(--oro-claro) !important;
}
.desplegable__destacado:hover { border-color: var(--oro-linea); }

/* Cuatro columnas para tres estados: Puebla se lleva dos y reparte sus once
   fichas en dos filas de nombres, de modo que las tres listas terminan más o
   menos a la misma altura en vez de dejar una columna larguísima sola. */
.desplegable__estados {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.desplegable__estados section:last-child { grid-column: span 2; }
.desplegable__estados section:last-child ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-4);
}
.desplegable__estados h3 {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--oro);
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--oro-tenue);
}
.desplegable__estados ul { list-style: none; display: grid; gap: 2px; }
.desplegable__estados a {
  display: block; padding: 7px 0;
  font-family: var(--serif); font-size: .95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--marfil-2); white-space: normal;
  line-height: 1.34;
}
.desplegable__estados a:hover { color: var(--marfil); }
/* La ficha que ya vive en este sitio se distingue de la que todavía sale al
   anterior: un rombo de oro delante, el mismo de los numerales. */
.desplegable__estados a.es-propia { color: var(--marfil); }
.desplegable__estados a.es-propia::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: 9px;
  transform: rotate(45deg); background: var(--oro);
}

/* El menu no se pliega hasta 900px, asi que entre 900 y 1250 la barra tenia
   siete enlaces, la marca y el boton peleando por el mismo ancho: el
   logotipo pisaba «Inicio» y el boton salia cortado. Se retira el boton
   antes que nada porque es lo unico duplicado —el contacto esta en el menu
   y en el disco flotante—, y con sus ~200px la fila vuelve a caber. */
@media (max-width: 1250px) {
  .barra .boton { display: none; }
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--oro); transition: width var(--transicion);
}
/* La letra legal vive en la barra por decisión del cliente —así estaba en el
   sitio original—, pero no puede pesar lo mismo que la navegación: son enlaces
   que se consultan una vez, no rutas de compra. Van detrás de un corte y un
   punto más pequeñas. El color no se rebaja: sigue siendo `--marfil-2` a
   7.7:1, porque atenuar un enlace legal es justo lo que no se debe hacer. */
.menu__corte {
  width: 1px; height: 16px; flex: none;
  background: var(--oro-linea);
  margin-inline: 4px;
}
.menu__legal { font-size: .72rem; letter-spacing: .12em; }

.menu a:hover, .menu a[aria-current="true"] { color: var(--oro); }
.menu a:hover::after, .menu a[aria-current="true"]::after { width: 100%; }

.barra .boton { --relleno: 12px 22px; font-size: .8125rem; }

.hamburguesa {
  display: none;
  width: 46px; height: 46px; flex: none;
  background: transparent; border: 1px solid var(--oro-linea);
  cursor: pointer; position: relative;
}
.hamburguesa span {
  position: absolute; left: 50%; translate: -50% 0;
  width: 20px; height: 1px; background: var(--oro);
  transition: var(--transicion);
}
.hamburguesa span:nth-child(1) { top: 17px; }
.hamburguesa span:nth-child(2) { top: 23px; }
.hamburguesa span:nth-child(3) { top: 29px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { top: 23px; rotate: 45deg; }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { top: 23px; rotate: -45deg; }

/* ==================================================================== Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding-block: calc(var(--barra) + 72px) 72px;
  text-align: center;
  overflow: hidden;
}

/* Fondo: brillo de oro + celosia + vineta. Si un dia hay fotografia,
   basta con darle valor a --hero-foto en el HTML.                          */
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(78% 58% at 50% 40%, rgba(201, 162, 75, .17), transparent 68%),
    radial-gradient(120% 80% at 50% 118%, rgba(201, 162, 75, .10), transparent 60%),
    var(--negro);
}
.hero__fondo::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  var(--oro-humo) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, var(--oro-humo) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(85% 70% at 50% 45%, transparent 18%, #000 82%);
          mask-image: radial-gradient(85% 70% at 50% 45%, transparent 18%, #000 82%);
}
.hero__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  opacity: .38;
  filter: grayscale(.35) contrast(1.05);
}

/* Marco ornamental */
.hero__marco {
  position: absolute; inset: calc(var(--barra) + 26px) var(--margen) 26px;
  z-index: 1; pointer-events: none;
  border: 1px solid var(--oro-tenue);
}
.hero__marco::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid var(--oro-humo);
}

.hero__contenido { position: relative; z-index: 2; width: 100%; }

.hero .lugar {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--oro); margin: 0 0 var(--s-4);
}

/* Oro grabado estable + un solo destello que barre. El degradado no cambia:
   lo unico que se mueve es el brillo. */
.wordmark {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--t-wordmark);
  line-height: .92;
  letter-spacing: var(--track-wordmark);
  text-indent: var(--track-wordmark);
  margin: 0;
  background-image:
    linear-gradient(102deg, transparent 38%, rgba(255, 252, 240, .60) 47%,
                    rgba(255, 252, 240, .16) 53%, transparent 61%),
    linear-gradient(180deg, #fbf0cf 0%, #e8ce8b 24%, #c9a24b 50%,
                    #8a6a2a 74%, #e2c078 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -70% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(201, 162, 75, .22));
  animation: destello 8s ease-in-out infinite;
}
@keyframes destello {
  0%        { background-position: -70% 0, 0 0; }
  55%, 100% { background-position: 180% 0, 0 0; }
}

.hero .lema {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--marfil);
  margin: var(--s-3) 0 0;
}

.hero .filete { max-width: 380px; margin: var(--s-4) auto; }

.hero .entrada {
  max-width: 60ch; margin: 0 auto;
  font-size: var(--t-lead);
  color: var(--marfil-2);
}

.hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-5);
}

.hero__baja {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--marfil-2); text-decoration: none;
}
.hero__baja span {
  width: 1px; height: 46px;
  background: linear-gradient(var(--oro), transparent);
  animation: cae 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cae {
  0%, 100% { transform: scaleY(.4); opacity: .5; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* =============================================================== Cifras */
.cifras {
  border-block: 1px solid var(--oro-tenue);
  background: var(--negro-2);
}
.cifras .envoltura {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.cifra {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  position: relative;
}
.cifra + .cifra::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: var(--oro-tenue);
}
.cifra b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.25rem, 4.4vw, 3.4rem);
  line-height: 1;
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cifra span {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--marfil-2);
}

/* ========================================================= Bloques de texto */
.cabecera-seccion { max-width: 62ch; }
.cabecera-seccion .titulo,
.cabecera-seccion .titulo-2 { margin-top: var(--s-3); }
.cabecera-seccion .lead { margin-top: var(--s-3); }
.cabecera-seccion--centrada { margin-inline: auto; text-align: center; }
.cabecera-seccion--centrada .lead { margin-inline: auto; }

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

/* Cita / manifiesto */
.manifiesto {
  position: relative;
  padding: clamp(32px, 5vw, 56px);
  background:
    linear-gradient(var(--negro-3), var(--negro-3)) padding-box,
    var(--acabado-oro) border-box;
  border: 1px solid transparent;
}
.manifiesto p {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.5;
  color: var(--marfil);
}
.manifiesto p em { font-style: italic; color: var(--oro-claro); }
.manifiesto .firma {
  display: block; margin-top: var(--s-4);
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro);
}

/* ========================================================== Marco de imagen
   Todas las fotografias van dentro de un marco de oro. Mientras no haya
   fotografia el hueco se ve intencional, no roto.                          */
.marco {
  position: relative;
  background: var(--negro-3);
  border: 1px solid var(--oro-linea);
  overflow: hidden;
  aspect-ratio: var(--proporcion, 4 / 3);
}
.marco::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--oro-humo); pointer-events: none;
}
.marco img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1), filter var(--transicion);
}
.marco--pendiente {
  display: grid; place-items: center;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(201, 162, 75, .12), transparent 70%),
    repeating-linear-gradient(45deg, var(--oro-humo) 0 1px, transparent 1px 26px),
    var(--negro-3);
}
.marco--pendiente .sello {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: .18em; text-indent: .18em;
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .5;
}

/* ================================================================ La Hera */
.hera { position: relative; overflow: hidden; }
.hera .distintivo {
  display: flex; width: fit-content;  /* `inline-flex` lo dejaba en el mismo
                                         renglón que la cejilla de arriba: «EL
                                         ACTIVO DEL AÑO» y la cajita se leían
                                         como una sola etiqueta partida, y el
                                         margen superior del HTML era inerte */
  align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--oro-linea);
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--oro);
  margin-bottom: var(--s-3);
}
.hera .titulo-2 { font-style: italic; }
.hera .refuerzo {
  margin-top: var(--s-3);
  font-family: var(--serif); font-size: var(--t-h3);
  color: var(--oro-claro);
}
.hera__acciones { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.externo { font-family: var(--sans); font-size: .75rem; letter-spacing: .1em;
           color: var(--marfil-2); margin-top: var(--s-2); text-transform: none; }

/* ============================================================== Portafolio */
.rejilla-inmuebles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: var(--s-6);
}
.ficha { text-decoration: none; display: block; position: relative; }
.ficha .marco {
  --proporcion: 1 / 1;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
/* Las cuatro fotos son de teléfono y con cielo de mediodía: puestas en crudo,
   el azul pesa más que el oro de la página y las fichas parecen pegadas
   encima. Un punto menos de saturación, una pizca de calor y la misma viñeta
   que en el equipo las asientan en la tinta. Es lo mínimo para que no
   compitan; al pasar el ratón se van los dos y la foto se ve como es, que
   para eso está la ficha. */
.ficha .marco img { filter: saturate(.84) contrast(1.05) sepia(.12); }
/* El `:not(.marco--pendiente)` no es adorno: las fichas del inventario que
   siguen sin fotografía llevan su monograma en un `<p>` de flujo normal, y un
   `::before` posicionado se pinta por encima de él. Sin esta guarda, poner
   foto aquí apagaría el monograma de las otras nueve. */
.ficha .marco:not(.marco--pendiente)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(118% 88% at 50% 38%, transparent 46%, rgba(10, 9, 8, .5) 100%),
    linear-gradient(to top, rgba(10, 9, 8, .34), transparent 46%);
  transition: opacity var(--transicion);
}
.ficha:hover .marco img { transform: scale(1.06); filter: none; }
.ficha:hover .marco:not(.marco--pendiente)::before { opacity: .25; }
.ficha:hover .marco {
  border-color: var(--oro);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px var(--oro-tenue);
}
.ficha__estado {
  display: block; margin-top: var(--s-2);
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--oro);
}
.ficha__nombre {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  color: var(--marfil); line-height: 1.3;
  transition: color var(--transicion);
}
.ficha:hover .ficha__nombre { color: var(--oro-claro); }

/* ============================================================== Categorias */
.categorias {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--oro-tenue);
  margin-top: var(--s-6);
}
.categoria {
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--oro-tenue);
}
.categoria:last-child { border-right: 0; }
.categoria b {
  display: block;
  line-height: var(--lh-titulo);   /* sin esto hereda el 1.62 del cuerpo y el
                                      min-height de abajo se queda corto: las
                                      cuatro descripciones arrancaban a alturas
                                      distintas y sobraba un hueco de 24 px */
  min-height: 2.36em;              /* dos líneas: alinea las cuatro celdas */
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  color: var(--oro-claro);
}
.categoria span {
  display: block; margin-top: 10px;
  font-size: var(--t-ui); color: var(--marfil-2);
  font-family: var(--sans); line-height: 1.55;
}

/* ================================================================= Equipo */
.rejilla-equipo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; margin-top: var(--s-6);
}
.persona .marco { --proporcion: 1 / 1; }
/* Las seis fotos llegan de sitios distintos —dos de estudio, dos selfies, una
   de vacaciones— y juntas parecen un tablón de anuncios. El monocromo las
   iguala, pero un gris puro contradice la casa: el `sepia` posterior lo lleva
   al lado del oro, que es donde vive todo lo demás. Al pasar el ratón vuelve
   el color, que es el premio. */
.persona .marco img { filter: grayscale(1) sepia(.3) contrast(1.06); }
.persona:hover .marco img { filter: none; }
/* Ni siquiera en monocromo comparten fondo: una está en un estudio oscuro y
   otra a mediodía contra el cielo, y el cuadro claro se adelanta al resto de
   la retícula. Esta viñeta hunde los bordes hasta el tono de la sección, así
   que los seis se leen como una misma serie. Va en `::before` y sin
   `z-index` para caer por debajo de las esquinas doradas, que son las que
   tienen que quedar arriba. */
.persona .marco:not(.marco--pendiente)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 34%, transparent 42%, rgba(10, 9, 8, .62) 100%),
    linear-gradient(to top, rgba(10, 9, 8, .42), transparent 52%);
  transition: opacity var(--transicion);
}
.persona:hover .marco:not(.marco--pendiente)::before { opacity: .3; }
.persona h3 {
  margin-top: var(--s-2);
  font-family: var(--serif); font-size: 1.1875rem; font-weight: 600;
  color: var(--marfil);
}
.persona span {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
}

/* ==================================================================== FAQ */
.faq { margin-top: var(--s-6); border-top: 1px solid var(--oro-tenue); }
.faq details { border-bottom: 1px solid var(--oro-tenue); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--s-4) 56px var(--s-4) 0;
  position: relative;
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 400;
  color: var(--marfil);
  transition: color var(--transicion);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro-claro); }
.faq summary::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
  rotate: 45deg;
  transition: rotate var(--transicion), border-color var(--transicion);
}
.faq details[open] summary { color: var(--oro-claro); }
.faq details[open] summary::after { rotate: -135deg; margin-top: -3px; }
.faq .respuesta {
  padding: 0 56px var(--s-4) 0;
  color: var(--marfil-2);
  max-width: 78ch;
  animation: abre 380ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================ Llamada */
.llamada {
  position: relative;
  text-align: center;
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--negro-2);
  overflow: hidden;
}
.llamada::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 130% at 50% 100%, rgba(201, 162, 75, .16), transparent 62%);
}
.llamada > * { position: relative; }
.llamada .titulo-2 { margin-top: var(--s-3); }
.llamada .lead { margin: var(--s-3) auto 0; }
.llamada__acciones {
  display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
  margin-top: var(--s-5);
}

/* =============================================================== Contacto */
.contacto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  margin-top: var(--s-6);
}

.datos { display: grid; gap: var(--s-4); }
.dato {
  display: flex; gap: 18px; align-items: flex-start;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--oro-tenue);
  text-decoration: none;
}
.dato:last-of-type { border-bottom: 0; }
.dato .icono {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--oro-linea); color: var(--oro);
  transition: var(--transicion);
}
.dato:hover .icono { background: var(--oro); color: var(--negro); }
.dato dt, .dato .etiqueta {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro);
}
.dato .valor {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-size: var(--t-cuerpo);
  color: var(--marfil); line-height: 1.5;
}
.dato:hover .valor { color: var(--oro-claro); }

/* Formulario */
.formulario {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--oro-linea);
  background: var(--negro-3);
  position: relative;
}
.formulario h3 {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  color: var(--marfil);
}
.formulario > p {
  margin-top: 10px; color: var(--marfil-2);
  font-size: var(--t-ui); font-family: var(--sans);
}
.campos { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.campo { display: grid; gap: 8px; }
.campo label {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--marfil-2);
}
.campo input, .campo select, .campo textarea {
  font-family: var(--sans); font-size: var(--t-cuerpo);
  color: var(--marfil);
  background: var(--negro-4);
  border: 1px solid var(--oro-tenue);
  padding: 14px 16px;
  transition: border-color var(--transicion), background var(--transicion);
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--oro); outline: none; background: #241e15;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo select { appearance: none; cursor: pointer; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: var(--s-3); display: grid; }
.formulario .boton { width: 100%; margin-top: var(--s-4); }

/* Estado de error del campo. El hueco no se reserva con `min-height`: el
   formulario tiene cuatro campos en dos filas y reservar sitio bajo cada uno
   abriria cuatro calles vacias permanentes. Aparece y empuja, que en un
   formulario tan corto no descoloca nada. */
.campo__error {
  font-family: var(--sans); font-size: .8rem; line-height: 1.45;
  color: var(--alerta);
  display: flex; align-items: baseline; gap: 8px;
}
/* `display:flex` de autor le gana al `display:none` que el navegador da a
   `[hidden]`, y el hueco vacío se quedaba pintando su rombo bajo cada campo. */
.campo__error[hidden] { display: none; }
.campo__error::before {
  content: ""; flex: none;
  width: 5px; height: 5px;
  transform: rotate(45deg);          /* rombo, como los numerales de seccion */
  background: var(--alerta);
  position: relative; top: -1px;
}
.campo input[aria-invalid], .campo select[aria-invalid] {
  border-color: var(--alerta-linea);
}
.campo input[aria-invalid]:focus, .campo select[aria-invalid]:focus {
  border-color: var(--alerta);
}

/* Acuse de recibo. Lleva las mismas esquinas de oro que el manifiesto y las
   fichas: es el momento de mas confianza de la pagina y tiene que verse de la
   casa, no un banner verde de plantilla. */
.acuse {
  margin-top: var(--s-4);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--oro-linea);
  background:
    radial-gradient(120% 140% at 50% 0%,
                    rgba(201, 162, 75, .12) 0%, rgba(201, 162, 75, 0) 70%),
    var(--negro-4);
}
.acuse__titulo {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  line-height: var(--lh-titulo);
  color: var(--oro-claro);
}
.acuse__cuerpo {
  margin-top: 10px;
  font-family: var(--sans); font-size: var(--t-ui); line-height: 1.55;
  color: var(--marfil-2);
}

.formulario .nota {
  margin-top: var(--s-3); font-family: var(--sans); font-size: .78rem;
  color: var(--marfil-2); line-height: 1.5;
}

/* ==================================================================== Pie */
.pie {
  border-top: 1px solid var(--oro-linea);
  background: var(--negro);
  padding-block: var(--s-6) var(--s-4);
}
.pie__alto {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .8fr));
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: var(--s-6);
}
.pie .marca img { height: 56px; }
.pie__alto p { margin-top: var(--s-3); color: var(--marfil-2); max-width: 40ch; }
.pie h4 {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 700;
  letter-spacing: var(--track-cejilla); text-transform: uppercase; color: var(--oro);
  margin-bottom: var(--s-3);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie ul a {
  text-decoration: none; color: var(--marfil-2);
  font-family: var(--sans); font-size: var(--t-ui);
  transition: color var(--transicion);
}
.pie ul a:hover { color: var(--oro); }
.pie__bajo {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--oro-tenue);
  font-family: var(--sans); font-size: var(--t-pie); color: var(--marfil-2);
}
.pie__bajo nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pie__bajo a { text-decoration: none; transition: color var(--transicion); }
.pie__bajo a:hover { color: var(--oro); }

/* ============================================================ Flotante WA */
.flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--acabado-oro);
  color: var(--negro);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
  transition: transform var(--transicion);
}
.flotante:hover { transform: scale(1.08); }

/* Mientras la portada llena la pantalla, el disco se retira. En telefono caia
   justo encima de «Hablar con un asesor», que va centrado y a todo el ancho, y
   se comia su flecha; y ademas duplicaba una accion que la propia portada ya
   ofrece. Aparece en cuanto se entra en la pagina, que es donde hace falta.
   Se anima la opacidad y no `display`, para que la vuelta no sea un salto. */
@media (max-width: 820px) {
  body.en-portada .flotante {
    opacity: 0; visibility: hidden;
    transform: scale(.86) translateY(10px);
    pointer-events: none;
  }
}
.flotante {
  transition: transform var(--transicion), opacity var(--transicion),
              visibility var(--transicion);
}

/* =========================================================== Aparicion */
.aparece {
  opacity: 0; transform: translateY(26px);
  transition: opacity 800ms cubic-bezier(.22,.61,.36,1),
              transform 800ms cubic-bezier(.22,.61,.36,1);
}
.aparece.es-visible { opacity: 1; transform: none; }

/* ============================================================ Responsivo */
@media (max-width: 1100px) {
  .rejilla-inmuebles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categoria:nth-child(2) { border-right: 0; }
  .categoria:nth-child(-n+2) { border-bottom: 1px solid var(--oro-tenue); }
  .rejilla-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras .envoltura { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(3)::before { display: none; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid var(--oro-tenue); }
}

/* El cajón entra a 1100 y no a 900, que es donde se pliega el resto de la
   página. Con la letra legal dentro, el menú mide 816px de contenido y a
   1000 se salía 58px del viewport: la barra rompía mucho antes de que
   apareciera la hamburguesa. El umbral es de la BARRA, no del contenido, así
   que vive en su propio bloque; el de 900 sigue mandando en las retículas. */
@media (max-width: 1100px) {
  .menu {
    position: fixed; inset: var(--barra) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 9, 8, .985);
    border-bottom: 1px solid var(--oro-linea);
    padding: var(--s-2) var(--margen) var(--s-4);
    transform: translateY(-120%);
    transition: transform var(--transicion);
    max-height: calc(100svh - var(--barra)); overflow-y: auto;
  }
  .menu.es-abierto { transform: none; }
  .menu a { padding: 18px 0; border-bottom: 1px solid var(--oro-humo); font-size: 1rem; }
  /* En columna el corte vertical no significa nada: pasa a ser una regla que
     separa la navegación de la letra legal. */
  .menu__corte { width: auto; height: 1px; margin: var(--s-2) 0 0; }
  .menu .menu__legal { font-size: .86rem; }
  .hamburguesa { display: block; }

  /* Dentro del cajón el panel deja de flotar y se despliega en el sitio, como
     un acordeón: un menú absoluto dentro de otro menú absoluto se sale de la
     pantalla y no hay forma de volver. */
  .desplegable { width: 100%; }
  .desplegable__boton {
    width: 100%; justify-content: space-between;
    padding: 18px 0; font-size: 1rem;
    border-bottom: 1px solid var(--oro-humo);
  }
  .desplegable__panel {
    position: static; transform: none; min-width: 0;
    padding: var(--s-3) 0 var(--s-4);
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .desplegable__estados { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  /* En el cajón todo va en una sola columna: se deshacen el tramo doble de
     Puebla y su lista a dos, que solo tienen sentido en el panel ancho. */
  .desplegable__estados section:last-child { grid-column: auto; }
  .desplegable__estados section:last-child ul { grid-template-columns: minmax(0, 1fr); }
  .desplegable__estados a { padding: 10px 0; font-size: 1rem; }
  .desplegable__destacado { padding: 14px; }
}

@media (max-width: 900px) {
  :root { --barra: 66px; }
  .marca .nombre { font-size: 1.1875rem; letter-spacing: .18em; }
  .marca img { height: 34px; }

  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .contacto__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pie__alto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pie__alto > :first-child { grid-column: 1 / -1; }
  .hero__marco { inset: calc(var(--barra) + 16px) 12px 16px; }
}

@media (max-width: 620px) {
  .rejilla-inmuebles { grid-template-columns: minmax(0, 1fr); }
  .rejilla-equipo { grid-template-columns: minmax(0, 1fr); }
  .categorias { grid-template-columns: minmax(0, 1fr); }
  .categoria { border-right: 0; border-bottom: 1px solid var(--oro-tenue); }
  .categoria:last-child { border-bottom: 0; }
  .cifras .envoltura { grid-template-columns: minmax(0, 1fr); }
  .cifra + .cifra::before { display: none; }
  .cifra { border-bottom: 1px solid var(--oro-tenue); }
  .cifra:last-child { border-bottom: 0; }
  .campo--doble { grid-template-columns: minmax(0, 1fr); }
  .pie__alto { grid-template-columns: minmax(0, 1fr); }
  .hero__acciones .boton, .llamada__acciones .boton { width: 100%; }
  .faq summary { font-size: 1.15rem; padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
}