/* =====================================================================
   LEAD Projects — unidades de negocio (sitio público)

   Estilos de las vitrinas de Inmobiliaria y Constructora: casas modelo,
   propiedades captadas, lotizaciones con su plano interactivo, ficha de
   lote, obras con etapas y testimonios.

   Se apoya en los tokens de base.css y en el lenguaje visual de
   publico.css (cabecera-interna, tarjeta-proyecto, ficha-barra, banda-cta):
   aquí solo van las piezas nuevas y los modificadores que faltaban.
   ===================================================================== */

/* =====================================================================
   Cabeceras y migas
   ===================================================================== */

.cabecera-interna__bajada {
  max-width: 62ch;
  margin-top: 22px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--verde-muted);
}
.cabecera-interna--clara .cabecera-interna__bajada { color: var(--gris-verde); }

.cabecera-interna__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cabecera-lote { padding-top: 130px; }

.miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-apagado);
  margin-bottom: 22px;
}
.miga a { color: var(--verde-muted); }
.miga a:hover { color: var(--lima); }
.miga [aria-current] { color: var(--lima); font-weight: 700; }

/* =====================================================================
   Barra de filtros de los listados
   ===================================================================== */

.filtros { background: var(--hueso); padding: 30px 6vw 4px; }

.filtros__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  align-items: end;
  max-width: var(--ancho-contenido);
}

.filtros__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.resultado-conteo {
  padding: 26px 6vw 0;
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-label);
}

/* =====================================================================
   Añadidos a la tarjeta del listado
   ===================================================================== */

.tarjeta-precio {
  display: block;
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  letter-spacing: .01em;
  color: var(--lima-dark);
}
.tarjeta-precio__nota {
  font-family: var(--f-texto);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-label);
  margin-left: 8px;
}

.tarjeta-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tarjeta-datos__item {
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  padding: 3px 11px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gris-verde);
  background: var(--blanco);
}

/* Tarjeta sobre fondo petróleo */
.sobre-oscuro .tarjeta-proyecto__nombre,
.tarjeta-proyecto--oscura .tarjeta-proyecto__nombre { color: var(--blanco); }
.sobre-oscuro .tarjeta-proyecto__lugar,
.tarjeta-proyecto--oscura .tarjeta-proyecto__lugar { color: var(--lima); }
.sobre-oscuro .tarjeta-proyecto__resumen,
.tarjeta-proyecto--oscura .tarjeta-proyecto__resumen { color: var(--verde-muted); }
.sobre-oscuro .tarjeta-precio,
.tarjeta-proyecto--oscura .tarjeta-precio { color: var(--lima); }
.sobre-oscuro .tarjeta-datos__item,
.tarjeta-proyecto--oscura .tarjeta-datos__item {
  background: transparent;
  border-color: var(--petroleo-line);
  color: var(--verde-muted);
}
.sobre-oscuro .tarjeta-proyecto__pie,
.tarjeta-proyecto--oscura .tarjeta-proyecto__pie { color: var(--lima); }

/* Insignia coloreada por estado — mismo código de color que el plano. */
.insignia-estado--disponible { background: var(--lima); color: var(--petroleo); }
.insignia-estado--reservado  { background: #d0a12a; color: #2b2107; }
.insignia-estado--vendido    { background: #b23b30; color: var(--blanco); }

/* Contador de disponibilidad: «quedan 3 de 10» */
.contador-lotes { display: block; margin-top: 14px; }
.contador-lotes__texto { font-size: var(--fs-sm); color: var(--gris-verde); }
.contador-lotes__texto b { font-family: var(--f-display); font-size: var(--fs-lg); color: var(--lima-dark); }
.contador-lotes__barra {
  display: block;
  height: 6px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--verde-suave);
  overflow: hidden;
}
.contador-lotes__relleno { display: block; height: 100%; background: var(--lima-dark); }

.sobre-oscuro .contador-lotes__texto,
.tarjeta-proyecto--oscura .contador-lotes__texto { color: var(--verde-muted); }
.sobre-oscuro .contador-lotes__barra,
.tarjeta-proyecto--oscura .contador-lotes__barra { background: var(--petroleo-alto); }

/* =====================================================================
   Bloques de la ficha
   ===================================================================== */

.precio-bloque {
  border-left: 3px solid var(--lima);
  padding: 4px 0 4px 18px;
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.precio-bloque__valor {
  font-family: var(--f-display);
  font-size: clamp(calc(1.625rem * var(--escala-texto)), calc(3.2vw * var(--escala-texto)), calc(2.5rem * var(--escala-texto)));
  color: var(--petroleo);
  line-height: 1.05;
}
.precio-bloque__nota { font-size: var(--fs-sm); color: var(--gris-verde); max-width: 46ch; }

.sobre-oscuro .precio-bloque__valor { color: var(--blanco); }
.sobre-oscuro .precio-bloque__nota  { color: var(--verde-muted); }

.datos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 26px;
  max-width: 620px;
}
.datos-lista__item { border-top: 1px solid var(--borde-suave); padding-top: 8px; }
.datos-lista__valor {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--petroleo);
  margin-top: 2px;
}
.sobre-oscuro .datos-lista__item { border-color: var(--petroleo-line); }
.sobre-oscuro .datos-lista__valor { color: var(--blanco); }

.redes-post__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.redes-post__lista .btn { gap: 7px; }

/* En el teléfono se pulsan con el dedo, no con el ratón: 33px de alto se
   fallan. 40 es el mínimo cómodo, y el icono ya los hace reconocibles aunque
   el texto se quede corto. */
@media (max-width: 720px) {
  .redes-post__lista .btn { min-height: 40px; padding-top: 0; padding-bottom: 0; }
}

.mini-mapa {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--petroleo);
}
/* El alto lo pone el componente `mapa`; aquí solo el marcador de respaldo. */
.mini-mapa .media--marcador { height: 300px; }
.mini-mapa__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--gris-verde);
}
.mini-mapa__pie svg { flex: none; color: var(--lima-dark); }

/* =====================================================================
   Planos generales / distribución (ficha de casa modelo)
   ===================================================================== */

.planos-par { background: var(--petroleo); padding: 90px 6vw; }
.planos-par__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
}
.planos-par__titulo { color: var(--lima); margin-bottom: 14px; }
.planos-par__hoja {
  background: var(--blanco);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
}
/* El fondo blanco es para el PLANO real (contain sobre blanco se lee bien);
   al marcador rotulado lo dejaba con la marca LEAD blanca sobre blanco. */
.planos-par__hoja .media:not(.media--marcador) { height: auto; max-height: 520px; object-fit: contain; background: var(--blanco); }
.planos-par__hoja .media--marcador { height: 300px; }
.planos-par__pie {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--gris-verde);
  border-top: 1px solid var(--borde-suave);
}

/* =====================================================================
   Secciones sueltas
   ===================================================================== */

.seccion-video { padding: 80px 6vw; }
.seccion-video.sobre-oscuro { background: var(--petroleo); }

.seccion-comparador { padding: 80px 6vw 40px; }

.lotes-sugeridos { padding: 80px 6vw; }

.proceso-lista { padding: 80px 6vw; }
.proceso-lista__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.proceso-lista__item {
  border-top: 2px solid var(--lima);
  padding-top: 16px;
}
.proceso-lista__num {
  font-family: var(--f-display);
  font-size: calc(1.875rem * var(--escala-texto));
  color: var(--lima-dark);
  display: block;
  line-height: 1;
}
.proceso-lista__nombre {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--petroleo);
  margin-top: 8px;
}
.proceso-lista__desc { font-size: var(--fs-md); line-height: 1.6; color: var(--gris-verde); margin-top: 6px; }

.tramites { background: var(--petroleo); padding: 80px 6vw; }
/* La rejilla tiene efecto de tabla —las separaciones son el fondo asomando
   entre celdas—, así que una fila a medias no deja «espacio», deja un bloque
   de línea al aire: con `auto-fit` y cinco servicios salían cuatro arriba y
   uno abajo, con tres huecos verdes al lado.

   Se arregla sin contar cuántos hay. La rejilla tiene SEIS columnas y cada
   celda ocupa dos —tres por fila—; si en la última fila sobra una, se lleva
   la fila entera, y si sobran dos, se la reparten. `:nth-child(3n+k)` cruzado
   con `:nth-last-child()` dice exactamente eso: «primera de su fila y además
   la última de la lista». Vale para tres servicios o para nueve, y por eso no
   hay que tocar nada al añadir uno en el panel. */
.tramites__lista {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: var(--petroleo-line);
  border: 1px solid var(--petroleo-line);
  border-radius: var(--r);
  overflow: hidden;
}
.tramites__item { grid-column: span 2; }
.tramites__lista > :nth-child(3n+1):nth-last-child(1) { grid-column: span 6; }
.tramites__lista > :nth-child(3n+1):nth-last-child(2),
.tramites__lista > :nth-child(3n+2):nth-last-child(1) { grid-column: span 3; }

@media (max-width: 1000px) {
  /* Dos por fila: cada celda tres columnas, y la huérfana se lleva la fila. */
  .tramites__item { grid-column: span 3; }
  .tramites__lista > :nth-child(3n+1):nth-last-child(1),
  .tramites__lista > :nth-child(3n+1):nth-last-child(2),
  .tramites__lista > :nth-child(3n+2):nth-last-child(1) { grid-column: span 3; }
  .tramites__lista > :nth-child(2n+1):nth-last-child(1) { grid-column: span 6; }
}

@media (max-width: 620px) {
  .tramites__item,
  .tramites__lista > .tramites__item { grid-column: span 6; }
}
.tramites__item { background: var(--petroleo); }
.tramites__item a {
  display: block;
  padding: 22px 20px;
  height: 100%;
  transition: background var(--t-rapida);
}
.tramites__item a:hover { background: var(--petroleo-alto); }
.tramites__nombre {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--blanco);
}
.tramites__desc { display: block; font-size: var(--fs-sm); color: var(--verde-muted); margin-top: 6px; }

/* =====================================================================
   Plano interactivo de lotización
   ===================================================================== */

.seccion-plano { background: var(--petroleo); padding: 90px 6vw; }

.seccion-plano__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-lg);
  margin-bottom: 26px;
}

/* El componente `plano-interactivo` está pensado para el panel, que va sobre
   hueso. Aquí vive sobre petróleo: se le suben los contrastes sin tocar
   plano.css, que es de ese componente. */
.seccion-plano .plano__leyenda,
.seccion-plano .plano__nivel,
.seccion-plano .plano__pie { color: var(--verde-muted); }
.seccion-plano .plano__leyenda-item b { color: var(--lima); }

.seccion-plano .plano__zoom .btn-ico {
  background: transparent;
  border-color: var(--petroleo-line);
  color: var(--verde-muted);
}
.seccion-plano .plano__zoom .btn-ico:hover {
  background: var(--lima);
  border-color: var(--lima);
  color: var(--petroleo);
}

/* Estado vacío sobre fondo petróleo.
   `.vacio` nace con texto petróleo sobre hueso; encima del fondo oscuro
   quedaba tinta oscura sobre tinta oscura y no se leía nada. Se nota en
   cuanto una lotización todavía no tiene plano subido —«Todavía no hay
   plano»—, que es el estado normal mientras el cliente carga contenido. */
.sobre-oscuro .vacio        { color: var(--verde-muted); }
.sobre-oscuro .vacio__titulo { color: var(--blanco); }
.sobre-oscuro .vacio .ico    { color: var(--lima); }

/* Miniatura del plano en la ficha de un lote.
   Nombres propios (`plano-mini`) para no chocar con plano.css, que es de
   components/plano-interactivo.php: ahí manda ese componente y aquí solo
   se resalta el lote de la ficha sobre el resto. */

.plano-mini { margin: 0; }

.plano-mini__lienzo {
  position: relative;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--hueso);
}
.plano-mini__lienzo .media,
.plano-mini__lienzo picture { position: absolute; inset: 0; }

/* `fill`, igual que en plano.css y por el mismo motivo: los polígonos van en
   porcentajes del marco, así que la imagen tiene que ocupar el marco entero.
   Con `contain`, si la proporción guardada no coincide con la real la imagen
   se centra dejando franjas y el lote resaltado cae fuera de su sitio. */
.plano-mini__imagen { object-fit: fill; background: var(--hueso); }

.plano-mini__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.plano-mini__lote { fill: rgba(12, 55, 55, .26); stroke: rgba(12, 55, 55, .35); stroke-width: 1; }
.plano-mini__lote--foco { fill: rgba(185, 217, 53, .55); stroke: var(--lima-dark); stroke-width: 3; }

.plano-mini__pie { font-size: var(--fs-sm); color: var(--gris-verde); margin-top: 10px; }
.plano-mini__pie a { color: var(--lima-dark); text-decoration: underline; }

/* =====================================================================
   Listado de lotes
   ===================================================================== */

.seccion-lotes { padding: 80px 6vw; }
.seccion-lotes__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-lg);
  margin-bottom: 22px;
}
.seccion-lotes__filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap); }
.seccion-lotes__filtros[hidden] { display: none; }   /* sin JS no se ofrece un filtro que no funciona */
.seccion-lotes__filtros .filtros-publicos { margin-top: 0; }

.campo--linea { min-width: 210px; }

.tabla-lotes { background: var(--blanco); }
.tabla-lotes th[scope='row'] { font-family: var(--f-display); font-size: var(--fs-md); text-transform: uppercase; color: var(--petroleo); }

.vacio--filtro { padding: 40px 0 0; }

/* =====================================================================
   Etapas del proceso (obra y urbanización)
   ===================================================================== */

.etapas { background: var(--petroleo); padding: 90px 6vw; }

.etapas__lista { display: flex; flex-direction: column; gap: 60px; }

.etapas__item {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 34px;
  align-items: start;
}
.etapas__num {
  font-family: var(--f-display);
  font-size: calc(2.875rem * var(--escala-texto));
  line-height: 1;
  color: var(--lima);
  display: block;
}
.etapas__nombre {
  font-family: var(--f-display);
  font-size: calc(1.5rem * var(--escala-texto));
  text-transform: uppercase;
  color: var(--blanco);
  margin-top: 10px;
}
.etapas__desc { font-size: var(--fs-md); line-height: 1.7; color: var(--verde-muted); margin-top: 10px; }

.etapas__media { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.etapas__tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.etapas__foto { height: 130px; border-radius: var(--r); overflow: hidden; position: relative; }

/* =====================================================================
   Comparador antes / después
   ===================================================================== */

.comparador {
  position: relative;
  width: 100%;
  height: var(--alto-comparador, 440px);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--petroleo-deep);
  margin: 0;
  --pos: 50%;
}

.comparador__capa { position: absolute; inset: 0; }
.comparador__capa--antes {
  /* La capa de arriba se recorta hasta la posición del tirador. */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.comparador__rotulo {
  position: absolute;
  top: 14px;
  z-index: 2;
  background: rgba(9, 40, 40, .78);
  color: var(--blanco);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.comparador__rotulo--antes   { left: 14px; }
.comparador__rotulo--despues { right: 14px; }

.comparador__tirador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--lima);
  z-index: 3;
  pointer-events: none;
}
.comparador__asa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lima);
  color: var(--petroleo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-2);
}

/* El <input type="range"> ocupa toda la caja: da ratón, dedo y teclado.
   `touch-action: pan-y` es imprescindible en móvil: sin él, el dedo que sube
   para seguir leyendo mueve la barra en vez de desplazar la página, y con un
   comparador de 560 px de alto el visitante se queda atrapado. Con pan-y el
   gesto vertical lo resuelve el navegador y el horizontal sigue moviendo la
   barra. */
.comparador__rango {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.comparador__rango::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.comparador__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.comparador__rango::-moz-range-track { height: 100%; background: transparent; border: 0; }
.comparador__rango::-moz-range-thumb {
  width: 46px;
  height: var(--alto-comparador, 440px);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: ew-resize;
}
.comparador__rango:focus-visible { outline: 2px solid var(--lima); outline-offset: -2px; border-radius: var(--r); }

.comparador__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 16px 12px;
  background: linear-gradient(transparent, rgba(9, 40, 40, .8));
  color: var(--verde-muted);
  font-size: var(--fs-sm);
  text-align: center;
  pointer-events: none;
}

.comparador--simple .comparador__capa { clip-path: none; }

/* =====================================================================
   Video de YouTube con carga diferida
   ===================================================================== */

.video-yt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--petroleo-deep);
}
.video-yt--vertical { aspect-ratio: 9 / 16; max-width: 340px; margin-inline: auto; }

.video-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-yt__disparo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  color: var(--blanco);
}
.video-yt__portada { position: absolute; inset: 0; display: block; }
/* Sin portada sale el marcador de LEAD: se sube para que el botón de play,
   que va centrado, no le caiga encima. */
.video-yt__portada .media--marcador { justify-content: flex-start; padding-top: 26px; }
.video-yt__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 40, 40, .1), rgba(9, 40, 40, .72));
  transition: background var(--t-media);
}
.video-yt__disparo:hover .video-yt__velo { background: linear-gradient(180deg, rgba(9, 40, 40, .05), rgba(9, 40, 40, .58)); }

.video-yt__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lima);
  color: var(--petroleo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-3);
  transition: transform var(--t-media);
}
.video-yt__disparo:hover .video-yt__play { transform: translate(-50%, -50%) scale(1.07); }

.video-yt__texto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  color: var(--blanco);
}

/* =====================================================================
   Testimonios
   ===================================================================== */

/* Todo centrado: el titular, la bajada y la rejilla. Con `auto-fill` y sin
   margen automático, dos testimonios se quedaban pegados a la izquierda con
   media pantalla vacía al lado; con flex y `justify-content: center` la
   última fila queda centrada haya los que haya —el mismo criterio que las
   jefaturas de la página Nosotros—. */
.testimonios { padding: 70px 6vw 100px; text-align: center; }
.testimonios__rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  align-items: stretch;
  max-width: 1180px;
  margin-inline: auto;
  text-align: left;
}
.testimonios__rejilla > * { flex: 0 1 340px; max-width: 380px; }

.testimonio-tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r);
  padding: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* La variante oscura (videos sobre petróleo) va DESPUÉS de la base a
   propósito: a igual especificidad gana la última, y en otra hoja que
   cargara antes la base la pisaba —pasó, y la cita quedaba verde suave
   sobre papel—. */
.testimonio-tarjeta--oscura {
  background: var(--petroleo-deep);
  border-color: var(--petroleo-line);
}
.testimonio-tarjeta--oscura .testimonio-tarjeta__cita { color: var(--verde-suave); }
.testimonio-tarjeta--oscura .testimonio-tarjeta__autor { color: var(--blanco); }
.testimonio-tarjeta__cat {
  align-self: flex-start;
  background: var(--lima-tenue);
  color: var(--lima-dark);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.testimonio-tarjeta__cita {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--petroleo);
  margin: 0;
}
.testimonio-tarjeta__pie {
  border-top: 1px solid var(--borde-suave);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonio-tarjeta__autor {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--petroleo);
}
.testimonio-tarjeta__ref { font-size: var(--fs-sm); color: var(--gris-verde); }
a.testimonio-tarjeta__ref { color: var(--lima-dark); font-weight: 600; }

.testimonio-obra { padding: 80px 6vw; }
.testimonio-obra__ficha {
  margin: 18px 0 0;
  border-left: 3px solid var(--lima);
  padding-left: 24px;
  max-width: 760px;
}
.testimonio-obra__cita {
  margin: 0;
  font-size: clamp(calc(1.0625rem * var(--escala-texto)), calc(2.2vw * var(--escala-texto)), calc(1.5rem * var(--escala-texto)));
  line-height: 1.55;
  color: var(--petroleo);
}
.testimonio-obra__autor {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--petroleo);
}
.testimonio-obra__ref {
  display: block;
  font-family: var(--f-texto);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-transform: none;
  color: var(--gris-verde);
}
.testimonio-obra__video { margin-top: 20px; max-width: 340px; }

/* =====================================================================
   Banda de derivación entre unidades
   ===================================================================== */

.derivacion { background: var(--petroleo-deep); padding: 80px 6vw; border-top: 2px solid var(--lima); }

.derivacion__cabecera { margin-bottom: 30px; }
.derivacion__titulo { margin: 10px 0 0; }
.derivacion__titulo .display { font-size: var(--fs-t-lg); color: var(--blanco); }
.derivacion__titulo .script  { font-size: var(--fs-t-md); margin-left: 14px; }

.derivacion__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.derivacion__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 54px 24px 22px;
  border: 1.5px solid var(--petroleo-line);
  border-radius: var(--r);
  background: var(--petroleo);
  color: var(--blanco);
  transition: border-color var(--t-rapida), background var(--t-rapida), transform var(--t-rapida);
}
.derivacion__tarjeta:hover {
  border-color: var(--lima);
  background: var(--petroleo-alto);
  color: var(--blanco);
  transform: translateY(-3px);
}
.derivacion__tarjeta--concreta { border-color: var(--lima); }

.derivacion__texto {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.derivacion__sub { font-size: var(--fs-sm); color: var(--verde-muted); }

.derivacion__flecha {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lima);
  transition: transform var(--t-rapida);
}
.derivacion__tarjeta:hover .derivacion__flecha { transform: translateY(-50%) translateX(4px); }

/* =====================================================================
   Adaptación a pantallas pequeñas
   ===================================================================== */

@media (max-width: 900px) {
  /* El titular y su palabra manuscrita se APILAN en el telefono, igual que en
     `.banda-cta`. En una sola linea el titular parte en dos renglones y la
     manuscrita se le monta encima: medido a 390px con la escala de texto en
     1,3, los dos trozos se solapaban al 100% en /propiedades y /lotizaciones y
     al 78% en /obras. Pasa con CUALQUIER tipografia —sale igual con Anton que
     con Barlow—, asi que es el tamano y no la letra. `.banda-cta` ya lo tenia
     resuelto asi; a esta pieza se le habia olvidado. */
  .derivacion__titulo .display,
  .derivacion__titulo .script { display: block; }
  .derivacion__titulo .script { margin-left: 0; }

  .etapas__item { grid-template-columns: 1fr; gap: 20px; }
  .etapas__num { font-size: calc(2.25rem * var(--escala-texto)); }

  .seccion-plano__cabecera,
  .seccion-lotes__cabecera { align-items: flex-start; }

  .planos-par__hoja .media { max-height: 380px; }

  .comparador { height: min(var(--alto-comparador, 440px), 62vw); min-height: 240px; }
  .comparador__rango::-moz-range-thumb { height: 100vh; }

  .mini-mapa .media--marcador { height: 220px; }

  .video-yt__play { width: 58px; height: 58px; }
}

@media (max-width: 640px) {
  .filtros { padding: 24px 6vw 4px; }
  .filtros__form { grid-template-columns: 1fr; }
  .filtros__acciones .btn { flex: 1 1 auto; }

  .cabecera-lote { padding-top: 118px; }

  .derivacion__lista { grid-template-columns: 1fr; }
  .derivacion__texto { font-size: var(--fs-lg); }
}

/* Quien pide menos movimiento no recibe transiciones de adorno.
   Ojo: aquí solo se quitan transiciones, nunca los transform que colocan
   una pieza en su sitio (la flecha centrada, el asa del comparador). */
@media (prefers-reduced-motion: reduce) {
  .derivacion__tarjeta,
  .derivacion__flecha,
  .video-yt__play,
  .video-yt__velo { transition: none; }

  .derivacion__tarjeta:hover { transform: none; }
  .derivacion__tarjeta:hover .derivacion__flecha { transform: translateY(-50%); }
  .video-yt__disparo:hover .video-yt__play { transform: translate(-50%, -50%); }
}

/* =====================================================================
   Puente entre unidades
   Va dentro de la página, no al pie: en cuanto el visitante entendió lo
   que ve, le nombra lo que le falta y se lo pone a un clic. La tarjeta
   «fuerte» es la que resuelve el hueco más probable.
   ===================================================================== */

.puente { padding: 60px 6vw; }
.puente--claro  { background: var(--hueso); border-top: 1px solid var(--borde-suave); border-bottom: 1px solid var(--borde-suave); }
.puente--oscuro { background: var(--petroleo); }

.puente__rotulo { margin-bottom: 20px; }
.puente--oscuro .puente__rotulo { color: var(--lima); }

.puente__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
}
.puente__lista--una { grid-template-columns: minmax(0, 760px); }

.puente__tarjeta {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: 'icono cuerpo' '.     accion';
  align-items: start;
  gap: 6px 16px;
  padding: 24px 26px;
  border: 1.5px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--r);
  background: var(--blanco);
  color: inherit;
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.puente--oscuro .puente__tarjeta {
  background: var(--petroleo-alto);
  border-color: var(--petroleo-line);
}
.puente__tarjeta:hover {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
  border-color: var(--lima-dark);
}
.puente--oscuro .puente__tarjeta:hover { border-color: var(--lima); }

/* La acción principal se distingue por el filo lima, no por un fondo lima. */
.puente__tarjeta--fuerte { border-left-color: var(--lima-dark); }
.puente--oscuro .puente__tarjeta--fuerte { border-left-color: var(--lima); }

.puente__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: var(--lima-tenue);
  color: var(--lima-dark);
}
.puente--oscuro .puente__icono { color: var(--lima); }
.puente__tarjeta--fuerte .puente__icono { background: var(--lima); color: var(--petroleo); }

.puente__cuerpo { grid-area: cuerpo; display: block; min-width: 0; }

.puente__gancho {
  display: block;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-label);
  margin-bottom: 6px;
}
.puente--oscuro .puente__gancho { color: var(--verde-muted); }

.puente__titulo {
  display: block;
  font-size: clamp(calc(1.3125rem * var(--escala-texto)), calc(2.4vw * var(--escala-texto)), calc(1.75rem * var(--escala-texto)));
  color: var(--petroleo);
  line-height: 1.1;
}
.puente--oscuro .puente__titulo { color: var(--blanco); }

.puente__texto {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-md); line-height: 1.6;
  color: var(--gris-verde);
}
.puente--oscuro .puente__texto { color: var(--verde-muted); }

.puente__accion { grid-area: accion; display: block; margin-top: 16px; }
.puente__boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--petroleo);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--petroleo);
  background: transparent;
  transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida), gap var(--t-rapida);
}
.puente--oscuro .puente__boton { border-color: var(--verde-muted); color: var(--blanco); }
.puente__tarjeta--fuerte .puente__boton { background: var(--lima); border-color: var(--lima); color: var(--petroleo); }
.puente__tarjeta:hover .puente__boton { background: var(--petroleo); border-color: var(--petroleo); color: var(--blanco); gap: 14px; }
.puente--oscuro .puente__tarjeta:hover .puente__boton { background: var(--lima); border-color: var(--lima); color: var(--petroleo); }
.puente__tarjeta--fuerte:hover .puente__boton { background: var(--lima-hover); border-color: var(--lima-hover); color: var(--petroleo); }

@media (max-width: 900px) {
  .puente { padding: 44px 6vw; }
  .puente__tarjeta { padding: 20px; gap: 6px 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .puente__icono { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .puente__tarjeta:hover { transform: none; }
  .puente__tarjeta:hover .puente__boton { gap: 8px; }
}

/* En el teléfono los botones de la ficha ocupan el ancho: con .btn en
   white-space:nowrap, una etiqueta larga se salía de la pantalla y hacía
   deslizar la página en horizontal. */
@media (max-width: 560px) {
  .cabecera-interna__script { margin-left: 0; }
}

/* =====================================================================
   Captación desde la ficha
   Dos campos junto a lo que el visitante está mirando. El otro formulario
   —el de /contacto— pregunta de todo; este solo quiere el teléfono.
   ===================================================================== */

.captar {
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
  padding: 56px 6vw;
  background: var(--petroleo);
  color: var(--verde-suave);
}

@media (min-width: 900px) {
  .captar { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
}

.captar .kicker { color: var(--lima); }

.captar__titulo {
  font-family: var(--f-display);
  font-size: clamp(calc(1.5rem * var(--escala-texto)), calc(3vw * var(--escala-texto)), calc(2.25rem * var(--escala-texto)));
  text-transform: uppercase;
  color: var(--blanco);
  line-height: 1.1;
  margin-top: 8px;
}

.captar__texto {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--verde-muted);
  max-width: 46ch;
  margin-top: 12px;
}

.captar__whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--lima);
}
.captar__whatsapp:hover { color: var(--lima-hover); }

.captar__form {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--petroleo-line);
  border-radius: var(--r);
  background: var(--petroleo-alto);
}
.captar__form .campo__label { color: var(--verde-apagado); }
.captar__form input {
  background: var(--petroleo-deep);
  border-color: var(--petroleo-line);
  color: var(--blanco);
}
.captar__form input::placeholder { color: var(--verde-apagado); }
.captar__form input:focus { border-color: var(--lima); box-shadow: 0 0 0 3px var(--lima-tenue); }
.captar__form .campo__ayuda { color: var(--verde-apagado); text-align: center; }

/* Acuse de recibo: ocupa la banda entera, sin formulario al lado. */
.captar:has(.captar__hecho) { grid-template-columns: minmax(0, 1fr); }
.captar__hecho { text-align: center; color: var(--verde-muted); }
.captar__hecho .ico { margin: 0 auto; color: var(--lima); }

@media (max-width: 900px) {
  .captar { padding: 44px 6vw; }
}

/* =====================================================================
   Muelle de derivación
   Las mismas dos opciones del puente, pero fijas abajo a la derecha para
   que acompañen al visitante mientras baja por la ficha.

   El ancho NO se calcula sobre 100vw: eso incluye la barra de
   desplazamiento y el elemento se pasa unos píxeles, lo que crea barra
   horizontal y esas franjas muertas a los lados. Se ancla a los dos bordes
   con left/right y se empuja a la derecha con margin-left:auto, así nunca
   puede desbordar por mucho que crezca el texto.
   ===================================================================== */

.muelle {
  position: fixed;
  z-index: 700;                    /* bajo los overlays (900) y los toast (1000) */
  left: var(--muelle-margen, 16px);
  right: var(--muelle-margen, 16px);
  bottom: var(--muelle-margen, 16px);
  width: auto;
  max-width: 350px;
  margin-left: auto;               /* lo pega a la derecha sin salirse */

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;            /* el hueco entre piezas deja pasar el clic */
}
.muelle > * { pointer-events: auto; }

@media (min-width: 720px) {
  .muelle { --muelle-margen: 24px; }
}

/* --- Las dos opciones ------------------------------------------------ */

.muelle__opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r);
  border: 1px solid var(--borde);
  background: rgba(251, 251, 248, .96);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-3);
  transform-origin: bottom right;
  transition: opacity var(--t-media), transform var(--t-media);
}

.muelle__rotulo {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-label);
  padding: 2px 4px 4px;
}

.muelle__opcion {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--borde);
  background: var(--blanco);
  color: inherit;
  transition: border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
}
.muelle__opcion:hover {
  color: inherit;
  border-color: var(--lima-dark);
  transform: translateX(-2px);
  box-shadow: var(--sombra-2);
}
.muelle__opcion--fuerte { border-left-color: var(--lima-dark); }

.muelle__ico {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--lima-tenue);
  color: var(--lima-dark);
}
.muelle__opcion--fuerte .muelle__ico { background: var(--lima); color: var(--petroleo); }

.muelle__cuerpo { display: block; min-width: 0; }
.muelle__gancho {
  display: block;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-label);
}
.muelle__titulo {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--petroleo);
  /* Dos renglones como máximo: el muelle no puede crecer sin control. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* El recorte se come la tilde: en Anton la Ñ y las vocales acentuadas
     suben 2 px por encima de la mayúscula con interlínea 1.15. El relleno
     agranda solo la caja que recorta y el margen negativo la devuelve a su
     sitio, igual que en el titular del hero. */
  padding-top: .22em;
  margin-top: -.22em;
}
.muelle__flecha { color: var(--gris-label); }
.muelle__opcion:hover .muelle__flecha { color: var(--lima-dark); }

/* --- El interruptor -------------------------------------------------- */

.muelle__interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--petroleo);
  color: var(--blanco);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em;
  box-shadow: var(--sombra-2);
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.muelle__interruptor:hover { background: var(--petroleo-alto); transform: translateY(-1px); }
.muelle__interruptor .ico { transition: transform var(--t-media); }

/* --- Plegado --------------------------------------------------------- */

.muelle.esta-plegado .muelle__opciones {
  opacity: 0;
  transform: scale(.94) translateY(8px);
  pointer-events: none;
  visibility: hidden;
}
.muelle.esta-plegado .muelle__interruptor .ico { transform: rotate(180deg); }
.muelle.esta-plegado .muelle__interruptor { background: var(--lima); color: var(--petroleo); }

/* --- Teléfono -------------------------------------------------------- */

@media (max-width: 719px) {
  /* Más compacto: el gancho sobra y el título basta. */
  .muelle__gancho { display: none; }
  .muelle__opcion { grid-template-columns: 32px minmax(0, 1fr) 14px; padding: 9px 10px; }
  .muelle__ico { width: 32px; height: 32px; }
  .muelle__titulo { font-size: var(--fs-md); -webkit-line-clamp: 2; }
  .muelle__interruptor { padding: 9px 14px; font-size: var(--fs-sm); }
}

/* En pantallas muy bajas el muelle no puede comerse la página. */
@media (max-height: 520px) {
  .muelle__rotulo { display: none; }
  .muelle__titulo { -webkit-line-clamp: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .muelle__opciones { transition: none; }
  .muelle__opcion:hover { transform: none; }
  .muelle__interruptor:hover { transform: none; }
}

/* El muelle flota abajo a la DERECHA: la protección va en ese eje, no en
   empujar toda la página hacia abajo. Con el padding lateral, ningún texto
   del pie comparte columna con el interruptor (131px desde el borde), y el
   fondo puede bajar a lo justo. Antes, cuatro paddings apilados sumaban
   ~280px de vacío tras el último texto; medido después: ~158px. */
body:has([data-muelle]) .derivacion { padding-bottom: 28px; }
body:has([data-muelle]) .pie-publico { padding-bottom: 72px; }

@media (min-width: 720px) {
  body:has([data-muelle]) .pie-publico {
    padding-bottom: 40px;
    padding-right: calc(6vw + 200px);
  }
}

/* =====================================================================
   El muelle deja sitio a los botones flotantes
   ===================================================================== */

/* Los flotantes viven abajo a la IZQUIERDA y el muelle abajo a la derecha,
   así que en escritorio no se rozan. En una pantalla estrecha el muelle se
   estiraba de borde a borde y los tapaba; aquí le deja libre el carril de la
   izquierda —los 54px del botón más su margen— en vez de que uno de los dos
   desaparezca. La tarjeta del muelle conserva ~280px, que le bastan. */
@media (max-width: 720px) {
  body:has([data-flotantes]) .muelle {
    left: calc(var(--muelle-margen, 16px) + 78px);
  }
}