/* Residencias: ajustes propios sobre la base (equivalente a /residences/ de 619). */

/* Bloque blanco: 130 px arriba en la primera fila y 130 px abajo en la última (el video de la terraza) */
.page-residencias .res-row--first { --row-pt: 130px; }
.page-residencias .res-row--film { --row-pb: 130px; }

/* Una sola familia de renders: los mod-* se templan apenas hacia el tono cálido de los renders ra y rg (solo CSS) */
.page-residencias img.grade-warm,
.page-residencias video.grade-warm { filter: saturate(.94) sepia(.06) brightness(1.02); }

/* Terraza del Modelo B: leyenda en tinta sobre el piso claro desde 768, sin el degradado (la regla de la base para
   photo--caption-dark-md pierde por especificidad contra la del degradado; aquí se asegura) */
@media (min-width: 768px) {
  .page-residencias .res-row--terrace .photo--over.photo--caption-dark-md::after { content: none; }
  /* a la izquierda caen la pata de madera de la butaca y el borde del barandal: la tinta se lee sobre la piedra clara */
  .page-residencias .res-row--terrace .caption { text-align: right; }
}

/* Móvil: bajo la leyenda blanca de la recámara (manta de patrón) y de la terraza (pata de madera) el degradado
   mínimo de la base no alcanza 3:1 en el 10 % peor; aquí se refuerza apenas */
@media (max-width: 575.98px) {
  .page-residencias .res-row--bedroom .photo--over::after,
  .page-residencias .res-row--terrace .photo--over::after { background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); }
}

/* Video de la terraza: el original mide 1280 px; con margen y nunca a más de 1360 px para que no se vea blando */
.page-residencias .res-row--film .row__inner { max-width: 1400px; }

/* Cierre: 48 px del título al párrafo (28 px con las columnas apiladas), como en 619 */
.page-residencias .res-closing .col--text > h2 { margin-bottom: 28px; }
/* Características + Registrar interés, lado a lado (se apilan solos si no caben) */
.page-residencias .res-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.page-residencias .res-actions .btn { margin: 0; }

/* 15-oct (Raúl: «nadie lee bloques largos»): la frase grande se recorta y el sistema de bienestar se lee en tres
   puntos con ícono; el cierre pasa de dos párrafos a un punto por modelo; el panel abre cada modelo con sus datos clave */
/* los puntos son un módulo más de la columna: recuperan los 20 px de módulo (la regla .icon-points de la base los anula) */
.page-residencias .col--text > .icon-points { margin: var(--module-gap); }
.page-residencias .res-system { gap: 16px; }
.page-residencias .res-system > .icon-point { align-items: center; }
.page-residencias .res-system > .icon-point > .icon { grid-row: auto; }
.page-residencias .res-system .icon-point__text { margin: 0; font-size: 1.25rem; line-height: 1.35; }
@media (min-width: 992px) {
  .page-residencias .res-row--statement .statement { margin-bottom: 36px; }
  .page-residencias .res-system { --ip-icon: 44px; gap: 20px; }
  .page-residencias .res-system .icon-point__text { font-size: 1.5rem; }
}
.page-residencias .res-models { gap: 26px; }
.page-residencias .res-models .icon-point__text { max-width: 26em; }
/* cierre: el bloque «Siguiente» ya trae su propio aire; 120 px abajo en vez de 180 */
@media (min-width: 992px) { .page-residencias .res-closing { --row-pb: 120px; } }

/* Panel: datos clave de cada modelo en una fila con ícono (sobre la arena, ícono en acento oscuro) */
#panel-residencias { --icon-color: var(--c-accent-dark); }
#panel-residencias .panel-specs {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 36px;
  margin: 0 0 2.25rem;
}
#panel-residencias .panel-specs > li { font-size: 1rem; line-height: 1.4; color: var(--c-ink); }
#panel-residencias .panel-specs .icon-inline > .icon { width: 26px; height: 26px; }
@media (min-width: 768px) { #panel-residencias .panel-specs > li { font-size: 1.3125rem; } }
/* teléfono: los tres datos no caben en una fila; uno por línea, como la lista que sigue */
@media (max-width: 575.98px) { #panel-residencias .panel-specs { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* Panel: el título oculto nombra el diálogo; el primer grupo visible no lleva margen superior */
#panel-residencias .sr-only + h2 { margin-top: 0; }
/* Cierre del panel: botón de registro y enlace a la galería de residencias */
#panel-residencias .panel-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin: 60px 0 0; }
#panel-residencias .panel-cta .btn { color: var(--c-ink); border-color: var(--c-ink); text-decoration: none; }
#panel-residencias .panel-cta a:not(.btn) {
  font-size: 1rem; line-height: 1.5; color: var(--c-ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-underline-offset .4s var(--ease-fine);
}
#panel-residencias .panel-cta a:not(.btn):hover,
#panel-residencias .panel-cta a:not(.btn):focus-visible { text-underline-offset: 3px; }
/* sobre la arena el relleno es tinta (el verde del acento apenas se separa del fondo) */
@media (hover: hover) {
  #panel-residencias .panel-cta .btn:hover { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
}
@media (hover: none) {
  #panel-residencias .panel-cta .btn:active { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
}

@media (max-width: 768px) {
  .page-residencias .res-row--first { --row-pt: 60px; }
}
@media (max-width: 600px) {
  .page-residencias .res-row--first { --row-pb: 0px; }
  .page-residencias .res-row--statement,
  .page-residencias .res-row--bedroom { --row-pt: 40px; --row-pb: 0px; }
  .page-residencias .res-row--terrace { --row-pt: 0px; --row-pb: 0px; }
  .page-residencias .res-row--pair { --row-pt: 0px; --row-pb: 0px; }
  .page-residencias .res-row--film { --row-pt: 0px; --row-pb: 40px; }
  .page-residencias .res-closing .cols--text-image > .col--media > .photo { margin-bottom: 20px; }
  .page-residencias .res-closing .col--text > h2 { margin-bottom: 8px; }
}

/* H1 en una sola línea desde 1200 (mide 1054 px a 60 px; el bloque de texto es de 972) */
@media (min-width: 1200px) {
  .page-residencias .hero__text h1 { margin-left: -60px; margin-right: -60px; white-space: nowrap; }
}

/* 15-oct: el cierre tiene poco texto junto a una foto alta: la columna de texto va centrada en vertical para que el
   aire quede repartido arriba y abajo, no como un hueco al pie */
@media (min-width: 768px) { .page-residencias .res-closing .cols { align-items: center; } }