/* ==========================================================================
   RIV — Gestión Inmobiliaria
   Base: BLANCO PURO · Estructura: Azul Marino · Acento: Dorado
   Display editorial: Playfair Display · Texto y datos: Inter
   Marca (logo): Montserrat, según manual
   ========================================================================== */

:root {
  --blanco: #FFFFFF;
  --azul: #1C2B44;
  --azul-hondo: #162135;
  --dorado: #C2A24C;
  --dorado-claro: #D8BC77;
  --arena: #D8C6A5;
  --hueso: #F7F4ED;

  --tinta-72: rgba(28, 43, 68, 0.72);
  --tinta-52: rgba(28, 43, 68, 0.52);
  --tinta-38: rgba(28, 43, 68, 0.38);
  --linea: rgba(28, 43, 68, 0.14);
  --linea-suave: rgba(28, 43, 68, 0.08);

  --claro-78: rgba(255, 255, 255, 0.78);
  --claro-52: rgba(255, 255, 255, 0.52);
  --linea-clara: rgba(255, 255, 255, 0.24);
  --linea-clara-suave: rgba(255, 255, 255, 0.13);

  --display: "Playfair Display", Georgia, serif;
  --texto: "Inter", system-ui, sans-serif;
  --marca: "Montserrat", sans-serif;

  --ancho: 1280px;
  --margen: 48px;
  --alto-cab: 84px;

  /* Escala de z-index — sin valores arbitrarios */
  --z-lote: 2;
  --z-pin: 3;
  --z-chip: 4;
  --z-grano: 90;
  --z-cabecera: 100;
  --z-salto: 120;
  --z-visor: 200;

  /* Grano sutil, para romper la planitud digital */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Retícula técnica de fondo (planos sutiles) */
  --plano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M72 0H0v72' fill='none' stroke='%231C2B44' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  --plano-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M72 0H0v72' fill='none' stroke='%23FFFFFF' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--azul);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

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

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* ---------- Accesibilidad ---------- */

/* Anillo de foco visible para navegación con teclado */
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 1px;
}
.oscuro :focus-visible,
.portada-visual :focus-visible,
.pie :focus-visible { outline-color: var(--dorado-claro); }

/* Salto al contenido */
.salto {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-salto);
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.85rem;
  padding: 13px 26px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.salto:focus-visible { transform: translate(-50%, 12px); }

/* Grano fijo — nunca sobre contenedores que hacen scroll */
.grano {
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: 0.03;
  background-image: var(--grano);
}

/* ---------- Tipografía ---------- */

.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-size: clamp(2.5rem, 5.2vw, 4.3rem);
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 500; color: var(--dorado); }

.titulo {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  text-wrap: balance;
}
.titulo em { font-style: italic; font-weight: 500; color: var(--dorado); }

/* Sin palabras huérfanas al final de párrafo */
p { text-wrap: pretty; }

/* Cifras alineadas en columna (áreas, precios) */
.inmueble-datos dd,
.posib-req { font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dorado);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--dorado);
  flex: none;
}

.indice {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--tinta-38);
}
.oscuro .indice { color: var(--claro-52); }

.entradilla {
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--tinta-72);
  max-width: 62ch;
}
.oscuro .entradilla { color: var(--claro-78); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--texto);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.1s ease;
}
/* Retroalimentación táctil al presionar */
.btn:active { transform: translateY(1px) scale(0.99); }
.filtro:active { transform: translateY(1px); }
.inmueble-link:active { transform: translateY(1px); }
.btn-oro { background: var(--dorado); color: var(--azul); border-color: var(--dorado); }
.btn-oro:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

.btn-linea { border-color: var(--linea); color: var(--azul); }
.btn-linea:hover { border-color: var(--azul); background: var(--azul); color: var(--blanco); }

.oscuro .btn-linea { border-color: var(--linea-clara); color: var(--blanco); }
.oscuro .btn-linea:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }

.btn-bloque { width: 100%; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecera);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea-suave);
}
.cabecera-fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
  height: var(--alto-cab);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marca { display: flex; align-items: center; text-decoration: none; color: var(--azul); }
.marca-logo { width: 72px; height: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--azul);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav a i {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--dorado);
  margin-right: 5px;
}
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--dorado);
  transition: width 0.25s ease;
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta).activo::after { width: 100%; }
/* Sección en la que se encuentra el visitante */
.nav a:not(.nav-cta).activo { color: var(--azul); }
.nav a:not(.nav-cta).activo i { color: var(--dorado); }
.nav a:not(.nav-cta):not(.activo) i { color: var(--tinta-38); }
.nav-cta {
  background: var(--azul);
  color: var(--blanco) !important;
  padding: 11px 24px !important;
}
.nav-cta:hover { background: var(--dorado); color: var(--azul) !important; }

.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 10px 0; }
.menu-btn span {
  display: block; width: 26px; height: 1.5px;
  background: var(--azul); margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-btn.activo span:first-child { transform: translateY(7.5px) rotate(45deg); }
.menu-btn.activo span:last-child { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   PORTADA — composición dividida
   ========================================================================== */

.portada {
  display: grid;
  grid-template-columns: 47% 53%;
  min-height: 100svh;
  padding-top: var(--alto-cab);
}

.portada-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--margen) 72px max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  background-image: var(--plano);
  background-color: var(--blanco);
}
.portada-texto .kicker { margin-bottom: 26px; }
.portada h1 { margin-bottom: 26px; font-size: clamp(2.3rem, 3.7vw, 3.5rem); }
.portada-sub {
  font-size: 1.05rem;
  color: var(--tinta-72);
  max-width: 46ch;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
  margin-bottom: 34px;
}
.portada-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Lámina técnica decorativa */
.plano-deco {
  position: absolute;
  right: var(--margen);
  bottom: 34px;
  width: 180px;
  opacity: 0.45;
  pointer-events: none;
}

/* Panel visual con el lote */
.portada-visual { position: relative; overflow: hidden; background: var(--azul); }
.portada-visual > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(22,33,53,0.42) 0%, rgba(22,33,53,0.18) 40%, rgba(22,33,53,0.55) 100%);
}

.lote-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-lote); }
.lote-svg polygon {
  fill: rgba(194, 162, 76, 0.14);
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-dasharray: 9 7;
  vector-effect: non-scaling-stroke;
}

.pin {
  position: absolute;
  z-index: var(--z-pin);
  width: 46px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.lote-area {
  position: absolute;
  z-index: var(--z-pin);
  background: rgba(255, 255, 255, 0.94);
  color: var(--azul);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  transform: translate(-50%, 0);
}

/* Chips de ubicación con conector */
.chip {
  position: absolute;
  z-index: var(--z-chip);
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(22, 33, 53, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--blanco);
  padding: 9px 13px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; color: var(--dorado); flex: none; }
.chip i {
  position: absolute;
  top: 100%;
  left: 20px;
  width: 1px;
  height: var(--conector, 40px);
  background: rgba(255, 255, 255, 0.55);
}
.chip i::after {
  content: "";
  position: absolute;
  bottom: -3px; left: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}

/* Tira de categorías */
.tira {
  grid-column: 1 / -1;
  border-top: 1px solid var(--linea);
  background: var(--blanco);
}
.tira-fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 20px var(--margen);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-52);
}
.tira-fila b { font-weight: 500; color: var(--azul); }
.tira-fila span { width: 3px; height: 3px; background: var(--dorado); border-radius: 50%; }

/* ==========================================================================
   Credenciales
   ========================================================================== */

.credenciales {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--hueso);
}
.credencial {
  padding: 40px 34px;
  border-right: 1px solid var(--linea);
}
.credencial:last-child { border-right: none; }
.credencial svg { width: 26px; height: 26px; color: var(--dorado); margin-bottom: 16px; }
.credencial h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  margin-bottom: 6px;
}
.credencial p { font-size: 0.9rem; color: var(--tinta-72); }

/* ==========================================================================
   Estructura de sección
   ========================================================================== */

.seccion { padding: 118px 0; border-top: 1px solid var(--linea-suave); }
.seccion.plano { background-image: var(--plano); }
.seccion.oscuro {
  background-color: var(--azul);
  color: var(--blanco);
  border-top-color: transparent;
}
.seccion.oscuro.plano { background-image: var(--plano-claro); }

.cabeza {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 56px;
  margin-bottom: 68px;
}
.cabeza-marca { display: flex; flex-direction: column; gap: 10px; }
.cabeza .titulo { margin-bottom: 20px; }

/* ---------- 01 Enfoque ---------- */

.enfoque { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.enfoque-guia {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.42;
  font-weight: 500;
  margin-bottom: 24px;
}
.enfoque p + p { margin-top: 18px; }
.enfoque-cuerpo p { color: var(--tinta-72); }

.valores { list-style: none; border-top: 1px solid var(--linea); }
.valores li { padding: 26px 0; border-bottom: 1px solid var(--linea-suave); display: grid; grid-template-columns: 30px 1fr; gap: 18px; }
.valores b {
  font-family: var(--texto);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--dorado);
  font-weight: 600;
  padding-top: 5px;
}
.valores h3 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; margin-bottom: 4px; }
.valores p { font-size: 0.93rem; color: var(--tinta-72); }

/* ---------- 02 Activos ---------- */

.activos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea-clara-suave);
  border: 1px solid var(--linea-clara-suave);
}
.ficha { background: var(--azul); display: flex; flex-direction: column; }
.activo-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.activo-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(1.06) brightness(0.92);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.7s ease;
}
.ficha:hover .activo-img img { transform: scale(1.05); filter: grayscale(0) brightness(1); }
.activo-num {
  position: absolute; top: 0; left: 0;
  background: var(--azul); color: var(--dorado);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em;
  padding: 8px 13px;
}
.activo-txt { padding: 26px 26px 32px; flex: 1; display: flex; flex-direction: column; }
.activo-txt h3 { font-family: var(--display); font-weight: 600; font-size: 1.32rem; color: var(--blanco); margin-bottom: 10px; }
.activo-txt p { font-size: 0.92rem; color: var(--claro-78); }
.activo-usos {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
  font-size: 0.78rem !important;
  color: var(--claro-52) !important;
  line-height: 1.5;
}

/* ---------- 03 Posibilidades ---------- */

.posib { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }

.posib-lote { position: sticky; top: 112px; }
.posib-lote img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.posib-lote::after {
  content: "";
  position: absolute; inset: 18px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.posib-etq {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  background: var(--blanco);
  padding: 11px 20px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
  white-space: nowrap;
}

.posib-lista { list-style: none; border-top: 1px solid var(--linea); }
.posib-lista li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 26px 0 26px 26px;
  border-bottom: 1px solid var(--linea-suave);
  transition: background 0.25s ease;
}
.posib-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 42px;
  width: 14px; height: 1px;
  background: var(--dorado);
}
.posib-lista li:hover { background: var(--hueso); }
.posib-ico { width: 30px; height: 30px; color: var(--dorado); margin-top: 2px; }
.posib-lista h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-bottom: 5px; }
.posib-lista p { font-size: 0.93rem; color: var(--tinta-72); max-width: 46ch; }
.posib-req {
  font-size: 0.8rem;
  color: var(--tinta-52);
  text-align: right;
  white-space: nowrap;
  padding-top: 5px;
  line-height: 1.5;
}

/* ---------- 04 Ubicación ---------- */

.mapa {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--azul);
  margin-bottom: 1px;
}
.mapa > img { width: 100%; height: 100%; object-fit: cover; }
.mapa::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,33,53,0.5) 0%, rgba(22,33,53,0.2) 50%, rgba(22,33,53,0.6) 100%);
}

.beneficios {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--linea);
  border-top: none;
}
.beneficio {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--linea);
}
.beneficio:last-child { border-right: none; }
.beneficio svg { width: 26px; height: 26px; color: var(--dorado); margin: 0 auto 14px; }
/* Caja alta reservada a etiquetas cortas: aquí va en serif, caja baja */
.beneficio h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* ---------- Franja ---------- */

.franja { position: relative; height: 58vh; min-height: 400px; overflow: hidden; }
.franja img { width: 100%; height: 100%; object-fit: cover; }
.franja::after { content: ""; position: absolute; inset: 0; background: rgba(22, 33, 53, 0.82); }
.franja blockquote {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px var(--margen); text-align: center;
}
.franja p {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 3.8vw, 3rem);
  line-height: 1.22;
  color: var(--blanco);
  max-width: 22ch;
}
.franja cite {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dorado);
}

/* ---------- 05 Inmuebles ---------- */

.filtros { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 40px; }
.filtro {
  font-family: var(--texto);
  font-size: 0.8rem; font-weight: 500;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--azul);
  cursor: pointer;
  transition: all 0.2s ease;
}
.filtro:hover { border-color: var(--azul); }
.filtro.activo { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

.inmuebles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }

.inmueble { display: flex; flex-direction: column; border: 1px solid var(--linea); background: var(--blanco); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.inmueble:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 43, 68, 0.10); }

.inmueble-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hueso); display: flex; align-items: center; justify-content: center; }
.inmueble-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.inmueble:hover .inmueble-img img { transform: scale(1.05); }
.inmueble-img::after {
  content: "";
  position: absolute; inset: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.sin-foto { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-38); }

.inmueble-tipo {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--azul); color: var(--blanco);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px;
}
.inmueble-estado {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--dorado); color: var(--azul);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px;
}

.inmueble-cuerpo { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.inmueble-codigo { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dorado); margin-bottom: 9px; }
.inmueble-cuerpo h3 { font-family: var(--display); font-weight: 600; font-size: 1.28rem; line-height: 1.25; margin-bottom: 6px; }
.inmueble-ubi { font-size: 0.88rem; color: var(--tinta-52); margin-bottom: 16px; }
.inmueble-desc { font-size: 0.92rem; color: var(--tinta-72); margin-bottom: 20px; }

.inmueble-datos { display: flex; gap: 30px; padding: 16px 0; margin-top: auto; border-top: 1px solid var(--linea-suave); }
.inmueble-datos dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-38); margin-bottom: 3px; }
.inmueble-datos dd { font-family: var(--texto); font-weight: 600; font-size: 1.02rem; }

.inmueble-usos { padding: 14px 0 18px; border-top: 1px dashed var(--linea); }
.inmueble-usos p { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-38); margin-bottom: 9px; }
.uso {
  display: inline-block;
  font-size: 0.76rem;
  padding: 5px 11px;
  margin: 0 5px 5px 0;
  border: 1px dashed var(--linea);
  color: var(--tinta-72);
}

.inmueble-link {
  font-size: 0.84rem; font-weight: 500;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid var(--dorado);
  padding-bottom: 3px;
  align-self: start;
  transition: color 0.2s ease;
}
.inmueble-link:hover { color: var(--dorado); }

.vacio { color: var(--tinta-52); padding-top: 20px; }

/* ---------- 06 Proceso ---------- */

.proceso { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.proceso li { background: var(--blanco); padding: 32px 26px 36px; }
.proceso b { font-family: var(--texto); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--dorado); display: block; margin-bottom: 18px; }
.proceso h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin-bottom: 8px; }
.proceso p { font-size: 0.89rem; color: var(--tinta-72); }

/* ---------- Contacto ---------- */

.contacto { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
.contacto .display { margin-bottom: 24px; }
.titulo-contacto { margin-top: 22px; }

.datos { list-style: none; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--linea-clara); }
.datos li { margin-bottom: 24px; }
.datos li:last-child { margin-bottom: 0; }
.dato-etq { display: block; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dorado); margin-bottom: 6px; }
.datos a { color: var(--blanco); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.datos a:hover { border-bottom-color: var(--dorado); }

.tarjeta-contacto { border: 1px solid var(--linea-clara); padding: 38px 34px; background: rgba(255, 255, 255, 0.04); }
.tarjeta-contacto h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin-bottom: 10px; }
.tarjeta-contacto > p { font-size: 0.94rem; color: var(--claro-78); margin-bottom: 26px; }
.tarjeta-acciones { display: flex; flex-direction: column; gap: 11px; }

/* ---------- Pie ---------- */

/* Mismo azul que la sección de contacto: evita una banda de tono distinto */
.pie { background: var(--azul); color: var(--blanco); padding: 68px 0 32px; border-top: 1px solid var(--linea-clara-suave); }
.pie-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--linea-clara-suave);
}
.pie-marca svg { width: 78px; color: var(--blanco); }
.pie-desc { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--claro-52); margin-top: 12px; }
.pie-nav { display: flex; gap: 30px; flex-wrap: wrap; }
.pie-nav a { font-size: 0.86rem; color: var(--claro-78); text-decoration: none; }
.pie-nav a:hover { color: var(--dorado); }
.pie-base { padding-top: 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.78rem; color: var(--claro-52); }

/* ---------- Revelado ---------- */

.revelar { opacity: 0; transform: translateY(20px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1); }
.revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .activo-img img, .inmueble-img img { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --margen: 32px; }
  .activos { grid-template-columns: repeat(2, 1fr); }
  .proceso { grid-template-columns: repeat(3, 1fr); }
  .inmuebles { grid-template-columns: repeat(2, 1fr); }
  .beneficios { grid-template-columns: repeat(3, 1fr); }
  .beneficio:nth-child(3) { border-right: none; }
  .credenciales { grid-template-columns: repeat(2, 1fr); }
  .credencial:nth-child(2) { border-right: none; }
  .credencial:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
}

@media (max-width: 1024px) {
  .portada { grid-template-columns: 1fr; min-height: auto; }
  .portada-texto { padding: 64px var(--margen) 56px; }
  .plano-deco { display: none; }
  .portada-visual { aspect-ratio: 4 / 3; }
  .cabeza { grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; }
  .cabeza-marca { flex-direction: row; align-items: center; gap: 16px; }
  .enfoque { grid-template-columns: 1fr; gap: 48px; }
  .posib { grid-template-columns: 1fr; gap: 44px; }
  .contacto { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 780px) {
  :root { --margen: 22px; --alto-cab: 76px; }
  body { font-size: 16px; }
  .seccion { padding: 72px 0; }

  .menu-btn { display: block; }
  .nav {
    position: fixed;
    inset: var(--alto-cab) 0 auto 0;
    background: var(--blanco);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--margen) 26px;
    border-bottom: 1px solid var(--linea);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.abierto { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--linea-suave); }
  .nav-cta { text-align: center; margin-top: 16px; padding: 14px !important; }

  .display { font-size: clamp(2.05rem, 8.6vw, 2.9rem); }
  .portada-visual { aspect-ratio: 3 / 4; }
  .pin { width: 34px; }
  .lote-area { font-size: 0.58rem; padding: 6px 10px; }

  /* Chips: se reubican para no solaparse en pantallas estrechas */
  .chip {
    font-size: 0.5rem;
    padding: 6px 9px;
    gap: 6px;
    white-space: normal;
    max-width: 45%;
    line-height: 1.3;
  }
  .chip svg { width: 12px; height: 12px; }
  .chip i { left: 15px; }

  .portada-visual .chip:nth-of-type(1) { left: 4% !important; right: auto !important; top: 5% !important; bottom: auto !important; --conector: 24px; }
  .portada-visual .chip:nth-of-type(2) { left: auto !important; right: 4% !important; top: 27% !important; bottom: auto !important; --conector: 24px; }
  .portada-visual .chip:nth-of-type(3) { left: 4% !important; right: auto !important; top: auto !important; bottom: 9% !important; --conector: 18px; }

  .mapa .chip:nth-of-type(1) { left: 3% !important; right: auto !important; top: 6% !important; bottom: auto !important; --conector: 22px; }
  .mapa .chip:nth-of-type(2) { left: auto !important; right: 3% !important; top: 6% !important; bottom: auto !important; --conector: 22px; }
  .mapa .chip:nth-of-type(3) { left: 3% !important; right: auto !important; top: auto !important; bottom: 24% !important; --conector: 18px; }
  .mapa .chip:nth-of-type(4) { left: auto !important; right: 3% !important; top: auto !important; bottom: 24% !important; --conector: 18px; }

  .credenciales { grid-template-columns: 1fr; }
  .credencial { border-right: none; border-bottom: 1px solid var(--linea); }
  .credencial:last-child { border-bottom: none; }
  .activos { grid-template-columns: 1fr; }
  .activo-img { aspect-ratio: 16 / 10; }
  .posib-lista li { grid-template-columns: 34px 1fr; gap: 14px; }
  .posib-req { grid-column: 2; text-align: left; padding-top: 8px; }
  .posib-ico { width: 24px; height: 24px; }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .beneficio { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
  .beneficio:nth-child(2n) { border-right: none; }
  .beneficio:last-child { grid-column: 1 / -1; border-right: none; border-bottom: none; }
  .mapa { aspect-ratio: 4 / 3; }
  .inmuebles { grid-template-columns: 1fr; }
  .proceso { grid-template-columns: 1fr; }
  .franja { height: 46vh; min-height: 320px; }
  .pie-fila { grid-template-columns: 1fr; gap: 30px; }
  .datos li { overflow-wrap: anywhere; }
}

/* ==========================================================================
   PÁGINA DE DETALLE DEL INMUEBLE
   ========================================================================== */

.ficha-portada {
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: stretch;
  padding-top: var(--alto-cab);
  border-bottom: 1px solid var(--linea);
}
.ficha-portada-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px var(--margen) 64px max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  background-image: var(--plano);
}
.volver {
  font-size: 0.82rem;
  color: var(--tinta-52);
  text-decoration: none;
  margin-bottom: 26px;
  align-self: start;
  transition: color 0.2s ease;
}
.volver:hover { color: var(--dorado); }

.ficha-portada .kicker { margin-bottom: 20px; }
.ficha-portada h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin-bottom: 14px; }
.ficha-ubicacion { color: var(--tinta-72); font-size: 1.05rem; margin-bottom: 32px; }

.ficha-cifras {
  display: flex;
  gap: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  margin-bottom: 32px;
}
.ficha-cifras span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-38);
  margin-bottom: 5px;
}
.ficha-cifras b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.ficha-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.ficha-portada-img { position: relative; overflow: hidden; background: var(--azul); min-height: 460px; }
.ficha-portada-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Ficha técnica */
.ficha-cuerpo { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.ficha-texto p { color: var(--tinta-72); }
.ficha-texto p + p { margin-top: 18px; }
.ficha-texto .parrafo-guia {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--azul);
  margin-bottom: 22px;
}

.ficha-datos { border-top: 1px solid var(--linea); }
.dato-fila {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linea-suave);
}
.dato-fila dt { font-size: 0.9rem; color: var(--tinta-52); }
.dato-fila dd { font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; text-align: right; }
.dato-fila.destacada { border-bottom: none; border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 20px; }
.dato-fila.destacada dt { color: var(--azul); font-weight: 500; }
.dato-fila.destacada dd { font-family: var(--display); font-size: 1.35rem; color: var(--dorado); }

/* Usos y entorno */
.usos-lista { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.oscuro .usos-lista .uso {
  border: 1px dashed var(--linea-clara);
  color: var(--claro-78);
  font-size: 0.85rem;
  padding: 8px 15px;
  margin: 0;
}

.entorno { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 48px; margin-top: 20px; }
.entorno h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-bottom: 8px; color: var(--blanco); }
.entorno h3::before { content: ""; display: block; width: 22px; height: 2px; background: var(--dorado); margin-bottom: 14px; }
.entorno p { font-size: 0.94rem; color: var(--claro-78); }

/* Tabla de fraccionamiento */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); }
.tabla-lotes { width: 100%; border-collapse: collapse; min-width: 460px; }
.tabla-lotes th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-52);
  padding: 16px 22px;
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}
.tabla-lotes td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
}
.tabla-lotes tbody tr:last-child td { border-bottom: none; }
.tabla-lotes tbody tr:hover { background: var(--hueso); }
.tabla-lotes td:first-child { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.tabla-lotes td:last-child { font-weight: 600; }
.nota { margin-top: 16px; font-size: 0.84rem; color: var(--tinta-38); max-width: 70ch; }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.foto {
  padding: 0; border: none; cursor: pointer; background: var(--hueso);
  overflow: hidden; aspect-ratio: 3 / 4; display: block;
}
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2,0.7,0.3,1); }
.foto:hover img { transform: scale(1.05); }

/* Cierre */
.cierre { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
.cierre .tarjeta-contacto h3 { font-family: var(--texto); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--dorado); margin-bottom: 10px; }
.cierre .tarjeta-contacto > p { font-family: var(--display); font-size: 1.3rem; color: var(--blanco); margin-bottom: 26px; }

/* Visor de fotos */
.visor {
  position: fixed; inset: 0; z-index: var(--z-visor);
  background: rgba(15, 23, 38, 0.985);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 70px;
}
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-cerrar, .visor-nav {
  position: absolute;
  background: none; border: 1px solid var(--linea-clara);
  color: var(--blanco); cursor: pointer;
  width: 46px; height: 46px;
  font-size: 1.5rem; line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.visor-cerrar:hover, .visor-nav:hover { background: var(--dorado); border-color: var(--dorado); color: var(--azul); }
.visor-cerrar { top: 22px; right: 22px; }
.visor-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.visor-next { right: 16px; top: 50%; transform: translateY(-50%); }
.visor-contador {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; letter-spacing: 0.16em; color: var(--claro-52);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .ficha-portada { grid-template-columns: 1fr; }
  .ficha-portada-texto { padding: 48px var(--margen); }
  .ficha-portada-img { min-height: 0; aspect-ratio: 4 / 3; }
  .ficha-cuerpo { grid-template-columns: 1fr; gap: 44px; }
  .entorno { grid-template-columns: 1fr; gap: 28px; }
  .cierre { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 780px) {
  .ficha-cifras { gap: 28px; flex-wrap: wrap; }
  .ficha-cifras b { font-size: 1.3rem; }
  .ficha-acciones .btn { flex: 1; text-align: center; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .visor { padding: 56px 14px; }
  .visor-prev { left: 8px; }
  .visor-next { right: 8px; }
  .dato-fila { flex-direction: column; gap: 3px; }
  .dato-fila dd { text-align: left; }
}

/* Tarjeta del portafolio: imagen y título enlazan a la ficha */
a.inmueble-img { display: flex; }
.titulo-enlace { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.titulo-enlace:hover { color: var(--dorado); }

/* Un solo inmueble en el portafolio: ficha destacada horizontal */
.inmuebles-uno { grid-template-columns: 1fr; }
.inmuebles-uno .inmueble { display: grid; grid-template-columns: 1.05fr 1fr; }
.inmuebles-uno .inmueble-img { aspect-ratio: auto; height: 100%; min-height: 420px; }
.inmuebles-uno .inmueble-cuerpo { padding: 44px 46px 46px; }
.inmuebles-uno .inmueble-cuerpo h3 { font-size: 1.85rem; }
.inmuebles-uno .inmueble-desc { font-size: 1rem; max-width: 52ch; }
.inmuebles-uno .inmueble-datos { gap: 56px; }
.inmuebles-uno .inmueble-datos dd { font-size: 1.2rem; }

@media (max-width: 860px) {
  .inmuebles-uno .inmueble { grid-template-columns: 1fr; }
  .inmuebles-uno .inmueble-img { min-height: 0; aspect-ratio: 4 / 3; }
  .inmuebles-uno .inmueble-cuerpo { padding: 28px 26px 30px; }
  .inmuebles-uno .inmueble-cuerpo h3 { font-size: 1.4rem; }
}

/* ---------- Referencias visuales de desarrollo ---------- */

.visuales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin: 12px 0 26px;
}
.visual { margin: 0; }
.visual-img {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linea-clara-suave);
  background: var(--blanco);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
/* Los planos se muestran completos: recortarlos ocultaría las medidas */
.visual-img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.visual-img:hover img { transform: scale(1.02); }

.visual-lupa {
  position: absolute; right: 0; bottom: 0;
  background: var(--azul); color: var(--blanco);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 13px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.visual-img:hover .visual-lupa,
.visual-img:focus-visible .visual-lupa { opacity: 1; transform: none; }

.visual figcaption { padding-top: 16px; }
/* La etiqueta va bajo la imagen, para no tapar el título del propio plano */
.visual-tipo {
  display: inline-block;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 7px;
}
.visual figcaption h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.08rem;
  color: var(--blanco); margin-bottom: 6px;
}
.visual figcaption p { font-size: 0.88rem; color: var(--claro-78); }

.aviso-visuales {
  font-size: 0.82rem;
  color: var(--claro-52);
  max-width: 78ch;
  padding: 16px 0 0;
  border-top: 1px solid var(--linea-clara-suave);
  margin-bottom: 56px;
}
.aviso-visuales b { color: var(--claro-78); font-weight: 500; }

/* El visor muestra los planos completos, sin recortar */
.visor img { background: var(--blanco); }
.visor-contador { max-width: 80vw; text-align: center; }

@media (max-width: 1024px) {
  .visuales { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .visuales { grid-template-columns: 1fr; gap: 26px; }
  .visual-img { aspect-ratio: 3 / 4; }
}

/* ---------- Planos esquemáticos dibujados en la marca ---------- */

.plano { display: block; width: 100%; height: auto; background: var(--blanco); }

.pl-lote  { fill: none; stroke: rgba(28,43,68,0.55); stroke-width: 1.4; }
.pl-vecino{ stroke: rgba(28,43,68,0.45); stroke-width: 1.4; stroke-dasharray: 6 5; fill: none; }
.pl-via   { fill: rgba(28,43,68,0.10); stroke: rgba(28,43,68,0.28); stroke-width: 1; }
.pl-eje   { stroke: var(--blanco); stroke-width: 1.6; stroke-dasharray: 10 9; }

.pl-bodega { fill: rgba(28,43,68,0.16); stroke: rgba(28,43,68,0.5); stroke-width: 0.9; }
.pl-calle  { fill: rgba(28,43,68,0.05); stroke: rgba(28,43,68,0.2); stroke-width: 0.8; }
.pl-bnum   { font-family: var(--texto); font-size: 9px; font-weight: 500; fill: rgba(28,43,68,0.75); }

.pl-nombre { font-family: var(--display); font-size: 21px; font-weight: 600; fill: var(--azul); }
.pl-nombre-lat { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--azul); }
.pl-area   { font-family: var(--texto); font-size: 12.5px; font-weight: 500; fill: rgba(28,43,68,0.66); letter-spacing: 0.02em; }

.pl-cota   { font-family: var(--texto); font-size: 11px; fill: rgba(28,43,68,0.55); letter-spacing: 0.03em; }
.pl-frente { font-family: var(--texto); font-size: 11.5px; font-weight: 500; fill: var(--dorado); letter-spacing: 0.14em; text-transform: uppercase; }
.pl-norte  { fill: var(--dorado); }

.pl-leyenda { font-family: var(--texto); font-size: 12px; fill: rgba(28,43,68,0.6); }
.pl-dato    { font-family: var(--display); font-size: 19px; font-weight: 600; fill: var(--azul); }
.pl-nota    { font-family: var(--texto); font-size: 10.5px; fill: rgba(28,43,68,0.42); }

/* El plano vive dentro de la misma tarjeta que las fotos */
.visual-img.es-plano { aspect-ratio: 3 / 4; padding: 0; }
.visual-img.es-plano .plano { height: 100%; object-fit: contain; }

/* Plano ampliado en el visor */
/* El plano se ajusta al alto disponible para que no se corte la leyenda */
.visor-plano {
  display: none;
  background: var(--blanco);
  padding: 20px;
  max-width: 94vw;
  max-height: 90vh;
}
.visor-plano .plano {
  width: auto;
  height: min(84vh, 900px);
  max-width: 88vw;
}
.visor.mostrando-plano img { display: none; }
.visor.mostrando-plano .visor-plano { display: block; }

/* Elementos propios del plano del Lote D */
.pl-lote-c      { fill: rgba(28,43,68,0.07); stroke: rgba(28,43,68,0.45); stroke-width: 1.3; }
.pl-lote-d      { fill: rgba(194,162,76,0.20); stroke: var(--dorado); stroke-width: 2; }
.pl-servidumbre { fill: url(#tramaServi); stroke: rgba(28,43,68,0.4); stroke-width: 1.1; }
.pl-division    { stroke: rgba(28,43,68,0.5); stroke-width: 1.3; stroke-dasharray: 7 5; }
.pl-autopista     { fill: none; stroke: rgba(28,43,68,0.16); stroke-width: 17; }
.pl-autopista-eje { fill: none; stroke: var(--blanco); stroke-width: 1.4; stroke-dasharray: 9 8; }
.pl-tension     { stroke: rgba(28,43,68,0.4); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pl-tension-txt { font-family: var(--texto); font-size: 12px; fill: rgba(28,43,68,0.55); letter-spacing: 0.08em; }
.pl-servi-txt   { font-family: var(--texto); font-size: 12.5px; font-weight: 500; fill: rgba(28,43,68,0.6); letter-spacing: 0.14em; text-transform: uppercase; }
.pl-vertice     { fill: var(--dorado); stroke: var(--blanco); stroke-width: 1.5; }
.pl-num         { font-family: var(--texto); font-size: 12px; font-weight: 600; fill: rgba(28,43,68,0.7); }
.pl-frente-txt  { font-family: var(--texto); font-size: 12.5px; font-weight: 500; fill: var(--dorado); letter-spacing: 0.14em; text-transform: uppercase; }

/* Portada de ficha sin fotografía todavía */
.ficha-portada-img.sin-imagen {
  background: var(--hueso);
  display: flex; align-items: center; justify-content: center;
  padding: 34px;
}
.ficha-portada-img.sin-imagen .plano { max-height: 100%; width: auto; max-width: 100%; }