/* STELLA web v2: diagramación común.
   Se carga al final para unificar cabeceras de sección y ritmo vertical.
   Sistema: filete superior a todo el ancho con tramo dorado (el mismo lenguaje de las
   pestañas de Residencias), y debajo, apilados: eyebrow, título y bajada.
   Nunca título de un lado y párrafo suelto del otro. */

:root{--cab-gap:clamp(36px,5vw,64px)}

/* ---------- Cabecera de sección */
.cab,.giro-cab,.res-cab,.ct-cab,.ct-resp-txt,.ct-con-aside{position:relative;border-top:1px solid var(--line);padding-top:24px}
.cab::before,.giro-cab::before,.res-cab::before,.ct-cab::before,.ct-resp-txt::before,.ct-con-aside::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--gold)}
.giro-cab,.ct-resp-txt{border-top-color:rgba(255,255,255,.16)}

.proyecto-grid,.giro-cab,.res-cab,.ct-cab{display:block;margin-bottom:var(--cab-gap)}
.res-cab > div,.ct-cab > div{display:contents}
.cab .eyebrow,.giro-cab .eyebrow,.res-cab .eyebrow,.ct-cab .eyebrow,.ct-resp-txt .eyebrow,.ct-con-aside .eyebrow{margin-bottom:clamp(22px,3vw,34px)}
.cab .titulo,.giro-cab .titulo,.res-cab .titulo,.ct-cab .titulo,.ct-resp-txt .titulo,.ct-con-aside .titulo{max-width:13.5em;margin:0 0 clamp(18px,2.2vw,28px);text-wrap:balance}
.cab .lead,.giro-cab .lead,.res-cab .lead,.ct-cab .lead,.ct-resp-txt .lead,.ct-con-aside .lead{max-width:54ch;padding:0;text-wrap:pretty}
.ct-cab .ct-dir{margin-top:18px}

/* Proyecto: la bajada y las cifras comparten la misma columna izquierda */
.proyecto .cifras{margin-top:0}

/* El giro: la cabecera respira sobre el lienzo, sin quedar pegada */
.giro-sec .giro-cab{margin-bottom:clamp(28px,3.5vw,44px)}

/* Respaldo: dos columnas con filetes alineados arriba (texto y logos) */
.ct-resp-logos{margin-top:0}
.ct-resp-logos li{padding-top:24px}

/* Contacto: la tarjeta arranca a la altura del filete de la columna izquierda */
@media (min-width:1000px){.ct-con-card{margin-top:0}}

/* Pie: ritmo y alineación */
.pie-respaldo .eyebrow{margin-bottom:16px}

/* Apertura: los enlaces con filete en fila, del mismo ancho */
.apertura-cta{gap:8px 40px;align-items:flex-end}
.apertura-cta .trazo{min-width:220px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.apertura-cta .trazo::after{opacity:.6}
@media (max-width:767px){.apertura-cta{flex-direction:column;align-items:stretch;gap:4px}.apertura-cta .trazo{min-width:0;width:100%}}

/* Navegación: el enlace de cita adopta el color de la barra */
.nav .trazo::after{opacity:.4}

@media (min-width:1100px){
  /* Ritmo: mismas separaciones verticales en toda la página */
  .seccion{padding:clamp(110px,10vw,150px) 0}
}

/* ===== 11 nov 2026: QA de UI en teléfono (auditoría 360/375/390 y horizontal 812x375) ===== */

/* 1. Formulario, rama «Para invertir»: el fieldset con 3 opciones ensanchaba la tarjeta y se cortaba a la derecha */
.ct-grupo{min-width:0}
.ct-con>*{min-width:0}
.ct-ops-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:399px){.ct-ops-3{grid-template-columns:1fr}}

/* Teléfono en horizontal (pantallas bajas) */
@media (min-width:768px) and (max-height:500px){
  /* 2. selector de pisos aplastado a 17 px: el panel pasa a tener scroll y el selector su alto natural */
  .ex-panel{overflow-y:auto;padding-top:76px;gap:14px}
  .ex-p-body{flex:none;overflow:visible}
  .ex-scrub,.ex[data-capa="corona"] .ex-scrub{flex:none;max-height:none;min-height:0}
  .ex-scrub-l{flex:none;overflow:visible}
  /* 3. portada: el título subía debajo de la barra y se montaba sobre el logo */
  .apertura{padding-top:calc(var(--nav-h) + 12px)}
  .apertura .titulo{font-size:30px;margin-bottom:10px}
  .apertura .lead{font-size:14px;line-height:1.45;margin-bottom:14px}
  .apertura-txt{padding-bottom:28px}
  /* Parque Celeste: el encabezado chocaba con los rótulos de los puntos (mismo criterio que en vertical) */
  .plaza-pin em{visibility:hidden}
  .plaza-pin.activa em{visibility:visible}
  .plaza-cab .plaza-nota{display:none}
  .plaza-titulo{font-size:26px}
  /* Oratorio: etiquetas encimadas */
  .ex-corona-et .ex-et{font-size:10.5px;padding:1px 6px 2px}
  /* planta de piso: la leyenda tapaba el rótulo (el panel ya dice «Planta ilustrativa») */
  .ex-p3-rotulo{display:none}
  /* el botón cerrar tapaba la zona del Sky Lounge */
  .ex-capa--corona .ex-zoom{padding-top:64px}
}
/* el botón cerrar tapaba la esquina de las fichas en pisos sin planta */
@media (min-width:768px){.ex-sinplanta{padding-top:76px}}

/* Marcadores de residencias que se encimaban en la planta (teléfonos chicos y horizontal): modo compacto sin «hab.» */
@media (max-width:389px),(min-width:768px) and (max-height:500px){
  .ex-pm-in{gap:4px;height:22px;padding:0 7px}
  .ex-pm b{font-size:11px}
  .ex-pm em{display:none}
}

/* Mensaje de carga/error del 360: se partía en una sola línea de 511 px cortada por los lados */
.p360-carga{white-space:normal;width:max-content;max-width:calc(100% - 40px);text-align:center;border-radius:16px;line-height:1.35}

/* Botón «Recorrido 360» de la maqueta: blanco sobre dorado (2.3:1) pasa a texto oscuro (~8:1) */
.res-3d-vistas .res-3d-ir360{color:#17191c}

/* ===== 11 nov 2026: QA de UI, detalles menores ===== */
/* Ficha del parque: Anterior/Siguiente en dos líneas en vez de cortar con «…» */
.plaza-nav b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
/* Miga de la unidad en horizontal: se omite «Conjunto» para que quepa el número */
@media (min-width:768px) and (max-width:1099px){.ex--n3 .ex-pasos li:first-child,.ex--n3 .ex-pasos li:nth-child(2)::before,.ex--plaza .ex-pasos li:first-child,.ex--plaza .ex-pasos li:nth-child(2)::before{display:none}}
/* Letra mínima de 11 px en teléfono */
@media (max-width:767px){
  .ex-corona-et .ex-et{font-size:11px;padding:2px 6px 3px}   /* Sky Lounge y Oratorio: ahora la planta va vertical y hay espacio */
  .ex-p3-ley-t{font-size:11px}
  .ex-p3-norte{font-size:11px}
  .ex-sc small{font-size:11px}
  .giro-nota{font-size:11px}
  .giro-corona b{font-size:11px}
  .ct-pq-pins .n{width:20px;height:20px;font-size:11px}
  .ex-pm em{font-size:11px}
}
/* Contraste */
.ex-sc[aria-current] small{color:#8a7234}
.ex-tab--cero{opacity:.6}
.plaza-cuenta{color:rgba(255,255,255,.62)}
.res-lb-ayuda{opacity:.75}
/* 360 en horizontal: la tira de ambientes y el aviso legal van en filas separadas (el último ambiente quedaba cortado) */
@media (max-height:500px){.p360 .res-3d-pie{flex-direction:column;gap:6px}}
/* Menú en horizontal: entran también «Administración» y «Agendar cita» */
@media (max-height:500px){.cajon-explorar{min-height:96px}.cajon-nav a{min-height:42px;font-size:22px}}

/* 12 nov (cliente): en el teléfono la elección de torre tiene que verse como botones, con su título visible */
@media (max-width:767px){
  .ex-h--cab{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin:2px 0 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .ex-tabs{border-top:0;gap:8px;flex-wrap:wrap;overflow:visible}
  .ex-tab{flex:1 1 calc(50% - 4px);min-height:46px;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.05);text-align:center;color:#fff;font-size:14px}
  .ex-tab::before{display:none}
  .ex-tab[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#15171a;font-weight:600}
}

/* 13 nov (cliente, escritorio): la planta ampliada cabe completa en la pantalla (el % de alto no resolvía dentro de la grilla) */
.res-lb-vista{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.res-lb-vista img{max-width:calc(100% - 2*var(--gut));max-height:calc(100% - 16px);width:auto;height:auto;justify-self:center;align-self:center}

/* 13 nov (cliente): botón flotante de WhatsApp de ventas; se oculta con cualquier vista a pantalla completa */
.wa-flota{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:26px;background:#25d366;color:#fff;font:600 15px/1 var(--sans);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .3s,opacity .3s}
.wa-flota svg{width:26px;height:26px;flex:none}
.wa-flota:hover{transform:translateY(-2px)}
.wa-flota:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.telon-on .wa-flota,html.overlay-on .wa-flota,html.res-bloqueo .wa-flota{opacity:0;pointer-events:none;visibility:hidden}
@media (max-width:767px){.wa-flota{height:54px;width:54px;padding:0;justify-content:center}.wa-flota span{display:none}}
.pie-contacto{display:grid;gap:10px;align-content:start}
.pie-contacto a{color:rgba(255,255,255,.85)}

/* 13 nov (cliente): en el teléfono, solo durante la escena «Vivir en lo alto», el título y el párrafo suben al cielo
   y los botones se quedan abajo. Los espaciadores (::before/::after) cambian de tamaño con transición. */
@media (max-width:767px) and (orientation:portrait){
  .apertura-txt{align-self:stretch;display:flex;flex-direction:column}
  .apertura-txt::before,.apertura-txt::after{content:'';flex:0 0 0;transition:flex-grow 1.1s var(--ease)}
  .apertura-txt::before{flex-grow:1}
  .apertura-txt::after{order:2}
  .apertura-cta{order:3}
  .apertura.texto-arriba .apertura-txt::before{flex-grow:0}
  .apertura.texto-arriba .apertura-txt::after{flex-grow:1}
  /* velo: el de siempre pasa a ::before; en «Vivir en lo alto» se cambia por uno liviano (::after) que solo oscurece
     detrás del texto de arriba y de los botones de abajo, y deja la torre a la vista */
  .apertura-velo{background:none}
  .apertura-velo::before,.apertura-velo::after{content:'';position:absolute;inset:0;transition:opacity 1.1s var(--ease)}
  .apertura-velo::before{background:linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.28) 16%,rgba(10,12,15,.42) 34%,rgba(10,12,15,.74) 58%,rgba(10,12,15,.9) 100%)}
  .apertura-velo::after{background:linear-gradient(180deg,rgba(10,12,15,.62) 0%,rgba(10,12,15,.42) 30%,rgba(10,12,15,0) 46%,rgba(10,12,15,0) 70%,rgba(10,12,15,.55) 86%,rgba(10,12,15,.78) 100%);opacity:0}
  .apertura.texto-arriba .apertura-velo::before{opacity:0}
  .apertura.texto-arriba .apertura-velo::after{opacity:1}
  /* la barra de escenas termina antes del botón de WhatsApp */
  .apertura-escenas{right:calc(var(--gut) + 66px)}
}
@media (prefers-reduced-motion:reduce){.apertura-txt::before,.apertura-txt::after,.apertura-velo::after{transition:none}}