/* Bloque B: ubicación, residencias, raíces, amenidades y pagos.
   Estado inicial siempre visible: el JS aplica los estados ocultos solo si corre. */

/* Texto solo para lectores de pantalla */
.bb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Etiquetas partidas en letras (máscara por palabra) */
.etiqueta .lt-pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.etiqueta .lt { display: inline-block; will-change: transform; }

/* Enlace con flecha que se alarga al pasar el cursor */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  margin-top: 40px; padding: 10px 0;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: inherit;
}
.enlace-flecha .flecha { --l: 48px; --c: 0.42; position: relative; display: inline-block; width: var(--l); height: 10px; flex: none; }
.enlace-flecha .flecha::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(var(--c)); transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.enlace-flecha .flecha::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translate(calc(var(--l) * var(--c) - 7px), -50%) rotate(45deg);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.enlace-flecha:hover .flecha::before, .enlace-flecha:focus-visible .flecha::before { transform: scaleX(1); }
.enlace-flecha:hover .flecha::after, .enlace-flecha:focus-visible .flecha::after { transform: translate(calc(var(--l) - 7px), -50%) rotate(45deg); }
.enlace-flecha:focus-visible, .opciones .item:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* ---------- Ubicación ---------- */
.ubicacion .ub-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 0 var(--gutter) 34px; }
.ubicacion .ub-cabeza .etiqueta { color: var(--terracota); }
.ubicacion .ub-cabeza .enlace-flecha { margin-top: 0; color: var(--olivo); }
.ubicacion .franja { isolation: isolate; }
.ubicacion .franja .media { position: absolute; inset: 0; overflow: hidden; }
.ubicacion .franja .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ubicacion .franja h2 { z-index: 1; will-change: transform; }
.ubicacion .datos > div { border-top: 1px solid rgba(31, 28, 24, 0.16); padding-top: 18px; }

/* ---------- Residencias y amenidades ---------- */
.opciones .lista { will-change: clip-path; }
.opciones .opcion { position: relative; }
.opciones .item {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font-family: var(--serif); text-align: left; cursor: pointer; width: auto;
}
.opciones .item .nombre { display: inline; }
.opciones .item .chev { display: none; }
.opciones .panel { display: none; }
.opciones .visor .marco { position: absolute; inset: 0; will-change: transform; }
.opciones .lista .enlace-flecha { color: var(--terracota); }
.opciones.oscuro .lista .enlace-flecha { color: var(--arena); }

/* ---------- Raíces ---------- */
.raices { position: relative; overflow: hidden; overflow: clip; }
.raices h2 { position: relative; z-index: 1; white-space: nowrap; }
.raices h2 .lt { display: inline-block; will-change: transform; }
.raices p { position: relative; z-index: 3; }
.raices p .pb { display: inline-block; will-change: transform, opacity, filter; }
.raiz-foto {
  position: absolute; z-index: 2; left: calc(var(--gutter) + 2vw); top: 36%;
  width: clamp(220px, 24vw, 390px); aspect-ratio: 4 / 5; overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'%3E%3Cpath d='M112 4c38 6 70 30 80 66 11 39-6 64-4 100 2 34-20 68-58 76-36 8-66-6-92-30C10 190 2 160 6 126 10 92-6 70 10 42 26 12 70-3 112 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'%3E%3Cpath d='M112 4c38 6 70 30 80 66 11 39-6 64-4 100 2 34-20 68-58 76-36 8-66-6-92-30C10 190 2 160 6 126 10 92-6 70 10 42 26 12 70-3 112 4Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: transform;
}
.raiz-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }

/* ---------- Plan de pagos ---------- */
.pagos { align-items: center; }
.pagos .pg-foto { position: relative; height: 78vh; min-height: 420px; overflow: hidden; border-radius: 18px; will-change: clip-path; }
.pagos .pg-foto .marco { position: absolute; inset: 0; will-change: transform; }
.pagos .pg-foto img { width: 100%; height: 100%; object-fit: cover; }
.pagos .pg-panel { display: flex; flex-direction: column; will-change: clip-path; }
.pagos .pg-panel .etiqueta { color: var(--terracota); margin-bottom: 22px; }
.pagos .pg-panel h2 { margin-bottom: 48px; }
.pagos .pg-panel .enlace-flecha { color: var(--olivo); }
.pagos .paso p { will-change: transform, opacity; }

/* ---------- Móvil: acordeones y ajustes ---------- */
@media (max-width: 860px) {
  .ubicacion .datos { gap: 28px 20px; }

  .opciones .visor { display: none; }
  .opciones .lista { padding: 12vh var(--gutter) 10vh; }
  .opciones .lista h2 { margin-bottom: 28px; }
  .opciones .opcion { border-top: 1px solid rgba(31, 28, 24, 0.16); }
  .opciones.oscuro .opcion { border-top-color: rgba(246, 241, 231, 0.18); }
  .opciones .item {
    width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
    padding: 16px 0; font-size: clamp(28px, 8vw, 38px); line-height: 1.1;
  }
  .opciones .item.activo { transform: none; }
  .opciones .item small { grid-column: 1; grid-row: 2; opacity: 0.7; margin-top: 6px; }
  .opciones .item .chev { display: block; grid-column: 2; grid-row: 1 / span 2; width: 12px; height: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.4s; margin: -6px 6px 0 0; }
  .opciones .item[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 6px; }
  .opciones .item[aria-expanded="true"] { color: var(--carbon); }
  .opciones.oscuro .item[aria-expanded="true"] { color: var(--tinta); }
  .opciones .panel.abierto, .opciones .item[aria-expanded="true"] + .panel { display: block; overflow: hidden; }
  .opciones .panel-in { padding-bottom: 20px; }
  .opciones .panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

  .raices { min-height: auto; padding: 16vh var(--gutter) 14vh; }
  .raiz-foto { position: relative; left: auto; top: auto; width: 68%; margin: -4vh 0 6vh 4%; }

  .pagos { padding: 12vh var(--gutter); gap: 8vh; }
  .pagos .pg-foto { height: 52vh; min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .enlace-flecha .flecha::before, .enlace-flecha .flecha::after, .opciones .item .chev { transition: none; }
}