/*
 * Otochi · lo propio de la portada (index.html): la narrativa del 25-oct-2026.
 * Se carga después de estilos.css y, como las demás hojas de página, no define tokens del DS:
 * usa los del DS y los del sitio. Las únicas medidas nuevas son las de los dispositivos dibujados.
 *
 * Índice
 *   1. Dispositivos dibujados (teléfono, tableta de caseta y laptop) y su interfaz mínima
 *   2. Guiones: vistas, apariciones, toques, tecleo y tachado (portada.js)
 *   3. Héroe «sin dramas» y el lema
 *   4. Antes y después
 *   5. Para todo tipo de condominio (las razones)
 *   6. Un día en tu condominio
 *   7. Amenidades
 *   8. Del otro lado del QR
 *   9. Por qué la gente sí la usa
 *  10. Hecha por usuarios
 *  11. Precios
 *
 * Movimiento: TODO estado inicial de una animación vive bajo .guion--listo, una clase que pone
 * portada.js solo si el navegador no pide movimiento reducido. Sin JS, o con movimiento reducido,
 * cada pieza se ve en su estado final: la última pantalla, el texto completo y la fricción tachada.
 */

/* 1. Dispositivos dibujados ------------------------------------------------------------------ */
/* El marco es oscuro en los dos temas (como un teléfono de verdad); la pantalla usa los tokens del
   sitio, así que sigue al tema. La caseta siempre es oscura, como la app. */
.tel {
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9 / 17;
  margin-inline: auto;
  padding: 9px;
  border-radius: 40px;
  background: var(--foreground-2);
  box-shadow: 0 0 0 1px var(--borde), var(--sombra-pantalla);
  font-size: 13px;
  line-height: var(--lh-snug);
}
.tel::before { /* la isla de la cámara */
  content: "";
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 50%;
  width: 72px;
  height: 20px;
  margin-left: -36px;
  border-radius: 12px;
  background: var(--foreground-2);
}
.tel__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 31px;
  background: var(--fondo);
  color: var(--texto);
}
.tel__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  padding: 10px 24px 0;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  font-feature-settings: var(--fvs-tabular);
}
.tel__barra span:last-child { width: 22px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0.8; }

.tableta {
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  padding: 12px;
  border-radius: 26px;
  background: var(--foreground-2);
  box-shadow: 0 0 0 1px var(--borde), var(--sombra-pantalla);
  font-size: 13px;
  line-height: var(--lh-snug);
}
.tableta__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface-dark);
  color: var(--on-dark);
}

.laptop { width: 440px; max-width: 100%; margin-inline: auto; font-size: 12px; line-height: var(--lh-snug); }
.laptop__tapa {
  position: relative;
  margin-inline: 5%;
  aspect-ratio: 16 / 11;
  padding: 10px 10px 12px;
  border-radius: 14px 14px 4px 4px;
  background: var(--foreground-2);
  box-shadow: 0 0 0 1px var(--borde), var(--sombra-pantalla);
}
.laptop__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--fondo);
  color: var(--texto);
}
.laptop::after { /* la base */
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 2px 2px 10px 10px;
  background: linear-gradient(var(--decoracion), var(--borde));
}

/* Interfaz mínima dentro de los dispositivos: la misma tarjeta del producto, en chico */
.vista { position: absolute; inset: 42px 0 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 14px 16px; }
.tableta .vista, .laptop .vista { inset: 0; padding: 14px; }
.ui-cabeza { display: grid; gap: 2px; }
.ui-cabeza .meta { font-size: 11px; }
.ui-titulo { font-size: 17px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.ui-tarjeta {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background: var(--tarjeta);
}
.ui-tarjeta--heroe { border-color: transparent; background: var(--heroe); color: var(--text-on-primary); }
.ui-tarjeta--heroe .meta { color: var(--sobre-heroe-2); }
.ui-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-fila > div { min-width: 0; }
.ui-fila + .ui-fila { padding-top: 8px; border-top: 1px solid var(--borde); }
.ui-tarjeta--heroe .ui-fila + .ui-fila { border-top-color: rgba(255, 255, 255, 0.2); }
.ui-cifra { font-size: 24px; line-height: var(--lh-tight); font-family: var(--font-numeric); font-feature-settings: var(--fvs-tabular); font-weight: var(--fw-bold); letter-spacing: var(--ls-kpi); }
.ui-fuerte { font-weight: var(--fw-semibold); }
.ui-meta { font-size: 11px; color: var(--texto-2); }
.ui-tarjeta--heroe .ui-meta { color: var(--sobre-heroe-2); }
.ui-boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.ui-boton--secundario { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); }
.ui-boton .icono { width: 16px; height: 16px; }
.ui-abajo { margin-top: auto; display: grid; gap: 8px; }
.ui-campo { display: grid; gap: 4px; }
.ui-campo > span:first-child { font-size: 11px; font-weight: var(--fw-semibold); color: var(--texto-2); }
.ui-campo__valor { min-height: 36px; padding: 8px 10px; border: 1px solid var(--accion); border-radius: var(--radius-md); background: var(--tarjeta); box-shadow: var(--ring); }
.ui-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-opcion {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-md);
  background: var(--tarjeta);
  font-size: 11px;
  color: var(--texto-2);
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.ui-opcion strong { font-size: 15px; color: var(--texto); }
.ui-opcion--elegida, .guion--listo .ui-opcion[data-elige].elegida { border-color: var(--accion); background: var(--chip); color: var(--chip-texto); box-shadow: inset 0 0 0 1px var(--accion); }
.ui-opcion--elegida strong, .guion--listo .ui-opcion[data-elige].elegida strong { color: var(--chip-texto); }
.guion--listo .ui-opcion--elegida[data-elige]:not(.elegida) { border-color: var(--borde); background: var(--tarjeta); color: var(--texto-2); box-shadow: none; }
.guion--listo .ui-opcion--elegida[data-elige]:not(.elegida) strong { color: var(--texto); }
.ui-hecho { display: grid; justify-items: center; gap: 8px; margin-block: auto; text-align: center; }
.ui-hecho .chip { width: 56px; height: 56px; border-radius: var(--radius-xl); }
.ui-hecho .chip .icono { width: 28px; height: 28px; }
.ui-hecho .ui-titulo { font-size: 19px; }
.ui-qr { width: 132px; height: 132px; padding: 10px; margin-inline: auto; border-radius: var(--radius-md); background: #FFFFFF; }
.ui-qr svg { width: 100%; height: 100%; fill: var(--foreground); }
.ui-notificacion {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background: var(--tarjeta);
  box-shadow: var(--sombra-flotante);
}
.ui-notificacion .chip { width: 28px; height: 28px; }
.ui-notificacion p { font-size: 12px; }
.ui-notificacion .ui-meta { font-size: 11px; }

/* 2. Guiones ------------------------------------------------------------------------------ */
/* Vistas: varias pantallas apiladas en un mismo dispositivo ([data-vistas]); se ve una. Sin
   guion, la final (.vista--final). Con guion, la activa (.vista--activa, la pone portada.js). */
[data-vistas] > .vista:not(.vista--final) { visibility: hidden; }
.guion--listo [data-vistas] > .vista {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard), visibility 0s linear 0.2s;
}
.guion--listo [data-vistas] > .vista.vista--activa {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease-standard) 0.2s, transform 0.3s var(--ease-standard) 0.2s, visibility 0s linear 0.2s;
}
.guion--listo [data-vistas] > .vista:not(.vista--activa) { transform: translateY(8px); }

/* Lo que aparece en un paso */
.guion--listo [data-aparece] { transition: opacity 0.45s var(--ease-standard), transform 0.45s var(--ease-standard); }
.guion--listo [data-aparece]:not(.visto) { opacity: 0; transform: translateY(10px); }
/* Guion en bucle (el héroe): antes de volver a empezar, lo que apareció se desvanece */
.guion--listo.guion--saliendo [data-aparece] { opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
.guion--listo .ui-notificacion[data-aparece]:not(.visto) { transform: translateY(14px); }
.otro-lado .ui-notificacion { bottom: 14px; }

/* Toque visible: un círculo que se expande sobre el botón que se toca */
.toque {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(71, 52, 220, 0.35);
  box-shadow: 0 0 0 1px rgba(71, 52, 220, 0.5);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
[data-toque].toca { transform: scale(0.96); }
[data-toque].toca .toque { animation: toque 0.75s var(--ease-standard); }
@keyframes toque {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Tecleo: el texto real se queda en el DOM (transparente mientras se escribe, para que lo lean
   los lectores de pantalla y no salte el diseño) y una capa con aria-hidden lo va escribiendo. */
[data-tecleo] { display: block; position: relative; }
.guion--listo [data-tecleo]:not(.tecleado) .tecleo__texto { opacity: 0; }
.tecleo__capa { position: absolute; inset: 0; }
.tecleado .tecleo__capa { display: none; }
.tecleando .tecleo__capa::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: cursor 0.9s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }

/* Tachado: una raya que cruza el texto, renglón por renglón (el fondo de un elemento en línea se
   reparte en sus renglones). Sin guion, ya tachado. */
.tachable {
  text-decoration: none;
  background-image: linear-gradient(var(--texto), var(--texto));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 100% 2px;
  color: var(--texto-2);
}
.guion--listo .tachable { transition: background-size 0.7s var(--ease-standard), color 0.7s var(--ease-standard); }
.guion--listo .tachable:not(.tachado) { background-size: 0% 2px; color: var(--texto); }

/* 3. Héroe «sin dramas» y el lema --------------------------------------------------------- */
.portada-heroe { padding-block: var(--space-10) var(--space-8); }
.portada-heroe__grid { display: grid; gap: var(--space-10); align-items: center; }
.portada-heroe__texto { display: grid; gap: var(--space-5); justify-items: start; }
.portada-heroe__texto h1 { max-width: 14ch; font-size: clamp(38px, 3.6vw + 22px, 60px); }
.portada-heroe__texto .entrada { max-width: 34em; color: var(--texto); }
/* El logotipo grande del héroe: el símbolo y, debajo, el nombre (los trazos oficiales del lockup),
   con el símbolo 4 veces más alto que el nombre. Índigo en claro y blanco en oscuro, como el logo. */
.portada-heroe__logo { display: grid; justify-items: start; gap: var(--space-2); color: var(--primary); }
.portada-heroe__simbolo { width: auto; height: 72px; }
.portada-heroe__nombre { width: auto; height: 18px; }
@media (min-width: 1000px) {
  .portada-heroe__simbolo { height: 96px; }
  .portada-heroe__nombre { height: 24px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portada-heroe__logo { color: var(--on-dark); } }
:root[data-theme="dark"] .portada-heroe__logo { color: var(--on-dark); }
.portada-heroe__nota { font-size: var(--fs-body-sm); color: var(--texto-2); }
.portada-heroe__escenario {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--vitrina-residente);
}
.portada-heroe__escenario .tel { width: 250px; }
@media (min-width: 1000px) {
  .portada-heroe { padding-block: var(--space-12) var(--space-10); }
  .portada-heroe__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); }
  .portada-heroe__escenario { padding: var(--space-10); }
  .portada-heroe__escenario .tel { width: 270px; }
}
.tel__pestanas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 6px 16px;
  border-top: 1px solid var(--borde);
  background: var(--tarjeta);
  font-size: 10px;
  color: var(--texto-2);
}
.tel__pestanas span { display: grid; justify-items: center; gap: 2px; }
.tel__pestanas .icono { width: 18px; height: 18px; }
.tel__pestanas .actual { color: var(--chip-texto); font-weight: var(--fw-semibold); }
.vista--con-pestanas { bottom: 62px; }
/* Pantalla de arranque de la app en el teléfono del héroe (solo con el guion en bucle: sin JS o con
   movimiento reducido no aparece). Es la del producto (frontend/index.html, #otochi-boot) con el
   nombre debajo del símbolo, en proporción 4 a 1 como el logo del héroe. Sigue el tema del sitio con
   el par que forman la del backoffice y la del residente (colores invertidos): en claro, fondo claro
   y símbolo índigo (la del backoffice); en oscuro, fondo índigo y símbolo blanco (la del residente). */
.tel__splash {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: var(--background);
  color: var(--primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-standard), visibility 0s linear 0.45s;
}
.tel__splash-simbolo { width: auto; height: 64px; }
.tel__splash-nombre { width: auto; height: 16px; }
.guion--splash .tel__splash { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease-standard), visibility 0s; }
.guion--splash .tel__splash-simbolo { animation: splash-respira 1.5s ease-in-out; }
@keyframes splash-respira { 0% { transform: scale(0.92); opacity: 0.6; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tel__splash { background: var(--surface-hero); color: var(--text-on-primary); } }
:root[data-theme="dark"] .tel__splash { background: var(--surface-hero); color: var(--text-on-primary); }
/* La marca de la app, chica y discreta, debajo de los avisos (como la de una pantalla de bloqueo) */
.ui-marca { flex: none; align-self: center; width: auto; height: 13px; margin-top: auto; color: var(--texto-2); opacity: 0.75; }
.portada-heroe .tel { aspect-ratio: 9 / 18; }
.avisos-app { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.aviso-app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background: var(--tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
.aviso-app .chip { width: 30px; height: 30px; }
.aviso-app__titulo { font-weight: var(--fw-semibold); }

.lema {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--borde);
  text-align: center;
}
.lema__frase { max-width: 22ch; font-size: clamp(24px, 1.6vw + 16px, 32px); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
.lema .rotulos { justify-content: center; }

/* 4. Antes y después ---------------------------------------------------------------------- */
.antes-despues { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.ad { display: grid; gap: var(--space-3); align-content: start; }
.ad__cabeza { display: flex; align-items: center; gap: var(--space-3); }
.ad__lado { display: grid; gap: var(--space-2); }
.ad__lado > .etiqueta { font-size: var(--fs-meta-sm); }
.ad__burbuja {
  position: relative;
  justify-self: start;
  max-width: 92%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  background: var(--relleno-neutro);
  font-size: var(--fs-parrafo);
}
.ad__quien { display: block; margin-bottom: 2px; font-size: var(--fs-meta-sm); font-weight: var(--fw-semibold); color: var(--texto-2); }
.ad__flecha { justify-self: center; width: 20px; height: 20px; color: var(--decoracion); transform: rotate(90deg); }
.ad__despues {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--chip);
}
@media (min-width: 900px) {
  .antes-despues { gap: var(--space-5); }
  .ad { grid-template-columns: 190px minmax(0, 5fr) 24px minmax(0, 6fr); align-items: center; gap: var(--space-6); }
  .ad__cabeza { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .ad__flecha { transform: none; }
  .ad__burbuja { max-width: 100%; }
}
.ad__despues > .etiqueta { display: flex; align-items: center; gap: var(--space-2); color: var(--chip-texto); font-size: var(--fs-meta-sm); }
.ad__nuevo { font-size: 19px; font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--texto); }
.ad__prueba { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ad__prueba .rotulo { background: var(--tarjeta); }

/* El escenario (portada.js, .carrusel--activo): un caso a la vez, grande y en loop, con pestañas
   que marcan el avance y dejan elegir. Los cuatro casos se apilan en la misma celda, así el alto es
   el del caso más alto y no brinca. Sin JS o con movimiento reducido no hay pestañas: se ven los
   cuatro casos en su estado final, como arriba. */
.ad-controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ad-pestanas { flex: 1 1 560px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ad-pestana {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--texto-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: left;
  cursor: pointer;
}
.ad-pestana:hover { color: var(--texto); }
.ad-pestana[aria-selected="true"] { color: var(--chip-texto); }
.ad-pestana .icono { width: 16px; height: 16px; }
.ad-pestana__corto { display: none; }
.ad-pestana::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--borde); }
.ad-pestana__barra { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--accion); transform: scaleX(0); transform-origin: left center; }
.ad-pausa { flex: none; min-width: 0; min-height: 36px; padding: 0 var(--space-3); border-color: transparent; background: transparent; color: var(--texto-2); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 0.2em; }
.ad-pausa:hover { color: var(--texto); border-color: transparent; }
.carrusel--pausado .tecleando .tecleo__capa::after { animation: none; }

.carrusel--activo .antes-despues { grid-template-columns: minmax(0, 1fr); gap: 0; }
.carrusel--activo .ad {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  transition: opacity 0.5s var(--ease-standard), visibility 0s linear 0.5s;
}
.carrusel--activo .ad.ad--activo { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease-standard) 0.2s, visibility 0s linear 0.2s; }
.carrusel--activo .ad__burbuja { max-width: 100%; padding: var(--space-4) var(--space-5); font-size: clamp(22px, 1.4vw + 16px, 34px); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: var(--ls-tight); }
.carrusel--activo .ad__quien { margin-bottom: var(--space-1); font-size: var(--fs-body-sm); letter-spacing: 0; }
.carrusel--activo .ad__nuevo { font-size: clamp(22px, 1.4vw + 16px, 34px); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: var(--ls-tight); }
.carrusel--activo .ad__despues { padding: var(--space-5); gap: var(--space-4); transition: opacity 0.45s var(--ease-standard), transform 0.45s var(--ease-standard); }
.carrusel--activo .ad__prueba { font-size: var(--fs-body); transition: opacity 0.45s var(--ease-standard), transform 0.45s var(--ease-standard); }
.carrusel--activo .ad__prueba .badge { font-size: var(--fs-body-sm); padding: 3px var(--space-3); }
.carrusel--activo .ad:not(.ad--despues) .ad__despues { opacity: 0; transform: translateY(10px); }
.carrusel--activo .ad:not(.ad--detalle) .ad__prueba { opacity: 0; transform: translateY(6px); }
.carrusel--activo .tachable { background-size: 100% 3px; transition: background-size 1s var(--ease-standard), color 1s var(--ease-standard); }
.carrusel--activo .tachable:not(.tachado) { background-size: 0% 3px; color: var(--texto); }
.carrusel--activo [data-tecleo]:not(.tecleado) .tecleo__texto { opacity: 0; }
@media (min-width: 900px) {
  .carrusel--activo .ad {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    grid-template-areas: "cabeza cabeza cabeza" "antes flecha despues";
    align-items: center;
    gap: var(--space-5) var(--space-6);
    padding: var(--space-10) var(--space-12);
  }
  .carrusel--activo .ad__cabeza { grid-area: cabeza; flex-direction: row; align-items: center; gap: var(--space-3); }
  .carrusel--activo .ad__lado { grid-area: antes; }
  .carrusel--activo .ad__flecha { grid-area: flecha; width: 32px; height: 32px; }
  .carrusel--activo .ad__despues { grid-area: despues; }
}
@media (max-width: 639px) {
  .ad-pestanas { flex-basis: 100%; gap: var(--space-1); }
  .ad-pestana { flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-2) 2px var(--space-3); font-size: var(--fs-meta-sm); text-align: center; }
  .ad-pestana__nombre { display: none; }
  .ad-pestana__corto { display: inline; }
  .ad-controles { gap: var(--space-1); }
  .ad-pausa { margin-left: auto; min-height: 32px; }
  .carrusel--activo .ad { padding: var(--space-5) var(--space-4); }
  .carrusel--activo .ad__despues { padding: var(--space-4); }
}

/* 5. Para todo tipo de condominio ----------------------------------------------------------- */
.todo-tipo { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .todo-tipo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); } }
.todo-tipo .seccion__cabeza { margin-bottom: 0; }
.todo-tipo .seccion__cabeza p.todo-tipo__porque { font-size: var(--fs-entrada); font-weight: var(--fw-semibold); color: var(--texto); }
.tarjeta.razones { display: grid; gap: 0; padding: var(--space-2) var(--space-5); margin: 0; list-style: none; counter-reset: razon; }
.razon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-4); }
.razon + .razon { border-top: 1px solid var(--borde); }
.razon p { font-size: var(--fs-parrafo); }
.razon .badge { margin-left: var(--space-1); vertical-align: 1px; }

/* 6. Un día en tu condominio -------------------------------------------------------------- */
.dia { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.momento {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-12);
}
.momento::before { /* la línea del día */
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--borde);
}
.momento:last-child { padding-bottom: 0; }
.momento:last-child::before { display: none; }
.momento__punto {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accion);
  border-radius: 50%;
  background: var(--accion);
  box-shadow: 0 0 0 4px var(--fondo);
  transition: background-color 0.4s var(--ease-standard);
}
.guion--listo:not(.activo) .momento__punto { background: var(--fondo); }
.momento__cuerpo { display: grid; gap: var(--space-8); align-items: center; }
.momento__texto { display: grid; gap: var(--space-3); align-content: start; }
.momento__hora { display: flex; align-items: baseline; gap: var(--space-3); }
.momento__hora .cifra { font-size: var(--fs-kpi); line-height: 1; color: var(--chip-texto); }
.momento__texto h3 { font-size: 24px; line-height: var(--lh-snug); font-weight: var(--fw-bold); }
.momento__texto > p:not(.momento__hora) { color: var(--texto-2); max-width: 40em; }
.momento__pasos { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.momento__pasos li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--fs-body); }
.momento__pasos .icono { margin-top: 1px; color: var(--chip-texto); }
.momento__visual { display: grid; justify-items: center; }
.momento__visual .tel { width: 250px; }
@media (min-width: 900px) {
  .momento { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-8); padding-bottom: var(--space-16); }
  .momento::before { left: 19px; top: 40px; }
  .momento__punto { width: 40px; height: 40px; }
  .momento__cuerpo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
  .momento__texto { padding-top: 2px; }
  .momento__visual .tel { width: 270px; }
}

/* 7. Amenidades --------------------------------------------------------------------------- */
.amenidades { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .amenidades { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } }
.amenidades .seccion__cabeza { margin-bottom: 0; }
.amenidades .lista-funciones li { font-size: var(--fs-parrafo); }

/* 8. Del otro lado del QR ----------------------------------------------------------------- */
.otro-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: center; }
.otro-lado__pieza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); justify-items: center; width: 100%; min-width: 0; margin: 0; }
.otro-lado__pieza figcaption { display: grid; gap: var(--space-1); max-width: 30ch; text-align: center; font-size: var(--fs-body); color: var(--texto-2); }
.otro-lado__pieza figcaption strong { color: var(--texto); font-size: var(--fs-section-title); }
.otro-lado .tel { width: 220px; }
.otro-lado .tableta { width: 260px; }
.otro-lado .laptop { width: 420px; }
.otro-lado__enlace { position: relative; width: 2px; height: 48px; border-radius: 1px; background: var(--borde); overflow: hidden; }
.otro-lado__enlace::after { /* el pulso que viaja de una pantalla a la otra */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--accion);
}
.guion--listo .otro-lado__enlace::after { transform: translateY(-100%); transition: transform 0.6s var(--ease-standard); }
.guion--listo .otro-lado__enlace.visto::after { transform: none; }
@media (min-width: 1100px) {
  .otro-lado { grid-template-columns: minmax(0, 4fr) 56px minmax(0, 5fr) 56px minmax(0, 7fr); align-items: start; gap: var(--space-4); }
  .otro-lado .tel { width: 220px; }
  .otro-lado .tableta { width: 250px; }
  .otro-lado .laptop { width: 100%; max-width: 420px; }
  .otro-lado__enlace { align-self: center; width: 100%; height: 2px; margin-top: -88px; }
  .guion--listo .otro-lado__enlace::after { transform: translateX(-100%); }
}
.caseta-escaner { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: auto; border-radius: var(--radius-lg); }
.caseta-escaner::before, .caseta-escaner::after { /* esquinas del visor */
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--primary-bright);
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 0 100%, 0 0, 100% 0, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 100%);
}
.caseta-escaner::after { border: 0; clip-path: none; inset: 12% 12% auto; height: 2px; border-radius: 1px; background: var(--primary-bright); box-shadow: 0 0 10px var(--primary-bright); }
.guion--listo .caseta-escaner::after { animation: escaneo 1.4s ease-in-out infinite alternate; }
@keyframes escaneo { to { transform: translateY(110px); } }
.caseta-escaner .ui-qr { width: 96px; height: 96px; padding: 6px; }
.caseta-titulo { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.caseta-estado { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: var(--ls-kpi); color: var(--success); } /* #00BB7F sobre #16161C: 7.3:1 */
.caseta-dato { display: grid; gap: 2px; }
.caseta-dato span:first-child { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-dark-muted); }
.caseta-dato span:last-child { font-size: 15px; font-weight: var(--fw-semibold); }
.caseta-boton { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: var(--radius-md); background: var(--primary-bright); color: #FFFFFF; font-weight: var(--fw-semibold); }
.admin-ui { display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100%; }
.admin-ui__menu { display: grid; align-content: start; gap: 4px; padding: 10px 6px; border-right: 1px solid var(--borde); background: var(--tarjeta); font-size: 10px; color: var(--texto-2); }
.admin-ui__menu span { padding: 4px 6px; border-radius: var(--radius-xs); }
.admin-ui__menu span:first-child { margin-bottom: 4px; font-weight: var(--fw-bold); color: var(--primary); }
.admin-ui__menu .actual { background: var(--chip); color: var(--chip-texto); font-weight: var(--fw-semibold); }
.admin-ui__cuerpo { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; }
.admin-ui__cuerpo .ui-titulo { font-size: 14px; }
.bitacora { display: grid; padding: 0; margin: 0; list-style: none; border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--tarjeta); overflow: hidden; }
.bitacora li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11px; }
.bitacora li + li { border-top: 1px solid var(--borde); }
.bitacora li > span:first-child { font-feature-settings: var(--fvs-tabular); color: var(--texto-2); }
.bitacora small { display: block; font-size: 10px; color: var(--texto-2); }
.bitacora .badge { font-size: 10px; }
.bitacora .nueva { background: var(--chip); }

/* 9. Por qué la gente sí la usa ------------------------------------------------------------- */
.la-usan { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .la-usan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .la-usan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.la-usan li { display: grid; gap: var(--space-3); align-content: start; }
.la-usan h3 { font-size: var(--fs-section-title); }
.la-usan p { color: var(--texto-2); font-size: var(--fs-body); }

/* 10. Hecha por usuarios -------------------------------------------------------------------- */
.hecha { display: grid; gap: var(--space-4); justify-items: center; max-width: 820px; margin-inline: auto; text-align: center; }
.hecha__simbolo { width: 56px; height: 56px; color: var(--accion); }
.hecha h2 { font-size: clamp(30px, 2.4vw + 18px, 46px); }
.hecha p { max-width: 36em; font-size: var(--fs-entrada); color: var(--texto-2); }
.hecha .acciones { justify-content: center; margin-top: var(--space-2); }

/* Puente hacia la parte de administración y comités (más sobria) */
.puente { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-8); }
.puente p:not(.etiqueta) { color: var(--texto-2); }

/* 11. Precios ----------------------------------------------------------------------------- */
.precios { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .precios { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); } }
.precios .seccion__cabeza { margin-bottom: 0; }
.precios .rejilla { margin: 0; }
.precios .tarjeta h3 { font-size: var(--fs-section-title); }

/* Teléfono angosto (360–430 px): dispositivos un poco más chicos, sin desplazamiento horizontal */
@media (max-width: 430px) {
  .portada-heroe__escenario { padding: var(--space-6) var(--space-3); }
  .portada-heroe__escenario .tel, .momento__visual .tel { width: 236px; }
  .otro-lado .tel { width: 214px; }
  .otro-lado .tableta { width: 244px; }
  .laptop__tapa { margin-inline: 2%; }
  .admin-ui { grid-template-columns: 64px minmax(0, 1fr); }
  .admin-ui__menu { font-size: 9px; }
  .laptop__tapa { aspect-ratio: 16 / 12.5; }
  .ad__nuevo { font-size: 18px; }
  .caseta-estado { font-size: 26px; }
  .tarjeta.razones { padding-inline: var(--space-4); }
}