/* ============================================================
   GUIZMO Torre Urbana — Layout y componentes

   Sistema editorial por bloques: las secciones alternan superficie
   (negro → azul → negro → teal → beige → negro). Cada superficie
   redefine los tokens --txt / --panel / --borde / --acento-local,
   y los componentes se adaptan solos.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Red de seguridad contra scroll lateral. Va aquí y no en .hero: en el hero
     recortaba el marco HUD justo cuando la inclinación lo sacaba de su caja.
     clip y no hidden, para no crear un contenedor de desplazamiento y no
     romper el position:sticky de la barra superior. */
  overflow-x: clip;
  background: var(--negro);
  color: var(--beige);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--paso-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

.salto {
  position: absolute; left: -9999px;
  background: var(--rojo); color: var(--sobre-rojo);
  padding: var(--espacio-2xs) var(--espacio-s);
  font-family: var(--font-mono); font-size: var(--paso--2);
  border-radius: 0 0 var(--radio) 0; z-index: 100;
  text-decoration: none;
}
.salto:focus { left: 0; top: 0; }

.mono, .overline {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--paso--1);
}
.overline { color: var(--acento-txt); transition: color var(--transicion); }

/* --- Contenido condicional por perfil --- */
.solo-inversionista, .solo-familia { display: none; }
[data-perfil="inversionista"] .solo-inversionista,
[data-perfil="familia"] .solo-familia { display: block; }

/* --- Botones --- */
.boton {
  display: inline-block;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--paso--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--transicion), background-color var(--transicion);
}
.boton:hover { transform: translateY(-2px); }
.boton:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }
.boton--rojo   { background: var(--rojo); color: var(--sobre-rojo); }
.boton--acento { background: var(--acento-local); color: var(--acento-local-txt); }

/* ============================================================
   Recursos de marca
   ============================================================ */

/* Sello GUIZMO 20/26 — el lockup que se repite en todas las piezas. */
.sello {
  display: inline-grid;
  grid-template-columns: auto;
  font-family: var(--font-mono);
  font-size: var(--paso--2);
  letter-spacing: 0.16em;
  line-height: 1.15;
  color: var(--txt-3);
}
.sello b { font-size: var(--paso-1); font-weight: 500; letter-spacing: 0.1em; color: var(--txt-2); }

/* Pie de dato: la tira monoespaciada con la ubicación, en lugar de las
   coordenadas del deck (que no corresponden a León). */
.coordenada {
  font-family: var(--font-mono);
  font-size: var(--paso--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* Etiqueta de zona: el chip sólido con esquina a escuadra. */
.zona {
  display: inline-block;
  justify-self: start;   /* dentro de .seccion__cabeza (grid) no debe estirarse */
  padding: 0.35em 0.7em;
  background: var(--rojo);
  color: var(--sobre-rojo);
  font-family: var(--font-mono);
  font-size: var(--paso--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 8px 8px 8px 0;
}
.zona--teal { background: var(--teal); }
/* Sobre la superficie azul un chip azul sería invisible: se invierte. */
.zona--oscura { background: var(--negro); color: var(--beige); }

/* ============================================================
   Marco HUD — el recurso central de la línea gráfica.
   Trazado rojo de "detección" que barre al entrar en pantalla,
   con esquinas, flechas de dirección y cajas etiquetadas sobre
   los objetos de la fotografía.
   ============================================================ */
.hud { position: relative; display: block; margin: 0; }
.hud img { border-radius: var(--radio-g-chico); display: block; width: 100%; }

.hud__marco {
  position: absolute; inset: 12px;
  border: 2px solid var(--rojo);
  border-radius: 18px 18px 18px 2px;
  pointer-events: none;
  /* El barrido: el marco se dibuja de izquierda a derecha, como un escáner. */
  clip-path: inset(0 100% 0 0);
}
.js .hud__marco { transition: clip-path 900ms var(--ease-salida) 120ms; }
.hud.visible .hud__marco,
[data-reveal-grupo].visible .hud__marco,
.todo-visible .hud__marco { clip-path: inset(0 0 0 0); }

/* Cabezas de flecha sobre el trazado. */
.hud__marco::before, .hud__marco::after {
  content: ""; position: absolute;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.hud__marco::before { top: -5px; left: 26%; border-left: 8px solid var(--rojo); }
.hud__marco::after { bottom: -5px; right: 26%; border-right: 8px solid var(--rojo); }

/* Las etiquetas aparecen después del barrido. */
.hud__etiqueta, .hud__zona, .hud__caja {
  opacity: 0;
  pointer-events: none;
}
.js .hud__etiqueta, .js .hud__zona, .js .hud__caja { transition: opacity 400ms linear 820ms; }
.hud.visible .hud__etiqueta,
.hud.visible .hud__zona,
.hud.visible .hud__caja,
[data-reveal-grupo].visible .hud__etiqueta,
[data-reveal-grupo].visible .hud__zona,
[data-reveal-grupo].visible .hud__caja,
.todo-visible .hud__etiqueta,
.todo-visible .hud__zona,
.todo-visible .hud__caja { opacity: 1; }

.hud__etiqueta {
  position: absolute; top: 24px; left: 26px;
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.14em; line-height: 1.3;
  color: var(--rojo); text-transform: uppercase;
  /* Placa negra al 90 %: sobre cielo o paredes claras la sombra no alcanzaba.
     Así el rojo conserva al menos 4.5:1 sobre cualquier fotografía. */
  background: rgba(7, 5, 8, 0.9);
  padding: 0.45em 0.65em;
  border-radius: 6px 6px 6px 0;
}
.hud__zona { position: absolute; bottom: 24px; right: 26px; }

/* Caja etiquetada sobre un objeto dentro de la foto. Se coloca con
   --x/--y/--w/--h en porcentajes del contenedor. */
.hud__caja {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1.5px solid var(--rojo);
  border-radius: 4px 4px 4px 0;
}
.hud__caja i {
  position: absolute; left: 0; bottom: -1.55em;
  background: var(--rojo); color: var(--sobre-rojo);
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.15em 0.45em; border-radius: 0 0 4px 0;
  white-space: nowrap;
}

/* Esquinas sueltas: la versión discreta del marco, para bloques que no
   son fotografía. */
.marco-esq { position: relative; }
.marco-esq::before, .marco-esq::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--rojo);
  pointer-events: none;
}
.marco-esq::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.marco-esq::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }

/* --- Barra superior --- */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espacio-s);
  padding: var(--espacio-s) var(--espacio-m);
  background: color-mix(in srgb, var(--negro) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--negro-borde);
}
.barra__logo img { width: 150px; }

/* ============================================================
   Hero — dos columnas reales.
   Antes el alzado y el marco HUD iban en position:absolute sobre toda la
   sección, así que en ventanas medianas se encimaban con las cifras. Ahora
   el visual tiene su propia columna y no puede invadir el texto.
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--espacio-xl);
  align-items: center;
  min-height: 86vh;
  padding: var(--espacio-2xl) var(--espacio-m) var(--espacio-xl);
  max-width: var(--ancho-ancho);
  margin-inline: auto;
}
.hero__texto { display: grid; gap: var(--espacio-l); min-width: 0; }
.hero__visual {
  position: relative; min-height: 32rem; align-self: stretch;
  /* Arriba y no centrado: así el sello queda a la altura del overline y la
     fachada acompaña al titular, sin un hueco negro encima. */
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: var(--espacio-s);
}

/* El encuadre tiene la proporción exacta del render: así las cajas del HUD,
   medidas en porcentaje sobre la imagen, caen siempre sobre su objeto. */
.hero__encuadre {
  position: relative; margin: 0;
  aspect-ratio: 1800 / 1241;
  perspective: 900px;   /* el giro tiene que leerse, sin agrandar tanto el marco */
}
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radio-g);
}

.hero__contenido { max-width: 40rem; min-width: 0; display: grid; gap: var(--espacio-m); }
.hero__titular { font-size: var(--paso-6); }
.hero__bajada { font-size: var(--paso-1); color: var(--txt-2); max-width: 34rem; }
.hero__precio { font-size: var(--paso-2); font-weight: 700; }
.hero__precio .mono { display: block; color: var(--txt-3); font-size: var(--paso--1); font-weight: 500; }
.hero__cta { justify-self: start; }
.hero__sello { align-self: flex-end; text-align: end; }

/* --- Switch de perfil --- */
.switch { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.switch__leyenda {
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-3); padding: 0 0 var(--espacio-2xs);
}
.switch__pista {
  display: flex; gap: var(--espacio-3xs);
  padding: var(--espacio-3xs);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 999px;
  flex-wrap: wrap;
  width: fit-content; max-width: 100%;
}
.switch__opcion { position: relative; min-width: 0; }
.switch__opcion input {
  position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.switch__opcion span {
  display: block;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--paso--1);
  color: var(--txt-2);
  white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion);
}
.switch__opcion input:checked + span { background: var(--acento-local); color: var(--acento-local-txt); }
.switch__opcion input:focus-visible + span { outline: 3px solid var(--txt); outline-offset: 2px; }

/* --- Cifras del hero --- */
.hero__cifras {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-m); margin: 0;
  border-top: 1px solid var(--borde);
  padding-top: var(--espacio-m);
  max-width: 40rem;
}
.hero__cifras dt { font-size: var(--paso-4); font-weight: 700; line-height: 1; }
.hero__cifras dd {
  margin: var(--espacio-3xs) 0 0;
  font-family: var(--font-mono); font-size: var(--paso--2);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-3);
}

/* ============================================================
   Secciones y superficies
   ============================================================ */
.seccion {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--espacio-2xl) var(--espacio-m);
  color: var(--txt);
}
.seccion--linea { border-top: 1px solid var(--borde); }

/* Sangrado completo sin envolver cada sección en un contenedor extra:
   la sombra pinta el color hasta los bordes de la ventana y el clip-path
   evita que aparezca scroll horizontal. */
.seccion--color {
  background: var(--sup);
  box-shadow: 0 0 0 100vmax var(--sup);
  clip-path: inset(0 -100vmax);
  padding-block: var(--espacio-3xl);
}

.seccion--azul {
  --sup: var(--azul);
  --txt: #070508;                      /* 7.70:1 */
  --txt-2: rgba(7, 5, 8, 0.78);        /* 5.55:1 */
  --txt-3: rgba(7, 5, 8, 0.70);        /* 4.62:1 */
  --panel: rgba(255, 255, 255, 0.26);
  --borde: rgba(7, 5, 8, 0.22);
  --acento-local: #070508;
  --acento-local-txt: var(--azul);
  --acento-txt: #070508;
}
.seccion--teal {
  /* Superficie más profunda que el teal de marca: sobre #427C76 ni el blanco
     puro llega a 4.5:1, así que no habría jerarquía de texto posible. */
  --sup: var(--teal-fondo);
  --txt: #ffffff;                        /* 8.21:1 */
  --txt-2: rgba(255, 255, 255, 0.82);    /* 6.18:1 */
  --txt-3: rgba(255, 255, 255, 0.68);    /* 4.78:1 */
  --panel: rgba(255, 255, 255, 0.1);
  --borde: rgba(255, 255, 255, 0.26);
  --acento-local: #ffffff;
  --acento-local-txt: var(--teal-fondo);
  --acento-txt: #ffffff;
}
.seccion--beige {
  --sup: var(--beige);
  --txt: #070508;                      /* 13.35:1 */
  --txt-2: rgba(7, 5, 8, 0.74);        /* 7.40:1 */
  --txt-3: rgba(7, 5, 8, 0.62);        /* 4.93:1 */
  --panel: rgba(255, 255, 255, 0.5);
  --borde: rgba(7, 5, 8, 0.18);
  /* El rojo de marca sobre beige da 2.27:1: no alcanza ni para texto grande.
     En esta banda el acento es el negro. */
  --acento-local: #070508;
  --acento-local-txt: var(--beige);
  --acento-txt: #070508;
}

.seccion__cabeza { display: grid; gap: var(--espacio-2xs); margin-bottom: var(--espacio-l); }
.seccion__cabeza h2 { font-size: var(--paso-5); }
.parrafo { font-size: var(--paso-1); color: var(--txt-2); margin-bottom: var(--espacio-m); }
.parrafo--ancho { max-width: 44rem; }

.rejilla-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--espacio-xl); align-items: start; }

/* --- Lista de datos (universidades) --- */
.lista-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-s); }
.lista-datos li {
  display: grid; gap: var(--espacio-3xs);
  padding-bottom: var(--espacio-s);
  border-bottom: 1px solid var(--borde);
}
.lista-datos .mono { color: var(--txt-3); font-size: var(--paso--2); }
.lista-datos strong { font-size: var(--paso-1); font-weight: 700; color: var(--txt); }
/* La universidad de enfrente es el argumento entero: se marca. */
.lista-datos li:first-child strong { font-size: var(--paso-2); }

/* --- Tarjetas de tres --- */
.tarjetas-3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-m); }
.tarjetas-3 li {
  padding: var(--espacio-m);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g-chico);
}
.tarjetas-3 h3 { font-size: var(--paso-2); margin-bottom: var(--espacio-2xs); color: var(--acento-local); transition: color var(--transicion); }
.tarjetas-3 p { color: var(--txt-2); font-size: var(--paso--1); }

/* ============================================================
   Tipologías — la sección que decide la conversión: jerarquía explícita
   ============================================================ */
.tipologias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-s);
}
.tipologia {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--espacio-2xs);
  padding: var(--espacio-m);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g-chico);
  transition: border-color var(--transicion), transform var(--transicion);
}
.tipologia:hover { border-color: var(--acento-local); transform: translateY(-3px); }
/* El 60 m² Largo es el 46 % del edificio y el producto que el cliente quiere
   impulsar. Es una franja completa arriba y las otras cuatro quedan en una
   fila pareja debajo. Se arma con áreas de grid y no con flex + order: con
   flex en fila sin salto, el contenido se desbordaba fuera de la tarjeta. */
.tipologia--destacada {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  grid-template-areas:
    "sello   sello"
    "medida  nota"
    "precio  hechos"
    "detalle hechos"
    "stock   cta";
  gap: var(--espacio-xs) var(--espacio-xl);
  align-items: start;
  border-color: var(--acento-local);
  background: color-mix(in srgb, var(--acento-local) 14%, var(--panel));
  border-radius: var(--radio-g);
  padding: var(--espacio-l);
  margin-bottom: var(--espacio-s);
}
.tipologia--destacada .tipologia__sello   { grid-area: sello; }
.tipologia--destacada .tipologia__medida  { grid-area: medida; }
.tipologia--destacada .tipologia__detalle { grid-area: detalle; }
.tipologia--destacada .tipologia__precio  { grid-area: precio; }
.tipologia--destacada .tipologia__nota    { grid-area: nota; margin: 0; }
.tipologia--destacada .tipologia__hechos  { grid-area: hechos; margin: 0; }
.tipologia--destacada .tipologia__stock   { grid-area: stock; margin: 0; padding-top: var(--espacio-s); align-self: end; }
.tipologia--destacada .tipologia__cta     { grid-area: cta; justify-self: start; align-self: end; margin: 0; }

.tipologia__sello { order: 1; flex-basis: 100%; }
.tipologia--destacada .tipologia__medida { order: 2; }
.tipologia--destacada .tipologia__detalle { order: 3; flex-basis: 16rem; align-self: end; }
.tipologia--destacada .tipologia__nota { order: 4; flex: 1 1 20rem; margin: 0; }
.tipologia--destacada .tipologia__hechos { order: 5; flex: 0 1 20rem; margin: 0; }
.tipologia--destacada .tipologia__stock { order: 6; margin: 0; padding: 0; align-self: end; }
.tipologia--destacada .tipologia__cta { order: 7; margin: 0; align-self: end; }
.tipologia__sello { color: var(--acento-txt); font-size: var(--paso--2); }
.tipologia__medida { font-size: var(--paso-4); font-weight: 700; line-height: 1; }
.tipologia--destacada .tipologia__medida { font-size: var(--paso-6); }
.tipologia__medida span { font-size: var(--paso-1); font-weight: 400; white-space: nowrap; }
.tipologia--destacada .tipologia__medida span { font-size: var(--paso-2); }
.tipologia__detalle { color: var(--txt-2); font-size: var(--paso--2); }
.tipologia__nota { color: var(--txt-2); font-size: var(--paso--1); margin-top: var(--espacio-2xs); }
.tipologia--destacada .tipologia__nota { font-size: var(--paso-1); max-width: 26rem; }
.tipologia__stock { color: var(--txt-3); font-size: var(--paso--2); margin-top: auto; padding-top: var(--espacio-s); }
.tipologia__cta {
  margin-top: var(--espacio-2xs);
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acento-txt); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color var(--transicion);
}
.tipologia__cta:hover { color: var(--txt); }
.tipologia__cta:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }
.nota-pie { margin-top: var(--espacio-m); color: var(--txt-3); font-size: var(--paso--2); }

/* --- Amenidades --- */
.amenidades {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: var(--espacio-2xs);
}
.amenidad {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid; align-content: end; gap: var(--espacio-3xs);
  padding: var(--espacio-m);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g-chico);
  min-height: 15rem;
}
.amenidad > *:not(.amenidad__img) { position: relative; z-index: 2; }
.amenidad__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-salida);
}
/* Velo: garantiza que el texto se lea sobre cualquier fotografía.
   Al pasar el cursor, el velo se vuelve el color de marca de esa tarjeta. */
.amenidad::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* El texto vive abajo, así que arriba el velo puede ser mucho más ligero y
     dejar ver la fotografía. En la franja donde hay texto nunca baja de 0.80. */
  background: linear-gradient(180deg,
    rgba(7, 5, 8, 0.28) 0%,
    rgba(7, 5, 8, 0.58) 42%,
    rgba(7, 5, 8, 0.86) 72%,
    rgba(7, 5, 8, 0.94) 100%);
  transition: background var(--transicion);
}
.amenidad--ancha { grid-column: span 2; }
.amenidad .mono { color: var(--txt-3); font-size: var(--paso--2); }
.amenidad h3 { font-size: var(--paso-2); margin-top: var(--espacio-2xs); }
.amenidad p { color: var(--txt-2); font-size: var(--paso--1); }

/* --- Galería --- */
.galeria { margin: var(--espacio-xl) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-s); }
.galeria img { border-radius: var(--radio-g-chico); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galeria figcaption { grid-column: 1 / -1; color: var(--txt-3); font-size: var(--paso--2); }
.galeria .hud { grid-column: span 1; }
.galeria .hud img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-g-chico); }

/* --- Lock-off por dentro: planta amueblada y cuatro renders oficiales --- */
.lockoff { margin-top: var(--espacio-2xl); }
.lockoff__titular { font-size: var(--paso-4); }
.lockoff__planta { margin: var(--espacio-l) 0 var(--espacio-s); }
.lockoff__planta img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio-g-chico);
  background: #fff;   /* la planta es un render sobre blanco */
}
.lockoff__planta figcaption { margin-top: var(--espacio-2xs); color: var(--txt-3); font-size: var(--paso--2); }
.lockoff__fotos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-s);
}
.lockoff__fotos li { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radio-g-chico); }
.lockoff__fotos img { width: 100%; height: 100%; object-fit: cover; }
.lockoff__fotos p {
  position: absolute; left: var(--espacio-2xs); bottom: var(--espacio-2xs);
  display: grid; gap: 2px; margin: 0;
  padding: 0.6em 0.85em;
  background: rgba(7, 5, 8, 0.9);
  border-radius: 10px 10px 10px 2px;
}
.lockoff__fotos strong { font-size: var(--paso-1); line-height: 1.1; }
.lockoff__fotos .mono { color: var(--txt-3); font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 860px) {
  .lockoff__fotos { grid-template-columns: repeat(2, 1fr); }
}

/* --- Enlace al mapa del predio --- */
.enlace-mapa {
  display: inline-block; margin-top: var(--espacio-s);
  font-size: var(--paso--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--txt);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
@media (hover: hover) { .enlace-mapa:hover { border-bottom-color: transparent; } }
.enlace-mapa:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }

/* --- Cifras de respaldo --- */
.cifras {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-m); margin: 0 0 var(--espacio-xl);
  padding-block: var(--espacio-m);
  border-block: 1px solid var(--borde);
}
.cifras dt { font-size: var(--paso-5); font-weight: 700; line-height: 1; color: var(--acento-local); transition: color var(--transicion); }
.cifras dd {
  margin: var(--espacio-3xs) 0 0;
  font-family: var(--font-mono); font-size: var(--paso--2);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-3);
}
.sub { font-size: var(--paso-1); margin-bottom: var(--espacio-2xs); }

/* --- Preguntas frecuentes --- */
.faq { display: grid; gap: var(--espacio-3xs); }
.faq details { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-g-chico); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--espacio-m);
  font-size: var(--paso-1); font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-s);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--acento-local); font-size: var(--paso-2); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 3px solid var(--txt); outline-offset: -3px; border-radius: var(--radio); }
.faq details p { padding: 0 var(--espacio-m) var(--espacio-m); color: var(--txt-2); margin: 0; }

/* --- Contacto y formulario --- */
.seccion--contacto { max-width: var(--ancho-ancho); }
.contacto {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-xl);
  align-items: start;
  padding: var(--espacio-xl);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
}
.contacto__texto h2 { font-size: var(--paso-4); margin-bottom: var(--espacio-s); }
.contacto__precio { color: var(--acento-txt); font-size: var(--paso--1); transition: color var(--transicion); }

.formulario { display: grid; gap: var(--espacio-s); }
.campo { display: grid; gap: var(--espacio-3xs); }
.campo span {
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-3);
}
.campo input, .campo select {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g-chico);
  color: var(--txt);
  font-family: var(--font-display);
  font-size: var(--paso-0);
  transition: border-color var(--transicion);
}
.campo input::placeholder { color: var(--txt-3); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento-local); }
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--txt); outline-offset: 2px; }
.campo input:user-invalid { border-color: var(--rojo); }

.formulario__enviar { border: 0; cursor: pointer; margin-top: var(--espacio-2xs); font-size: var(--paso--1); }
.formulario__enviar[disabled] { opacity: 0.6; cursor: wait; }
.formulario__aviso { font-size: var(--paso--2); color: var(--txt-3); }
.formulario__estado { font-family: var(--font-mono); font-size: var(--paso--2); min-height: 1.4em; }
.formulario__estado[data-tipo="error"] { color: var(--rojo); }
.formulario__estado[data-tipo="ok"] { color: var(--acento-txt); }

/* --- Pie --- */
.pie {
  max-width: var(--ancho-contenido); margin-inline: auto;
  padding: var(--espacio-xl) var(--espacio-m) var(--espacio-2xl);
  border-top: 1px solid var(--negro-borde);
  display: grid; gap: var(--espacio-2xs);
}
.pie img { width: 170px; margin-bottom: var(--espacio-s); }
.pie .mono { color: var(--txt-3); font-size: var(--paso--2); letter-spacing: 0.06em; text-transform: none; }
.pie__legal { margin-top: var(--espacio-s); }
.pie__sello { margin-top: var(--espacio-s); }

/* --- Barra móvil --- */
.whatsapp-movil { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
/* Por debajo de 1080 no hay ancho para dos columnas: el visual pasa a ser
   una textura de fondo detrás del texto y el marco HUD se retira. */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; position: relative; overflow: hidden; }
  /* En una columna la fachada va debajo del texto, no de fondo: una foto
     detrás del titular le quitaría lectura. Sin HUD, que aquí no se inclina. */
  .hero__visual { min-height: 0; }
  .hero__hud, .hero__sello { display: none; }
  .tipologias { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .amenidades { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .rejilla-2 { grid-template-columns: 1fr; gap: var(--espacio-l); }
  .tarjetas-3 { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; gap: var(--espacio-l); padding: var(--espacio-m); }
  .seccion--color { padding-block: var(--espacio-2xl); }
  body { padding-bottom: 5.5rem; }
  .whatsapp-movil {
    display: block; position: fixed; z-index: 60;
    inset-inline: var(--espacio-s); bottom: var(--espacio-s);
    padding: 1.05em 1.5em;
    background: var(--rojo); color: var(--sobre-rojo);
    border-radius: 999px; text-align: center; text-decoration: none;
    font-family: var(--font-mono); font-size: var(--paso--1);
    letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 720px) {
  .hero__cifras { grid-template-columns: repeat(2, 1fr); }
  .barra__cta { display: none; }
  .galeria { grid-template-columns: 1fr 1fr; }
  /* En pantallas angostas el switch ocupa el ancho y parte en dos filas
     antes que empujar el layout fuera de la pantalla. */
  .switch__pista { width: 100%; }
  .switch__opcion { flex: 1 1 auto; }
  .switch__opcion span { padding: 0.75em 1em; text-align: center; }
  .overline { letter-spacing: 0.1em; }
  /* El marco HUD se encoge para no comerse la foto en pantallas chicas. */
  .hud__marco { inset: 8px; border-radius: 14px 14px 14px 2px; }
  .hud__etiqueta { top: 16px; left: 18px; }
  .hud__zona { bottom: 16px; right: 18px; }
}

@media (max-width: 760px) {
  .tipologia--destacada {
    grid-template-columns: 1fr;
    grid-template-areas: "sello" "medida" "detalle" "precio" "nota" "hechos" "stock" "cta";
    padding: var(--espacio-m);
    gap: var(--espacio-2xs);
  }
  .tipologia--destacada .tipologia__nota { margin-top: var(--espacio-2xs); }
}

@media (max-width: 620px) {
  .tipologias { grid-template-columns: 1fr; }
  .amenidades { grid-template-columns: 1fr; }
  .amenidad--ancha { grid-column: span 1; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .contacto { padding: var(--espacio-m) var(--espacio-s); }
  .galeria { grid-template-columns: 1fr; }
}

/* Separador interno cuando dos bloques comparten una misma banda de color:
   da el respiro de un cambio de sección sin partir la superficie. */
.banda__corte {
  margin-block: var(--espacio-2xl) var(--espacio-xl);
  border-top: 1px solid var(--borde);
}
@media (max-width: 860px) { .banda__corte { margin-block: var(--espacio-xl); } }

/* Datos de apoyo dentro de la tarjeta destacada: ocupan el espacio que deja
   su tamaño doble con hechos verificados del PDF de unidades. */
.tipologia__hechos {
  list-style: none; margin: var(--espacio-s) 0 0; padding: 0;
  display: grid; gap: var(--espacio-2xs);
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.04em; color: var(--txt-2);
}
.tipologia__hechos li { display: flex; gap: var(--espacio-2xs); align-items: baseline; }
.tipologia__hechos li::before { content: "▸"; color: var(--acento-txt); }

/* ============================================================
   Movimiento
   Solo transform y opacity. El estado oculto se aplica únicamente
   cuando <html> tiene la clase "js": sin JavaScript la página se ve
   completa, nunca en blanco.
   ============================================================ */

.js [data-reveal],
.js [data-reveal-grupo] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms var(--ease-salida),
    transform 700ms var(--ease-salida);
}
.js [data-reveal-grupo] > * { transition-delay: calc(var(--i, 0) * 80ms); }

.js [data-reveal].visible,
.js [data-reveal-grupo].visible > * {
  opacity: 1;
  transform: none;
}

/* Variantes de entrada */
.js [data-reveal="izq"]     { transform: translateX(-28px); }
.js [data-reveal="der"]     { transform: translateX(28px); }
.js [data-reveal="escala"]  { transform: scale(0.965); }
.js [data-reveal="izq"].visible,
.js [data-reveal="der"].visible,
.js [data-reveal="escala"].visible { transform: none; }

/* Titulares: entran un punto más despacio, pesan más. */
.js .seccion__cabeza h2 { transition-duration: 900ms; }

.todo-visible [data-reveal],
.todo-visible [data-reveal-grupo] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-grupo] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Amenidades — cada tarjeta toma un color de marca al pasar el cursor.
   Los cuatro colores se verificaron contra texto negro (5.87 a 13.35:1)
   y contra el fondo #2C5651 de la sección. El teal de marca #427C76
   quedó fuera: solo se separa 1.71:1 del fondo, no se notaría.
   ============================================================ */
.amenidad {
  --c: transparent;
  transition:
    background-color var(--transicion),
    border-color var(--transicion),
    color var(--transicion),
    transform var(--transicion);
}
.amenidad:nth-child(4n + 1) { --c: var(--rojo); }
.amenidad:nth-child(4n + 2) { --c: var(--azul); }
.amenidad:nth-child(4n + 3) { --c: var(--beige); }
.amenidad:nth-child(4n + 4) { --c: #5aa69e; }

@media (hover: hover) {
  .amenidad:hover {
    border-color: var(--c);
    color: var(--negro);
    transform: translateY(-4px);
  }
  .amenidad:hover::after { background: color-mix(in srgb, var(--c) 92%, transparent); }
  .amenidad:hover .amenidad__img { transform: scale(1.06); }
  .amenidad:hover .mono { color: rgba(7, 5, 8, 0.72); }
  .amenidad:hover p { color: rgba(7, 5, 8, 0.8); }
}

/* Sin cursor (móvil y tablet) el código de color se lee en el número,
   que si no quedaría sin ninguna pista de color. */
@media (hover: none) {
  .amenidad .mono { color: var(--c); }
  }

/* Marco de detección sobre el alzado: vive dentro de la columna visual,
   así que ya no puede encimarse con las cifras. */
/* Solo el HUD se inclina siguiendo al cursor. El alzado y el sello se quedan
   quietos: así el marco se lee como una capa que flota por encima del plano,
   en vez de una imagen que gira completa. */
.hero__hud {
  /* 3 % de margen sobre la foto, como el marco del brochure. Las cajas del
     HTML ya vienen convertidas a este marco. Con perspectiva de 900px el marco
     crece 6.5 % al inclinarse y las etiquetas 10 %: cabe en la columna. */
  position: absolute; inset: 3%;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 300ms var(--ease-salida);
  will-change: transform;
}

/* El reveal de entrada de este elemento es solo de opacidad: su transform
   lo gobierna la inclinación, y si el reveal lo pisara, se anularían. */
.js .hero__hud[data-reveal],
.js .hero__hud[data-reveal].visible {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* Profundidades dentro del HUD: marco atrás, etiquetas al frente. */
.hero__hud .hud__marco { transform: translateZ(55px); }
.hero__hud .hud__caja  { transform: translateZ(30px); }
.hero__hud .hud__etiqueta,
.hero__hud .hud__zona  { transform: translateZ(85px); }
.hero__hud .hud__marco { inset: 0; }
.hero__hud .hud__etiqueta { top: 14px; left: 16px; }
.hero__hud .hud__zona { bottom: 14px; right: 16px; }

/* ============================================================
   Interacción — respuesta al cursor en todo lo pulsable
   ============================================================ */

/* Botones: el relleno se aclara y el bloque sube. */
.boton {
  position: relative;
  overflow: hidden;
  transition:
    transform 220ms var(--ease-salida),
    box-shadow 220ms var(--ease-salida),
    filter 220ms var(--ease-salida);
}
@media (hover: hover) {
  /* Sin resplandor: el evento del hover son las letras, no el fondo.
     Queda solo un levantamiento mínimo para que el clic se sienta. */
  .boton:hover { transform: translateY(-2px); }
}
.boton:active { transform: translateY(0); }

/* Tipologías: además del borde, el enlace se subraya solo. */
.tipologia__cta { border-bottom-color: transparent; }
@media (hover: hover) {
  .tipologia:hover .tipologia__cta { border-bottom-color: currentColor; }
}

/* Preguntas frecuentes: la fila se desplaza, el fondo se aclara y el signo gira. */
.faq details {
  transition: background-color var(--transicion), border-color var(--transicion);
}
.faq summary {
  transition: padding-left var(--transicion), color var(--transicion);
}
.faq summary::after {
  transition: transform 320ms var(--ease-salida), color var(--transicion);
}
@media (hover: hover) {
  .faq details:hover { border-color: var(--acento-local); background: color-mix(in srgb, var(--acento-local) 8%, var(--panel)); }
  .faq summary:hover { padding-left: calc(var(--espacio-m) + 8px); }
  .faq summary:hover::after { transform: rotate(90deg); }
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] { border-color: var(--acento-local); }

/* Fotografías: acercamiento suave dentro del marco. */
@media (hover: hover) {
  .galeria .hud img { transition: transform 700ms var(--ease-salida); }
  .galeria .hud:hover img { transform: scale(1.05); }
}

.cifras dt, .hero__cifras dt { transition: color var(--transicion); }

/* Las universidades, las cifras y las tarjetas de argumento NO llevan estado
   de hover a propósito: no son enlaces ni botones. Un efecto al pasar el
   cursor promete que algo ocurre al hacer clic, y aquí no ocurre nada. */

/* ============================================================
   Franja de fachada — de borde a borde, el respiro entre la tesis
   y el producto. Es la única imagen del sitio que ocupa todo el ancho,
   así que es el momento visual más grande del recorrido.
   ============================================================ */
.franja {
  position: relative;
  width: 100%;
  margin: var(--espacio-xl) 0;
  padding: 0;
  overflow: clip;
}
/* El recorte fija el alto; la imagen es más alta que él y se desplaza
   dentro. Sin ese excedente el parallax dejaría franjas vacías. */
.franja__marco {
  display: block;
  height: clamp(22rem, 74vh, 42rem);
  overflow: hidden;
}
.franja img {
  width: 100%;
  height: 138%;
  object-fit: cover;
  border-radius: 0;
  will-change: transform;
}

/* El marco respira con el ancho de la ventana. */
.franja .hud__marco {
  inset: clamp(14px, 2.2vw, 38px);
  border-radius: 22px 22px 22px 2px;
  z-index: 2;
}
.franja .hud__etiqueta { top: clamp(26px, 3.4vw, 56px); left: clamp(28px, 3.6vw, 58px); z-index: 3; }
.franja .hud__zona { bottom: clamp(26px, 3.4vw, 56px); right: clamp(28px, 3.6vw, 58px); z-index: 3; }
.franja .hud__caja { z-index: 3; }
.franja__pie {
  position: absolute; z-index: 3;
  bottom: clamp(26px, 3.4vw, 56px); left: clamp(28px, 3.6vw, 58px);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--paso--2);
  text-transform: none;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* Entrada: el marco se dibuja y una línea barre la imagen una vez. */
.js .franja .hud__marco { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-salida) 120ms; }
.franja.visible .hud__marco, .todo-visible .franja .hud__marco { clip-path: inset(0 0 0 0); }
.js .franja .hud__etiqueta, .js .franja .hud__zona, .js .franja .franja__pie { opacity: 0; transition: opacity 400ms linear 900ms; }
.franja.visible .hud__etiqueta, .franja.visible .hud__zona, .franja.visible .franja__pie,
.todo-visible .franja .hud__etiqueta, .todo-visible .franja .hud__zona, .todo-visible .franja .franja__pie { opacity: 1; }
/* Al pasar el cursor el HUD se reactiva: vuelve a escanear en bucle y
   detecta los elementos de la fachada. */
@media (hover: hover) {
  .franja .hud__caja {
    opacity: 0; transform: scale(0.94);
    transition: opacity 240ms linear, transform 340ms var(--ease-salida);
  }
  .franja:hover .hud__caja {
    opacity: 1; transform: none;
    transition-delay: calc(var(--j, 0) * 140ms);
  }
  .franja .hud__caja i { opacity: 0; transition: opacity 200ms linear; }
  .franja:hover .hud__caja i { opacity: 1; transition-delay: calc(var(--j, 0) * 140ms + 220ms); }
}

@media (max-width: 860px) {
  .franja__marco { height: clamp(18rem, 58vh, 26rem); }
  .franja .hud__caja { display: none; }
}

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

/* Parallax dentro de los marcos: la imagen es más alta que su recorte y se
   desplaza dentro de él. Sin esto el efecto movería la tarjeta completa. */
.galeria .hud { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radio-g-chico); }
.galeria .hud img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }

@media (max-width: 860px) {
  .franja__marco { aspect-ratio: 16 / 10; }
  .franja .hud__caja { display: none; }
}

/* ============================================================
   Intercambio de letras al pasar el cursor.

   Cada letra se parte en dos copias apiladas dentro de una ventana que
   recorta. Al pasar el cursor ambas suben la altura exacta de una, así que
   la de abajo ocupa el lugar de la de arriba: la palabra parece rebarajarse
   sin cambiar. El retardo de cada letra va en orden aleatorio, que es lo que
   evita que se lea como una ola de izquierda a derecha.

   El texto real vive en el aria-label del botón; estas copias son
   decorativas y van fuera del árbol de accesibilidad.
   ============================================================ */
.letra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* 1.25em y no 1em: los acentos de las mayúsculas (Ó de INVERSIÓN)
     sobresalen de la altura de caja y si no, se recortan. */
  height: 1.25em;
}
.letra > span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  transition: transform 600ms cubic-bezier(0.22, 0.92, 0.24, 1);
  transition-delay: var(--d, 0ms);
}

/* Sin rebote a propósito: al pasarse del recorrido asomaría el hueco
   que queda debajo de la segunda copia. */
@media (hover: hover) {
  .boton:hover .letra > span,
  .tipologia:hover .tipologia__cta .letra > span,
  .tipologia__cta:hover .letra > span { transform: translateY(-100%); }
}
.boton:focus-visible .letra > span,
.tipologia__cta:focus-visible .letra > span { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .letra > span { transition: none; }
}

/* ============================================================
   Galería: el marco HUD cumple lo que promete.

   La etiqueta dice "DETECTED NEW FILE", así que algo tiene que detectarse.
   Antes las cajas ya venían puestas al aparecer la sección. Ahora:
     1. entra la sección y se dibuja el marco
     2. al pasar el cursor, las cajas se detectan una por una
   ============================================================ */

/* --- Las cajas se detectan al pasar el cursor --- */
@media (hover: hover) {
  /* Especificidad por encima de la regla del reveal, que las mostraba de una. */
  .galeria[data-reveal-grupo] .hud__caja {
    opacity: 0;
    transform: scale(0.94);
    transition:
      opacity 240ms linear,
      transform 340ms var(--ease-salida);
    transition-delay: 0ms;
  }
  .galeria[data-reveal-grupo] .hud:hover .hud__caja {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--j, 0) * 110ms);
  }
  /* La etiqueta del objeto llega un instante después que su recuadro. */
  .galeria .hud__caja i { opacity: 0; transition: opacity 200ms linear; }
  .galeria .hud:hover .hud__caja i { opacity: 1; transition-delay: calc(var(--j, 0) * 110ms + 200ms); }
}

@media (prefers-reduced-motion: reduce) {
  .galeria[data-reveal-grupo] .hud__caja { opacity: 1; transform: none; transition: none; }
}

/* Enlace del pie y del aviso junto al formulario. */
.pie__enlace, .formulario__aviso a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--transicion);
}
.pie__enlace:hover, .formulario__aviso a:hover { color: var(--rojo); }
.formulario__aviso strong { color: var(--txt-2); font-weight: 500; }

/* Precio por tipología: es la primera pregunta del prospecto, así que pesa
   casi como la medida y va en el color de acento. */
.tipologia__precio {
  font-family: var(--font-display);
  font-size: var(--paso-2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--acento-txt);
  margin-top: var(--espacio-2xs);
  transition: color var(--transicion);
}
.tipologia__precio span {
  font-family: var(--font-mono);
  font-size: var(--paso--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--txt-3);
}
.tipologia--destacada .tipologia__precio { font-size: var(--paso-3); margin: 0; }

/* ============================================================
   Esquemas de inversión — la tabla que el prospecto compara.
   Los tres porcentajes suman 100 % en cada esquema, así que se
   alinean en columna para que la comparación sea directa.
   ============================================================ */
.esquemas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-m);
}
.esquema {
  display: flex; flex-direction: column;
  gap: var(--espacio-2xs);
  padding: var(--espacio-m);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g-chico);
}
.esquema--destacado {
  border-color: var(--acento-local);
  background: color-mix(in srgb, var(--acento-local) 10%, var(--panel));
}
.esquema__sello {
  color: var(--acento-txt);
  font-size: var(--paso--2);
}
.esquema h3 { font-size: var(--paso-2); }
.esquema__quien { color: var(--txt-2); font-size: var(--paso--1); }
.esquema__pagos {
  display: grid; gap: var(--espacio-3xs);
  margin: var(--espacio-s) 0 0;
  padding-top: var(--espacio-s);
  border-top: 1px solid var(--borde);
}
.esquema__pagos > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-s); }
.esquema__pagos dt {
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3);
}
.esquema__pagos dd {
  margin: 0;
  font-size: var(--paso-1); font-weight: 700;
  /* Cifras de ancho fijo: los porcentajes quedan alineados entre tarjetas. */
  font-variant-numeric: tabular-nums;
}
.esquema__descuento {
  margin-top: auto; padding-top: var(--espacio-s);
  font-family: var(--font-mono); font-size: var(--paso--2);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acento-txt);
}
.esquema__descuento strong { font-size: var(--paso-1); font-weight: 700; letter-spacing: 0; }
.esquema__descuento--sin { color: var(--txt-3); }

@media (max-width: 860px) { .esquemas { grid-template-columns: 1fr; } }