/* ───────────────────────────────────────────────────────────────────────────
   Componentes. Un solo vocabulario para todas las páginas:

     .seccion + .seccion__cabeza   → toda página abre igual
     .figura                       → toda imagen lleva marcas de corte y pie
     .ficha                        → todo dato es "etiqueta mono sobre valor"
     .boton / .estado / .pastilla  → una acción y un estado se ven igual en todas partes
   ─────────────────────────────────────────────────────────────────────────── */

/* ══ Armazón de aplicación: menú lateral ══════════════════════════════════ */

/* Se conserva el formato de app con menú lateral que el equipo ya usa, con la
   línea gráfica nueva: fondo bosque, números en mono, acento terracota. */

/* En el teléfono: la barra mide lo suyo y el contenido se queda con el resto.
   Con filas automáticas, en una página corta el alto sobrante se repartía y
   la barra quedaba con medio metro de hueco debajo. */
.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; }

.lateral {
  --tinta: var(--crema);
  --tinta-2: color-mix(in srgb, var(--crema) 86%, transparent);
  --tinta-3: color-mix(in srgb, var(--crema) 72%, transparent);
  --linea: var(--linea-clara);
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-panel);
  width: min(86vw, 20rem);
  display: flex; flex-direction: column; gap: var(--e-6);
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: var(--bosque); color: var(--crema);
  overflow-y: auto; overscroll-behavior: contain;
  translate: -100% 0;
  transition: translate var(--normal) var(--curva);
}
.lateral[data-abierto="true"] { translate: 0 0; box-shadow: 0 0 0 100vmax rgb(12 18 15 / .45); }

.lateral__marca { display: grid; gap: var(--e-3); text-decoration: none; }
.lateral__logo { width: 11rem; height: auto; }

.lateral__lista { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--linea-clara); }
.lateral__enlace {
  position: relative;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline;
  padding: .8rem .25rem .8rem 0;
  border-bottom: 1px solid var(--linea-clara);
  font-size: 1rem; font-weight: 500; text-decoration: none;
  color: color-mix(in srgb, var(--crema) 82%, transparent);
  transition: color var(--rapido), padding var(--normal) var(--curva);
}
.lateral__enlace .mono { color: var(--durazno); opacity: .8; }
.lateral__enlace:hover { color: var(--crema); padding-left: .35rem; }
.lateral__enlace[aria-current="page"] { color: var(--crema); font-weight: 600; }
.lateral__enlace[aria-current="page"] .mono { opacity: 1; }
.lateral__enlace[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--e-5)); top: 0; bottom: -1px;
  width: 3px; background: var(--terracota);
}

.lateral__pie { margin-top: auto; display: grid; gap: var(--e-4); }
.lateral__proa { display: grid; gap: var(--e-2); justify-items: start; }
.lateral__proa img { height: 1.25rem; width: auto; }
.lateral__legal { font-family: var(--f-mono); font-size: .75rem; line-height: 1.5; letter-spacing: .02em; color: color-mix(in srgb, var(--crema) 70%, transparent); }

/* Barra superior: sólo en teléfono y tableta, para abrir el menú */
.barra {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding-inline: var(--canal);
  background: var(--bosque); color: var(--crema);
}
.barra__logo { height: 1.9rem; width: auto; }
.barra__menu {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--linea-clara); color: var(--crema);
}
.barra__menu svg { width: 1.15rem; }

@media (min-width: 64rem) {
  .app { grid-template-columns: 16.5rem minmax(0, 1fr); grid-template-rows: auto; }
  .lateral { position: sticky; top: 0; height: 100dvh; width: auto; translate: none; }
  .barra { display: none; }
}

/* Pie de página discreto dentro del contenido */
.pie-app {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-6) var(--e-7);
  border-top: 1px solid var(--linea);
}

/* ══ Botones ══════════════════════════════════════════════════════════════ */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: 3rem; padding: var(--e-3) var(--e-5);
  border: 1px solid transparent; border-radius: var(--radio);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido), translate var(--rapido);
}
.boton svg { width: 1.05rem; height: 1.05rem; flex: none; transition: translate var(--normal) var(--curva); }
.boton:hover svg.flecha { translate: 3px 0; }
.boton:active { translate: 0 1px; }

.boton--primario { background: var(--terracota-oscura); color: var(--blanco); }
.boton--primario:hover { background: #8d3c19; }
.boton--linea { border-color: var(--linea-fuerte); color: var(--tinta); }
.boton--linea:hover { border-color: var(--tinta); background: var(--papel-2); }
.boton--claro { background: var(--crema); color: var(--tinta); }
.boton--claro:hover { background: var(--blanco); }
.boton--linea-clara { border-color: var(--linea-clara); color: var(--crema); }
.boton--linea-clara:hover { border-color: var(--crema); }
.boton--chico { min-height: 2.5rem; padding: var(--e-2) var(--e-4); font-size: .875rem; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .45; pointer-events: none; }

/* ══ Pastilla y estado ════════════════════════════════════════════════════ */

.pastilla {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: .4rem .85rem .4rem .6rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pill);
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2);
  background: color-mix(in srgb, var(--blanco) 55%, transparent);
}
.pastilla__punto {
  width: .8rem; height: .8rem; border-radius: 50%;
  border: 1.5px solid var(--terracota); display: grid; place-items: center;
}
.pastilla__punto::after { content: ""; width: .32rem; height: .32rem; border-radius: 50%; background: var(--terracota); }

.estado {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-estado);
}
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
[data-estado="disponible"] { --c-estado: var(--disponible); }
[data-estado="separado"]   { --c-estado: var(--separado); }
[data-estado="reservada"]  { --c-estado: var(--reservada); }
[data-estado="vendido"]    { --c-estado: var(--vendido); }

/* ══ Secciones ════════════════════════════════════════════════════════════ */

.seccion { position: relative; padding-block: var(--seccion); }
.seccion--compacta { padding-block: var(--e-7) var(--seccion); }
.seccion--papel-2 { background: var(--papel-2); }

.seccion--oscura, .seccion--bosque {
  --tinta: var(--crema);
  --tinta-2: color-mix(in srgb, var(--crema) 86%, transparent);
  --tinta-3: color-mix(in srgb, var(--crema) 70%, transparent);
  --linea: var(--linea-clara);
  --linea-fuerte: rgb(239 233 220 / .32);
  color: var(--crema);
}
.seccion--oscura { background: var(--noche); }
.seccion--bosque { background: var(--bosque); }
.seccion--oscura .resalte, .seccion--bosque .resalte { color: var(--durazno); }
.seccion--oscura .color-acento, .seccion--bosque .color-acento { color: var(--durazno); }

/* Cabecera de sección: número y nombre a la izquierda, titular a la derecha,
   con una línea fina encima. Igual en todas las páginas. */
.seccion__cabeza {
  display: grid; gap: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  margin-bottom: clamp(var(--e-6), 4vw, var(--e-8));
}
.seccion__rotulo { display: flex; gap: var(--e-4); }
.seccion__rotulo .num { color: var(--terracota-oscura); }
.seccion--oscura .seccion__rotulo .num, .seccion--bosque .seccion__rotulo .num { color: var(--durazno); }
.seccion__texto { display: grid; gap: var(--e-5); }
.color-acento { color: var(--terracota); }

@container contenido (min-width: 48rem) {
  .seccion__cabeza { grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); gap: var(--e-6); }
}

/* ══ Figura con marcas de corte ═══════════════════════════════════════════ */

/* Las cuatro marcas salen de un solo pseudo-elemento con ocho capas de fondo,
   así no hace falta marcado extra en cada imagen. */
/* `minmax(0, 1fr)`: una figura nunca es más ancha que su contenedor, aunque
   lleve dentro algo que se desplaza (el plano en el teléfono mide 50rem). */
.figura { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
.figura__marco { position: relative; }
.figura__marco::after {
  --m: 14px; --c: var(--linea-fuerte);
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left   top    / var(--m) 1px,
    linear-gradient(var(--c) 0 0) left   top    / 1px var(--m),
    linear-gradient(var(--c) 0 0) right  top    / var(--m) 1px,
    linear-gradient(var(--c) 0 0) right  top    / 1px var(--m),
    linear-gradient(var(--c) 0 0) left   bottom / var(--m) 1px,
    linear-gradient(var(--c) 0 0) left   bottom / 1px var(--m),
    linear-gradient(var(--c) 0 0) right  bottom / var(--m) 1px,
    linear-gradient(var(--c) 0 0) right  bottom / 1px var(--m);
  background-repeat: no-repeat;
}
.figura__img { width: 100%; height: 100%; object-fit: cover; background: var(--papel-3); }
.figura__pie {
  display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  padding-top: var(--e-2);
}
.figura__pie .num { color: var(--terracota-oscura); }
.seccion--oscura .figura__pie .num, .seccion--bosque .figura__pie .num { color: var(--durazno); }

/* Etiqueta superpuesta sobre la imagen (p. ej. "ISOMÉTRICO") */
.figura__etiqueta {
  position: absolute; top: var(--e-3); left: var(--e-3); z-index: 2;
  padding: .3rem .55rem;
  background: var(--noche); color: var(--crema);   /* va sobre la foto: siempre oscura */
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
/* En pantallas angostas la etiqueta taparía los puntos del render, y el pie
   de la figura ya dice lo mismo. */
@container contenido (max-width: 40rem) { .figura__etiqueta { display: none; } }
.figura__franja {
  position: absolute; left: var(--e-3); bottom: var(--e-3); z-index: 2;
  max-width: calc(100% - 2 * var(--e-3));
  padding: .45rem .7rem;
  background: var(--blanco); color: var(--tinta);
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.figura__franja--arriba { bottom: auto; top: var(--e-3); }

/* ══ Ficha técnica: etiqueta mono sobre valor ═════════════════════════════ */

.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.ficha--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ficha__celda {
  display: grid; gap: .3rem; align-content: start;
  padding: var(--e-4) var(--e-4) var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
}
.ficha__celda:nth-child(even) { padding-left: var(--e-4); border-left: 1px solid var(--linea); }
.ficha--tres .ficha__celda { padding-left: 0; border-left: 0; }
.ficha__valor { font-size: var(--t-dato); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.ficha__valor--acento { color: var(--terracota-oscura); }
.ficha__valor small { font-size: .7em; font-weight: 500; color: var(--tinta-3); }

/* ══ Ocupación del lote ═══════════════════════════════════════════════════ */

/* Un cuadrado es el lote; el cuadrado terracota dentro, la casa, a escala de
   área. Hace visible lo que distingue a una casa de otra: el tamaño del lote. */
.ocupacion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: center;
  padding: var(--e-4);
  border: 1px dashed var(--linea-fuerte);
}
.ocupacion__lote {
  position: relative; width: 4.5rem; aspect-ratio: 1;
  border: 1px solid var(--tinta-2);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--linea) 5px 6px);
}
.ocupacion__casa {
  position: absolute; left: 50%; top: 50%;
  width: var(--lado); aspect-ratio: 1; translate: -50% -50%;
  background: var(--terracota);
}
.ocupacion__cifra { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--terracota-oscura); line-height: 1; }

/* ══ Pestañas ═════════════════════════════════════════════════════════════ */

.pestanas {
  display: flex; gap: var(--e-5); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
}
.pestanas::-webkit-scrollbar { display: none; }

/* Si las pestañas no caben en el teléfono, el borde derecho se desvanece
   mientras quede algo por ver: una pestaña cortada puede leerse mal («Tipo A
   12» cortado se lee «Tipo A 1»). La animación va ligada al desplazamiento de
   la propia fila, así que si todo cabe no hay desvanecido; sin soporte, no
   cambia nada. */
@property --desvanecer { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  .pestanas {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--desvanecer)), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--desvanecer)), transparent);
    animation: pestanas-borde auto linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes pestanas-borde { 0%, 85% { --desvanecer: 3.5rem; } 100% { --desvanecer: 0px; } }
}
.pestana {
  position: relative; flex: none;
  padding: var(--e-3) 0 var(--e-4);
  font-size: 1rem; font-weight: 600; color: var(--tinta-3);
  transition: color var(--rapido);
}
.pestana:hover { color: var(--tinta); }
.pestana .mono { margin-left: .35rem; font-size: .75rem; }
.pestana[aria-selected="true"] { color: var(--tinta); }
.pestana[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--terracota);
}

/* Grupo segmentado: filtros que se ven como un solo control */
.segmentado { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }
.segmentado button {
  min-height: 2.5rem; padding: 0 var(--e-4);
  font-size: .875rem; font-weight: 600; color: var(--tinta-2);
  border-right: 1px solid var(--linea);
  transition: background var(--rapido), color var(--rapido);
}
.segmentado button:last-child { border-right: 0; }
.segmentado button:hover { background: var(--papel-2); }
.segmentado button[aria-pressed="true"] { background: var(--tinta); color: var(--crema); }
.segmentado .cuenta { font-family: var(--f-mono); font-size: .75rem; font-weight: 500; opacity: .75; margin-left: .3rem; }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-5); align-items: center; }
.filtros__grupo { display: grid; gap: var(--e-2); }

/* En el teléfono cada grupo ocupa el ancho entero, con botones iguales; si
   «Disponibles 23» no cabe, la cifra baja a un segundo renglón en vez de
   empujar la página hacia un lado. */
@container contenido (max-width: 30rem) {
  .filtros__grupo { width: 100%; }
  .segmentado { display: flex; }
  .segmentado button { flex: 1 1 0; min-width: 0; padding: .4rem .35rem; line-height: 1.2; }
  .segmentado .cuenta { display: inline-block; }
}

/* ══ Portada ══════════════════════════════════════════════════════════════ */

.portada { position: relative; overflow: hidden; padding-block: var(--e-7) var(--seccion); }
.portada__rejilla { display: grid; gap: var(--e-7); align-items: center; }
.portada__texto { display: grid; gap: var(--e-5); justify-items: start; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.portada__figura .figura__marco { aspect-ratio: 4 / 5; }

@container contenido (min-width: 54rem) {
  .portada__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); }
}

/* Curvas de nivel de fondo: el relieve de la cima que le da nombre al proyecto */
.curvas {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  color: var(--tinta);
  opacity: .16;
  background: url(../img/curvas-nivel.svg) center / cover no-repeat;
  -webkit-mask: linear-gradient(to bottom, #000 60%, transparent);
          mask: linear-gradient(to bottom, #000 60%, transparent);
}
.seccion--oscura .curvas, .seccion--bosque .curvas { filter: invert(1); opacity: .08; }

/* Cifras clave */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); border-top: 1px solid var(--linea); }
.cifras__item { display: grid; gap: var(--e-2); padding: var(--e-5) var(--e-4) var(--e-5) 0; border-bottom: 1px solid var(--linea); }
.cifras__valor { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }

/* Índice de secciones de la portada */
.indice { display: grid; border-top: 1px solid var(--linea); }
.indice__item {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--e-4); align-items: center;
  padding: var(--e-5) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none;
  transition: padding var(--normal) var(--curva), background var(--normal);
}
.indice__item:hover { padding-inline: var(--e-4); background: var(--papel-2); }
.indice__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.02em; }
.indice__item svg { width: 1.25rem; color: var(--terracota-oscura); transition: translate var(--normal) var(--curva); }
.indice__item:hover svg { translate: 4px 0; }

/* ══ Selector de casas ════════════════════════════════════════════════════ */

/* `minmax(0, 1fr)`: sin eso, en el teléfono el lienzo del plano (50rem, para
   desplazarlo por dentro) ensanchaba la columna y con ella toda la página. */
.selector { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
@container contenido (min-width: 84rem) {
  .selector { grid-template-columns: minmax(0, 1fr) 24rem; }
  .selector__panel { position: sticky; top: var(--e-5); }
}

.plano { position: relative; min-width: 0; background: var(--papel-3); overflow: hidden; }
.plano__lienzo { position: relative; width: 100%; }
.plano__img { width: 100%; height: auto; display: block; }

/* En un teléfono el plano entero mide ~190 px de alto y los 48 puntos no se
   pueden tocar. Se deja a un ancho cómodo y se desplaza por dentro. */
@container contenido (max-width: 39.99rem) {
  .plano--desplazable { overflow-x: auto; overscroll-behavior-x: contain; }
  .plano--desplazable .plano__lienzo { width: 50rem; }
}

/* Recorte al área de los lotes. El plano original deja mucho margen vacío
   alrededor; recortarlo agranda los lotes sin tocar la imagen ni las
   coordenadas. Las variables las calcula selector.js a partir de los puntos. */
@container contenido (min-width: 40rem) {
  .plano--recorte { aspect-ratio: var(--plano-ratio, 16 / 9); }
  .plano--recorte .plano__lienzo {
    width: var(--plano-ancho, 100%);
    margin-left: var(--plano-x, 0);
    margin-top: var(--plano-y, 0);   /* un margen vertical en % se mide contra el ANCHO */
  }
}

.punto {
  position: absolute; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: .3rem;
  height: 1.45rem; padding: 0 .38rem 0 .3rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--tinta);
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgb(22 33 27 / .25);
  transition: scale var(--rapido) var(--curva), background var(--rapido), color var(--rapido);
}
.punto::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c-estado); }
.punto:hover, .punto:focus-visible { scale: 1.12; z-index: 3; }
.punto[aria-pressed="true"] { background: var(--terracota-oscura); color: var(--blanco); border-color: var(--terracota-oscura); z-index: 4; scale: 1.12; }
.punto[aria-pressed="true"]::before { background: var(--blanco); }
.punto[data-estado]:not([data-estado="disponible"]) { background: var(--papel-2); color: var(--tinta-3); border-color: var(--linea-fuerte); }
.punto[hidden] { display: none; }

.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
.pista { display: flex; align-items: center; gap: var(--e-2); }
@container contenido (min-width: 40rem) { .pista--movil { display: none; } }

/* Panel de la casa elegida */
.panel { container: panel / inline-size; display: grid; gap: var(--e-5); padding: var(--e-5); background: var(--blanco); border: 1px solid var(--linea); }

/* Cuando el panel queda debajo del plano y es ancho, se reparte en columnas
   para que todo entre en una sola franja a la vista. */
@container panel (min-width: 50rem) {
  .panel { grid-template-columns: 10rem minmax(0, 1fr) 17rem; column-gap: var(--e-6); align-items: start; }
  .panel__cabeza { flex-direction: column; }
  .panel__acciones { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .panel__vacio { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--e-6); }
  .panel__vacio .ficha { grid-column: 2; grid-row: 1 / span 3; }
}
.panel__vacio { display: grid; gap: var(--e-4); justify-items: start; }
.panel__cabeza { display: flex; justify-content: space-between; align-items: start; gap: var(--e-3); }
.panel__id { font-size: 2.75rem; font-weight: 600; letter-spacing: -.04em; line-height: .9; }
.panel__acciones { display: grid; gap: var(--e-2); }

/* Lista comparada: una fila por casa, con barras a escala */
.comparada { display: grid; border-top: 1px solid var(--linea); }
.comparada__cabeza, .comparada__fila {
  display: grid; align-items: center; gap: var(--e-3);
  grid-template-columns: 3.25rem minmax(0, 1fr) 6.5rem;
}
.comparada__cabeza { display: none; padding: var(--e-3) var(--e-3); }
.comparada__fila {
  width: 100%; text-align: left;
  padding: var(--e-3); border-bottom: 1px solid var(--linea);
  transition: background var(--rapido);
}
.comparada__fila:hover { background: var(--papel-2); }
.comparada__fila[aria-pressed="true"] { background: var(--bosque); color: var(--crema); }
.comparada__fila[aria-pressed="true"] .mono,
.comparada__fila[aria-pressed="true"] .tenue { color: color-mix(in srgb, var(--crema) 75%, transparent); }
.comparada__id { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.comparada__barra { position: relative; height: .55rem; background: var(--linea); }
.comparada__barra span { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--terracota); }
.comparada__fila[aria-pressed="true"] .comparada__barra { background: var(--linea-clara); }
.comparada__fila[aria-pressed="true"] .comparada__barra span { background: var(--durazno); }
.comparada__precio { text-align: right; font-weight: 600; }
.comparada__detalle { display: grid; gap: .35rem; }
.comparada__meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }

@container contenido (min-width: 44rem) {
  .comparada__cabeza { display: grid; }
  .comparada__cabeza, .comparada__fila { grid-template-columns: 4rem 6.5rem minmax(8rem, 1fr) 6rem 5.5rem 7rem; }
  .comparada__detalle { display: contents; }
  .comparada__meta { display: contents; }
}

/* ══ Tabla (listado) ══════════════════════════════════════════════════════ */

/* `position: relative` para que los textos ocultos para lectores de pantalla
   (absolutos) queden dentro del desplazamiento y no ensanchen la página. */
.tabla-envoltura { position: relative; min-width: 0; overflow-x: auto; border-top: 1px solid var(--tinta); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: var(--e-4) var(--e-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--linea); }
.tabla th { font-weight: 500; }
.tabla th button { display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.tabla th[aria-sort] { color: var(--tinta); }
.tabla td.num { text-align: right; font-family: var(--f-mono); font-size: .9375rem; letter-spacing: 0; }
.tabla th.num { text-align: right; }
.tabla td { background: var(--papel); transition: background var(--rapido); }
.tabla tbody tr:hover td { background: var(--papel-2); }
.tabla .id { font-weight: 700; font-size: 1.0625rem; }
.tabla__cifra { min-width: 8ch; text-align: right; }   /* «1.088 m²»: las barras del lote quedan alineadas */

/* Cuando la tabla no cabe (el teléfono, o un portátil con el menú abierto) se
   desplaza de lado: la casa queda fija a la izquierda y el precio a la
   derecha, para leerlos siempre juntos. Las líneas que marcan lo que pasa por
   debajo sólo aparecen si de verdad hay desplazamiento. */
.tabla th { background: var(--papel); }
.tabla :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
.tabla :is(th[data-col="precio"], td.precio) { position: sticky; right: 0; z-index: 1; }
/* En el teléfono sobran dos columnas: la tipología ya está en el nombre
   (13A es Tipo A) y el nombre lleva a la ficha, que tiene «Verla en el
   plano». Sin ellas, casa, estado y precio caben sin desplazar. */
@container contenido (max-width: 40rem) {
  .tabla :is(th[data-col="tipo"], td.tipo, .ir) { display: none; }
}
@supports (animation-timeline: scroll()) {
  .tabla-envoltura { scroll-timeline: --tabla inline; }
  .tabla :is(th, td):first-child { animation: tabla-izq auto linear both; animation-timeline: --tabla; }
  .tabla :is(th[data-col="precio"], td.precio) { animation: tabla-der auto linear both; animation-timeline: --tabla; }
  @keyframes tabla-izq { from { box-shadow: none; } 4%, to { box-shadow: inset -1px 0 0 var(--linea-fuerte); } }
  @keyframes tabla-der { from, 96% { box-shadow: inset 1px 0 0 var(--linea-fuerte); } to { box-shadow: none; } }
}

/* ══ Galería ══════════════════════════════════════════════════════════════ */

/* Las categorías son botones grandes, con la primera foto de cada una: se
   reconocen sin leer y se tocan sin apuntar. Dos por fila en el teléfono,
   las cuatro en una fila desde la tableta. Van sobre la sección oscura:
   --tinta es crema ahí, y la elegida se invierte (fondo crema, texto noche). */
.opciones {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--e-6);
}
@container contenido (min-width: 48rem) {
  .opciones { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.opcion {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e-3); align-items: center;
  min-height: 4.75rem; padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  text-align: left; color: var(--tinta-2);
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.opcion:hover { border-color: var(--tinta); color: var(--tinta); }
.opcion:focus-visible { outline: 2px solid var(--durazno); outline-offset: 2px; }
.opcion__foto { display: block; width: 3.5rem; aspect-ratio: 1; overflow: hidden; background: var(--bosque-2); }
.opcion__foto img { width: 100%; height: 100%; object-fit: cover; }
.opcion__texto { display: grid; gap: .2rem; min-width: 0; }
.opcion__nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.opcion__cuenta { font-size: .6875rem; color: var(--tinta-3); }
.opcion[aria-selected="true"] { background: var(--crema); border-color: var(--crema); color: var(--noche); }
.opcion[aria-selected="true"] .opcion__cuenta { color: var(--terracota-oscura); }

@container contenido (max-width: 30rem) {
  .opcion { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-2); min-height: 3.75rem; padding-right: var(--e-2); }
  .opcion__foto { width: 2.5rem; }
  .opcion__nombre { font-size: .9375rem; }
}
/* En el teléfono más angosto (320 px) la foto no deja sitio al nombre. */
@container contenido (max-width: 20rem) {
  .opcion { grid-template-columns: minmax(0, 1fr); padding-left: var(--e-3); }
  .opcion__foto { display: none; }
}


.galeria {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  grid-auto-rows: 12rem;
  grid-auto-flow: dense;
}
.galeria__item { position: relative; grid-row: span 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--e-2); text-align: left; }
.galeria__item--alto { grid-row: span 2; }
.galeria__marco { position: relative; overflow: hidden; background: var(--papel-3); min-height: 0; }
.seccion--oscura .galeria__marco { background: var(--bosque-2); }
.galeria__marco img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--lento) var(--curva); }
.galeria__item:hover .galeria__marco img { scale: 1.045; }
.galeria__pie { display: flex; gap: var(--e-3); align-items: baseline; }
/* Colores por token: sobre papel salen en tinta y terracota; dentro de una
   sección oscura esos mismos tokens pasan a crema y durazno. */
.galeria__pie .num { color: var(--terracota-oscura); flex: none; }
.seccion--oscura .galeria__pie .num, .seccion--bosque .galeria__pie .num { color: var(--durazno); }
.galeria__pie .texto { min-width: 0; color: var(--tinta-2); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@container contenido (max-width: 34rem) {
  .galeria { grid-auto-rows: auto; }
  .galeria__item, .galeria__item--alto { grid-row: auto; }
  .galeria__marco { aspect-ratio: 3 / 2; }
  .galeria__item--alto .galeria__marco { aspect-ratio: 4 / 5; }
}

/* ══ Visor ════════════════════════════════════════════════════════════════ */

.visor {
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  padding: 0; border: 0; background: rgb(12 18 15 / .97); color: var(--crema);
}
.visor::backdrop { background: rgb(12 18 15 / .85); }
.visor__figura { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--e-8) var(--canal) var(--e-9); }
.visor__figura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor__pie {
  position: absolute; left: var(--canal); right: var(--canal); bottom: var(--e-5);
  display: flex; justify-content: space-between; gap: var(--e-4);
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(239 233 220 / .85);
}
.visor__pie .num { color: var(--durazno); }
.visor__boton {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgb(239 233 220 / .3); color: var(--crema);
  transition: background var(--rapido), border-color var(--rapido);
}
.visor__boton:hover { background: rgb(239 233 220 / .1); border-color: var(--crema); }
.visor__boton svg { width: 1.2rem; }
.visor__cerrar { top: var(--e-4); right: var(--canal); }
.visor__prev { left: var(--canal); top: 50%; translate: 0 -50%; }
.visor__sig  { right: var(--canal); top: 50%; translate: 0 -50%; }

/* ══ Tipologías (render interactivo) ══════════════════════════════════════ */

.tipologia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
@container contenido (min-width: 56rem) { .tipologia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

.vistas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.vista { display: grid; gap: var(--e-2); text-align: left; }
.vista__img { aspect-ratio: 4 / 3; overflow: hidden; outline: 1px solid var(--linea); outline-offset: -1px; background: var(--papel-3); }
.vista__img img { width: 100%; height: 100%; object-fit: cover; }
.vista[aria-selected="true"] .vista__img { outline: 2px solid var(--terracota); outline-offset: -2px; }

.punto-render {
  position: absolute; translate: -50% -50%; z-index: 2;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--terracota-oscura); color: var(--blanco);
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 500;
  box-shadow: 0 0 0 4px rgb(242 238 228 / .75);
  transition: scale var(--rapido) var(--curva);
}
.punto-render::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--terracota); opacity: 0;
  animation: latido 2.4s var(--curva) infinite;
}
.punto-render:hover, .punto-render:focus-visible { scale: 1.12; }
@keyframes latido { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.7; } }
@media (prefers-reduced-motion: reduce) { .punto-render::after { animation: none; } }

.espacios { display: grid; border-top: 1px solid var(--linea); }
.espacio {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  width: 100%; text-align: left; padding: var(--e-4) 0; border-bottom: 1px solid var(--linea);
  transition: padding var(--normal) var(--curva), background var(--normal);
}
.espacio:hover { padding-inline: var(--e-3); background: var(--papel-2); }
.espacio__num {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--terracota-oscura); color: var(--blanco);
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
}
.espacio__nombre { font-weight: 600; font-size: 1.0625rem; }

.programa { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.programa li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); }
.programa li::before { content: "—"; color: var(--terracota-oscura); }

/* ══ Ubicación ════════════════════════════════════════════════════════════ */

/* El mapa es un iframe de Google: nada de `overflow: hidden` alrededor (el
   navegador deja de pintar un iframe de otro origen recortado así). */
.mapa { display: grid; gap: var(--e-4); }
.mapa__barra { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; }
.mapa__barra .segmentado button { min-height: 2.75rem; font-size: .9375rem; }
.figura--mapa .figura__marco { aspect-ratio: 4 / 5; background: var(--papel-3); }
@container contenido (min-width: 36rem) { .figura--mapa .figura__marco { aspect-ratio: 4 / 3; } }
@container contenido (min-width: 56rem) { .figura--mapa .figura__marco { aspect-ratio: 16 / 9; } }
.mapa__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* En el teléfono las tres vistas ocupan el ancho y la pantalla completa
   queda como un botón cuadrado, sólo con el icono. */
@container contenido (max-width: 30rem) {
  .mapa__barra { flex-wrap: nowrap; }
  .mapa__barra .segmentado { flex: 1 1 auto; }
  .mapa__pantalla { flex: none; width: 2.75rem; min-height: 2.75rem; padding: 0; }
  .mapa__pantalla span { display: none; }
}

.mapa__ruta {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); align-items: center; justify-content: space-between;
  padding: var(--e-3) var(--e-4); background: var(--papel-2); box-shadow: inset 3px 0 0 var(--terracota);
}
.mapa__destino { font-size: var(--t-dato); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.mapa__cifra { color: var(--terracota-oscura); white-space: nowrap; }

/* En pantalla completa entra todo el bloque: la barra, la ruta y el mapa,
   que se estira hasta abajo. */
.mapa:fullscreen { align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr); padding: var(--e-5); background: var(--papel); overflow: auto; }
.mapa:fullscreen .figura--mapa { grid-template-rows: minmax(0, 1fr) auto; }
.mapa:fullscreen .figura--mapa .figura__marco { aspect-ratio: auto; }
.mapa:-webkit-full-screen { width: 100%; height: 100%; padding: var(--e-5); background: var(--papel); }

.destacados { display: grid; border-top: 1px solid var(--linea); }
@container contenido (min-width: 36rem) { .destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); } }
@container contenido (min-width: 64rem) { .destacados { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--e-5); } }
.destacado {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--e-3); align-items: start;
  width: 100%; padding: var(--e-5) var(--e-3) var(--e-5) 0; border-bottom: 1px solid var(--linea); text-align: left;
  transition: background var(--rapido), box-shadow var(--rapido);
}
.destacado:hover { background: var(--papel-2); }
.destacado[aria-pressed="true"] { background: var(--papel-2); box-shadow: inset 0 -2px 0 var(--terracota); }
.destacado .letra { color: var(--terracota-oscura); padding-left: var(--e-2); }
.destacado__titulo { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.destacado__cifra { color: var(--terracota-oscura); white-space: nowrap; }
.destacado__accion { display: inline-flex; align-items: center; gap: .4rem; color: var(--terracota-oscura); }
.destacado__accion svg { width: .95rem; transition: translate var(--normal) var(--curva); }
.destacado:hover .destacado__accion svg { translate: 3px 0; }

.lugar.es-elegido { background: var(--papel-2); box-shadow: inset 3px 0 0 var(--terracota); padding-inline: var(--e-3); }

.categorias { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.25rem; padding: 0 var(--e-4);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pill);
  font-size: .875rem; font-weight: 600; color: var(--tinta-2);
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.chip .mono { font-size: .6875rem; color: inherit; opacity: .75; }

.lugares { display: grid; gap: 0; border-top: 1px solid var(--linea); }
@container contenido (min-width: 44rem) { .lugares { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); } }
.lugar { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.lugar__foto { width: 4.5rem; aspect-ratio: 1; object-fit: cover; background: var(--papel-3); }
.lugar__nombre { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.lugar__tiempo { font-size: 1.125rem; font-weight: 600; color: var(--terracota-oscura); }
.lugar details summary { cursor: pointer; list-style: none; }
.lugar details summary::-webkit-details-marker { display: none; }
.lugar details[open] summary .mas { display: none; }

/* ══ Recorrido guiado ═════════════════════════════════════════════════════ */

/* Escena a la izquierda y panel (parada, texto, planta) a la derecha; debajo,
   las diez paradas. Va sobre la sección oscura: --tinta es crema aquí. */
.recorrido { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5) var(--e-6); }
@container contenido (min-width: 64rem) {
  .recorrido { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
  .recorrido__paradas { grid-column: 1 / -1; }
}
.recorrido__escena { display: grid; gap: var(--e-4); align-content: start; }
.recorrido__marco { aspect-ratio: 3 / 2; background: var(--bosque-2); }
@container contenido (min-width: 36rem) { .recorrido__marco { aspect-ratio: 16 / 9; } }
.recorrido__capa { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s var(--curva); }
.recorrido__capa.es-visible { opacity: 1; }
.recorrido__capa picture, .recorrido__img { display: block; width: 100%; height: 100%; }
.recorrido__img { object-fit: cover; transform-origin: 50% 50%; will-change: transform; }

/* La cámara se mueve despacio sobre cada render: acerca, aleja o se desliza.
   Los verticales se recorren de arriba abajo para que se vean enteros. */
.recorrido__img.mov-acercar-izq    { animation: mov-acercar-izq var(--duracion, 6s) linear both; }
.recorrido__img.mov-acercar-der    { animation: mov-acercar-der var(--duracion, 6s) linear both; }
.recorrido__img.mov-alejar         { animation: mov-alejar var(--duracion, 6s) linear both; }
.recorrido__img.mov-acercar-arriba { animation: mov-acercar-arriba var(--duracion, 6s) linear both; }
.recorrido__img.mov-vertical       { animation: mov-vertical var(--duracion, 6s) ease-in-out both; }
@keyframes mov-acercar-izq    { from { transform: scale(1.02); } to { transform: scale(1.12) translate(2.5%, 1%); } }
@keyframes mov-acercar-der    { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2.5%, 1%); } }
@keyframes mov-alejar         { from { transform: scale(1.13) translate(0, -1%); } to { transform: scale(1.02); } }
@keyframes mov-acercar-arriba { from { transform: scale(1.03) translate(0, 1.5%); } to { transform: scale(1.12) translate(0, -1.5%); } }
@keyframes mov-vertical       { from { object-position: 50% 12%; } to { object-position: 50% 88%; } }
@media (prefers-reduced-motion: reduce) {
  .recorrido__img { animation: none !important; }
  .recorrido__capa { transition-duration: .2s; }
}

.recorrido .figura__franja { color: var(--noche); z-index: 3; }
.recorrido__progreso { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgb(239 233 220 / .18); }
.recorrido__progreso span { display: block; height: 100%; width: 0; background: var(--durazno); transition: width .6s var(--curva); }

/* Portada del recorrido: el mismo botón con texto girando del video. */
.recorrido__empezar {
  position: absolute; inset: 0; z-index: 4; display: block; width: 100%;
  background: linear-gradient(180deg, rgb(12 18 15 / .15), rgb(12 18 15 / .55));
  color: var(--crema);
}
.recorrido__empezar:hover .fachada__circulo { scale: 1.08; }
/* Con la portada a la vista, el nombre de la parada se esconde: en el
   teléfono quedaba debajo de «Empezar el recorrido». */
.recorrido__marco:has(.recorrido__empezar:not([hidden])) .figura__franja { opacity: 0; }
.recorrido__empezar-texto {
  position: absolute; left: 50%; top: calc(50% + 4.25rem); translate: -50% 0;
  white-space: nowrap; color: var(--crema); font-size: .8125rem;
}

.recorrido__controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.recorrido__flecha {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); color: var(--crema);
  transition: border-color var(--rapido), background var(--rapido);
}
.recorrido__flecha:hover { border-color: var(--crema); background: rgb(239 233 220 / .06); }
.recorrido__flecha svg { width: 1.2rem; }
.recorrido__reproducir { min-width: 9.5rem; background: var(--crema); color: var(--noche); }
.recorrido__reproducir:hover { background: var(--blanco); }
.recorrido__pantalla { margin-left: auto; }
/* En el teléfono todo cabe en un renglón: pantalla completa queda sólo con el
   icono, y la planta, más pequeña. */
@container contenido (max-width: 30rem) {
  .recorrido__pantalla { width: 3rem; min-height: 3rem; padding: 0; }
  .recorrido__pantalla span { display: none; }
  .recorrido .recorrido__planta { max-width: 13rem; }
  .recorrido__empezar-texto { top: calc(50% + 3.6rem); font-size: .75rem; }
}
@container contenido (max-width: 20rem) { .recorrido__pantalla { display: none; } }
:is(.recorrido__flecha, .recorrido__reproducir, .recorrido__paradas button):focus-visible { outline: 2px solid var(--durazno); outline-offset: 2px; }

.recorrido__panel { display: grid; gap: var(--e-3); align-content: start; }
.recorrido__panel .num { color: var(--durazno); }
.recorrido__planta { display: grid; gap: var(--e-2); margin-top: var(--e-3); max-width: 17rem; }
.recorrido__planta-marco { position: relative; overflow: hidden; background: var(--papel-3); }
.recorrido__planta-marco picture, .recorrido__planta-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recorrido__punto {
  position: absolute; width: .95rem; height: .95rem; translate: -50% -50%; border-radius: 50%;
  background: var(--terracota); border: 2px solid var(--blanco);
  transition: left var(--lento) var(--curva), top var(--lento) var(--curva);
  animation: latido 1.8s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgb(198 93 46 / .55); }
  100% { box-shadow: 0 0 0 .9rem rgb(198 93 46 / 0); }
}
@media (prefers-reduced-motion: reduce) { .recorrido__punto { animation: none; } }

/* Las diez paradas: se ve cuál va y cuánto falta de cada una. */
.recorrido__paradas { list-style: none; padding: 0; display: grid; gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container contenido (min-width: 48rem) { .recorrido__paradas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.recorrido__paradas button {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); align-items: baseline;
  width: 100%; min-height: 3.25rem; padding: var(--e-3) var(--e-3) var(--e-4);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  text-align: left; color: var(--tinta-2); overflow: hidden;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.recorrido__paradas button:hover { border-color: var(--crema); color: var(--crema); }
.recorrido__paradas .mono { font-size: .6875rem; color: var(--tinta-3); }
.recorrido__parada-nombre { font-size: .9375rem; font-weight: 600; line-height: 1.2; }
.recorrido__paradas button[aria-current] { background: var(--crema); border-color: var(--crema); color: var(--noche); }
.recorrido__paradas button[aria-current] .mono { color: var(--terracota-oscura); }
.recorrido__barrita { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.recorrido__barrita span { display: block; height: 100%; width: 0; background: var(--durazno); transition: width .6s var(--curva); }
.recorrido__paradas button[aria-current] .recorrido__barrita span { background: var(--terracota); }

/* Pantalla completa: la escena ocupa todo el alto, sin la lista de paradas. */
.recorrido:fullscreen { align-content: center; padding: var(--e-5); background: var(--noche); overflow: auto; }
.recorrido:fullscreen .recorrido__paradas { display: none; }
.recorrido:fullscreen .recorrido__marco { aspect-ratio: auto; height: calc(100dvh - 10rem); }

/* ══ Medios ═══════════════════════════════════════════════════════════════ */

.fachada { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bosque-2); overflow: hidden; }
.fachada img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--lento) var(--curva); }
.fachada:hover img { scale: 1.03; }
.fachada__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 6.5rem; height: 6.5rem;
}
.fachada__circulo { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--terracota-oscura); color: var(--blanco); transition: scale var(--normal) var(--curva); }
.fachada:hover .fachada__circulo { scale: 1.08; }
.fachada__circulo svg { width: 1.4rem; translate: 2px 0; }
.fachada__circulo--texto { font-size: .9375rem; font-weight: 500; letter-spacing: .02em; }
.fachada__giro { position: absolute; inset: 0; animation: giro 18s linear infinite; }
.fachada__giro text { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; fill: var(--crema); }
@keyframes giro { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fachada__giro { animation: none; } }
.fachada iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ══ Formulario y modal (cotizador) ═══════════════════════════════════════ */

.modal {
  width: min(100vw, 58rem); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--papel); color: var(--tinta);
}
.modal::backdrop { background: rgb(12 18 15 / .6); backdrop-filter: blur(2px); }
.modal__cuerpo { height: 100%; overflow-y: auto; padding: var(--e-7) var(--canal) var(--e-8); display: grid; gap: var(--e-6); align-content: start; }
.modal__cerrar { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linea-fuerte); background: var(--papel); }
.modal__cerrar svg { width: 1.1rem; }
@media (min-width: 60rem) {
  .modal { height: min(92dvh, 56rem); }
  .modal__cuerpo { padding: var(--e-8) var(--e-8) var(--e-8); }
}

.bloque { display: grid; gap: var(--e-4); padding: 0; border: 0; }
.bloque legend { padding: 0; margin-bottom: var(--e-3); }
.campos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.campo { display: grid; gap: var(--e-2); align-content: start; }
.campo input, .campo select {
  width: 100%; min-height: 3rem; padding: 0 var(--e-4);
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  font-size: 1rem;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgb(198 93 46 / .18); }
.campo input[readonly] { background: var(--papel-2); color: var(--tinta-2); border-color: var(--linea); }
.campo input[aria-invalid="true"] { border-color: var(--vendido); }
.campo__error { min-height: 1.1em; font-size: .8125rem; color: var(--vendido); }
.deslizador { width: 100%; accent-color: var(--terracota-oscura); }

.plan { width: 100%; border-collapse: collapse; }
.plan th, .plan td { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); text-align: right; }
.plan td:not(:first-child) { font-family: var(--f-mono); letter-spacing: 0; }
.plan th:first-child, .plan td:first-child { text-align: left; }
.plan tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--tinta); }

.aviso { padding: var(--e-4); border-left: 2px solid var(--terracota); background: var(--papel-2); font-size: .9375rem; color: var(--tinta-2); }

/* ══ Aparición al hacer scroll ════════════════════════════════════════════ */

/* Sólo si hay JavaScript y el usuario no pidió reducir el movimiento: sin JS,
   todo se ve desde el principio. */
.js .aparece { opacity: 0; translate: 0 18px; transition: opacity var(--lento) var(--curva), translate var(--lento) var(--curva); }
.js .aparece.visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .aparece { opacity: 1; translate: none; transition: none; } }

/* ══ Estados vacíos y de carga ════════════════════════════════════════════ */

.cargando { padding: var(--e-7) 0; text-align: center; }
.vacio { padding: var(--e-7) var(--e-5); text-align: center; border: 1px dashed var(--linea-fuerte); color: var(--tinta-2); }