/*
 * 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); }

/* La palabra «Otochi» en el texto del cuerpo: con la identidad del logotipo (Inter ExtraBold, tracking
   -0.04em, como el lockup de LOGO.md) y el índigo de la marca; en oscuro, el índigo claro del kit
   (#C7C4FF), porque #4734DC no se lee sobre #16161C. Del mismo tamaño que el texto que la rodea. No
   va en el encabezado, el logo, los metadatos ni en las piezas que representan la app (pantallas,
   tarjetas de la app, insignias, botones y «Con Otochi»). Sobre la tarjeta índigo toma el blanco. */
.marca-otochi { font-weight: 800; letter-spacing: -0.04em; color: var(--chip-texto); }
.heroe-tarjeta .marca-otochi, .app-tarjeta--heroe .marca-otochi { color: inherit; }

/* 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; }
/* El botón de tema muestra el ícono de su estado (assets/tema.js pone data-tema-eleccion antes de
   pintar): Auto, sol y luna con una diagonal; Claro, el sol; Oscuro, la luna. */
.tema-boton .icono { display: none; }
:root[data-tema-eleccion="auto"] .tema-boton__auto,
:root:not([data-tema-eleccion]) .tema-boton__auto,
:root[data-tema-eleccion="light"] .tema-boton__claro,
:root[data-tema-eleccion="dark"] .tema-boton__oscuro { display: block; }
.tema-boton__auto { width: 24px; height: 24px; } /* el ícono doble necesita un poco más de espacio */
.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__version { font-feature-settings: var(--fvs-tabular); }
.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); }

/* Cambio automático de tema con la página abierta (assets/tema.js, a las 19:00 y a las 7:00 o si
   cambia la preferencia del sistema): colores con una transición suave de 0.6 s. Solo si no se
   pidió movimiento reducido; tema.js quita la clase al terminar. */
@media (prefers-reduced-motion: no-preference) {
  .tema-transicion, .tema-transicion *, .tema-transicion *::before, .tema-transicion *::after {
    transition: background-color 0.6s var(--ease-standard), color 0.6s var(--ease-standard), border-color 0.6s var(--ease-standard), fill 0.6s var(--ease-standard) !important;
  }
}

/* 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); } }