/*
 * Otochi · sitio (https://otochi.com.mx)
 *
 * Se construye ENCIMA del Design System oficial de Otochi. Sus tokens están, tal cual, en
 * assets/ds/colors.css, typography.css y spacing.css, y se cargan antes que este archivo.
 * Aquí no se redefine ninguno: solo se usan con var(). Lo que el DS no trae y el sitio necesita
 * está abajo, en "Tokens del sitio", con su origen anotado. COMPONENTES.md explica cómo se usa
 * cada componente; LEEME.md, cómo se actualizan los tokens si cambia el DS.
 *
 * Reglas del DS que manda este archivo (OTOCHI_DESIGN.md):
 *  - índigo de producto, neutros grises y tarjetas blancas; la tarjeta hero es índigo;
 *  - los colores de estado solo comunican estado real (badges, KPI, alertas), nunca decoran;
 *  - radios de producto: botones 8–10 px, tarjetas 12–16 px; la píldora solo en badges y avatares;
 *  - cifras grandes en negrita y labels pequeños y apagados;
 *  - íconos de línea de 2 px (assets/iconos.svg);
 *  - denso y funcional, sin portadas serenas ni aire vacío;
 *  - nada del verde #0E4F3C ni del oro #B8912B de Quezlar.
 *
 * La CSP del sitio (_headers) no permite estilos en línea: nada de atributos style="".
 * Todo lo que varía (encuadre de una foto, proporción, posición de una tarjeta) va con una clase.
 *
 * Índice
 *   1. Fuente · 2. Tokens del sitio · 3. Base · 4. Utilidades
 *   5. Componentes del DS (botón, tarjeta, chip, badge, avatar, KPI, rótulo)
 *   6. Encabezado y navegación global · 7. Secciones y rejillas
 *   8. Héroe de la portada (puertas y perfiles) · 9. Héroe de subpágina
 *   10. Pantallas (capturas) y vitrinas · 11. Escenas (foto + tarjeta de la app) y tarjetas de la app
 *   12. Bloque de módulo · 13. Tira de capturas y pestañas
 *   14. Audiencias · 15. Pasos y estado de cuenta en vivo · 16. Familias y listas de módulos
 *   17. Catálogo (fichas, índice pegajoso, navegación por familias) · 18. Nota
 *   19. Preguntas frecuentes · 20. Compositor de contacto · 21. Otras interfaces y banda final
 *   22. Pie · 23. 404 · 24. Movimiento reducido
 *   25. Las trabas de siempre y cambio sin pérdidas (portada)
 */

/* 1. Inter, autoalojada (licencia OFL en assets/fuentes/Inter-LICENSE.txt) ------------------- */
/* Reemplaza el @import de Google Fonts de assets/ds/fonts.css (no se carga): misma familia, sin terceros. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fuentes/InterVariable.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens del sitio --------------------------------------------------------------------------
 * Modo claro. Cada valor sale del DS; los que no están en el DS se derivan y se anotan:
 *  [kit] = valor de otochi-brand.css (kit de marca de Otochi), derivado del DS para cumplir AA.
 *  [der] = derivado aquí de un token del DS.
 */
:root {
  color-scheme: light;

  /* Superficies y texto */
  --fondo: var(--surface-app);              /* #FAFAFA */
  --fondo-alterno: var(--surface);          /* #FFFFFF: bandas alternas */
  --tarjeta: var(--surface-card);           /* #FFFFFF */
  --texto: var(--text-primary);             /* #030213 */
  --texto-2: #6A6A7B;                       /* [der] el #717182 del kit, un poco más oscuro: 4.78:1 sobre --relleno-neutro (#F3F3F5) y 5.1:1 sobre #FAFAFA. El --muted del DS (#A3A3A3) da 2.5:1 como texto */
  --decoracion: var(--muted);               /* #A3A3A3: solo separadores e íconos inactivos, nunca texto */
  --borde: var(--border-card);              /* #E9EBEF */
  --relleno-neutro: #F3F3F5;                /* [kit] muted/fondo de campos */

  /* Índigo de producto */
  --accion: var(--primary);                 /* #4734DC: botón primario (blanco encima 7.5:1) */
  --accion-hover: var(--primary-bright);    /* #635BFF (blanco encima 4.7:1; --primary-soft da 4.47:1) */
  --sobre-accion: var(--text-on-primary);   /* #FFFFFF */
  --enlace: var(--link);                    /* #4734DC (7.2:1) */
  --chip: var(--primary-tint);              /* #EEF2FF */
  --chip-texto: var(--primary);             /* #4734DC sobre #EEF2FF: 6.7:1 */
  --heroe: var(--surface-hero);             /* #4734DC: tarjeta destacada en los dos temas */
  --sobre-heroe-2: rgba(255, 255, 255, 0.86); /* [der] blanco al 86 % sobre #4734DC: 6.2:1 */
  --foco: var(--primary);

  /* Badges y chips de estado: tinte del DS y texto oscuro del mismo tono [kit]. Con el hex de
     estado como texto, el DS daría 2.0 a 3.3:1 sobre su tinte; estos dan 4.5:1 o más. */
  --ok-tinte: var(--success-tint);   --ok-texto: #007E54;
  --aviso-tinte: var(--warning-tint); --aviso-texto: #9C6002;
  --error-tinte: var(--danger-tint); --error-texto: #D70020;
  --info-tinte: var(--info-tint);    --info-texto: #0474A9;

  /* Vitrinas: el fondo donde se montan las capturas de cada interfaz [der] */
  --vitrina-residente: var(--primary-tint);     /* #EEF2FF */
  --vitrina-administracion: var(--relleno-neutro);
  --vitrina-caseta: var(--surface-dark);        /* #16161C: la caseta siempre es oscura */
  --borde-sobre-oscuro: rgba(245, 245, 247, 0.14); /* [der] --on-dark al 14 % */

  /* Encabezado translúcido [der: --background al 88 %] */
  --encabezado: rgba(250, 250, 250, 0.88);
  --sombra-tarjeta: var(--shadow-sm);
  --sombra-pantalla: var(--shadow-lg);
  --sombra-flotante: var(--shadow-lg);

  /* Escala de títulos del sitio [der]. El DS es de interfaz (título de pantalla 28–34 px); el
     sitio necesita un título de portada. Se queda dentro de la escala de cifras del DS. */
  --fs-portada: clamp(34px, 2.6vw + 22px, 48px); /* --fs-kpi (34) hasta 1.2 × --fs-kpi-lg (40) */
  --fs-titulo: clamp(28px, 1vw + 22px, 34px);    /* rango del "Título de pantalla" del DS */
  --fs-entrada: var(--fs-section-title);         /* 19 px para el párrafo de entrada */
  --fs-parrafo: 16px;                            /* [der] --space-4; cuerpo del DS (15) + 1 para lectura larga */

  /* Márgenes laterales: 16 px en teléfono (--space-4) */
  --margen: var(--space-4);
  --encabezado-alto: var(--space-16);            /* 64 px, como --tabbar-h */
}

/* Modo oscuro del DS: superficie casi negra #16161C y texto claro (OTOCHI_DESIGN.md §2 y §6).
   Se repite el bloque: una vez para la preferencia del sistema y otra para el selector manual. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: var(--surface-dark);             /* #16161C */
    --fondo-alterno: var(--foreground-2);     /* #111116 */
    --tarjeta: var(--surface-dark-2);         /* #1F1F27 */
    --texto: var(--on-dark);                  /* #F5F5F7 (15:1 sobre #1F1F27) */
    --texto-2: #90909A;                       /* [der] --on-dark-muted (#8A8A94) un poco más claro: 4.74:1 sobre --relleno-neutro (#26262F) y 5.2:1 sobre #1F1F27 */
    --decoracion: #6E6E7A;                    /* [kit] */
    --borde: #2E2E38;                         /* [kit] */
    --relleno-neutro: #26262F;                /* [kit] */
    --accion: var(--primary-bright);          /* #635BFF: #4734DC se pierde sobre #16161C (2.4:1) */
    --accion-hover: var(--primary);           /* #4734DC (blanco encima 7.5:1) */
    --enlace: #C7C4FF;                        /* [kit] 10.9:1 sobre #16161C */
    --chip: #26263A;                          /* [kit] */
    --chip-texto: #C7C4FF;                    /* [kit] 9:1 sobre #26263A */
    --foco: #C7C4FF;
    --ok-tinte: #0F2E24;    --ok-texto: #3DDCA5;       /* [kit] */
    --aviso-tinte: #33240A; --aviso-texto: #FFBD4A;    /* [kit] */
    --error-tinte: #3A1417; --error-texto: #FF6B72;    /* [kit] */
    --info-tinte: #0D2837;  --info-texto: #5CC8FF;     /* [kit] */
    --vitrina-residente: #26263A;                      /* [kit] = --chip */
    --vitrina-administracion: #26262F;                 /* [kit] = --relleno-neutro */
    --vitrina-caseta: var(--foreground-2);             /* #111116, para separarla de la tarjeta */
    --encabezado: rgba(22, 22, 28, 0.88);              /* [der] --surface-dark al 88 % */
    --sombra-tarjeta: none;
    --sombra-pantalla: 0 12px 32px rgba(0, 0, 0, 0.4); /* [der] --shadow-lg sobre oscuro */
    --sombra-flotante: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: var(--surface-dark);
  --fondo-alterno: var(--foreground-2);
  --tarjeta: var(--surface-dark-2);
  --texto: var(--on-dark);
  --texto-2: #90909A;
  --decoracion: #6E6E7A;
  --borde: #2E2E38;
  --relleno-neutro: #26262F;
  --accion: var(--primary-bright);
  --accion-hover: var(--primary);
  --enlace: #C7C4FF;
  --chip: #26263A;
  --chip-texto: #C7C4FF;
  --foco: #C7C4FF;
  --ok-tinte: #0F2E24;    --ok-texto: #3DDCA5;
  --aviso-tinte: #33240A; --aviso-texto: #FFBD4A;
  --error-tinte: #3A1417; --error-texto: #FF6B72;
  --info-tinte: #0D2837;  --info-texto: #5CC8FF;
  --vitrina-residente: #26263A;
  --vitrina-administracion: #26262F;
  --vitrina-caseta: var(--foreground-2);
  --encabezado: rgba(22, 22, 28, 0.88);
  --sombra-tarjeta: none;
  --sombra-pantalla: 0 12px 32px rgba(0, 0, 0, 0.4);
  --sombra-flotante: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) { :root { --margen: var(--space-6); } }
@media (min-width: 1200px) { :root { --margen: var(--space-8); } }

/* 3. Base ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--encabezado-alto) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-sans);
  font-size: var(--fs-parrafo);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--enlace); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}
[hidden] { display: none !important; }

h1, h2, h3 { font-weight: var(--fw-bold); text-wrap: balance; }
h1 { font-size: var(--fs-portada); line-height: var(--lh-tight); letter-spacing: var(--ls-kpi); }
h2 { font-size: var(--fs-titulo); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-section-title); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
p { text-wrap: pretty; }
strong { font-weight: var(--fw-semibold); }

/* 4. Utilidades ------------------------------------------------------------------------------- */
.icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--16 { width: 16px; height: 16px; }
.icono--24 { width: 24px; height: 24px; }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.saltar {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 50;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.contenedor {
  width: min(var(--content-max), 100% - 2 * var(--margen));
  margin-inline: auto;
}

/* Label chico y apagado, en mayúsculas (DS §3: "el label va pequeño y apagado") */
.etiqueta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--texto-2);
}
.etiqueta--icono { display: inline-flex; align-items: center; gap: var(--space-2); }
.meta { font-size: var(--fs-meta); color: var(--texto-2); }
.entrada { font-size: var(--fs-entrada); line-height: var(--lh-normal); color: var(--texto-2); }
.cifra {
  font-family: var(--font-numeric);
  font-feature-settings: var(--fvs-tabular);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kpi);
}
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha .icono { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.enlace-flecha:hover .icono { transform: translateX(2px); }

/* 5. Componentes del DS ----------------------------------------------------------------------- */

/* Botón (§5): primario índigo, secundario claro, blanco sobre la tarjeta hero. Radio de producto. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* [der] --space-10 + --space-1: área táctil */
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.boton:hover { text-decoration: none; }
.boton--chico { min-height: 40px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); }
.boton--primario { background: var(--accion); color: var(--sobre-accion); }
.boton--primario:hover { background: var(--accion-hover); }
.boton--secundario { background: var(--tarjeta); color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { border-color: var(--texto-2); }
.boton--blanco { background: var(--surface); color: var(--primary); }
.boton--blanco:hover { background: var(--primary-tint); }
.boton--contorno-claro { background: transparent; color: var(--text-on-primary); border-color: rgba(255, 255, 255, 0.72); }
.boton--contorno-claro:hover { border-color: var(--text-on-primary); background: rgba(255, 255, 255, 0.08); }
.heroe-tarjeta :focus-visible { outline-color: var(--text-on-primary); }

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-md);
  background: var(--tarjeta);
  color: var(--texto);
  cursor: pointer;
}
.boton-icono:hover { border-color: var(--texto-2); }

/* Tarjeta (§5) */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--space-6);
}
.tarjeta--compacta { padding: var(--space-5); }

/* Tarjeta destacada (hero): índigo con texto blanco */
.heroe-tarjeta {
  background: var(--heroe);
  color: var(--text-on-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero);
}

/* Chip de ícono: cuadro redondeado con --primary-tint e ícono índigo (§4). Las variantes de
   estado solo van donde el ícono comunica un estado real (la esquina de un KPI, una alerta). */
.chip {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--chip);
  color: var(--chip-texto);
}
.chip--chico { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.chip--chico .icono { width: 16px; height: 16px; }
.chip--ok { background: var(--ok-tinte); color: var(--ok-texto); }
.chip--aviso { background: var(--aviso-tinte); color: var(--aviso-texto); }
.chip--error { background: var(--error-tinte); color: var(--error-texto); }
.chip--info { background: var(--info-tinte); color: var(--info-texto); }

/* Badge de estado (§5): píldora con el tinte del estado, texto del estado en 600 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2); /* [der] 2 px de alto, entre --space-0 y --space-1 */
  border-radius: var(--radius-pill);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.badge--ok { background: var(--ok-tinte); color: var(--ok-texto); }
.badge--aviso { background: var(--aviso-tinte); color: var(--aviso-texto); }
.badge--error { background: var(--error-tinte); color: var(--error-texto); }
.badge--info { background: var(--info-tinte); color: var(--info-texto); }
.badge--neutro { background: var(--relleno-neutro); color: var(--texto-2); }
.badge__punto { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

/* Avatar: círculo con iniciales sobre un color de propiedad (§5). Solo índigo y magenta: con
   blanco encima dan 7.5:1 y 4.6:1; el verde, el cyan y el ámbar no llegan a AA con texto blanco. */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent-indigo);
  color: var(--text-on-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.avatar--chico { width: 32px; height: 32px; font-size: var(--fs-meta-sm); }
.avatar--magenta { background: var(--accent-magenta); }

/* KPI / stat card (§5): label chico arriba, cifra grande abajo, indicador en la esquina */
.kpi { display: grid; gap: var(--space-1); align-content: start; }
.kpi__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.kpi__label { font-size: var(--fs-body-sm); color: var(--texto-2); }
.kpi__cifra { font-size: var(--fs-kpi); line-height: var(--lh-tight); }
.kpi__cifra--ok { color: var(--ok-texto); }
.kpi__cifra--error { color: var(--error-texto); }

/* Rótulo: quién lo usa o en qué dispositivo. No es un estado, así que no es píldora ni lleva color
   de estado: borde neutro y radio de producto. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 2px var(--space-2);
  border: 1px solid var(--borde);
  border-radius: var(--radius-xs);
  background: var(--tarjeta);
  color: var(--texto);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.rotulo .icono { width: 14px; height: 14px; color: var(--chip-texto); }
a.rotulo:hover { border-color: var(--accion); color: var(--enlace); }
.rotulos { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }

/* 6. Encabezado y navegación global ----------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--encabezado);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado__fila {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--encabezado-alto);
}
.marca {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  border-radius: var(--radius-xs);
  margin-right: auto;
}
/* En oscuro el lockup va en blanco (LOGO.md: blanco sobre #16161C). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca { color: var(--on-dark); } }
:root[data-theme="dark"] .marca { color: var(--on-dark); }
.marca svg { width: auto; height: 28px; } /* el símbolo queda de 22 px: el mínimo del lockup es 20 */
.nav__lista { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-1); }
.nav__lista a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--texto-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.nav__lista a:hover { color: var(--texto); background: var(--relleno-neutro); }
.nav__lista a[aria-current="page"] { color: var(--chip-texto); background: var(--chip); font-weight: var(--fw-semibold); }
.nav__lista .icono { width: 16px; height: 16px; }
.encabezado__acciones { display: flex; align-items: center; gap: var(--space-2); }
.nav-boton, .tema-boton { display: none; }
.js .tema-boton { display: inline-grid; }
.nav__demo { display: none; }

/* Sin JS el menú queda visible en una segunda fila; con JS, en teléfono y tableta es un panel. */
@media (max-width: 959px) {
  .encabezado__fila { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; padding-bottom: var(--space-2); }
  .js .nav-boton { display: inline-grid; }
  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--margen) var(--space-5);
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--shadow-md);
  }
  .js .encabezado[data-menu="abierto"] .nav { display: block; }
  .js .nav__lista { flex-direction: column; gap: var(--space-1); }
  .js .nav__lista a { min-height: 44px; font-size: var(--fs-parrafo); color: var(--texto); }
  .js .nav__lista a[aria-current="page"] { color: var(--chip-texto); }
  .js .nav__demo { display: flex; margin-top: var(--space-3); width: 100%; }
}
@media (max-width: 559px) {
  .encabezado__demo { display: none; }
}
@media (min-width: 960px) {
  .nav { margin-right: var(--space-2); }
  .nav__lista .icono { display: none; }
}

/* 7. Secciones y rejillas --------------------------------------------------------------------- */
main { display: block; }
.seccion { padding-block: var(--space-12); }
.seccion--alterna { background: var(--fondo-alterno); border-block: 1px solid var(--borde); }
.seccion--pegada { padding-top: 0; }
@media (min-width: 768px) { .seccion { padding-block: var(--space-16); } .seccion--pegada { padding-top: 0; } }
.seccion__cabeza { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-8); }
.seccion__cabeza p:not(.etiqueta) { color: var(--texto-2); font-size: var(--fs-parrafo); }
.seccion__cabeza .entrada { font-size: var(--fs-entrada); }
.seccion__pie { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

.rejilla { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tarjeta > .chip + h3 { margin-top: var(--space-4); }
.tarjeta h3 + p { margin-top: var(--space-2); color: var(--texto-2); font-size: var(--fs-body); }
.tarjeta__cabeza { display: flex; align-items: center; gap: var(--space-3); }
.tarjeta__cabeza h3 { margin: 0; }

/* Lista con paloma: funciones clave de un módulo o de una interfaz */
.lista-funciones { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.lista-funciones li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); font-size: var(--fs-body); }
.lista-funciones .icono { margin-top: 2px; color: var(--chip-texto); }

/* 8. Héroe de la portada ---------------------------------------------------------------------- */
.heroe { padding-block: var(--space-10) var(--space-12); }
@media (min-width: 1000px) { .heroe { padding-block: var(--space-10) var(--space-16); } }
.heroe__cabeza { display: grid; gap: var(--space-5); margin-bottom: var(--space-10); }
.heroe__cabeza h1 { max-width: 18ch; }
.heroe__lado { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 1000px) {
  .heroe__cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-12); }
}
.heroe__nota { font-size: var(--fs-body-sm); color: var(--texto-2); }
.heroe__invitacion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-5); }
.heroe__invitacion h2 { font-size: var(--fs-titulo); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.heroe__invitacion p { color: var(--texto-2); font-size: var(--fs-body); }

/* Accesos: las tres interfaces en una lista compacta dentro del héroe, para que en el teléfono y la
   tableta queden en la primera pantalla. Usan la pieza .perfil. En el escritorio no hacen falta:
   las puertas, con sus capturas, ya caben en la primera pantalla. */
.accesos { display: grid; gap: var(--space-2); width: 100%; padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .accesos { display: none; } }

/* Puertas: las tres tarjetas grandes del héroe, una por interfaz. Toda la tarjeta es clicable:
   el enlace está en el título y su ::after cubre la tarjeta (el nombre accesible es el título). */
.puertas { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.puerta {
  position: relative;
  display: grid;
  height: 100%;
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radius-xl);
  box-shadow: var(--sombra-tarjeta);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.puerta:hover { border-color: var(--accion); box-shadow: var(--shadow-md); }
.puerta__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); }
.puerta__cuerpo h3 { font-size: var(--fs-section-title); }
.puerta__enlace { color: var(--texto); text-decoration: none; }
.puerta__enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-xl); }
.puerta__valor { color: var(--texto-2); font-size: var(--fs-body); }
.puerta__ir { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); color: var(--enlace); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.puerta__ir .icono { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.puerta:hover .puerta__ir .icono { transform: translateX(3px); }
@supports selector(:has(*)) {
  .puerta__enlace:focus-visible { outline: none; box-shadow: none; }
  .puerta:has(.puerta__enlace:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; box-shadow: var(--ring); }
}
@media (min-width: 640px) and (max-width: 959px) {
  .puerta { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .puerta .vitrina { height: 100%; aspect-ratio: auto; min-height: 260px; }
  .puerta__cuerpo { justify-content: center; padding: var(--space-6); }
  .puerta__ir { margin-top: var(--space-2); }
}
@media (min-width: 960px) {
  .puertas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .puerta { grid-template-rows: auto 1fr; }
  /* Más baja que la vitrina normal (4:3), para que el título y «Conoce…» queden en la primera pantalla */
  .puerta .vitrina { aspect-ratio: 16 / 10; }
}

/* Perfiles: los seis tipos de usuario, cada uno con su interfaz (debajo de las puertas) */
.perfiles { margin-top: var(--space-6); }
.perfiles__titulo { margin-bottom: var(--space-3); }
.perfiles__lista { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
@media (min-width: 560px) { .perfiles__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .perfiles__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perfil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--borde);
  border-radius: var(--radius-md);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
}
.perfil:hover { border-color: var(--accion); }
.perfil__texto { min-width: 0; }
.perfil__texto strong { display: block; font-size: var(--fs-body); line-height: var(--lh-snug); }
.perfil__texto span { display: block; font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--texto-2); }
.perfil > .icono { width: 16px; height: 16px; color: var(--texto-2); }

/* 9. Héroe de subpágina ----------------------------------------------------------------------- */
.heroe-pagina { padding-block: var(--space-10) var(--space-12); border-bottom: 1px solid var(--borde); }
.heroe-pagina__grid { display: grid; gap: var(--space-10); align-items: center; }
.heroe-pagina__texto { display: grid; gap: var(--space-5); justify-items: start; }
.heroe-pagina__texto .entrada { max-width: 40em; }
@media (min-width: 1000px) {
  .heroe-pagina { padding-block: var(--space-12) var(--space-16); }
  .heroe-pagina__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-12); }
  .heroe-pagina--sin-visual .heroe-pagina__grid { grid-template-columns: minmax(0, 1fr); }
}
.heroe-pagina--sin-visual .heroe-pagina__texto { max-width: 860px; }

/* 10. Pantallas (capturas reales) y vitrinas ---------------------------------------------------- */
.pantalla {
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-pantalla);
}
.pantalla img { width: 100%; }
.pantalla--escritorio { border-radius: var(--radius-lg); }
.pantalla--telefono { border-radius: var(--radius-xl); }
.pantalla--tableta { border-radius: var(--radius-xl); }
.pantalla--oscura { background: var(--surface-dark); border-color: var(--borde-sobre-oscuro); }

/* Vitrina: un fondo de la interfaz donde se montan una o dos capturas recortadas. La proporción
   es fija (4:3) y las piezas se colocan con clases, nunca con style="". */
.vitrina {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vitrina-residente);
}
.vitrina--administracion { background: var(--vitrina-administracion); }
.vitrina--caseta { background: var(--vitrina-caseta); }
.vitrina--redonda { border-radius: var(--radius-xl); }
.vitrina__pieza { position: absolute; margin: 0; }
.vitrina__pieza img { width: 100%; }
/* Teléfono a la izquierda, anclado arriba (se recorta abajo) */
.vitrina__pieza--telefono-izq { left: 10%; top: 8%; width: 40%; }
/* Teléfono a la derecha, anclado abajo (se recorta arriba): para pantallas cuya parte útil está abajo */
.vitrina__pieza--telefono-der { right: 8%; bottom: 6%; width: 38%; }
/* Teléfono solo, centrado */
.vitrina__pieza--telefono-centro { left: 30%; top: 8%; width: 40%; }
/* Escritorio: grande, desde arriba a la izquierda, sale por la derecha y por abajo */
.vitrina__pieza--escritorio { left: 7%; top: 9%; width: 135%; }
/* Tabletas: una adelante a la izquierda y otra detrás a la derecha */
.vitrina__pieza--tableta-izq { left: 7%; top: 8%; width: 46%; z-index: 1; }
.vitrina__pieza--tableta-der { right: 6%; top: 15%; width: 46%; }

/* 11. Escenas: foto con una tarjeta de la app encima -------------------------------------------
 * La foto no lleva nada horneado: la tarjeta es HTML con los componentes del DS (.app-tarjeta).
 * En el teléfono la tarjeta baja y solo se encima en la orilla inferior de la foto, para no tapar
 * nada importante. */
.escena { position: relative; margin: 0; display: grid; }
.escena__foto { position: relative; display: block; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 3; background: var(--relleno-neutro); }
.escena__foto img { width: 100%; height: 100%; object-fit: cover; }
.escena--3x2 .escena__foto { aspect-ratio: 3 / 2; }
.escena--4x5 .escena__foto { aspect-ratio: 4 / 5; }
.escena--1x1 .escena__foto { aspect-ratio: 1 / 1; }
.escena--16x9 .escena__foto { aspect-ratio: 16 / 9; }
.escena--panoramica .escena__foto { aspect-ratio: 2 / 1; }
.escena__tarjeta {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 340px;
  margin: calc(-1 * var(--space-8)) var(--space-4) 0;
}
.escena__credito { margin-top: var(--space-2); font-size: var(--fs-meta-sm); color: var(--texto-2); text-align: right; }
.escena__credito a { color: inherit; }
@media (min-width: 640px) {
  .escena__tarjeta { position: absolute; margin: 0; left: var(--space-5); bottom: calc(var(--space-5) + 1.6em); max-width: min(340px, 78%); }
  .escena--tarjeta-der .escena__tarjeta { left: auto; right: var(--space-5); }
  .escena--tarjeta-arriba .escena__tarjeta { bottom: auto; top: var(--space-5); }
}
/* Encuadre de cada foto (fotos.json): con clases, porque la CSP no permite style="" */
.foto-fachada-torre-balcones img { object-position: center 60%; }
.foto-fachada-patio-playa-del-carmen img { object-position: center 55%; }
.foto-residente-telefono-cdmx img { object-position: 55% center; }
.foto-caseta-acceso-privada img { object-position: 62% center; }
.foto-caseta-guardia-noche img { object-position: 48% center; }
.foto-administracion-laptop img { object-position: 40% center; }
.foto-amenidad-alberca-palmeras img { object-position: center center; }
.foto-repartidor-moto-cdmx img { object-position: 70% 65%; }
.foto-vecinos-parque-torres img { object-position: center 70%; }
.foto-comite-junta-terraza img { object-position: center center; }

/* Tarjeta de la app: réplica pequeña de una tarjeta del producto, con los componentes del DS */
.app-tarjeta {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-flotante);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
}
.app-tarjeta > .badge, .app-tarjeta > .rotulo { justify-self: start; }
.app-tarjeta__cabeza { display: flex; align-items: center; gap: var(--space-3); }
.app-tarjeta__titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.app-tarjeta__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.app-tarjeta__cifra { font-size: 28px; line-height: var(--lh-tight); } /* [der] --fs-kpi (34) menos un paso, para tarjetas chicas */
.app-tarjeta__datos { display: grid; gap: var(--space-2); }
.app-tarjeta__datos div { display: grid; gap: 2px; }
.app-tarjeta__datos dt { font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-2); }
.app-tarjeta__datos dd { font-weight: var(--fw-semibold); }
/* Hero índigo (como "Próximo vencimiento") */
.app-tarjeta--heroe { background: var(--heroe); color: var(--text-on-primary); border-color: transparent; box-shadow: var(--shadow-hero); }
.app-tarjeta--heroe .meta, .app-tarjeta--heroe .etiqueta { color: var(--sobre-heroe-2); }
.app-tarjeta--heroe .chip { background: rgba(255, 255, 255, 0.16); color: var(--text-on-primary); }
/* Superficie oscura de la caseta: igual en los dos temas */
.app-tarjeta--caseta { background: var(--surface-dark); color: var(--on-dark); border-color: var(--borde-sobre-oscuro); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.app-tarjeta--caseta .meta, .app-tarjeta--caseta .app-tarjeta__datos dt { color: var(--on-dark-muted); }
.app-tarjeta__estado { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: var(--ls-kpi); color: var(--success); } /* #00BB7F sobre #16161C: 7.3:1 */
.app-tarjeta__subestado { font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.app-tarjeta__aviso-caseta { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #0D2837; color: #5CC8FF; font-size: var(--fs-meta); } /* [kit] tinte y texto info del oscuro */

/* 12. Bloque de módulo ------------------------------------------------------------------------
 * Un módulo explicado: para qué sirve, qué resuelve, quién lo usa y dónde, sus funciones clave y
 * su captura. Los bloques seguidos alternan el lado de la captura con .modulo--invertido. */
.modulo {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12);
  border-top: 1px solid var(--borde);
}
.modulo:first-child { border-top: 0; }
.modulo__texto { display: grid; gap: var(--space-4); align-content: start; }
.modulo__texto h2, .modulo__texto h3 { font-size: var(--fs-titulo); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.modulo__para { font-size: var(--fs-entrada); line-height: var(--lh-normal); color: var(--texto); }
.modulo__resuelve { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--relleno-neutro); }
.modulo__resuelve p:not(.etiqueta) { color: var(--texto); font-size: var(--fs-body); }
.modulo__ficha { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.modulo__ficha div { display: grid; gap: var(--space-1); }
.modulo__ficha dt { font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-2); }
.modulo__ficha dd { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.modulo__visual { display: grid; gap: var(--space-3); align-content: start; justify-items: center; margin: 0; }
.modulo__visual > figcaption, .modulo__visual > .modulo__pie { font-size: var(--fs-meta); color: var(--texto-2); text-align: center; max-width: 48ch; }
.modulo__visual .pantalla--telefono { width: min(300px, 78%); }
.modulo__visual .pantalla--tableta { width: min(440px, 100%); }
.modulo__visual .pantalla--escritorio { width: 100%; }
/* Recorte de una captura de escritorio (un diálogo o una caja): se ve a su tamaño, no a todo lo ancho */
.modulo__visual .pantalla--recorte { width: min(100%, 600px); }
.modulo__visual .escena { width: 100%; }
/* Dos capturas lado a lado (dos teléfonos o dos tabletas) */
.modulo__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; align-items: start; }
.modulo__par .pantalla--telefono, .modulo__par .pantalla--tableta { width: 100%; }
@media (min-width: 560px) { .modulo__par .pantalla--telefono { max-width: 260px; justify-self: center; } }
.modulo__par > figure { margin: 0; display: grid; gap: var(--space-2); }
.modulo__par figcaption { font-size: var(--fs-meta); color: var(--texto-2); text-align: center; }
@media (min-width: 960px) {
  .modulo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
  .modulo--invertido .modulo__texto { order: 2; }
  .modulo--ancho { grid-template-columns: minmax(0, 1fr); }
  .modulo--ancho .modulo__texto { max-width: 760px; }
}
/* Encabezado de un grupo de módulos dentro de una subpágina (por ejemplo, "Cobranza") */
.grupo { padding-top: var(--space-12); }
.grupo__cabeza { display: grid; gap: var(--space-3); max-width: 760px; padding-bottom: var(--space-4); }
.grupo__cabeza p:not(.etiqueta) { color: var(--texto-2); }

/* 13. Tira de capturas (desplazamiento horizontal propio) y pestañas ---------------------------- */
.tira {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--space-1) var(--space-1) var(--space-6);
  margin: calc(-1 * var(--space-1));
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
}
.tira > figure { scroll-snap-align: start; display: grid; gap: var(--space-3); align-content: start; margin: 0; }
.tira figcaption { font-size: var(--fs-meta); color: var(--texto-2); max-width: 36ch; }
.tira--telefono { grid-auto-columns: minmax(168px, 220px); }
.tira--tableta { grid-auto-columns: minmax(200px, 280px); }
.tira--escritorio { grid-auto-columns: minmax(272px, 88%); }
@media (min-width: 1000px) { .tira--escritorio { grid-auto-columns: minmax(0, 92%); } }

.pestanas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-8);
  border: 1px solid var(--borde);
  border-radius: var(--radius-md);
  background: var(--tarjeta);
}
.pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--texto-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { background: var(--chip); color: var(--chip-texto); }
.panel + .panel { margin-top: var(--space-12); }
.js [data-pestanas].con-pestanas .panel + .panel { margin-top: 0; }

/* 14. Audiencias ("tres maneras de necesitarlo") --------------------------------------------- */
.audiencias { display: grid; gap: var(--space-6); }
@media (min-width: 1000px) { .audiencias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.audiencia { display: grid; gap: var(--space-5); align-content: start; }
.audiencia__texto { display: grid; gap: var(--space-4); }
.audiencia__texto h3 { font-size: var(--fs-section-title); }
.audiencia dl { display: grid; gap: var(--space-3); }
.audiencia dt { font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-2); }
.audiencia dd { margin-top: var(--space-1); font-size: var(--fs-body); }
.audiencia dd.audiencia__hoy { color: var(--texto-2); }
@media (min-width: 640px) and (max-width: 999px) {
  .audiencia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

/* 15. Pasos y estado de cuenta en vivo ------------------------------------------------------- */
.mes { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1000px) {
  .mes { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); }
  .mes .ledger { position: sticky; top: calc(var(--encabezado-alto) + var(--space-6)); }
}
.pasos { counter-reset: paso; display: grid; gap: var(--space-4); padding: 0; list-style: none; }
.paso { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-content: start; }
.paso > :not(.paso__numero) { grid-column: 2; }
.paso__numero {
  grid-row: span 3;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--chip);
  color: var(--chip-texto);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  font-feature-settings: var(--fvs-tabular);
}
.paso h3 { font-size: var(--fs-section-title); }
.paso p { font-size: var(--fs-body); color: var(--texto-2); }
.paso .rotulo { justify-self: start; margin-top: var(--space-1); }
.pasos--lineal .paso { position: relative; padding-bottom: var(--space-6); }
.pasos--lineal .paso:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 48px; bottom: 4px; width: 2px; background: var(--borde); border-radius: 1px; }

/* Estado de cuenta en vivo: un libro de cobranza con KPI y filas que pasan a Pagado (sitio.js) */
.ledger { padding: 0; overflow: hidden; margin: 0; }
.ledger__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--borde); }
.ledger__titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.ledger__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); }
.ledger__kpis .kpi { padding: var(--space-4) var(--space-5); }
.ledger__kpis .kpi + .kpi { border-left: 1px solid var(--borde); }
.ledger__kpis .kpi__cifra { font-size: clamp(20px, 1.2vw + 14px, 26px); } /* [der] cifra de KPI reducida para tres columnas */
.ledger__kpis .kpi__label { font-size: var(--fs-meta); }
.ledger__filas { padding: 0; margin: 0; list-style: none; }
.ledger__fila {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--borde);
  font-size: var(--fs-body-sm);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.ledger__fila:last-child { border-bottom: 0; }
.ledger__unidad { font-weight: var(--fw-semibold); font-feature-settings: var(--fvs-tabular); white-space: nowrap; }
.ledger__nombre { min-width: 0; }
.ledger__nombre small { display: block; font-size: var(--fs-meta-sm); color: var(--texto-2); }
.ledger__monto { font-feature-settings: var(--fvs-tabular); font-weight: var(--fw-semibold); }
.ledger__fila.recien-pagada { background: var(--ok-tinte); }
.ledger__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--borde); background: var(--relleno-neutro); font-size: var(--fs-meta); color: var(--texto-2); }
.ledger__nota { padding: var(--space-3) var(--space-5) var(--space-4); font-size: var(--fs-meta-sm); color: var(--texto-2); }
@media (max-width: 420px) {
  .ledger__fila { grid-template-columns: 4.6em minmax(0, 1fr) auto; padding-inline: var(--space-4); }
  .ledger__fila .badge { grid-column: 2 / 4; justify-self: start; }
  .ledger__kpis .kpi { padding: var(--space-3); }
  .ledger__cabeza, .ledger__pie, .ledger__nota { padding-inline: var(--space-4); }
}

/* 16. Familias de módulos (portada) y listas de módulos -------------------------------------- */
.familias { display: grid; gap: var(--space-12); }
.familia { display: grid; gap: var(--space-8); align-items: center; }
.familia__texto { display: grid; gap: var(--space-4); align-content: start; }
.familia__texto h3 { font-size: 24px; line-height: var(--lh-snug); font-weight: var(--fw-bold); } /* [der] 24 px: entre --fs-section-title (19) y --fs-screen-title (30) */
.familia__texto > p:not(.etiqueta) { color: var(--texto-2); }
@media (min-width: 960px) {
  .familias { gap: var(--space-16); }
  .familia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); }
  .familia--invertida .escena { order: 2; }
}
.modulos-lista { display: grid; gap: var(--space-2); padding: 0; margin: var(--space-2) 0 0; list-style: none; }
@media (min-width: 560px) { .modulos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modulos-lista a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--borde);
  border-radius: var(--radius-md);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
}
.modulos-lista a:hover { border-color: var(--accion); }
.modulos-lista strong { font-size: var(--fs-body); line-height: var(--lh-snug); }
.modulos-lista span { grid-column: 1; font-size: var(--fs-meta); line-height: var(--lh-snug); color: var(--texto-2); }
.modulos-lista .icono { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--texto-2); }

/* 17. Catálogo de módulos: fichas, índice pegajoso y navegación por familias ----------------- */
.familia-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.familia-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  background: var(--tarjeta);
  color: var(--texto);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.familia-nav a:hover { border-color: var(--accion); color: var(--enlace); }
.familia-nav .icono { width: 16px; height: 16px; color: var(--chip-texto); }

/* Página con índice: el índice va a la izquierda y se queda pegado en el escritorio */
.con-indice { display: grid; gap: var(--space-8); align-items: start; }
.indice { display: none; }
@media (min-width: 1100px) {
  .con-indice { grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-12); }
  .indice {
    display: block;
    position: sticky;
    top: calc(var(--encabezado-alto) + var(--space-6));
    max-height: calc(100vh - var(--encabezado-alto) - var(--space-12));
    overflow-y: auto;
    padding-right: var(--space-2);
    font-size: var(--fs-body-sm);
  }
}
.indice__titulo { margin-bottom: var(--space-3); }
.indice__grupo + .indice__grupo { margin-top: var(--space-4); }
.indice__grupo > a { font-weight: var(--fw-semibold); color: var(--texto); }
.indice ul { display: grid; gap: 2px; padding: 0; margin: var(--space-1) 0 0; list-style: none; }
.indice a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); color: var(--texto-2); text-decoration: none; line-height: var(--lh-snug); }
.indice a:hover { color: var(--texto); background: var(--relleno-neutro); }
.indice a[aria-current="true"] { color: var(--chip-texto); background: var(--chip); }

/* Índice de una subpágina (residente, administración y caseta): una tarjeta al inicio del detalle
   con los grupos de la página y sus módulos como accesos rápidos. Es la misma pieza en las tres. */
.indice-pagina {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-5);
  border: 1px solid var(--borde);
  border-radius: var(--radius-xl);
  background: var(--tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
@media (min-width: 768px) { .indice-pagina { padding: var(--space-8); margin-top: var(--space-12); } }
.indice-pagina__cabeza { display: grid; gap: var(--space-1); max-width: 760px; }
.indice-pagina__cabeza .meta { line-height: var(--lh-snug); }
.indice-pagina__grupos { display: grid; gap: var(--space-5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .indice-pagina__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); } }
@media (min-width: 1000px) { .indice-pagina__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indice-pagina__grupo { display: grid; gap: var(--space-2); align-content: start; }
.indice-pagina__familia {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
  min-height: 40px;
  color: var(--texto);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.indice-pagina__familia:hover { color: var(--enlace); }
.indice-pagina__grupo ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.indice-pagina__grupo ul a {
  display: inline-flex;
  align-items: center;
  min-height: 32px; /* [der] --space-8: área táctil de un enlace chico */
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  background: var(--fondo);
  color: var(--texto);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.indice-pagina__grupo ul a:hover { border-color: var(--accion); color: var(--enlace); }

.familia-catalogo { padding-top: var(--space-12); }
.familia-catalogo:first-child { padding-top: 0; }
.familia-catalogo__cabeza { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-6); }
.familia-catalogo__cabeza p:not(.etiqueta) { color: var(--texto-2); }
.fichas { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ficha { display: grid; gap: var(--space-3); align-content: start; scroll-margin-top: calc(var(--encabezado-alto) + var(--space-4)); }
.ficha__cabeza { display: flex; align-items: center; gap: var(--space-3); }
.ficha__cabeza h3 { font-size: var(--fs-section-title); }
.ficha > p { color: var(--texto-2); font-size: var(--fs-body); }
.ficha__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-1) 0 0; list-style: none; }

/* 18. Nota: un aviso breve (por ejemplo, "cada condominio activa solo los módulos que necesita") */
.nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background: var(--tarjeta);
  font-size: var(--fs-body);
}
.nota .chip { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.nota .chip .icono { width: 16px; height: 16px; }
.nota p { align-self: center; }

/* 19. Preguntas frecuentes ------------------------------------------------------------------- */
.dos-columnas { display: grid; gap: var(--space-2); align-items: start; }
@media (min-width: 1000px) {
  .dos-columnas { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); }
  .dos-columnas > .seccion__cabeza { position: sticky; top: calc(var(--encabezado-alto) + var(--space-6)); }
}
.preguntas { display: grid; gap: var(--space-3); max-width: 860px; }
.pregunta { border: 1px solid var(--borde); border-radius: var(--radius-lg); background: var(--tarjeta); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .icono { color: var(--chip-texto); transition: transform var(--dur-base) var(--ease-standard); }
.pregunta[open] summary .icono { transform: rotate(45deg); }
.pregunta__respuesta { padding: 0 var(--space-5) var(--space-5); color: var(--texto-2); display: grid; gap: var(--space-3); }

/* 20. Compositor de contacto ------------------------------------------------------------------
 * No es un formulario: no envía ni guarda nada. Con lo que eligen arma el texto de un mensaje de
 * WhatsApp (wa.me) y de un correo (mailto) y actualiza los dos enlaces (sitio.js). Sin JS, los
 * enlaces llevan un mensaje general y las opciones no se muestran. */
.compositor { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .compositor { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); } }
.compositor__texto { display: grid; gap: var(--space-4); }
.compositor__texto > p:not(.etiqueta) { color: var(--texto-2); }
.siguientes { display: grid; gap: var(--space-3); padding: 0; margin: var(--space-4) 0 0; list-style: none; }
.siguientes li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--fs-body); }
.siguientes .paso__numero { width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); grid-row: auto; }
.compositor__directo { display: grid; gap: var(--space-2); padding: 0; margin: var(--space-2) 0 0; list-style: none; }
.compositor__directo a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-weight: var(--fw-semibold); }
.compositor__panel { display: grid; gap: var(--space-6); }
.compositor__opciones { display: none; gap: var(--space-6); }
.js .compositor__opciones { display: grid; }
.compositor__grupo { display: grid; gap: var(--space-3); }
.compositor__grupo legend, .compositor__rango label { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.compositor__rango { display: grid; gap: var(--space-2); }
.compositor__rango-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.compositor__rango output { font-size: var(--fs-kpi); line-height: var(--lh-tight); color: var(--chip-texto); }
.compositor__rango input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--accion); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opcion { position: relative; display: inline-flex; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--borde);
  border-radius: var(--radius-md); /* selector de propiedad del DS: radio de producto, no píldora */
  background: var(--tarjeta);
  color: var(--texto);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.opcion span .icono { width: 16px; height: 16px; color: var(--texto-2); }
.opcion input:checked + span { border-color: var(--accion); background: var(--chip); color: var(--chip-texto); box-shadow: inset 0 0 0 1px var(--accion); }
.opcion input:checked + span .icono { color: var(--chip-texto); }
.opcion input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: var(--ring); }
.compositor__mensaje { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--relleno-neutro); }
.compositor__mensaje p:not(.etiqueta) { font-size: var(--fs-body); }
.compositor__acciones { display: grid; gap: var(--space-3); }
@media (min-width: 480px) { .compositor__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compositor__privacidad { font-size: var(--fs-meta); color: var(--texto-2); }

/* 21. Otras interfaces (cierre de cada subpágina) y banda final ------------------------------ */
.otras { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
@media (min-width: 720px) { .otras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .otras--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.otra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background: var(--tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--texto);
  text-decoration: none;
}
.otra:hover { border-color: var(--accion); }
.otra__texto { min-width: 0; }
.otra__texto strong { display: block; font-size: var(--fs-section-title); line-height: var(--lh-snug); }
.otra__texto span { display: block; margin-top: var(--space-1); font-size: var(--fs-body-sm); color: var(--texto-2); }
.otra > .icono { color: var(--enlace); }

.banda { display: grid; gap: var(--space-6); padding: var(--space-8) var(--space-6); }
@media (min-width: 900px) { .banda { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding: var(--space-12); } }
.banda h2 { color: var(--text-on-primary); }
.banda p { color: var(--sobre-heroe-2); }
.banda__texto { display: grid; gap: var(--space-3); }
.banda__acciones { display: grid; gap: var(--space-3); }
.banda__acciones .boton { width: 100%; }

/* 22. Pie --------------------------------------------------------------------------------------- */
.pie { padding-block: var(--space-12) var(--space-8); border-top: 1px solid var(--borde); background: var(--fondo-alterno); }
.pie__grid { display: grid; gap: var(--space-8); }
@media (min-width: 640px) { .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pie__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.pie__marca { display: grid; gap: var(--space-3); justify-items: start; align-content: start; }
.pie__marca .marca svg { height: 24px; }
.pie__marca p { color: var(--texto-2); font-size: var(--fs-body-sm); max-width: 38ch; }
.pie h2 { font-size: var(--fs-meta); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--space-3); }
.pie__lista { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; font-size: var(--fs-body-sm); }
.pie__lista a { color: var(--texto); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; }
.pie__lista a:hover { color: var(--enlace); text-decoration: underline; }
.pie__lista .icono { width: 14px; height: 14px; color: var(--texto-2); }
.pie__legal { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--borde); display: grid; gap: var(--space-2); font-size: var(--fs-meta); color: var(--texto-2); }

/* 23. 404 -------------------------------------------------------------------------------------- */
.no-encontrada { padding-block: var(--space-16); min-height: calc(70vh - var(--encabezado-alto)); display: grid; align-content: center; }
.no-encontrada .tarjeta { display: grid; gap: var(--space-4); justify-items: start; max-width: 720px; padding: var(--space-8); }
.no-encontrada .kpi__cifra { color: var(--chip-texto); }
.no-encontrada .otras { width: 100%; margin-top: var(--space-2); grid-template-columns: minmax(0, 1fr); }

/* 24. Movimiento reducido ------------------------------------------------------------------------ */
/* Sin transiciones ni animaciones. Ojo: no uses transition-duration aquí, porque transition-property
   vale "all" por omisión y cada cambio de color pasaría por una transición. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 25. Las trabas de siempre y cambio sin pérdidas (portada) ------------------------------------
 * Fricciones: las cuatro trabas del cobro, en una rejilla de dos. Cada tarjeta abre con una escena
 * (una .app-tarjeta sobre el relleno neutro; role="img" y su texto en aria-label; desde 640 px), nombra lo que
 * resuelve Otochi (h3) y compara «Hoy» (apagado) con «Con Otochi» (sobre el tinte índigo), como las
 * audiencias. Al pie, «Míralo en». Desde 640 px las tarjetas de una fila comparten sus renglones
 * (subgrid): la escena, el título, «Hoy» y «Con Otochi» empiezan a la misma altura. Las demás trabas
 * van en .fricciones-breves: ícono, título y una frase, sin comparación ni enlace.
 * Cambio: la cabeza de la sección con un estado de cuenta de ejemplo (.ledger, sin data-ledger: no
 * se anima) y los pasos en tarjetas. */
.friccion { display: flex; flex-direction: column; gap: var(--space-4); }
.friccion__escena { display: grid; place-items: center; padding: var(--space-5); border-radius: var(--radius-md); background: var(--relleno-neutro); }
.friccion__escena .app-tarjeta { width: 100%; max-width: 360px; box-shadow: var(--sombra-tarjeta); }
/* En el teléfono la escena se queda fuera: ilustra lo que ya dice el texto y alargaba la sección */
@media (max-width: 639px) { .friccion__escena { display: none; } }
@media (min-width: 640px) and (max-width: 999px) { .friccion__escena { padding: var(--space-4); } }
.friccion__codigo { letter-spacing: 0.12em; }
.friccion__renglon { padding-top: var(--space-3); border-top: 1px solid var(--borde); }
.friccion__cabeza { display: flex; align-items: center; gap: var(--space-3); }
.friccion__cabeza h3 { font-size: var(--fs-section-title); }
.friccion__comparacion { display: grid; gap: var(--space-3); }
.friccion__comparacion dt { font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texto-2); }
.friccion__comparacion dd { margin-top: var(--space-1); font-size: var(--fs-body); }
.friccion__antes dd { color: var(--texto-2); }
.friccion__ahora { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--chip); }
.friccion__ahora dt { display: flex; align-items: center; gap: var(--space-1); color: var(--chip-texto); } /* 6.7:1 en claro y 9:1 en oscuro sobre --chip */
.friccion__ahora dt .icono { width: 14px; height: 14px; }
.friccion__ahora dd { color: var(--texto); }
.friccion__donde { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; font-size: var(--fs-meta); color: var(--texto-2); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .friccion { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-4); }
    .friccion__comparacion { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-3); }
    .friccion__donde { margin-top: 0; }
  }
}

.fricciones__otras { margin-top: var(--space-10); }
.fricciones__otras-titulo { margin-bottom: var(--space-2); }
.fricciones-breves { display: grid; column-gap: var(--space-8); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .fricciones-breves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fricciones-breves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fricciones-breves li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--borde); }
.fricciones-breves p { color: var(--texto-2); font-size: var(--fs-body); }
.fricciones-breves strong { color: var(--texto); font-weight: var(--fw-semibold); }

.cambio { display: grid; gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); }
.cambio > .seccion__cabeza { margin-bottom: 0; }
.cambio__ejemplo { width: 100%; max-width: 520px; justify-self: center; }
@media (min-width: 1000px) {
  .cambio { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); }
}
.cambio__pasos { margin: 0; }
.cambio__paso { display: grid; gap: var(--space-3); align-content: start; }
.cambio__paso h3 { font-size: var(--fs-section-title); }
.cambio__paso p { color: var(--texto-2); font-size: var(--fs-body); }
/* En el teléfono, menos relleno: más texto por línea en tarjetas que se apilan */
@media (max-width: 639px) { .friccion, .cambio__paso { padding: var(--space-5); } }