/*
 * Otochi · sitio · estilos propios de /residente (App de residente).
 * Se carga solo en residente.html, después de estilos.css. No define colores, tipografías, radios
 * ni espacios nuevos: usa los tokens del DS (assets/ds/) y los del sitio (estilos.css, sección 2).
 *
 *  El índice de la página es la pieza compartida .indice-pagina de estilos.css.
 *  Ritmo del detalle: la escena de grupo y la nota del cierre.
 */

/* Ritmo del detalle ------------------------------------------------------------------------ */
.residente__modulos { min-width: 0; }

/* En una sola columna (tableta), las escenas verticales o cuadradas no ocupan todo el ancho: a
   768 px una foto 4:5 mediría 900 px de alto. Se quedan en el ancho que tienen en el escritorio. */
@media (min-width: 640px) and (max-width: 959px) {
  .residente .modulo__visual .escena--4x5,
  .residente .modulo__visual .escena--1x1 { width: min(100%, 520px); }
}

/* Escena que abre un grupo (la alberca en «Vida en comunidad») */
.grupo__escena { margin-top: var(--space-6); }
.grupo__escena + .modulo { border-top: 0; }

/* Nota del cierre: «cada condominio activa solo los módulos que necesita» */
.residente-nota { margin-block: var(--space-4) var(--space-12); }
.residente-nota__texto { display: grid; gap: var(--space-2); justify-items: start; }
@media (min-width: 768px) { .residente-nota { margin-bottom: var(--space-16); } }

/* «Para entrar no hace falta contraseña»: la nota entre el índice y los módulos (/residente#entrar) */
.residente-entrar { max-width: 760px; margin-top: var(--space-6); } /* la medida de .seccion__cabeza */