/* TR33 · Amenidades & Bienestar (plantilla "amenities" de 619). Solo ajustes de esta página. */

/* ---------- rótulos sobre los títulos ---------------------------------------
   En las intros centradas el rótulo queda a 20 px del H2; en las columnas, a 16 px del título.
   Números y rótulos en el verde de texto (F03) con el tracking de rótulo (F02). */
.page-amenidades .am-eyebrow,
.page-amenidades .am-num { color: var(--c-accent-text); letter-spacing: var(--ls-eyebrow); word-spacing: normal; }
.page-amenidades .am-eyebrow { margin-bottom: 0; }
.page-amenidades .col > .am-num { margin-bottom: -4px; }

/* intros que van dentro de un capítulo, después de otro bloque: 150 px de aire, como entre bloques de 619 */
.page-amenidades .am-intro--inner { --row-pt: 110px; }

/* ---------- las cinco amenidades ----------
   La descripción real de cada una es de una sola frase: va en el tamaño de los titulares de tarjeta (24 px). */
.page-amenidades .am-desc {
  font-size: 1.25rem; font-weight: var(--fw-display); line-height: 1.4;
  letter-spacing: var(--ls-fix-text); color: var(--c-ink);
}
@media (min-width: 992px) { .page-amenidades .am-desc { font-size: 1.5rem; } }

/* 01 + 02 · par de fotos verticales (635 × 793 a 1440, 90 px entre ambas) con número, título y frase debajo:
   el pie va a 40 px de la foto, como el pie de la foto ancha de 619 */
.page-amenidades .am-pair__text > * { margin: 0; }
.page-amenidades .am-pair__text > .am-num { margin-bottom: 18px; }
.page-amenidades .am-pair__t {
  margin-bottom: 14px !important;
  font-size: 1.3125rem; font-weight: var(--fw-text); line-height: 1.3;
  text-transform: uppercase; letter-spacing: var(--ls-caps); word-spacing: normal;
  color: var(--c-accent-text);
}
.page-amenidades .am-pair .am-desc { max-width: 30ch; }
@media (min-width: 992px) { .page-amenidades .am-pair .am-desc { font-size: 1.375rem; } }

/* foto ancha (1360 px a 1440) con el texto 40 px debajo, como el pie de foto de 619 */
.page-amenidades .am-wide__text { max-width: 760px; }
.page-amenidades .am-wide__text > .am-num { margin: 0 0 16px; }
.page-amenidades .am-wide__text > h2 { margin: 0 0 20px; }
.page-amenidades .am-wide__text > .am-desc { margin: 0; }

/* ---------- 02 · gimnasio: recorte 4:5 que deja fuera los rótulos impresos en el render
   (pilar a x 10–17 %, panel a x 72–78 %, tapete a y 88–96 %). Se ve x 20–69 %, y 5.5–87 %. */
.page-amenidades .am-gym { overflow: hidden; aspect-ratio: var(--ar); }
.page-amenidades .am-gym img {
  position: absolute; top: -6.75%; left: -40.85%;
  width: 204.25%; max-width: none; height: auto; aspect-ratio: 4 / 3; /* gym.jpg es 2400×1800: con proporción fija la imagen tiene caja aunque aún no cargue */
}

/* ---------- Agua · Luz · Aire: tres columnas, como la retícula de tarjetas de 619 ----------
   Foto 4:5, rótulo, título, descripción, beneficio y botón. Con subgrid las seis filas se alinean entre columnas
   (los botones quedan a la misma altura aunque los párrafos midan distinto). */
.page-amenidades .am-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 60px; align-items: start;
}
.page-amenidades .am-trio__item { display: flex; flex-direction: column; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .page-amenidades .am-trio__item { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}
.page-amenidades .am-trio__item > * { margin: 0; }
.page-amenidades .am-trio__item > .photo { margin-bottom: 40px; }
.page-amenidades .am-trio__item > .am-num { margin-bottom: 16px; }
.page-amenidades .am-trio__item > h2 { margin-bottom: 20px; }
.page-amenidades .am-benefit {
  margin: 24px 0 0;
  font-size: 1.375rem; font-weight: var(--fw-display); line-height: 1.35;
  letter-spacing: var(--ls-fix-text); color: var(--c-accent);
}
@media (min-width: 992px) { .page-amenidades .am-benefit { font-size: 1.5rem; } }
.page-amenidades .am-trio__more { margin-top: 32px !important; align-self: start; }

/* ---------- panel «Cómo funciona» (arena, tinta): número en sans, término en versalitas finas ---------- */
.am-steps { counter-reset: none; }
.am-steps li { position: relative; padding-left: 44px; }
.am-steps__n {
  position: absolute; left: 0; top: .35em;
  font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: .75rem; line-height: 1.5;
  letter-spacing: var(--ls-fix-caption); color: var(--c-ink);
}
.am-term { font-size: .82em; text-transform: uppercase; letter-spacing: var(--ls-caps); word-spacing: normal; }
.am-panel__link { margin-top: 2.5rem; }

/* frase de cierre de los sistemas */
.page-amenidades .am-statement { --row-pt: 110px; }

/* ---------- La ciencia y los pasos de ROH®: tres columnas con cifra grande ---------- */
.page-amenidades .am-figs,
.page-amenidades .am-roh__steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 60px; row-gap: 48px;
  padding: 0; list-style: none; text-align: center;
}
.page-amenidades .am-figs li > p:last-child,
.page-amenidades .am-roh__steps li > p:last-child { max-width: 360px; margin: 0 auto; }
.page-amenidades .am-figs__v {
  margin: 0 0 20px;
  font-size: 2.5rem; font-weight: var(--fw-display); line-height: 1;
  letter-spacing: var(--ls-fix-text); color: var(--c-accent);
}
.page-amenidades .am-figs__note,
.page-amenidades .am-roh__close { align-self: center; max-width: 750px; text-align: center; }
.page-amenidades .am-figs__note { margin-top: 40px; }
.page-amenidades .am-roh__steps h3 { margin: 0 0 12px; font-size: 1.5rem; }
.page-amenidades .am-roh__close { margin-top: 40px; }
/* invitación tras el programa: enlace de texto (F09), centrado bajo el cierre */
.page-amenidades .am-roh__cta { align-self: center; margin-top: 8px; font-size: 1.125rem; line-height: 1.5; text-align: center; }
@media (min-width: 768px) { .page-amenidades .am-figs__v { font-size: 3rem; } }
@media (min-width: 992px) { .page-amenidades .am-figs__v { font-size: 3.75rem; } }

/* cita centrada (en acento: la arena no se usa como color de texto) */
.page-amenidades .am-quote { --row-pt: 110px; }

/* ---------- Retícula de equipamiento: 4 columnas de 323.5 px con canal de 24 px a 1440.
   Margen lateral de 17 px (no 20): en 619 la retícula sobresale 3 px del módulo y va de x=37 a x=1403. */
.page-amenidades .am-s11 { --row-pt: 20px; }
.page-amenidades .am-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; align-items: start;
  margin: 20px 17px;
}
.page-amenidades .am-card { margin: 20px 0; }
.page-amenidades .am-card img { display: block; width: 100%; height: auto; aspect-ratio: 714 / 480; object-fit: cover; margin: 0 0 40px; }
.page-amenidades .am-card h3 {
  margin: 0 0 8px; font-size: 1.125rem; line-height: 1.3; font-weight: var(--fw-text);
  text-transform: uppercase; letter-spacing: var(--ls-caps); word-spacing: normal; color: var(--c-ink);
}
.page-amenidades .am-card p { margin: 0; font-size: .9375rem; line-height: 1.75; color: var(--c-ink); }
/* aviso de imágenes generadas: nota al pie (F19) alineada con el borde izquierdo de la retícula */
.page-amenidades .am-cards__note { margin: 4px 17px 20px; }
@media (max-width: 767px) { .page-amenidades .am-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .page-amenidades .am-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Beneficios para residentes ---------- */
.page-amenidades .am-benefits .rich h3 { margin: 28px 0 8px; }

/* ---------- Comunidad → carrusel (619: 55 px entre ambos; el carrusel cierra con 130 px) ---------- */
.page-amenidades .am-community { --row-pb: 55px; }
.page-amenidades .chapter > .am-carousel { --row-pt: 55px; --row-pb: 130px; }
.page-amenidades .am-community .rich > .am-desc { margin-bottom: 24px; }
@media (max-width: 767px) {
  .page-amenidades .chapter > .am-carousel { --row-pt: 20px; --row-pb: 80px; }
}

/* ---------- Tableta: las tres columnas se estrechan ---------- */
@media (max-width: 991px) {
  .page-amenidades .am-figs, .page-amenidades .am-roh__steps, .page-amenidades .am-trio { column-gap: 30px; }
  .page-amenidades .am-intro--inner, .page-amenidades .am-statement, .page-amenidades .am-quote { --row-pt: 80px; }
}

/* ---------- Bajo 768: texto de lectura a 16 px; los tres sistemas se apilan con foto 4:3 ---------- */
@media (max-width: 767px) {
  .page-amenidades .am-figs__note,
  .page-amenidades .am-card p { font-size: 1rem; }
  .am-term { font-size: 1rem; }
  .page-amenidades .am-trio { grid-template-columns: minmax(0, 1fr); row-gap: 72px; }
  .page-amenidades .am-trio__item { display: flex; }
  .page-amenidades .am-trio .photo { --ar: 4 / 3; }
  .page-amenidades .am-trio__item > .photo { margin-bottom: 28px; }
  .page-amenidades .am-trio__item > h2 { margin-bottom: 12px; }
  .page-amenidades .am-trio__more { margin-top: 28px !important; }
}

/* ---------- Móvil (≤600) ---------- */
@media (max-width: 600px) {
  .page-amenidades .am-figs, .page-amenidades .am-roh__steps { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .page-amenidades .am-intro--inner, .page-amenidades .am-statement, .page-amenidades .am-quote { --row-pt: 60px; }
  .page-amenidades .am-s11 { --row-pt: 0px; }
  /* título bajo su rótulo: sin margen inferior propio al apilarse */
  .page-amenidades .col--text > h2 { margin-bottom: 0; }
  /* par: dos columnas de 175 px; pie compacto pero a 16 px */
  .page-amenidades .am-pair__text { margin-top: 4px; }
  .page-amenidades .am-pair__text > .am-num { margin-bottom: 12px; font-size: .8125rem; }
  .page-amenidades .am-pair__t { margin-bottom: 8px !important; font-size: .9375rem; line-height: 1.35; }
  .page-amenidades .am-pair .am-desc { font-size: 1rem; line-height: 1.5; font-weight: var(--fw-text); }
}

/* 15-oct (Raúl: «nadie lee bloques largos»): los bloques de texto pasan a puntos con ícono; el detalle técnico de
   Agua, Luz y Aire vive en su panel «Cómo funciona» */
.page-amenidades .am-points { margin: 6px 0 30px; gap: 20px; }
.page-amenidades .am-points .icon-point__text { font-size: 1.0625rem; line-height: 1.55; }
.page-amenidades .rich > .am-points:last-child { margin-bottom: 0; }
.page-amenidades .am-note { margin: 0 0 28px; }
.panel .panel-lead { margin: 0 0 28px; font-size: var(--fs-lead); line-height: 1.6; color: var(--c-ink); }