/*
  Los estilos comunes de la web de Fomo (Fomo_MARKETING.md): la página
  principal y las de cada QR los comparten, para no copiar nada a mano.
  Sin nada cargado de fuera. Los iconos de grupo, en iconos.css.
*/

/* Switzer Black: la letra de los títulos de la web y de los flyers (Abel,
   07/10/2026). Alojada aquí, sin tocar el archivo (lo pide su licencia,
   Marca/fuentes/Switzer/License): nada se carga de fuera. */
@font-face {
  font-family: "Switzer";
  src: url("fuentes/Switzer-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Colores: claro por defecto; en modo oscuro, negro con letras blancas, como el flyer. */
:root {
  --fondo: #ffffff;
  --texto: #000000;
  --boton: #000000;
  --texto-del-boton: #ffffff;
  --coral: #ff665c;
  --sombra-del-sticker: 0 14px 30px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.05);
  /* La base de los stickers: la de la app (`FomoSurface.fondoDeSticker`) */
  --base-del-sticker: #ffffff;
  /* Los de la home de la app (`FomoSurface`) */
  --app-fondo: #f0f0f0;
  --app-cabecera: #ffffff;
  --app-gris: #8e8e93;
  --app-numero: #b4b4b9;
  --app-cristal: #ffffff;
  --app-filo: rgba(0, 0, 0, 0.07);
  --app-sistema: #ffffff;
  /* El fondo de la hoja de un plan en la app (las piezas de votar van sobre él) */
  --hoja: #ffffff;
  /* La letra gris de la web: más oscura que la de la app para leerse sobre
     blanco (4,5:1; revisión del 09/10/2026). En oscuro, la de la app */
  --letra-gris: #6c6c70;
  /* La guía de la derecha: puntitos grises, como apagados, y la raya de la
     pantalla en la que estás, un poco más oscura (Abel, 09/10/2026). La raya,
     con 3:1 sobre el blanco y sobre el recuadro (3,6 y 3,3); los puntitos no
     llegan, por decisión de Abel (Fomo_MARKETING.md §1.3) */
  --guia-punto: #d1d1d6;
  --guia-raya: #86868b;
  /* El recuadro gris de cada sección, estilo Apple: muy suave */
  --recuadro: #f5f5f7;
  /* Los globos de las excusas de «¿Este finde quedamos?» */
  --chat-burbuja: #ffffff;
  /* Los botones sin cristal (votar, repetir, subir) */
  --boton-solido: #ffffff;
  /* Las piezas de la app dibujadas (09/10/2026), con los colores medidos en
     sus capturas (otra vez el 13/10/2026, Abel: «las cards, tal cual, con los
     mismos colores en la app que en la web»; el Escaparate, pieza «dia»): el
     fondo de una card (casi blanco; en oscuro, gris, y plana: Abel,
     14/10/2026, «no son planas, intentan medio simular el Liquid Glass con
     una franja más clara en la parte superior»: fuera ese brillo) y el
     cristal de debajo de una card de grupo (--cristal-de-card:
     el cristal de iOS sobre el fondo de la app, que aclara un poco; la card
     de grupo pone encima su color al 55 %, ver .card.de-grupo). Y el cristal
     de los botones y las pills (glassEffect), imitado («que sí se vean estilo
     Liquid Glass»): blanco que se transparenta más abajo, un brillo arriba y
     otro más flojo abajo, un filo gris muy fino y una sombra suave */
  --card-fondo: #fefefe;
  --cristal-de-card: #f8f8f8;
  /* Sin cristal en toda la web (Abel, 19/10/2026: «haz que en la web nada
     tenga liquid glass»): lo que en la app es de cristal, aquí liso, del
     color de los botones, sin brillos ni filo */
  --cristal: var(--boton-solido);
  --cristal-filo: none;
  /* Los grises de texto de iOS: secundario, terciario y el de fin de «Ocupado»
     (cuaternario, un 10 % más sólido, `FomoSurface.letraApagada`) */
  --letra-secundaria: rgba(60, 60, 67, 0.6);
  --letra-terciaria: rgba(60, 60, 67, 0.3);
  --letra-apagada: rgba(60, 60, 67, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --texto: #ffffff;
    --boton: #ffffff;
    --texto-del-boton: #000000;
    --sombra-del-sticker: 0 14px 30px rgba(0, 0, 0, 0.55);
    --base-del-sticker: #212121;
    --app-fondo: #000000;
    --app-cabecera: #1c1c1e;
    --app-numero: #5a5a5f;
    --app-cristal: #3a3a3c;
    --app-filo: rgba(255, 255, 255, 0.1);
    --app-sistema: #000000;
    --hoja: #1c1c1e;
    --letra-gris: #8e8e93;
    --guia-punto: #3a3a3c;
    --guia-raya: #8e8e93;
    --recuadro: #161617;
    --chat-burbuja: #262628;
    --boton-solido: #2c2c2e;
    --card-fondo: #1f1f1f;
    --cristal-de-card: #212121;
    --cristal: var(--boton-solido);
    --cristal-filo: none;
    --letra-secundaria: rgba(235, 235, 245, 0.6);
    --letra-terciaria: rgba(235, 235, 245, 0.3);
    --letra-apagada: rgba(235, 235, 245, 0.28);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  /* La letra del sistema: en un iPhone es la misma que la de la app. */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  padding-bottom: 120px;
  overflow-x: clip;
}
/* La página solo se mueve de arriba abajo (Abel, 13/10/2026: en el móvil se
   podía mover de lado). Lo que se sale de la pantalla a lo ancho se recorta
   en su sección (la portada, abajo), y esto es por si acaso: en Safari, con
   el recorte solo en body, la página seguía midiendo más que la pantalla */
html { overflow-x: clip; }

/* El logo de Abel (07/10/2026; Marca/fomologo.svg), del color del texto */
.marca {
  padding-top: 40px;
  line-height: 0;
}
.marca .logo {
  height: 24px;
  width: auto;
  fill: currentColor;
}

/* La frase: lo grande de la página. */
h1, h2, .gancho {
  font-family: "Switzer", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
}
h1 {
  position: relative;
  z-index: 3;
  max-width: 17ch;
  margin: 12px auto 0;
  padding: 0 16px;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
/* El eslogan de la página principal: corto, y por eso más grande */
h1.eslogan {
  max-width: none;
  margin-top: clamp(56px, 8vw, 112px);
  font-size: clamp(48px, 8.5vw, 120px);
  line-height: 0.95;
}
/* «QUÉ FOMO!», siempre junto: en una línea o en dos, «¡J*DER,» y «QUÉ
   Fomo!», nunca «¡J*DER, QUÉ» y «Fomo!» (Abel, 14/10/2026) */
.sin-partir { white-space: nowrap; }
/* Qué es Fomo, en una frase, debajo del eslogan (14/10/2026), en el gris de
   los textos de la web */
/* (más grande, más gruesa y más oscura: la única descripción que queda, y
   la más importante; Abel, 22/10/2026: «dale más peso a la tipografía de la
   descripción, ahora la veo muy pequeña y fina»; antes, de 16 a 21, normal y
   en el gris de los textos) */
.lema {
  margin: var(--entre-titulo-y-texto) auto 0;
  padding-inline: 24px;
  color: var(--letra-del-lema);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
:root { --letra-del-lema: #3a3a3c; }
@media (prefers-color-scheme: dark) { :root { --letra-del-lema: #d1d1d6; } }
/* Y más aire entre el eslogan y el iPhone (Abel, 07/10/2026) */
.lema + .zona-del-movil { margin-top: clamp(64px, 8vw, 120px); }

/* ---------- El iPhone ---------- */

.zona-del-movil {
  /* El ancho del móvil: de él salen el alto y dónde van los stickers. En la
     página por pantallas, otro máximo, y menos si no cabe (abajo) */
  --movil-maximo: clamp(220px, 24vw, 300px);
  --movil: var(--movil-maximo);
  /* El tamaño de los stickers y lo lejos que se van del móvil. */
  --escala: 1;
  --lejania: 1;
  position: relative;
  margin-top: 36px;
  padding: 0 0 64px;
  /* En el móvil, el iPhone del grupo asoma por la derecha y se sale: se
     recorta aquí, a lo ancho (lo de arriba y abajo, los stickers, no) */
  overflow-x: clip;
}
@media (max-width: 1199px) { .zona-del-movil { --escala: 0.8; --lejania: 0.55; } }
@media (max-width: 700px)  { .zona-del-movil { --escala: 0.5; } }

.movil {
  position: relative;
  z-index: 1;
  width: var(--movil);
  margin: 0 auto;
}
.marco { /* el iPhone 18 Pro plateado, con la pantalla vacía (de Figma) */
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* La pantalla: el hueco del marco. Dentro, la home ficticia, medida en los
   puntos de un iPhone de 402 de ancho (--pt: lo que mide un punto aquí). */
.pantalla {
  position: absolute;
  left: 4.2%;
  top: 1.7%;
  width: 91.6%;
  height: 96.6%;
  overflow: hidden;
  border-radius: 12% / 5.6%;
  container-type: inline-size;
  background: var(--app-fondo);
}

/* ---------- La home ficticia: la de la app, con un día inventado ---------- */

.ios {
  --pt: calc(100cqw / 402);
  position: relative;
  height: 100%;
  color: var(--texto);
  font-size: calc(17 * var(--pt));
  text-align: left;
}
.ios img { display: block; }
/* La cabecera blanca, con las esquinas de abajo redondeadas */
.ios .cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(285 * var(--pt));
  border-radius: 0 0 calc(40 * var(--pt)) calc(40 * var(--pt));
  background: var(--app-cabecera);
}
/* La barra de estado */
.ios .estado {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(62 * var(--pt));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(34 * var(--pt)) 0 calc(48 * var(--pt));
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}
.ios .estado svg { height: calc(12.5 * var(--pt)); width: auto; fill: currentColor; }
.ios .estado .iconos { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
/* La barra de arriba: «Mi calendario» y la campana, de cristal */
.ios .cristal {
  position: absolute;
  top: calc(62 * var(--pt));
  height: calc(44 * var(--pt));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  border-radius: 999px;
  background: var(--app-cristal);
  box-shadow: 0 0 0 calc(0.5 * var(--pt)) var(--app-filo), 0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.06);
}
.ios .calendarios { left: calc(16 * var(--pt)); padding: 0 calc(16 * var(--pt)); }
.ios .campana { right: calc(16 * var(--pt)); width: calc(44 * var(--pt)); justify-content: center; }
/* La fecha grande, y el mes y el día a la derecha */
.ios .fecha {
  position: absolute;
  top: calc(128 * var(--pt));
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  height: calc(48 * var(--pt));
}
.ios .dia {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ios .numero-grande { font-size: calc(50 * var(--pt)); font-weight: 700; line-height: 1; }
.ios .mes {
  color: var(--app-gris);
  font-size: calc(20 * var(--pt));
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}
/* La semana */
.ios .semana {
  position: absolute;
  top: calc(195 * var(--pt));
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.ios .semana .etiqueta {
  color: var(--app-gris);
  font-size: calc(11 * var(--pt));
  font-weight: 700;
}
.ios .semana .etiqueta.hoy { color: var(--coral); }
.ios .semana .num {
  position: relative;
  z-index: 1;
  margin-top: calc(6 * var(--pt));
  height: calc(44 * var(--pt));
  line-height: calc(44 * var(--pt));
  color: var(--app-numero);
  font-size: calc(22 * var(--pt));
  font-weight: 700;
}
.ios .semana .num.elegido { color: var(--texto); }
.ios .semana .num .estrella-dia {
  position: absolute;
  top: calc(4 * var(--pt));
  right: calc(4 * var(--pt));
  color: var(--amarillo);
}
/* El día elegido: la cajita blanca que se mueve de un día a otro */
.ios .seleccion {
  --columna: 4;
  position: absolute;
  top: calc(212 * var(--pt));
  left: calc(16 * var(--pt) + (370 * var(--pt) / 7) * var(--columna) + 3 * var(--pt));
  width: calc(370 * var(--pt) / 7 - 6 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: var(--app-cabecera);
  box-shadow: 0 calc(1 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.1);
      }
.ios .asa {
  position: absolute;
  top: calc(274 * var(--pt));
  left: 50%;
  width: calc(36 * var(--pt));
  height: calc(5 * var(--pt));
  margin-left: calc(-18 * var(--pt));
  border-radius: 999px;
  background: var(--app-numero);
  opacity: 0.5;
}
/* Las cards del día: las pinta la propia app (`PintarStickers`) */
.ios .cards {
  position: absolute;
  top: calc(300 * var(--pt));
  left: calc(16 * var(--pt));
  width: calc(370 * var(--pt));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--pt));
}
/* Abajo: el botón coral de crear y «Hoy» */
.ios .crear {
  position: absolute;
  bottom: calc(29 * var(--pt));
  left: 50%;
  width: calc(76 * var(--pt));
  height: calc(47 * var(--pt));
  margin-left: calc(-38 * var(--pt));
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 calc(4 * var(--pt)) calc(12 * var(--pt)) rgba(255, 102, 92, 0.3);
}
.ios .crear .icono { color: #fff; }
.ios .volver-a-hoy {
  top: auto;
  bottom: calc(29 * var(--pt));
  right: calc(33 * var(--pt));
  height: calc(47 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  gap: calc(6 * var(--pt));
  font-weight: 600;
}

/* ---------- Los stickers ---------- */

/* El sticker de la app (`StickerDeFomo`), dibujado en vectores con sus
   medidas: nítido a cualquier tamaño y casi sin peso. Los iconos son los
   símbolos de Apple, recortados (`iconos.css`, de `Herramientas/iconos_web.swift`) y teñidos del color del grupo.
   --color: el del grupo o el calendario; --tam: más grande o más pequeño. */
.stickers { list-style: none; }
.sticker {
  position: absolute;
  z-index: 2;
  top: var(--y);
  width: max-content;
  rotate: var(--giro);
}
.tarjeta {
  position: relative;
  display: flex;
  gap: 12px;
  width: max-content;
  max-width: 320px;
  padding: 20px;
  overflow: hidden;
  border-radius: 29px;
  /* Un plan: su color, un 14 % sobre la base, como en la app (mezclado «in
     oklab», como `Color.mix`: ver .card.de-grupo) */
  background: color-mix(in oklab, rgb(var(--color)) 14%, var(--base-del-sticker));
  box-shadow: var(--sombra-del-sticker);
  color: var(--texto);
  text-align: left;
  transform: scale(calc(var(--tam) * var(--escala)));
}
/* Un evento tuyo, sin color de fondo (como en la app desde el 07/10/2026) */
.tarjeta.evento { background: var(--base-del-sticker); }
.izquierda .tarjeta { transform-origin: right center; }
.derecha .tarjeta { transform-origin: left center; }
.franja {
  position: relative;
  /* El ancho también escrito aparte: sin él, al medir lo que ocupa la card,
     el navegador no contaba la franja y la card salía 5 px más estrecha (el
     texto se comía el margen de la derecha: 15 en vez de los 20 de la app) */
  flex: 0 0 5px;
  width: 5px;
  border-radius: 999px;
  background: rgb(var(--color));
}
.datos { position: relative; }
.titulo {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  white-space: nowrap;
}
.pie {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
  white-space: nowrap;
}
.grupo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  color: rgb(var(--color));
  background: rgb(var(--color) / 0.14);
}
/* La firma, el logo, del color del título: como en la app (07/10/2026) */
.firma { margin-left: auto; flex: none; height: 12px; width: auto; fill: currentColor; }
/* Un icono: el recorte del símbolo, pintado del color de lo que lo rodea */
.icono {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--recorte) center / contain no-repeat;
  mask: var(--recorte) center / contain no-repeat;
}
/* Cada icono (su recorte y su tamaño en la etiqueta) está en iconos.css */
/* El tema: el icono del grupo repetido por el fondo (lo pone el código de abajo) */
.tema { position: absolute; inset: 0; }
.tema .icono { position: absolute; color: rgb(var(--color) / var(--alfa, 1)); }

/* Lo que hay del borde del móvil al sticker (--d): con más, más lejos;
   negativo, pisa el móvil. */
.izquierda { right: calc(50% + var(--movil) * var(--medio-conjunto, 0.5) + var(--d) * var(--lejania)); transform-origin: right center; }
.derecha   { left: calc(50% + var(--movil) * var(--medio-conjunto, 0.5) + var(--d) * var(--lejania)); transform-origin: left center; }
/* Los dos iPhone de la portada (Abel, 13/10/2026): Mi calendario delante y
   el grupo detrás, a la derecha, más pequeño y un poco girado; los dos
   juntos, centrados. El de delante tapa poco al de detrás (con un tercio
   tapado no se leía el nombre del grupo: revisión del 13/10/2026). Miden 1,8
   veces un iPhone: los stickers se colocan a 0,9 del centro (--medio-conjunto) */
.pareja-de-moviles { position: relative; display: flex; justify-content: center; align-items: center; }
.pareja-de-moviles .movil { flex: none; margin: 0; }
/* El de delante, también un poco girado, hacia el otro lado (Abel,
   26/10/2026: «que el div.movil esté ligeramente inclinado como el otro»;
   antes, recto) */
.pareja-de-moviles .movil:first-child { z-index: 2; rotate: -3deg; }
.movil-de-detras { z-index: 1; width: calc(var(--movil) * 0.92); margin-left: calc(var(--movil) * -0.12) !important; rotate: 4deg; }
.zona-del-movil:has(.pareja-de-moviles) { --medio-conjunto: 0.9; }
/* Donde no caben los dos con los stickers (una ventana de ancho medio, una
   tableta en vertical), solo uno: los stickers se salían de la pantalla */
@media (min-width: 701px) and (max-width: 1080px), (min-width: 701px) and (orientation: portrait) {
  .movil-de-detras { display: none; }
  .zona-del-movil:has(.pareja-de-moviles) { --medio-conjunto: 0.5; }
}
/* En el móvil, los dos juntos y centrados, como en el ordenador (Abel,
   14/10/2026: «centres las dos pantallas al centro, no que la primera, la de
   "Mi calendario", vaya al medio»; antes iba en el centro el de delante y el
   del grupo asomaba por la derecha, cortado). La pareja mide 1,8 iPhone: el
   iPhone, como mucho, del ancho que cabe con 16 de aire a cada lado (si no,
   ensanchaba la portada y los stickers de la derecha se salían de la
   pantalla). Con el giro del de detrás, su esquina sobresale 0,065 iPhone
   por la derecha: la pareja se ve de 1,865 iPhone y se corre la mitad de eso
   a la izquierda, para quedar centrada de verdad. Los stickers, alrededor
   del de delante, como hasta ahora */
@media (max-width: 700px) {
  .zona-del-movil:has(.pareja-de-moviles) {
    --medio-conjunto: 0.5;
    --movil: min(var(--movil-maximo), calc((100vw - 32px) / 1.865));
  }
  .por-secciones .zona-del-movil:has(.pareja-de-moviles) {
    --movil: min(var(--movil-maximo), calc((100svh - var(--resto)) * 695 / 1429), calc((100vw - 32px) / 1.865));
  }
  .pareja-de-moviles { translate: calc(var(--movil) * -0.0325) 0; }
}

/* Los de fuera (.exterior) se colocan por su borde de fuera, todos a la
   misma distancia del centro (--borde): así lo de la derecha no llega más
   lejos que lo de la izquierda y el conjunto queda centrado (Abel, 07/10/2026) */
.zona-del-movil { --borde: 640px; }
/* --dentro: lo que se mete hacia el centro desde ese borde (la portada, para
   repartirlos más; Abel, 13/10/2026) */
.exterior.izquierda { right: auto; left: calc(max(24px, 50% - var(--borde)) + var(--dentro, 0px)); transform-origin: left center; }
.exterior.derecha   { left: auto; right: calc(max(24px, 50% - var(--borde)) + var(--dentro, 0px)); transform-origin: right center; }
.exterior.izquierda .tarjeta { transform-origin: left center; }
.exterior.derecha .tarjeta { transform-origin: right center; }

/* En un móvil caben menos: cerca de los bordes de la pantalla, pisando un
   poco el iPhone, y a 17 px de cada lado, así que el conjunto queda centrado
   (Abel, 14/10/2026: «ligeramente más alineado a la izquierda»: antes, a 8
   y a 26, y girados, los de la izquierda llegaban al borde) sin que les
   caigan encima los puntitos de la guía */
@media (max-width: 700px) {
  .sticker { top: var(--y-en-movil, var(--y)); }
  .izquierda, .exterior.izquierda { left: 17px; right: auto; transform-origin: left center; }
  .derecha, .exterior.derecha { right: 17px; left: auto; transform-origin: right center; }
  .izquierda .tarjeta { transform-origin: left center; }
  .derecha .tarjeta { transform-origin: right center; }
  .solo-en-grande { display: none; }
}

/* ---------- El movimiento: solo, al ver el iPhone ---------- */

/* Antes de empezar (el código pone .con-animacion): los stickers,
   escondidos. Sin código, todo se ve ya en su sitio. */
.con-animacion:not(.en-marcha) .sticker { opacity: 0; }

/* En marcha: el móvil sube y, mientras, salen los stickers. Suave, como `fomoSmooth`. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.en-marcha .movil { animation: aparecer 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Cada sticker aparece en su sitio, sin volar ni rebotar (Abel, 13/10/2026:
   «la animación de aparición no me gusta»), y **al azar**, distinto cada vez
   que se abre la página («no tan lineal, quiero que sea aleatorio»): en un
   orden cualquiera, cada uno desde un lado (--desde-x, --desde-y), un poco
   girado (--desde-giro) y algo más pequeño (--desde-tam), en su tiempo
   (--dura); lo pone comun.js. Suave, como `fomoSmooth` en la app. Después
   flota a su aire («me gusta la animación de movimiento que tienen una vez
   están en la pantalla»): sube y se va un poco hacia un lado, y se balancea
   con otro ritmo, así que nunca repite el mismo dibujo */
@keyframes aparecer-sticker {
  from {
    opacity: 0;
    translate: var(--desde-x, 0px) var(--desde-y, 18px);
    scale: var(--desde-tam, 0.94);
    rotate: calc(var(--giro) + var(--desde-giro, 0deg));
  }
  to { opacity: 1; translate: 0 0; scale: 1; rotate: var(--giro); }
}
/* (--sube: lo que sube, 7 px; los widgets, menos: comun.css, 4c) */
@keyframes deriva {
  0%, 100% { translate: 0 0; }
  30% { translate: var(--deriva, 3px) calc(var(--sube, 7px) * -1); }
  65% { translate: calc(var(--deriva, 3px) * -0.6) calc(var(--sube, 7px) * -0.43); }
}
@keyframes balanceo {
  0%, 100% { rotate: 0deg; }
  40% { rotate: var(--balanceo, 1.4deg); }
  75% { rotate: calc(var(--balanceo, 1.4deg) * -0.7); }
}
.en-marcha .sticker { animation: aparecer-sticker var(--dura, 0.7s) cubic-bezier(0.2, 0.8, 0.2, 1) var(--salida, 0.3s) both; }
.en-marcha .sticker .flota {
  animation:
    deriva var(--flota) ease-in-out calc(var(--salida, 0.3s) + var(--dura, 0.7s)) infinite,
    balanceo calc(var(--flota) * 1.37) ease-in-out calc(var(--salida, 0.3s) + var(--dura, 0.7s)) infinite;
}

/* Quien tiene activado «Reducir movimiento»: todo quieto. */
@media (prefers-reduced-motion: reduce) {
  .movil, .sticker, .sticker .flota { animation: none !important; }
  .sticker { opacity: 1 !important; }
}

/* El botón de descarga, siempre a la vista: negro (blanco en oscuro), con la
   manzana a la izquierda (Abel, 09/10/2026: «me gusta como estaba antes pero
   añadiendo el logo de Apple»). En la última pantalla se pega en su sitio
   (.pegado, comun.js) */
.descargar {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px 16px 26px;
  border-radius: 999px;
  background: var(--boton);
  color: var(--texto-del-boton);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.descargar .manzana { flex: none; width: 17px; height: 21px; margin-top: -3px; fill: currentColor; }
/* Pegado: en su sitio de la página (relative y no static, para que su ::before
   siga dentro de él) */
.descargar.pegado { position: relative; inset: auto; transform: none; }
/* La sombra grande del vuelo, aparte: comun.js la enciende con la opacidad
   cuanto más deprisa va (revisión del 14/10/2026) */
.descargar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 32px 58px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
}

/* ======================================================================
   Para las páginas de cada QR (07/10/2026)
   ====================================================================== */

/* La frase del flyer, pequeña y gris, encima de su continuación */
.gancho {
  margin: 24px auto 0;
  padding: 0 16px;
  color: var(--app-gris);
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 0.02em;
}
.gancho + h1 { margin-top: 10px; }

/* Dos iPhone: uno de frente y otro de lado, un poco por detrás */
.dos-moviles {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.dos-moviles .movil { margin: 0; }
.movil.de-lado {
  z-index: 0;
  /* Mide lo mismo de alto que el de frente: su imagen es más estrecha */
  width: calc(var(--movil) * 513 / 695);
  margin-right: calc(var(--movil) * -0.12);
}
.movil.de-lado.a-la-derecha { margin-right: 0; margin-left: calc(var(--movil) * -0.12); }

/* Una pantalla en los puntos de un iPhone (402 × 874) que el código tuerce y
   encaja en las cuatro esquinas del hueco del marco (`data-esquinas`, en % del
   marco, medidas en el mockup de Figma), con las esquinas redondeadas de la
   pantalla (en puntos; se tuercen con ella): rectas, asomaban por fuera del
   marco (revisión del 13/10/2026) */
.pantalla-encajada {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  overflow: hidden;
  border: 0;
  border-radius: 55px;
  pointer-events: none;
  transform-origin: 0 0;
  background: var(--app-fondo);
}
.pantalla-encajada .ios { --pt: 1px; }

/* La historia: la foto tal cual y, encima, el sticker del plan */
.historia { position: absolute; inset: 0; }
.historia > img { width: 100%; height: 100%; object-fit: cover; }
.sticker-en-historia {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 66%);
  transform: translate(-50%, -50%) rotate(var(--giro, -5deg)) scale(var(--tam, 1.05));
}
.sticker-en-historia .tarjeta { transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }

/* La pantalla de un grupo: la cabecera del color del grupo (como en la app,
   `FomoSurface.cabeceraDeGrupo`: un 30 % de su color sobre el fondo del sistema,
   al 55 %, encima del cristal, como una card de grupo: ver .card.de-grupo),
   con su tema; y los huecos libres */
.ios.de-grupo .cabecera {
  height: calc(335 * var(--pt));
  overflow: hidden;
  background:
    linear-gradient(color-mix(in oklab, color-mix(in oklab, rgb(var(--color)) 30%, var(--app-sistema)) 55%, transparent),
                    color-mix(in oklab, color-mix(in oklab, rgb(var(--color)) 30%, var(--app-sistema)) 55%, transparent)),
    var(--cristal-de-card);
}
.ios.de-grupo .fecha { top: calc(178 * var(--pt)); }
.ios.de-grupo .semana { top: calc(246 * var(--pt)); }
.ios.de-grupo .seleccion { top: calc(263 * var(--pt)); }
.ios.de-grupo .asa { top: calc(322 * var(--pt)); }
.ios.de-grupo .cards { top: calc(350 * var(--pt)); }
.ios .nombre-del-grupo { color: color-mix(in srgb, rgb(var(--color)) 75%, var(--texto)); }
.ios .nombre-del-grupo .icono { width: calc(17 * var(--pt) * 80 / 62); height: calc(17 * var(--pt) * 80 / 62); }
/* La campana y el engranaje, juntos en una cápsula (`BotonDeBarra`) */
.ios .botones { right: calc(16 * var(--pt)); padding: 0 calc(12 * var(--pt)); gap: calc(20 * var(--pt)); }
/* Las pills de quienes están en el grupo, cada nombre de su color */
.ios .participantes {
  position: absolute;
  top: calc(122 * var(--pt));
  left: calc(16 * var(--pt));
  display: flex;
  gap: calc(8 * var(--pt));
}
.ios .participante {
  position: static;
  height: calc(32 * var(--pt));
  padding: 0 calc(12 * var(--pt));
  font-size: calc(15 * var(--pt));
  font-weight: 600;
  color: color-mix(in srgb, rgb(var(--c)) 70%, var(--texto));
}

/* ======================================================================
   Qué es Fomo: la sección de debajo del iPhone, en la página principal
   ====================================================================== */

.funciones {
  /* El ancho del iPhone, como mucho; en pantallas bajas, menos (abajo) */
  --movil-maximo: clamp(200px, 22vw, 280px);
  --movil: var(--movil-maximo);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Cada función, centrada como las demás pantallas (Abel, 09/10/2026): el
   título y el texto arriba, y debajo lo que se enseña */
.funcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  text-align: center;
}
.funcion > .visual { margin-top: var(--entre-texto-y-dibujo); }
.funcion > .boton-crear-sticker { margin-top: var(--entre-dibujo-y-lo-de-debajo); }
.funcion h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* En una línea si cabe (Abel, 09/10/2026: «que el subheading vaya todo
   continuo, que no se corte») */
.funcion .texto p {
  margin: var(--entre-titulo-y-texto) auto 0;
  max-width: none;
  color: var(--letra-gris);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
}
.funcion .visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.funcion .visual .movil { margin: 0; }
.funcion > * { min-width: 0; }


/* ======================================================================
   Las piezas de la app, en vectores (Abel, 08/10/2026: «que ningún
   elemento de la app sea un PNG»). Medidas de `MedidasDeCard.app`, en
   puntos: --pt dice lo que mide un punto (1 px si no se dice).
   ====================================================================== */

:root {
  --amarillo: #ffcc00;
  /* Las horas de las cards: los grises de iOS, un 10 % más sólidos (`FomoSurface`) */
  --letra-inicio: rgba(60, 60, 67, 0.7);
  --letra-fin: rgba(60, 60, 67, 0.4);
  --bolita-fondo: #ffffff;
  --sin-contestar: #aeaeb2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --amarillo: #ffd60a;
    --letra-inicio: rgba(235, 235, 245, 0.7);
    --letra-fin: rgba(235, 235, 245, 0.4);
    --bolita-fondo: #000000;
    --sin-contestar: #636366;
  }
}

/* Un icono dentro de un texto o un botón */
.icono { vertical-align: middle; }

/* La card de un plan o un evento (`EventCard`) */
.card {
  --u: var(--pt, 1px);
  position: relative;
  display: flex;
  padding: calc(16 * var(--u));
  overflow: hidden;
  border-radius: calc(29 * var(--u));
  background: var(--card-fondo);
  color: var(--texto);
  text-align: left;
}
/* Un plan de un grupo: el color de su cabecera (`FomoSurface.cabeceraDeGrupo`:
   un 30 % de su color mezclado con el fondo del sistema, al 55 %), encima del
   cristal de la card. Mezclado «in oklab» porque `Color.mix` de SwiftUI mezcla
   en un espacio perceptual: con la mezcla normal (srgb) salía más oscuro y
   más apagado que en la app (medido el 13/10/2026: el rosa, 255 226 235 en
   claro y 40 19 28 en oscuro en la app; así, 252 226 236 y 40 19 28). El
   mismo en todo lo que lleva el color de un grupo: la card del grupo del
   paso 1 (Abel, 13/10/2026: «las cards, tal cual, con los mismos colores en
   la app que en la web») */
.card.de-grupo, .fondo-del-grupo, .columna-de-agenda.de-grupo {
  background:
    linear-gradient(color-mix(in oklab, color-mix(in oklab, rgb(var(--color)) 30%, var(--app-sistema)) 55%, transparent),
                    color-mix(in oklab, color-mix(in oklab, rgb(var(--color)) 30%, var(--app-sistema)) 55%, transparent)),
    var(--cristal-de-card);
}
.card-franja {
  position: relative;
  flex: 0 0 calc(5 * var(--u));
  width: calc(5 * var(--u));
  margin-right: calc(12 * var(--u));
  border-radius: 999px;
  background: rgb(var(--color));
}
.card-cuerpo {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
}
.card-titulo {
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: calc(22 * var(--u));
}
.card-bolitas { display: flex; gap: calc(3 * var(--u)); }
.card-horas {
  position: relative;
  margin-left: calc(4 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: calc(18 * var(--u));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-horas .inicio { color: var(--letra-inicio); }
.card-horas .fin { color: var(--letra-fin); }
/* La etiqueta del grupo al pie (`EtiquetaDeGrupo`) */
.card-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: calc(13 * var(--u));
  /* El color del grupo tal cual, como la etiqueta de los stickers (Abel,
     09/10/2026: «que se vea como en las stickers de la app»; en las cards de
     la app se oscurece para leerse) */
  color: rgb(var(--color));
  background: rgb(var(--color) / 0.14);
}

/* Una respuesta (`StatusDot`): el icono de su color con la marca en blanco.
   Mide lo que su icono (15 puntos: el 12 de la app es el tamaño de la letra) */
.bolita {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.bolita::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: var(--bolita-fondo);
}
.bolita .icono { position: relative; }
.bolita.aceptado { color: #34c759; }
.bolita.parcial { color: #ff9500; }
.bolita.rechazado { color: #ff3b30; }
.bolita.sin-contestar { color: var(--sin-contestar); }
.bolita.sin-contestar::before { display: none; }

/* Un hueco libre (`TimeSlotCard`): el reloj y las horas en coral */
.hueco {
  --u: var(--pt, 1px);
  display: flex;
  align-items: center;
  padding: calc(16 * var(--u));
  border-radius: calc(29 * var(--u));
  background: var(--card-fondo);
  color: var(--coral);
}
.hueco-reloj { flex: 0 0 calc(20 * var(--u)); display: flex; }
.hueco-horas {
  flex: 1;
  text-align: center;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(28 * var(--u));
  font-variant-numeric: tabular-nums;
}
/* El hueco del reloj, repetido a la derecha: así las horas quedan centradas */
.hueco::after { content: ""; flex: 0 0 calc(20 * var(--u)); }

/* ======================================================================
   Las secciones de la página principal (Abel, 09/10/2026): la portada, el
   problema, cómo funciona, lo que más engancha (.funciones), la confianza y
   el cierre. Una historia de arriba abajo; la App Store va por otro lado.
   Las piezas de la app (cards, pills, botones) van dibujadas en vectores con
   las medidas y los colores de su código (abajo: «Las piezas de la app,
   dibujadas»), nunca como imágenes (Abel, 09/10/2026)
   ====================================================================== */
/* Los espacios de dentro de cada sección, **los mismos en todas** (Abel,
   14/10/2026: «quiero que haya una estandarización de los espacios entre
   elementos de cada sección, no quiero que toda la arquitectura de cada
   sección sea diferente»): del título a su texto; del texto a lo que se
   enseña (los iPhone, los pasos, la card del plan, la agenda, los widgets, el
   icono de la app); y de eso a lo que va debajo (los botones de votar,
   «Crear sticker», el botón de descargar). Crecen con el alto de la ventana;
   en el móvil, con más aire (Abel, 13/10/2026: «que los elementos estén más
   distanciados»), y en uno muy bajo, menos, para que quepa */
:root {
  --entre-titulo-y-texto: 16px;
  --entre-texto-y-dibujo: clamp(28px, 5svh, 52px);
  --entre-dibujo-y-lo-de-debajo: clamp(18px, 3svh, 32px);
}
@media (max-width: 700px) {
  :root {
    --entre-titulo-y-texto: clamp(12px, 2.2svh, 20px);
    --entre-texto-y-dibujo: clamp(26px, 6.5svh, 64px);
    --entre-dibujo-y-lo-de-debajo: clamp(18px, 4svh, 40px);
  }
}
@media (max-width: 700px) and (max-height: 600px) {
  :root { --entre-titulo-y-texto: 10px; --entre-texto-y-dibujo: 18px; --entre-dibujo-y-lo-de-debajo: 14px; }
}
.bloque {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.bloque h2, .funcion h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  /* Sin una palabra sola en la última línea (revisión del 09/10/2026) */
  text-wrap: balance;
}
.bloque .texto p {
  margin-top: var(--entre-titulo-y-texto);
  max-width: 34ch;
  color: var(--letra-gris);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
}
.bloque .texto p, .funcion .texto p { text-wrap: pretty; }
/* Centrada como las demás (Abel, 09/10/2026): el título y el texto arriba y
   las dos columnas debajo */
.confianza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--entre-texto-y-dibujo);
  text-align: center;
}
.confianza .texto p { margin-inline: auto; max-width: none; }
.confianza .comparacion { width: min(100%, 800px); }
.confianza > * { min-width: 0; }

/* ---------- 2. El problema: la pregunta en el centro y las excusas alrededor ---------- */

/* Tu pregunta, en grande en el centro, y alrededor van saltando las excusas
   del grupo, como avisos, cada vez más deprisa (Abel, 09/10/2026: «volver al
   origen, con matices»). Al acabar (.terminado; sin movimiento, desde el
   principio), la pregunta sube a lo alto del recuadro, las excusas se apagan
   y sale la frase en el centro. La pregunta y la frase comparten la celda de
   la sección, que ocupa todo el recuadro; las excusas van por encima de todo
   el recuadro, cada una en su sitio (--x, --y) */
.por-secciones .seccion.problema { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.problema {
  /* La pregunta, en una línea (mide 10,7 veces su letra, más el relleno) */
  --f-pregunta: min(56px, 4vw, 9svh);
  --f-remate: min(clamp(34px, 5vw, 64px), 8svh);
  position: relative;
  width: 100%;
  justify-items: center;
}
/* Tu mensaje: un globo coral con su piquito, en una línea y con la
   letra blanca (Abel, 09/10/2026). El coral, con un 8 % de negro: así la
   letra blanca llega a 3,4:1, lo que pide una letra tan grande (WCAG; con
   el coral tal cual, 2,9) */
.pregunta {
  grid-area: 1 / 1;
  z-index: 3;
  align-self: center;
  width: fit-content;
  padding: 0.3em 0.6em 0.36em;
  position: relative;
  border-radius: 0.62em;
  background: color-mix(in srgb, var(--coral) 92%, #000);
  color: #fff;
  font-family: "Switzer", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-pregunta);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Tu globo, con su piquito abajo a la derecha */
.pregunta::after {
  content: "";
  position: absolute;
  right: -0.11em;
  bottom: 0;
  width: 0.42em;
  height: 0.42em;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M0 0H12C12 10 15 17 22 22C14 22 7 20 3 16L0 13Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M0 0H12C12 10 15 17 22 22C14 22 7 20 3 16L0 13Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* Sin brillo alrededor (Abel, 19/10/2026: «quítale el brillo ese que tiene
   al mensaje principal»; hasta entonces, una sombra coral en ::before) */
/* Al final, más pequeña (--encoge; Abel, 13/10/2026: «que mengue un poquito
   más», y después, «más pequeño aún»: a poco más de la mitad) y encima de la
   frase, las dos juntas en el centro (Abel: «no quiero
   que suba tanto»), y apagada como un botón desactivado de iOS: gris claro y
   con la letra que casi no destaca (Abel: «que pase a estar en colores
   disabled»; y después, «que quede más disabled»: con el gris oscuro de
   antes, 4,6:1, se leía demasiado). A propósito, por debajo del contraste de
   la WCAG: es una pieza apagada del dibujo, y lo que se lee es la frase de
   debajo (excepción decidida por Abel, Fomo_MARKETING.md §1.3). Su
   transición (abajo) la lleva desde el centro. Lo que sube: la mitad del alto de la frase (dos
   líneas) y del hueco entre las dos */
.problema { --encoge: 0.55; --pregunta-apagada: #d1d1d6; --letra-de-la-pregunta-apagada: #ffffff; }
@media (prefers-color-scheme: dark) {
  .problema { --pregunta-apagada: #2c2c2e; --letra-de-la-pregunta-apagada: #636366; }
}
/* Al llegar, salta como un aviso, igual que las excusas (Abel, 14/10/2026:
   «que no aparezca desde el principio, que haga una animación de pop up como
   el resto»): escondida hasta .llega (comun.js) */
.problema.con-animacion .pregunta { opacity: 0; }
.problema.con-animacion .pregunta.llega { opacity: 1; animation: pregunta-que-salta 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes pregunta-que-salta {
  from { opacity: 0; scale: 0.55; }
  to { opacity: 1; scale: 1; }
}
/* Al acabar, sube y encoge a la vez, con el mismo ritmo de principio a fin,
   mientras su color se apaga: un solo movimiento, despacio y sin acelerón
   (Abel, 13/10/2026: «demasiado forzada y artificial»; 14/10/2026: «que la
   animación de hacerse más pequeño sea más fluida»). Con translate y scale,
   que mueve la tarjeta gráfica, y solo al apagarse: al repetir, vuelve de
   golpe (está escondida) */
.problema.con-animacion.terminado .pregunta {
  transition: translate 1.1s cubic-bezier(0.4, 0, 0.2, 1), scale 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 1.1s cubic-bezier(0.4, 0, 0.2, 1), color 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.problema:not(.con-animacion) .pregunta,
.problema.terminado .pregunta {
  translate: 0 calc(-0.5 * (28px + 2.08 * var(--f-remate)));
  scale: var(--encoge);
  background: var(--pregunta-apagada);
  color: var(--letra-de-la-pregunta-apagada);
}
/* Las excusas, por todo el recuadro. Sus sitios (--x, --y y los del móvil)
   son el punto de partida: comun.js las reparte según lo que mida la
   pantalla, con el mismo aire entre todas (Abel, 20/10/2026: «en función del
   tamaño de pantalla esté bien distribuido el contenido de su interior») */
.excusas {
  position: absolute;
  z-index: 2;
  inset: calc(var(--recuadro-arriba) + 12px) calc(var(--margen-del-recuadro) + 12px) calc(var(--recuadro-abajo) + 12px);
  list-style: none;
  pointer-events: none;
}
/* Un globo de mensaje (Abel, 13/10/2026: «que tengan aspecto de mensaje,
   con el mismo minimalismo»): redondo, con su piquito abajo a la izquierda,
   y todos iguales («el mismo margen, estandarizadas»): el mismo relleno y
   cada uno en una línea */
.excusa {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max-content;
  padding: 0.5em 1em 0.55em;
  border-radius: 1.2em;
  background: var(--chat-burbuja);
  color: var(--texto);
  box-shadow: var(--sombra-del-sticker);
  /* Cada una de su tamaño (--tam; Abel, 14/10/2026: «que juegues con los
     tamaños, no todos serán igual de grandes») y con su giro (--giro): la
     letra de base cambia con la pantalla (abajo), y nunca menos de 11 */
  --letra-de-la-excusa: clamp(13px, 1.2vw, 18px);
  font-size: max(11px, calc(var(--letra-de-la-excusa) * var(--tam, 1)));
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
}
.excusa::before {
  content: "";
  position: absolute;
  left: -0.33em;
  bottom: 0;
  width: 1.2em;
  height: 1.2em;
  background: var(--chat-burbuja);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M22 0H10C10 10 7 17 0 22C8 22 15 20 19 16L22 13Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M22 0H10C10 10 7 17 0 22C8 22 15 20 19 16L22 13Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.excusa .quien {
  display: block;
  margin-bottom: 0.1em;
  /* Su color, mezclado con el del texto para leerse (4,5:1): al 60 %, el
     peor queda en 4,6 en oscuro (Marta) y en 5,6 en claro (Carmen) */
  color: color-mix(in srgb, rgb(var(--color)) 60%, var(--texto));
  font-size: 0.8em;
  font-weight: 700;
}
/* La frase, en el centro, debajo de la pregunta y encima de las excusas
   apagadas (baja la mitad del alto de la pregunta y del hueco) */
.problema .remate {
  grid-area: 1 / 1;
  z-index: 3;
  align-self: center;
  max-width: 14ch;
  translate: 0 calc(0.5 * (28px + 1.66 * var(--encoge) * var(--f-pregunta)));
  font-size: var(--f-remate);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
/* Cómo se mueve (comun.js): cada excusa salta (.llega) como un aviso que
   aparece, de pequeña a su tamaño; al acabar, .terminado. La animación, sin quedarse puesta al
   acabar: así, al apagarse, manda el estilo de .terminado */
.problema.con-animacion .excusa { opacity: 0; }
.problema.con-animacion .excusa.llega { opacity: 1; animation: excusa 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.problema.con-animacion .remate { opacity: 0; transform: translateY(10px); }
/* Al acabar, se apagan todas a la vez, sin prisa, como la pregunta: la lista
   entera, en gris y desenfocada, en una sola capa (globo a globo, Safari
   tenía que volver a pintar cada uno al terminar). La transición, solo al
   apagarse: puesta en cada globo, también corría al llegar, a la vez que la
   animación «excusa», y en Safari cada globo parpadeaba justo después de
   saltar (revisión del 14/10/2026: nunca una transición y una animación en
   la misma propiedad) */
.problema:not(.con-animacion) .excusas,
.problema.con-animacion.terminado .excusas { opacity: 0.3; filter: grayscale(1) blur(1.5px); }
.problema.con-animacion.terminado .excusas { transition: opacity 0.8s ease, filter 0.8s ease; will-change: opacity, filter; }
/* (la transición, solo al llegar: al repetir, la frase se va al momento) */
.problema.terminado .remate {
  opacity: 1;
  transform: none;
  /* Cuando la pregunta ya se ha apartado casi del todo (sube en 1,1 s) */
  transition: opacity 0.7s 0.5s ease, transform 0.8s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Salta como un aviso que aparece (Abel, 13/10/2026: sin el temblor, que
   «daba vibras de error»): de pequeño a su tamaño, con un poco de rebote */
@keyframes excusa {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(0.55); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(1); }
}

/* ---------- Las piezas de la app, dibujadas ---------- */

/* Dibujadas a mano con las medidas, los colores y los iconos del código de la
   app (Abel, 09/10/2026: «nada de capturas ni imágenes»), comparadas con sus
   capturas. En puntos de iPhone: --pt dice lo que mide un punto */

/* «Ocupado» en un grupo (`TimeSlotCard`): el título y las horas en los
   grises de iOS, y la franja partida por persona, apagada */
.card.ocupado .card-titulo { color: var(--letra-terciaria); }
.card.ocupado .card-horas .inicio { color: var(--letra-fin); }
.card.ocupado .card-horas .fin { color: var(--letra-apagada); }
.franja-partida {
  flex: 0 0 calc(5 * var(--u));
  display: flex;
  flex-direction: column;
  width: calc(5 * var(--u));
  margin-right: calc(12 * var(--u));
  overflow: hidden;
  border-radius: 999px;
  opacity: 0.55;
}
.franja-partida i { background: rgb(var(--color)); }

/* Las pills, lisas: en la app son de cristal (glassEffect), y en la web no
   hay cristal (Abel, 19/10/2026) */
.pill-de-persona, .pill-de-calendario {
  background: var(--cristal);
}
/* La pill de una persona (`ParticipantPillsRow`): su punto de color (10) y su
   nombre (subheadline, seminegrita), en una cápsula de cristal de 34 de alto */
.pill-de-persona {
  --u: var(--pt, 1px);
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  color: var(--texto);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.pill-de-persona i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: rgb(var(--color));
}
/* El nombre de un calendario en la barra de arriba (`NombreDelCalendario`):
   su icono (footnote, seminegrita) y su nombre (body), del color del grupo
   que se lea sobre el cristal; la cápsula de 44 la pone la barra de iOS */
.pill-de-calendario {
  --u: var(--pt, 1px);
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: 999px;
  color: var(--texto-del-grupo, var(--texto));
  font-size: calc(17 * var(--u));
  white-space: nowrap;
}
/* La de un grupo, como su etiqueta en la app: el texto y el icono del color
   del grupo y, de fondo, ese color suave (Abel, 19/10/2026: «en la pill del
   grupo ponle en el texto el color del grupo y en el fondo también el fondo
   del grupo») */
.pill-de-calendario.de-grupo { color: rgb(var(--color)); background: rgb(var(--color) / 0.14); }
/* El icono del grupo sale a 10 puntos (iconos.css): aquí, a 13 */
.pill-de-calendario .icono.copa { --pt: calc(var(--u) * 1.3); }
.pill-de-calendario .icono.calendario-19 { --pt: var(--u); }
/* Un botón de votar (`AspectoDeVoto`): la bolita de 26 y el texto (caption),
   en un rectángulo de radio 20. En la web, sin cristal (Abel, 09/10/2026:
   «que no tengan efecto líquido glass») y todos igual, sin ninguno apagado
   («que se queden normal, no en disabled»): blancos y sin sombra («que no
   tengan sombras»; en oscuro, grises). Al pulsarse (comun.js), un momento
   teñidos de su color */
.boton-de-voto {
  --u: var(--pt, 1px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: calc(86 * var(--u));
  padding: calc(12 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--boton-solido);
  color: var(--texto);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.35s;
}
.boton-de-voto[data-estado="aceptado"] { --color-del-estado: #34c759; }
.boton-de-voto[data-estado="parcial"] { --color-del-estado: #ff9500; }
.boton-de-voto[data-estado="rechazado"] { --color-del-estado: #ff3b30; }
.boton-de-voto[data-estado="sin-contestar"] { --color-del-estado: var(--sin-contestar); }
.boton-de-voto .bolita { --pt: calc(var(--u) * 26 / 12); }
.boton-de-voto.elegido { background: color-mix(in srgb, var(--color-del-estado) 24%, var(--boton-solido)); }
/* Al pulsarse (comun.js): se hunde un poco y vuelve */
.boton-de-voto.pulsado { animation: pulsar 0.28s cubic-bezier(0.3, 1.5, 0.5, 1); }
/* Con «scale» y no con «transform», que lleva su giro */
@keyframes pulsar {
  0% { scale: 1; }
  35% { scale: 0.9; }
  70% { scale: 1.05; }
  100% { scale: 1; }
}
/* Una bolita de la card que cambia de respuesta: salta */
.bolita.cambia { animation: cambiar 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes cambiar {
  0% { scale: 0.4; }
  60% { scale: 1.25; }
  100% { scale: 1; }
}

/* ---------- 3. Cómo funciona: tres pasos, cada uno con su dibujo ---------- */

.pasos { text-align: center; }
/* La frase de debajo del título, centrada (también la del cierre) */
.pasos .texto p, .cierre .texto p { margin-inline: auto; max-width: none; }
/* Cada paso con su dibujo y, debajo, su título (Abel, 13/10/2026: «que los
   títulos de las subsecciones estén debajo de ellas»), con flechas entre
   ellos, a la altura de los dibujos. Los dibujos van en una fila y los
   títulos en otra (cada paso y cada flecha ocupan las dos: subgrid), así los
   dibujos quedan a la misma altura aunque un título vaya en dos líneas */
.lista-de-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(8px, 1.3vw, 16px);
  margin-top: var(--entre-texto-y-dibujo);
}
.paso, .flecha { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.paso { grid-template-columns: minmax(0, 1fr); }
.paso > .escena { grid-row: 1; }
/* (con más aire entre el dibujo y su título: Abel, 20/10/2026, «veo los
   textos que acompañan a los div muy pegados a los div»; antes, 14) */
.paso h3 { grid-row: 2; align-self: start; margin-top: clamp(18px, 2.6svh, 26px); font-size: clamp(16px, 1.5vw, 20px); text-wrap: balance; }
.flecha svg {
  grid-row: 1;
  align-self: center;
  display: block;
  /* Con más protagonismo y más aire (Abel, 20/10/2026: «creo que debe ser
     más grande o tener más aire a su alrededor»), del mismo color */
  width: clamp(44px, 4.4vw, 68px);
  height: auto;
  margin-inline: clamp(24px, 3.4vw, 56px);
  fill: none;
  stroke: var(--guia-raya);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* El dibujo de cada paso, en su marco, del color del fondo de la app (en
   oscuro, el negro del fondo de la página), como antes del 13/10/2026 (Abel,
   20/10/2026: «quiero que los div de escena estén acotados por un frame, como
   lo estaban en anteriores versiones [...] el color negro del fondo»; del
   13/10 al 20/10, sin marco). Las cards, las de la app, con sus mismos
   colores, sin filo ni sombra. Lo de dentro se mide con su ancho (cqw, sin el
   relleno); lo más ancho (una fila del paso 2) mide unos 370 puntos de iPhone */
.escena {
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  --alto-de-la-escena: clamp(250px, 33svh, 310px);
  --relleno-de-la-escena: clamp(12px, 1.8svh, 18px);
  height: var(--alto-de-la-escena);
  padding: var(--relleno-de-la-escena);
  border-radius: clamp(22px, 2.4vw, 30px);
  background: var(--app-fondo);
}
/* (y que quepa a lo alto en su marco: las tres cards del paso 2 miden 228
   puntos, con lo que flotan; si no, en un portátil bajo se salían) */
.escena > * { --pt: calc(min(1.1px, calc(100cqw / 370), calc((var(--alto-de-la-escena) - 2 * var(--relleno-de-la-escena)) / 228)) * var(--encaje, 1)); }
/* Lo de los pasos 2 y 3, en columna y centrado */
.contenido-del-paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(10 * var(--pt));
  width: 100%;
}
/* 1: solo el grupo: su etiqueta, como en los stickers de la app (Abel: «no
   una pill con Liquid Glass»), en medio de una card más pequeña que su sitio,
   con el color y el tema del grupo como en la app (abajo, con .card.de-grupo;
   comun.js le pinta el tema) */
.fondo-del-grupo {
  position: relative;
  display: grid;
  place-items: center;
  width: 66%;
  height: 58%;
  overflow: hidden;
  border-radius: calc(29 * var(--pt));
}
.etiqueta-del-grupo {
  --u: var(--pt, 1px);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(13 * var(--u));
  border-radius: 999px;
  color: rgb(var(--color));
  background: rgb(var(--color) / 0.14);
  font-size: calc(19 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.etiqueta-del-grupo .icono { --pt: calc(var(--u) * 1.75); }
/* 2: cada persona en su fila, con su nombre en medio, más grande, y un
   evento a cada lado, montados un poco sobre la pill (Abel, 13/10/2026: «que
   el nombre esté en el medio, entre los dos eventos, y un poco más grande;
   no importa que se superpongan, pero que quede orgánico»): cada evento,
   girado y a otra altura, y cada fila, corrida y torcida a su manera. La pill,
   de cristal como en la app («que sí se vean estilo Liquid Glass») y por
   encima; los eventos, no */
/* (con aire arriba y abajo: los eventos van torcidos, corridos y flotan, y
   en el marco del móvil, que mide lo que su dibujo, llegaban al borde) */
.escena-cada-uno .contenido-del-paso { gap: calc(20 * var(--pt)); align-items: center; padding-block: calc(12 * var(--pt)); }
.persona { display: flex; align-items: center; }
.persona .pill-de-persona { --u: calc(var(--pt) * 1.3); position: relative; z-index: 1; flex: none; }
.persona .mini-card:nth-of-type(1) { order: -1; margin-right: calc(-9 * var(--pt)); }
.persona .mini-card:nth-of-type(2) { margin-left: calc(-9 * var(--pt)); }
.persona:nth-child(1) { translate: calc(-14 * var(--pt)) 0; rotate: -2deg; }
/* (el sitio y el giro de cada evento, en transform: `translate` y `rotate`
   los mueve el flotar, abajo) */
.persona:nth-child(1) .mini-card:nth-of-type(1) { transform: translateY(calc(-9 * var(--pt))) rotate(-7deg); }
.persona:nth-child(1) .mini-card:nth-of-type(2) { transform: translateY(calc(6 * var(--pt))) rotate(4deg); }
.persona:nth-child(2) { translate: calc(16 * var(--pt)) 0; rotate: 1.5deg; }
.persona:nth-child(2) .mini-card:nth-of-type(1) { transform: translateY(calc(7 * var(--pt))) rotate(5deg); }
.persona:nth-child(2) .mini-card:nth-of-type(2) { transform: translateY(calc(-8 * var(--pt))) rotate(-6deg); }
.persona:nth-child(3) { translate: calc(-6 * var(--pt)) 0; rotate: -1deg; }
.persona:nth-child(3) .mini-card:nth-of-type(1) { transform: translateY(calc(-5 * var(--pt))) rotate(-4deg); }
.persona:nth-child(3) .mini-card:nth-of-type(2) { transform: translateY(calc(9 * var(--pt))) rotate(7deg); }
/* Un evento, en pequeño: la card de la app con su franja, el título y las horas */
.mini-card {
  --u: var(--pt, 1px);
  display: inline-flex;
  align-items: stretch;
  gap: calc(7 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--card-fondo);
  color: var(--texto);
  text-align: left;
  white-space: nowrap;
}
.mini-card .card-franja { flex: 0 0 calc(4 * var(--u)); width: calc(4 * var(--u)); margin: 0; }
.mini-texto { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.mini-titulo { font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.2; }
.mini-hora { color: var(--letra-gris); font-size: calc(11 * var(--u)); line-height: 1.2; font-variant-numeric: tabular-nums; }
/* 3: lo que queda de todos juntos (con algo menos de hueco entre las cards:
   en un portátil bajo, justas en su sitio) */
.escena-tarjetas .card { width: 100%; }
.escena-tarjetas .contenido-del-paso { gap: calc(8 * var(--pt)); }
/* Las pills, los eventos y el hueco libre flotan, como los stickers de la
   portada y el botón de «Crear sticker» (Abel, 20/10/2026: «quiero que las
   pills de personas y las mini cards de eventos estén animadas con la misma
   animación como de flotar [...] también a la div card hueco»): suben y bajan
   y se mecen, cada uno a su ritmo y en otro punto del camino (--flota,
   --desfase, --deriva y --balanceo: comun.js los sortea), poco, que van muy
   juntos. Con «Reducir movimiento», quietos */
.escena .pill-de-persona, .escena .mini-card, .escena .hueco {
  --sube: calc(4 * var(--pt));
  --deriva: calc(1.5 * var(--pt));
  --balanceo: 1deg;
  animation:
    deriva var(--flota, 5.4s) ease-in-out var(--desfase, 0s) infinite,
    balanceo calc(var(--flota, 5.4s) * 1.37) ease-in-out var(--desfase, 0s) infinite;
}
/* El hueco, además, crece un poco y vuelve, a la vez que su brillo (Abel,
   21/10/2026: «que aumente su tamaño y vuelva de vuelta a su tamaño
   original [...] además de flotar»): con `scale`, que no pisa lo que mueve el
   flotar (`translate` y `rotate`) */
.escena .hueco {
  animation:
    deriva var(--flota, 5.4s) ease-in-out var(--desfase, 0s) infinite,
    balanceo calc(var(--flota, 5.4s) * 1.37) ease-in-out var(--desfase, 0s) infinite,
    respirar 3.6s ease-in-out infinite;
}
/* Y detrás del hueco, un brillo muy leve del color de acento, como si la
   card brillara (Abel: «un toque leve»), que se enciende y se apaga despacio
   (con la opacidad: no hay que volver a pintar la sombra). La sombra de
   fuera de una caja no se pinta dentro de ella: no tapa la card */
.escena-tarjetas .hueco { position: relative; overflow: visible; }
.escena-tarjetas .hueco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 calc(22 * var(--u)) calc(1 * var(--u)) rgb(255 102 92 / 0.38);
  animation: brillar 3.6s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .escena-tarjetas .hueco::before { box-shadow: 0 0 calc(24 * var(--u)) calc(1 * var(--u)) rgb(255 102 92 / 0.32); }
}
@keyframes brillar {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .escena .pill-de-persona, .escena .mini-card, .escena .hueco, .escena-tarjetas .hueco::before { animation: none; }
}

/* ---------- 4. Planes: la card del plan y, debajo, los botones de votar ---------- */

.votacion {
  --pt: calc(1.12px * var(--encaje, 1));
  width: calc(370 * var(--pt));
  max-width: 100%;
  margin: 0 auto;
}
.votacion .card-del-plan { width: 100%; }
/* En fila, todos iguales (Abel, 09/10/2026: «que tengan el mismo peso visual») */
.botones-de-voto {
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--pt));
  margin-top: var(--entre-dibujo-y-lo-de-debajo);
}

/* ---------- El hueco de una captura ---------- */

/* Donde irá una captura de Abel, en la pantalla de un iPhone (13/10/2026:
   «por ahora, deja el hueco de donde deberían ir todas las capturas»): el
   fondo de la app con un borde de rayas y lo que va dentro */
/* Las capturas de verdad de la app (Abel, 20/10/2026: «incrustar las capturas
   de pantalla que deban en los mockups»), de la cuenta de Irene, en claro y
   en oscuro (img/capturas/): en el hueco de la pantalla del marco, con sus
   esquinas */
.captura-en-movil {
  position: absolute;
  left: 4.46%;
  top: 1.889%;
  width: 91.08%;
  height: 96.22%;
  overflow: hidden;
  border-radius: 12% / 5.6%;
}
.captura-en-movil img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hueco-de-captura {
  position: absolute;
  left: 4.46%;
  top: 1.889%;
  width: 91.08%;
  height: 96.22%;
  display: grid;
  place-items: center;
  padding: 12%;
  border: 2px dashed rgba(128, 128, 128, 0.45);
  border-radius: 12% / 5.6%;
  background: var(--app-fondo);
  color: var(--letra-gris);
  text-align: center;
}
.hueco-de-captura span { font-size: clamp(11px, calc(var(--movil, 260px) * 0.062), 18px); line-height: 1.25; }
.hueco-de-captura b { display: block; margin-bottom: 0.3em; color: var(--texto); font-size: 1.15em; }
.hueco-de-captura small { display: block; margin-top: 0.2em; font-size: 0.85em; }
/* En el iPhone de detrás de la portada, el texto en la parte que se ve (el de
   delante le tapa un poco por la izquierda) */
.movil-de-detras .hueco-de-captura { padding-left: 20%; }

/* ---------- 4b. Las historias: tres pantallas ---------- */

/* La hoja de la app para hacer el sticker a la izquierda, la historia del
   Rastro en medio y otra a la derecha (Abel, 13/10/2026: «más pantallas de
   ejemplos de historias, con los elementos de la app»). Sueltas, no en
   espejo del todo: las de los lados, del mismo tamaño y a la misma altura,
   pero giradas cada una hacia su lado (Abel, 13/10/2026: «simétricos pero
   con orientación diferente, así quedará más orgánico»), algo más bajas y
   asomando por detrás de la del medio, que va delante, recta y algo subida.
   Y van rotando entre sí (Abel, 14/10/2026: «quiero que vayan rotando entre
   sí»): cada poco, la de la derecha pasa al medio, la del medio a la
   izquierda y la de la izquierda, por detrás, a la derecha (comun.js cambia
   su puesto, data-sitio). Las tres en la misma celda, cada una llevada a su
   puesto con translate, rotate y scale, que mueve la tarjeta gráfica (así
   también en Safari), y del mismo ancho: las de los lados, encogidas.
   Más pequeñas que el resto de iPhone de la web (Abel, 13/10/2026: «que las
   pantallas estén un poco más pequeñas», dos veces), y dejando sitio debajo
   para el botón «Crear sticker» */
.visual.historias {
  /* Como mucho, del ancho que quepa: el abanico abierto mide 2,93 veces una
     pantalla y 36 más, con los giros (cqi: el ancho de esta caja) */
  container-type: inline-size;
  --pantalla: calc(min(calc(var(--movil) * 0.78), calc((50cqi - 28px) / 1.465)) * var(--encaje, 1));
  /* Dónde queda el centro de cada puesto, desde el centro de la sección:
     como antes, en fila y con 18 de hueco entre ellas (las de los lados,
     del 87 % y el 82 % de ancho), y la fila entera centrada */
  --x-del-centro: calc(var(--pantalla) * 0.025);
  --x-de-la-izquierda: calc(var(--pantalla) * -0.91 - 18px);
  --x-de-la-derecha: calc(var(--pantalla) * 0.935 + 18px);
  display: grid;
  place-items: center;
  justify-self: stretch;
  min-width: 0;
}
.historias .movil {
  grid-area: 1 / 1;
  /* Lo de dentro, sin salirse del iPhone: sin código, la pantalla no se
     encaja y tapaba los otros y la sección de los widgets */
  overflow: clip;
  width: var(--pantalla);
  margin: 0;
  /* Al cambiar de puesto, sin acelerón, como la pregunta; en 0,7 s, que
     giran cada 2 (Abel, 14/10/2026). Y cuál va delante cambia a mitad del
     camino, cuando ya se cruzan (Abel, ese día: «al activarse la animación,
     hace un corte que no queda bien»: la que llegaba de la derecha saltaba
     de golpe por delante de la del medio nada más empezar) */
  transition: translate 0.7s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.7s cubic-bezier(0.4, 0, 0.2, 1), scale 0.7s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s linear 0.3s;
}
/* La del medio, delante, recta y algo subida */
.historias .movil[data-sitio="centro"] { z-index: 3; translate: var(--x-del-centro) -3%; }
/* Las de los lados, algo más bajas (el 5 % de su alto), giradas cada una
   hacia su lado y no lo mismo (Abel: «que no tengan el mismo grado de
   rotación»), y la de la izquierda un poquito más grande (Abel: «muy
   sutilmente más grande que el otro»). La de la derecha, detrás de todo: la
   que pasa de la izquierda a la derecha va por detrás de las otras dos */
.historias .movil[data-sitio="izquierda"] { z-index: 2; translate: var(--x-de-la-izquierda) 4.35%; rotate: -8deg; scale: 0.87; }
.historias .movil[data-sitio="derecha"] { z-index: 1; translate: var(--x-de-la-derecha) 4.1%; rotate: 4.5deg; scale: 0.82; }
/* La que va de la izquierda a la derecha, detrás de todo desde el primer
   momento (comun.js): si no, hasta la mitad cruzaba por delante de la que
   llega al medio */
.historias .movil.por-detras { z-index: 0; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .historias .movil { transition: none; } }
/* En el móvil, el mismo abanico pero más junto, para que quepa y se vean
   rotar (Abel, 14/10/2026; hasta entonces se pasaban de lado con el dedo):
   las de los lados, a poco más de media pantalla de la del medio, y el
   abanico centrado. Como mucho, del ancho que quepa con 20 de aire a cada
   lado de la ventana (junto mide 2,11 veces una pantalla, con los giros) */
@media (max-width: 700px) {
  .visual.historias {
    --pantalla-que-cabe: calc((50vw - 20px) / 1.055);
    --pantalla: calc(min(calc(var(--movil) * 0.78), var(--pantalla-que-cabe)) * var(--encaje, 1));
    --x-del-centro: calc(var(--pantalla) * 0.05);
    --x-de-la-izquierda: calc(var(--pantalla) * -0.5);
    --x-de-la-derecha: calc(var(--pantalla) * 0.58);
  }
  /* Aquí van tan juntas que la que llega al medio, al pasar delante a mitad
     de camino, saltaba por encima de la que se iba mientras aún se tapaban
     media pantalla (Abel, 16/10/2026: «da como un corte que superpone una
     con otra y queda raro»). Así, la del medio se aparta primero y la que
     llega sale un tercio de segundo después (.entra, comun.js): cuando pasa
     delante, ya no se tocan */
  .historias .movil.entra {
    transition-delay: 0.35s, 0.35s, 0.35s, 0.4s;
  }
}
/* (Sin iconos de fondo en ninguna sección: Abel, 21/10/2026, «de todas las
   secciones que tengan iconos en el fondo, quiero eliminarlos»; del 13/10 al
   21/10, el sello en las historias, y del 20/10, el reloj en Cómo funciona y
   las respuestas en Planes) */
/* El botón de la app que hace el sticker («Crear sticker»), suelto, en el
   centro y debajo de los iPhone, bastante más grande y sin pisar ninguno
   (Abel, 13/10/2026: «ponlo más centrado»; «bastante más grande, y que no
   esté superpuesto en ninguna pantalla»). **Sin cristal**, liso como dentro
   de la app (Abel, 14/10/2026: «que no tenga Liquid Glass, que sea como
   dentro de la app»): en la app es una fila de la hoja del plan
   (`EditEventSheet`, sin cristal), blanca y, en oscuro, gris, como los
   botones de votar, sin sombra. La letra, del color del texto, y el icono
   en coral. Crece con los iPhone, que encogen con el alto de la ventana */
.boton-crear-sticker {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.62em 1em;
  border-radius: 999px;
  /* De coral, con la letra y el icono en blanco (en oscuro, en negro), como
     el texto del botón de descargar (Abel, 19/10/2026: «el botón crear
     sticker con el fondo del color de acento y el texto en blanco o negro
     dependiendo del modo claro u oscuro»; antes, blanco o gris) */
  background: var(--coral);
  /* (la letra y el icono, blancos en los dos modos: Abel, 20/10/2026, «el
     color del icono y del texto sea como claro/blanco») */
  color: #ffffff;
  font-size: clamp(17px, calc(var(--movil) * 0.1), 27px);
  font-weight: 600;
  white-space: nowrap;
  /* (el giro, en transform: `rotate` lo mueve el balanceo) */
  transform: rotate(-3deg);
  /* Flota como los stickers y el icono del cierre (Abel, 19/10/2026: «el
     botón de crear sticker, quiero que tenga la animación de flotar») */
  --deriva: 2px;
  --balanceo: 1.5deg;
  animation:
    deriva 4.6s ease-in-out infinite,
    balanceo 6.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .boton-crear-sticker { animation: none; }
}
.boton-crear-sticker .icono { --pt: calc(1em / 17); }


/* ---------- 4c. Los widgets ---------- */

/* Cuatro widgets de la app en PNG, exportados por la propia app
   (FomoTests/PintarWidgetsDeLaWeb.swift) con lo de la cuenta de marketing
   (Irene) el lunes 16/11, en claro y en oscuro, sin cristal, como toda la
   web (Abel, 19/10/2026: «quiero que los exportes directamente para que
   queden totalmente profesionales»; del 16/10 al 19/10, recortados de
   capturas de la pantalla de inicio, y antes, también exportados o
   dibujados por la web). **Sueltos, como los stickers** («no los pongas tan
   ordenados, hazlo más orgánico»): cada uno en su sitio (--x, --y), girado
   (--giro) y unos encima de otros (--z). Todo en puntos de un iPhone de 390
   de ancho (158 el pequeño, 338 el mediano): --u dice lo que mide un punto,
   y la mesa nunca pasa del ancho de su caja (cqi) ni del alto que queda */
.visual.widgets { container-type: inline-size; justify-self: stretch; display: block; }
.mesa-de-widgets {
  --u: calc(min(1.5px, calc(100cqi / 640), calc((100svh - 310px) / 400)) * var(--encaje, 1));
  position: relative;
  width: calc(640 * var(--u));
  height: calc(400 * var(--u));
  margin-inline: auto;
}
.widget-en-png {
  position: absolute;
  z-index: var(--z, 1);
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(158 * var(--u));
  rotate: var(--giro, 0deg);
}
.widget-en-png.mediano { width: calc(338 * var(--u)); }
/* La sombra, la de los stickers (en oscuro, más fuerte y con un filo muy
   suave: si no, un widget negro encima de otro no se distinguía) */
.widget-en-png img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(22 * var(--u));
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.05);
}
@media (prefers-color-scheme: dark) {
  .widget-en-png img { box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.65); }
}
/* Sus sitios, sueltos, como echados sobre una mesa (Abel, 20/10/2026: «los
   widgets estén distribuidos un poco de manera más orgánica, no de la manera
   actual, que parece un puzzle»; del 19/10 al 20/10, en dos filas del mismo
   ancho, encajados): en zigzag, cada uno a otra altura, más girados y con
   huecos distintos entre ellos, sin taparse nada. El peso, igual a cada lado:
   un mediano y un pequeño en cada mitad (Abel, 19/10/2026: «descompensada en
   cuanto al peso visual»). Arriba a la izquierda «Próximos eventos», el mes
   más alto a la derecha, los huecos más abajo y «Por votar» entre los dos */
.widget-en-png.proximos { --x: 0; --y: 58; --giro: -6deg; --z: 2; }
.widget-en-png.mes { --x: 372; --y: 2; --giro: 8deg; --z: 3; }
.widget-en-png.huecos { --x: 96; --y: 238; --giro: 5deg; --z: 3; }
.widget-en-png.porvotar { --x: 290; --y: 214; --giro: -3.5deg; --z: 2; }
/* Cómo se mueven, en comun.js (Abel, 20/10/2026: «la animación de los
   widgets debe cambiar, debe de ser más orgánica»; del 19/10 al 20/10, como
   los stickers): al llegar a la sección caen sobre la mesa uno a uno, al
   azar, y después flotan sin repetirse nunca. Antes de caer, escondidos;
   sin código o con «Reducir movimiento», quietos en su sitio. Lo que flota
   es la imagen, para no pisar el giro del widget */
.mesa-de-widgets.con-animacion:not(.en-marcha) .widget-en-png { opacity: 0; }
.mesa-de-widgets.en-marcha .widget-en-png img { will-change: transform; }
/* En el móvil (y en una tableta en vertical: en fila salían pequeños), uno
   debajo de otro y del ancho que haya, también en zigzag: el mediano de
   «Próximos eventos» arriba, a la izquierda; los dos pequeños en medio, cada
   uno a su altura, y «Por votar» abajo, corrido a la derecha */
@media (max-width: 700px), (orientation: portrait) {
  .mesa-de-widgets {
    --u: calc(min(1.25px, calc(100cqi / 360), calc((100svh - 330px) / 500)) * var(--encaje, 1));
    width: calc(360 * var(--u));
    height: calc(500 * var(--u));
  }
  .widget-en-png.proximos { --x: 0; --y: 10; --giro: -4deg; }
  .widget-en-png.huecos { --x: 10; --y: 184; --giro: -6deg; }
  .widget-en-png.mes { --x: 192; --y: 170; --giro: 7deg; }
  .widget-en-png.porvotar { --x: 20; --y: 334; --giro: 3deg; }
}
@media (max-width: 700px) {
  /* (del alto que quede: si no, con las barras de Safari no cabía y la
     página perdía el imán, 20/10/2026) */
  .mesa-de-widgets { --u: calc(min(1.2px, calc(100cqi / 360), calc((100svh - 310px) / 500)) * var(--encaje, 1)); }
}
/* (Hasta el 21/10/2026, en un móvil bajo, tres, sin «Por votar»: desde
   entonces, los cuatro siempre, más pequeños si no caben; comun.js) */

/* La hoja del sticker (pantallas/hoja-del-sticker.html), con las medidas de
   `StickerSheet`: la vista previa, las opciones en su caja gris y los dos
   botones (copiar, de coral; guardar, de cristal) */
.hoja-del-sticker { position: relative; display: flow-root; height: 874px; padding: 0 20px; color: var(--texto); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.cerrar-hoja {
  position: absolute;
  top: 62px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cristal);
  box-shadow: var(--cristal-filo);
}
.vista-previa { display: grid; place-items: center; height: 200px; margin-top: 112px; }
.vista-previa .tarjeta { transform: scale(var(--tam)); }
/* La caja de las opciones: el gris de iOS sobre una hoja (#f2f2f7; en oscuro, #2c2c2e) */
.opciones { margin-top: 18px; border-radius: 20px; background: #f2f2f7; }
@media (prefers-color-scheme: dark) { .opciones { background: #2c2c2e; } }
.opcion { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 17px; }
.opcion .icono { color: var(--coral); }
.opcion span:first-of-type { flex: 1; }
.interruptor { position: relative; width: 51px; height: 31px; border-radius: 999px; background: rgba(120, 120, 128, 0.16); }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); }
.interruptor.encendido { background: var(--coral); }
.interruptor.encendido::after { left: 22px; }
/* «Modo oscuro», encendido en oscuro, como en la app (StickerSheet empieza
   con el modo del iPhone) */
@media (prefers-color-scheme: dark) {
  .opcion:first-child .interruptor { background: var(--coral); }
  .opcion:first-child .interruptor::after { left: 22px; }
}
.botones-de-la-hoja { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.boton-de-la-hoja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 999px;
  background: var(--cristal);
  box-shadow: var(--cristal-filo);
  color: var(--coral);
  font-size: 17px;
  font-weight: 600;
}
.boton-de-la-hoja.principal { background: var(--coral); box-shadow: none; color: #fff; }

/* Otra historia (pantallas/historia-fiesta.html): sin foto, con un fondo de
   color y un texto, como las del modo de crear */
.historia-de-color { position: absolute; inset: 0; background: linear-gradient(160deg, #3a1078, #c2185b); }
.barras-de-historia { position: absolute; top: 58px; left: 10px; right: 10px; display: flex; gap: 4px; }
.barras-de-historia span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.barras-de-historia span.vista { background: #fff; }
.texto-de-historia {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  color: #fff;
  font-family: "Switzer", -apple-system, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.02;
  text-align: center;
}

/* ---------- 5. La confianza ---------- */

.comparacion { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
/* Tu calendario contra lo que ve tu grupo (Abel, 13/10/2026: «más dinámico,
   como con un "vs"»; «más grande, que no esté encerrado en un círculo, más
   informal y dinámico»; y al final, «sin las rayitas y en negro»): grande,
   del color del texto (negro; en oscuro, blanco), torcido e inclinado. En
   medio de los dos marcos.
   Quieto, como todo lo de esta pantalla (Abel, 14/10/2026: «quita la
   animación, que aparezca directamente el contenido»; antes llegaba de un
   golpe, a la vez que las cards) */
.vs {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0 0.06em 0.08em;
  color: var(--texto);
  font-family: "Switzer", -apple-system, sans-serif;
  font-size: clamp(54px, 5.4vw, 78px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.03em;
  /* (el giro, en transform: `rotate` y `scale` los mueve la animación) */
  transform: rotate(-9deg) skewX(-8deg);
  /* Animado (Abel, 19/10/2026: «el vs hazlo animado»; del 14/10 al 19/10,
     quieto): late y se balancea, cada cosa a su ritmo */
  --balanceo: 5deg;
  animation:
    respirar 1.6s ease-in-out infinite,
    balanceo 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vs { animation: none; }
}
/* Cada columna, en su marco (Abel, 20/10/2026: «cada div.columna-de-agenda
   deberá estar acotado por un frame»), con el fondo que tiene en la app en
   todo el marco (Abel, 21/10/2026: «quiero que el fondo se aplique a todo
   [...] a todo su div.columna-de-agenda»): Mi calendario, el fondo de la app
   (en oscuro, el negro de la página); Cachorras, el de su grupo, con su tema
   (abajo, con .card.de-grupo; comun.js pinta el tema). Arriba, solo su pill,
   en el centro, como en la barra de la app; debajo, las cards. Del 20/10 al
   21/10, una cabecera de color con la pill y los botones de la barra. Todo en
   puntos de iPhone (--pt; --encaje lo encoge si no cabe, comun.js) */
.columna-de-agenda {
  --pt: calc(min(0.95px, calc((100svh - 400px) / 342)) * var(--encaje, 1));
  position: relative;
  flex: 1;
  max-width: calc(402 * var(--pt));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(34 * var(--pt));
  background: var(--app-fondo);
  box-shadow: 0 0 0 0.5px var(--app-filo);
}
/* (por encima del tema, que comun.js pone el primero) */
.columna-de-agenda > :not(.tema) { position: relative; }
.cabecera-de-agenda {
  display: flex;
  justify-content: center;
  padding: calc(14 * var(--pt)) calc(14 * var(--pt)) calc(2 * var(--pt));
}
/* La pill de Mi calendario, como en la barra de la app: del color de los
   botones de la web, con el filo y la sombra de la barra (sobre el fondo
   claro, si no, casi no se veía). La del grupo, como la etiqueta del grupo en
   una card de la app (`EtiquetaDeGrupo`): la letra y el icono del color del
   grupo y, de fondo, ese color al 14 % (`FomoSurface.tinteDeEtiqueta`), sin
   nada debajo, así que se ve a través el fondo del grupo (Abel, 26/10/2026:
   «quiero que sea igual que en la app»; del 20/10 al 26/10, con el blanco de
   los botones debajo, y salía más clara) */
.cabecera-de-agenda .pill-de-calendario:not(.de-grupo) { box-shadow: 0 0 0 calc(0.5 * var(--pt)) var(--app-filo), 0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgb(0 0 0 / 0.06); }
.cards-de-agenda {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--pt));
  padding: calc(12 * var(--pt)) calc(12 * var(--pt)) calc(14 * var(--pt));
}

/* ---------- 6. El cierre y el pie ---------- */

.cierre { text-align: center; }
/* El icono de la app como sale en la App Store, en PNG (ya trae sus esquinas
   y su brillo). Con más aire entre la frase, el icono y el botón (Abel,
   09/10/2026: «dale más distancia a los contenidos») */
.icono-de-la-app {
  justify-self: center;
  width: clamp(64px, 13svh, 128px);
  height: auto;
  margin-top: var(--bajo-el-titulo);
  filter: drop-shadow(0 10px 22px rgb(255 102 92 / 0.28));
  /* Flota como los stickers de la portada (Abel, 16/10/2026: «que el icono
     tenga una animación como de flotar»): sube y baja y se mece un poco. Y
     crece un poco y vuelve (Abel, 16/10/2026: «que sutilmente cambie su
     tamaño»), a otro ritmo para que no vaya todo a la vez */
  --deriva: 2px;
  --balanceo: 2deg;
  animation:
    deriva 4.2s ease-in-out infinite,
    balanceo 5.8s ease-in-out infinite,
    respirar 3.4s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { scale: 1; }
  50% { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
  .icono-de-la-app { animation: none; }
}
/* Donde se pega el botón de descargar al llegar (comun.js), del alto del botón */
.sitio-del-boton {
  /* Sin ensancharse con el botón: a 320, más ancho que su hueco, se corría a
     la derecha y se salía del recuadro; así sobresale lo mismo a cada lado */
  min-width: 0;
  display: flex;
  justify-content: center;
  min-height: 56px;
  margin-top: var(--entre-dibujo-y-lo-de-debajo);
}
/* En el ordenador, más aire entre el icono y el botón (Abel, 28/10/2026: «en
   la versión desktop haya más distancia entre los elementos, o por lo menos
   entre el icono de la app y el botón»; antes, de 18 a 32; en el móvil, igual) */
@media (min-width: 701px) {
  .sitio-del-boton { margin-top: clamp(40px, 7svh, 80px); }
}
/* Los botones redondos (Abel, 09/10/2026): volver a ver la animación
   (arriba a la derecha, en el problema, los planes y la agenda; lo enseña comun.js,
   porque sin movimiento no hace falta; al tocarlo, su icono da una vuelta) y
   subir al principio (en el pie). De 44 de lado para el dedo, sin sombra */
.repetir, .al-principio {
  position: absolute;
  z-index: 4;
  right: calc(var(--margen-del-recuadro, 12px) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--boton-solido);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  transition: scale 0.2s;
  /* Sin la mancha gris que pone Safari en el iPhone al tocar: se hunden
     (:active, que comun.js deja ver en el iPhone) (revisión del 14/10/2026) */
  -webkit-tap-highlight-color: transparent;
}
.repetir { top: calc(var(--recuadro-arriba, 12px) + 14px); }
.repetir[hidden] { display: none; }
/* El de subir, dentro del pie, a la derecha y a la altura del logo (en una
   esquina del recuadro tapaba el texto legal en el móvil) */
.pie-de-pagina { position: relative; }
.al-principio { top: 17px; right: 0; }
.pie-de-pagina .al-principio { color: var(--texto); }
/* En el ordenador, en la esquina de abajo del recuadro (no pisa nada) */
@media (min-width: 701px) {
  .pie-de-pagina { position: static; }
  .al-principio { top: auto; bottom: calc(var(--recuadro-abajo) + 14px); right: calc(var(--margen-del-recuadro) + 14px); }
}
/* Con los colores forzados de Windows, con borde y el icono del color del texto */
@media (forced-colors: active) {
  .repetir, .al-principio { border: 1px solid ButtonText; }
  .repetir .icono, .al-principio .icono { forced-color-adjust: none; background: ButtonText; }
}
.repetir:active, .al-principio:active { scale: 0.92; }
.repetir:focus-visible, .al-principio:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
/* Sin la línea de encima (Abel, 09/10/2026) */
.pie-de-pagina {
  padding-top: 28px;
}
.pie-de-pagina .logo { height: 22px; width: auto; fill: currentColor; }
.pie-de-pagina nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 14px;
}
.pie-de-pagina a { color: var(--letra-gris); font-size: 15px; text-decoration: none; }
/* Lo que piden las normas de Apple al usar su insignia: decir de quién son las marcas */
.marcas {
  max-width: 60ch;
  margin: 14px auto 0;
  color: var(--letra-gris);
  font-size: 12px;
  line-height: 1.4;
}

/* En una tableta en vertical, las excusas en sus sitios del móvil (los del
   ordenador son para una pantalla apaisada: se salían y se pisaban) */
@media (min-width: 701px) and (orientation: portrait) {
  .excusa { left: var(--xm, var(--x)); top: var(--ym, var(--y)); --letra-de-la-excusa: 16px; }
  .excusa.no-en-movil { display: none; }
}
@media (max-width: 700px) {
  .confianza { grid-template-columns: 1fr; text-align: center; }
  .bloque .texto p { margin-left: auto; margin-right: auto; }
  /* Los dos marcos de la agenda, uno encima de otro (Abel, 20/10/2026: «en
     vertical estará un div encima de otro, no como está actualmente, que
     están al lado una de otra»), con el «vs» entre los dos, montado un poco
     en cada uno. Cada marco, del ancho de la pantalla de un iPhone (402
     puntos) y tan grande como quepa a lo ancho y a lo alto (los dos miden
     684 puntos) */
  .comparacion { flex-direction: column; gap: 0; }
  .columna-de-agenda {
    /* (del ancho que haya; si no cabe a lo alto, comun.js lo encoge lo justo) */
    --pt: calc(min(0.86px, calc((100vw - 64px) / 402)) * var(--encaje, 1));
    flex: none;
    width: calc(402 * var(--pt));
    max-width: 100%;
  }
  /* Los pasos, de lado (arriba; Abel, 14/10/2026: unas horas los tuvo uno
     debajo de otro, y volvió a esta, con las flechas). Cada paso, del 80 %
     del recuadro menos 10 (como mucho 400, como en la tableta): con su
     flecha al lado, el siguiente asoma de 40 a 65 px. Y la caja de los
     dibujos, no mucho más alta que ellos (que crecen con el ancho, no con
     el alto): con 300, cada título quedaba a 80-100 px de su dibujo */
  /* Dos pasos, uno debajo de otro y centrados, con la flecha hacia abajo
     (Abel, 19/10/2026: «si de esta manera entra de manera vertical en la
     versión mobile hazlo de esta manera»; antes, tres, de lado con el dedo).
     Cada dibujo, del alto de lo suyo */
  /* (los espacios, la flecha y los dibujos, del alto que haya: con las barras
     de Safari no cabían y la página perdía el imán, 20/10/2026) */
  .lista-de-pasos { display: flex; flex-direction: column; align-items: center; gap: calc(clamp(12px, 2.6svh, 22px) * var(--encaje, 1)); }
  /* (los dibujos, del ancho que haya y del alto que quede: en un móvil ancho
     y alto, más grandes; Abel, 20/10/2026: «que el contenido se adapte al
     ancho de la pantalla»; antes, a 0,8 como mucho) */
  .escena > * { --pt: calc(min(1px, calc(100cqw / 370)) * var(--encaje, 1)); }
  .flecha { display: block; width: 100%; }
  /* (el título, debajo de su dibujo, como en el ordenador) */
  .paso { display: flex; flex-direction: column; width: 100%; text-align: center; }
  .paso > .escena { order: -1; }
  /* (del ancho del paso: la regla del ordenador, «align-self: start», en una
     columna lo encogía a su texto y lo pegaba a la izquierda) */
  .paso h3 { align-self: stretch; margin-top: calc(clamp(14px, 2.4svh, 22px) * var(--encaje, 1)); }
  .escena { height: auto; max-width: 420px; margin-inline: auto; padding: clamp(10px, 1.6svh, 14px); border-radius: 22px; }
  .flecha svg { rotate: 90deg; width: calc(clamp(36px, 5.9svh, 48px) * var(--encaje, 1)); margin-inline: auto; }
  /* El «vs», más llamativo: más grande (Abel, 21/10/2026: «el "vs" en la
     versión mobile deberá ser más llamativo [...] que sea más grande»; antes, 40) */
  /* (en su hueco, entre los dos marcos, sin montarse en ellos: tapaba
     parte de las cards; Abel, 26/10/2026) */
  .vs { z-index: 2; margin-block: 10px 14px; line-height: 1; font-size: calc(64px * var(--encaje, 1)); }
  /* La pregunta, del ancho que haya, en una línea */
  /* Y al acabar, menos pequeña que en el ordenador (Abel, 14/10/2026: «al
     menguar, en mobile no mengue tanto»): al 75 %, con la letra a unos 20 */
  .problema { --f-pregunta: min(32px, calc((100vw - 72px) / 11.9)); --encoge: 0.75; }
  /* La card del plan y, debajo, los cuatro botones repartidos en su ancho
     (en un móvil ancho, del tamaño de la app; antes, a 0,86 como mucho) */
  .votacion { --pt: calc(min(1px, calc((100vw - 64px) / 370)) * var(--encaje, 1)); }
  /* Los cuatro en fila, como en la app, y cada texto entero en una línea
     (Abel, 14/10/2026: «ningún conjunto de palabras se puede ver
     truncado»; antes «Me lo pienso» iba en dos): la letra, la de la app
     (caption, que allí encoge hasta un 85 % si no cabe), algo menor y que
     encoge con el ancho, para que «Me lo pienso» quepa siempre */
  .botones-de-voto { --pt: calc(1px * var(--encaje, 1)); gap: 5px; }
  .boton-de-voto { flex: 1 1 0; min-width: 0; padding-inline: 2px; font-size: min(12px, calc((100vw - 64px) / 28)); }
  /* Las excusas, en sus sitios del móvil (--xm, --ym) y menos; la letra,
     más grande en un móvil ancho (Abel, 20/10/2026: «que el contenido se
     adapte al ancho de la pantalla»; antes, 13 en todos) */
  .excusa { left: var(--xm, var(--x)); top: var(--ym, var(--y)); --letra-de-la-excusa: clamp(12px, 3.3vw, 15px); }
  .excusa.no-en-movil { display: none; }
  .descargar { padding: 14px 26px 14px 22px; font-size: 17px; }
}
/* En un móvil muy estrecho (320), el título del cierre va en tres líneas:
   algo más pequeño */
@media (max-width: 360px) {
  .cierre h2 { font-size: 28px; }
  /* y las excusas, un punto más pequeñas (si no, se tocaban) */
  .excusa { --letra-de-la-excusa: 12px; }
  /* El «vs», un poco más pequeño */
  .vs { font-size: calc(54px * var(--encaje, 1)); margin-block: 8px 12px; }
}
/* Por debajo de 360 de ancho, los botones de votar en dos filas de dos (en
   fila, el texto se quedaba en menos de 10,5), con el icono encima del texto
   y centrados, como siempre (Abel, 20/10/2026: «quiero que se mantengan en
   disposición centrada vertical»; antes, el icono a la izquierda) */
@media (max-width: 359px) {
  .botones-de-voto { display: grid; grid-template-columns: 1fr 1fr; }
  .boton-de-voto { padding-block: 9px; font-size: 12px; }
}
/* (Del 14/10 al 21/10/2026, con menos de 740 de alto, los pasos iban de lado
   y se pasaban con el dedo. Desde entonces, siempre uno debajo de otro, y si
   no caben, más pequeños: Abel, 21/10/2026, «quiero que la disposición de
   contenido no cambie dependiendo de lo alto que sea la pantalla [...] se
   hará más pequeño para que entre». Lo encoge comun.js, con --encaje) */
/* En un móvil muy bajo (320 × 540), menos aire entre las cosas y el botón
   «Crear sticker» más pequeño: si no, tres pantallas no cabían */
@media (max-width: 700px) and (max-height: 600px) {
  .boton-crear-sticker { font-size: 14px; }
  .visual.historias { --pantalla: min(calc(var(--movil) * 0.7), var(--pantalla-que-cabe)); }
  .boton-de-voto { padding-block: 9px; }
  .icono-de-la-app { width: 56px; }
}
/* En un móvil bajo, las mismas excusas (desde el 21/10/2026: antes, menos),
   un poco más pequeñas */
@media (max-width: 700px) and (max-height: 680px) {
  .excusa {
    /* Aquí no caben tan distintas: la mitad de diferencia de tamaño */
    --letra-de-la-excusa: 12px;
    font-size: max(11px, calc(var(--letra-de-la-excusa) * (1 + (var(--tam, 1) - 1) / 2)));
  }
}
/* Y en un móvil bajo y de 320 de ancho, un punto menos */
@media (max-width: 340px) and (max-height: 680px) {
  .excusa { --letra-de-la-excusa: 11px; }
}

/* ======================================================================
   Una sección por pantalla (Abel, 09/10/2026: «cada vez que se hace scroll
   se cambia de sección, y a la derecha una barra que te vaya guiando»).
   Con el scroll del propio navegador (scroll snap), sin programarlo: va igual
   de suave que siempre, también con el teclado y los lectores de pantalla.
   Solo en la página principal (html.por-secciones).

   Cada sección mide una pantalla con las barras de Safari escondidas (lvh,
   para que no asome la siguiente) y lo de dentro se mide con ellas a la
   vista (svh), así que cabe; el hueco de abajo suma la diferencia (lvh −
   svh), para que lo de dentro quede centrado en lo que se ve y el botón no
   lo tape. Si con letra grande o zoom alguna no cabe, comun.js lo mide
   (.sonda-de-alto) y la página va seguida (html.no-cabe).
   ====================================================================== */
html.por-secciones { scroll-snap-type: y mandatory; }
html.por-secciones.no-cabe { scroll-snap-type: none; }
/* Sin imán mientras la página va sola a otra pantalla (la guía, «Volver al
   principio», Inicio y Fin; comun.js): en iOS 26 y antes, con el imán, esa
   subida suave fallaba si Safari había escondido sus barras (arreglado en
   Safari 27; revisión del 14/10/2026) */
html.por-secciones.sin-iman { scroll-snap-type: none; }
@media (prefers-reduced-motion: no-preference) {
  html.por-secciones { scroll-behavior: smooth; }
}
.por-secciones body { padding-bottom: 0; }
.por-secciones .seccion {
  /* El recuadro de cada sección: a los lados, como mucho 1180 de ancho y al
     menos 40 de margen; arriba, 24; abajo, encima del botón de descargar
     (que ocupa los 74 de abajo). Lo de dentro, con 16 de aire hasta él */
  --margen-del-recuadro: max(40px, calc((100% - 1180px) / 2));
  --recuadro-arriba: max(24px, env(safe-area-inset-top));
  --recuadro-abajo: calc(88px + env(safe-area-inset-bottom) + (100lvh - 100svh));
  --aire-del-recuadro: clamp(28px, 4vw, 64px);
  min-height: 100vh;
  min-height: 100lvh;
  display: grid;
  align-content: center;
  margin: 0 auto;
  padding-top: calc(var(--recuadro-arriba) + 16px);
  padding-bottom: calc(var(--recuadro-abajo) + 16px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Cada sección menos la portada, en un recuadro gris muy suave, estilo Apple
   (Abel, 09/10/2026: «que cada sección esté delimitada visualmente»), más
   pequeño que la pantalla («que no abarquen tanto hasta los extremos de la
   página»): el botón de descargar va fuera, debajo. Las secciones van de lado
   a lado, con lo de dentro centrado; el recuadro es un ::before, y lo de
   dentro va por encima */
.por-secciones .seccion:not(.portada) { position: relative; isolation: isolate; }
.por-secciones .seccion:not(.portada)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--recuadro-arriba) var(--margen-del-recuadro) var(--recuadro-abajo);
  border-radius: clamp(24px, 3vw, 36px);
  background: var(--recuadro);
}
.por-secciones .bloque,
.por-secciones .funcion,
.por-secciones .problema { max-width: none; padding-inline: calc(var(--margen-del-recuadro) + var(--aire-del-recuadro)); }
.por-secciones .funciones { max-width: none; padding: 0; }
/* El mismo patrón en todas las que enseñan algo: el título y su texto, y
   debajo lo que se enseña (con el botón de «Crear sticker», si lo lleva),
   **todo junto y centrado en vertical** (Abel, 20/10/2026: «me gustaría
   eliminar la condición [...] de que el título y descripción de cada sección
   deba estar alineado [...] en el top de la sección; deberá estar todo el
   contenido alineado al centro, pero siempre que el div.texto tenga un bottom
   padding que deje un espacio de seguridad suficiente con el resto de
   contenido»; del 19/10 al 20/10, el título a la misma distancia de arriba en
   todas). El hueco de debajo del texto, en su relleno (--entre-texto-y-dibujo);
   el de arriba, como poco --aire-arriba (lo que deja libre el botón de
   repetir de Planes): si sobra sitio, los dos huecos de fuera son iguales.
   La portada, el problema y el cierre tienen su propio dibujo */
.por-secciones .seccion.pasos,
.por-secciones .seccion.funcion,
.por-secciones .seccion.confianza {
  --aire-arriba: clamp(12px, 2svh, 28px);
  align-content: stretch;
  grid-template-rows: minmax(var(--aire-arriba), 1fr) auto auto auto minmax(var(--aire-abajo, 0px), 1fr);
  row-gap: 0;
}
.por-secciones .seccion.pasos > .texto,
.por-secciones .seccion.funcion > .texto,
.por-secciones .seccion.confianza > .texto { grid-row: 2; padding-bottom: var(--bajo-el-titulo); }
/* Lo que hay del título a lo que se enseña, en todas menos la portada: algo
   más que el hueco de siempre (Abel, 26/10/2026: «dar un bottom padding a
   los títulos para crear un poco más de distancia entre el título y el
   contenido»; antes, solo --entre-texto-y-dibujo) */
:root { --bajo-el-titulo: calc(var(--entre-texto-y-dibujo) + clamp(10px, 2.2svh, 26px)); }
/* En «Nadie ve qué haces», aire también debajo de lo que se enseña, hasta el
   borde del recuadro (Abel, 26/10/2026: «que el bottom de esa sección no esté
   tan pegado al contenido»; en un móvil bajo, los marcos llegaban al borde):
   si no cabe, lo de dentro encoge (comun.js). Unas horas antes, por un
   malentendido, la mitad de hueco bajo el título */
.por-secciones .seccion.confianza { --aire-abajo: clamp(20px, 3.5svh, 40px); }
.por-secciones .seccion.pasos > .lista-de-pasos,
.por-secciones .seccion.funcion > .visual,
.por-secciones .seccion.confianza > .comparacion { grid-row: 3; margin-top: 0; }
.por-secciones .seccion.funcion > .boton-crear-sticker { grid-row: 4; }
/* Del alto justo de una pantalla mientras cabe todo: con solo un alto
   mínimo, el navegador hacía el hueco de abajo tan grande como el mínimo del
   de arriba, y en un móvil bajo Planes se pasaba de la pantalla. Si no cabe
   (letra grande, zoom), comun.js lo ve (.no-cabe) y crece como las demás; sin
   código, también; y con muy poco alto, la página va seguida (más abajo) */
@media (min-height: 521px) {
  html.por-secciones.con-js:not(.no-cabe) .seccion.pasos,
  html.por-secciones.con-js:not(.no-cabe) .seccion.funcion,
  html.por-secciones.con-js:not(.no-cabe) .seccion.confianza { height: 100vh; height: 100lvh; }
}
.sonda-de-alto {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100lvh;
  visibility: hidden;
  pointer-events: none;
}

/* 1. La portada: del alto de lo que se ve al abrir (con las barras de Safari),
   con el logo encima, y el iPhone tan grande como deje el alto */
.por-secciones .portada {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(max(28px, env(safe-area-inset-top)) + 40px);
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}
.por-secciones .marca {
  position: absolute;
  z-index: 3;
  top: max(28px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  padding-top: 0;
}
/* Con más aire entre el logo, la frase y el iPhone (Abel, 09/10/2026; el
   iPhone, un poco más pequeño por eso) */
.por-secciones h1.eslogan {
  margin-top: clamp(14px, 4svh, 48px);
  font-size: min(clamp(48px, 8.5vw, 120px), 12svh);
}
.por-secciones .lema + .zona-del-movil { margin-top: var(--entre-texto-y-dibujo); }
.por-secciones .zona-del-movil {
  /* El iPhone, tan grande como deje el alto (Abel, 09/10/2026: «que se vea
     más grande»; antes medía 100 puntos menos en un portátil). Lo demás de la
     portada (el logo, la frase, sus márgenes y el sitio del botón) ocupa
     154 px y un 21,4 % del alto; 8 más de margen y un poco de alto, por si
     un navegador pinta la frase un poco más alta (si no cupiera, la página
     iría sin pantallas). Y la frase de debajo del eslogan, unos 48 más
     (14/10/2026) */
  --movil-maximo: clamp(220px, 26vw, 380px);
  --resto: calc(206px + 21svh);
  --movil: min(var(--movil-maximo), calc((100svh - var(--resto)) * 695 / 1429));
  padding-bottom: 0;
}
/* En portátiles, el iPhone baja con el alto de la ventana y los stickers
   también, o se pisan entre ellos (revisión del 09/10/2026) */
@media (min-width: 701px) and (max-height: 960px) {
  .por-secciones .zona-del-movil { --escala: 0.85; --lejania: 0.6; }
}
@media (min-width: 701px) and (max-height: 800px) {
  .por-secciones .zona-del-movil { --escala: 0.72; --lejania: 0.45; }
}
@media (min-width: 701px) and (max-height: 680px) {
  .por-secciones .zona-del-movil { --escala: 0.58; --lejania: 0.3; }
}
/* En una tableta en vertical (un iPad), el iPhone más grande (con 26vw se
   quedaba en 220) y los stickers más pequeños (si no, se pisaban); los de
   las historias, también más grandes (se quedaban en 200) */
@media (min-width: 701px) and (orientation: portrait) {
  .por-secciones .zona-del-movil { --movil-maximo: clamp(220px, 36vw, 380px); --escala: 0.72; }
  .por-secciones .funciones { --movil-maximo: clamp(200px, 40vw, 360px); }
}

/* 4. Las funciones: el iPhone, del alto que quede */
/* (el título y el texto van encima: el iPhone, del alto que quede debajo) */
.por-secciones .funciones { --movil: min(var(--movil-maximo), calc((100svh - 360px) * 695 / 1429)); }

/* 6. El cierre: la frase y el botón en medio, y el pie abajo del todo */
.por-secciones .seccion.cierre {
  /* Aquí el botón se pega dentro: el recuadro llega más abajo */
  --recuadro-abajo: calc(24px + env(safe-area-inset-bottom));
  align-content: stretch;
  grid-template-rows: 1fr auto auto auto 1fr auto;
  /* Lo que queda bajo el pie, dentro del recuadro */
  padding-bottom: calc(var(--recuadro-abajo) + 20px);
}
/* Sin código, el botón no se pega aquí y se queda fijo abajo: el pie, por
   encima de él (revisión del 14/10/2026) */
html:not(.con-js) .seccion.cierre { padding-bottom: calc(var(--recuadro-abajo) + 20px + 76px); }
.por-secciones .cierre .texto { grid-row: 2; }
.por-secciones .cierre .icono-de-la-app { grid-row: 3; }
.por-secciones .cierre .sitio-del-boton { grid-row: 4; }
.por-secciones .cierre .pie-de-pagina { grid-row: 6; }

@media (max-width: 700px) {
  /* En el móvil, el recuadro a 12 de los bordes y encima del botón (que
     ocupa los 68 de abajo); lo de dentro, con 12 de aire */
  .por-secciones .seccion {
    --margen-del-recuadro: 12px;
    --recuadro-arriba: max(12px, env(safe-area-inset-top));
    --recuadro-abajo: calc(80px + env(safe-area-inset-bottom) + (100lvh - 100svh));
    --aire-del-recuadro: 20px;
    padding-top: calc(var(--recuadro-arriba) + 12px);
    padding-bottom: calc(var(--recuadro-abajo) + 12px);
  }
  .por-secciones .seccion:not(.portada)::before { border-radius: 26px; }
  .por-secciones .portada {
    padding-top: calc(max(20px, env(safe-area-inset-top)) + 36px);
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .por-secciones .marca { top: max(20px, env(safe-area-inset-top)); }
  /* La frase va en dos líneas: lo demás ocupa 232 px y un 10 % del alto (y 8
     de margen). El máximo, hasta 280 en los móviles altos (con 26vw se
     quedaba siempre en 220) */
  /* (32 más desde el 22/10/2026: la frase, más grande, va en tres líneas) */
  .por-secciones .zona-del-movil { --resto: calc(332px + 10svh); --movil-maximo: clamp(220px, 64vw, 280px); }
  /* La frase arriba y el iPhone debajo, del alto que quede */
  .por-secciones .funciones { --movil: min(var(--movil-maximo), calc((100svh - 345px) * 695 / 1429)); }
  /* El título de Planes, debajo de donde va su botón de repetir (en un móvil
     bajo lo tapaba): como poco, a 60 de arriba del recuadro */
  .por-secciones .seccion#planes { --aire-arriba: 48px; }
  /* Dentro de cada pantalla, más aire entre una cosa y otra, que crece con el
     alto del móvil (Abel, 13/10/2026: «que los elementos estén más
     distanciados y aprovechen mejor el espacio»; antes, 24 fijos, y todo se
     juntaba en el centro con mucho hueco arriba y abajo) */
  .por-secciones .seccion.cierre {
    --recuadro-abajo: calc(12px + env(safe-area-inset-bottom));
    padding-bottom: calc(var(--recuadro-abajo) + 20px);
    /* La frase, el icono y el botón, juntos y centrados en lo que queda
       encima del pie (Abel, 16/10/2026: «que el contenido esté más
       centrado, hay mucha distancia entre los elementos»). Del 14/10 al
       16/10 el botón iba abajo, justo encima del pie, con un hueco grande
       entre él y el icono. Y repartidos por la sección, con el mismo aire
       entre uno y otro (Abel, 16/10/2026: «mejor distribuidos, más
       separados entre sí»): los huecos crecen igual, sin bajar de los de
       siempre */
    grid-template-rows:
      1fr auto minmax(var(--bajo-el-titulo), 1fr) auto
      minmax(var(--entre-dibujo-y-lo-de-debajo), 1fr) auto 1fr auto;
  }
  .por-secciones .cierre .icono-de-la-app { grid-row: 4; margin-top: 0; }
  .por-secciones .cierre .sitio-del-boton { grid-row: 6; margin-top: 0; }
  .por-secciones .cierre .pie-de-pagina { grid-row: 8; }
}
/* Con muy poco alto (un móvil tumbado), sin pantallas: la página seguida,
   y el iPhone de su tamaño de siempre */
@media (max-height: 520px) {
  html.por-secciones { scroll-snap-type: none; }
  .por-secciones .seccion { --recuadro-arriba: 12px; --recuadro-abajo: 12px; }
  /* El problema, de una pantalla: si no, las excusas se amontonaban y la
     frase pisaba la pregunta */
  .por-secciones .seccion.problema { min-height: 100svh; }
  .excusa.no-en-movil, .excusa.no-en-bajo { display: none; }
  /* Las que quedan, en sus sitios del móvil tumbado (--xt, --yt) y del
     tamaño de las de un móvil bajo: con los de pie, se montaban sobre la
     pregunta y la frase y se salían de su caja (14/10/2026) */
  .excusa {
    left: var(--xt, var(--x));
    top: var(--yt, var(--y));
    --letra-de-la-excusa: 12px;
    font-size: max(11px, calc(var(--letra-de-la-excusa) * (1 + (var(--tam, 1) - 1) / 2)));
  }
  .por-secciones .seccion, .por-secciones .portada { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .por-secciones .portada { padding-top: 96px; }
  .por-secciones .zona-del-movil { --movil-maximo: clamp(220px, 24vw, 300px); }
  .por-secciones .zona-del-movil, .por-secciones .funciones { --movil: var(--movil-maximo); }
  /* (la pareja de la portada, también: si no, la regla del móvil la
     limitaba por un alto que aquí no hay y casi desaparecía; revisión del
     14/10/2026) */
  .por-secciones .zona-del-movil:has(.pareja-de-moviles) { --movil: min(var(--movil-maximo), calc((100vw - 32px) / 1.865)); }
  .por-secciones .seccion.cierre {
    --recuadro-abajo: calc(12px + env(safe-area-inset-bottom));
    padding-bottom: calc(var(--recuadro-abajo) + 20px);
  }
}

/* ---------- La guía de la derecha ---------- */

/* Puntitos grises, uno debajo de otro, como apagados; el de la pantalla en
   la que estás se alarga en una raya, un poco más oscura (Abel, 09/10/2026).
   Sin nombres a la vista: los nombres solo los leen los lectores de pantalla
   (.solo-para-lectores) */
.guia {
  position: fixed;
  z-index: 5;
  top: 50%;
  right: max(8px, env(safe-area-inset-right));
  transform: translateY(-50%);
}
.guia ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.guia a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 28px;
  height: 20px;
}
.guia a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--guia-punto);
  transition: height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s;
}
.guia a[aria-current]::after { height: 22px; background: var(--guia-raya); }
.guia a:focus-visible { outline: none; }
.guia a:focus-visible::after { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--texto); }
.solo-para-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Con el dedo: lo que se toca, de 44 puntos de alto (Fomo_ESTANDARES.md §5),
   sin hacer más grandes los puntitos */
@media (pointer: coarse) {
  .guia a { width: 32px; height: min(44px, 9svh); }
}
/* En el móvil, los puntitos más juntos (Abel, 09/10/2026: «que no tengan
   tanta distancia, algo normal y que quede mono»): cada enlace, del alto de
   su puntito, con 7 entre ellos; la raya crece y los demás se apartan. Van
   en el margen blanco, fuera del recuadro (dentro caían encima de lo que
   llega al borde). Con el dedo es solo una señal de dónde estás (tan juntos
   no se podría acertar); con el teclado se sigue usando. Con ratón, en una
   ventana estrecha, como en el ordenador (para poder acertar) */
@media (max-width: 700px) and (pointer: coarse) {
  .guia { right: max(0px, env(safe-area-inset-right)); pointer-events: none; }
  .guia ol { gap: 7px; }
  .guia a { width: 12px; height: auto; }
  .guia a::after { width: 5px; height: 5px; margin-right: 3.5px; }
  .guia a[aria-current]::after { height: 16px; }
}
/* Con ratón y poco ancho, los puntitos también van en el margen blanco
   (dentro del recuadro caían encima del paso que asoma); cada enlace sigue
   igual de ancho, para poder acertar, y el anillo del foco cabe en la ventana */
@media (max-width: 700px) and (pointer: fine) {
  .guia { right: 0; }
  .guia a::after { margin-right: 4px; }
}
@media (max-height: 520px) {
  .guia a { height: 20px; }
}
/* Con los colores forzados de Windows: rayas del color del texto y la actual resaltada */
@media (forced-colors: active) {
  .guia a::after { background: CanvasText; box-shadow: none; }
  .guia a[aria-current]::after { background: Highlight; }
  .guia a:focus-visible { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .guia a::after { transition: none; }
}

/* En un móvil muy bajo, el título de Planes algo más arriba (como poco, a 52
   y no a 60) y el icono del cierre más pequeño: si no, Planes y el cierre no
   cabían en un iPhone SE y la página perdía el imán (20/10/2026). Al final
   del archivo: la regla del móvil de los 60 va más abajo y, si no, mandaba ella */
@media (max-width: 700px) and (max-height: 600px) {
  .por-secciones .seccion#planes { --aire-arriba: 40px; }
  .icono-de-la-app { width: 48px; }
}
/* (Hasta el 21/10/2026, en un móvil bajo, dos cards en cada marco de la
   agenda: desde entonces, las tres siempre, más pequeñas si no caben) */
/* En un móvil de 320 de ancho, los títulos de las secciones a 25: con 32,
   la primera línea de Planes llegaba al botón de repetir (9 px), y en uno
   de 320 × 540 no cabían (20/10/2026) */
@media (max-width: 340px) {
  .funcion h2, .bloque h2 { font-size: 25px; }
  /* y el botón de repetir, más en su esquina: el título de Planes quedaba a
     1 px de él (20/10/2026) */
  .repetir { top: calc(var(--recuadro-arriba, 12px) + 8px); right: calc(var(--margen-del-recuadro, 12px) + 8px); }
}
/* Y en uno de 320 × 540, los botones de votar, algo más bajos: Planes se
   pasaba 6 px (20/10/2026) */
@media (max-width: 340px) and (max-height: 560px) {
  .boton-de-voto { padding-block: 6px; }
}