/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   momentos.css — «El muro vive» (round 35 = M1, 2026-10-23; audits/2026-10-22-equipo-ia-diseno CONTRATO §4.2–§4.3, HECHOS §5 01:33 diseno).
   Jorge, 2026-10-22: «el muro no tiene lógica, lo que se muestra no es interactivo, no llama la atención, primero te satura con texto».
   The wall as moments (components/kit/Momentos.tsx): a moment is a card with a photo or faces and ONE act; the strip is one line; a door is
   a glyph and a name. The round's only new sheet: tokens --mo-* over equipo.css's (a raw colour lives only in :root); the wall's computer
   rules (two columns from 1180 px) live here, not in escritorio.css. Only transform and opacity move; text ≥ 16 px; targets ≥ 44 px; no
   glass, no dark mode; prefers-reduced-motion stops it all. Kill = this file's link in app/layout.tsx: the pieces fall back to plain blocks.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- the room: the sucursal's photos and faces, on the whitest paper so a photo reads as a print on the crema ---- */
  --mo-papel: var(--hoja);
  --mo-borde: var(--linea);
  --mo-tinta: var(--tinta);
  --mo-titulo: var(--vino);
  --mo-apoyo: var(--gris);
  --mo-radio: var(--r-grande);
  --mo-sombra: 0 1px 2px rgba(43, 27, 32, .06), 0 16px 32px -26px rgba(43, 27, 32, .6);
  --mo-hueco: 14px;       /* between two cards */
  --mo-orilla: 18px;      /* inside a card */
  /* ---- the photo: the ≤ 60 KB variant, edge to edge on top of its card, 3:2, no veil (the words sit under it, never over it) ---- */
  --mo-foto-proporcion: 3 / 2;
  --mo-foto-fondo: var(--foto-fondo);
  /* ---- the type: the title in Eighties, two lines at most (a long Buk title never pushes the act off the screen); the lead in
     Quicksand, a size above the body, so the one line is read first ---- */
  --mo-t-titulo: var(--t-sub);
  --mo-t-titulo-ahora: 28px;
  --mo-t-lead: 17px;
  --mo-t-cita: var(--t-cita);
  /* ---- the faces ---- */
  --mo-cara: 40px;
  --mo-cara-ahora: 64px;
  --mo-cara-anillo: 3px;
  --mo-cara-1: var(--vino);
  --mo-cara-2: var(--s-terracota-2);
  --mo-cara-3: var(--s-plum);
  /* ---- the celebration (cumple, aniversario, felicitación): coral paper and the brand's flowers — never gold ---- */
  --mo-fiesta: var(--s-coral-luz);
  --mo-fiesta-borde: var(--s-coral-linea);
  --mo-fiesta-tinta: var(--s-coral-3);
  /* ---- the contest: the r32 terracotta ---- */
  --mo-concurso: var(--s-terracota-luz);
  --mo-concurso-borde: var(--s-terracota-linea);
  --mo-concurso-tinta: var(--s-terracota-tinta);
  /* ---- an achievement (a recognition's habit, a constancia's course): the wall's only gold ---- */
  --mo-logro: var(--oro-claro);
  --mo-logro-tinta: var(--oro-tinta);
  /* ---- «una mesa te nombró»: the wine quote ---- */
  --mo-mesa: var(--vino);
  --mo-mesa-tinta: var(--sobre-vino);
  --mo-mesa-apoyo: var(--sobre-vino-2);
  --mo-mesa-comilla: var(--sobre-vino-oro);
  /* ---- the act: a filled pill with the v2 edge; done = the kit's green ---- */
  --mo-acto: var(--vino);
  --mo-acto-tinta: var(--crema);
  --mo-hecho: var(--verde-claro);
  --mo-hecho-tinta: var(--verde-tinta);
  /* ---- the strip: the r32 meter's own tokens, one line ---- */
  --mo-tira-fondo: var(--papel);
  /* ---- the doors: each its own light, so three doors never read as one row shape ---- */
  --mo-puerta-1: var(--s-coral-tarjeta);     --mo-puerta-1-tinta: var(--s-coral-3);
  --mo-puerta-2: var(--s-terracota-tarjeta); --mo-puerta-2-tinta: var(--s-terracota-tinta);
  --mo-puerta-3: var(--s-salvia-tarjeta);    --mo-puerta-3-tinta: var(--s-salvia-tinta);
  /* ---- M2 · Hoy's room = the light of the hour: the morning's pale sun, the afternoon's warm terracotta, the night's plum (a lámina,
     the kit's dark band, never a dark mode) ---- */
  --mo-luz-manana: linear-gradient(165deg, var(--s-dorado-hoja) 0%, var(--s-dorado-luz) 52%, var(--s-dorado-tarjeta) 100%);
  --mo-astro-manana: radial-gradient(circle, rgba(255, 224, 138, .95) 0 34%, rgba(255, 224, 138, 0) 70%);
  --mo-luz-tarde: linear-gradient(165deg, var(--s-terracota-hoja) 0%, var(--s-terracota-luz) 50%, var(--s-terracota-tarjeta) 100%);
  --mo-astro-tarde: radial-gradient(circle, rgba(224, 128, 74, .55) 0 30%, rgba(224, 128, 74, 0) 70%);
  --mo-luz-noche: linear-gradient(165deg, var(--s-noche-2) 0%, var(--ciruela) 58%, var(--s-noche) 100%);
  --mo-astro-noche: radial-gradient(circle, var(--s-luna) 0 16%, rgba(255, 231, 154, .22) 17% 40%, rgba(255, 231, 154, 0) 64%);
  --mo-t-dia: 30px;          /* the card's one big line, in Eighties */
  --mo-t-cifra: 34px;        /* a TUYO number, in Eighties */
  /* ---- M4 · each tab its own room ([data-cuarto] on the screen's root): the AHORA card's material per room ---- */
  --mo-libro: repeating-linear-gradient(180deg, rgba(220, 197, 158, 0) 0 27px, rgba(220, 197, 158, .6) 27px 28px),
    linear-gradient(90deg, rgba(179, 38, 30, 0) 0 30px, rgba(179, 38, 30, .2) 30px 31px, rgba(179, 38, 30, 0) 31px), var(--s-papel-hoja);
  --mo-aprender: linear-gradient(165deg, var(--s-salvia-hoja) 0%, var(--s-salvia-luz) 55%, var(--s-salvia-tarjeta) 100%);
  --mo-parati: linear-gradient(165deg, var(--s-ciruela-hoja) 0%, var(--s-ciruela-luz) 60%, var(--s-ciruela-tarjeta) 100%);
  --mo-t-cifra-dia: 46px;    /* the pay-day net under the card's title, in Eighties */
  /* ---- the computer: the moment on the left (the phone's width), the river on the right ---- */
  --mo-col-lado: 380px;
  --mo-col-rio: 680px;
  --mo-col-hueco: 40px;
}

/* ---------------- the parts of the wall ---------------- */
.mo-ahora, .mo-rio, .mo-lado { display: grid; gap: var(--mo-hueco); min-width: 0; }
.mo-anteriores { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-pastilla); background: var(--papel); color: var(--vino);
  font-weight: 700; text-decoration: none; }

/* In a hero screen (section.heroe has no gutter of its own — its blocks wear .pad), the parts keep the kit's edge and their rhythm. */
.heroe > :is(.mo-ahora, .mo-tira, .mo-rio, .mo-puertas, .mo-dia, .mo-tuyo, .mo-faltan) { margin: var(--mo-hueco) var(--orilla) 0; }

/* ---------------- the card ---------------- */
.mo-tarjeta { position: relative; isolation: isolate; overflow: hidden; display: grid; min-width: 0; background: var(--mo-papel); color: var(--mo-tinta);
  border: 1px solid var(--mo-borde); border-radius: var(--mo-radio); box-shadow: var(--mo-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); }
.mo-tarjeta :is(p, h3) { margin: 0; }
.mo-foto { display: block; width: 100%; height: auto; aspect-ratio: var(--mo-foto-proporcion); object-fit: cover; background: var(--mo-foto-fondo); }
/* a picture the 3:2 crop would cut by more than ~1/5 (wider than 1.7:1 — a 16:9 flyer —, narrower than 6:5 — a portrait) is drawn whole on
   paper (entra.js reads its natural size); 4:3 and 3:2 photos keep the cover crop. Live wall 2026-10-23: 12 of 20 pictures cropped, 8 whole. */
.mo-foto[data-forma="contenida"] { object-fit: contain; padding: 8px; background: var(--papel); }
.mo-cuerpo { position: relative; display: grid; gap: 10px; min-width: 0; padding: 16px var(--mo-orilla) 18px; }
.mo-k { font-size: var(--t-apoyo); font-weight: 700; line-height: 1.3; color: var(--mo-apoyo); }
.mo-fijada { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--mo-titulo); vertical-align: top; }
.mo-fijada::after { content: "·"; margin-left: 2px; color: var(--mo-apoyo); }
.mo-fijada .ico { width: 18px; height: 18px; }
.mo-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 var(--mo-t-titulo)/1.08 var(--f-display); color: var(--mo-titulo); text-wrap: balance; }
/* two lines at most, cut on a whole word (a line break, never «Magi…»); «Leer todo» opens it whole; a card with no fold shows it whole */
.mo-titulo-texto { display: block; min-width: 0; max-height: calc(2 * 1.08em + .08em); overflow: hidden; overflow-wrap: anywhere; }
.mo-tarjeta:is(:has(.mo-pliegue[open]), :not(:has(.mo-pliegue))) .mo-titulo-texto { max-height: none; }
/* the card's own screen: the title is the link, a ≥ 44 px target even on one line */
.mo-titulo-enlace { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.mo-titulo-enlace .flecha { flex: none; width: 22px; height: 22px; color: var(--mo-apoyo); }
.mo-lead { font-size: var(--mo-t-lead); line-height: 1.45; color: var(--mo-tinta); }
.mo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.mo-pie > :is(.mo-felicitar[open], .mo-hecho) { flex-basis: 100%; }
.mo-insignia { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--mo-titulo); }
.mo-insignia-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: var(--mo-logro);
  color: var(--mo-logro-tinta); font: 500 22px/1 var(--f-display); }
.mo-insignia-tile img { width: 100%; height: 100%; object-fit: cover; }
/* the AHORA cards: the moment of today, a size up */
.mo-ahora .mo-tarjeta { --mo-t-titulo: var(--mo-t-titulo-ahora); }

/* the long text, folded: closed is not drawn (0 words for the measure); «Leer todo» is the only thing that opens it */
.mo-pliegue > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--mo-titulo); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--mo-borde); }
.mo-pliegue > summary::-webkit-details-marker { display: none; }
.mo-pliegue .mo-cierra, .mo-pliegue[open] .mo-abre { display: none; }
.mo-pliegue[open] .mo-cierra { display: inline; }
/* closed is not drawn for any reader: Chromium keeps layout boxes for a closed <details>' content (a walker measuring rects counted 90 words
   above the fold where the eye saw 38 — ahora-muro, 2026-10-23); display:none takes them out of every count */
.mo-pliegue:not([open]) > .mo-texto { display: none; }
.mo-texto { display: grid; gap: 10px; padding-top: 2px; line-height: 1.55; }
.mo-texto p { margin: 0; overflow-wrap: anywhere; }
.mo-pliegue[open] .mo-texto { animation: mo-entra var(--d-2) var(--suave); }

/* ---------------- the faces ---------------- */
.mo-caras { display: inline-flex; align-items: center; flex: none; }
.mo-cara { display: grid; place-items: center; flex: none; width: var(--mo-cara); height: var(--mo-cara); overflow: hidden; border-radius: 50%;
  background: var(--mo-cara-1); color: var(--crema); box-shadow: 0 0 0 var(--mo-cara-anillo) var(--mo-papel);
  font: 500 max(16px, calc(var(--mo-cara) * .42))/1 var(--f-display); letter-spacing: .02em; }
.mo-cara + .mo-cara { margin-left: calc(var(--mo-cara) * -.22); }
.mo-cara:nth-child(2) { background: var(--mo-cara-2); }
.mo-cara:nth-child(3) { background: var(--mo-cara-3); }
.mo-cara img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------- the act ---------------- */
.mo-acto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-bottom: var(--canto, 3px); padding: 10px 22px;
  border: 0; border-radius: var(--r-pastilla); background: var(--mo-acto); color: var(--mo-acto-tinta); box-shadow: 0 var(--canto, 3px) 0 var(--ciruela);
  font: 700 var(--t-cuerpo)/1 var(--f-texto); text-decoration: none; cursor: pointer; list-style: none;
  transition: transform var(--d-1) var(--suave); }
.mo-acto::-webkit-details-marker { display: none; }
.mo-acto:active { transform: translateY(var(--canto, 3px)); box-shadow: 0 0 0 transparent; }
.mo-acto .ico { width: 20px; height: 20px; }
.mo-acto-forma { margin: 0; }

/* «Felicitar»: the summary is the act; open, it steps back to an outline and the three lines come in under it */
.mo-felicitar { display: grid; gap: 12px; min-width: 0; }
.mo-felicitar[open] > .mo-acto { background: transparent; color: var(--mo-acto); box-shadow: inset 0 0 0 2px var(--mo-acto); justify-self: start; }
.mo-lineas { display: grid; gap: 8px; animation: mo-entra var(--d-2) var(--suave); }
.mo-lineas form { margin: 0; }
.mo-lineas-fijas { display: grid; gap: 8px; }
.mo-linea { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--mo-fiesta-borde); border-radius: 16px;
  background: var(--hoja); color: var(--tinta); font: 600 var(--t-cuerpo)/1.3 var(--f-texto); text-align: left; cursor: pointer;
  transition: transform var(--d-1) var(--suave); }
.mo-linea:active { transform: scale(.98); }
.mo-propia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mo-propia label { display: block; min-width: 0; }
.mo-propia input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--hoja); color: var(--tinta);
  font: 500 var(--t-cuerpo)/1.3 var(--f-texto); }
.mo-propia input::placeholder { color: var(--gris-medio); }
.mo-mandar { min-height: 48px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--vino); color: var(--crema); font: 700 var(--t-cuerpo)/1 var(--f-texto); cursor: pointer; }
.mo-a-quien { display: grid; gap: 8px; }
.mo-a-quien-una > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border: 1.5px solid var(--mo-fiesta-borde);
  border-radius: var(--r-pastilla); background: var(--hoja); font-weight: 700; cursor: pointer; list-style: none; --mo-cara: 40px; }
.mo-a-quien-una > summary::-webkit-details-marker { display: none; }
.mo-a-quien-una[open] > summary { border-color: var(--vino); }
.mo-a-quien-una > .mo-lineas { padding-top: 8px; }

/* what her act left: the check, the words, «Deshacer» */
.mo-hecho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 52px; padding: 4px 6px 4px 12px;
  border-radius: var(--r-pastilla); background: var(--mo-hecho); color: var(--mo-hecho-tinta); font-weight: 700; }
.mo-hecho-dice { display: inline-flex; align-items: center; gap: 10px; }
.mo-palomita { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: var(--crema);
  animation: mo-palomita var(--d-3) var(--resorte) both; }
.mo-palomita .ico { width: 16px; height: 16px; }
.mo-hecho form { margin: 0; }
.mo-deshacer { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pastilla); background: transparent; color: var(--mo-hecho-tinta);
  font: 700 var(--t-cuerpo)/1 var(--f-texto); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------------- each moment its own small room ---------------- */
/* today's celebration: coral paper, the faces big, two of the brand's flowers in the corner */
.mo-tarjeta:is([data-clase="cumple"], [data-clase="aniversario"]) { --mo-papel: var(--mo-fiesta); --mo-borde: var(--mo-fiesta-borde); --mo-apoyo: var(--mo-fiesta-tinta);
  --mo-cara: var(--mo-cara-ahora); }
.mo-tarjeta:is([data-clase="cumple"], [data-clase="aniversario"]) .mo-cuerpo { gap: 12px; padding-top: 18px; padding-right: 72px; }
.mo-tarjeta:is([data-clase="cumple"], [data-clase="aniversario"]) .mo-pie { margin-right: -54px; }
.mo-flores { position: absolute; z-index: -1; top: -6px; right: 4px; display: flex; align-items: flex-start; pointer-events: none; }
.mo-flores .ilustracion { display: block; width: 44px; }
.mo-flores .ilustracion + .ilustracion { width: 36px; margin-top: 26px; margin-left: -10px; }
.mo-flores svg { display: block; width: 100%; height: auto; }
/* the contest: the r32 terracotta */
.mo-tarjeta[data-clase="concurso"] { --mo-papel: var(--mo-concurso); --mo-borde: var(--mo-concurso-borde); --mo-apoyo: var(--mo-concurso-tinta); }
/* a felicitación in the river: the celebration's paper, small */
.mo-tarjeta[data-clase="felicitacion"] { --mo-papel: var(--mo-fiesta); --mo-borde: var(--mo-fiesta-borde); --mo-apoyo: var(--mo-fiesta-tinta); --mo-t-titulo: 22px; }
/* «una mesa te nombró»: the wine quote, the guest's words in Eighties */
.mo-tarjeta[data-clase="mesa"] { --mo-papel: var(--mo-mesa); --mo-borde: var(--mo-mesa); --mo-tinta: var(--mo-mesa-tinta); --mo-titulo: var(--mo-mesa-tinta);
  --mo-apoyo: var(--mo-mesa-apoyo); --mo-cara-anillo: 2px; }
.mo-tarjeta[data-clase="mesa"] .mo-lead { font: 500 var(--mo-t-cita)/1.15 var(--f-display); color: var(--mo-mesa-tinta); }
.mo-tarjeta[data-clase="mesa"] .mo-lead::first-letter { color: var(--mo-mesa-comilla); }
/* the house's notice that waits for «Enterado»: framed in wine */
.mo-tarjeta[data-clase="aviso"] { --mo-borde: var(--vino); border-width: 2px; }
/* an achievement: the gold is on its tile and nowhere else */
.mo-tarjeta[data-clase="constancia"] .mo-insignia-tile, .mo-tarjeta[data-clase="reconocimiento"] .mo-insignia-tile { box-shadow: 0 0 0 2px var(--mo-papel), 0 0 0 3px var(--oro); }

/* ---------------- the strip: one line, never a hero ---------------- */
.mo-tira { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 16px;
  border-radius: 16px; background: var(--mo-tira-fondo); color: var(--vino); font-weight: 700; text-decoration: none; transition: transform var(--d-1) var(--suave); }
a.mo-tira:active { transform: scale(.985); }
span.mo-tira { grid-template-columns: minmax(0, 1fr) auto; padding-right: 16px; }
.mo-tira-dice { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mo-tira-barra { position: relative; width: 72px; height: 10px; overflow: hidden; border-radius: var(--r-pastilla); background: var(--jg-termo-vacio); }
.mo-tira-barra::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--jg-termo-lleno); transform-origin: left center;
  transform: scaleX(var(--mo-lleno, 0)); }
.mo-tira .flecha { width: 20px; height: 20px; color: var(--gris-claro); }

/* ---------------- the doors: glyph + name, a grid of three ---------------- */
.mo-puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mo-puertas:is([data-n="2"], [data-n="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* five or six doors: three across only where a tile keeps ~118 px (a laptop's left column), else two — a name never breaks mid-word */
.mo-puertas:is([data-n="5"], [data-n="6"]) { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.mo-puertas[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.mo-puertas > li { display: grid; min-width: 0; }
.mo-puerta { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 104px; padding: 14px 6px 12px; border: 1px solid var(--linea);
  border-radius: 18px; background: var(--hoja); color: var(--vino); box-shadow: var(--mo-sombra); text-align: center; text-decoration: none;
  transition: transform var(--d-1) var(--suave); }
.mo-puerta:active { transform: scale(.96); }
.mo-puerta-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mo-puerta-1); color: var(--mo-puerta-1-tinta); }
.mo-puertas > li:nth-child(3n + 2) .mo-puerta-ico { background: var(--mo-puerta-2); color: var(--mo-puerta-2-tinta); }
.mo-puertas > li:nth-child(3n) .mo-puerta-ico { background: var(--mo-puerta-3); color: var(--mo-puerta-3-tinta); }
.mo-puerta-ico .ico { width: 26px; height: 26px; }
.mo-puerta-dice { max-width: 100%; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: none; }
.mo-puerta-detalle { max-width: 100%; margin-top: -4px; font-size: var(--t-apoyo); font-weight: 600; line-height: 1.2; color: var(--gris); }

/* ---------------- the wall on a computer ----------------
   The screen gives Marco `contexto={<Lado>AHORA · strip/TUYO · doors</Lado>}` and draws the same in the lienzo (the phone's). Below 1180 px the
   left column is not drawn: at 900–1179 the rail and the gaps would leave the river ≈ 280 px, narrower than a phone, so the wall stays one column
   (the river's width, centred). From 1180 the moment sits on the left (sticky, the phone's width) and the river on the right; the lienzo's own
   copies step aside. /kit#momentos wears the same rules in its stand-in frame (.mo-escritorio). */
#pantalla > .eq-app > .eq-contexto:has(> .mo-lado), .mo-escritorio > .eq-contexto { display: none; }
.mo-escritorio { display: grid; gap: var(--mo-hueco); }
.mo-escritorio > .eq-lienzo { min-width: 0; padding: 0; }
@media (min-width: 900px) and (max-width: 1179.98px) {
  #pantalla > .eq-app:has(> .eq-contexto > .mo-lado) { grid-template-columns: minmax(0, calc(var(--mo-col-rio) + 2 * var(--orilla))); }
}
@media (min-width: 1180px) {
  :is(#pantalla > .eq-app:has(> .eq-contexto > .mo-lado), .mo-escritorio) {
    display: grid; align-items: start; justify-content: center; column-gap: var(--mo-col-hueco);
    grid-template-columns: var(--mo-col-lado) minmax(0, calc(var(--mo-col-rio) + 2 * var(--orilla)));
  }
  :is(#pantalla > .eq-app, .mo-escritorio) > .eq-contexto:has(> .mo-lado) {
    display: block; grid-column: 1; grid-row: 1; position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  #pantalla > .eq-app > .eq-contexto:has(> .mo-lado) { padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 24px) 0 32px; }
  :is(#pantalla > .eq-app:has(> .eq-contexto > .mo-lado), .mo-escritorio) > .eq-lienzo { grid-column: 2; grid-row: 1; }
  :is(#pantalla > .eq-app:has(> .eq-contexto > .mo-lado), .mo-escritorio) > .eq-lienzo :is(.mo-ahora, .mo-tira, .mo-puertas, .mo-dia, .mo-tuyo, .mo-faltan, .mo-dilo, .cred-estado, .credencial) { display: none; }
}

/* ---------------- M2 · Hoy's AHORA card: the moment of her day, in the light of the hour ---------------- */
.mo-dia { --mo-dia-fondo: var(--mo-luz-manana); --mo-dia-astro: var(--mo-astro-manana); --mo-apoyo: var(--gris); --mo-titulo: var(--vino);
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; min-width: 0; padding: 18px var(--mo-orilla) 20px;
  border-radius: var(--mo-radio); background: var(--mo-dia-fondo); color: var(--tinta); box-shadow: var(--mo-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); }
.mo-dia :is(p, h3, ul) { margin: 0; }
.mo-dia[data-luz="tarde"] { --mo-dia-fondo: var(--mo-luz-tarde); --mo-dia-astro: var(--mo-astro-tarde); }
.mo-dia[data-luz="noche"] { --mo-dia-fondo: var(--mo-luz-noche); --mo-dia-astro: var(--mo-astro-noche); --mo-apoyo: var(--sobre-vino-2); --mo-titulo: var(--sobre-vino);
  --mo-acto: var(--crema); --mo-acto-tinta: var(--vino); color: var(--sobre-vino); }
.mo-dia[data-luz="noche"] .mo-acto:not(.suave) { box-shadow: 0 var(--canto, 3px) 0 var(--s-noche); }
.mo-dia-astro { position: absolute; z-index: -1; top: -64px; right: -64px; width: 190px; height: 190px; border-radius: 50%; background: var(--mo-dia-astro); pointer-events: none; }
.mo-dia[data-luz="tarde"] .mo-dia-astro { top: auto; bottom: -90px; right: -40px; }
.mo-dia[data-luz="noche"] .mo-dia-astro { top: -50px; right: -50px; width: 170px; height: 170px; }
.mo-dia .mo-k { display: flex; align-items: center; gap: 8px; }
.mo-dia .mo-k .ico { width: 20px; height: 20px; flex: none; }
.mo-dia-titulo { font: 500 var(--mo-t-dia)/1.05 var(--f-display); color: var(--mo-titulo); text-wrap: balance; font-variant-numeric: tabular-nums; }
.mo-dia-lineas { display: grid; gap: 8px; padding: 0; list-style: none; }
.mo-dia-lineas li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.mo-dia-lineas .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--mo-apoyo); }
.mo-dia-cuando { color: var(--mo-apoyo); font-weight: 600; }
.mo-dia-actos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mo-acto.suave { background: transparent; color: var(--mo-acto); box-shadow: inset 0 0 0 2px var(--mo-acto); margin-bottom: 0; }
.mo-acto.suave:active { transform: scale(.97); box-shadow: inset 0 0 0 2px var(--mo-acto); }

/* ---------------- M2 · TUYO: her numbers, the number big, the words few ---------------- */
.mo-tuyo { display: grid; grid-template-columns: repeat(var(--mo-tuyo-n, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid var(--linea); border-radius: 18px; background: var(--hoja); box-shadow: var(--mo-sombra); }
.mo-tuyo[data-n="1"] { --mo-tuyo-n: 1; }
.mo-tuyo[data-n="2"], .mo-tuyo[data-n="4"] { --mo-tuyo-n: 2; }
.mo-tuyo > li { display: grid; min-width: 0; }
.mo-tuyo > li + li { border-left: 1px solid var(--linea); }
.mo-tuyo[data-n="4"] > li:nth-child(3) { border-left: 0; }
.mo-tuyo[data-n="4"] > li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
.mo-tuyo-cifra { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 88px; padding: 14px 14px 12px; color: var(--vino); text-decoration: none; }
a.mo-tuyo-cifra:active { background: var(--papel); }
.mo-tuyo-n { font: 500 var(--mo-t-cifra)/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-tuyo-dice { font-size: var(--t-apoyo); font-weight: 600; line-height: 1.25; color: var(--gris); }

/* ---------------- M2 · the leader's «sin checada» card ---------------- */
.mo-faltan .mo-cuerpo { gap: 10px; }
.mo-faltan-caras { display: flex; align-items: center; --mo-cara: 48px; }
.mo-faltan-caras > .mo-cara-mas { margin-left: calc(var(--mo-cara) * -.22); background: var(--papel-2); color: var(--vino); font-family: var(--f-texto); font-weight: 700; }
.mo-faltan-cuando { font-weight: 600; color: var(--mo-apoyo); }

/* ---------------- M4 · each tab its own room — the screen's root wears data-cuarto (nothing re-skins until a screen opts in) ----------------
   Hoy = the hour's light (TarjetaAhora's luz) · Muro = the moments · Dinero = the ledger paper of listas.css · Aprender = salvia, the
   course rooms ([data-sala]) untouched · Yo = the credential's own light («el pasaporte», CredencialEstado is its AHORA) · Para ti = the
   receipts grouped by day. Two constants in every room: the AHORA card's shape and the «Dilo» slot. */
[data-cuarto="dinero"] { --mo-ahora-fondo: var(--mo-libro); }
[data-cuarto="aprender"] { --mo-ahora-fondo: var(--mo-aprender); }
[data-cuarto="parati"] { --mo-ahora-fondo: var(--mo-parati); }
[data-cuarto="yo"] { --mo-ahora-fondo: var(--jg-credencial-fondo); }
.mo-dia:not([data-luz]) { --mo-dia-fondo: var(--mo-ahora-fondo, var(--hoja)); }
.mo-dia:not([data-luz]) .mo-dia-astro { display: none; }
.mo-dia-cifra { font: 500 var(--mo-t-cifra-dia)/1 var(--f-display); color: var(--mo-titulo); font-variant-numeric: tabular-nums; }
/* the brand's illustration in the card's top corner, a 40 px slot beside the kicker — above the title's first line, never over a word or an
   act (decorative; medir never counts it as a photo) */
.mo-dia-arte { position: absolute; top: 10px; right: 14px; display: block; width: 52px; height: 40px; pointer-events: none; }
.mo-dia-arte svg, .mo-dia-arte img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mo-dia[data-con-arte] .mo-k { padding-right: 60px; }

/* the «Dilo» slot: the chips first (fixed queries from her facts), then the field — the same in every room */
.mo-dilo { display: grid; gap: 8px; min-width: 0; }
.mo-dilo form { margin: 0; }
.mo-dilo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-dilo-chip { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--linea); border-radius: var(--r-pastilla); background: var(--hoja); color: var(--vino);
  font: 700 var(--t-cuerpo)/1.2 var(--f-texto); cursor: pointer; transition: transform var(--d-1) var(--suave); }
.mo-dilo-chip:active { transform: scale(.96); }
.mo-dilo-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 56px; padding: 4px 4px 4px 18px;
  border: 1.5px solid var(--vino); border-radius: var(--r-pastilla); background: var(--hoja); box-shadow: var(--mo-sombra); }
.mo-dilo-campo:focus-within { outline: 3px solid var(--oro); outline-offset: 2px; }
.mo-dilo-campo label { display: block; min-width: 0; }
.mo-dilo-campo input[type="text"] { width: 100%; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--tinta); font: 500 var(--t-cuerpo)/1.3 var(--f-texto); }
.mo-dilo-campo input[type="text"]:focus { outline: none; }
.mo-dilo-campo input::placeholder { color: var(--gris-medio); }
.mo-dilo-enviar { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--vino); color: var(--crema); cursor: pointer; }
.mo-dilo-enviar .ico { width: 22px; height: 22px; }

/* Para ti: the act that remains, inside its row (the verb at the end, like «Lo que te toca») */
.item.para-ti .mo-fila-acto { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; padding: 0 14px; border-radius: var(--r-pastilla);
  background: var(--vino); color: var(--crema); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ---------------- M3 · «Dilo»: the builder, the voice, the outcome card ---------------- */
/* the builder: a sentence with two pills to choose — «Quiero [día libre ▾] el [sábado 24 ▾]» */
.mo-constructor { display: grid; gap: 12px; margin: 0; padding: 16px var(--mo-orilla); border: 1px solid var(--linea); border-radius: var(--mo-radio); background: var(--hoja); box-shadow: var(--mo-sombra); }
.mo-constructor-frase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font: 500 var(--mo-t-titulo)/1.2 var(--f-display); color: var(--vino); }
.mo-elige { position: relative; display: inline-flex; }
.mo-elige select { appearance: none; -webkit-appearance: none; min-height: 48px; padding: 6px 40px 6px 16px; border: 2px solid var(--vino); border-radius: var(--r-pastilla);
  background: var(--papel); color: var(--vino); font: 700 var(--t-cuerpo)/1.2 var(--f-texto); cursor: pointer; }
.mo-elige::after { content: ""; position: absolute; top: 50%; right: 16px; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid var(--vino);
  border-bottom: 2.5px solid var(--vino); transform: rotate(45deg); pointer-events: none; }
.mo-elige select:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* the voice: one big round button; listening breathes (transform only); the transcript is a quote before anything runs */
.mo-voz { display: grid; gap: 12px; margin: 0; }
.mo-voz-boton { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 56px; padding: 6px 20px 6px 6px; border: 1.5px solid var(--vino);
  border-radius: var(--r-pastilla); background: var(--hoja); color: var(--vino); font: 700 var(--t-cuerpo)/1 var(--f-texto); cursor: pointer; }
.mo-voz-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vino); color: var(--crema); }
.mo-voz-ico .ico { width: 22px; height: 22px; }
.mo-voz[data-voz="escuchando"] .mo-voz-ico::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--vino); animation: mo-respira var(--late) var(--suave) infinite; }
.mo-voz-dijiste { display: grid; gap: 4px; margin: 0; padding: 14px var(--mo-orilla); border-radius: var(--mo-radio); background: var(--papel); }
.mo-voz-dijiste q { font: 500 var(--mo-t-titulo)/1.15 var(--f-display); color: var(--vino); quotes: "«" "»"; }

/* the outcome card: the AHORA card's shape, framed in wine — nothing has been sent yet, and it says so in the pending ink */
.mo-resultado { display: grid; gap: 12px; min-width: 0; padding: 18px var(--mo-orilla) 20px; border: 2px solid var(--vino); border-radius: var(--mo-radio); background: var(--hoja);
  box-shadow: var(--mo-sombra); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); color: var(--tinta); }
.mo-resultado :is(p, h3, blockquote) { margin: 0; }
.mo-resultado-titulo { font: 500 26px/1.12 var(--f-display); color: var(--vino); text-wrap: balance; }
.mo-resultado-dijiste { font-weight: 600; color: var(--gris); }
.mo-resultado-quien { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.mo-resultado-quien .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gris); }
.mo-resultado-aviso { justify-self: start; padding: 6px 12px; border-radius: var(--r-pastilla); background: var(--espera-claro); color: var(--espera-tinta); font-weight: 700; }
.mo-resultado form { margin: 0; }
.mo-resultado-opciones { display: grid; gap: 8px; }
.mo-opcion { width: 100%; min-height: 52px; padding: 12px 18px; border: 2px solid var(--vino); border-radius: 16px; background: var(--papel); color: var(--vino);
  font: 700 var(--t-cuerpo)/1.2 var(--f-texto); text-align: left; cursor: pointer; transition: transform var(--d-1) var(--suave); }
.mo-opcion:active { transform: scale(.98); }
.mo-resultado-salida { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--vino); }
.mo-resultado[data-resultado="respuesta"] { border-color: var(--linea); border-width: 1px; }
.mo-resultado[data-estado="no_se"] .mo-resultado-titulo { color: var(--espera-tinta); }
.mo-resultado-pasaje { display: grid; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--vino); border-radius: 0 12px 12px 0; background: var(--papel); }
.mo-resultado-pasaje p { font-style: italic; }
.mo-resultado-pasaje footer { font-weight: 700; color: var(--gris); }
.item.para-ti .mo-fila-forma { margin: 0 0 0 8px; }
.item.para-ti .mo-fila-forma .mo-fila-acto { margin-left: 0; border: 0; font: 700 var(--t-cuerpo)/1 var(--f-texto); cursor: pointer; }
/* on a phone the row's act goes under its text (at the row's end it narrowed the text: 2,130 → 2,394 px over 14 rows, ahora-yo's measure) */
@media (max-width: 599.98px) {
  .item.para-ti:has(> :is(.mo-fila-acto, .mo-fila-forma)) { flex-wrap: wrap; row-gap: 6px; }
  .item.para-ti:has(> :is(.mo-fila-acto, .mo-fila-forma))::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .item.para-ti > :is(.mo-fila-acto, .mo-fila-forma) { order: 5; margin-left: 54px; }
}
@keyframes mo-respira { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.18); opacity: 0; } }

/* ---------------- M5 · «Hoy en <sucursal>»: the kitchen tablet — no taps, big type, read from across the room ----------------
   One screen, never a scroll (nobody scrolls a wall): the page gives it the viewport's height; four across, the rows share the height,
   the thermometer is the r32 piece as it is, the post and the recognitions take two columns. */
.mo-tablero-caja { container-type: inline-size; height: 100%; }
/* the sucursal's own screen (/sucursal/<token>, a bare <main data-pantalla="sucursal.hoy">): the board takes the whole screen, never a scroll */
[data-pantalla="sucursal.hoy"] { height: 100vh; height: 100dvh; overflow: hidden; }
.mo-tablero { --mo-tb-t: 28px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; box-sizing: border-box; height: 100%; min-height: 0;
  padding: 28px 36px 32px; overflow: hidden; background: var(--crema); color: var(--tinta); font: 600 var(--mo-tb-t)/1.25 var(--f-texto); }
.mo-tablero :is(h2, p, ul) { margin: 0; }
.mo-tablero-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.mo-tablero-cabeza h2 { font: 500 60px/1 var(--f-display); color: var(--vino); }
.mo-tablero-cabeza p { font-size: 24px; color: var(--gris); }
.mo-tablero-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; min-height: 0; }
.mo-tablero-tarjeta { display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 0; padding: 22px 24px; overflow: hidden; border-radius: 26px; background: var(--hoja);
  border: 1px solid var(--linea); box-shadow: var(--mo-sombra); }
.mo-tablero-tarjeta[data-clase="cumple"], .mo-tablero-tarjeta[data-clase="aniversario"] { background: var(--mo-fiesta); border-color: var(--mo-fiesta-borde); }
.mo-tablero-tarjeta[data-clase="concurso"] { background: var(--mo-concurso); border-color: var(--mo-concurso-borde); }
.mo-tablero-k { font-size: 22px; font-weight: 700; color: var(--gris); }
.mo-tablero-nombres { font: 500 46px/1.08 var(--f-display); color: var(--vino); overflow-wrap: break-word; }
.mo-tablero-titulo { font: 500 34px/1.1 var(--f-display); color: var(--vino); }
.mo-tablero-linea { font-size: 24px; line-height: 1.3; }
.mo-tablero-lista { display: grid; gap: 6px; padding: 0; list-style: none; font-size: 24px; }
.mo-tablero-lista b { font: 500 34px/1.1 var(--f-display); color: var(--vino); }
.mo-tablero-tarjeta[data-clase="reconocimiento"] { grid-column: span 2; }
/* the thermometer: the r32 piece is its own card — no second frame around it */
.mo-tablero-termo { padding: 0; border: 0; background: none; box-shadow: none; }
.mo-tablero-post { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; align-content: stretch; gap: 22px; padding: 0 24px 0 0; }
.mo-tablero-post > div { align-self: center; display: grid; gap: 8px; }
.mo-tablero-post img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: var(--foto-fondo); }
.mo-tablero-post img[data-forma="contenida"] { object-fit: contain; padding: 10px; background: var(--papel); }
@container (max-width: 1100px) {
  .mo-tablero { --mo-tb-t: 24px; padding: 24px 28px 28px; gap: 16px; }
  .mo-tablero-cabeza h2 { font-size: 52px; }
  .mo-tablero-nombres { font-size: 38px; }
  .mo-tablero-titulo, .mo-tablero-lista b { font-size: 28px; }
  .mo-tablero-k, .mo-tablero-linea, .mo-tablero-lista, .mo-tablero-cabeza p { font-size: 20px; }
}
/* /kit#tablet: the tablet's own size, previewed at a scale the kit column holds (a kit-only frame) */
.mo-tablero-vista { display: grid; gap: 10px; justify-items: start; }
.mo-tablero-marco { overflow: hidden; border: 10px solid var(--ciruela); border-radius: 28px; background: var(--crema); box-shadow: var(--mo-sombra); }
.mo-tablero-marco[data-tam="1280"] { width: 1280px; height: 800px; }
.mo-tablero-marco[data-tam="1024"] { width: 1024px; height: 768px; }
.mo-tablero-marco { zoom: .26; }
@media (min-width: 600px) { .mo-tablero-marco { zoom: .44; } }
@media (min-width: 900px) { .mo-tablero-marco { zoom: .62; } }
@media (min-width: 1360px) { .mo-tablero-marco[data-tam="1280"] { zoom: .98; } .mo-tablero-marco[data-tam="1024"] { zoom: 1; } }

/* ---------------- M5 · «No es así»: quiet, at the card's end, 44 px; after the tap «Avisamos a RH» in place ---------------- */
.mo-no-es-asi { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0; color: var(--mo-apoyo); font: 600 var(--t-cuerpo)/1.2 var(--f-texto); }
.mo-no-es-asi button { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mo-no-es-asi[data-no-es-asi="enviado"] { min-height: 44px; color: var(--verde-tinta); }
.mo-no-es-asi[data-no-es-asi="enviado"] .ico { width: 18px; height: 18px; }
.mo-dia[data-luz="noche"] .mo-no-es-asi[data-no-es-asi="enviado"] { color: var(--s-noche-verde-tinta); }
.mo-dia .mo-no-es-asi { margin-top: -6px; }
/* the strip keeps its one line whole; its «No es así» sits right under it, quiet */
.mo-tira-fila { display: grid; min-width: 0; }
.mo-tira-fila > .mo-no-es-asi { margin-top: -2px; }
/* today's celebration: the words make room for the flowers; «No es así» goes back to the card's edge */
.mo-tarjeta:is([data-clase="cumple"], [data-clase="aniversario"]) .mo-no-es-asi { margin-right: -54px; }
.heroe > .mo-tira-fila { margin: var(--mo-hueco) var(--orilla) 0; }

/* ---------------- HCAI · «¿Te sirvió?» under a lead the model wrote — quiet grey, two 44 px taps, never gold; after the tap her thumb stays ---------------- */
.mo-opinion { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--mo-apoyo); font-weight: 600; }
.mo-opinion > span:first-child:not(.mo-opinion-mia) { margin-right: 4px; }
.mo-opinion form { margin: 0; }
.mo-opinion button, .mo-opinion-mia { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--mo-borde); border-radius: 50%;
  background: transparent; color: var(--mo-apoyo); }
.mo-opinion button { cursor: pointer; transition: transform var(--d-1) var(--suave); }
.mo-opinion button:active { transform: scale(.92); }
.mo-opinion-mia { border-color: var(--mo-apoyo); background: var(--papel); color: var(--vino); }
.mo-opinion :is(button, .mo-opinion-mia) .ico { width: 20px; height: 20px; }
.mo-opinion :is(button[value="no"], .mo-opinion-mia[data-voto="no"]) .ico { transform: rotate(180deg); }

/* /kit#cuartos: the rooms side by side (a kit-only frame) */
.mo-cuartos { display: grid; gap: 26px; align-items: start; }
@media (min-width: 900px) { .mo-cuartos { grid-template-columns: repeat(2, minmax(0, 390px)); } }
@media (min-width: 1280px) { .mo-cuartos { grid-template-columns: repeat(3, minmax(0, 390px)); } }
.mo-cuartos > [data-cuarto] { display: grid; gap: 14px; min-width: 0; }

/* ---------------- motion: one clock (--d-*), transform and opacity only ---------------- */
/* The kit's entrance at the first paint (every screen): equipo.css hides [data-entra] until entra.js — loaded after hydration — adds
   `.entra`; on the live screens that kept a screen's blocks invisible ~0.5–2 s after the first paint (measured 2026-10-23 as 328 at 390:
   Chromium 0.5–1.6 s, WebKit longer). The same fade-up (eq-entra, the one clock) now starts by CSS when the block is drawn; the script's
   `.entra` and `--n` arrive later and change nothing (same animation, no delay ⇒ no replay, no second hiding). Child navigations keep
   their own rule (no entrance) and reduced motion still shows everything at once (equipo.css, !important). */
:root [data-entra], :root [data-entra].entra { animation: eq-entra var(--d-3) var(--suave) both; animation-delay: 0s; }

@keyframes mo-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes mo-palomita { from { opacity: 0; transform: scale(.4); } }
@keyframes mo-cara { from { opacity: 0; transform: translateY(8px) scale(.8); } }
/* The moment of today comes in by itself at the first paint (CSS only): the kit's [data-entra] waits for its script and kept the first
   card invisible 0.5–1.6 s after the first paint on the live wall (measured 2026-10-23, 328 at 390); the river's cards are simply there. */
.mo-ahora .mo-tarjeta { animation: mo-entra var(--d-3) var(--suave) both; }
.mo-ahora .mo-tarjeta + .mo-tarjeta { animation-delay: var(--escalon); }
.mo-ahora .mo-tarjeta:is([data-clase="cumple"], [data-clase="aniversario"]) .mo-cara { animation: mo-cara var(--d-3) var(--resorte) both; }
.mo-ahora .mo-cara:nth-child(2) { animation-delay: var(--escalon); }
.mo-ahora .mo-cara:nth-child(3) { animation-delay: calc(2 * var(--escalon)); }
@media (prefers-reduced-motion: reduce) {
  :is(.mo-ahora, .mo-rio, .mo-lado, .mo-tira, .mo-puertas, .mo-tarjeta, .mo-dia, .mo-tuyo, .mo-dilo, .mo-voz, .mo-resultado) :is(*, *::before, *::after), .mo-tira, .mo-puerta, .mo-dia, .mo-tuyo { animation: none !important; transition: none !important; }
}