/* ===========================================================================================================================
   Torre.ui · el kit compartido del demo (ha-diseno-look, 11 oct 2026). Los componentes de quirófanos (assets/quirofanos.css, rondas
   2 y 2b) promovidos a todas las pantallas con prefijo tu-: misma forma, mismas medidas. Lo carga assets/torre.ui.js (y index.html).
   Sólo tokens de torre.css: los tintes del estado se mezclan de ellos; los colores de WhatsApp viven SÓLO dentro de .tu-hilo
   (es una ilustración de WhatsApp). Contrato: demo/DISENO.md §The kit · uso: demo/HEROES.md §El kit · método: quirofanos/DISENO-2.md.
   1. Estado de cuatro: rojo actuar · amarillo vigilar · verde bien · gris neutro; color + forma + palabra; sólo la excepción lleva fondo.
   2. Una tarjeta = un número, una etiqueta (≤ 5 palabras), un estado; la definición, la fuente y el «estimado», en su ficha (un toque).
   3. Laptop 1440: panel junto a la cifra; teléfono 390 y tableta 820: hoja desde abajo, botones ≥ 48 px.
   4. Sólo se anima transform y opacity; con prefers-reduced-motion, nada; con una ficha abierta, todo se pausa.
   =========================================================================================================================== */

:root {
  /* los tintes del estado de cuatro, mezclados de los tokens de torre.css (ningún color nuevo) */
  --tu-rojo-tinte: color-mix(in srgb, var(--rojo) 10%, transparent); --tu-rojo-linea: color-mix(in srgb, var(--rojo) 28%, transparent);
  --tu-ambar-tinte: color-mix(in srgb, var(--amarillo) 11%, transparent); --tu-ambar-linea: color-mix(in srgb, var(--amarillo) 32%, transparent);
}

/* ---- etiqueta(): «estimado», «cifra del fabricante», «ficticio» ---- */
.tu-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border: 1px dashed var(--ink-400); border-radius: var(--r-full);
  background: var(--card); color: var(--ink-600); font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.tu-chip::before { content: '≈'; font: 600 12px/1 var(--sans); letter-spacing: 0; }
.tu-chip[data-tu-chip="fabricante"] { border-style: solid; }
.tu-chip[data-tu-chip="fabricante"]::before { content: ''; width: 6px; height: 6px; border: 1.5px solid currentColor; border-radius: 1.5px; }
.tu-chip[data-tu-chip="ficticio"] { border-style: dotted; }
.tu-chip[data-tu-chip="ficticio"]::before { content: '∗'; }

/* ---- chip(estado, palabra) ---- */
.tu-c4 { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-full); white-space: nowrap;
  font: 600 12px/1 var(--sans); color: var(--ink-600); }
.tu-c4 > svg { width: 14px; height: 14px; flex: none; }
.tu-c4[data-tu-c4="rojo"] { background: var(--tu-rojo-tinte); box-shadow: inset 0 0 0 1px var(--tu-rojo-linea); color: var(--rojo-ink); }
.tu-c4[data-tu-c4="rojo"] > svg { color: var(--rojo); }
.tu-c4[data-tu-c4="amarillo"] { background: var(--tu-ambar-tinte); box-shadow: inset 0 0 0 1px var(--tu-ambar-linea); color: var(--amarillo-ink); }
.tu-c4[data-tu-c4="amarillo"] > svg { color: var(--amarillo); }
.tu-c4[data-tu-c4="verde"] { padding-left: 0; color: var(--verde-ink); }
.tu-c4[data-tu-c4="verde"] > svg { color: var(--verde); }
.tu-c4[data-tu-c4="gris"] { padding-left: 0; color: var(--ink-500); }
.tu-c4[data-tu-c4="gris"] > svg { color: var(--ink-400); }

/* ---- periodo(): la única ficha de cabecera ---- */
button.tu-periodo { height: 26px; padding: 0 11px 0 9px; font-size: 10.5px; color: var(--ink-700); cursor: pointer; }
button.tu-periodo:hover, button.tu-periodo[aria-expanded="true"] { border-color: var(--angeles-300); color: var(--ink-900); }
.tu-periodo-h { color: var(--ink-500); }

/* ---- kpi(o): un número, una etiqueta, un estado, su meta ---- */
.tu-kpi-caja { display: flex; min-width: 0; }
.tu-kpi { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 122px; padding: 14px 16px 12px;
  box-sizing: border-box; text-align: left; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  font: inherit; color: inherit; cursor: pointer; transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
.tu-kpi:hover, .tu-kpi[aria-expanded="true"] { border-color: var(--angeles-300); }
.tu-kpi.tu-kpi-fija { cursor: default; }
.tu-kpi.tu-kpi-fija:hover { border-color: var(--line); }
.tu-kpi[data-tu-c4="rojo"] { box-shadow: inset 4px 0 0 var(--rojo), var(--shadow-card); }
.tu-kpi[data-tu-c4="amarillo"] { box-shadow: inset 4px 0 0 var(--amarillo), var(--shadow-card); }
.tu-kpi-eti { font: 600 13px/1.25 var(--sans); color: var(--ink-600); }
.tu-kpi-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-variant-numeric: tabular-nums; }
.tu-kpi-num b { font: 600 40px/1 var(--sans); letter-spacing: -.03em; color: var(--ink-900); }
.tu-kpi-num small { font: 500 16px/1.1 var(--sans); color: var(--ink-500); }
.tu-kpi-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; width: 100%; }
.tu-kpi-meta { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.2 var(--sans); color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-kpi-meta > svg { width: 13px; height: 13px; color: var(--ink-400); }

/* ---- fila(o): estado · etiqueta adelante · lo demás ---- */
.tu-fila-caja { display: flex; min-width: 0; }
.tu-fila { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px 8px 12px; box-sizing: border-box; text-align: left;
  border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); font: inherit; color: var(--ink-900); }
button.tu-fila { cursor: pointer; transition: border-color var(--d-1); }
button.tu-fila:hover, button.tu-fila[aria-expanded="true"] { border-color: var(--angeles-300); }
.tu-fila[data-tu-c4="rojo"] { box-shadow: inset 4px 0 0 var(--rojo), var(--shadow-card); }
.tu-fila[data-tu-c4="amarillo"] { box-shadow: inset 4px 0 0 var(--amarillo), var(--shadow-card); }
.tu-fila > .tu-c4 { flex: none; }
.tu-fila-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 500 14px/1.35 var(--sans); color: var(--ink-600);
  font-variant-numeric: tabular-nums; }
.tu-fila-txt > i { font-style: normal; color: var(--ink-300); }
.tu-fila-lead { font-weight: 600; color: var(--ink-900); }
.tu-fila-ir { width: 16px; height: 16px; flex: none; color: var(--ink-400); }

/* ---- ficha(o): panel junto a la cifra (laptop) u hoja abajo (teléfono y tableta) ---- */
[data-tu-ficha] { cursor: pointer; }
.tu-fi-capa { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tu-fi-velo { position: absolute; inset: 0; background: var(--velo); pointer-events: auto; animation: tu-velo .18s ease-out both; }
.tu-fi-capa[data-tu-modo="panel"] .tu-fi-velo { display: none; }
.tu-ficha { position: absolute; pointer-events: auto; box-sizing: border-box; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-overlay); color: var(--ink-900); font: 400 13.5px/1.45 var(--sans); text-align: left; }
.tu-fi-capa[data-tu-modo="panel"] .tu-ficha { animation: tu-velo .14s ease-out both; }
.tu-fi-capa[data-tu-modo="hoja"] .tu-ficha { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80%; padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; font-size: 15px; animation: tu-sube .22s var(--suave) both; }
.tu-fi-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px;
  background: var(--muted); color: var(--ink-700); cursor: pointer; }
.tu-fi-capa[data-tu-modo="hoja"] .tu-fi-x { width: 44px; height: 44px; top: 12px; right: 12px; }
.tu-fi-x > svg { width: 16px; height: 16px; }
.tu-fi-cuerpo { display: grid; gap: 10px; min-width: 0; }
.tu-fi-cab { display: grid; gap: 3px; padding-right: 44px; }
.tu-fi-cab small { font: 500 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.tu-fi-cab b { font: 600 16px/1.3 var(--sans); color: var(--ink-900); }
.tu-fi-capa[data-tu-modo="hoja"] .tu-fi-cab b { font-size: 18px; }
.tu-fi-valor { font: 600 13px/1.3 var(--sans); color: var(--ink-600); font-variant-numeric: tabular-nums; }
.tu-fi-txt { margin: 0; color: var(--ink-700); }
.tu-fi-filas { display: grid; margin: 0; }
.tu-fi-filas > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.tu-fi-filas dt { font: 500 12px/1.45 var(--sans); color: var(--ink-500); }
.tu-fi-filas dd { margin: 0; font: 500 13px/1.45 var(--sans); color: var(--ink-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tu-fi-capa[data-tu-modo="hoja"] .tu-fi-filas dd, .tu-fi-capa[data-tu-modo="hoja"] .tu-fi-filas dt { font-size: 14px; }
.tu-fi-lista { margin: 0; padding: 0; list-style: none; display: grid; }
.tu-fi-lista li { padding: 7px 0; border-top: 1px solid var(--line); font: 500 13px/1.4 var(--sans); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.tu-fi-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; }
.tu-fi-pie small { font: 400 11.5px/1.4 var(--mono); color: var(--ink-500); }
.tu-fi-ir { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.tu-fi-capa[data-tu-modo="hoja"] .tu-fi-ir .btn { min-height: 48px; width: 100%; }
@keyframes tu-sube { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tu-velo { from { opacity: 0; } to { opacity: 1; } }

@container torre (max-width: 599px) {
  .tu-kpi { min-height: 108px; padding: 12px 14px 10px; }
  .tu-kpi-num b { font-size: 34px; }
  .tu-kpi-num small { font-size: 14px; }
  .tu-fila { gap: 10px; padding: 9px 12px; }
  .tu-fila-larga { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .tu-fila-larga .tu-fila-txt { flex-basis: calc(100% - 30px); order: 2; font-size: 14.5px; }
  .tu-fila-larga .tu-fila-ir { order: 1; margin-left: auto; }
  .tu-fila-barra { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tu-fi-velo, .tu-ficha { animation: none !important; }
}
/* La marca de meta de una tarjeta: la barra llega a la cifra; raya oscura = meta, raya clara = línea base */
.tu-kpi-barra { position: relative; display: block; width: 100%; height: 6px; margin: 2px 0 2px; border-radius: 3px; background: var(--muted); }
.tu-kb-lleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-500); }
.tu-kpi[data-tu-c4="amarillo"] .tu-kb-lleno { background: var(--amarillo); }
.tu-kpi[data-tu-c4="rojo"] .tu-kb-lleno { background: var(--rojo); }
.tu-kb-meta, .tu-kb-base { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-900); }
.tu-kb-base { top: -2px; bottom: -2px; background: var(--ink-300); }

/* ---- fila con barra (el avance de algo contra su total) ---- */
.tu-fila-barra { flex: none; position: relative; width: 64px; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.tu-fila-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-500); }
.tu-fila-pct { flex: none; min-width: 40px; text-align: right; font: 600 13px/1 var(--sans); color: var(--ink-700); font-variant-numeric: tabular-nums; }

/* ---- hilo(mensajes): WhatsApp en la línea del hospital. Los verdes de WhatsApp viven SÓLO aquí. ----------------------- */
.tu-hilo { --tu-wa-fondo: #EFEAE2; --tu-wa-sale: #D9FDD3; --tu-wa-entra: #FFFFFF; --tu-wa-verde: #00A884; --tu-wa-verde-ink: #00785F; --tu-wa-azul: #53BDEB;
  --tu-wa-tinta: #111B21; --tu-wa-gris: #667781; --tu-wa-aviso: #FFF3C4; --tu-wa-sombra: 0 1px .5px rgba(11,20,26,.13);
  display: flex; flex-direction: column; width: 100%; max-width: 440px; min-width: 0; overflow: hidden; border-radius: var(--r-2xl); border: 1px solid var(--line);
  background: var(--tu-wa-fondo); box-shadow: var(--shadow-card); color: var(--tu-wa-tinta); }
.tu-h-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.tu-h-cab .sello { width: 36px; height: 36px; flex: none; }
.tu-h-cab b { display: block; font: 600 15px/1.2 var(--sans); color: var(--tu-wa-tinta); }
.tu-h-cab small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--sans); color: var(--tu-wa-gris); }
.tu-h-msgs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 10px 14px; list-style: none; max-height: var(--tu-h-alto, none); overflow-y: auto; }
.tu-h-m { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; }
.tu-h-m[data-tu-lado="yo"] { align-self: flex-end; align-items: flex-end; }
.tu-h-burbuja { position: relative; min-width: 84px; padding: 7px 9px 5px; border-radius: 8px; background: var(--tu-wa-entra); box-shadow: var(--tu-wa-sombra);
  font: 400 14.5px/1.4 var(--sans); color: var(--tu-wa-tinta); }
.tu-h-m[data-tu-lado="yo"] .tu-h-burbuja { background: var(--tu-wa-sale); }
.tu-h-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 3px; font: 400 11px/1 var(--sans); color: var(--tu-wa-gris);
  font-variant-numeric: tabular-nums; }
.tu-h-leido { width: 16px; height: 11px; color: var(--tu-wa-azul); }
.tu-h-txt { display: block; overflow-wrap: anywhere; }
.tu-h-voz { display: flex; align-items: center; gap: 10px; min-width: min(240px, 60vw); padding: 2px 0; }
.tu-h-play { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--tu-wa-gris); }
.tu-h-play .ico { width: 24px; height: 24px; }
.tu-h-onda { display: flex; align-items: center; gap: 2px; flex: 1; height: 28px; }
.tu-h-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: #8696A0; }
.tu-h-m[data-tu-lado="yo"] .tu-h-onda i { background: #6E9A80; }
.tu-h-voz small { flex: none; font: 400 11.5px/1 var(--sans); color: var(--tu-wa-gris); font-variant-numeric: tabular-nums; }
.tu-h-eti { display: block; margin-bottom: 6px; font: 600 12.5px/1.3 var(--sans); color: var(--tu-wa-verde-ink); }
.tu-h-trans { display: block; margin-bottom: 8px; padding: 7px 10px; border-left: 3px solid var(--tu-wa-verde); border-radius: 6px; background: rgba(11,20,26,.04);
  font: italic 400 13.5px/1.45 var(--sans); }
.tu-h-trans small { display: block; margin-bottom: 3px; font: normal 600 11px/1.2 var(--sans); color: var(--tu-wa-gris); }
.tu-h-campos { display: grid; gap: 4px; margin: 0 0 8px; }
.tu-h-campos > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; }
.tu-h-campos dt { font: 400 12.5px/1.35 var(--sans); color: var(--tu-wa-gris); }
.tu-h-campos dd { margin: 0; font: 500 13.5px/1.35 var(--sans); color: var(--tu-wa-tinta); font-variant-numeric: tabular-nums; }
.tu-h-botones { display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
.tu-h-boton { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; border-radius: 8px; background: #fff;
  box-shadow: var(--tu-wa-sombra); color: var(--tu-wa-verde-ink); font: 600 14.5px/1 var(--sans); }
button.tu-h-boton:hover { background: #F7F8FA; }
.tu-h-boton .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.tu-h-hecho { color: var(--tu-wa-gris); font-weight: 500; }
.tu-h-dia, .tu-h-sis { align-self: center; max-width: 92%; text-align: center; }
.tu-h-dia span { display: inline-block; padding: 5px 12px; border-radius: 8px; background: #fff; box-shadow: var(--tu-wa-sombra); font: 500 12px/1 var(--sans); color: var(--tu-wa-gris); }
.tu-h-sis > span { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 12px; border-radius: 8px; background: #fff;
  box-shadow: var(--tu-wa-sombra); font: 400 12.5px/1.4 var(--sans); color: #3B4A54; }
.tu-h-sis small { font: 600 10px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--tu-wa-gris); }
.tu-h-sis em { font: normal 600 11px/1.25 var(--sans); color: var(--amarillo-ink); }
.tu-h-sis time { font: 400 10.5px/1 var(--sans); color: var(--tu-wa-gris); }
.tu-h-aviso > span { background: var(--tu-wa-aviso); }
.tu-h-pie { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F0F2F5; }
.tu-h-campo { flex: 1; display: flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 21px; background: #fff; font: 400 15px/1 var(--sans); color: #8696A0; }
.tu-h-mic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--tu-wa-verde); color: #fff; }
.tu-h-mic .ico { width: 20px; height: 20px; }

@container torre (max-width: 599px) {
  .tu-hilo { max-width: none; border-radius: var(--r-xl); }
  .tu-h-campos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media print {
  .tu-h-pie { display: none !important; }
}

/* ---- hilo · ronda 2: abre en lo más nuevo, botones de ≥ 48 px, acciones al pie, sello de borrador, estado y ficha en la burbuja ---- */
.tu-h-msgs { position: relative; overscroll-behavior: contain; }
.tu-h-h1 { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--tu-wa-tinta); }
.tu-h-cab > span { flex: 1; min-width: 0; }
.tu-h-boton { min-height: 48px; }
.tu-h-corregir { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 0; background: none; font: 500 14px/1 var(--sans); color: var(--tu-wa-gris); cursor: pointer; }
.tu-h-sombra { display: inline-flex; align-items: center; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; border: 1px dashed var(--ink-400); background: rgba(255,255,255,.7);
  font: 600 11.5px/1.2 var(--sans); color: var(--ink-600); }
.tu-h-chip { display: block; margin-top: 6px; }
.tu-h-chip .tu-c4 { height: 22px; font-size: 12px; }
.tu-h-mas { display: flex; align-items: center; min-height: 48px; margin: 2px 0 -6px; padding: 0; border: 0; background: none; font: 600 14px/1.2 var(--sans);
  color: var(--tu-wa-verde-ink); cursor: pointer; }
.tu-h-toque { display: block; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
.tu-h-toque:hover { filter: none; background: #fbfbfb; }
.tu-h-acciones { display: flex; gap: 6px; padding: 8px; background: #F0F2F5; }
.tu-h-accion { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: 6px 4px;
  border: 0; border-radius: 12px; background: #fff; box-shadow: var(--tu-wa-sombra); font: 600 12.5px/1.15 var(--sans); color: var(--tu-wa-tinta); cursor: pointer; }
.tu-h-accion .ico { width: 18px; height: 18px; color: var(--tu-wa-verde-ink); }
.tu-h-accion.tu-h-primaria { background: var(--tu-wa-verde); color: #fff; }
.tu-h-accion.tu-h-primaria .ico { color: #fff; }
/* La tarjeta chica (una tira de cuatro, en el teléfono) */
.tu-kpi.tu-kpi-chico { min-height: 0; gap: 4px; padding: 11px 12px 10px; border-radius: var(--r-xl); }
.tu-kpi-chico .tu-kpi-eti { font-size: 12.5px; }
.tu-kpi-chico .tu-kpi-num b { font-size: 28px; }
.tu-kpi-chico .tu-kpi-num small { font-size: 13px; }
.tu-kpi-chico .tu-kpi-pie { margin-top: 2px; }
/* Tocar con el pulgar: la ficha de corte y la X de la hoja crecen su área de toque a 48 px sin cambiar de tamaño */
button.tu-periodo { position: relative; }
button.tu-periodo::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 48px; transform: translateY(-50%); }
.tu-fi-capa[data-tu-modo="hoja"] .tu-fi-x { width: 48px; height: 48px; }
/* La tableta: números grandes, de pie y con guantes fuera (regla 12) */
.tu-kpi.tu-kpi-grande { min-height: 140px; padding: 16px 18px 14px; }
.tu-kpi-grande .tu-kpi-eti { font-size: 15px; }
.tu-kpi-grande .tu-kpi-num b { font-size: 56px; }
.tu-kpi-grande .tu-kpi-num small { font-size: 20px; }
.tu-kpi-grande .tu-c4 { height: 30px; padding: 0 12px 0 9px; font-size: 14px; }
.tu-kpi-grande .tu-c4 > svg { width: 17px; height: 17px; }

/* ---- La página (vocabulario): cabecera con UNA ficha de corte, secciones con su etiqueta, rejillas de tarjetas, «Cómo se lee» ---- */
.tu-pag { display: flex; flex-direction: column; gap: 14px; }
.tu-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.tu-cab h1 { margin: 0; font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink-900); }
.tu-cab .tu-sub { flex-basis: 100%; order: 3; margin: -2px 0 0; font: 500 14.5px/1.35 var(--sans); color: var(--ink-600); }
.tu-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tu-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.tu-h h2 { margin: 0; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.tu-kpis { display: grid; grid-template-columns: repeat(var(--tu-k, 4), minmax(0, 1fr)); gap: 12px; }
.tu-filas { display: flex; flex-direction: column; gap: 6px; }
.tu-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tu-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.tu-botones .btn { min-height: 44px; }
.tu-leer { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid transparent;
  background: none; font: 500 12.5px/1 var(--sans); color: var(--angeles-800); cursor: pointer; }
.tu-leer:hover, .tu-leer[aria-expanded="true"] { background: var(--angeles-50); border-color: var(--angeles-200); }
.tu-leer::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.tu-leer .ico { width: 15px; height: 15px; }
.tu-panel { padding: 14px 16px; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); min-width: 0; }
.tu-propone { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--humano-linea);
  box-shadow: inset 4px 0 0 var(--humano), var(--shadow-card); }
.tu-propone h3 { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--ink-900); }
.tu-propone ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font: 500 14px/1.4 var(--sans); color: var(--ink-700); }
.tu-propone .tu-decide { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--sans); color: var(--humano-ink); }
.tu-propone .tu-decide::before { content: ''; width: 8px; height: 8px; border-radius: 1.5px; background: var(--humano); transform: rotate(45deg); flex: none; }
@container torre (max-width: 899px) {
  .tu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tu-dos { grid-template-columns: minmax(0, 1fr); }
}
@container torre (max-width: 599px) {
  .tu-cab h1 { font-size: 22px; }
  .tu-kpis { gap: 8px; }
}

/* ---- cronologia(items): el expediente, una línea vertical de eventos ---- */
.tu-crono { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tu-cr { position: relative; }
.tu-cr-b { display: grid; grid-template-columns: 96px 14px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; min-height: 48px; padding: 6px 8px;
  box-sizing: border-box; text-align: left; border: 0; border-radius: var(--r-lg); background: none; font: inherit; color: inherit; }
button.tu-cr-b { cursor: pointer; }
button.tu-cr-b:hover, button.tu-cr-b[aria-expanded="true"] { background: var(--angeles-50); }
.tu-cr-b time { font: 600 12.5px/1.3 var(--mono); color: var(--ink-600); font-variant-numeric: tabular-nums; text-align: right; }
.tu-cr-pt { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--ink-400); z-index: 1; }
.tu-cr[data-tu-c4="verde"] .tu-cr-pt { background: var(--verde); box-shadow: none; }
.tu-cr[data-tu-c4="rojo"] .tu-cr-pt { background: var(--rojo); box-shadow: none; }
.tu-cr[data-tu-c4="amarillo"] .tu-cr-pt { background: var(--amarillo); box-shadow: none; }
.tu-cr:not(:last-child)::before { content: ''; position: absolute; left: calc(8px + 96px + 12px + 5px); top: 30px; bottom: -18px; width: 2px; background: var(--line-2); }
.tu-cr-txt { display: grid; gap: 1px; min-width: 0; }
.tu-cr-txt b { font: 600 14px/1.35 var(--sans); color: var(--ink-900); }
.tu-cr-txt small { font: 400 12.5px/1.3 var(--sans); color: var(--ink-500); }
@container torre (max-width: 599px) {
  .tu-cr-b { grid-template-columns: 52px 12px minmax(0, 1fr); }
  .tu-cr-b > .tu-c4 { grid-column: 3; justify-self: start; }
  .tu-cr:not(:last-child)::before { left: calc(8px + 52px + 12px + 4px); }
}

/* ---- Una solicitud (caso 4, Qventus): cinco campos y UN botón; lo demás, en su ficha ---- */
.tu-reqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tu-req { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.tu-req > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tu-req > header b { font: 600 15px/1.2 var(--mono); color: var(--ink-900); }
.tu-req dl { margin: 0; display: grid; }
.tu-req dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.tu-req dt { font: 500 12.5px/1.4 var(--sans); color: var(--ink-500); }
.tu-req dd { margin: 0; font: 500 13.5px/1.4 var(--sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tu-req > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tu-req > footer .btn { min-height: 44px; }
.tu-h-corregir { min-height: 48px; }
/* Un acto de la demo que no se ejecuta: abre su ficha; botones de ≥ 48 px en las filas de acciones */
.tu-acto { display: inline-flex; }
.tu-botones .btn { min-height: 48px; }
.tu-kpi-decide { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.25 var(--sans); color: var(--humano-ink); }
.tu-kpi-decide::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 1.5px; background: var(--humano); transform: rotate(45deg); }

/* ===== VIDA (ronda 2b): Torre.ui.vida corre un reloj desde el corte; la sección con .tu-vida entra (la barra de meta se llena) ===== */
.tu-vida .tu-kb-lleno { transform-origin: 0 50%; animation: tu-dibuja .7s cubic-bezier(.2,.7,.2,1) .2s backwards; }
.tu-vida .tu-kb-meta, .tu-vida .tu-kb-base { animation: tu-llega .3s ease-out .85s backwards; }
@keyframes tu-dibuja { from { transform: scaleX(0); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes tu-llega { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Lo que llega solo: un aviso en la esquina, se apila; un toque abre su pantalla */
.tu-avisos { position: fixed; top: 76px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.tu-aviso { pointer-events: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 10px 12px; box-sizing: border-box;
  text-align: left; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-overlay);
  font: inherit; color: var(--ink-900); cursor: pointer; animation: tu-aviso .35s cubic-bezier(.2,.8,.2,1) backwards; }
.tu-aviso:hover { border-color: var(--angeles-300); }
.tu-aviso > .ico { grid-row: span 2; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: var(--angeles-50); color: var(--angeles-800); }
.tu-aviso time { font: 600 11.5px/1.2 var(--mono); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.tu-aviso b { font: 600 13.5px/1.3 var(--sans); }
.tu-aviso.sale { animation: tu-aviso-sale .3s ease-in forwards; }
@keyframes tu-aviso { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tu-aviso-sale { to { transform: translateX(24px); opacity: 0; } }
/* La línea de Ángeles AI que se escribe sola */
.tu-ia-linea { display: flex; align-items: baseline; gap: 8px; margin: 0; min-height: 21px; font: 500 14.5px/1.45 var(--sans); color: var(--ink-700); }
.tu-ia-linea > .ico { flex: none; width: 16px; height: 16px; align-self: center; color: var(--angeles-800); }
.tu-ia-linea > small { flex: none; font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--angeles-800); }
.tu-ia-linea [data-tu-escribe]::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--angeles-800);
  animation: tu-cursor 1s steps(1) infinite; }
@keyframes tu-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tu-vida *, .tu-vida *::before, .tu-vida *::after, .tu-aviso { animation: none !important; }
}
/* Mientras se lee una ficha nada se mueve (R2b-O1): la pantalla con vida pausa sus animaciones; ui.vida sostiene el reloj */
body:has(.tu-fi-capa) [data-tu-vida] *, body:has(.tu-fi-capa) [data-tu-vida] *::before, body:has(.tu-fi-capa) [data-tu-vida] *::after { animation-play-state: paused !important; }

/* Vida en un hilo: «escribiendo…» y la burbuja que llega */
.tu-h-puntos { display: inline-flex; gap: 4px; padding: 4px 2px; }
.tu-h-puntos i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: tu-punto 1.2s ease-in-out infinite; }
.tu-h-puntos i:nth-child(2) { animation-delay: .15s; } .tu-h-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes tu-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.tu-h-nuevo { animation: tu-llega .35s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { .tu-h-puntos i, .tu-h-nuevo { animation: none !important; } }

/* ===========================================================================================================================
   LO QUE EL KIT AGREGA: la tarjeta de camas (de camas.css · .cm-unidad), la cabeza de sección y el pliegue «Leer más».
   =========================================================================================================================== */
/* ---- cama(u, o): ocupadas/total, sin ocupar, barra neutra con la marca de saturación, listas · limpieza · bloqueadas ---- */
.tu-cama-caja { display: flex; min-width: 0; }
.tu-cama { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 13px; box-sizing: border-box; text-align: left;
  border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); font: inherit; color: inherit;
  transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
button.tu-cama { cursor: pointer; }
button.tu-cama:hover, button.tu-cama[aria-expanded="true"] { border-color: var(--angeles-300); }
.tu-cm-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.tu-cm-cab b { font: 600 14.5px/1.2 var(--sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-cm-num { display: flex; align-items: baseline; gap: 2px; font: 600 40px/1 var(--sans); letter-spacing: -.035em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tu-cm-num small { font: 500 20px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-400); }
.tu-cm-sin { margin-top: -4px; font: 500 13px/1.2 var(--sans); color: var(--ink-600); font-variant-numeric: tabular-nums; }
.tu-cm-sin b { font-weight: 600; color: var(--ink-900); }
.tu-cm-barra { position: relative; display: block; height: 6px; border-radius: var(--r-full); background: var(--muted); }
.tu-cm-barra > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--ink-400); }
.tu-cm-barra > b { position: absolute; top: -4px; bottom: -4px; left: var(--meta, 85%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-700); }
.tu-cm-cuentas { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.tu-cm-cuentas > span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font: 500 14px/1.3 var(--sans); color: var(--ink-600); }
.tu-cm-n { display: inline-flex; align-items: center; gap: 5px; }
.tu-cm-n b { font-weight: 600; color: var(--ink-900); }
.tu-cm-n > svg { width: 13px; height: 13px; flex: none; color: var(--ink-400); }
.tu-cm-cuentas > [data-tu-c4="verde"] svg { color: var(--verde); }
.tu-cm-cuentas > [data-tu-c4="amarillo"] svg { color: var(--amarillo); }
.tu-cm-cuentas > [data-tu-c4="rojo"] svg { color: var(--rojo); }
.tu-cm-cuentas small { font: 600 10.5px/1.2 var(--sans); color: var(--ink-500); }
.tu-cm-cuentas [data-cero], .tu-cm-cuentas [data-cero] small, .tu-cm-cuentas [data-cero] b { color: var(--ink-400); }
.tu-cm-cuentas [data-cero] b { font-weight: 500; }
.tu-vida .tu-cm-barra > i { transform-origin: 0 50%; animation: tu-dibuja .7s cubic-bezier(.2,.7,.2,1) .2s backwards; }
@container torre (max-width: 599px) {
  .tu-cama { padding: 12px 12px 11px; }
  .tu-cm-num { font-size: 34px; }
}

/* ---- seccion(o): la etiqueta de la sección y «Cómo se lee» / un enlace a la derecha ---- */
.tu-h-acc { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
/* un enlace de texto en una página del kit es un toque: ≥ 28 px de alto en laptop, ≥ 48 px en teléfono y tableta (DISENO-2, tabla de toques) */
.tu-pag .enlace, .tu-h-acc > .enlace { min-height: 28px; padding: 0 2px; }
@container torre (max-width: 899px) { .tu-pag .enlace, .tu-h-acc > .enlace { min-height: 48px; } }

/* ---- pliegue(o): la afirmación a la vista; la profundidad dentro (cerrado no se pinta, no cuenta palabras) ---- */
.tu-pliegue { min-width: 0; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.tu-pliegue > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; min-height: 48px; padding: 10px 16px; box-sizing: border-box;
  list-style: none; cursor: pointer; border-radius: inherit; }
.tu-pliegue > summary::-webkit-details-marker { display: none; }
.tu-pliegue > summary:hover { background: var(--canvas); }
.tu-pliegue[open] > summary { border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
.tu-pl-afirma { min-width: 0; font: 600 15px/1.35 var(--sans); color: var(--ink-900); }
.tu-pl-mas, .tu-pl-menos { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 500 12.5px/1 var(--sans); color: var(--angeles-800); white-space: nowrap; }
.tu-pl-mas > svg, .tu-pl-menos > svg { width: 15px; height: 15px; }
.tu-pl-menos, .tu-pliegue[open] .tu-pl-mas { display: none; }
.tu-pliegue[open] .tu-pl-menos { display: inline-flex; }
.tu-pl-cuerpo { padding: 0 16px 16px; border-top: 1px solid var(--line); font: 400 14px/1.55 var(--sans); color: var(--ink-700); }
.tu-pl-cuerpo > :first-child { margin-top: 14px; }
.tu-pl-cuerpo > :last-child { margin-bottom: 0; }
.tu-pliegue[open] > .tu-pl-cuerpo { animation: tu-llega .3s ease-out backwards; }
@container torre (max-width: 599px) {
  .tu-pliegue > summary { flex-wrap: wrap; padding: 10px 14px; }
  .tu-pl-cuerpo { padding: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .tu-pliegue[open] > .tu-pl-cuerpo { animation: none; } }

/* ---- escalon(o): el «siguiente escalón» incluido en otras héroes. La etiqueta va como ceja, no como ficha de horizonte (la pantalla
   ya tiene la suya); el borde punteado dice «todavía no»; una línea; la fuente en su ficha; el botón a la pantalla que lo muestra ---- */
.tu-escalon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; min-width: 0; padding: 12px 14px 12px 16px;
  box-sizing: border-box; border-radius: var(--r-xl); border: 1.5px dashed var(--line-2); background: var(--card); }
.tu-es-eti { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-500); }
.tu-es-eti > svg { width: 14px; height: 14px; flex: none; }
.tu-es-linea { margin: 0; min-width: 0; font: 500 14.5px/1.4 var(--sans); color: var(--ink-700); }
.tu-es-linea b { font-weight: 650; color: var(--ink-900); }
.tu-es-acc { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
.tu-es-acc .btn { min-height: 40px; }
@container torre (max-width: 599px) {
  .tu-escalon { grid-template-columns: minmax(0, 1fr); }
  .tu-es-acc { justify-content: flex-start; }
  .tu-es-acc .btn { min-height: 48px; }
}

/* ===== meta · la cifra que se compara (ronda «presentar», ha-presenta-diseno, 12 oct 2026) =====================================
   UNA cifra grande con su unidad, la barra de bala (la barra llega a la cifra; la raya oscura es la meta, la clara la base) y color
   sólo en la excepción: rojo = espera una acción suya (la cifra y la barra), amarillo = atención (sólo la barra). Sin color: tinta.
   La rueda gira el ::before de cada dígito (sólo transform); la barra crece con scaleX; las marcas aparecen con opacity. */
.tu-metas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tu-meta-caja { display: flex; min-width: 0; }
.tu-meta { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 16px 18px 14px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: border-color var(--d-1) var(--suave), box-shadow var(--d-2) var(--suave); }
.tu-meta:hover, .tu-meta[aria-expanded="true"] { border-color: var(--angeles-300); box-shadow: var(--shadow-float); }
.tu-meta:focus-visible { outline: none; box-shadow: var(--anillo); }
.tu-meta.tu-meta-fija { cursor: default; }
.tu-meta.tu-meta-fija:hover { border-color: var(--line); box-shadow: var(--shadow-card); }
.tu-meta-eti { font: 600 13px/1.25 var(--sans); color: var(--ink-600); }
.tu-meta-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3em; min-width: 0; color: var(--ink-900); }
.tu-meta-num { font: 600 44px/1.05 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-meta-uni { font: 500 17px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink-500); }
.tu-meta[data-tu-c4="rojo"] .tu-meta-cifra { color: var(--rojo-ink); }
.tu-meta[data-tu-c4="rojo"] .tu-meta-uni { color: var(--rojo-ink); }
.tu-meta-pie { font: 500 13px/1.35 var(--sans); color: var(--ink-600); }
.tu-meta-barra { position: relative; display: block; height: 8px; margin: 6px 0 4px; border-radius: var(--r-full); background: var(--muted); }
.tu-meta-lleno { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--ink-400); transform-origin: 0 50%; }
.tu-meta[data-tu-c4="rojo"] .tu-meta-lleno { background: var(--rojo); }
.tu-meta[data-tu-c4="amarillo"] .tu-meta-lleno { background: var(--amarillo); }
.tu-meta-marca, .tu-meta-base { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink-900); box-shadow: 0 0 0 2px var(--card); }
.tu-meta-base { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-400); }
/* La rueda: el dígito real, transparente, da el ancho y la línea; su ::before (0–9 en columna) es lo que gira. */
.tu-rd { position: relative; display: inline-block; clip-path: inset(0); -webkit-text-fill-color: transparent; }
.tu-rd::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9'; content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9' / ''; position: absolute; top: 0; left: 0; right: 0;
  white-space: pre; text-align: center; -webkit-text-fill-color: currentColor; transform: translateY(calc(var(--d, 0) * -10%)); }
[data-tu-gira] .tu-rd::before, [data-tu-gira] .tu-meta-lleno { will-change: transform; }
[data-tu-gira="antes"] .tu-rd::before { transform: none; transition: none; }
[data-tu-gira="antes"] .tu-meta-lleno { transform: scaleX(0); transition: none; }
[data-tu-gira="antes"] .tu-meta-marca, [data-tu-gira="antes"] .tu-meta-base { opacity: 0; transition: none; }
[data-tu-gira="va"] .tu-rd::before { transition: transform .9s cubic-bezier(.16,.84,.3,1) calc(var(--k, 0) * 70ms); }
[data-tu-gira="va"] .tu-meta-lleno { transition: transform .9s var(--suave) .08s; }
[data-tu-gira="va"] .tu-meta-marca, [data-tu-gira="va"] .tu-meta-base { transition: opacity .3s ease .75s; }
@media (prefers-reduced-motion: reduce) { [data-tu-gira] .tu-rd::before, [data-tu-gira] .tu-meta-lleno { transform: none; transition: none !important; } }
@container torre (max-width: 640px) {
  .tu-metas { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tu-meta { padding: 14px 16px 12px; }
  .tu-meta-num { font-size: 40px; }
}