/* hebra.one — estilos del sitio.
   Paleta: ciruela (el menú de la app), papel lila, tinta, fucsia (acción),
   orquídea y rosa empolvado (los dos colores del isotipo y del logotipo).
   Tipos: los títulos hablan con dos voces — Geist (la parte técnica, la que
   explica) y Bodoni Moda (la del salón) —; Geist también para el texto, e Inter
   sólo adentro de las pantallas de la app (es la tipografía real del producto). */

:root {
  --paper: #f7f2f7;
  --paper-2: #efe5ef;
  --white: #ffffff;
  --ink: #1d171f;
  --ink-2: #4a4150;
  --muted: #6c6272;
  --line: #e4d8e4;
  --fuchsia: #e11383;
  --fuchsia-ink: #ad0c63;
  --orchid: #7d3ce3;
  --rose: #dfa2aa;
  --rose-deep: #c4707d;
  --plum: #171018;
  --plum-2: #241a2b;
  --on-plum: #f1e9f4;
  --on-plum-2: #b9a9c2;

  --serif: 'Bodoni Moda', 'Bodoni Moda Fallback', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

/* Tipografías propias (17/10): se sirven desde hebra.one, sin Google Fonts. Son los mismos
   archivos (Fontsource 5.3.0, subset latin) y los mismos nombres de familia de siempre, así
   que el resto de la hoja no cambia. Geist y la Bodoni itálica (las del título) van con
   <link rel=preload> en el <head>. Los «Fallback» son la letra de reemplazo calibrada con
   size-adjust para que el título ocupe lo mismo mientras carga (reemplaza al script que
   escondía el claim hasta 1,2 s). Se recalculan con _src/fuentes.py si cambia la fuente. */
@font-face { font-family: 'Geist'; src: url(/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; src: url(/fonts/bodoni-moda.woff2) format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; src: url(/fonts/bodoni-moda-italic.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; src: url(/fonts/inter-tight.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-mono-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-mono-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* @fallbacks:inicio — generado por _src/fuentes.py (no editar a mano) */
@font-face { font-family: 'Geist Fallback'; font-style: normal; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 104.78%; ascent-override: 95.91%; descent-override: 28.15%; line-gap-override: 0.00%; }
@font-face { font-family: 'Bodoni Moda Fallback'; font-style: normal; src: local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust: 112.09%; ascent-override: 100.37%; descent-override: 35.69%; line-gap-override: 0.00%; }
@font-face { font-family: 'Bodoni Moda Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('Times-Italic'), local('Liberation Serif Italic'); size-adjust: 105.41%; ascent-override: 106.73%; descent-override: 37.95%; line-gap-override: 0.00%; }
/* @fallbacks:fin */
/* @resortes:inicio — generado por _src/resortes.py (no editar a mano) */
:root {
  --c-salida: cubic-bezier(.22, 1, .36, 1);
  --c-acelera: cubic-bezier(.4, 0, 1, 1);
  --c-suave: cubic-bezier(0, 0, .58, 1);
  --c-estandar: cubic-bezier(.4, 0, .2, 1);
  --r-toast: cubic-bezier(.22, 1, .36, 1); --r-toast-d: 287ms;
  --r-aviso: cubic-bezier(.22, 1, .36, 1); --r-aviso-d: 297ms;
  --r-tecla: cubic-bezier(.22, 1, .36, 1); --r-tecla-d: 431ms;
  --r-ojo: cubic-bezier(.22, 1, .36, 1); --r-ojo-d: 410ms;
  --r-ojo-btn: cubic-bezier(.22, 1, .36, 1); --r-ojo-btn-d: 384ms;
  --r-modal: cubic-bezier(.22, 1, .36, 1); --r-modal-d: 353ms;
  --r-turno: cubic-bezier(.22, 1, .36, 1); --r-turno-d: 325ms;
  --r-pastilla: cubic-bezier(.22, 1, .36, 1); --r-pastilla-d: 206ms;
  --r-ok: cubic-bezier(.22, 1, .36, 1); --r-ok-d: 241ms;
  --r-tilde: cubic-bezier(.22, 1, .36, 1); --r-tilde-d: 490ms;
  --r-llamada: cubic-bezier(.22, 1, .36, 1); --r-llamada-d: 369ms;
  --r-cajon: cubic-bezier(.22, 1, .36, 1); --r-cajon-d: 254ms;
  --r-hilo: cubic-bezier(.22, 1, .36, 1); --r-hilo-d: 309ms;
  --r-defecto: cubic-bezier(.22, 1, .36, 1); --r-defecto-d: 403ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* ui/Toast.tsx · 460/34 */
    --r-toast: linear(0, 0.009 1.7%, 0.032 3.3%, 0.068 5%, 0.112 6.7%, 0.217 10%, 0.53 19.2%, 0.63 22.5%, 0.717 25.8%, 0.791 29.2%, 0.851 32.5%, 0.899 35.8%, 0.936 39.2%, 0.964 42.5%, 0.989 46.7%, 1.006 51.7%, 1.014 56.7%, 1.016 66.7%, 1); --r-toast-d: 383ms;
    /* correo/MailNotifier, clientes/ResenaNotifier, pedidos/NewOrderAlert, kiosk/PinPad · 420/32 */
    --r-aviso: linear(0, 0.009 1.7%, 0.032 3.3%, 0.066 5%, 0.11 6.7%, 0.214 10%, 0.526 19.2%, 0.627 22.5%, 0.715 25.8%, 0.789 29.2%, 0.851 32.5%, 0.9 35.8%, 0.938 39.2%, 0.967 42.5%, 0.992 46.7%, 1.009 51.7%, 1.017 56.7%, 1.019 65.8%, 1); --r-aviso-d: 396ms;
    /* kiosk/PinPad.tsx (whileTap de cada tecla) · 700/22 */
    --r-tecla: linear(0, 0.008 0.8%, 0.03 1.7%, 0.065 2.5%, 0.11 3.3%, 0.164 4.2%, 0.293 5.8%, 0.663 10%, 0.802 11.7%, 0.927 13.3%, 1.032 15%, 1.116 16.7%, 1.149 17.5%, 1.199 19.2%, 1.227 20.8%, 1.235 21.7%, 1.237 23.3%, 1.215 25.8%, 1.172 28.3%, 1.067 33.3%, 1.007 36.7%, 0.966 40%, 0.947 43.3%, 0.948 48.3%, 0.997 59.2%, 1.013 65.8%, 0.998 86.7%, 1); --r-tecla-d: 575ms;
    /* kiosk/privacy.tsx (el panel de totales) · 320/34/0.7 */
    --r-ojo: linear(0, 0.016 1.7%, 0.057 3.3%, 0.142 5.8%, 0.336 10.8%, 0.456 14.2%, 0.535 16.7%, 0.625 20%, 0.7 23.3%, 0.761 26.7%, 0.809 30%, 0.857 34.2%, 0.893 38.3%, 0.924 43.3%, 0.95 49.2%, 0.968 55.8%, 0.989 71.7%, 1); --r-ojo-d: 546ms;
    /* kiosk/privacy.tsx (el botón del ojito) · 600/24 */
    --r-ojo-btn: linear(0, 0.005 0.8%, 0.02 1.7%, 0.044 2.5%, 0.076 3.3%, 0.157 5%, 0.311 7.5%, 0.705 13.3%, 0.851 15.8%, 0.935 17.5%, 1.005 19.2%, 1.086 21.7%, 1.124 23.3%, 1.159 25.8%, 1.171 28.3%, 1.161 31.7%, 1.131 35%, 1.021 45%, 0.991 49.2%, 0.975 53.3%, 0.972 60%, 1.004 80.8%, 1); --r-ojo-btn-d: 512ms;
    /* clientes/InviteEmailModal, comprobantes/ComprobantesPage · 320/30 */
    --r-modal: linear(0, 0.002 0.8%, 0.02 2.5%, 0.051 4.2%, 0.092 5.8%, 0.193 9.2%, 0.503 18.3%, 0.603 21.7%, 0.69 25%, 0.763 28.3%, 0.824 31.7%, 0.873 35%, 0.912 38.3%, 0.947 42.5%, 0.972 46.7%, 0.991 51.7%, 1.001 56.7%, 1.008 69.2%, 1); --r-modal-d: 471ms;
    /* caja/TurnoStartAnnounce.tsx · 300/26/0.8 */
    --r-turno: linear(0, 0.002 0.8%, 0.02 2.5%, 0.05 4.2%, 0.091 5.8%, 0.192 9.2%, 0.419 15.8%, 0.527 19.2%, 0.623 22.5%, 0.687 25%, 0.761 28.3%, 0.822 31.7%, 0.871 35%, 0.91 38.3%, 0.946 42.5%, 0.971 46.7%, 0.99 51.7%, 1.001 56.7%, 1.008 69.2%, 1); --r-turno-d: 433ms;
    /* caja/CajaPage.tsx (pastilla de cobros sin asociar) · 420/30/0.6 */
    --r-pastilla: linear(0, 0.007 1.7%, 0.025 3.3%, 0.087 6.7%, 0.169 10%, 0.462 20.8%, 0.561 25%, 0.632 28.3%, 0.693 31.7%, 0.747 35%, 0.792 38.3%, 0.84 42.5%, 0.877 46.7%, 0.912 51.7%, 0.942 57.5%, 0.962 63.3%, 0.988 77.5%, 1); --r-pastilla-d: 275ms;
    /* caja/CajaPage.tsx («Todo conciliado») · 360/30/0.7 */
    --r-ok: linear(0, 0.007 1.7%, 0.025 3.3%, 0.087 6.7%, 0.169 10%, 0.462 20.8%, 0.561 25%, 0.632 28.3%, 0.693 31.7%, 0.747 35%, 0.792 38.3%, 0.84 42.5%, 0.877 46.7%, 0.912 51.7%, 0.942 57.5%, 0.962 63.3%, 0.988 77.5%, 1); --r-ok-d: 321ms;
    /* caja/CajaPage.tsx (el tilde de «Todo conciliado») · 520/20 */
    --r-tilde: linear(0, 0.007 0.8%, 0.029 1.7%, 0.062 2.5%, 0.105 3.3%, 0.157 4.2%, 0.281 5.8%, 0.634 10%, 0.769 11.7%, 0.891 13.3%, 0.994 15%, 1.078 16.7%, 1.141 18.3%, 1.184 20%, 1.208 21.7%, 1.216 23.3%, 1.204 25.8%, 1.171 28.3%, 1.051 35%, 1.013 37.5%, 0.977 40.8%, 0.955 45%, 0.958 50%, 0.997 60.8%, 1.009 67.5%, 0.998 89.2%, 1); --r-tilde-d: 654ms;
    /* kiosk/LlamadaOverlay.tsx · 420/26 */
    --r-llamada: linear(0, 0.003 0.8%, 0.028 2.5%, 0.073 4.2%, 0.133 5.8%, 0.241 8.3%, 0.522 14.2%, 0.635 16.7%, 0.737 19.2%, 0.825 21.7%, 0.899 24.2%, 0.958 26.7%, 1.003 29.2%, 1.044 32.5%, 1.07 36.7%, 1.076 40.8%, 1.067 45.8%, 1.016 60.8%, 1 69.2%, 0.994 80.8%, 1); --r-llamada-d: 492ms;
    /* musica/MusicaPage.tsx (la cola que entra de costado) · 380/36 */
    --r-cajon: linear(0, 0.006 1.7%, 0.021 3.3%, 0.044 5%, 0.09 7.5%, 0.185 11.7%, 0.475 23.3%, 0.566 27.5%, 0.631 30.8%, 0.74 37.5%, 0.831 45%, 0.876 50%, 0.91 55%, 0.958 65.8%, 0.986 79.2%, 1); --r-cajon-d: 338ms;
    /* correo/ThreadView.tsx · 380/30 */
    --r-hilo: linear(0, 0.008 1.7%, 0.031 3.3%, 0.066 5%, 0.109 6.7%, 0.212 10%, 0.551 20%, 0.649 23.3%, 0.735 26.7%, 0.79 29.2%, 0.853 32.5%, 0.903 35.8%, 0.941 39.2%, 0.97 42.5%, 0.995 46.7%, 1.013 51.7%, 1.021 56.7%, 1.021 65.8%, 1); --r-hilo-d: 412ms;
    /* framer-motion: resorte por defecto de x/y · 500/25 */
    --r-defecto: linear(0, 0.005 0.8%, 0.04 2.5%, 0.069 3.3%, 0.142 5%, 0.28 7.5%, 0.536 11.7%, 0.682 14.2%, 0.81 16.7%, 0.884 18.3%, 0.946 20%, 1.021 22.5%, 1.072 25%, 1.104 27.5%, 1.12 30.8%, 1.115 34.2%, 1.018 49.2%, 1 53.3%, 0.988 58.3%, 0.986 65.8%, 1.001 87.5%, 1); --r-defecto-d: 537ms;
  }
}
/* @resortes:fin */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .np-fill { transition: none; } html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--fuchsia-ink); }
a:hover { color: var(--fuchsia); }
:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }

/* Tipografía */
.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: .96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.display-2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Títulos en dos voces: primero Geist, ajustado y sin adornos; después Bodoni. */
.l-tech { display: block; font-family: var(--sans); font-weight: 500; font-size: .7em; line-height: 1.04; letter-spacing: -0.052em; font-optical-sizing: auto; }
.l-serif { display: block; font-family: var(--serif); }
.display .l-tech { font-size: .66em; letter-spacing: -0.058em; margin-bottom: .06em; }
.h2 .l-tech { font-weight: 500; }
/* «360°»: el número en la Bodoni itálica, en fucsia, y el grado como un anillo
   con un punto que da una vuelta entera cuando el título entra en pantalla
   (app.js agrega .is-in). El «°» de texto queda oculto a la vista. */
.g360 { position: relative; display: inline-block; padding-right: .36em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.16em; letter-spacing: -0.03em; line-height: .9; color: var(--fuchsia); }
.g360-o { position: absolute; right: -.05em; top: .05em; width: .25em; height: .25em; }
.g360-o::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .052em solid currentColor; }
.g360-o::after { content: ""; position: absolute; left: 50%; top: -.045em; width: .1em; height: .1em; margin-left: -.05em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .025em var(--paper); }
.g360-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .g360-o { transform: rotate(-315deg); }
.g360.is-in .g360-o { animation: g360gira 1.6s cubic-bezier(.65, 0, .35, 1) .25s both; }
@keyframes g360gira { from { transform: rotate(-315deg); } to { transform: rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .js .g360-o, .g360.is-in .g360-o { animation: none; transform: rotate(45deg); } }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--fuchsia); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.2;
  border: 1px solid var(--fuchsia); transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--fuchsia-ink); border-color: var(--fuchsia-ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: #cbbccb; }
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.btn-lg { min-height: 58px; padding: 16px 32px; font-size: 18px; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: transform .22s var(--ease); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; transition: height .25s var(--ease); }
/* Sobre el hero, la cabecera es de la misma noche que la simulación. Pasada la
   simulación, sale y vuelve a entrar clara y más baja (app.js, "Cabecera"). */
.nav.is-hiding { transform: translateY(-100%); }
/* En la portada son dos cabeceras: la oscura queda arriba de todo y NO acompaña
   (se va con el hero); pasada la simulación llega la clara, fija y más baja. */
.nav.nav-hero { position: absolute; top: 0; left: 0; right: 0; }
.nav.nav-hero.is-compact { position: fixed; }
.nav-hero ~ main > .hero { padding-top: calc(68px + clamp(12px, 1.6vw, 24px)); }
.nav.is-dark { background: color-mix(in srgb, var(--plum) 88%, transparent); border-bottom-color: rgba(255, 255, 255, .07); }
/* La oscura de la portada no tiene fondo propio: se apoya en el del hero. Queda
   sólo con el idioma: la marca y «Escribinos» bajan al hero y las secciones están
   en la cabecera clara, que aparece al subir. */
.nav.nav-hero.is-dark .brand, .nav.nav-hero.is-dark .nav-links, .nav.nav-hero.is-dark .nav-end .btn, .nav.nav-hero.is-dark .nav-menu { display: none; }
.nav.nav-hero.is-dark { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav.is-dark .brand { color: #fff; }
.nav.is-dark .wm { --wm-a: #fff; --wm-b: var(--rose); }
.nav.is-dark .nav-links a, .nav.is-dark .lang { color: var(--on-plum-2); }
.nav.is-dark .nav-links a:hover, .nav.is-dark .lang:hover, .nav.is-dark .nav-links a[aria-current] { color: #fff; }
.nav.is-dark .nav-menu { color: #fff; }
.nav.is-dark :focus-visible { outline-color: var(--rose); }
.nav.is-compact { background: color-mix(in srgb, var(--paper) 96%, transparent); }
.nav.is-compact .nav-in { height: 56px; }
.nav.is-compact .wm { width: 118px; }
.nav.is-compact .nav-links a { font-size: 14.5px; }
.nav.is-compact .btn-sm { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img, .brand .iso { width: 20px; height: auto; display: block; }
.wm { width: 132px; height: auto; display: block; --wm-a: var(--ink); --wm-b: var(--rose-deep); }
.wm-a { fill: var(--wm-a, #1d171f); }
.wm-b { fill: var(--wm-b, #c4707d); }

/* ---- Logo en movimiento (manual de marca, «Logo en movimiento», 12/10/2026) ----
   El isotipo va en línea (.iso) con .posts > .post, .hebra-wrap y .shine; en el hero
   Dos comportamientos en el sitio: el brillo que cruza la hebra en loop (hero y pie) y
   el hover (sube 2 px y brilla una vez). La entrada del manual se probó y Chris la sacó
   (12/10): el logo aparece entero. Todo queda quieto con «reducir movimiento». */
.iso .shine { transform-box: fill-box; transform-origin: center; }
.iso .shine { transform: translateX(-170%); }
/* El brillo pasa de vez en cuando, no en loop (12/10, Chris): una pasada de ~1,8 s y unos
   11 s de quietud; la primera, a los 2,5 s de entrar. */
.h1-brillo .iso .shine { animation: h1-shine-espora 13s linear 2.5s infinite; }
.h1-hover .iso { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.h1-hover:hover .iso, .h1-hover:focus-visible .iso { transform: translateY(-2px); }
.h1-hover:hover .iso .shine, .h1-hover:focus-visible .iso .shine { animation: h1-shine-once .9s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes h1-shine { 0% { transform: translateX(-170%); } 55%, 100% { transform: translateX(170%); } }
@keyframes h1-shine-espora { 0% { transform: translateX(-170%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 14%, 100% { transform: translateX(170%); } }
@keyframes h1-shine-once { 0% { transform: translateX(-170%); } 100% { transform: translateX(170%); } }
@media (prefers-reduced-motion: reduce) {
  .h1-hover .iso { transition: none !important; transform: none !important; }
  .iso .shine { animation: none !important; opacity: 0; }
}
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { position: relative; color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 6px 0; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); font-weight: 600; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--fuchsia); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-lang-m { display: none; }
.nav-menu { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--ink); border-radius: 12px; cursor: pointer; place-items: center; }
.nav-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-menu path { transition: transform .25s var(--ease), opacity .2s; transform-origin: 12px 12px; }
.nav.is-open .nav-menu .l1 { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav-menu .l2 { opacity: 0; }
.nav.is-open .nav-menu .l3 { transform: translateY(-5px) rotate(-45deg); }
main section[id] { scroll-margin-top: 56px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* El cambio de idioma, chico: una bandera de línea y la palabra. El padding
   negativo mantiene el área táctil sin agrandar lo que se ve. */
.lang { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px; margin: -6px -4px; color: var(--ink-2); font-size: 11px; letter-spacing: .01em; text-decoration: none; }
.lang .flag { width: 13px; height: 9px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; }
.lang .flag .dot { fill: currentColor; stroke: none; }
.lang:hover { color: var(--ink); }

/* Portada */
.hero { background: radial-gradient(120% 60% at 50% 0%, #2b1e32 0%, var(--plum) 58%, #120c13 100%); color: var(--on-plum); padding: clamp(26px, 3.6vw, 52px) 0 clamp(48px, 6vw, 84px); }
.hero-in { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: clamp(10px, 1.4vw, 20px); }
.hero-title { font-size: clamp(38px, 5vw, 72px); color: #fff; text-wrap: balance; }
.hero-title .l-tech, .hero-title .l-serif { display: inline; }
.hero-title .l-tech { font-size: .62em; letter-spacing: -0.05em; margin: 0; color: #f1e9f4; }
.hero-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 2px; }
.hero-brand img, .hero-brand .iso { width: 26px; height: auto; display: block; }
.hero-brand .wm { width: 172px; --wm-a: #fff; --wm-b: var(--rose); }
.hero-sub { color: var(--on-plum-2); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.5; max-width: 62ch; text-wrap: balance; }
.hero-spark { display: inline-block; width: 1.05em; height: 1.05em; margin-left: .35em; vertical-align: -.16em; fill: #ff7ec2; stroke: #ff7ec2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: heroSpark 3.6s ease-in-out 1.2s infinite; }
.hero-spark path + path { fill: none; }
.hero-cta { margin-top: 10px; }
@media (min-width: 900px) { .hero-sub { white-space: nowrap; max-width: none; } }
@keyframes heroSpark { 0%, 70%, 100% { transform: none; opacity: 1; } 80% { transform: scale(1.22) rotate(14deg); opacity: .85; } 90% { transform: scale(.96); } }
/* La simulación sobre ciruela */
.hero .stage-title { color: #fff; }
/* «Demo con datos de ejemplo»: en el gris de los textos secundarios, chico, para que no
   compita con el título ni con el fucsia de los botones (pedido de Chris, 12/10). */
.hero .tag { color: var(--on-plum-2); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.stage-head .tag { font-size: 11px; font-weight: 500; padding: 2px 9px; letter-spacing: .01em; }
.hero .stage-note, .hero .stage-hint { color: #a897b3; }
.hero .viewport { color: var(--ink); border-color: rgba(255, 255, 255, .08); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .75); } /* adentro de los equipos, la tinta de siempre */
.hero .tl-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.hero .tl-btn:hover { border-color: #fff; }
.hero .tl-play { background: var(--fuchsia); border-color: var(--fuchsia); }
.hero .tl-play:hover { background: var(--fuchsia-ink); border-color: var(--fuchsia-ink); }
.hero .tl-dot { background: var(--plum); border-color: #6c5876; }
.hero .tl-node { color: #a897b3; }
.hero .tl-time { color: #d9cbe0; }
.hero .tl-node:hover, .hero .tl-node.is-active .tl-time, .hero .tl-node.is-active .tl-name { color: #fff; }
.hero .tl-node.is-active .tl-dot { background: #fff; }
.hero :focus-visible { outline-color: var(--rose); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- La escena: un día en el salón ---------- */
.stage { position: relative; }
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* En pantallas de escritorio el título y la etiqueta van en una sola fila (pedido de Chris, 12/10): más chicos y sin cortar. */
@media (min-width: 640px) { .stage-head { flex-wrap: nowrap; } .stage-head .tag { white-space: nowrap; flex: none; } }
.stage-title { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -0.01em; }
.tag { font-size: 12px; font-weight: 600; color: var(--fuchsia-ink); background: color-mix(in srgb, var(--fuchsia) 9%, var(--white)); border: 1px solid color-mix(in srgb, var(--fuchsia) 22%, transparent); padding: 3px 10px; border-radius: 999px; }
.stage-note { color: var(--muted); font-size: 14.5px; margin: -4px 0 12px; }

.viewport {
  position: relative; overflow: hidden; border-radius: 28px;
  aspect-ratio: 16 / 9;
  background: #3a2f37;
  border: 1px solid var(--line);
  isolation: isolate;
}
.world {
  position: absolute; left: 0; top: 0; width: 1600px; height: 900px;
  transform-origin: 0 0;
}
/* La cámara la mueve app.js (applyCamera): resortes con Web Animations. */
/* El salón detrás del mostrador: foto generada con IA, ya desenfocada (ver build.py, escena()). */
.scene { position: absolute; left: -60px; top: -89px; width: 2019px; height: 1200px; max-width: none; pointer-events: none; user-select: none; }
/* El mostrador, en oscuro como el salón de fondo (12/10): piedra grafito con un filo de luz arriba. */
.counter { position: absolute; left: -200px; width: 2000px; top: 783px; height: 340px; background: linear-gradient(180deg, #2e2431, #1d1620 34%, #120d14); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -22px 44px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 196, 225, .08); }
.dev { position: absolute; }
.dev-label { margin: 10px auto 0; width: max-content; max-width: 100%; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); font-family: var(--sans); background: rgba(255, 255, 255, .86); padding: 3px 10px; border-radius: 999px; box-shadow: 0 6px 18px -10px rgba(23, 16, 24, .55); }
.dev-terminal { left: 40px; top: 34px; width: 1040px; }
.dev-terminal .bezel { position: relative; z-index: 1; padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #2a222d, #0f0b10 60%); box-shadow: 0 30px 60px -30px rgba(40, 10, 40, .45), inset 0 0 0 1px rgba(255,255,255,.06); }
.dev-terminal .screen { position: relative; width: 1004px; height: 628px; border-radius: 8px; overflow: hidden; background: #f5f3f5; }
/* El pie de la terminal: aluminio grafito como el marco. El cuello nace detrás de
   la pantalla (con la sombra que ella le hace), se abre apenas hacia abajo y entra
   en una base ovalada con canto, apoyada en el mostrador con su sombra de contacto.
   (Clases propias: «.foot» es el pie de página del sitio y se le pegaba el padding.) */
.tm-soporte { position: relative; z-index: 0; height: 162px; margin-top: -24px; }
.tm-cuello { position: absolute; left: 50%; top: 0; z-index: 2; width: 96px; height: 122px; translate: -50% 0; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(8, 4, 10, .72) 0, rgba(8, 4, 10, .28) 36px, rgba(8, 4, 10, 0) 64px), linear-gradient(90deg, #100c12 0%, #2c2531 12%, #4a4150 31%, #6f6675 45%, #574e5d 55%, #2e2733 82%, #0f0b11 100%); }
.tm-base { position: absolute; left: 50%; top: 106px; z-index: 1; width: 344px; height: 30px; translate: -50% 0; border-radius: 50%; background: radial-gradient(120% 150% at 50% 8%, #706776 0%, #473e4d 30%, #29222d 62%, #141017 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 4px rgba(0, 0, 0, .45), 0 7px 0 #0e0b10, 0 8px 0 rgba(255, 255, 255, .07); }
.tm-base::before { content: ""; position: absolute; left: 50%; top: 6px; width: 112px; height: 15px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, #09070b, #1e1822 72%, rgba(30, 24, 34, 0)); }
.tm-sombra { position: absolute; left: 50%; top: 116px; z-index: 0; width: 430px; height: 46px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 8, 26, .5), rgba(20, 8, 26, .18) 62%, rgba(20, 8, 26, 0)); }
.dev-tv { left: 1128px; top: 36px; width: 432px; }
/* La etiqueta de la TV cuelga del marco: así no se confunde con la del teléfono. */
.dev-tv .dev-label { position: relative; z-index: 1; margin-top: -7px; }
.dev-tv .bezel { position: relative; padding: 9px 9px 14px; border-radius: 10px; background: #0d0a0e; box-shadow: 0 24px 40px -24px rgba(40, 10, 40, .5); }
.dev-tv .screen { position: relative; width: 414px; height: 233px; overflow: hidden; background: #000; border-radius: 3px; }
.dev-phone { left: 1216px; top: 326px; width: 252px; }
.dev-phone .dev-label { margin-top: 8px; }
/* Se ven la primera vez que aparece cada dispositivo y después se van (app.js, etiquetas). */
.dev-label { opacity: 0; transform: translateY(-5px) scale(.94); filter: blur(3px); transition: opacity .35s ease, transform .4s var(--c-acelera), filter .35s ease; pointer-events: none; }
.dev-label.is-on { opacity: 1; transform: none; filter: none; transition: opacity .45s ease, transform .6s var(--r-aviso), filter .45s ease; }
@media (prefers-reduced-motion: reduce) { .dev-label, .dev-label.is-on { transform: none; filter: none; } }
/* «Motor IA»: aparece al costado del teléfono mientras el asistente contesta el primer chat
   (10:40) y se va cuando el turno queda reservado. En el degradé de la marca, con el destello. */
.ia-badge { position: absolute; right: calc(100% - 16px); top: 150px; z-index: 12; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; white-space: nowrap; color: #fff; font: 600 12.5px/1 var(--sans); letter-spacing: .01em; background: linear-gradient(110deg, #f89cb1, #e11383 45%, #7d3ce3); box-shadow: 0 14px 30px -12px rgba(225, 19, 131, .7), inset 0 1px 0 rgba(255, 255, 255, .35); opacity: 0; transform: translateX(26px) scale(.86); filter: blur(4px); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.4, 0, .6, 1), filter .35s ease; }
.ia-badge svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ia-badge.is-on { opacity: 1; transform: none; filter: none; transition: opacity .4s ease, transform .6s var(--r-aviso), filter .4s ease; }
.ia-badge.is-on svg { animation: iaDestello 1.8s ease-in-out .3s infinite; transform-origin: 50% 50%; }
.ia-badge::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid rgba(225, 19, 131, .55); opacity: 0; }
.ia-badge.is-on::after { animation: iaHalo 2s ease-out .4s infinite; }
@keyframes iaDestello { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.22) rotate(18deg); opacity: .85; } }
@keyframes iaHalo { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ia-badge, .ia-badge.is-on { transition: opacity .2s; transform: none; filter: none; } .ia-badge.is-on svg, .ia-badge.is-on::after { animation: none; } }
/* iPhone 15, a escala: pantalla de 2556 × 1179 (240 × 520 acá), marco de aluminio
   con los botones a los costados, el borde negro del vidrio, la Dynamic Island
   con la cámara y un reflejo apenas visible sobre la pantalla. */
.iph { position: relative; zoom: .962; width: 262px; height: 542px; padding: 3px; border-radius: 47px;
  background: linear-gradient(90deg, #2b292e 0%, #77737b 1.3%, #2c2a2f 3.4%, #1d1b1f 50%, #2c2a2f 96.6%, #77737b 98.7%, #2b292e 100%);
  box-shadow: inset 0 0 0 .7px rgba(255, 255, 255, .26), inset 0 1.5px 1px rgba(255, 255, 255, .2), inset 0 -1.5px 1px rgba(255, 255, 255, .12), 0 0 0 .6px rgba(0, 0, 0, .6), 0 42px 60px -30px rgba(40, 10, 40, .62), 0 16px 26px -16px rgba(20, 8, 24, .5); }
.iph .bezel { position: relative; height: 100%; padding: 8px; border-radius: 44px; background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.iph .screen { position: relative; width: 240px; height: 520px; border-radius: 36px; overflow: hidden; background: #fff; isolation: isolate; }
.iph-isla { position: absolute; left: 50%; top: 15px; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; z-index: 5; }
.iph-isla i { position: absolute; right: 8px; top: 6.5px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #34406a 0%, #141827 45%, #06070a 72%); box-shadow: 0 0 0 1px #0b0c10; }
.iph-vidrio { position: absolute; inset: 8px; border-radius: 36px; pointer-events: none; z-index: 6; background: linear-gradient(116deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .035) 22%, rgba(255, 255, 255, 0) 38%); }
.iph-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #77737b, #3a383d 70%, #232125); }
.iph-accion { left: -2px; top: 100px; height: 24px; }
.iph-vol1 { left: -2px; top: 142px; height: 44px; }
.iph-vol2 { left: -2px; top: 196px; height: 44px; }
.iph-lado { right: -2px; top: 158px; height: 70px; background: linear-gradient(270deg, #77737b, #3a383d 70%, #232125); }

.vp-wrap { position: relative; }
.explore-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--plum); color: var(--on-plum); padding: 6px 6px 6px 16px; border-radius: 999px; font-size: 14px; z-index: 5; box-shadow: 0 10px 30px -12px rgba(23,16,24,.6); }
.explore-bar[hidden] { display: none; }
.explore-back { font: inherit; font-weight: 600; background: var(--fuchsia); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; min-height: 34px; }

/* Línea de tiempo: la única hebra con degradé de la página */
.timeline { display: flex; gap: 18px; align-items: flex-start; margin-top: 22px; }
.tl-controls { display: flex; gap: 8px; padding-top: 2px; flex: none; }
.tl-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cbbccb; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tl-btn:hover { border-color: var(--ink); }
.tl-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-play { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl-play:hover { background: var(--plum-2); }
.tl-play svg { fill: currentColor; stroke: none; }
.tl-play .i-pause { display: none; fill: none; stroke: currentColor; stroke-width: 2.6; }
.tl-play.is-playing .i-play { display: none; }
.tl-play.is-playing .i-pause { display: block; }
.tl-track { position: relative; flex: 1; min-width: 0; }
/* La línea de tiempo como trenza (12/10, pedido de Chris). Un hilo fino recorre todo el día;
   en lo que ya pasó se le suma el principal, grueso y con el degradé, y los dos se trenzan
   (el fino pasa por arriba y por abajo, de cruce a cruce). Lo trenzado se descubre con el ancho
   de #tl-fill (app.js); adentro mide 100cqw de .tl-thread, así no se estira. */
.tl-thread { position: absolute; left: 0; right: 0; top: 14px; height: 12px; container-type: inline-size; pointer-events: none; }
.tl-hebra { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.tl-hebra path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tl-hebra .fino { stroke: var(--line); stroke-width: 1.2; }
.hero .tl-hebra .fino { stroke: rgba(255, 255, 255, .22); }
/* Donde ya hay trenza, el fino de fondo no se ve: lo tapa la trenza (mismo ancho que #tl-fill). */
/* La trenza apagada va siempre entera; la encendida (#tl-fill) la tapa sólo donde se recorrió
   (app.js arma el recorte tramo por tramo). */
.tl-thread-fill { position: absolute; left: 0; top: -6px; bottom: -6px; width: 100%; clip-path: inset(0 100% 0 0); }
.tl-thread-fill .tl-hebra { top: 6px; height: 12px; width: 100cqw; }
.tl-hebra .grueso { stroke: url(#tl-g); stroke-width: 3; opacity: 1; }
/* Adonde todavía no se llegó no va la hebra gruesa (12/10, Chris): sólo el hilo fino, con el
   degradé del pie y apagado. La gruesa aparece cuando se pasa por ahí. */
.tl-hebra.apagada .grueso { display: none; }
/* Lo que falta: un solo trazo continuo (en pedazos encimados se marcaban puntitos) y más
   transparente (12/10, Chris). */
.tl-hebra.apagada .fino-t { stroke-width: 1; opacity: .36; stroke-linecap: round; }
/* Los colores de la trenza son los de la hebra del pie (12/10, Chris): violeta → fucsia → rosa,
   el grueso casi pleno y el fino con el mismo degradé pero apagado, como el hilo de abajo del pie.
   Los tramos en que pasa por arriba van con punta recta (butt): una punta redonda dejaba una
   marca en cada cruce. */
.tl-hebra .fino-t { stroke: url(#tl-g); stroke-width: 1.1; opacity: .55; }
.tl-hebra .fino-t.arriba, .tl-hebra .fino-t.abajo { stroke-linecap: butt; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; position: relative; }
.tl-node { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 12px 2px 6px; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; text-align: center; border-radius: 10px; }
.tl-node:hover { color: var(--ink); }
.tl-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid #c9b8c9; transition: transform .2s, background .2s, border-color .2s; }
/* Momento que ya pasó: tilde blanco que se dibuja. Momento actual: el punto late (12/10). */
.tl-check { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; opacity: 0; }
.tl-node.is-past .tl-check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .38s cubic-bezier(.3, .7, .2, 1) .12s, opacity .1s .12s; }
.tl-node.is-active .tl-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--fuchsia); opacity: 0; animation: tl-late 1.8s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes tl-late { 0% { transform: scale(.7); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tl-node.is-active .tl-dot::after { animation: none; opacity: 0; } .tl-node.is-past .tl-check { transition: none; } }
.tl-node.is-past .tl-dot { border-color: var(--fuchsia); background: var(--fuchsia); }
.tl-node.is-active .tl-dot { border-color: var(--fuchsia); background: var(--white); transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fuchsia) 18%, transparent); }
.tl-time { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 4px; }
.tl-name { font-size: 13px; line-height: 1.3; }
.tl-node.is-active .tl-time, .tl-node.is-active .tl-name { color: var(--ink); }

/* El relato: el momento del día como un segmento del video, contado encima de la
   escena. Vidrio oscuro con desenfoque y texto blanco. Mientras la demo corre
   sola, el texto va como subtítulos (un tramo por vez, al ritmo de lo que se ve)
   y una línea fina abajo se llena con el segmento; en pausa se lee entero. */
.relato { position: absolute; left: 16px; bottom: 16px; z-index: 6; width: min(360px, calc(100% - 32px)); pointer-events: none; }
.relato.is-exploring { display: none; }
.caption { position: relative; overflow: hidden; padding: 8px 12px 10px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 46%), rgba(16, 10, 18, .68); border: 1px solid rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 44px -22px rgba(8, 4, 10, .8); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.caption[hidden] { display: none; }
.caption.is-active { animation: relatoIn .55s cubic-bezier(.22, 1, .36, 1) both; }
.caption.is-active .cap-text { animation: relatoIn .55s cubic-bezier(.22, 1, .36, 1) .12s both; }
@keyframes relatoIn { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
.cap-head { display: flex; align-items: baseline; gap: 7px; }
.cap-time { flex: none; padding: 1.5px 6px; border-radius: 999px; background: rgba(225, 19, 131, .28); color: #ffc3e0; font-size: 9.5px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cap-title { font-family: var(--serif); font-size: 15px; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.cap-text { margin-top: 3px; font-size: 11.5px; line-height: 1.42; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
/* Subtítulos: los tramos van todos en la misma celda (la caja toma el alto del
   más largo y no salta de un tramo al otro) y se ve uno por vez. */
.caption.is-run .cap-text { display: grid; }
.caption.is-run .cap-cue { grid-area: 1 / 1; opacity: 0; transform: translateY(7px); filter: blur(5px); transition: opacity .28s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .28s ease; }
.caption.is-run .cap-cue.is-past { transform: translateY(-6px); }
.caption.is-run .cap-cue.is-on { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.cap-seg { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .1); }
.cap-seg::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #ff6fb5, #e11383); opacity: 0; }
.caption.is-run .cap-seg::after { opacity: 1; animation: relatoSeg var(--seg, 9s) linear both; }
@keyframes relatoSeg { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .caption.is-active, .caption.is-active .cap-text { animation: none; }
  .caption.is-run .cap-cue { transition: none; transform: none; filter: none; }
  .caption.is-run .cap-seg::after { animation: none; opacity: 0; }
}
.stage-hint { margin-top: 16px; color: var(--muted); font-size: 14.5px; }

/* ---------- Pantallas de la app (terminal) ---------- */
.t-app { display: flex; width: 100%; height: 100%; font-family: var(--ui); font-size: 13px; line-height: 1.35; color: #1d171f; background: #f5f3f5; letter-spacing: -0.005em; }
.t-side { flex: none; width: 66px; background: linear-gradient(180deg, #171018, #211826); display: flex; flex-direction: column; align-items: center; padding: 12px 0 10px; gap: 2px; }
.t-side .t-iso { width: 20px; height: auto; margin-bottom: 10px; opacity: .95; }
.t-nav { display: flex; flex-direction: column; gap: 2px; }
.t-nav button { width: 56px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: #b8a9bf; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 8.6px/1.1 var(--ui); cursor: pointer; padding: 5px 2px; }
.t-nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.t-nav button.is-on { background: rgba(225, 19, 131, .22); color: #fff; }
.t-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-side .t-me { margin-top: auto; width: 30px; height: 30px; border-radius: 50%; background: #3a2c40; color: #e8dcef; display: grid; place-items: center; font: 700 11px var(--ui); }
.t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.t-top { flex: none; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff; border-bottom: 1px solid #ece7ee; }
.t-title { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.t-sub { color: #716877; font-size: 11.5px; margin-top: 1px; }
.t-top .t-date { margin-left: 8px; font-size: 12px; font-weight: 600; background: #f5f3f5; border: 1px solid #ece7ee; border-radius: 8px; padding: 5px 10px; }
.t-inds { margin-left: auto; display: flex; gap: 6px; }
.t-ind { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #4a4150; background: #f5f3f5; border-radius: 999px; padding: 4px 9px; }
.t-ind i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; display: block; }
.t-ind.off i { background: #b9b1c0; }
.t-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px; overflow: hidden; }
.t-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t-panel { background: #fff; border: 1px solid #ece7ee; border-radius: 14px; box-shadow: 0 1px 3px rgba(20,10,25,.05), 0 8px 24px rgba(20,10,25,.04); min-width: 0; }
.t-ph { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f0ebf1; }
.t-ph h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.t-ph .t-muted { font-size: 11px; }
.t-muted { color: #716877; }
.t-btns { margin-left: auto; display: flex; gap: 6px; }
.t-b { font: 600 11px var(--ui); border-radius: 8px; padding: 6px 10px; border: 1px solid #e3dbe5; background: #fff; color: #1d171f; }
.t-b.pri { background: #e11383; border-color: #e11383; color: #fff; }
.t-b.dark { background: #1d171f; border-color: #1d171f; color: #fff; }
.t-b kbd { font: 700 9px var(--ui); opacity: .7; margin-left: 4px; }
.t-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.6px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.c-ok { background: #e4f6ee; color: #137a52; }
.c-warn { background: #fbf0d9; color: #8a5a00; }
.c-pink { background: #fce4f1; color: #ad0c63; }
.c-grey { background: #f1edf2; color: #6a6070; }
.c-violet { background: #efe7fb; color: #5a2fb0; }
.c-blue { background: #e3f3fc; color: #00679a; }
.c-red { background: #fde8ea; color: #b4232f; }
.t-table { width: 100%; border-collapse: collapse; font-size: 11.6px; }
.t-table th { text-align: left; font-weight: 600; font-size: 10px; color: #716877; padding: 7px 8px; border-bottom: 1px solid #f0ebf1; white-space: nowrap; }
.t-table td { padding: 7px 8px; border-bottom: 1px solid #f5f1f6; vertical-align: middle; white-space: nowrap; }
.t-table tr.is-new td { animation: rowIn 1.4s var(--ease); }
.t-table tr.is-dim td { color: #a59cab; }
.t-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.t-vino { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #cfc6d3; display: inline-grid; place-items: center; }
.t-vino.si { background: #1f9d6b; border-color: #1f9d6b; }
.t-vino.si::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.t-who { display: inline-flex; align-items: center; gap: 6px; }
.t-av { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 9px var(--ui); flex: none; }
.t-pay { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11px; }
.t-pay i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.p-ef { color: #1f9d6b; } .p-ef i { background: #1f9d6b; }
.p-mp { color: #0081bd; } .p-mp i { width: 14px; height: 14px; border-radius: 50%; background: #00bcff url(/img/mp-isotype.svg) center / cover no-repeat; }
.p-tr { color: #6a3fca; } .p-tr i { background: #7c4ddb; }
.p-ta { color: #2f5fbd; } .p-ta i { background: #3b6fd2; }
.p-lo { color: #7f7486; } .p-lo i { background: #a29aa8; }
.t-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid #f0ebf1; }
.t-foot .t-chip { font-size: 10px; padding: 4px 9px; background: #f5f3f5; color: #4a4150; }
.t-side-col { width: 238px; flex: none; }
.t-kpi { padding: 14px; }
.t-kpi .t-big { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: #1f9d6b; font-variant-numeric: tabular-nums; }
.t-kpi .t-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed #efe9f0; }
.t-kpi .t-row:last-child { border-bottom: 0; }
.t-kpi .t-row b { font-variant-numeric: tabular-nums; }
.t-stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; background: #f1edf2; }
.t-stack span { display: block; height: 100%; transition: width .8s var(--ease); }
.t-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 10.5px; }
.t-legend span { display: flex; align-items: center; gap: 5px; }
.t-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.t-masked { letter-spacing: .1em; color: #b3a9b8; }
.t-float { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ece7ee; border-radius: 999px; padding: 7px 12px 7px 8px; font-size: 11.5px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(20,10,25,.3); }
.t-float .mpdot { width: 20px; height: 20px; border-radius: 50%; background: #00bcff url(/img/mp-isotype.svg) center / cover no-repeat; flex: none; }
.t-float.ok { color: #137a52; }

/* Calendario */
.t-cal { flex: 1; min-height: 0; display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)); grid-template-rows: 36px minmax(0, 1fr); position: relative; overflow: hidden; }
.t-cal-head { display: contents; }
.t-cal .ch { padding: 6px 8px; border-bottom: 1px solid #ece7ee; background: #fff; display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 11.5px; }
.t-cal .ch small { font-weight: 500; color: #716877; font-size: 10px; display: block; }
.t-cal .hours { grid-column: 1; position: relative; }
.t-cal .col { position: relative; border-left: 1px solid #f0ebf1; }
.t-cal .hr { position: absolute; left: 0; right: 0; border-top: 1px solid #f3eff4; }
.t-cal .hl { position: absolute; right: 6px; font-size: 9.5px; color: #a59cab; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.t-ev { position: absolute; left: 5px; right: 5px; border-radius: 8px; padding: 5px 7px; font-size: 10.4px; line-height: 1.25; overflow: hidden; background: #fff; border: 1.5px solid #e11383; color: #1d171f; }
.t-ev b { display: block; font-size: 10.8px; }
.t-ev .t-chip { margin-top: 3px; }
.t-ev.done { background: #f6f3f7; border-color: #ddd4e0; color: #716877; }
.t-ev.live { background: #16a34a; border-color: #16a34a; color: #fff; }
.t-ev.soon { border-color: #f59e0b; }
.t-ev.sm { display: flex; align-items: center; gap: 5px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.t-ev.sm b { display: inline; flex: none; }
.t-ev.sm .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Cancelación: el turno queda en gris, se va y el horario se ve libre */
.t-ev.cancel { background: #f1eef2; border: 1.5px solid #d8d0db; color: #9a90a0; animation: evGris .5s ease both; }
.t-ev.cancel b { text-decoration: line-through; text-decoration-color: rgba(154, 144, 160, .7); }
.t-ev.leaving { animation: evSeVa .5s var(--ease) both; }
.t-ev.free { background: rgba(225, 19, 131, .04); border: 1.5px dashed rgba(225, 19, 131, .55); color: #ad0c63; animation: evLibre .5s var(--ease) both, evLate 1.6s ease-in-out .5s 3; }
.t-ev.free .who { opacity: .85; }
/* Turno nuevo: entra con un rebote y late un par de veces */
/* El turno nuevo (reservado por el chat) se marca bien en el calendario (12/10, como en el video). */
.t-ev.new { background: #fde7f2; border: 2px solid #e11383; color: #1d171f; z-index: 3; box-shadow: 0 0 0 4px rgba(225, 19, 131, .18), 0 10px 24px -8px rgba(225, 19, 131, .55); animation: evPop .6s cubic-bezier(.2, 1.35, .4, 1) both, evLate 1.4s ease-in-out .55s 2; }
.t-ev.new b { color: #ad0c63; }
.t-ev .who { color: inherit; opacity: .8; }
.t-nowline { position: absolute; left: 44px; right: 0; height: 0; border-top: 2px solid #e11383; z-index: 3; }
.t-nowline::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #e11383; }

/* Overlays de la terminal */
.t-toast { position: absolute; right: 16px; top: 66px; width: 286px; background: #fff; border-radius: 14px; border: 1px solid #ece7ee; box-shadow: 0 18px 40px -16px rgba(20,10,25,.35); padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; z-index: 8; animation: toastIn .6s var(--ease) both; }
.t-toast .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; font: 800 10px var(--ui); }
.t-toast b { display: block; font-size: 12.5px; }
.t-toast span { font-size: 11px; color: #6c6272; }
.t-turno { position: absolute; left: 50%; top: 18px; width: 420px; transform: translateX(-50%); background: #fff; border-radius: 18px; border: 2px solid var(--pc, #e11383); box-shadow: 0 30px 60px -22px rgba(20,10,25,.45); padding: 16px 18px 14px; z-index: 9; animation: turnoIn .7s var(--ease) both; overflow: hidden; }
.t-turno .k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--pc, #e11383); }
.t-turno .bell { width: 22px; height: 22px; border-radius: 50%; background: var(--pc, #e11383); display: grid; place-items: center; animation: ring 1s ease-in-out 2; }
.t-turno .bell svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.t-turno .name { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 2px; }
.t-turno .svc { font-size: 14px; color: #4a4150; }
.t-turno .meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.t-turno .meta .t-av { width: 24px; height: 24px; font-size: 11px; }
.t-turno .snd { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: #f1edf2; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #4a4150; }
.t-turno .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--pc, #e11383); width: 100%; animation: drain 8s linear forwards; }
.t-voice { position: absolute; left: 50%; top: 212px; transform: translateX(-50%); width: 420px; z-index: 9; display: flex; align-items: center; gap: 10px; background: #1d171f; color: #f3ecf6; border-radius: 14px; padding: 10px 14px; font-size: 12.5px; animation: toastIn .6s .9s var(--ease) both; }
.t-voice .wave { display: flex; gap: 2px; align-items: center; height: 16px; }
.t-voice .wave i { width: 3px; background: #ff5cae; border-radius: 2px; animation: wave 1s ease-in-out infinite; }
.t-voice .wave i:nth-child(2) { animation-delay: .15s; } .t-voice .wave i:nth-child(3) { animation-delay: .3s; } .t-voice .wave i:nth-child(4) { animation-delay: .45s; }
.t-saver { position: absolute; inset: 0; z-index: 12; background: radial-gradient(60% 70% at 20% 30%, rgba(225,19,131,.55), transparent 60%), radial-gradient(60% 60% at 80% 70%, rgba(125,60,227,.55), transparent 60%), #120c14; color: #fff; display: grid; place-items: center; text-align: center; }
.t-saver .clock { font: 300 120px/1 var(--ui); letter-spacing: -0.04em; }
.t-saver .date { font-size: 16px; opacity: .8; margin-top: 6px; }
.t-saver .pill { margin-top: 26px; display: inline-block; background: rgba(255,255,255,.12); border-radius: 999px; padding: 8px 16px; font-size: 13px; }

/* Otras pantallas */
.t-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t-list { list-style: none; margin: 0; padding: 0; }
.t-list li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #f5f1f6; font-size: 11.6px; }
.t-list li:last-child { border-bottom: 0; }
.t-list .grow { flex: 1; min-width: 0; }
.t-list .grow small { display: block; color: #716877; font-size: 10.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-list li.is-sel { background: #fdf3f9; box-shadow: inset 3px 0 0 #e11383; }
.t-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; font-size: 12px; }
.t-msg { max-width: 78%; padding: 8px 11px; border-radius: 12px; line-height: 1.4; }
.t-msg.in { background: #f1edf2; align-self: flex-start; border-bottom-left-radius: 4px; }
.t-msg.out { background: #1d171f; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.t-msg.bot { background: #fce4f1; color: #3d0f28; align-self: flex-end; border-bottom-right-radius: 4px; }
.t-msg small { display: block; font-size: 9.5px; opacity: .7; margin-top: 3px; }
.t-review { padding: 14px; display: grid; gap: 10px; }
.t-stars { color: #fbbc04; letter-spacing: 2px; font-size: 13px; }
/* Las cinco estrellas en el amarillo de Google, de a una (12/10, como en el video). */
.t-stars .st { display: inline-block; animation: starPop .45s cubic-bezier(.2, 1.7, .4, 1) both; text-shadow: 0 0 10px rgba(251, 188, 4, .35); }
.t-stars .st1 { animation-delay: .1s; } .t-stars .st2 { animation-delay: .22s; } .t-stars .st3 { animation-delay: .34s; } .t-stars .st4 { animation-delay: .46s; } .t-stars .st5 { animation-delay: .58s; }
@keyframes starPop { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: none; } }
.t-draft { border-radius: 12px; padding: 12px; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #e11383, #7d3ce3, #dfa2aa) border-box; font-size: 12px; line-height: 1.5; min-height: 84px; }
.t-draft .cursor { display: inline-block; width: 7px; height: 13px; background: #e11383; vertical-align: -2px; animation: blink .8s step-end infinite; }
.t-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid #ece7ee; background: #fff; }
.t-tabs span { font-size: 11.5px; font-weight: 600; color: #716877; padding: 10px 10px; border-bottom: 2px solid transparent; }
.t-tabs span.on { color: #1d171f; border-bottom-color: #e11383; }
.t-tabs [data-mod] { cursor: pointer; }
.t-tabs [data-mod]:not(.on):hover { color: #1d171f; }

/* ---------- Clientes: el directorio, como en la app ----------
   KPI con la reputación en Google, el panel de scoring por segmento y la grilla
   con contacto, visitas, gasto, última visita, reseña y estado. Medidas de la app
   llevadas a la escala de la terminal. */
.cl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 9px 14px 10px; overflow: hidden; }
.cl-body svg, .cl-inv svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* La reputación ocupa casi dos columnas, como en la app; la primera tarjeta es un poco más ancha para que su bajada entre entera. */
.cl-kpis { flex: none; display: grid; grid-template-columns: 1.22fr 1fr 1fr 1.9fr; gap: 8px; }
.cl-kpi, .cl-panel { background: #fff; border: 1px solid #ece7ee; border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 8px 24px rgba(20, 10, 25, .04); min-width: 0; }
.cl-kpi { position: relative; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; }
.cl-kpi .l { display: flex; align-items: center; gap: 5px; font-size: 9.8px; font-weight: 600; color: #716877; }
.cl-kpi .l svg { width: 12px; height: 12px; }
.cl-kpi .v { font-size: 24px; font-weight: 800; line-height: 1.05; margin-top: 5px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cl-kpi .v.accent { color: #b80e6a; }
.cl-kpi .v.warn { color: #d98a00; }
.cl-kpi .sub { margin-top: 4px; font-size: 9.6px; color: #716877; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rep-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cl-rep-row .v { margin-top: 0; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.cl-rep-aside { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-rep-stars { color: #f2b134; font-size: 13px; line-height: 1; letter-spacing: 1.5px; }
.cl-rep-sub { font-size: 10.5px; font-weight: 600; color: #716877; }
.cl-rep-foot { font-size: 10px; color: #716877; }
.cl-rep-foot b { color: #1d171f; }
.cl-bl { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(210, 59, 59, .28); background: rgba(210, 59, 59, .07); color: #a82f2f; font-size: 9.6px; font-weight: 600; }
.cl-bl svg { width: 10px; height: 10px; }
.cl-bl b { font-weight: 800; }
.cl-rep-sync { position: absolute; right: 11px; bottom: 17px; font-size: 8.6px; font-weight: 600; color: #b6adbc; }
.cl-rep .rg-barra { margin-top: 7px; height: 4px; }
.cl-scoring { flex: none; display: flex; align-items: stretch; gap: 14px; padding: 8px 12px; }
.cl-sc-avg { flex: none; display: flex; flex-direction: column; justify-content: center; padding-right: 14px; border-right: 1px solid #ece7ee; }
.cl-sc-avg .l, .cl-sc-avg .sub { font-size: 9.6px; color: #716877; }
.cl-sc-avg .l { font-weight: 600; }
.cl-sc-avg .v { font-size: 23px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cl-sc-avg .v small { font-size: 11px; font-weight: 700; color: #716877; margin-left: 1px; }
.cl-sc-dist { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.cl-sc-seg { display: flex; flex-direction: column; gap: 4px; padding: 5px 8px; border: 1px solid #ece7ee; border-radius: 10px; min-width: 0; }
.cl-sc-seg .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cl-sc-seg .top b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-sc-seg .bar { height: 5px; border-radius: 999px; background: #f5f3f5; overflow: hidden; }
.cl-sc-seg .bar i { display: block; height: 100%; border-radius: 999px; transform-origin: 0 50%; }
.cl-sc-seg .sub { font-size: 9px; color: #716877; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cl-body.is-intro .cl-sc-seg .bar i { animation: clBar .8s var(--ease) both; }
.cl-dir { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cl-dir-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f0ebf1; }
.cl-dir-head h4 { margin: 0; font-size: 12.5px; font-weight: 700; }
.cl-dir-head .t-muted { font-size: 10px; }
.cl-filters { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cl-mb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 7px; border-radius: 999px; border: 1px solid transparent; font-size: 9.8px; font-weight: 700; white-space: nowrap; }
.cl-mb svg { width: 10px; height: 10px; }
.cl-mb.gold { color: #8a6100; background: #fdf6e3; border-color: #f0d48a; }
.cl-mb.gold svg { color: #f5b301; }
.cl-mb.done { color: #1f9d6b; background: #e9f7f1; border-color: #cdeee0; }
.cl-mb.open { color: #6b3fc4; background: #f2ecfd; border-color: #ddccf5; }
.cl-mb.open svg { color: #7c4ddb; }
.cl-mb .n { min-width: 16px; margin-left: 1px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(0, 0, 0, .06); font-size: 9.2px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.cl-mb .n.is-flash { animation: clCuenta 1.2s var(--ease); }
.cl-pick { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 4px 8px; border: 1px solid #e3dbe5; border-radius: 8px; background: #fff; color: #6c6272; font-size: 10px; font-weight: 600; }
.cl-pick svg { width: 11px; height: 11px; }
.cl-tw { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.cl-tw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cl-table th { text-align: left; font-weight: 600; font-size: 9.6px; color: #716877; padding: 6px 7px; border-bottom: 1px solid #f0ebf1; white-space: nowrap; }
.cl-table td { padding: 4px 7px; border-bottom: 1px solid #f5f1f6; vertical-align: middle; white-space: nowrap; transition: background .3s; }
.cl-table .c { text-align: center; }
.cl-table .num { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-table tr.is-sel td { background: #fdf3f9; }
.cl-table .cl-ck { width: 14px; padding-right: 0; }
.cl-check { display: block; width: 12px; height: 12px; border: 1.5px solid #cfc5d3; border-radius: 3.5px; background: #fff; }
.cl-check.off { opacity: .4; background: #f7f5f8; }
.cl-cell { display: flex; align-items: center; gap: 8px; }
.cl-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font: 800 9.5px var(--ui); }
.cl-name { font-size: 11.6px; font-weight: 600; line-height: 1.15; }
.cl-fav { margin-top: 1px; font-size: 9.6px; color: #716877; }
.cl-acts { display: flex; gap: 4px; }
.cl-acts span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 1px solid #ece7ee; background: #fff; color: #716877; }
.cl-acts span svg { width: 11px; height: 11px; }
.cl-acts span.off { opacity: .4; background: #f7f5f8; }
.cl-vis { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-uv { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-g, .cl-rc, .cl-rb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 104px; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; font-size: 9.8px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.cl-g { background: #fff; border-color: #dadce0; }
.cl-g.r5 { background: #d3f1e2; border-color: #8fd6b3; }
.cl-g.r4 { background: #e9f7f1; border-color: #bfe6d3; }
.cl-g-c { display: inline-flex; color: #5f6368; }
.cl-g-c svg { width: 11px; height: 11px; }
.g-stars { display: inline-flex; gap: 1px; line-height: 0; }
.cl-body .g-stars svg { width: 10.5px; height: 10.5px; stroke: none; }
.g-stars svg.on { fill: #fbbc04; }
.g-stars svg.off { fill: rgba(60, 64, 67, .18); }
.cl-g-sk { position: relative; overflow: hidden; background: #f3f1f5; border-color: #e7e2ea; }
.cl-g-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .85) 50%, transparent 80%); transform: translateX(-100%); animation: clBarre 1.4s ease-in-out infinite; }
.cl-g-sk .g-stars svg { animation: clEstrella 1.6s ease-in-out infinite; }
.cl-g-sk .g-stars svg:nth-child(2) { animation-delay: .12s; }
.cl-g-sk .g-stars svg:nth-child(3) { animation-delay: .24s; }
.cl-g-sk .g-stars svg:nth-child(4) { animation-delay: .36s; }
.cl-g-sk .g-stars svg:nth-child(5) { animation-delay: .48s; }
.cl-rc.det { color: #d23b3b; background: #fdeeee; border-color: #f5d0d0; }
.cl-rc.sent { color: #5a6472; background: #f2f4f7; border-color: #dfe4ea; }
.cl-rc svg { width: 11px; height: 11px; }
.cl-rc.sent svg { color: #8a94a3; }
.cl-rc.sent.seen { color: #1f7a4d; background: #e9f7f1; border-color: #cdeee0; }
.cl-rc.sent.seen svg { color: #1f9d6b; }
.cl-rc.is-flash { animation: clChip 1.3s var(--ease); }
.cl-rb { color: #8a6100; background: #fdf6e3; border-color: #f0d48a; transition: transform .18s, box-shadow .18s, background .18s; }
.cl-rb svg { width: 11px; height: 11px; color: #f5b301; }
.cl-rb.is-press { transform: scale(.93); background: #fcf0d2; box-shadow: 0 0 0 4px rgba(245, 179, 1, .25); }
.cl-none { color: #716877; }
.cl-score { display: flex; flex-direction: column; gap: 2px; }
.cl-stars { position: relative; width: max-content; font-size: 11.5px; line-height: 1; letter-spacing: 1.5px; color: #e3dde6; white-space: nowrap; }
.cl-stars .fg { position: absolute; left: 0; top: 0; overflow: hidden; color: #f5a623; }
.cl-score-l { font-size: 9.6px; font-weight: 600; color: #716877; }
.cl-score-l.inact { color: #d98a00; }
.cl-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid #f0ebf1; font-size: 10px; color: #716877; }
.cl-foot b { color: #1d171f; font-variant-numeric: tabular-nums; }
.cl-pg { display: inline-flex; align-items: center; gap: 6px; }
.cl-pp { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid #e3dbe5; border-radius: 6px; color: #1d171f; font-weight: 600; }
.cl-pp svg { width: 10px; height: 10px; }
.cl-pg-n { margin: 0 4px 0 6px; font-variant-numeric: tabular-nums; }
.cl-pg-b { width: 22px; height: 22px; border: 1px solid #e3dbe5; border-radius: 6px; display: grid; place-items: center; color: #1d171f; }
.cl-pg-b.off { opacity: .4; }
.cl-pg-b svg { width: 11px; height: 11px; }
/* Caja: como `CajaPage.tsx`. Con el ojito cerrado la lista ocupa todo el ancho;
   con el ojito abierto entra la columna de totales desde la derecha. */
.cx-eye { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 4px 10px; border: 1px solid #ece7ee; border-radius: 999px; background: #f5f3f5; color: #4a4150; font: 600 10.5px var(--ui); cursor: pointer; }
.cx-eye svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.cx-eye:hover { color: #ad0c63; }
.cx-eye.is-open { background: #fce4f1; border-color: #f6c5df; color: #ad0c63; }
.cx-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; overflow: hidden; }
.cx-body svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cx-rib { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #fff; border: 1px solid #ece7ee; border-radius: 10px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 8px 24px rgba(20, 10, 25, .04); font-size: 10.6px; }
.cx-rib svg { width: 12px; height: 12px; }
.cx-rib .t { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.cx-rib .t svg { color: #e11383; }
.cx-rib .q { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cx-rib .q .k { font-size: 8.6px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #716877; }
.cx-rib .q.blue .k { color: #3b6fd2; }
.cx-rib .q b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-rib .q small { font-size: 9.6px; font-weight: 600; color: #716877; }
.cx-rib .sep { color: #d9d1dc; }
.cx-rib .conv { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #f5f3f5; font-size: 9.6px; font-weight: 600; color: #4a4150; white-space: nowrap; }
.cx-rib .sync { margin-left: auto; font-size: 9.2px; color: #716877; white-space: nowrap; }
.cx-main { flex: 1; min-height: 0; display: flex; gap: 10px; }
/* Con la columna de totales la lista se aprieta para que entren todas las columnas. */
.cx-main.con-aside .t-table { font-size: 10.8px; }
.cx-main.con-aside .t-table th, .cx-main.con-aside .t-table td { padding-left: 5px; padding-right: 5px; }
.cx-main.con-aside .t-table .t-chip { font-size: 8.4px; padding: 1px 5px; }
.cx-main.con-aside .t-foot .t-chip { font-size: 9.4px; padding: 3px 8px; }
.cx-lista { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cx-tw { flex: 1; min-height: 0; overflow: hidden; }
.cx-lista .t-float { right: 12px; bottom: 9px; }
.t-table tr.cx-nowl td { padding: 3px 8px; border-bottom: 0; }
.cx-nowl div { display: flex; align-items: center; gap: 8px; }
.cx-nowl span { padding: 2px 8px; border-radius: 999px; background: #e11383; color: #fff; font-size: 8.6px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-nowl i { position: relative; flex: 1; border-top: 2px dashed #e11383; opacity: .6; }
.cx-nowl i::before { content: ""; position: absolute; left: -1px; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: #e11383; }
.cx-aside { width: 246px; flex: none; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-aside.is-reveal > * { animation: revealIn .55s var(--ease) both; }
.cx-aside.is-reveal > :nth-child(2) { animation-delay: .07s; }
.cx-aside.is-reveal > :nth-child(3) { animation-delay: .14s; }
.cx-aside.is-reveal > :nth-child(4) { animation-delay: .21s; }
.cx-neto { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border: 1px solid #ece7ee; border-radius: 13px; background: #f4f2f5; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 8px 24px rgba(20, 10, 25, .04); }
.cx-neto.pos { background: linear-gradient(135deg, #eafaf2, #dff5e9); border-color: #bfe9d6; }
.cx-neto .lab { font-size: 8.4px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #716877; }
.cx-neto .val { margin-top: 3px; font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #1f9d6b; font-variant-numeric: tabular-nums; }
.cx-neto .val small { margin-right: 2px; font-size: .42em; font-weight: 700; vertical-align: .72em; opacity: .7; letter-spacing: 0; }
.cx-neto .sub { margin-top: 5px; font-size: 9.6px; line-height: 1.6; color: #716877; }
.cx-neto .neto { display: inline-flex; align-items: center; gap: 4px; margin-left: 3px; padding: 1px 7px; border: 1px solid rgba(31, 157, 107, .18); border-radius: 999px; background: rgba(31, 157, 107, .1); color: #1f9d6b; font-size: 9.6px; white-space: nowrap; }
.cx-neto .neto span { font-size: 7.6px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .72; }
.cx-neto .proj { font-size: 9.2px; color: #6c6272; }
.cx-neto .ic { align-self: flex-end; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #e4f6ee; color: #1f9d6b; }
.cx-neto .ic svg { width: 18px; height: 18px; }
.cx-neto .canc { position: absolute; top: 8px; right: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid #ece7ee; border-radius: 999px; background: #fff; color: #8f5f7a; font-size: 8.4px; font-weight: 700; white-space: nowrap; }
.cx-neto .canc svg { width: 10px; height: 10px; }
.cx-neto .canc small { font-size: 8.4px; font-weight: 600; color: #716877; }
.cx-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cx-mini > div { min-width: 0; padding: 6px 9px; border: 1px solid #ece7ee; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(20, 10, 25, .05); }
.cx-mini span { display: flex; align-items: center; gap: 4px; font-size: 8.8px; font-weight: 600; color: #716877; }
.cx-mini span svg { width: 10px; height: 10px; }
.cx-mini b { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-mini b.pos { color: #1f9d6b; }
.cx-mini b.neg { color: #d23b3b; }
.cx-arq { padding: 9px 11px 10px; }
.cx-arq .h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; }
.cx-arq h4, .cx-mix h4 { margin: 0; font-size: 11.6px; font-weight: 700; }
.cx-arq .h small { font-size: 9px; color: #716877; }
.cx-arq .r { display: flex; align-items: center; gap: 7px; padding: 4px 2px; }
.cx-arq .r + .r { border-top: 1px solid #f0ecf3; }
.cx-arq .ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.cx-arq .ic svg { width: 11px; height: 11px; }
.cx-arq .ic.neutral { background: #f1edf6; color: #6d6478; }
.cx-arq .ic.pos { background: rgba(31, 168, 109, .12); color: #1f9d6b; }
.cx-arq .ic.neg { background: rgba(210, 59, 59, .1); color: #d23b3b; }
.cx-arq .l { flex: 1; min-width: 0; font-size: 10.4px; color: #564f5b; }
.cx-arq .l small { display: block; font-size: 8.6px; color: #716877; }
.cx-arq .r b { font-size: 10.8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-arq b.pos { color: #1f9d6b; }
.cx-arq b.neg { color: #d23b3b; }
.cx-arq .exp { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; padding: 7px 10px; border: 1px solid #ece7ee; border-radius: 10px; background: linear-gradient(135deg, #faf7fb, #f3edf8); font-size: 10px; font-weight: 600; color: #564f5b; }
.cx-arq .exp b { font-size: 13px; font-weight: 800; color: #1d171f; font-variant-numeric: tabular-nums; }
.cx-arq .cnt { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 10px; font-weight: 600; color: #564f5b; }
.cx-arq .cnt .in { min-width: 92px; padding: 4px 8px; border: 1px solid #e3dbe5; border-radius: 8px; background: #fff; text-align: right; font-size: 11px; font-weight: 700; color: #b3a9b8; }
.cx-arq .cnt .in small { float: left; font-size: 11px; color: #716877; }
.cx-mix { padding: 9px 11px 10px; }
.cx-mix h4 { margin-bottom: 6px; }
.cx-mix .bar { display: flex; gap: 2px; height: 16px; border-radius: 6px; overflow: hidden; background: #f1edf2; }
.cx-mix .bar span { display: grid; place-items: center; height: 100%; font-size: 8px; font-weight: 800; letter-spacing: .04em; color: rgba(255, 255, 255, .92); }
.cx-mix .ley { display: grid; gap: 3px; margin-top: 7px; font-size: 9.4px; color: #6c6272; }
.cx-mix .ley span { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cx-mix .ley i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.cx-mix .ley b { margin-left: auto; color: #1d171f; font-variant-numeric: tabular-nums; }
/* Estadística (Resumen): como `ResumenTab.tsx`, a la escala de la terminal. */
.nm-tabs { align-items: center; }
.nm-acc { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; }
.nm-acc svg, .nm-body svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.t-tabs .nm-per, .t-tabs .nm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #e3dbe5; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 600; color: #1d171f; }
.nm-per svg, .nm-btn svg { width: 11px; height: 11px; }
.t-tabs .nm-btn { color: #4a4150; }
.nm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 9px 14px 10px; overflow: hidden; }
.nm-hero, .nm-tile, .nm-card { background: #fff; border: 1px solid #ece7ee; border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 8px 24px rgba(20, 10, 25, .04); min-width: 0; }
.nm-hero { flex: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 12px 16px; border-radius: 14px; }
.nm-hero .lbl { font-size: 10.4px; font-weight: 650; color: #6c6272; }
.nm-hero .num { display: flex; align-items: center; gap: 9px; margin: 2px 0 5px; }
.nm-hero .num b { font-size: 31px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nm-hero .sub { margin: 0; font-size: 10.6px; line-height: 1.45; color: #6c6272; }
.nm-hero .sub b { color: #1d171f; }
.nm-hero .comp { margin: 4px 0 0; font-size: 9.6px; color: #716877; }
.nm-delta { display: inline-flex; align-items: center; padding: 2px 7px 2px 5px; border-radius: 999px; background: #e4f6ee; color: #13704c; font-size: 9.6px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nm-medios { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding-left: 18px; border-left: 1px solid #ece7ee; }
.nm-mezcla { display: flex; gap: 2px; height: 9px; border-radius: 999px; overflow: hidden; background: #f1edf2; }
.nm-mezcla i { display: block; height: 100%; }
.nm-medios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nm-medios li { display: grid; grid-template-columns: 8px 1fr auto 76px 30px; align-items: center; gap: 8px; font-size: 10.6px; }
.nm-medios li > i { width: 8px; height: 8px; border-radius: 2.5px; }
.nm-medios .n { font-weight: 600; }
.nm-medios .c { font-size: 9.4px; color: #716877; }
.nm-medios b { text-align: right; font-variant-numeric: tabular-nums; }
.nm-medios em { font-style: normal; text-align: right; font-size: 9.8px; color: #716877; font-variant-numeric: tabular-nums; }
.nm-tiles { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nm-tile { padding: 8px 11px 9px; }
.nm-tile .t { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 650; color: #6c6272; }
.nm-tile .t .nm-delta { margin-left: auto; }
.nm-tile .ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fdf0f7; color: #b80e6a; }
.nm-tile .ic svg { width: 11px; height: 11px; }
.nm-tile b { display: block; margin-top: 5px; font-size: 18.5px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nm-tile small { display: block; margin-top: 2px; font-size: 9.2px; color: #716877; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-card { padding: 9px 13px 10px; }
.nm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.nm-head h4 { margin: 0; font-size: 11.6px; font-weight: 750; }
.nm-head p { margin: 1px 0 0; font-size: 9.6px; color: #716877; }
.nm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #f6f3f7; color: #6c6272; font-size: 9.6px; font-weight: 650; white-space: nowrap; }
.nm-chip svg { width: 11px; height: 11px; color: #d98a00; }
.nm-evo { flex: none; }
.nm-chart { position: relative; }
.nm-ejes { position: relative; height: 74px; margin-left: 46px; }
.nm-ejes .tk { position: absolute; left: 0; right: 0; border-top: 1px dashed #ece7ee; }
.nm-ejes .tk span { position: absolute; right: calc(100% + 6px); top: -6px; font-size: 8.6px; color: #716877; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nm-ejes .prom { position: absolute; left: 0; right: 0; z-index: 2; border-top: 1.5px solid rgba(29, 23, 31, .35); pointer-events: none; }
.nm-ejes .prom span { position: absolute; right: 0; top: -14px; padding: 0 3px; border-radius: 4px; background: rgba(255, 255, 255, .85); font-size: 8.6px; font-weight: 650; color: #6c6272; }
.nm-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.nm-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.nm-col > span { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.nm-col > span i { display: block; min-height: 1px; }
.nm-col.on > span { box-shadow: 0 0 0 1.5px #1d171f; }
.nm-col.cerrado > span { height: 6px; border-radius: 3px; background: repeating-linear-gradient(135deg, #ece7ee 0 3px, #f7f4f8 3px 6px); }
.nm-x { display: flex; gap: 3px; margin: 4px 0 0 46px; }
.nm-x span { flex: 1 1 0; text-align: center; font-size: 8.4px; color: #716877; }
.nm-head-acc { display: flex; align-items: center; gap: 12px; }
.nm-ley { display: flex; gap: 10px; font-size: 9.4px; color: #6c6272; }
.nm-ley span { display: inline-flex; align-items: center; gap: 4px; }
.nm-ley i { width: 7px; height: 7px; border-radius: 2px; }
.nm-grid2 { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nm-grid2 .nm-card { position: relative; overflow: hidden; }
.nm-grid2 .nm-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.nm-lbar { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.nm-lbar .top { display: flex; justify-content: space-between; gap: 8px; font-size: 10.6px; }
.nm-lbar .top span { font-weight: 600; }
.nm-lbar .top b { font-variant-numeric: tabular-nums; }
.nm-lbar .tr { height: 4px; margin-top: 3px; border-radius: 999px; background: #f1edf2; }
.nm-lbar .tr i { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, #e11383, #b8106d); }
.nm-lbar .sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 9.2px; color: #716877; }
.nm-lbar .sub em { font-style: normal; font-variant-numeric: tabular-nums; }
/* Reseñas: la bandeja de la app y la ficha de Google (Business Profile). */
.rg-barra { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: #f2eef4; }
.rg-barra i { display: block; height: 100%; }
.rg-barra i + i { box-shadow: inset 1.5px 0 0 #fff; }
.rg-panel, .rg-ficha { display: flex; flex-direction: column; min-height: 0; }
.rg-panel { flex: 1; overflow: hidden; }
.rg-panel svg, .rg-ficha svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f0ebf1; }
.rg-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.rg-head .t-muted { font-size: 10px; max-width: 34ch; }
.rg-head-acc { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rg-panel .t-b { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 5px 9px; }
.rg-lista { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.rg-lista::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.rg-item { padding: 9px 14px 10px 12px; border-top: 1px solid #f0ebf1; border-left: 3px solid transparent; }
.rg-item:first-child { border-top: 0; }
.rg-item.ok { border-left-color: #1f9d6b; }
.rg-item.sug { border-left-color: #e08a1e; }
.rg-cab { display: flex; align-items: center; gap: 8px; font-size: 11.6px; }
.rg-cab .t-muted { font-size: 10px; }
.rg-star { min-width: 30px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 10px; font-weight: 700; }
.rg-star.alta { background: #e4f6ee; color: #137a52; }
.rg-star.tibia { background: #fbf0d9; color: #8a5a00; }
.rg-star.baja { background: #fdeaea; color: #d23b3b; }
.rg-txt { margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: #2d2530; max-width: 72ch; }
.rg-txt.vacio { display: flex; align-items: center; gap: 5px; color: #716877; font-style: italic; }
.rg-atrib { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10px; color: #b80e6a; }
.rg-dec { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.rg-quien { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e4f6ee; color: #137a52; font-size: 10.4px; font-weight: 650; }
.rg-quien em { font-style: normal; font-weight: 500; opacity: .75; }
.rg-cands { display: inline-flex; align-items: center; gap: 5px; }
.rg-cands .l { font-size: 10px; color: #8a5a00; font-weight: 600; }
.rg-cand { padding: 3px 9px; border-radius: 999px; border: 1px solid #f0d48a; background: #fdf6e3; color: #8a6100; font-size: 10px; font-weight: 700; }
.rg-acc { display: inline-flex; gap: 6px; }
.rg-ficha { padding: 12px 14px; gap: 10px; }
.rg-hero { display: flex; align-items: center; gap: 10px; }
.rg-hero .v { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rg-hero small { display: block; margin-top: 2px; font-size: 10px; color: #716877; }
.rg-stars { color: #f2b134; font-size: 14px; letter-spacing: 1.5px; line-height: 1; }
.rg-ver { margin-left: auto; align-self: flex-start; font-size: 10px; font-weight: 700; color: #b80e6a; }
.rg-dist { display: grid; gap: 5px; }
.rg-dist .r { display: grid; grid-template-columns: 22px 1fr 30px 30px; align-items: center; gap: 7px; font-size: 10px; }
.rg-dist .tr { height: 7px; border-radius: 999px; background: #f2eef4; overflow: hidden; }
.rg-dist .tr i { display: block; height: 100%; border-radius: 999px; }
.rg-dist .n { text-align: right; font-variant-numeric: tabular-nums; }
.rg-dist .p { text-align: right; color: #716877; font-variant-numeric: tabular-nums; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-chips span { padding: 3px 8px; border-radius: 999px; border: 1px solid #ece7ee; background: #faf8fb; color: #6c6272; font-size: 9.6px; }
.rg-chips span b { color: #1d171f; font-weight: 800; }
.rg-chips .good { background: #e9f7f1; border-color: #cdeee0; color: #1f7a4d; }
.rg-chips .good b { color: #137a52; }
.rg-chips .bad { background: #fdeeee; border-color: #f5d0d0; color: #a82f2f; }
.rg-chips .bad b { color: #a82f2f; }
.rg-src { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid #f0ebf1; font-size: 9.6px; font-weight: 600; color: #716877; }
.rg-src i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); }
.rg-inv { padding: 11px 14px; display: grid; gap: 8px; }
.rg-inv svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rg-inv .h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #6b3fc4; }
.rg-inv .k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rg-inv .k span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 10px; background: #faf8fb; border: 1px solid #f0ebf1; font-size: 9.4px; color: #716877; }
.rg-inv .k b { font-size: 15px; font-weight: 800; color: #1d171f; font-variant-numeric: tabular-nums; }
.rg-inv p { margin: 0; font-size: 9.6px; line-height: 1.45; color: #716877; }
.cl-rep[data-mod] { cursor: pointer; transition: border-color .15s; }
.cl-rep[data-mod]:hover { border-color: #e11383; }
/* La invitación: el modal de la app, con el mail a la derecha tal como sale. */
.cl-inv { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font-family: var(--ui); color: #1d171f; }
.cl-inv-bg { position: absolute; inset: 0; background: rgba(29, 23, 31, .34); backdrop-filter: blur(1.5px); animation: fadeIn .25s ease both; }
.cl-inv-card { position: relative; width: 640px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(20, 10, 25, .45); animation: clInvIn .45s var(--ease) both; }
.cl-inv.is-out .cl-inv-bg { animation: fadeOut .3s ease both; }
.cl-inv.is-out .cl-inv-card { animation: clInvOut .3s var(--ease) both; }
.cl-inv-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0ebf1; }
.cl-inv-head b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.cl-inv-head b svg { width: 15px; height: 15px; color: #e11383; }
.cl-inv-head .x { display: grid; color: #716877; }
.cl-inv-head .x svg { width: 14px; height: 14px; }
.cl-inv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 252px; }
.cl-inv-meta { padding: 12px 16px; display: grid; gap: 8px; align-content: start; border-right: 1px solid #f0ebf1; }
.cl-inv-meta .r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 10.8px; }
.cl-inv-meta .k { font-size: 9.6px; font-weight: 600; color: #716877; }
.cl-inv-meta .mono { font: 600 9.6px ui-monospace, SFMono-Regular, Menlo, monospace; color: #6c6272; }
.cl-inv-mom { display: grid; gap: 4px; }
.cl-segc { display: inline-flex; width: max-content; padding: 2px; border-radius: 8px; background: #f5f3f5; border: 1px solid #ece7ee; }
.cl-segc span { padding: 3px 8px; border-radius: 6px; font-size: 9.6px; font-weight: 600; color: #716877; }
.cl-segc span.on { background: #fff; color: #1d171f; box-shadow: 0 1px 2px rgba(20, 10, 25, .14); }
.cl-inv-mom small { font-size: 9px; color: #716877; }
.cl-inv-hist { margin-top: 2px; padding-top: 8px; border-top: 1px dashed #ece7ee; }
.cl-inv-hist .k { display: block; margin-bottom: 5px; }
.cl-inv-h { display: flex; align-items: center; gap: 6px; font-size: 10.4px; color: #716877; }
.cl-inv-h svg { width: 12px; height: 12px; }
.cl-inv-h b { font-weight: 600; color: #6c6272; }
.cl-inv-h.ok { color: #1f9d6b; animation: fadeIn .35s ease both; }
.cl-inv-h.ok b { color: #1f7a4d; }
.cl-inv-mail { padding: 12px; display: grid; place-items: center; background: #f6f1f4; }
.cl-inv-mail .m { width: 100%; padding: 14px 12px 12px; text-align: center; background: #fff; border: 1px solid #ece4ea; border-radius: 12px; }
.cl-inv-mail .brand { margin-bottom: 8px; font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }
.cl-inv-mail .hola { margin: 0 0 3px; font-size: 8.6px; line-height: 1.45; color: #716877; }
.cl-inv-mail .tit { margin: 0 0 6px; font-family: var(--serif); font-size: 15px; line-height: 1.2; }
.cl-inv-mail .stars { margin-bottom: 6px; color: #f5b301; font-size: 15px; line-height: 1; letter-spacing: 3px; }
.cl-inv-mail .mot { margin: 0 0 9px; font-size: 8.4px; line-height: 1.45; color: #716877; }
.cl-inv-mail .cta { display: inline-block; padding: 6px 16px; border-radius: 999px; background: #e11383; color: #fff; font-size: 9.4px; font-weight: 600; }
.cl-inv-mail .pie { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #f0ebf1; font-size: 7.8px; line-height: 1.45; color: #716877; }
.cl-inv-acts { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid #f0ebf1; }
.cl-inv-acts .t-b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 10.6px; transition: transform .15s, background .25s, border-color .25s; }
.cl-inv-acts .t-b svg { width: 12px; height: 12px; }
.cl-inv-acts .t-b.pri.is-press { transform: scale(.95); filter: brightness(.92); }
.cl-inv-acts .t-b.pri.is-ok { background: #1f9d6b; border-color: #1f9d6b; }
.cl-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: clSpin .7s linear infinite; }
.t-toast .ic.ic-svg svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes clBar { from { transform: scaleX(0); } }
@keyframes clBarre { to { transform: translateX(100%); } }
@keyframes clEstrella { 0%, 60%, 100% { fill: rgba(60, 64, 67, .18); } 30% { fill: #fbbc04; } }
@keyframes clChip { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(31, 157, 107, .45); } 45% { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(31, 157, 107, 0); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(31, 157, 107, 0); } }
@keyframes clCuenta { 0%, 100% { transform: none; } 35% { transform: scale(1.4); background: #fff; } }
@keyframes clInvIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes clInvOut { to { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes clSpin { to { transform: rotate(360deg); } }
.t-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 14px; }
.t-funnel div { background: #faf7fb; border: 1px solid #f0ebf1; border-radius: 12px; padding: 10px; }
.t-funnel b { display: block; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-funnel span { font-size: 10.5px; color: #716877; }
.t-pieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.t-piece { border-radius: 10px; overflow: hidden; border: 1px solid #ece7ee; background: #fff; font-size: 10.5px; }
.t-piece .thumb { aspect-ratio: 16/9; background: #1a1420; color: #fff; display: grid; place-items: center; text-align: center; padding: 8px; font-size: 11px; line-height: 1.2; position: relative; overflow: hidden; }
.t-piece .thumb.has-img { background-size: cover; background-position: center 25%; place-items: center start; text-align: left; }
.t-piece .thumb.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,24,.9), rgba(20,12,24,.15)); }
.t-piece .thumb span { position: relative; }
.t-piece .cap { padding: 6px 8px; display: flex; justify-content: space-between; color: #4a4150; }
.t-eq { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.t-eq i { width: 3px; background: #e11383; border-radius: 2px; animation: wave 1.1s ease-in-out infinite; }
.t-eq i:nth-child(2) { animation-delay: .2s; } .t-eq i:nth-child(3) { animation-delay: .4s; }

/* ---------- TV de la vidriera ---------- */
.tv { position: absolute; inset: 0; overflow: hidden; color: #fff; font-family: var(--sans); background: #18121b; }
.tv-off { position: absolute; inset: 0; background: #050405; display: grid; place-items: end center; }
.tv-off::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .06), transparent 55%); }
.tv-off i { width: 5px; height: 5px; border-radius: 50%; background: #c0392b; margin-bottom: 8px; }
/* La prendida de la TV (12/10). Dura ~2 s antes de que entre la música:
   1. el LED de abajo pasa de rojo a blanco y titila (la tele recibe la orden);
   2. el panel se enciende desde una línea de luz en el centro que se abre hacia arriba
      y abajo, sobreexpuesta, y se asienta en el ciruela de la marca;
   3. entra el isotipo, de desenfocado a nítido, con un halo fucsia, y la pantalla se va
      con un fundido (sin reflejo de costado: Chris lo sacó, 12/10). */
.tv-boot { position: absolute; inset: 0; background: #050405; display: grid; place-items: center; animation: fadeOut .55s 1.75s forwards; z-index: 4; overflow: hidden; }
.tv-panel { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, #3b2242 0%, #1c1220 55%, #08050a 100%); transform-origin: 50% 50%; transform: scale(.35, .004); opacity: 0; animation: tvWake .7s cubic-bezier(.2, .8, .2, 1) .12s forwards; }
.tv-boot img { position: relative; z-index: 1; width: 30px; opacity: 0; transform: scale(.84); filter: blur(6px); animation: tvLogo .9s cubic-bezier(.2, .7, .2, 1) .55s forwards; }
.tv-off.is-boot i { background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .85); animation: tvLed .32s steps(2, jump-none) 3; }
@keyframes tvWake { 0% { transform: scale(.35, .004); opacity: 0; filter: brightness(3); } 22% { transform: scale(1, .004); opacity: 1; filter: brightness(3.2); } 55% { transform: scale(1, 1.02); filter: brightness(1.5); } 100% { transform: none; opacity: 1; filter: brightness(1); } }
@keyframes tvLogo { 60% { filter: blur(0) drop-shadow(0 0 18px rgba(225, 19, 131, .7)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 10px rgba(225, 19, 131, .45)); } }
@keyframes tvLed { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .tv-panel, .tv-boot img { animation: none; opacity: 1; transform: none; filter: none; } .tv-off.is-boot i { animation: none; } }
/* Música: la playlist que suena en la TV (temas inventados) */
.tv-pl { position: absolute; inset: 0; overflow: hidden; background: #140d17; font-family: var(--ui); animation: fadeInQ .6s ease both; }
.tv-pl.is-leaving { animation: fadeOutQ .8s ease both; z-index: 4; }
.tv-boot.is-leaving, .tv-off.is-leaving { animation: fadeOutQ .5s ease both; }
.pl-amb { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(24px) saturate(1.25); opacity: .7; }
.pl-amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,10,18,.45), rgba(16,10,18,.86) 70%); }
.pl-top { position: absolute; left: 16px; right: 16px; top: 10px; display: flex; align-items: center; gap: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; color: #f6eaf9; }
.pl-top i { width: 6px; height: 6px; border-radius: 50%; background: #ff5cae; box-shadow: 0 0 0 3px rgba(255,92,174,.25); animation: livePulse 1.6s ease-in-out infinite; }
.pl-top span { margin-left: auto; color: #cbb8d4; font-weight: 500; }
.pl-in { position: absolute; left: 16px; right: 16px; top: 30px; display: flex; gap: 14px; }
.pl-cover { position: relative; flex: none; height: 128px; animation: fadeIn .8s var(--ease); }
.pl-cover img { display: block; height: 100%; width: auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); }
.pl-info { flex: 1; min-width: 0; color: #fff; }
.pl-info .k { font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff9ccb; }
.pl-info .t { font-family: var(--serif); font-size: 21px; line-height: 1.05; margin-top: 3px; }
.pl-info .s { font-size: 8.5px; color: #cdbfd6; margin-top: 3px; }
.pl-list { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 1px; }
.pl-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 6px; font-size: 8px; color: #b9a9c2; }
.pl-list li.on { background: rgba(255,255,255,.1); }
.pl-list .n { text-align: center; font-variant-numeric: tabular-nums; }
.pl-list .tt b { display: block; font-size: 9.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-list li.on .tt b { color: #ff9ccb; }
.pl-list .tt small { display: block; font-size: 8px; }
.pl-list .d { font-variant-numeric: tabular-nums; }
.pl-list .t-eq { height: 10px; gap: 2px; justify-content: center; }
.pl-list .t-eq i { width: 2px; background: #ff5cae; animation-name: waveS; }
.pl-bar { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 600; color: #cdbfd6; font-variant-numeric: tabular-nums; }
/* Lo que suena: transcurrido, barra y lo que falta (el reloj está en app.js) */
.np-track { flex: 1; min-width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; display: block; }
.np-fill { display: block; height: 100%; border-radius: 2px; background: #fff; transition: width 1s linear; }
.np-el, .np-rem { font-variant-numeric: tabular-nums; }
.pl-vol { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.pl-vol svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Teléfono: iOS ---------- */
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; font-family: var(--ui); font-size: 12px; color: #1d171f; }
/* Abrir una app desde el aviso: la app crece desde abajo y la pantalla bloqueada se va hacia adelante. */
.ph-app { z-index: 3; animation: phAbre .52s var(--r-modal) both; transform-origin: 50% 82%; }
.ph-app.is-leaving { animation: fadeOutQ .22s ease both; }
.ph-lockv { background: #120b17; color: #fff; animation: fadeInQ .4s ease both; }
/* La app se abre ENCIMA y la pantalla bloqueada se va debajo: antes quedaban las dos encimadas y borrosas (12/10). */
.ph-lockv.is-leaving { animation: phLock2 .4s ease both; z-index: 0; }
@keyframes phLock2 { to { opacity: 0; transform: scale(.96); } }
@keyframes phAbre { from { opacity: 0; transform: scale(.82) translateY(16px); border-radius: 36px; } 60% { opacity: 1; } }
@keyframes phLockOut { to { opacity: 0; transform: scale(1.08); filter: blur(3px); } }
/* Barra de estado: la hora a la izquierda de la isla; señal, wifi y batería a la derecha. */
.ios-sb { position: relative; z-index: 4; flex: none; height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 1px 21px 0 30px; font: 600 11px/1 var(--ui); letter-spacing: -.01em; color: #111; }
.ios-sb.on-dark { color: #fff; }
.sb-r { display: inline-flex; align-items: center; gap: 4px; }
.sb-sig { width: 13px; height: 8.6px; fill: currentColor; }
.sb-wifi { width: 12px; height: 9px; fill: currentColor; }
.sb-bat { position: relative; width: 19px; height: 9px; margin-left: 1px; border: 1px solid currentColor; border-radius: 3px; opacity: .95; }
.sb-bat::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 1.6px; height: 3px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5; }
.sb-bat i { position: absolute; left: 1px; top: 1px; bottom: 1px; border-radius: 1.5px; background: currentColor; }
.ios-home { position: absolute; left: 50%; bottom: 6px; width: 84px; height: 3.5px; margin-left: -42px; border-radius: 3px; background: #111; z-index: 5; }
.ios-home.on-dark { background: #fff; }
/* Pantalla bloqueada: fondo, candado, fecha, hora, avisos, linterna y cámara. */
.ph-wall { position: absolute; inset: 0; background:
  radial-gradient(80% 46% at 18% 10%, rgba(125, 60, 227, .95) 0%, rgba(125, 60, 227, 0) 70%),
  radial-gradient(70% 40% at 92% 30%, rgba(255, 92, 174, .55) 0%, rgba(255, 92, 174, 0) 70%),
  radial-gradient(90% 55% at 70% 100%, rgba(225, 19, 131, .95) 0%, rgba(225, 19, 131, 0) 65%),
  radial-gradient(60% 40% at 0% 78%, rgba(70, 30, 120, .9) 0%, rgba(70, 30, 120, 0) 70%), #150c1b; }
.ph-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .22)); }
.ph-lock { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.ios-lk { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.2; opacity: .92; margin-bottom: 5px; }
.ph-lock .d { font: 600 11.6px/1.2 var(--ui); letter-spacing: .005em; color: rgba(255, 255, 255, .9); }
.ph-lock .h { font: 600 64px/1 var(--ui); letter-spacing: -.035em; margin-top: 1px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 14px rgba(40, 0, 60, .25); }
.ph-notes { position: relative; z-index: 1; width: 100%; padding: 0 8px; margin-top: auto; margin-bottom: 64px; display: grid; gap: 6px; }
.ph-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px 9px 9px; border-radius: 15px; color: #111; background: rgba(246, 244, 248, .74); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 6px 18px -10px rgba(20, 0, 30, .45); animation: noteIn .7s var(--r-aviso) both; transform-origin: 50% 100%; }
.ph-app-ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #1ea1ff, #0a6cf0); }
.ph-app-ic svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; }
.ph-app-ic.estrella { background: linear-gradient(180deg, #ffcf3a, #f5a201); }
.ph-app-ic.estrella svg { fill: #fff; stroke: none; }
.ph-note-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ph-note-h b { font-size: 10.6px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-note-h time { flex: none; font-size: 9.4px; color: rgba(17, 17, 17, .5); }
.ph-note p { margin-top: 1px; font-size: 10.4px; line-height: 1.32; color: #1a1a1a; }
.ph-quick { position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 1; display: flex; justify-content: space-between; }
.ph-quick span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 10, 26, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph-quick svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Mail de iOS */
.ios-nav { flex: none; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 6px; color: #0a7aff; font-size: 12.4px; }
.ios-nav svg, .ios-tool svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ios-back { display: inline-flex; align-items: center; gap: 1px; }
.ios-back svg { width: 17px; height: 17px; stroke-width: 2.4; }
.ios-nav-r { display: inline-flex; gap: 14px; }
.ios-nav-r svg { width: 17px; height: 17px; }
.ios-tool { flex: none; height: 44px; display: flex; align-items: flex-start; justify-content: space-around; padding: 8px 6px 0; border-top: .5px solid rgba(0, 0, 0, .12); background: rgba(250, 250, 252, .94); color: #0a7aff; }
.ios-tool svg { width: 17px; height: 17px; }
/* Safari: la página arriba; abajo, la dirección y las herramientas */
.web { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.web-in { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .45s var(--c-salida); }
.web.is-refresh .web-in { transform: translateY(30px); }
.web-spin { position: absolute; left: 50%; top: 8px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .12); border-top-color: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s; }
.web.is-refresh .web-spin { opacity: 1; animation: spin .7s linear infinite; }
.saf { flex: none; padding: 6px 8px 14px; background: rgba(247, 246, 249, .96); border-top: .5px solid rgba(0, 0, 0, .1); }
.saf-url { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-size: 10.6px; color: #111; }
.saf-url .aa { font-size: 9.4px; font-weight: 700; letter-spacing: -.02em; }
.saf-url .dom { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-weight: 500; }
.saf-url svg { width: 12px; height: 12px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.saf-url .dom svg { width: 9px; height: 9px; stroke: #6b6b70; }
.saf-tools { display: flex; justify-content: space-between; padding: 7px 10px 0; color: #0a7aff; }
.saf-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.saf-tools svg:nth-child(2) { opacity: .35; }
.web-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #f1ecf2; }
.web-logo { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: -.01em; }
.web-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 9.6px; color: #6c6272; }
.web-nav i { font-style: normal; font-weight: 700; color: #fff; background: #1d171f; padding: 4px 8px; border-radius: 999px; }
.web-tit { padding: 10px 12px 4px; }
.web-tit small { font-size: 8.6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #e11383; }
.web-tit h4 { margin: 2px 0 2px; font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.05; }
.web-tit p { font-size: 9.6px; color: #6c6272; line-height: 1.35; }
.web-chips { display: flex; gap: 5px; padding: 6px 12px 8px; overflow: hidden; }
.web-chips span { flex: none; font-size: 9.4px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid #ece7ee; color: #6c6272; }
.web-chips span.on { background: #1d171f; border-color: #1d171f; color: #fff; }
.web-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 12px 8px; padding: 8px; border: 1px solid #f0ebf1; border-radius: 13px; background: #fff; }
.web-card img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.wc-t b { display: block; font-size: 11.6px; }
.wc-t small { display: block; font-size: 9px; color: #716877; margin-top: 1px; }
.wc-p { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wc-p em { font-style: normal; font-size: 8.6px; color: #716877; }
.wc-p s { font-size: 9px; color: #b3a9b8; }
.wc-p strong { display: inline-block; font-size: 12.6px; font-weight: 800; animation: wcIn .5s var(--r-aviso) both; }
.wc-p strong.is-leaving { position: absolute; animation: wcOut .25s var(--c-acelera) both; }
@keyframes wcIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes wcOut { to { opacity: 0; transform: translateY(-8px); } }
.wc-r { position: absolute; right: 8px; top: 9px; font-size: 9px; font-weight: 700; color: #e11383; border: 1px solid #f5c2df; border-radius: 999px; padding: 3px 8px; }
.web-card.is-fresh { border-color: #bfe8d3; box-shadow: 0 0 0 3px #e3f5ec; transition: box-shadow .4s, border-color .4s; }
.web-card.is-fresh .wc-p strong { color: #137a52; }
.web-input { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 10px 8px; padding: 6px 6px 6px 12px; border: 1px solid #ece7ee; border-radius: 999px; font-size: 10.4px; color: #a39aa8; }
.web-input i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e11383; }
.web-input svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-web .ph-head { padding: 7px 12px; }
.ph-web .ph-head .av { width: 24px; height: 24px; font-size: 9.6px; }
.ph-web .ph-body { justify-content: flex-end; padding: 10px; gap: 7px; }
.ph-mail .from { position: relative; }
.ph-mail .from > div { flex: 1; min-width: 0; color: #6c6272; }
.ph-mail .from b { color: #1d171f; }
.ph-mail .from time { align-self: flex-start; font-size: 10px; color: #716877; }
.ph-mail .nota { font-size: 10px; color: #716877; }
.ph-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 14px 10px; border-bottom: 1px solid #f0ebf1; }
.ph-head .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; background: linear-gradient(135deg, #e11383, #7d3ce3); }
.ph-head b { display: block; font-size: 12.5px; }
.ph-head small { color: #1f9d6b; font-size: 10px; font-weight: 600; }
.ph-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #faf8fb; }
.ph-body > * { flex: none; }
.ph-msg { max-width: 84%; padding: 8px 11px; border-radius: 16px; line-height: 1.4; font-size: 11.6px; animation: msgIn .45s var(--ease) both; }
.ph-msg.me { align-self: flex-end; background: #1d171f; color: #fff; border-bottom-right-radius: 5px; }
.ph-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #ece7ee; border-bottom-left-radius: 5px; }
.ph-typing { align-self: flex-start; background: #fff; border: 1px solid #ece7ee; border-radius: 16px; padding: 10px 12px; display: flex; gap: 3px; }
.ph-typing i { width: 5px; height: 5px; border-radius: 50%; background: #b9adbf; animation: dots 1s infinite; }
.ph-typing i:nth-child(2) { animation-delay: .15s; } .ph-typing i:nth-child(3) { animation-delay: .3s; }
.ph-card { align-self: flex-start; width: 84%; background: #fff; border: 1px solid #ece7ee; border-radius: 14px; overflow: hidden; animation: msgIn .45s var(--ease) both; }
.ph-card .top { padding: 9px 11px; font-size: 11px; }
.ph-card .top b { display: block; font-size: 12.5px; }
.ph-card .act { display: block; width: 100%; border: 0; border-top: 1px solid #f0ebf1; background: #fff; padding: 9px; font: 700 11.5px var(--ui); color: #e11383; }
.ph-card .act.done { color: #137a52; background: #f1faf5; }
.ph-mail { flex: 1; min-height: 0; overflow: hidden; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ph-mail .from { display: flex; gap: 9px; align-items: center; font-size: 11px; color: #6c6272; }
.ph-mail .from .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10.5px; background: #1d171f; }
.ph-mail .subj { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ph-mail .box { border: 1px solid #ece7ee; border-radius: 16px; padding: 14px; display: grid; gap: 10px; background: #fff; }
.ph-mail .box p { font-size: 11.6px; line-height: 1.45; color: #2d2530; }
.ph-mail .btns { display: grid; gap: 8px; }
.ph-mail .b { border-radius: 12px; padding: 10px; text-align: center; font-weight: 700; font-size: 12px; border: 1px solid #1d171f; }
.ph-mail .b.pri { background: #1d171f; color: #fff; }
.ph-mail .b.tap { animation: tap .6s var(--ease) both; background: #fce4f1; border-color: #e11383; color: #ad0c63; }
.ph-mail .ok { border-radius: 14px; background: #f1faf5; color: #137a52; padding: 12px; font-weight: 700; font-size: 12px; text-align: center; animation: msgIn .45s var(--ease) both; }
/* El mail de la invitación a reseñar en el teléfono de la clienta. */
.ph-rv { text-align: center; gap: 7px; }
.ph-rv .brand { font-family: var(--serif); font-size: 16px; letter-spacing: .08em; }
.ph-mail .ph-rv p { font-size: 10.6px; color: #6c6272; }
.ph-rv .tit { font-family: var(--serif); font-size: 18px; line-height: 1.2; color: #1d171f; }
.ph-rv .stars { color: #f5b301; font-size: 19px; letter-spacing: 4px; line-height: 1; }
.ph-rv .cta { justify-self: center; padding: 10px 22px; border-radius: 999px; background: #e11383; color: #fff; font-size: 12px; font-weight: 700; }
.ph-rv .cta.tap { animation: tap .6s var(--ease) both; box-shadow: 0 0 0 5px rgba(225, 19, 131, .22); }
.ph-mail .ph-rv .pie { margin-top: 2px; padding-top: 8px; border-top: 1px solid #f0ebf1; font-size: 9.4px; color: #716877; }
.ph-mail .code { display: inline-block; font-weight: 800; letter-spacing: .08em; border: 1.5px dashed #e11383; color: #ad0c63; border-radius: 8px; padding: 6px 10px; font-size: 13px; }
/* «… en números»: el mail real del cierre del mes, en chico (cierre_mensual.html_resumen) */
.ph-mail .mm-subj { font-size: 13px; line-height: 1.25; }
.mm { display: grid; gap: 9px; color: #1d171f; }
.mm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #f1edf2; }
.mm-logo { font-family: var(--serif); font-size: 17px; letter-spacing: -0.01em; line-height: 1; }
.mm-mes { text-align: right; }
.mm-mes b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.mm-mes small { display: block; font-size: 9px; color: #a39aa8; font-weight: 500; margin-top: 2px; }
.mm-kick { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #716877; font-weight: 700; }
.mm-tit { font-size: 14px; font-weight: 800; margin-top: 1px; }
.mm-kpi { background: #1d171f; color: #fff; border-radius: 12px; padding: 11px 13px; }
.mm-kpi small { display: block; font-size: 9.5px; opacity: .85; font-weight: 600; }
.mm-kpi > b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 1px; }
.mm-vs { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 9px; }
.mm-vs > span:last-child { opacity: .8; }
.mm-sub { margin-top: 5px; font-size: 9px; opacity: .8; }
.mm-chip { display: inline-block; font-size: 8.5px; font-weight: 700; line-height: 1.5; border-radius: 999px; padding: 0 6px; white-space: nowrap; color: #5d5562; background: #f1edf2; opacity: 1; }
.mm-chip.up { color: #13704c; background: #e3f4ec; }
.mm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mm-tile { border: 1px solid #ece7ee; border-radius: 10px; padding: 8px 9px; }
.mm-tile small { display: block; font-size: 8.5px; color: #716877; font-weight: 600; }
.mm-tile b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 1px 0 4px; white-space: nowrap; }
.mm-tile em { display: block; font-style: normal; font-size: 8.5px; color: #716877; margin-top: 4px; }
.mm-sec { font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; margin-top: 3px; }
.mm-sec span { color: #716877; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mm-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; margin-top: -3px; }
.mm-bar i { display: block; height: 100%; }
.mm-rows { margin-top: -4px; }
.mm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f1edf2; font-size: 10.5px; color: #5d5562; }
.mm-row > span > i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.mm-row small { display: block; font-size: 8.5px; color: #716877; margin-top: 2px; }
.mm-row > b { font-weight: 500; color: #1d171f; white-space: nowrap; }
.mm-row > b em { font-style: normal; color: #716877; }
/* ---------- Clientes (carrusel) ---------- */
.clients { padding: clamp(40px, 6vw, 72px) 0; background: var(--white); border-block: 1px solid var(--line); }
.clients-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.clients-title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.01em; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 18px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.tile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 270px; height: 132px; border-radius: 20px; text-decoration: none; color: var(--ink); }
.tile-real a { background: var(--paper); border: 1px solid var(--line); }
.tile-real img { width: 150px; height: auto; }
.tile-slot a { border: 1.5px dashed #cdb8cd; background: transparent; }
.tile-slot a:hover { border-color: var(--fuchsia); }
.slot-mark { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed #c49bb8; position: relative; }
.slot-mark::before, .slot-mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: #c49bb8; transform: translate(-50%, -50%); }
.slot-mark::before { width: 10px; height: 1.5px; } .slot-mark::after { width: 1.5px; height: 10px; }
.slot-name { font-family: var(--serif); font-size: 21px; line-height: 1; }
.tile-sub { font-size: 13px; color: var(--muted); max-width: 220px; text-align: center; line-height: 1.3; }

/* ---------- Módulos: mapa del menú y destacados animados ---------- */
.mods { padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.mods-head { max-width: 860px; }
.mods-head .lead { margin-top: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El mapa es el menú de la app desplegado: mismo ciruela que la barra lateral */
.mapa { margin-top: clamp(36px, 4.5vw, 56px); display: grid; grid-template-columns: 1.35fr .9fr 1.1fr 1.15fr; background: linear-gradient(180deg, var(--plum), #211826); color: var(--on-plum); border-radius: 26px; padding: 10px; }
.mapa-g { padding: 22px 22px 18px; }
.mapa-g + .mapa-g { border-left: 1px solid rgba(255, 255, 255, .09); }
.mapa-h { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--on-plum-2); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); letter-spacing: -0.005em; }
.mapa ul { list-style: none; margin: 0; padding: 0; }
.mapa li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); font-size: 16px; letter-spacing: -0.01em; }
.mapa li:last-child { border-bottom: 0; }
.mapa a, .mapa-n { color: #fff; text-decoration: none; }
.mapa a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--ease), color .2s; }
.mapa a:hover { color: #ff9ccb; background-size: 100% 1px; }
.mapa-chip { flex: none; font-size: 11.5px; font-weight: 600; color: #e8d9ef; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 2px 9px; }
.mapa .st-curso .mapa-n { color: var(--on-plum-2); }
.mapa :focus-visible { outline-color: var(--rose); }

/* Destacados: cada uno es un pedazo de la app, en vivo */
.dest-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.dest { grid-column: span 4; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; scroll-margin-top: 90px; }
.d-caja, .d-tv { grid-column: span 7; }
.d-term, .d-camp { grid-column: span 5; }
.d-precios { grid-column: span 7; }
.d-correo { grid-column: span 5; }
.dest.is-target { animation: destTarget 2s var(--ease) both; }
@keyframes destTarget { 0%, 40% { box-shadow: 0 0 0 3px var(--fuchsia), 0 30px 60px -30px rgba(225, 19, 131, .5); } 100% { box-shadow: 0 0 0 0 rgba(225, 19, 131, 0); } }
@media (prefers-reduced-motion: reduce) { .dest.is-target { animation: none; box-shadow: 0 0 0 3px var(--fuchsia); } }
.dest-txt { padding: 18px 22px 22px; display: grid; gap: 8px; align-content: start; }
.dest-name { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.025em; line-height: 1.25; }
.dest-p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; max-width: 60ch; }
.mas { margin-top: clamp(32px, 4vw, 48px); }
.mas-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mas-h { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.mas-ctrl { display: flex; gap: 8px; }
.mas-ctrl .tl-btn { width: 40px; height: 40px; }
.mas-ctrl svg.i-play { display: none; fill: currentColor; stroke: none; }
.mas-pause[aria-pressed="true"] .i-pause { display: none; }
.mas-pause[aria-pressed="true"] .i-play { display: block; }
.mas-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.mas-viewport.is-drag { cursor: grabbing; }
.mas-track { list-style: none; margin: 0; padding: 2px 0 10px; display: flex; gap: 14px; width: max-content; will-change: transform; }
.mas-card { flex: none; width: clamp(232px, 24vw, 272px); user-select: none; -webkit-user-select: none; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 124px; }
.mas-card b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.mas-card p { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.mas-chip { align-self: flex-start; margin-top: auto; font-size: 12px; font-weight: 600; color: var(--fuchsia-ink); background: color-mix(in srgb, var(--fuchsia) 9%, var(--white)); border-radius: 999px; padding: 2px 10px; }
.mods .fine { margin-top: 26px; }

/* El "escenario" de cada destacado: la tipografía y los colores reales de la app */
.viz { position: relative; height: 270px; overflow: hidden; background: radial-gradient(120% 100% at 0% 0%, #fbf8fb, #f1ecf2); border-bottom: 1px solid var(--line); font-family: var(--ui); font-size: 12px; line-height: 1.35; color: #1d171f; letter-spacing: -0.005em; }
.d-caja .viz, .d-term .viz, .d-precios .viz, .d-correo .viz { height: 300px; }
.d-tv .viz, .d-camp .viz { height: 290px; }
.viz b { font-weight: 700; }
.viz small { color: #716877; font-size: 10.5px; }
.vz-panel, .vz-app, .vz-cal, .vz-chat, .vz-rev, .vz-ia, .vz-camp { background: #fff; border: 1px solid #ece7ee; border-radius: 14px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 10px 26px rgba(20, 10, 25, .05); }
.viz .vz-swap { display: inline-grid; }
.viz .vz-swap > * { grid-area: 1 / 1; }
.viz .vz-swap > .b { opacity: 0; }
.is-in .vz-swap > .a { animation: swapOut .35s var(--ease) var(--sw, 2s) both; }
.is-in .vz-swap > .b { animation: swapIn .45s var(--ease) var(--sw, 2s) both; }

/* Caja */
.vz-app { position: absolute; left: 18px; top: 18px; bottom: 18px; right: 232px; overflow: hidden; }
.vz-ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f0ebf1; font-size: 13px; }
.vz-ph-r { font-size: 11px; font-weight: 600; background: #f5f3f5; border: 1px solid #ece7ee; border-radius: 8px; padding: 3px 8px; }
.vz-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #f5f1f6; }
.vz-av { width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.vz-tt { min-width: 0; }
.vz-tt b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-pay { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #4a4150; white-space: nowrap; }
.vz-pay > span { display: inline-flex; align-items: center; gap: 5px; }
.vz-pay i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.vz-pay i.p-ef { background: #1f9d6b; } .vz-pay i.p-tr { background: #7c4ddb; } .vz-pay i.p-mp { width: 14px; height: 14px; border-radius: 50%; background: #00bcff url(/img/mp-isotype.svg) center / cover no-repeat; } .vz-pay i.p-wait { background: #f59e0b; border-radius: 50%; }
.vz-num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.vz-target { --sw: 2.3s; }
.is-in .vz-target { animation: rowFlash 1.6s ease 2.1s both; }
.vz-op { position: absolute; left: 34px; bottom: 28px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #ece7ee; border-radius: 14px; padding: 10px 14px 10px 10px; box-shadow: 0 18px 36px -16px rgba(20, 10, 25, .45); opacity: 0; }
.vz-op b { display: block; font-size: 12.5px; }
.mpdot { width: 30px; height: 30px; border-radius: 50%; background: #00bcff url(/img/mp-isotype.svg) center / cover no-repeat; flex: none; }
.is-in .vz-op { animation: opInOut 2.4s var(--ease) .3s both; }
.vz-side { position: absolute; right: 18px; top: 18px; width: 198px; display: grid; gap: 10px; }
.vz-tot, .vz-fac { background: #fff; border: 1px solid #ece7ee; border-radius: 14px; padding: 12px 14px; }
.vz-tot small { display: block; }
.vz-tot b { font-size: 25px; font-weight: 800; letter-spacing: -0.035em; color: #1f9d6b; font-variant-numeric: tabular-nums; --sw: 2.6s; margin-top: 2px; }
.vz-fac { display: flex; gap: 10px; align-items: center; opacity: 0; }
.vz-fac .ic { width: 28px; height: 28px; border-radius: 8px; background: #1d171f; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.vz-fac b { display: block; font-size: 12px; }
.is-in .vz-fac { animation: popIn var(--r-aviso-d) var(--r-aviso) 3s both; }
.vz-ok { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: #e4f6ee; color: #137a52; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 10px; opacity: 0; }
.vz-ok i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; }
.is-in .vz-ok { animation: popIn var(--r-aviso-d) var(--r-aviso) 3.5s both; }

/* Terminal */
.v-term { background: radial-gradient(90% 80% at 50% 0%, #fff, #efe8f1); }
.vz-turno { position: absolute; left: 50%; top: 20px; width: min(360px, 86%); transform: translateX(-50%); background: #fff; border: 2px solid #e11383; border-radius: 18px; padding: 14px 16px 16px; box-shadow: 0 26px 50px -24px rgba(20, 10, 25, .45); overflow: hidden; opacity: 0; }
.vz-turno .k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: #e11383; }
.vz-turno .bell { width: 22px; height: 22px; border-radius: 50%; background: #e11383; display: grid; place-items: center; }
.vz-turno .bell svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.vz-turno .name { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; margin-top: 6px; }
.vz-turno .svc { font-size: 13px; color: #4a4150; }
.vz-turno .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #e11383; }
.is-in .vz-turno { animation: turnoIn var(--r-turno-d) var(--r-turno) .2s both; }
.is-in .vz-turno .bell { animation: ring 1s ease-in-out .7s 2; }
.is-in .vz-turno .bar { animation: drain 9s linear .9s both; }
.vz-voice { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: min(360px, 86%); display: flex; align-items: center; gap: 10px; background: #1d171f; color: #f3ecf6; border-radius: 14px; padding: 10px 14px; font-size: 12.5px; opacity: 0; }
.vz-voice .wave { display: flex; gap: 2px; align-items: center; height: 16px; }
.vz-voice .wave i { width: 3px; height: 4px; background: #ff5cae; border-radius: 2px; }
.is-in .vz-voice { animation: fadeUp var(--r-aviso-d) var(--r-aviso) 1.1s both; }
.is-in .vz-voice .wave i { animation: wave 1s ease-in-out 1.2s 4; }
.is-in .vz-voice .wave i:nth-child(2) { animation-delay: 1.35s; } .is-in .vz-voice .wave i:nth-child(3) { animation-delay: 1.5s; } .is-in .vz-voice .wave i:nth-child(4) { animation-delay: 1.65s; }
.vz-pin { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(360px, 86%); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; background: #fff; border: 1px solid #ece7ee; border-radius: 14px; padding: 12px 14px; }
.vz-pin .lbl { display: inline-flex; align-items: center; gap: 6px; color: #716877; font-size: 11px; }
.vz-pin .lbl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vz-pin .vz-swap { grid-column: 1; font-size: 22px; letter-spacing: -0.03em; --sw: 3.3s; }
.vz-pin .vz-swap .a { color: #b3a9b8; letter-spacing: .06em; }
.vz-pin .vz-swap .b { color: #1f9d6b; font-weight: 800; }
.vz-pin .dots { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.vz-pin .dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #cfc6d3; }
.is-in .vz-pin .dots i { animation: pinDot .2s ease 2.4s both; }
.is-in .vz-pin .dots i:nth-child(2) { animation-delay: 2.6s; } .is-in .vz-pin .dots i:nth-child(3) { animation-delay: 2.8s; } .is-in .vz-pin .dots i:nth-child(4) { animation-delay: 3s; }

/* El parlante de la terminal: arranca tachado; cada toque suena una vez */
.viz-box { position: relative; container-type: inline-size; }
.dest-voz { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; background: rgba(29, 23, 31, .78); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(20, 10, 25, .5); transition: background-color .2s, scale .2s var(--ease); }
.dest-voz svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dest-voz .i-on { display: none; }
.dest-voz:hover { scale: 1.07; }
.dest-voz.is-on { background: var(--fuchsia); }
.dest-voz.is-on .i-off { display: none; }
.dest-voz.is-on .i-on { display: block; }
.dest-voz.is-on .i-on path + path { animation: vozOnda 1s ease-in-out infinite; }
.dest-voz.is-on .i-on path + path + path { animation-delay: .25s; }
.is-speaking .vz-turno .bell { animation: ringNow .9s ease-in-out 0s 2; }
.is-speaking .vz-voice .wave i { animation: waveNow .9s ease-in-out infinite; }
.is-speaking .vz-voice .wave i:nth-child(2) { animation-delay: .15s; }
.is-speaking .vz-voice .wave i:nth-child(3) { animation-delay: .3s; }
.is-speaking .vz-voice .wave i:nth-child(4) { animation-delay: .45s; }
@container (max-width: 500px) {
  .viz.v-term { height: 340px; }
  .v-term .vz-turno { top: 60px; }
  .v-term .vz-voice { top: 192px; }
}
@keyframes vozOnda { 50% { opacity: .3; } }

/* Lista de precios: un precio que cambia y los canales que se ponen al día solos
   (como un panel multicanal: la lista es la fuente y cada canal confirma). Los
   pasos copian el guardado de la app (prices/ServiceEditModal y SyncProgress):
   la tienda, los turnos y, tercera fase, la ficha de Google. */
.vz-pr { position: absolute; inset: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.05fr); align-items: center; }
.vz-pr svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-card { position: relative; z-index: 1; background: #fff; border: 1px solid #ece7ee; border-radius: 14px; padding: 12px 12px 12px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 14px 30px -18px rgba(20, 10, 25, .3); }
.pr-top { display: flex; align-items: center; gap: 10px; }
.pr-top img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.pr-t { min-width: 0; flex: 1; }
.pr-t b { display: block; font-size: 13px; }
.pr-t small { display: block; font-size: 10px; color: #716877; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-adj { flex: none; font-size: 10px; font-weight: 700; color: #ad0c63; background: #fce4f1; border-radius: 999px; padding: 3px 9px; }
.is-in .pr-adj { animation: prPress .5s var(--ease) .6s both; }
.pr-rows { list-style: none; margin: 9px 0 10px; padding: 0; }
.pr-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #f5f1f6; font-size: 11.5px; }
.pr-rows li:last-child { border-bottom: 0; }
.pr-l { font-size: 10px; font-weight: 700; color: #6c6272; background: #f5f1f6; border-radius: 999px; padding: 2px 8px; }
.pr-rows .vz-swap { font-variant-numeric: tabular-nums; font-weight: 700; }
.pr-rows .vz-swap .a { color: #b3a9b8; font-weight: 600; }
.pr-rows .vz-swap .b { color: #137a52; }
.pr-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 9px; background: #1d171f; color: #fff; font-size: 11px; font-weight: 700; }
.pr-btn svg { width: 12px; height: 12px; }
.is-in .pr-btn { animation: prBtn .55s var(--ease) 2s both; }
.is-in .pr-btn svg { animation: prGira .9s linear 2.15s 2; }
@keyframes prBtn { 40% { transform: scale(.95); background: #e11383; } 100% { background: #e11383; } }
@keyframes prGira { to { transform: rotate(360deg); } }
/* Los hilos: de la lista a cada canal, con un pulso que viaja. */
.pr-hilos { width: 100%; height: 100%; color: #e4d8e4; overflow: visible; }
.pr-hilos path { stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.is-in .pr-hilos path { animation: prHilo 1s var(--ease) both; }
.is-in .pr-hilos .h1 { animation-delay: 2.35s; } .is-in .pr-hilos .h2 { animation-delay: 2.6s; } .is-in .pr-hilos .h3 { animation-delay: 2.85s; } .is-in .pr-hilos .h4 { animation-delay: 3.1s; } .is-in .pr-hilos .h5 { animation-delay: 3.35s; }
@keyframes prHilo { 0% { color: #e4d8e4; stroke-dasharray: 2 4; } 30% { color: #e11383; stroke-dasharray: 60 0; } 100% { color: #f0b3d4; stroke-dasharray: 60 0; } }
.pr-canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; align-self: stretch; align-content: center; }
.pr-canales li { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ece7ee; border-radius: 11px; padding: 6px 9px; box-shadow: 0 8px 18px -16px rgba(20, 10, 25, .35); }
.pr-canales .ic { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #f5f1f6; color: #6c6272; transition: background .3s, color .3s; }
.pr-canales .ic svg { width: 13px; height: 13px; }
.pr-canales .tx { min-width: 0; }
.pr-canales b { display: block; font-size: 11px; line-height: 1.2; }
.pr-canales .st { position: relative; display: flex; align-items: center; gap: 5px; height: 14px; font-size: 9.6px; color: #716877; }
.pr-canales .st i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #d9cfd8; }
.pr-canales .st em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-canales .st .w { opacity: 0; position: absolute; left: 14px; }
.pr-canales .st .ok { opacity: 0; color: #137a52; font-weight: 600; }
.pr-canales .st::before { content: "Pendiente"; position: absolute; left: 14px; }
.is-in .pr-canales li .st::before { animation: fadeOutQ .2s ease both; }
.is-in .pr-canales li .st .w { animation: prW .6s ease both; }
.is-in .pr-canales li .st .ok { animation: fadeInQ .3s ease both; }
.is-in .pr-canales li .st i { animation: prSpin .6s ease both; }
.is-in .pr-canales li .ic { animation: prIc .5s var(--ease) both; }
@keyframes prW { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } } /* antes de su turno, oculto: queda «Pendiente» solo */
@keyframes prSpin { 0% { border-color: #d9cfd8; transform: rotate(0); } 6% { border-color: #e11383 #e11383 #f5d3e6 #f5d3e6; } 85% { transform: rotate(540deg); border-color: #e11383 #e11383 #f5d3e6 #f5d3e6; background: transparent; } 100% { transform: rotate(540deg); border-color: #1f9d6b; background: #1f9d6b; box-shadow: inset 0 0 0 2px #fff; } }
@keyframes prIc { 0% { background: #f5f1f6; color: #6c6272; } 100% { background: #e3f5ec; color: #137a52; } }
.is-in .pr-canales .c1 .st::before, .is-in .pr-canales .c1 .st i, .is-in .pr-canales .c1 .st .w { animation-delay: 2.45s; } .is-in .pr-canales .c1 .st .ok, .is-in .pr-canales .c1 .ic { animation-delay: 3s; }
.is-in .pr-canales .c2 .st::before, .is-in .pr-canales .c2 .st i, .is-in .pr-canales .c2 .st .w { animation-delay: 2.7s; } .is-in .pr-canales .c2 .st .ok, .is-in .pr-canales .c2 .ic { animation-delay: 3.25s; }
.is-in .pr-canales .c3 .st::before, .is-in .pr-canales .c3 .st i, .is-in .pr-canales .c3 .st .w { animation-delay: 2.95s; } .is-in .pr-canales .c3 .st .ok, .is-in .pr-canales .c3 .ic { animation-delay: 3.5s; }
.is-in .pr-canales .c4 .st::before, .is-in .pr-canales .c4 .st i, .is-in .pr-canales .c4 .st .w { animation-delay: 3.2s; } .is-in .pr-canales .c4 .st .ok, .is-in .pr-canales .c4 .ic { animation-delay: 3.75s; }
.is-in .pr-canales .c5 .st::before, .is-in .pr-canales .c5 .st i, .is-in .pr-canales .c5 .st .w { animation-delay: 3.45s; } .is-in .pr-canales .c5 .st .ok, .is-in .pr-canales .c5 .ic { animation-delay: 4s; }
.pr-res { position: absolute; left: 0; bottom: -4px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #137a52; opacity: 0; }
.pr-res svg { width: 13px; height: 13px; }
.is-in .pr-res { animation: popIn var(--r-aviso-d) var(--r-aviso) 4.4s both; }
@container (max-width: 560px) {
  .vz-pr { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 10px; }
  .pr-hilos { display: none; }
  .pr-canales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-canales .c5 { display: none; }
  .pr-rows li:nth-child(4) { display: none; }
  .pr-res { display: none; }
}
@keyframes prPress { 40% { transform: scale(.92); background: #e11383; color: #fff; } 100% { background: #e11383; color: #fff; } }
@container (max-width: 500px) {
  .viz.v-correo { height: 340px; }
}

/* Correo: la casilla y un borrador de IA que se escribe solo */
.vz-mail { position: absolute; left: 16px; right: 16px; top: 16px; overflow: hidden; background: #fff; border: 1px solid #ece7ee; border-radius: 14px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 10px 26px rgba(20, 10, 25, .05); }
.vz-mail .ml-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #f5f1f6; opacity: 0; }
.vz-mail .ml-row:last-child { border-bottom: 0; }
.vz-mail .ml-tt b { display: block; font-size: 12px; }
.vz-mail .ml-tt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-mail .ml-h { font-size: 10.5px; color: #716877; font-variant-numeric: tabular-nums; }
.is-in .vz-mail .r1 { animation: popIn var(--r-aviso-d) var(--r-aviso) .3s both, mlSel .4s ease 1s forwards; }
.is-in .vz-mail .r2 { animation: popIn var(--r-aviso-d) var(--r-aviso) .45s both; }
.is-in .vz-mail .r3 { animation: popIn var(--r-aviso-d) var(--r-aviso) .6s both; }
.vz-draft { position: absolute; left: 30px; right: 30px; bottom: 16px; background: #fff; border: 1.5px solid #e11383; border-radius: 14px; padding: 11px 14px 12px; box-shadow: 0 24px 40px -22px rgba(225, 19, 131, .45); opacity: 0; }
.is-in .vz-draft { animation: popIn var(--r-aviso-d) var(--r-aviso) 1.4s both, iaFlash 1.5s ease-out 3s; }
.vz-draft .dr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.vz-draft .dr-tag { font-size: 10.5px; font-weight: 800; color: #ad0c63; }
.vz-draft .dr-to { font-size: 10.5px; color: #716877; }
.vz-draft .dr-l { font-size: 12px; line-height: 1.45; opacity: 0; }
.is-in .vz-draft::before { animation: iaGiro 2.4s linear infinite, iaRing 1.65s linear 1.4s both; }
.is-in .vz-draft .ia-sk { animation: iaFuera .3s ease 2.95s both; }
.is-in .vz-draft .l1 { animation: iaLlega .55s var(--ease) 3s both; }
.is-in .vz-draft .l2 { animation: iaLlega .55s var(--ease) 3.12s both; }
.vz-draft .dr-btn { margin-top: 8px; font-size: 11px; font-weight: 700; color: #fff; background: #1d171f; border-radius: 8px; padding: 5px 12px; --sw: 4.1s; }
.is-in .vz-draft .dr-btn { animation: drSent .3s ease 4.1s both; }
@keyframes mlSel { to { background: #fdf0f7; } }

@keyframes drSent { to { background: #1f9d6b; } }

/* Calendario */
.vz-cal { position: absolute; inset: 14px 14px 54px; overflow: hidden; display: flex; flex-direction: column; }
.vz-ch, .vz-grid { display: grid; grid-template-columns: 26px repeat(3, minmax(0, 1fr)); }
.vz-ch { border-bottom: 1px solid #ece7ee; }
.vz-ch span { display: flex; align-items: center; gap: 6px; padding: 9px 8px; font-size: 11px; font-weight: 700; }
.vz-ch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.vz-grid { flex: 1; position: relative; }
.vz-hours { position: relative; }
.vz-hours span { position: absolute; right: 5px; font-size: 9.5px; color: #716877; font-variant-numeric: tabular-nums; }
.vz-hours span:nth-child(1) { top: 2%; } .vz-hours span:nth-child(2) { top: 27%; } .vz-hours span:nth-child(3) { top: 52%; } .vz-hours span:nth-child(4) { top: 77%; }
.vz-grid .col { position: relative; border-left: 1px solid #f0ebf1; background: repeating-linear-gradient(180deg, transparent 0, transparent calc(25% - 1px), #f5f1f6 calc(25% - 1px), #f5f1f6 25%); }
.ev { position: absolute; left: 4px; right: 4px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); border-radius: 8px; padding: 4px 7px; font-size: 10px; color: #4a4150; overflow: hidden; }
.ev b { display: block; font-size: 10.5px; color: #1d171f; }
.slot { position: absolute; left: 4px; right: 4px; border: 1.5px dashed #d6c9da; border-radius: 8px; display: grid; place-items: center; font-size: 10px; color: #a59cab; }
.ev-move { z-index: 2; }
.is-in .ev-move { animation: evMove 2.2s var(--ease) .5s both; }
.is-in .slot { animation: fadeOutQ .3s ease 2.1s both; }
.vz-confirm { position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #1d171f; color: #fff; border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 11px; white-space: nowrap; opacity: 0; box-shadow: 0 12px 28px -12px rgba(20, 10, 25, .6); }
.vz-confirm span { background: #e11383; border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.is-in .vz-confirm { animation: fadeUpX var(--r-aviso-d) var(--r-aviso) 2.5s both; }

/* Conversaciones */
.vz-chat { position: absolute; inset: 14px; overflow: hidden; display: flex; flex-direction: column; }
.vz-chat-h { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid #f0ebf1; }
.vz-chat-h .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #e11383, #7d3ce3); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.vz-chat-h b { display: block; font-size: 12px; }
.vz-chat-h small { color: #1f9d6b; font-weight: 600; }
.vz-msgs { flex: 1; padding: 4px 12px 10px; display: flex; flex-direction: column; background: #faf8fb; }
.vz-msgs .m { max-width: 84%; margin: 0; padding: 0 10px; border-radius: 12px; font-size: 11.3px; line-height: 1.4; max-height: 0; opacity: 0; overflow: hidden; }
.vz-msgs .in { align-self: flex-end; background: #1d171f; color: #fff; border-bottom-right-radius: 4px; }
.vz-msgs .bot { align-self: flex-start; background: #fff; border: 1px solid #ece7ee; border-bottom-left-radius: 4px; }
.vz-msgs .typing { align-self: flex-start; background: #fff; border: 1px solid #ece7ee; display: flex; gap: 3px; }
.vz-msgs .typing i { width: 5px; height: 5px; border-radius: 50%; background: #b9adbf; animation: dots 1s infinite; }
.vz-msgs .typing i:nth-child(2) { animation-delay: .15s; } .vz-msgs .typing i:nth-child(3) { animation-delay: .3s; }
.vz-msgs .card { align-self: flex-start; width: 84%; background: #fff; border: 1px solid #ece7ee; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vz-msgs .card .vz-swap { font-weight: 700; color: #e11383; --sw: 4.2s; }
.vz-msgs .card .vz-swap .b { color: #137a52; }
.is-in .vz-msgs .m1 { animation: msgShow .45s var(--ease) .3s both; }
.is-in .vz-msgs .typing { animation: typingShow 1.1s var(--ease) .9s both; }
.is-in .vz-msgs .m2 { animation: msgShow .45s var(--ease) 2s both; }
.is-in .vz-msgs .m3 { animation: msgShow .45s var(--ease) 3s both; }
.is-in .vz-msgs .m4 { animation: msgShow .45s var(--ease) 3.5s both; }

/* Facturas */
.vz-rcpt { position: absolute; left: 50%; top: 12px; width: min(290px, 82%); transform: translateX(-50%); background: #fff; border: 1px solid #ece7ee; border-radius: 12px 12px 4px 4px; padding: 12px 14px 16px; box-shadow: 0 18px 40px -22px rgba(20, 10, 25, .45); opacity: 0; }
.vz-rcpt .rh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e4dbe6; margin-bottom: 4px; }
.vz-rcpt .rh .ic { width: 30px; height: 30px; border-radius: 8px; background: #1d171f; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.vz-rcpt .rh b { display: block; font-size: 13px; }
.vz-rcpt .rl { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 11px; color: #4a4150; border-bottom: 1px solid #f5f1f6; }
.vz-rcpt .rq { display: flex; align-items: center; gap: 9px; padding-top: 8px; opacity: 0; }
.vz-rcpt .rq svg { width: 34px; height: 34px; flex: none; fill: #1d171f; shape-rendering: crispEdges; }
.vz-rcpt .rq small { display: block; font-size: 9px; line-height: 1.35; color: #716877; font-variant-numeric: tabular-nums; }
.vz-rcpt .rl b { color: #1d171f; white-space: nowrap; }
.vz-rcpt .stamp { position: absolute; right: 16px; bottom: -12px; border: 2px solid #1f9d6b; color: #137a52; border-radius: 8px; padding: 4px 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em; transform: rotate(-8deg); background: rgba(255, 255, 255, .9); opacity: 0; }
.is-in .vz-rcpt { animation: rcptIn var(--r-modal-d) var(--r-modal) .2s both; }
.is-in .vz-rcpt .rq { animation: popIn var(--r-aviso-d) var(--r-aviso) 1s both; }
.is-in .vz-rcpt .stamp { animation: stampIn .45s cubic-bezier(.2, 1.4, .4, 1) 1.6s both; }
.vz-cnt { position: absolute; left: 16px; bottom: 14px; background: #fff; border: 1px solid #ece7ee; border-radius: 12px; padding: 7px 12px; display: flex; align-items: baseline; gap: 10px; }
.vz-cnt b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; --sw: 2s; }

/* Campañas */
.vz-camp { position: absolute; inset: 16px; padding: 14px 16px; display: grid; gap: 9px; align-content: start; }
.vz-camp > * { min-height: auto; }
.vz-camp .ch { display: block; padding: 0; flex: none; min-height: auto; }
.vz-camp .ch b { display: block; font-size: 14px; }
.vz-camp .ch small { display: block; margin-top: 2px; font-size: 11px; color: #6c6272; }
.vz-camp .dots { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 5px; }
.vz-camp .dots i { aspect-ratio: 1; border-radius: 50%; background: #efe9f1; }
.is-in .vz-camp .dots i { animation: dotOn .3s ease calc(.4s + var(--d)) both; }
.vz-camp .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: #4a4150; }
.vz-camp .row b { font-size: 13px; --sw: 2.2s; }
.vz-camp .coupon { --mh: .52; justify-self: start; width: 210px; opacity: 0; }
/* El cupón es el mismo ticket del mail de la demo (12/10, Chris). */
.vz-camp .coupon .mh-tk-top { padding-top: calc(14px * var(--mh)); }
.is-in .vz-camp .coupon { animation: popIn var(--r-aviso-d) var(--r-aviso) 2.4s both; }
.vz-camp .res { display: flex; gap: 8px; flex-wrap: wrap; opacity: 0; }
.vz-camp .res span { background: #e4f6ee; color: #137a52; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; }
.is-in .vz-camp .res { animation: popIn var(--r-aviso-d) var(--r-aviso) 3s both; }

/* Vidriera y música */
/* La TV parada sobre sus patas: el marco de abajo es un poco más alto para la marca. El ancho
   tiene tope para que, con la tarjeta a todo el ancho, la TV y sus patas sigan entrando. */
.vz-tv { position: absolute; left: 20px; top: 24px; width: min(58%, 416px); padding: 7px 7px 11px; background: #0d0a0e; border-radius: 10px; box-shadow: 0 18px 30px -24px rgba(40, 10, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.vz-tv .scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #140d17; color: #fff; container-type: inline-size; }
.vz-tv .vid { background: #1B1D22; opacity: 0; }
.vz-tv .zoc { position: absolute; inset: 0; z-index: 3; }
.dest:not(.is-in) .vz-tv .zoc * { animation: none !important; opacity: 0; }
.is-in .vz-tv .zoc * { animation-delay: 2.7s; }
.vz-tv .pl, .vz-tv .vid { position: absolute; inset: 0; }
.vz-tv .pl { display: flex; align-items: center; gap: 14px; padding: 0 18px; background: radial-gradient(80% 90% at 20% 40%, rgba(156, 42, 120, .45), transparent 70%), #140d17; }
.vz-tv .pl img { height: 64%; width: auto; flex: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
.vz-tv .pl-txt { min-width: 0; }
.vz-tv .pl em { display: block; font-style: normal; font-size: 10px; color: #b9a9c2; }
.vz-tv .pl .np { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 8.5px; color: #b9a9c2; }
.vz-tv .pl .np .t-eq { height: 12px; }
.vz-tv .pl small { display: block; color: #ff9ccb; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.vz-tv .pl b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.05; margin: 4px 0 5px; }
.vz-tv .pl .t-eq i { background: #ff5cae; }
/* Las patas: una en cada punta, en V invertida, de metal oscuro, con su sombrita donde apoyan. */
.vz-tv .feet { position: absolute; left: 0; right: 0; top: 100%; height: 17px; pointer-events: none; }
.vz-tv .feet::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 7px; background: radial-gradient(closest-side, rgba(40, 14, 40, .16), rgba(40, 14, 40, 0)); }
.vz-tv .feet i { position: absolute; top: 0; width: 30px; height: 17px; overflow: hidden; background: radial-gradient(closest-side, rgba(36, 12, 36, .42), rgba(36, 12, 36, 0)) 50% 100% / 100% 5px no-repeat; }
.vz-tv .feet i:first-child { left: 7%; }
.vz-tv .feet i:last-child { right: 7%; }
.vz-tv .feet i::before, .vz-tv .feet i::after { content: ""; position: absolute; left: calc(50% - 1.5px); top: -3px; width: 3px; height: 20px; border-radius: 1px 1px 1.5px 1.5px; background: linear-gradient(90deg, #17131a, #6f6976 38%, #cfcad4 55%, #3a353f 80%, #17131a); transform-origin: 50% 0; }
.vz-tv .feet i::before { transform: rotate(31deg); }
.vz-tv .feet i::after { transform: rotate(-31deg); }
/* La marca: chiquita, plateada y apenas fuera de foco, como en el marco de una TV de verdad. */
.tv-marca { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--ui); font-weight: 600; letter-spacing: .14em; line-height: 1; white-space: nowrap; color: transparent; background: linear-gradient(100deg, #77727d 0%, #e9e6ee 34%, #9b96a1 52%, #f4f1f7 70%, #7d7883 100%); -webkit-background-clip: text; background-clip: text; filter: blur(.3px); opacity: .85; pointer-events: none; user-select: none; }
.vz-tv .tv-marca { bottom: 3px; font-size: 5.5px; }
.dev-tv .tv-marca { bottom: 4px; font-size: 6.5px; }
.is-in .vz-tv .vid { animation: fadeInQ .7s var(--ease) 1.6s both; }
.vz-sched { position: absolute; left: calc(min(58%, 416px) + 44px); right: 18px; top: 24px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-sched li { background: #fff; border: 1px solid #ece7ee; border-radius: 12px; padding: 8px 12px; display: grid; gap: 1px; font-size: 11px; color: #6c6272; border-left: 3px solid #ece7ee; }
.vz-sched b { font-size: 12px; color: #1d171f; font-variant-numeric: tabular-nums; }
.is-in .vz-sched .s1 { animation: schedOn .4s ease .2s both; }
.is-in .vz-sched .s2 { animation: schedOn .4s ease 1.6s both; }
.is-in .vz-sched .s3 { animation: schedOn .4s ease 2.7s both; }

/* Reseñas */
.vz-rev { position: absolute; inset: 14px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.vz-rev .rv { display: flex; align-items: center; gap: 9px; }
.vz-rev .g { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ece7ee; display: grid; place-items: center; font-weight: 800; color: #4285f4; font-size: 12px; }
.vz-rev .rv b { display: block; font-size: 12px; }
.vz-rev .stars { margin-left: auto; color: #f5a623; letter-spacing: 1px; font-size: 13px; }
.vz-rev .txt { font-size: 12px; color: #2d2530; margin: 0; }
.vz-rev .draft { border-radius: 10px; padding: 8px 10px; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #e11383, #7d3ce3, #dfa2aa) border-box; }
.vz-rev .draft small { color: #ad0c63; font-weight: 700; }
.vz-rev .draft p { margin: 3px 0 0; font-size: 11.5px; color: #2d2530; opacity: 0; }
.is-in .vz-rev .draft::before { animation: iaGiro 2.4s linear infinite, iaRing 1.5s linear .6s both; }
.is-in .vz-rev .draft .ia-sk { animation: iaFuera .3s ease 2.05s both; }
.is-in .vz-rev .draft p { animation: iaLlega .55s var(--ease) 2.1s both; }
.is-in .vz-rev .draft { animation: iaFlash 1.5s ease-out 2.1s; }
.vz-rev .pub { justify-self: end; font-size: 11.5px; font-weight: 700; --sw: 3.2s; }
.vz-rev .pub .a { background: #1d171f; color: #fff; border-radius: 8px; padding: 6px 12px; }
.vz-rev .pub .b { color: #137a52; padding: 6px 0; }

/* Liquidación y estadística */
.vz-bh { position: absolute; left: 16px; top: 14px; }
.vz-bh b { display: block; font-size: 13px; }
.vz-bars { position: absolute; left: 16px; right: 16px; top: 56px; display: grid; gap: 9px; }
.vz-bars .r { display: grid; grid-template-columns: 62px minmax(0, 1fr) 84px; align-items: center; gap: 8px; font-size: 11px; }
.vz-bars .r span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.vz-bars .r span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.vz-bars .bar { display: block; height: 10px; border-radius: 5px; background: var(--c); width: 0; }
.vz-bars .r b { text-align: right; font-variant-numeric: tabular-nums; }
.is-in .vz-bars .bar { animation: barGrow 1s var(--ease) .3s both; }
.is-in .vz-bars .r:nth-child(2) .bar { animation-delay: .45s; } .is-in .vz-bars .r:nth-child(3) .bar { animation-delay: .6s; } .is-in .vz-bars .r:nth-child(4) .bar { animation-delay: .75s; }
.vz-mails { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 6px; }
.vz-mails .mail { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #ece7ee; border-radius: 12px; padding: 7px 12px 7px 8px; box-shadow: 0 12px 26px -16px rgba(20, 10, 25, .5); opacity: 0; }
/* Los íconos llenan su caja: la foto del mes es estadística; el del contador, una planilla */
.vz-mails .ic { position: relative; width: 30px; height: 30px; flex: none; border-radius: 9px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.vz-mails .ic .env { position: absolute; left: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(20, 10, 25, .3); }
.vz-mails .ic .env svg { width: 10px; height: 10px; fill: none; stroke: #1d171f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vz-mails .ic > svg { display: block; width: 100%; height: 100%; }
.vz-mails .ic-stats { background: linear-gradient(140deg, #ff5cae, #e11383 55%, #b40f6a); }
.vz-mails .ic-xls { background: linear-gradient(140deg, #23a566, #107c41 60%, #0b5e31); }
.vz-mails b { display: block; font-size: 11.5px; }
.is-in .vz-mails .m1 { animation: slideInR var(--r-toast-d) var(--r-toast) 1.7s both; }
.is-in .vz-mails .m2 { animation: slideInR var(--r-toast-d) var(--r-toast) 2.1s both; }

/* Motor de IA */
.vz-ia { position: absolute; inset: 14px; padding: 10px 14px; display: grid; align-content: start; }
.vz-ia .ia-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.vz-ia .ia-h img { width: 11px; height: auto; }
.vz-ia .ia-h b { font-size: 12.5px; }
.vz-ia .ia-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #137a52; }
.vz-ia .ia-live i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; animation: livePulseG 1.6s ease-in-out infinite; }
.vz-ia .ia-know { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 0 9px; border-top: 1px solid #f0ebf1; border-bottom: 1px solid #f0ebf1; }
.vz-ia .ia-know small { margin-right: 2px; }
.vz-ia .k { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #f5f1f6; color: #6a6070; }
.is-in .vz-ia .k1 { animation: kLit 1.4s ease .4s both; }
.is-in .vz-ia .k2 { animation: kLit 1.4s ease .65s both; }
.is-in .vz-ia .k3 { animation: kLit 1.4s ease .9s both; }
.vz-ia .ia-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid #f5f1f6; opacity: 0; }
.vz-ia .ia-row:last-child { border-bottom: 0; }
.vz-ia .ia-src { font-size: 11.5px; font-weight: 700; }
.vz-ia .ia-what { grid-column: 1 / -1; color: #6a6070; font-size: 11px; }
.vz-ia .chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #f1edf2; color: #6a6070; white-space: nowrap; }
.vz-ia .chip.ok { background: #e4f6ee; color: #137a52; }
.vz-ia .chip.pink { background: #fce4f1; color: #ad0c63; }
.is-in .vz-ia .r1 { animation: popIn var(--r-aviso-d) var(--r-aviso) 1.2s both; }
.is-in .vz-ia .r2 { animation: popIn var(--r-aviso-d) var(--r-aviso) 2s both; }
.is-in .vz-ia .r3 { animation: popIn var(--r-aviso-d) var(--r-aviso) 2.8s both; }

/* ---------- El salón 360: la órbita ----------
   Seis partes del salón giran alrededor de la H. Cada una abre su tooltip;
   sin interacción, la órbita gira, se detiene y explica dos a la vez (las que
   quedan a los costados). Las posiciones salen de --rot con cos()/sin(): app.js
   sólo mueve un número. En pantallas angostas el tooltip baja como tarjeta. */
.roles { padding: clamp(72px, 9vw, 128px) 0; overflow-x: clip; }
.roles-head { max-width: 780px; margin: 0 auto; text-align: center; }
.roles-head .lead { margin: 18px auto 0; }
.orbit { --R: 180px; --rot: 0deg; --n: 6; position: relative; margin-top: clamp(24px, 3.5vw, 44px); }
.orb-stage { position: relative; height: 440px; }
.orb-ring, .orb-disc, .orb-core { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; }
.orb-ring { width: calc(var(--R) * 2); height: calc(var(--R) * 2); border: 1px dashed #d2bed2; animation: orbSpin 160s linear infinite; }
.orb-disc { width: calc(var(--R) * 1.24); height: calc(var(--R) * 1.24); border: 1px solid var(--line); background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .7) 45%, rgba(247, 242, 247, 0) 72%); }
.orb-core { width: 92px; height: 92px; display: grid; place-items: center; z-index: 1; background: radial-gradient(circle, #fff 58%, rgba(255, 255, 255, 0) 71%); }
.orb-core img { width: 34px; height: auto; }
.orb-threads { position: absolute; inset: 0; pointer-events: none; }
.orb-thread { --a: calc(var(--rot) + var(--i) * 360deg / var(--n)); position: absolute; left: 50%; top: 50%; width: var(--R); height: 1px; margin-top: -.5px; transform-origin: 0 50%; rotate: var(--a); background: linear-gradient(90deg, rgba(196, 112, 125, 0) 12%, rgba(196, 112, 125, .42) 40%); transition: background .3s; }
.orb-thread::after { content: ""; position: absolute; left: 0; top: -2px; width: 22px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--fuchsia), rgba(225, 19, 131, 0)); opacity: 0; animation: orbPulse 4.2s cubic-bezier(.45, 0, .35, 1) infinite; animation-delay: calc(var(--i) * -.7s); }
.orb-thread.is-on { height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(225, 19, 131, 0) 10%, var(--fuchsia) 55%); }
.orb-nodes { list-style: none; margin: 0; padding: 0; }
.orb-item { --a: calc(var(--rot) + var(--i) * 360deg / var(--n)); position: absolute; left: 50%; top: 50%; z-index: 2; translate: calc(-50% + cos(var(--a)) * var(--R)) calc(-50% + sin(var(--a)) * var(--R)); }
.orb-node { display: block; font: 600 14.5px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 20px -12px rgba(40, 10, 40, .4); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, scale .3s var(--ease); }
.orb-node:hover { border-color: var(--fuchsia); color: var(--fuchsia-ink); }
.orb-node.is-on { background: var(--fuchsia); border-color: var(--fuchsia); color: #fff; box-shadow: 0 14px 28px -12px rgba(225, 19, 131, .65); scale: 1.05; }
.orb-short { display: none; }
.orbit[data-labels="short"] .orb-short { display: inline; }
.orbit[data-labels="short"] .orb-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.orbit[data-labels="short"] .orb-node { font-size: 13.5px; padding: 10px 13px; }
.orb-pause { position: absolute; right: 0; bottom: 0; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: color .2s, border-color .2s; }
.orb-pause svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.orb-pause .i-play { display: none; fill: currentColor; stroke: none; }
.orb-pause[aria-pressed="true"] .i-pause { display: none; }
.orb-pause[aria-pressed="true"] .i-play { display: block; }
.orb-pause:hover { color: var(--fuchsia-ink); border-color: var(--fuchsia); }
.orbit[data-mode="wide"] .orb-pause { right: auto; left: 50%; translate: -50% 0; bottom: -50px; }
.orbit[data-mode="wide"] { margin-bottom: 50px; }
.orbit.is-paused .orb-ring, .orbit.is-paused .orb-thread::after { animation-play-state: paused; }
.orb-tips { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.orb-tip { position: absolute; left: 0; top: 0; width: 280px; translate: var(--x, 0) var(--y, 0); background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 30px 60px -30px rgba(40, 10, 40, .45), 0 2px 6px rgba(40, 10, 40, .04); opacity: 0; visibility: hidden; scale: .96; transform-origin: 0 50%; transition: opacity .28s var(--ease), scale .28s var(--ease), visibility 0s linear .28s; pointer-events: auto; }
.orb-tip[data-side="l"] { transform-origin: 100% 50%; }
.orb-tip.is-open { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }
.orb-tip-name { font-family: var(--serif); font-size: 25px; line-height: 1.05; letter-spacing: -0.015em; }
.orb-tip-promise { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.orb-tip-points { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.orb-tip-points li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.42; }
.orb-tip-points li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 2px; border-radius: 2px; background: var(--fuchsia); }
.orb-tip-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--fuchsia-ink); text-decoration: none; }
.orb-tip-link:hover { text-decoration: underline; }
.orbit[data-mode="narrow"] .orb-tips { position: relative; inset: auto; display: grid; max-width: 480px; margin: 14px auto 0; }
.orbit[data-mode="narrow"] .orb-tip { position: relative; grid-area: 1 / 1; width: auto; translate: none; transform-origin: 50% 0; display: flex; flex-direction: column; align-items: flex-start; }
.orbit[data-mode="narrow"] .orb-tip-link { margin-top: auto; padding-top: 12px; }
.orbit[data-mode="narrow"] .orb-tip-points { align-self: stretch; }
html:not(.js) .orb-stage { display: none; }
html:not(.js) .orb-tips { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
html:not(.js) .orb-tip { position: static; width: auto; translate: none; opacity: 1; visibility: visible; scale: 1; }
@keyframes orbSpin { to { rotate: 360deg; } }
@keyframes orbPulse { 0% { translate: var(--R) 0; opacity: 0; } 15%, 78% { opacity: .9; } 100% { translate: 30px 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .orb-ring, .orb-thread::after { animation: none; }
  .orb-pause { display: none; }
  .orb-tip, .orb-node { transition: none; }
}

/* ---------- Criterio (fondo ciruela) ---------- */
.criterio { background: var(--plum); color: var(--on-plum); padding: clamp(72px, 9vw, 128px) 0; }
.criterio .lead { color: var(--on-plum-2); margin-top: 18px; }
.crit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); }
.crit-h { font-family: var(--serif); font-size: 26px; color: #fff; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.16); }
.crit-list { margin: 0; }
.crit-list > div { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.crit-list dt { font-weight: 600; font-size: 17.5px; color: #fff; }
.crit-list dd { margin: 6px 0 0; color: var(--on-plum-2); font-size: 16px; line-height: 1.55; }
.criterio :focus-visible { outline-color: var(--rose); }

.fine { margin-top: 22px; font-size: 13.5px; color: var(--muted); }

/* ---------- Bucles ---------- */
.bucles { padding: clamp(72px, 9vw, 128px) 0; }
.bucles-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bucles-logo { width: 190px; margin-bottom: 28px; }
.bucles-text { display: grid; gap: 16px; }
.bucles-text p { color: var(--ink-2); max-width: 58ch; }
.bucles-uses { font-weight: 600; color: var(--ink) !important; }
.bucles-photos { position: relative; padding-bottom: clamp(96px, 12vw, 170px); }
.bph { margin: 0; }
.bph-1 img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 18px; }
.bph-2 { position: absolute; left: -7%; bottom: 0; width: 40%; }
.bph-2 img { width: 100%; aspect-ratio: 880 / 832; object-fit: cover; border-radius: 18px; border: 6px solid var(--paper); box-shadow: 0 34px 60px -30px rgba(40, 10, 40, .55); }
.bph-cap { position: absolute; right: 0; bottom: clamp(40px, 6vw, 96px); width: 52%; font-size: 13.5px; color: var(--muted); }

/* ---------- Contacto ---------- */
.cta { padding: clamp(80px, 10vw, 140px) 0; text-align: center; background: var(--white); }
.cta-in { display: grid; justify-items: center; gap: 24px; }
.cta .lead { margin-inline: auto; }

/* ---------- Pie ---------- */
.foot { background: linear-gradient(180deg, var(--plum), #211826); color: var(--on-plum-2); padding: 64px 0 30px; font-size: 15px; }
.foot .brand { color: #fff; }
.foot .wm { --wm-a: #fff; --wm-b: var(--rose); }
.foot :focus-visible { outline-color: var(--rose); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.foot-brand { display: grid; gap: 10px; max-width: 36ch; }
.foot-brand .brand { margin-bottom: 6px; }
.foot-place { color: #8f7f99; font-size: 14px; }
.foot-social { display: flex; gap: 10px; margin-top: 6px; }
.foot-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #d9cbe0; border: 1px solid rgba(255, 255, 255, .16); transition: color .2s, background-color .2s, border-color .2s; }
.foot-social a:hover { color: #ff9ccb; border-color: rgba(255, 156, 203, .55); }
.foot-social svg { width: 15px; height: 15px; fill: currentColor; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: 24px 56px; }
.foot-col { display: grid; gap: 9px; align-content: start; }
.foot-h { font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.foot-col a { color: #d9cbe0; text-decoration: none; width: fit-content; transition: color .2s; }
.foot-col a:hover { color: #ff9ccb; text-decoration: underline; text-underline-offset: 3px; }
/* La hebra del pie (12/10): la misma de la línea de tiempo, de punta a punta, con el
   degradé de la marca enmascarado por dos hilos que se cruzan. Reemplaza la raya gris. */
.foot-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 24px; background: linear-gradient(90deg, #7d3ce3, #e11383 45%, #f89cb1); opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q120 2 240 12 T480 12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M0 12 Q120 20 240 12 T480 12' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E") repeat-x 0 0 / 480px 24px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q120 2 240 12 T480 12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M0 12 Q120 20 240 12 T480 12' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E") repeat-x 0 0 / 480px 24px; pointer-events: none; }
.foot-bar { position: relative; margin-top: 48px; padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: #8f7f99; font-size: 13.5px; }
.foot-note { color: #8f7f99; font-size: 14px; }
.foot-links { display: grid; gap: 8px; justify-items: end; }
.foot-links a { color: #d9cbe0; text-decoration: none; }
.foot-links a:hover { color: #ff9ccb; text-decoration: underline; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 780px; padding: 56px var(--gutter) 88px; margin: 0 auto; }
.legal h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.legal .updated { color: var(--muted); font-size: 14px; margin: 10px 0 36px; }
.legal h2 { font-family: var(--serif); font-size: 26px; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin: 6px 0; }
.legal .box { background: color-mix(in srgb, var(--fuchsia) 8%, var(--white)); border: 1px solid color-mix(in srgb, var(--fuchsia) 20%, transparent); border-radius: 16px; padding: 20px 24px; margin: 24px 0; }
.legal .box p { color: var(--ink); margin: 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 600; }
.legal td { color: var(--ink-2); }
.table-scroll { overflow-x: auto; }

/* ---------- Página para el equipo de Claude (/claude, sin enlazar) ---------- */
.cl { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.cl-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.cl-hero-side { display: grid; gap: 18px; padding-bottom: 8px; }
.cl-who { color: var(--muted); font-size: 15px; }
.cl-stats { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cl-stats > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.cl-stats dt { font-family: var(--serif); font-size: clamp(44px, 5vw, 68px); line-height: 1; color: var(--fuchsia-ink); font-variant-numeric: lining-nums; }
.cl-plus { font-family: var(--sans); font-weight: 400; font-size: .6em; vertical-align: .55em; margin-left: 2px; }
.cl-stats dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; max-width: 30ch; }
.cl-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.cl-sec:first-of-type { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.cl-body { display: grid; gap: 16px; }
.cl-body p { color: var(--ink-2); max-width: 62ch; }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cl-list li { padding: 12px 0 12px 22px; border-bottom: 1px dashed var(--line); position: relative; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.cl-list li:last-child { border-bottom: 0; }
.cl-list li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 9px; height: 2px; background: var(--fuchsia); border-radius: 2px; }
.cl-list b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .cl-hero, .cl-sec { grid-template-columns: 1fr; }
  .cl-stats { grid-template-columns: 1fr; }
}

/* ---------- Animaciones ---------- */
@keyframes rowIn { from { background: #fce4f1; } to { background: transparent; } }
@keyframes evIn { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes turnoIn { from { transform: translate(-50%, -14px) scale(.97); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes ringNow { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes drain { from { width: 100%; } to { width: 0; } }
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes waveNow { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ticker { to { transform: translateX(-100%); } }
@keyframes zocIn { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Llegada de una notificación (12/10): baja apenas, desenfocada y achicada, y se asienta
   con el resorte del aviso de la app. Las que ya estaban no se mueven (setHTML las conserva). */
/* Como en un iPhone con la pantalla bloqueada: la notificación sube desde abajo, sutil —
   un poco de desplazamiento, apenas más chica y desenfocada— y se asienta (12/10, Chris). */
@keyframes noteIn {
  0% { transform: translateY(22px) scale(.96); opacity: 0; filter: blur(4px); }
  40% { opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; filter: none; }
}
/* La pantalla bloqueada se ilumina cuando llega una (como el iPhone al recibir un aviso). */
.ph-lockv.is-wake .ph-wall { animation: phWake 1.6s ease-out both; }
@keyframes phWake { 0% { filter: brightness(.55); } 18% { filter: brightness(1.35) saturate(1.15); } 100% { filter: none; } }
/* Y el teléfono vibra apenas: dos golpes cortos. */
.dev-phone.is-buzz .iph { animation: phBuzz .42s linear; }
@keyframes phBuzz { 0%, 100% { transform: none; } 10%, 30% { transform: translateX(-1.6px) rotate(-.4deg); } 20%, 40% { transform: translateX(1.6px) rotate(.4deg); } 50% { transform: none; } 60%, 80% { transform: translateX(-1.1px); } 70%, 90% { transform: translateX(1.1px); } }
@media (prefers-reduced-motion: reduce) { .dev-phone.is-buzz .iph { animation: none; } .ph-note { animation: fadeInQ .3s ease both !important; } }
@keyframes msgIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dots { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes tap { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes swapOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes rowFlash { 0% { background: transparent; } 25% { background: #fce4f1; } 100% { background: #f3fbf7; } }
@keyframes opInOut { 0% { opacity: 0; transform: translateY(14px); } 18% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-46px) scale(.94); } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeUpX { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pinDot { to { background: #1d171f; border-color: #1d171f; } }
@keyframes evMove { 0% { transform: none; box-shadow: none; border-color: #7c4ddb; background: #f3eefc; } 18% { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 26px -12px rgba(20, 10, 25, .45); border-color: #7c4ddb; background: #f3eefc; } 75% { transform: translate(calc(100% + 8px), -3px) scale(1.04); box-shadow: 0 14px 26px -12px rgba(20, 10, 25, .45); border-color: #0e8f84; background: #e6f4f2; } 100% { transform: translateX(calc(100% + 8px)); box-shadow: none; border-color: #0e8f84; background: #e6f4f2; } }
@keyframes fadeOutQ { to { opacity: 0; } }
@keyframes fadeInQ { from { opacity: 0; } to { opacity: 1; } }
@keyframes msgShow { from { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 90px; opacity: 1; margin-top: 7px; padding-top: 7px; padding-bottom: 7px; } }
@keyframes typingShow { 0% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 15%, 85% { max-height: 30px; opacity: 1; margin-top: 7px; padding-top: 8px; padding-bottom: 8px; } 100% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes rcptIn { from { opacity: 0; transform: translate(-50%, 26px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes stampIn { from { opacity: 0; transform: rotate(-8deg) scale(1.7); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes dotOn { to { background: #e11383; } }
@keyframes schedOn { to { border-left-color: #e11383; color: #1d171f; background: #fdf3f9; } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes barGrow { to { width: var(--w); } }
@keyframes slideInR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes kLit { 25%, 70% { background: #fce4f1; color: #ad0c63; } }
@keyframes livePulseG { 0%, 100% { box-shadow: 0 0 0 2px rgba(31, 157, 107, .25); } 50% { box-shadow: 0 0 0 5px rgba(31, 157, 107, .05); } }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes waveS { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,92,174,.3); } 50% { box-shadow: 0 0 0 5px rgba(255,92,174,.08); } }

@media (prefers-reduced-motion: reduce) {
  .tl-thread-fill { transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track li[aria-hidden="true"]:nth-child(n+6) { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .viz *, .viz *::before, .viz *::after { animation-delay: 0s !important; }
  .vz-msgs .typing { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; align-items: start; }
  .mapa { grid-template-columns: 1fr 1fr; }
  .mapa-g:nth-child(3) { border-left: 0; }
  .mapa-g:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
  .dest, .d-term, .d-camp { grid-column: span 6; }
  .d-caja, .d-tv, .d-precios { grid-column: span 12; }
  .bucles-in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px var(--gutter) 18px; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(40, 10, 40, .4); }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { font-size: 17px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { left: -12px; right: auto; top: 50%; bottom: auto; width: 4px; height: 18px; margin-top: -9px; transform: scaleY(0); }
  .nav-links a[aria-current]::after { transform: scaleY(1); }
  .nav-lang-m { display: block; color: var(--muted) !important; }
  .nav.is-dark .nav-links { background: var(--plum); border-bottom-color: rgba(255, 255, 255, .08); }
  .nav.is-dark .nav-links a { border-bottom-color: rgba(255, 255, 255, .08); }
  .nav.is-dark .nav-lang-m { color: #8f7f99 !important; }
  .nav.nav-hero.is-dark.is-open { background: var(--plum); }
  .nav-menu { display: grid; }
  .nav-end .lang { display: none; }
  .nav.nav-hero.is-dark .nav-end .lang { display: inline-flex; }
  .tl-list { grid-auto-columns: 132px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .tl-track { overflow: hidden; }
  .tl-list li { scroll-snap-align: start; }
  .tl-thread { right: auto; width: calc(var(--n, 10) * 136px); }
  .relato { left: 8px; bottom: 8px; width: calc(100% - 16px); }
  .caption { padding: 6px 9px 8px; border-radius: 10px; }
  .cap-head { gap: 6px; }
  .cap-title { font-size: 12.5px; }
  .cap-time { font-size: 8.5px; padding: 1px 5px; }
  .cap-text { margin-top: 2px; font-size: 10.5px; line-height: 1.38; }
  .crit-cols { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-links { justify-items: start; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 720px) {
  .viewport { aspect-ratio: 4 / 5; border-radius: 22px; }
  .mapa { grid-template-columns: 1fr; }
  .mapa-g + .mapa-g { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
  .dest, .d-term, .d-camp, .d-caja, .d-tv, .d-precios, .d-correo { grid-column: 1 / -1; }
  .d-caja .viz { height: 350px; }
  .vz-app .vz-row:nth-child(5) { display: none; }
  .vz-app { right: 18px; bottom: 100px; }
  .vz-side { left: 18px; right: 18px; top: auto; bottom: 14px; width: auto; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .vz-side .vz-ok { display: none; }
  .vz-tot b { font-size: 20px; }
  .vz-op { left: 26px; bottom: 104px; }
  .vz-tv { width: auto; right: 20px; }
  .vz-sched { display: none; }
  .timeline { flex-direction: column; gap: 10px; align-items: stretch; }
  .tl-controls { justify-content: center; }
  .tl-controls { order: 2; }
  .wm { width: 112px; }
  .nav-end { gap: 10px; }
  .nav-end .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .orbit { --R: 104px; }
  .orb-stage { height: 270px; }
  .bucles-photos { padding-bottom: 132px; }
  .bph-2 { left: 0; width: 46%; }
  .bph-cap { width: 47%; bottom: 6px; }
  .hero-title .l-tech, .hero-title .l-serif { display: block; }
  .tile a { width: 220px; height: 116px; }
}
@media (max-width: 520px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- PIN de la caja (al cierre y con el ojito al recorrer la app) ---------- */
.t-pin { position: absolute; inset: 0; z-index: 8; }
.t-pin-bg { position: absolute; inset: 0; background: rgba(29, 23, 31, .16); }
.t-pin-card { position: absolute; right: 14px; top: 70px; width: 238px; box-sizing: border-box; background: #fff; border: 1px solid #ece7ee; border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 30px 60px -24px rgba(20, 10, 25, .45); display: grid; justify-items: center; gap: 2px; text-align: center; color: #1d171f; font-family: var(--ui); }
.t-pin-ic { width: 34px; height: 34px; border-radius: 50%; background: #fce4f1; display: grid; place-items: center; margin-bottom: 6px; transition: background-color .2s; }
.t-pin-ic svg { width: 17px; height: 17px; fill: none; stroke: #ad0c63; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-pin-card b { font-size: 14px; }
.t-pin-card small { font-size: 10.5px; color: #716877; }
.t-pin-dots { display: flex; gap: 10px; margin: 10px 0 12px; }
.t-pin-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #cfc5d3; box-sizing: border-box; }
.t-pin-dots i.on { background: #1d171f; border-color: #1d171f; }
.t-pin-dots i.last { animation: pinDot .28s cubic-bezier(.2, 1.5, .4, 1); }
.t-pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.t-pin-keys span { height: 30px; border-radius: 9px; background: #f5f3f5; display: grid; place-items: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.t-pin-keys span.nil { background: none; }
.t-pin-keys span.is-press { animation: pinKey .32s ease; }
.t-pin.is-enter .t-pin-bg { animation: fadeIn .25s ease both; }
.t-pin.is-enter .t-pin-card { animation: pinIn .35s var(--ease) both; }
.t-pin.is-ok .t-pin-ic { background: #e3f4ec; }
.t-pin.is-ok .t-pin-ic svg { stroke: #137a52; }
.t-pin.is-ok .t-pin-dots i { background: #1f9d6b; border-color: #1f9d6b; }
.t-pin.is-ok .t-pin-card { animation: pinOut .28s ease .26s both; }
.t-pin.is-ok .t-pin-bg { animation: fadeOutQ .28s ease .26s both; }
/* El arqueo aparece después del PIN */
.t-foot.is-reveal .t-chip { animation: revealIn .5s var(--ease) both; }
/* Aviso de un cobro de Mercado Pago: el isotipo, como en la caja real */
.t-toast .ic-mp { border-radius: 50%; background: #00bcff url(/img/mp-isotype.svg) center / cover no-repeat; }

/* ---------- La IA escribiendo (como en la app: clientes/responder.css) ----------
   Borde con degradado que gira y renglones que brillan; el texto llega entero,
   con un fundido. Sin máquina de escribir: letra por letra pone ansiosa a la clienta. */
@property --ia-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* el aro va en ::before: el que lo lleva tiene que ser su contenedor (la viñeta del correo ya es absoluta) */
.t-draft, .vz-rev .draft { position: relative; }
.ia-ring::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--ia-giro), #e11383, #f0a441, #6cc59a, #7c6cf0, #e11383); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.ia-ring.is-ia::before { opacity: 1; animation: iaGiro 2.4s linear infinite; }
.ia-zone { display: grid; }
.ia-zone > * { grid-area: 1 / 1; }
.ia-sk { display: grid; gap: 8px; align-content: start; }
.vz-draft .ia-sk, .vz-rev .ia-sk { gap: 6px; margin-top: 3px; }
.ia-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; background: linear-gradient(90deg, #b0106a, #e11383, #7c6cf0, #b0106a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iaTxt 2.2s linear infinite; }
.ia-h svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #e11383; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; animation: iaChispa 1.2s ease-in-out infinite; }
.ia-dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.ia-dots i { width: 4px; height: 4px; border-radius: 50%; background: #e11383; animation: iaDot 1.1s ease-in-out infinite; }
.ia-dots i:nth-child(2) { animation-delay: .15s; }
.ia-dots i:nth-child(3) { animation-delay: .3s; }
.ia-ln { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #f4eef6 25%, #fde3f1 50%, #f4eef6 75%); background-size: 200% 100%; animation: iaBrillo 1.3s ease-in-out infinite; }
.ia-ln + .ia-ln { width: 88%; animation-delay: .15s; }
.ia-ln:last-child:not(:nth-child(2)) { width: 62%; animation-delay: .3s; }
.ia-w { display: inline-block; animation: iaLlega .5s var(--ease) both; }
.is-llega { animation: iaFlash 1.6s ease-out; }

@keyframes pinIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pinOut { to { opacity: 0; transform: scale(.97); } }
@keyframes pinDot { from { transform: scale(.4); } to { transform: none; } }
@keyframes pinKey { 0% { background: #f5f3f5; } 30% { background: #fce4f1; color: #ad0c63; transform: scale(.93); } 100% { background: #f5f3f5; transform: none; } }
@keyframes revealIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes evGris { from { background: #fff; border-color: #e11383; color: #1d171f; } }
@keyframes evSeVa { to { opacity: 0; transform: scale(.94); filter: blur(3px); } }
@keyframes evLibre { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes evLate { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 19, 131, 0); } 50% { box-shadow: 0 0 0 5px rgba(225, 19, 131, .14); } }
@keyframes evPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes iaGiro { to { --ia-giro: 360deg; } }
@keyframes iaRing { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes iaFuera { to { opacity: 0; transform: translateY(-2px); } }
@keyframes iaTxt { to { background-position: -200% 0; } }
@keyframes iaBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes iaDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes iaChispa { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes iaLlega { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes iaFlash { from { box-shadow: 0 0 0 3px rgba(225, 19, 131, .32); } to { box-shadow: 0 0 0 0 rgba(225, 19, 131, 0); } }

/* ---------- Música: como la pantalla de la app (features/musica/MusicaPage.tsx) ---------- */
.m-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 290px; height: 32px; padding: 0 12px; border: 1px solid #ece7ee; border-radius: 10px; background: #faf8fa; color: #a39aa8; font-size: 11px; }
.m-search svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.m-body { gap: 14px; }
.m-body > .t-side-col { width: 272px; }
.m-body > .t-col { gap: 10px; }
.m-player { display: flex; gap: 20px; align-items: center; padding: 16px 20px 16px 16px; border-radius: 16px; color: #fff; background: radial-gradient(90% 130% at 0% 0%, rgba(225, 19, 131, .3), rgba(225, 19, 131, 0) 60%), linear-gradient(135deg, #2a1c30, #120c15); box-shadow: 0 20px 40px -24px rgba(20, 10, 25, .6); }
.m-player.is-paused { background: linear-gradient(135deg, #2a1c30, #120c15); }
.m-cover { height: 122px; width: auto; flex: none; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }
.m-info { flex: 1; min-width: 0; }
.m-k { display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff9ccb; }
.m-k .t-eq { height: 11px; }
.m-k .t-eq i { background: #ff5cae; }
.m-tv { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #f1e9f4; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 10px; }
.m-tv i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.m-t { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-top: 6px; }
.m-a { font-size: 12px; color: #cdbfd6; margin-top: 1px; }
.m-np { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 10px; font-weight: 600; color: #cdbfd6; }
.m-np .np-track { height: 4px; background: rgba(255, 255, 255, .16); }
.m-np .np-fill { background: linear-gradient(90deg, #e11383, #ff7ec2); }
.m-ctrl { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.m-b { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #f1e9f4; }
.m-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-b.solid svg path:first-child { fill: currentColor; }
.m-b.on { color: #ff7ec2; }
.m-b.on::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #ff7ec2; }
.m-play { width: 46px; height: 46px; margin: 0 4px; border-radius: 50%; display: grid; place-items: center; background: #e11383; color: #fff; box-shadow: 0 8px 22px -6px rgba(225, 19, 131, .8); }
.m-play svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.m-vol { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 10.5px; font-weight: 600; color: #f1e9f4; font-variant-numeric: tabular-nums; }
.m-vol svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.m-vol .bar { width: 64px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.m-vol .bar i { display: block; height: 100%; background: #fff; border-radius: 2px; }
.m-vol .pm { color: #b9a9c2; font-weight: 700; }
.m-sec { display: flex; align-items: baseline; gap: 10px; margin: 4px 2px -2px; }
.m-sec h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.m-sec span { font-size: 10.5px; color: #716877; }
.m-sec .r { margin-left: auto; }
.m-moms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-mom { position: relative; height: 72px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #fff; background-size: cover; background-position: center; }
.m-mom::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 12, 21, .9), rgba(18, 12, 21, .4)); }
.m-mom > * { position: relative; }
.m-mom .tx { flex: 1; min-width: 0; }
.m-mom b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mom .fr { display: inline-block; margin-top: 4px; font-size: 8.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #f1e9f4; font-variant-numeric: tabular-nums; }
.m-mom .fr.now { background: #e11383; color: #fff; }
.m-mom small { display: block; font-size: 10px; line-height: 1.3; color: #e3d7ea; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mom .go { width: 30px; height: 30px; border-radius: 50%; background: #e11383; display: grid; place-items: center; flex: none; }
.m-mom .go svg { width: 12px; height: 12px; fill: #fff; }
.m-mom .go .t-eq, .m-pl .go .t-eq { height: 12px; gap: 2px; }
.m-mom .go .t-eq i, .m-pl .go .t-eq i { width: 2px; background: #fff; }
.m-mom.on { box-shadow: inset 0 0 0 2px #e11383; }
.m-pls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.m-pl { background: #fff; border: 1px solid #ece7ee; border-radius: 12px; padding: 7px 7px 8px; min-width: 0; }
.m-pl.on { border-color: #e11383; box-shadow: 0 0 0 1px #e11383; }
.m-pl .cv { position: relative; display: block; }
.m-pl img { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.m-pl .go { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: #e11383; display: grid; place-items: center; box-shadow: 0 6px 14px -4px rgba(225, 19, 131, .7); }
.m-pl b { display: block; font-size: 11px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pl small { display: block; font-size: 9.5px; color: #716877; margin-top: 1px; }
.m-skip { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #ad0c63; padding: 3px 10px; border-radius: 999px; background: #fce4f1; }
.m-next { list-style: none; margin: 0; padding: 4px 0; }
.m-next li { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 11.5px; }
.m-next img { width: 34px; height: 34px; border-radius: 7px; flex: none; }
.m-next .tx { flex: 1; min-width: 0; }
.m-next b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-next small { display: block; color: #716877; font-size: 10px; }
.m-next .d { color: #716877; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.m-arts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; padding: 12px 10px 14px; }
.m-art { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.m-art .av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f0e6f3; }
.m-art .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-art .av span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.m-art.on .av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e11383; }
.m-art small { font-size: 9.5px; line-height: 1.15; color: #4a4150; max-width: 100%; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.m-auto .sw { position: relative; width: 28px; height: 16px; border-radius: 999px; background: #e11383; }
.m-auto .sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }

/* ---------- Campañas: el Panel de la app (features/campanas/Panel.tsx, 10/10) ---------- */
.cm-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 10px 14px; overflow: hidden; }
.cm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; }
.cm-kpi { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.cm-kpi-ic { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px; display: grid; place-items: center; background: #fce4f1; color: #e11383; }
.cm-kpi-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-kpi-t { flex: 1; min-width: 0; }
.cm-kpi-l { font-size: 10.5px; color: #716877; }
.cm-kpi-v { font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cm-kpi-s { font-size: 9.6px; color: #716877; }
.cm-kpi-graf { flex: 0 0 84px; height: 34px; display: flex; align-items: flex-end; }
.cm-curva { width: 84px; height: 32px; }
.cm-barras { width: 84px; height: 32px; display: flex; align-items: flex-end; gap: 4px; }
.cm-barras span { flex: 1; border-radius: 3px 3px 1px 1px; background: #fce4f1; transition: height .5s var(--c-salida); }
.cm-barras span.top { background: #f2a3cd; }
.cm-panel-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; flex: none; }
.cm-card { padding: 0; overflow: hidden; }
.cm-card-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid #f0ebf1; }
.cm-card-h h2 { font-size: 12.5px; margin: 0; font-weight: 700; }
.cm-card-h .t-muted { font-size: 10.5px; }
.cm-link { display: inline-flex; align-items: center; gap: 3px; color: #e11383; font-weight: 600; font-size: 10.5px; }
.cm-link svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-reco-row { display: flex; align-items: center; gap: 9px; padding: 5px 12px; border-bottom: 1px solid #f3eff4; }
.cm-reco-row:last-child { border-bottom: 0; }
.cm-seg-ic { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px; display: grid; place-items: center; }
.cm-seg-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-reco-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-reco-txt b { font-size: 11.5px; }
.cm-reco-txt b em { font-style: normal; color: #716877; font-weight: 500; margin-left: 3px; }
.cm-reco-txt span { font-size: 10px; color: #716877; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-crear { background: #f5f3f5; border-color: #f5f3f5; padding: 4px 10px; font-size: 10.5px; }
.cm-marcha { display: flex; flex-direction: column; }
.cm-progreso { height: 5px; margin: 8px 12px 0; background: #f0ebf1; border-radius: 99px; overflow: hidden; flex: none; }
.cm-progreso span { display: block; height: 100%; background: #e11383; border-radius: 99px; transition: width .3s; }
.cm-marcha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; flex: 1; }
.cm-check { list-style: none; margin: 0; padding: 7px 12px 5px; display: flex; flex-direction: column; gap: 3px; }
.cm-check li { display: flex; align-items: center; gap: 7px; font-size: 10.8px; color: #716877; }
.cm-check li span:first-of-type { flex: 1; }
.cm-check li svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-check li.ok { color: #1d171f; }
.cm-check li.ok svg { color: #1f9d6b; }
.cm-chip { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #f5f3f5; color: #716877; border: 1px solid #ece7ee; white-space: nowrap; flex: none !important; }
.cm-marcha-ilus { position: relative; width: 84px; height: 66px; color: #e11383; justify-self: end; margin-right: 10px; }
.cm-marcha-ilus span { position: absolute; border-radius: 10px; background: #fce4f1; transform: rotate(-12deg); }
.cm-marcha-ilus .a { width: 40px; height: 40px; left: 18px; top: 11px; }
.cm-marcha-ilus .b { width: 24px; height: 24px; left: 0; top: 36px; opacity: .8; }
.cm-marcha-ilus .c { width: 17px; height: 17px; left: 56px; top: 0; opacity: .7; }
.cm-marcha-ilus .d { width: 21px; height: 21px; left: 61px; top: 43px; opacity: .6; }
.cm-marcha-ilus svg { position: absolute; left: 26px; top: 18px; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); filter: drop-shadow(0 4px 7px rgba(225, 19, 131, .25)); }
.cm-ayuda { display: flex; align-items: center; gap: 9px; margin: 0 10px 8px; padding: 6px 10px; border-radius: 12px; background: #fce4f1; }
.cm-ayuda > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-ayuda b { font-size: 11px; }
.cm-ayuda div span { font-size: 9.4px; color: #6c6272; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ayuda-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #e11383; }
.cm-ayuda-ic svg, .cm-ayuda .t-b svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-ayuda .t-b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 5px 9px; font-size: 10px; }
.cm-ult { width: 100%; border-collapse: collapse; font-size: 10.6px; }
.cm-ult th { text-align: left; font-size: 8.8px; text-transform: uppercase; letter-spacing: .04em; color: #716877; font-weight: 600; white-space: nowrap; padding: 5px 8px; border-bottom: 1px solid #f0ebf1; }
.cm-ult td { padding: 4px 8px; border-bottom: 1px solid #f3eff4; vertical-align: middle; white-space: nowrap; }
.cm-ult tbody tr:last-child td { border-bottom: 0; }
.cm-ult .num { text-align: right; font-variant-numeric: tabular-nums; }
.cm-ult-camp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-ult-camp > div { min-width: 0; display: flex; flex-direction: column; }
.cm-ult-camp b { font-size: 11px; }
.cm-sub { font-size: 9.6px; color: #716877; max-width: 176px; overflow: hidden; text-overflow: ellipsis; }
.cm-ult-img { width: 36px; height: 26px; border-radius: 6px; object-fit: cover; object-position: top; flex: 0 0 36px; background: #f5f3f5; }
.cm-ult-img.vacia { display: grid; place-items: center; color: #716877; }
.cm-ult-img.vacia svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.cm-acc svg { width: 14px; height: 14px; fill: none; stroke: #716877; stroke-width: 2.4; stroke-linecap: round; }
.cm-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9.6px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #eef1f6; color: #5b6675; letter-spacing: .02em; }
.cm-badge.ok { background: #e4f6ee; color: #137a52; }
.cm-badge.warn { background: #fff2dc; color: #b26a00; }
/* Mientras sale, el badge late: un punto que pulsa y un brillo que lo cruza (comunes.tsx). */
.cm-badge-vivo { position: relative; overflow: hidden; }
.cm-badge-vivo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%); transform: translateX(-120%); animation: cmBrillo 2.2s ease-in-out infinite; }
.cm-badge-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; animation: cmLatido 1.4s ease-out infinite; }
@keyframes cmBrillo { 60%, 100% { transform: translateX(120%); } }
@keyframes cmLatido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cm-met { display: flex; flex-direction: column; gap: 3px; min-width: 62px; }
.cm-met b { font-variant-numeric: tabular-nums; }
.cm-met-bar { display: block; height: 4px; border-radius: 99px; background: #f0ebf1; overflow: hidden; }
.cm-met-bar span { display: block; height: 100%; border-radius: 99px; background: #e11383; transition: width .5s; }
.cm-met-bar.vivo span { background-image: linear-gradient(45deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .35) 75%, transparent 75%); background-size: 10px 10px; animation: cmRayas .9s linear infinite; }
@keyframes cmRayas { to { background-position: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .cm-badge-vivo::after, .cm-badge-punto, .cm-met-bar.vivo span { animation: none; } .cm-met-bar span, .cm-barras span { transition: none; } }

/* ---------- Liquidación: como features/liquidacion (cabecera, banda y tarjetas) ---------- */
.lq { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 10px 14px; overflow: hidden; }
.lq-cp { padding: 11px 14px 9px; display: flex; flex-direction: column; gap: 9px; flex: none; }
.lq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lq-lab { display: block; font-size: 9.4px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #716877; }
.lq-val { font-size: 23px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lq-val.ok { color: #1f9d6b; }
.lq-queda { text-align: right; border-left: 1px solid #ece7ee; padding-left: 18px; display: flex; flex-direction: column; align-items: flex-end; }
.lq-pie { font-size: 9.8px; color: #716877; }
.lq-neto { font-size: 10.4px; color: #4a4150; margin-top: 2px; }
.lq-neto b { color: #1d171f; font-variant-numeric: tabular-nums; }
.lq-barra { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: #ece7ee; gap: 2px; }
.lq-seg { min-width: 3px; transition: width 420ms var(--c-salida); }
.lq-seg-queda { flex: 1; background: repeating-linear-gradient(-45deg, #e4f6ee, #e4f6ee 5px, #d5efe3 5px, #d5efe3 10px); }
.lq-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 18px; }
.lq-lista li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.lq-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.lq-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lq-fila-txt b { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.lq-fila-txt span { font-size: 9.6px; color: #716877; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lq-var { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 4px; border-radius: 999px; font-size: 9.4px !important; font-weight: 700; color: #137a52 !important; background: #e4f6ee; }
.lq-var svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.lq-fila-num { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.lq-fila-num b { font-size: 11.6px; }
.lq-fila-num span { font-size: 9.6px; color: #716877; min-width: 24px; text-align: right; }
.lq-tabs { display: flex; gap: 6px; flex: none; }
.lq-tabs span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #ece7ee; border-radius: 9px; background: #fff; font-size: 10.6px; font-weight: 600; color: #4a4150; }
.lq-tabs span.on { background: #fce4f1; border-color: #e11383; color: #ad0c63; }
.lq-tabs svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lq-banda { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 11px; background: #fce4f1; border: 1px solid #f6d3e7; font-size: 11.2px; flex: none; animation: liqIn .35s ease both; }
.lq-banda b { color: #ad0c63; font-variant-numeric: tabular-nums; }
.lq-banda .t-b { display: inline-flex; align-items: center; gap: 4px; }
.lq-banda .t-b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.lq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; flex: none; }
.lq-emp { background: #fff; border: 1px solid #ece7ee; border-radius: 13px; padding: 13px 12px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(20,10,25,.05); animation: liqIn .35s ease both; }
.lq-emp-top { display: flex; align-items: center; gap: 8px; }
.lq-av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: none; }
.lq-emp-n { font-size: 13px; font-weight: 700; line-height: 1.1; }
.lq-emp-r { font-size: 9.6px; color: #716877; margin-top: 1px; }
.lq-emp-stats { display: grid; grid-template-columns: 1.35fr 1fr; gap: 6px; }
.lq-emp-stats div { background: #faf8fb; border: 1px solid #ece7ee; border-radius: 8px; padding: 7px 8px; display: flex; flex-direction: column; min-width: 0; }
.lq-emp-stats span { font-size: 8.8px; line-height: 1.15; color: #716877; font-weight: 600; }
.lq-emp-stats b { margin-top: 2px; font-size: 13.4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lq-emp-com { display: flex; align-items: center; gap: 6px; }
.lq-ro { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid #ece7ee; border-radius: 8px; padding: 4px 8px; background: #faf8fb; }
.lq-ro span { font-size: 9px; color: #716877; font-weight: 600; }
.lq-ro b { font-size: 12px; font-weight: 800; }
.lq-pay { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.lq-pay span { font-size: 8.6px; color: #716877; font-weight: 600; }
.lq-pay b { font-size: 15.5px; font-weight: 800; color: #ad0c63; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lq-ns { display: flex; align-items: center; gap: 5px; font-size: 9.4px; color: #9a5b00; background: #fff6e8; border-radius: 7px; padding: 3px 7px; }
.lq-ns svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.lq-share { height: 5px; border-radius: 999px; background: #ece7ee; overflow: hidden; margin-top: auto; }
.lq-share span { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--c-salida); }
@keyframes liqIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .lq-banda, .lq-emp { animation: none; } .lq-seg, .lq-share span { transition: none; } }

/* ---------- Facturas: como features/comprobantes (franja fiscal, pestañas, tarjetas, grilla) ---------- */
.fc { flex: 1; min-height: 0; display: flex; padding: 10px 14px; }
.fc-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0ebf1; }
.fc-fiscal-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fce4f1; color: #e11383; flex: none; }
.fc-fiscal-ic svg, .fc-head .t-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fc-head .t-b svg { width: 12px; height: 12px; }
.fc-fiscal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-fiscal b { font-size: 12.4px; }
.fc-fiscal b span { font-weight: 400; color: #716877; }
.fc-fiscal small { font-size: 10px; color: #716877; }
.fc-head .t-b { display: inline-flex; align-items: center; gap: 4px; }
.fc-tabsbar { display: flex; align-items: center; gap: 10px; margin: 9px 14px 0; }
.fc-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f5f3f5; border: 1px solid #ece7ee; }
.fc-tabs span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; font-size: 11.2px; font-weight: 600; color: #716877; }
.fc-tabs span.on { background: #fff; color: #e11383; box-shadow: 0 1px 4px rgba(20, 8, 24, .1); }
.fc-tabs svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fc-tabs i { font-style: normal; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: rgba(139, 130, 144, .16); color: #716877; font-size: 9.6px; font-weight: 800; display: inline-grid; place-items: center; }
.fc-tabs span.on i { background: rgba(225, 19, 131, .12); color: #e11383; }
.fc-src { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: #716877; }
.fc-src svg { width: 11px; height: 11px; fill: none; stroke: #059669; stroke-width: 2.6; }
.fc-stats { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr; gap: 8px; padding: 9px 14px 2px; }
.fc-stat { display: grid; grid-template-areas: "conteo importe" "rotulo importe"; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid #ece7ee; }
.fc-stat .v { grid-area: conteo; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fc-stat .v small { font-size: 11px; font-weight: 700; color: #716877; }
.fc-stat .l { grid-area: rotulo; font-size: 10px; color: #716877; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fc-stat .r { grid-area: importe; align-self: center; justify-self: end; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fc-stat.ok { grid-template-areas: "rotulo importe"; border-color: rgba(16, 185, 129, .32); }
.fc-stat.ok .v { color: #047857; font-size: 16px; }
.fc-stat em { font-style: normal; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.fc-stat em svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.fc-stat em.cae { color: #047857; background: rgba(16, 185, 129, .12); }
.fc-stat em.seen { color: #0e7490; background: rgba(6, 182, 212, .13); }
.fc-stat em.sent { color: #716877; background: #f2f0f3; }
.fc-stat em.none { color: #716877; border: 1px dashed #e6e1e6; }
.fc-tool { display: flex; align-items: center; gap: 6px; padding: 8px 14px 6px; }
.fc-f { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #ece7ee; border-radius: 8px; font-size: 10.6px; font-weight: 600; background: #fff; }
.fc-f svg, .fc-search svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.fc-search { margin-left: auto; width: 240px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #ece7ee; border-radius: 8px; font-size: 10.6px; color: #a59ca9; }
.fc-table { width: calc(100% - 20px); margin: 0 10px; border-collapse: collapse; font-size: 10.8px; }
.fc-table th { text-align: left; font-size: 8.8px; text-transform: uppercase; letter-spacing: .04em; color: #716877; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #ece7ee; }
.fc-table td { padding: 4px 8px; border-bottom: 1px solid #f3eff4; vertical-align: middle; white-space: nowrap; }
.fc-table tbody tr:nth-child(even) { background: rgba(139, 130, 144, .05); }
.fc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-nro b { font: 700 10.4px ui-monospace, 'SF Mono', Menlo, monospace; display: block; }
.fc-org { display: inline-block; margin-top: 2px; padding: 0 7px; border-radius: 999px; font-size: 8.6px; font-weight: 700; }
.fc-org.mp { background: rgba(0, 158, 227, .1); color: #0f87c0; }
.fc-org.pos { background: #fce4f1; color: #b80e6a; }
.fc-org.tra { background: rgba(37, 99, 235, .1); color: #2563eb; }
.fc-fecha { font-variant-numeric: tabular-nums; }
.fc-rec { font-weight: 600; }
.fc-mail { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 0 7px; border-radius: 999px; font-size: 9px; line-height: 1.6; border: 1px solid #ece7ee; color: #716877; }
.fc-mail svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.fc-mail.sent { border-color: rgba(31, 157, 107, .35); background: #e4f6ee; color: #1f9d6b; }
.fc-mail.seen { border-color: rgba(83, 189, 235, .4); background: rgba(83, 189, 235, .14); color: #1391b8; }
.fc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.6px; font-weight: 600; border-radius: 999px; padding: 2px 8px; color: #047857; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); }
.fc-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.fc-cae { font: 10px ui-monospace, 'SF Mono', Menlo, monospace; color: #716877; }
.fc-acc { text-align: right; }
td.fc-acc svg { width: 13px; height: 13px; margin-left: 7px; fill: none; stroke: #716877; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-vacio { text-align: center; color: #716877; padding: 26px 8px !important; }
.fc-table tr.is-new td { animation: rowFlash 1.6s ease-in-out; }

/* ---------- Precios: como features/prices (PricesPage) ---------- */
.lp { flex: 1; min-height: 0; display: flex; padding: 10px 14px; }
.lp-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.lp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0ebf1; }
.lp-head h2 { margin: 0; font-size: 13px; font-weight: 700; }
.lp-head .t-muted { font-size: 10.4px; }
.lp-kpis { margin-left: auto; display: flex; gap: 6px; }
.lp-kpis span { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 3px 9px; border-radius: 10px; background: #faf8fb; border: 1px solid #ece7ee; }
.lp-kpis span.on { border-color: #e11383; background: #fce4f1; box-shadow: 0 0 0 2px #fce4f1; }
.lp-kpis b { font-size: 13.5px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lp-kpis b.acc { color: #e11383; }
.lp-kpis small { font-size: 8.4px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #716877; }
.lp-tools { display: flex; gap: 5px; }
.lp-tools .t-b { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 5px 8px; }
.lp-tools svg, .lp-chips svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-chips { flex-basis: 100%; display: flex; flex-wrap: nowrap; gap: 4px; }
.lp-chips span { display: inline-flex; align-items: center; gap: 4px; font-size: 9.4px; font-weight: 600; padding: 3px 7px; border-radius: 20px; border: 1px solid #ece7ee; background: #fff; color: #716877; white-space: nowrap; }
.lp-chips span.on { background: #fce4f1; border-color: #e11383; color: #ad0c63; }
.lp-chips i { font-style: normal; font-size: 8.6px; font-weight: 800; background: rgba(0, 0, 0, .06); padding: 0 5px; border-radius: 20px; }
.lp-chips span.on i { background: rgba(225, 19, 131, .18); }
.lp-chips .sw:first-of-type { margin-left: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 10.8px; }
.lp-table th { text-align: left; font-size: 8.8px; text-transform: uppercase; letter-spacing: .04em; color: #716877; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #ece7ee; }
.lp-table td { padding: 3px 10px; height: 40px; box-sizing: border-box; border-bottom: 1px solid #f3eff4; vertical-align: middle; white-space: nowrap; }
.lp-table tr.is-pausa td { opacity: .55; }
.lp-thumb { position: relative; display: flex; }
.lp-thumb img, .lp-ph { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: #fce4f1; color: #e11383; }
.lp-ph svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.lp-off { position: absolute; top: -5px; left: -7px; font-size: 7.6px; font-weight: 800; color: #fff; background: #e11383; padding: 2px 4px; border-radius: 6px; box-shadow: 0 0 0 2px #fff; }
.lp-tipo { font-size: 9.4px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #eef1f6; color: #5b6675; }
.lp-tipo.largo { background: #efe9fb; color: #7c4ddb; }
.lp-precio { display: inline-flex; align-items: center; gap: 5px; }
.lp-precio .desde { font-size: 9px; color: #716877; font-weight: 600; }
.lp-precio s { font-size: 10px; color: #716877; }
.lp-precio b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-dur { font-size: 9.6px; font-weight: 600; color: #5b5560; background: #f3eef4; padding: 2px 8px; border-radius: 20px; }
.lp-integ { display: inline-flex; gap: 4px; }
.lp-ic { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #e4f6ee; background: #f1faf5; color: #1f9d6b; display: grid; place-items: center; }
.lp-ic.off { filter: grayscale(1); opacity: .5; }
.lp-ic svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.lp-acc svg { width: 13px; height: 13px; margin-right: 8px; fill: none; stroke: #716877; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-pie { margin-top: auto; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-top: 1px solid #ece7ee; font-size: 10.4px; }
.lp-pag { display: inline-flex; align-items: center; gap: 3px; }
.lp-pag span { min-width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #716877; }
.lp-pag span.on { background: #fce4f1; color: #ad0c63; }
.lp-pag svg { width: 12px; height: 12px; fill: none; stroke: #716877; stroke-width: 2; }

/* ---------- Conversaciones: como features/chat (lista, hilo y panel del cliente) ---------- */
.ch { flex: 1; min-height: 0; display: flex; padding: 10px 14px; }
.ch-panel { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px 1fr; overflow: hidden; }
.ch svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #ece7ee; }
.ch-lista-head { display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 0; border-bottom: 1px solid #ece7ee; }
.ch-buscar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid #ece7ee; border-radius: 9px; background: #f5f3f5; color: #a59ca9; font-size: 10.6px; }
.ch-buscar svg, .ch-mas svg { width: 12px; height: 12px; }
.ch-tabs { display: flex; gap: 0; }
.ch-tabs span { display: inline-flex; align-items: center; gap: 3px; padding: 5px 5px 7px; white-space: nowrap; border-bottom: 2px solid transparent; font-size: 10.6px; font-weight: 600; color: #716877; }
.ch-tabs span.on { color: #1d171f; border-bottom-color: #e11383; }
.ch-tabs i { font-style: normal; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #f0ebf1; font-size: 9px; font-weight: 800; display: inline-grid; place-items: center; }
.ch-tabs span.urg i { background: #fbf0d9; color: #8a5a00; }
.ch-mas { display: none; }
.ch-filas { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.ch-fila { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f0ebf1; }
.ch-fila.is-activa { background: #fce4f1; box-shadow: inset 3px 0 0 #e11383; }
.ch-fila.is-espera { background: #fbf6ec; }
.ch-fila.is-espera.is-activa { box-shadow: inset 3px 0 0 #d18a00; }
.ch-fila.is-cerrada { opacity: .7; }
.ch-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.ch-av.anon { background: #ece7ee; color: #716877; }
.ch-av.anon > svg { width: 15px; height: 15px; }
.ch-vivo { position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: #1f9d6b; border: 2px solid #fff; }
.ch-canal { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #e11383; display: grid; place-items: center; box-shadow: 0 0 0 1px #ece7ee; }
.ch-canal svg { width: 8px; height: 8px; stroke-width: 2.4; }
.ch-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-fila-txt .l1 { display: flex; align-items: baseline; gap: 6px; }
.ch-fila-txt .l1 b { flex: 1; min-width: 0; font-size: 11.2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-fila-txt .l1 b small { margin-left: 4px; font-size: 9px; font-weight: 500; color: #716877; }
.ch-fila-txt .cuando { font-size: 9.4px; color: #716877; flex: none; }
.ch-fila-txt .l2 { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.2px; color: #716877; }
.ch-fila-txt .who { flex: none; font-weight: 600; color: #1d171f; }
.ch-fila-txt .who.bot { color: #ad0c63; }
.ch-fila-txt .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-fila.is-noleida .x, .ch-fila.is-noleida .l1 b { font-weight: 700; color: #1d171f; }
.ch-fila-txt .nl { margin-left: auto; flex: none; min-width: 15px; height: 15px; border-radius: 999px; background: #e11383; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.ch-ticks { display: inline-flex; color: #716877; }
.ch-ticks svg { width: 12px; height: 12px; }
.ch-ticks.visto { color: #1391b8; }
.ch-fila-txt .l3 { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-fila-txt .l3:empty { display: none; }
.ch-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 8.8px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #eef1f6; color: #5b6675; }
.ch-badge svg { width: 9px; height: 9px; }
.ch-badge.warn { background: #fbf0d9; color: #8a5a00; }
.ch-badge.acc { background: #fce4f1; color: #ad0c63; }
.ch-et { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: #fce4f1; color: #ad0c63; font-size: 8.8px; font-weight: 600; }
.ch-et.auto, .ch-fila .ch-et { background: transparent; box-shadow: inset 0 0 0 1px rgba(225, 19, 131, .35); color: #4a4150; font-weight: 500; }
.ch-notas { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; color: #716877; }
.ch-notas svg { width: 10px; height: 10px; }
.ch-hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-hilo-head { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #ece7ee; }
.ch-hilo-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-hilo-quien b { display: flex; align-items: center; gap: 7px; font-size: 12.4px; }
.ch-origen { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600; color: #ad0c63; background: #fce4f1; padding: 1px 6px; border-radius: 999px; }
.ch-origen svg { width: 9px; height: 9px; }
.ch-presencia { display: inline-flex; align-items: center; gap: 4px; font-size: 9.8px; color: #716877; }
.ch-presencia i { width: 7px; height: 7px; border-radius: 50%; background: #c9c1cc; }
.ch-presencia.en-linea { color: #137a52; }
.ch-presencia.en-linea i { background: #1f9d6b; box-shadow: 0 0 0 3px rgba(31, 157, 107, .18); }
.ch-hilo-head .t-b, .ch-banner .t-b, .ch-pie .t-b, .ch-asig { display: inline-flex; align-items: center; gap: 4px; }
.ch-hilo-head .t-b svg, .ch-banner .t-b svg, .ch-pie .t-b svg, .ch-asig svg { width: 11px; height: 11px; }
.ch-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 206px; }
.ch-centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #faf8fb; }
.ch-banner { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 7px 10px; border-radius: 11px; background: #fff; border: 1px solid #ece7ee; }
.ch-banner .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #fce4f1; color: #e11383; flex: none; }
.ch-banner .ic svg { width: 14px; height: 14px; }
.ch-banner > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-banner b { font-size: 10.8px; }
.ch-banner div span { font-size: 9.6px; color: #6c6272; }
.ch-banner.espera { background: #fbf6ec; border-color: #f3dfb4; }
.ch-banner.espera .ic { background: #fbf0d9; color: #8a5a00; }
.ch-banner.compacto .t-b { background: #fff; color: #ad0c63; border-color: #f6c5df; }
.ch-mensajes { flex: 1; min-height: 0; overflow: hidden; padding: 10px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ch-dia { align-self: center; }
.ch-dia span { padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid #ece7ee; font-size: 9px; font-weight: 600; color: #716877; }
.ch-grupo { display: flex; flex-direction: column; gap: 3px; max-width: 80%; animation: msgIn .45s var(--ease) both; }
.ch-grupo.de-visitor { align-self: flex-start; align-items: flex-start; }
.ch-grupo.de-bot { align-self: flex-end; align-items: flex-end; }
.ch-grupo.de-system { align-self: center; max-width: 100%; }
.ch-grupo .quien { font-size: 9px; font-weight: 600; color: #716877; padding: 0 3px; }
.ch-grupo .quien small { font-weight: 500; margin-left: 3px; }
.ch-burbuja { padding: 7px 10px; border-radius: 12px; font-size: 10.8px; line-height: 1.45; box-shadow: 0 1px 2px rgba(20, 10, 25, .06); }
.ch-grupo.de-visitor .ch-burbuja { background: #fff; border: 1px solid #ece7ee; border-bottom-left-radius: 4px; }
.ch-grupo.de-bot .ch-burbuja { background: #fce4f1; border-bottom-right-radius: 5px; }
.ch-grupo .hora { display: inline-flex; align-items: center; gap: 3px; font-size: 8.6px; color: #716877; padding: 0 3px; }
.ch-grupo .hora svg { width: 11px; height: 11px; }
.ch-sistema { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 9.6px; font-weight: 500; color: #716877; background: #fff; border: 1px solid #ece7ee; }
.ch-sistema svg { width: 11px; height: 11px; color: #ad0c63; }
.ch-pie { padding: 8px 10px 9px; border-top: 1px solid #ece7ee; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.ch-caja { border: 1px solid #ece7ee; border-radius: 12px; }
.ch-caja .ch-ph { display: block; padding: 8px 11px 4px; font-size: 10.6px; color: #a59ca9; }
.ch-caja .barra { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; }
.ch-caja .herr { display: flex; gap: 4px; }
.ch-caja .herr span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid #ece7ee; color: #716877; }
.ch-caja .herr .ia { color: #e11383; border-color: #f6c5df; background: #fdf3f9; }
.ch-caja .herr svg { width: 13px; height: 13px; }
.ch-sugeridas { display: flex; gap: 5px; overflow: hidden; }
.ch-sugeridas span { padding: 4px 9px; border: 1px solid #ece7ee; border-radius: 999px; font-size: 9.6px; white-space: nowrap; }
.ch-ctx { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #ece7ee; background: #fff; font-size: 10.4px; overflow: hidden; }
.ch-ctx header { padding: 8px 12px; border-bottom: 1px solid #ece7ee; font-weight: 700; font-size: 11px; }
.ch-ctx section { padding: 8px 12px; border-bottom: 1px solid #ece7ee; }
.ch-ctx section.notas { border-bottom: 0; }
.ch-ctx h4 { margin: 0 0 6px; font-size: 8.8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #716877; }
.ch-ficha { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ch-ficha > div { display: flex; flex-direction: column; min-width: 0; }
.ch-ficha b { font-size: 11.4px; }
.ch-ficha span { font-size: 9.4px; color: #716877; }
.ch-ctx .fila { display: flex; justify-content: space-between; gap: 6px; min-height: 20px; align-items: center; }
.ch-ctx .fila span { color: #716877; }
.ch-ctx .fila b { font-weight: 600; text-align: right; }
.ch-ctx .fila b.ok { color: #137a52; }
.ch-asig { margin-top: 6px; justify-content: center; width: 100%; box-sizing: border-box; font-size: 10px; }
.ch-ets { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-ctx p { margin: 0; color: #716877; line-height: 1.45; font-size: 9.6px; }

/* ---------- Cartelería: como features/carteleria (pestañas, card de cada pantalla) ---------- */
.cr { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px; }
.cr svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 11px; background: #eee7ed; }
.cr-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 10.8px; font-weight: 600; color: #716877; }
.cr-tabs span svg { width: 12px; height: 12px; }
.cr-tabs span.on { background: #fff; color: #ad0c63; box-shadow: 0 1px 5px rgba(31, 10, 25, .14); }
.cr-tabs i { font-style: normal; font-size: 8.8px; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: #e0d8df; color: #6f6377; }
.cr-tabs span.on i { background: #fce4f1; color: #ad0c63; }
.cr-panel { flex: none; overflow: hidden; }
.cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.cr-head h2 { margin: 0 0 2px; font-size: 14px; }
.cr-head .t-muted { font-size: 10.4px; }
.cr-head .t-b, .cr-acc .t-b { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cr-head .t-b svg, .cr-acc .t-b svg { width: 11px; height: 11px; }
.cr-pant { display: flex; align-items: flex-start; gap: 13px; padding: 13px 14px; border-top: 1px solid #ece7ee; }
.cr-shot { position: relative; flex: none; width: 196px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #17111c; box-shadow: 0 0 0 1px #ece7ee; }
.cr-shot.vertical { width: 86px; aspect-ratio: 9 / 16; }
.cr-img { position: absolute; inset: 0 0 0 42%; background-size: cover; background-position: center; animation: fadeIn .6s var(--ease) both; }
.cr-placa { animation: fadeIn .6s var(--ease) both; }
.cr-placa { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 0 9px 11px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2;
  background: radial-gradient(120% 90% at 0% 0%, rgba(225, 19, 131, .35), transparent 60%), #1a1120; }
.cr-placa small { font-size: 6.6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff7cc0; }
.cr-placa.sola { width: auto; right: 0; justify-content: center; padding-bottom: 0; align-items: center; text-align: center; font-size: 11px; background: radial-gradient(90% 85% at 18% 0%, rgba(225, 19, 131, .32), transparent 62%), linear-gradient(160deg, #241826, #150f1a); }
.cr-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #cbbfd1; text-align: center;
  background: radial-gradient(90% 85% at 18% 0%, rgba(225, 19, 131, .30), transparent 62%), radial-gradient(85% 75% at 92% 100%, rgba(255, 92, 174, .18), transparent 60%), linear-gradient(160deg, #241826, #150f1a); }
.cr-off .ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #e11383, #ff5cae); box-shadow: 0 5px 14px rgba(225, 19, 131, .38); }
.cr-off .ico svg { width: 16px; height: 16px; }
.cr-off span:not(.ico) { font-size: 7.4px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 0 4px; }
.cr-live { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 20px; background: rgba(20, 10, 20, .72); color: #fff; font-size: 7.8px; font-weight: 800; letter-spacing: .06em; }
.cr-live i { width: 5px; height: 5px; border-radius: 50%; background: #3ddc84; }
.cr-live.muda i { background: #ff5c5c; }
.cr-cuerpo { flex: 1; min-width: 0; }
.cr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cr-nombre { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.cr-chip { font-size: 9.4px; font-weight: 600; padding: 2px 8px; border: 1px solid #ece7ee; border-radius: 999px; background: #fff; }
.cr-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 9.4px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.cr-estado::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cr-estado.ok { background: #e3f5ec; color: #137a52; }
.cr-estado.off { background: #eef1f6; color: #6c6272; }
.cr-sub { margin-top: 3px; font-size: 10px; color: #6c6272; }
.cr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #ece7ee; }
.cr-stats .lab { display: block; margin-bottom: 3px; font-size: 8.4px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #716877; }
.cr-stats b { font-size: 11px; font-weight: 600; }
.cr-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border: 1px solid #fce4f1; border-radius: 6px; font: 9.4px ui-monospace, Menlo, monospace; color: #ad0c63; }
.cr-acc { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ==========================================================================
   Movimientos de la app
   Cada pieza de la demo se mueve como su componente real en frontend/src, con
   el mismo resorte de framer-motion (las curvas --r-* las genera
   _src/resortes.py). Las salidas (`.is-leaving`) las dispara el render de
   app.js cuando un elemento con `data-out` deja de estar (AnimatePresence).
   ========================================================================== */
.t-app { position: relative; }

/* Un número que cuenta es parte del texto que lo rodea: ninguna regla de «span»
   del contenedor (rótulos chicos, flex) se le tiene que aplicar. */
.t-app [data-cnt] { display: inline; font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; background: none; }

/* Cambiar de módulo: la vista de la caja (lista ↔ calendario), mode="wait" */
.t-main { animation: mvVistaIn .24s var(--c-salida) .12s both; }
.t-main.is-leaving { animation: mvVistaOut .2s var(--c-salida) both; }
@keyframes mvVistaIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
@keyframes mvVistaOut { to { opacity: 0; transform: translateY(-8px); filter: blur(2px); } }

/* Avisos: ui/Toast (de costado), NewOrderAlert (cobros y turnos nuevos, de
   costado y más largo), MailNotifier/ResenaNotifier (suben). Al apilarse, se
   corren con el mismo resorte (el `layout` de cada aviso). */
.t-toasts { position: absolute; right: 16px; top: 66px; width: 286px; display: flex; flex-direction: column; gap: 8px; z-index: 8; }
.t-toasts .t-toast { position: relative; right: auto; top: auto; width: auto; animation: none; }
.t-toasts .t-toast.k-toast { animation: mvToastIn var(--r-toast-d) var(--r-toast) both; }
.t-toasts .t-toast.k-toast.is-leaving { animation: mvToastOut .24s var(--c-acelera) both; }
.t-toasts .t-toast.k-pedido { animation: mvPedidoIn var(--r-aviso-d) var(--r-aviso) both; }
.t-toasts .t-toast.k-pedido.is-leaving { animation: mvPedidoOut .26s var(--c-acelera) both; }
.t-toasts .t-toast.k-aviso { animation: mvAvisoIn var(--r-aviso-d) var(--r-aviso) both; }
.t-toasts .t-toast.k-aviso.is-leaving { animation: mvAvisoOut .24s var(--c-acelera) both; }
.t-toasts .t-toast { transform-origin: 100% 50%; }
.t-toasts .t-toast.k-aviso { transform-origin: 50% 100%; }
/* Adentro, en cascada: el ícono salta un instante después de la tarjeta y el
   texto se desliza detrás. Así se lee como algo que llega, no como un recorte. */
.t-toasts .t-toast:not(.is-leaving) .ic { animation: mvIcPop var(--r-ok-d) var(--r-ok) .07s both; }
.t-toasts .t-toast:not(.is-leaving) > div { animation: mvTxtIn .38s var(--c-salida) .11s both; }
@keyframes mvIcPop { from { opacity: 0; transform: scale(.45) rotate(-14deg); } }
@keyframes mvTxtIn { from { opacity: 0; transform: translateX(10px); filter: blur(3px); } }
@keyframes mvToastIn { from { opacity: 0; transform: translateX(44px) scale(.92); filter: blur(6px); box-shadow: 0 0 0 0 rgba(20,10,25,0); } }
@keyframes mvToastOut { to { opacity: 0; transform: translateX(30px) scale(.95); filter: blur(5px); } }
@keyframes mvPedidoIn { from { opacity: 0; transform: translateX(56px) scale(.92); filter: blur(7px); box-shadow: 0 0 0 0 rgba(20,10,25,0); } }
@keyframes mvPedidoOut { to { opacity: 0; transform: translateX(36px) scale(.95); filter: blur(5px); } }
@keyframes mvAvisoIn { from { opacity: 0; transform: translateY(22px) scale(.9); filter: blur(7px); box-shadow: 0 0 0 0 rgba(20,10,25,0); } }
@keyframes mvAvisoOut { to { opacity: 0; transform: translateY(-8px) scale(.96); filter: blur(5px); } }

/* «Arranca el turno»: caja/TurnoStartAnnounce. Entra con resorte y desenfoque,
   la campana se sacude y se va con un tween que acelera. */
.t-turno { animation: mvTurnoIn var(--r-turno-d) var(--r-turno) both; }
.t-turno.is-leaving { animation: mvTurnoOut .34s var(--c-acelera) both; }
.t-turno .bell { animation: mvCampana 1.1s cubic-bezier(.36, .07, .19, .97) .1s both; }
@keyframes mvTurnoIn { from { opacity: 0; transform: translateX(-50%) translateY(28px) scale(.94); filter: blur(8px); } to { opacity: 1; transform: translateX(-50%); filter: blur(0); } }
@keyframes mvTurnoOut { from { opacity: 1; transform: translateX(-50%); filter: blur(0); } to { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(.92); filter: blur(10px); } }
@keyframes mvCampana { 0% { transform: rotate(0); } 16.6% { transform: rotate(-22deg); } 33.3% { transform: rotate(18deg); } 50% { transform: rotate(-13deg); } 66.6% { transform: rotate(9deg); } 83.3% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
.t-voice { animation: mvVozIn var(--r-aviso-d) var(--r-aviso) .9s both; }
.t-voice.is-leaving { animation: mvVozOut .34s var(--c-acelera) both; }
@keyframes mvVozIn { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.92); filter: blur(7px); } to { opacity: 1; transform: translateX(-50%); filter: blur(0); } }
@keyframes mvVozOut { from { opacity: 1; transform: translateX(-50%); filter: blur(0); } to { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.95); filter: blur(6px); } }

/* El PIN de la caja: kiosk/PinPad. La tarjeta con resorte, cada punto late al
   llenarse, cada tecla se hunde y rebota (whileTap), el candado salta al acertar. */
.t-pin-bg { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: mvVeloIn .24s ease both; }
.t-pin-card { animation: mvPinIn var(--r-aviso-d) var(--r-aviso) both; }
.t-pin.is-ok .t-pin-card, .t-pin.is-ok .t-pin-bg { animation: none; }
.t-pin.is-ok .t-pin-ic { animation: mvIcOk .3s ease-out; }
.t-pin.is-leaving .t-pin-card { animation: mvPinOut .26s var(--c-acelera) both; }
.t-pin:not(.is-leaving):not(.is-ok) .t-pin-ic { animation: mvIcPop var(--r-ok-d) var(--r-ok) .1s both; }
.t-pin.is-leaving .t-pin-bg { animation: fadeOutQ .2s ease both; }
.t-pin-dots i.last { animation: mvPunto .18s ease-out; }
.t-pin-keys span.is-press { animation: mvTecla calc(var(--r-tecla-d) + 120ms) both; }
@keyframes mvPinIn { from { opacity: 0; transform: translateY(22px) scale(.9); filter: blur(8px); } }
@keyframes mvPinOut { to { opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(6px); } }
@keyframes mvPunto { 0% { transform: scale(.6); } 55% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes mvIcOk { 50% { transform: scale(1.18); } }
@keyframes mvTecla {
  0% { transform: none; animation-timing-function: ease-out; }
  17% { transform: scale(.88); background: #fce4f1; color: #ad0c63; animation-timing-function: var(--r-tecla); }
  100% { transform: none; background: #f5f3f5; }
}

/* Pedir reseña por email: clientes/InviteEmailModal */
.cl-inv-bg { animation: mvVeloIn .22s ease both; }
@keyframes mvVeloIn { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.cl-inv-card { animation: mvModalIn var(--r-modal-d) var(--r-modal) both; }
.cl-inv.is-leaving .cl-inv-card { animation: mvModalOut .24s var(--c-acelera) both; }
.cl-inv.is-leaving .cl-inv-bg { animation: fadeOutQ .16s ease both; }
@keyframes mvModalIn { from { opacity: 0; transform: translateY(22px) scale(.93); filter: blur(8px); } }
@keyframes mvModalOut { to { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); } }

/* El ojito: kiosk/privacy. El panel de totales entra de costado y desenfocado,
   y el ícono gira al cambiar de abierto a tapado (mode="wait"). */
.cx-aside { animation: mvOjoIn var(--r-ojo-d) var(--r-ojo) both; }
.cx-aside.is-leaving { animation: mvOjoOut var(--r-ojo-d) var(--r-ojo) both; }
@keyframes mvOjoIn { from { opacity: 0; transform: translateX(26px); filter: blur(6px); } }
@keyframes mvOjoOut { to { opacity: 0; transform: translateX(26px); filter: blur(6px); } }
.cx-eye { position: relative; }
.cx-eye-ic { display: inline-flex; animation: mvOjoIc .16s ease-out .14s both; }
.cx-eye-ic.is-leaving { animation: mvOjoIcOut .16s ease-in both; }
@keyframes mvOjoIc { from { opacity: 0; transform: rotate(-12deg) scale(.8); } }
@keyframes mvOjoIcOut { to { opacity: 0; transform: rotate(12deg) scale(.8); } }

/* «Todo conciliado»: el aviso de la caja cuando no queda nada por asociar
   (caja/CajaPage, orphan-ok), con el tilde que salta sobre el isotipo. */
.t-float.ok { animation: mvOkIn var(--r-ok-d) var(--r-ok) both; }
.t-float.ok.is-leaving { animation: mvOkOut .24s var(--c-acelera) both; }
@keyframes mvOkIn { from { opacity: 0; transform: translateY(16px) scale(.88); filter: blur(6px); } }
@keyframes mvOkOut { to { opacity: 0; transform: translateY(-8px) scale(.95); filter: blur(5px); } }
.t-float .mpdot { position: relative; }
.t-float .tilde { position: absolute; right: -4px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 1.5px #fff; display: grid; place-items: center; animation: mvTilde var(--r-tilde-d) var(--r-tilde) .12s both; }
.t-float .tilde svg { width: 7px; height: 7px; fill: none; stroke: #fff; stroke-width: 3.5; }
@keyframes mvTilde { from { transform: scale(0); } }

/* La pantalla de descanso se va rápido al tocarla (kiosk/Screensaver: 0,22 s). */
.t-saver.is-leaving { animation: tSaverSale .7s cubic-bezier(.4, 0, .2, 1) both; }
/* La terminal se despierta (12/10): el dedo toca, la pantalla de descanso se abre hacia el
   frente y la caja sube desde atrás, de oscura y desenfocada a nítida. */
@keyframes tSaverSale { 0% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: scale(1.08); filter: blur(10px) brightness(1.4); } }
.t-app.is-wake { animation: tAppDespierta .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tAppDespierta { 0% { transform: scale(.96); filter: blur(8px) brightness(.45); } 100% { transform: none; filter: none; } }
.t-saver .pill.tap { animation: tPillTap .45s var(--ease) both; }
@keyframes tPillTap { 40% { transform: scale(.94); background: rgba(255, 255, 255, .3); } }
.t-toque { position: absolute; left: 50%; top: 64%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); animation: tToque .6s ease-out both; pointer-events: none; }
@keyframes tToque { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t-app.is-wake, .t-toque, .t-saver .pill.tap { animation: none; } .t-saver.is-leaving { animation: fadeOutQ .2s both; } }
/* Lo que crece mientras se mira (barras de envío y de reparto) crece, no salta. */
.t-stack span { transition: width .5s var(--c-salida); }

@media (prefers-reduced-motion: reduce) {
  .t-saver, .t-stack span { animation: none !important; transition: none !important; }
  .t-main, .t-toast, .t-turno, .t-turno .bell, .t-voice, .t-pin-bg, .t-pin-card, .cl-inv-bg, .cl-inv-card,
  .cx-aside, .cx-eye-ic, .t-float.ok, .t-float .tilde, .t-toast .ic, .t-toast > div, .t-pin-ic, .t-fact, .t-fact .tag, .t-fact .hoja > * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   La vidriera (vidriera.js): el video de la TV, copiado del proyecto real
   (Remotion) y armado en vivo. El lienzo mide 1920 × 1080 y se escala a la
   pantalla que lo contenga: la TV de la demo, la de «Vidriera y música» y la
   miniatura de Cartelería. Las medidas de adentro son las del video.
   ========================================================================== */
.vv { position: absolute; inset: 0; overflow: hidden; background: #1B1D22; contain: strict; }
.vv-c { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; color: #fff; font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.vv-s { position: absolute; inset: 0; overflow: hidden; background: #1B1D22; }
.vv-bg { position: absolute; inset: 0; background: #1B1D22; }
.vv-a { position: absolute; }
.vv-clip { position: absolute; inset: 0; overflow: hidden; background: #1B1D22; }
.vv-img, .vv-dk, .vv-gr, .vv-vig { position: absolute; inset: 0; }
.vv-img { background-size: cover; background-position: center; transform-origin: 50% 50%; }
.vv-gr-left { background: linear-gradient(90deg, rgba(27, 29, 34, .94) 0%, rgba(27, 29, 34, .72) 28%, rgba(27, 29, 34, 0) 62%); }
.vv-gr-right { background: linear-gradient(270deg, rgba(27, 29, 34, .94) 0%, rgba(27, 29, 34, .72) 28%, rgba(27, 29, 34, 0) 62%); }
.vv-gr-bottom { background: linear-gradient(0deg, rgba(27, 29, 34, .92) 0%, rgba(27, 29, 34, .55) 30%, rgba(27, 29, 34, 0) 65%); }
.vv-gr-top { background: linear-gradient(180deg, rgba(27, 29, 34, .9) 0%, rgba(27, 29, 34, 0) 55%); }
/* Viñeta suave, siempre; y el grano que el video trae horneado. */
.vv-vig { background: radial-gradient(ellipse 78% 78% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .42) 100%); }
.vv-clip::after { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 320px 320px; }
/* Reveal: la máscara deja aire arriba y a la derecha para acentos y descendentes. */
.vv-rv { clip-path: inset(-70px -70px -35px 0); }
.vv-d { line-height: .86; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; }
.vv-sub { line-height: 1.12; letter-spacing: -.01em; }
.vv-mi { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 500; font-size: 28px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.vv-url { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 500; font-size: 74px; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.vv-url span { color: #F850A8; }
.vv-mas { color: #F850A8; font-weight: 200; font-size: .62em; vertical-align: .2em; margin-right: .04em; }
.vv-guion { color: #F850A8; font-weight: 200; margin: 0 .08em; }
/* La marca del salón de la demo (en el video real va el logo del salón). */
.vv-logo { display: inline-flex; flex-direction: column; align-items: flex-end; color: #fff; }
.vv-logo .w { font-family: 'Bodoni Moda', 'Didot', Georgia, serif; font-style: italic; font-weight: 400; font-size: 236px; line-height: .92; letter-spacing: -.015em; font-variation-settings: 'opsz' 96; }
.vv-logo .t { margin: 18px -.46em 0 0; font-weight: 300; font-size: 40px; letter-spacing: .46em; text-transform: uppercase; opacity: .78; }
/* El QR: papel, sombra y el rótulo con el punto rosa (QRSlot). */
.vv-qrbox { position: relative; box-sizing: border-box; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vv-qrbox svg { display: block; width: 100%; height: 100%; }
.vv-qrcap { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 28px; }
.vv-qrcap i { width: 10px; height: 10px; border-radius: 50%; background: #F850A8; }
/* La placa de cierre: estado del local, pasos y el visor que escanea el QR. */
.vv-estado { display: inline-flex; align-items: center; gap: 18px; padding: 14px 26px 14px 22px; border-radius: 999px; border: 1px solid rgba(237, 234, 228, .22); background: rgba(237, 234, 228, .06);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 26px; letter-spacing: .16em; text-transform: uppercase; color: #EDEAE4; white-space: nowrap; }
.vv-estado i { width: 14px; height: 14px; border-radius: 50%; background: #F850A8; box-shadow: 0 0 0 6px rgba(248, 80, 168, .18); }
.vv-paso { display: inline-flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: #EDEAE4; white-space: nowrap; }
.vv-paso b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F850A8; color: #1B1D22; font-family: 'Inter Tight', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 0; }
.vv-flecha { display: block; width: 30px; height: 2px; background: rgba(237, 234, 228, .38); position: relative; }
.vv-flecha::after { content: ""; position: absolute; right: -1px; top: -6px; width: 12px; height: 12px; border-top: 2px solid rgba(237, 234, 228, .38); border-right: 2px solid rgba(237, 234, 228, .38); transform: rotate(45deg); }
.vv-qr-n { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 110px rgba(0, 0, 0, .6), 0 0 140px rgba(248, 80, 168, .18); }
.vv-scan { position: absolute; left: 3%; right: 3%; top: -9%; height: 9%; border-bottom: 3px solid rgba(248, 80, 168, .95); background: linear-gradient(180deg, rgba(248, 80, 168, 0), rgba(248, 80, 168, .32)); mix-blend-mode: multiply; pointer-events: none; opacity: 0; }
.vv-esq { position: absolute; inset: -46px; opacity: 0; }
.vv-esq i { position: absolute; width: 104px; height: 104px; border: 0 solid #F850A8; }
.vv-esq i:nth-child(1) { left: 0; top: 0; border-width: 9px 0 0 9px; border-top-left-radius: 34px; }
.vv-esq i:nth-child(2) { right: 0; top: 0; border-width: 9px 9px 0 0; border-top-right-radius: 34px; }
.vv-esq i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 9px 9px; border-bottom-left-radius: 34px; }
.vv-esq i:nth-child(4) { right: 0; bottom: 0; border-width: 0 9px 9px 0; border-bottom-right-radius: 34px; }

/* La TV de la demo: el video de abajo y, encima, las capas del player real
   (features/carteleria): la huincha arriba, la hora y el clima abajo a la
   derecha y el zócalo del turno abajo a la izquierda. Unidades en cqw, como en
   la app: la misma hoja sirve en la TV de 55" y en la vista previa. */
.tv { container-type: inline-size; background: #050405; }
.tv > .vv { animation: tvIn .9s var(--c-salida) both; }
.tv > .vv.is-leaving { animation: fadeOutQ .7s ease both; z-index: 1; }
@keyframes tvIn { from { opacity: 0; transform: scale(1.025); filter: brightness(1.6); } }

.hu-capa { position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none; -webkit-font-smoothing: antialiased; }
.hu-velo { position: absolute; left: 0; right: 0; top: 0; height: 7.6cqw; background: linear-gradient(to bottom, rgba(8, 4, 10, .80) 0%, rgba(8, 4, 10, .66) 34%, rgba(8, 4, 10, .34) 62%, rgba(8, 4, 10, .10) 84%, rgba(8, 4, 10, 0) 100%); }
.hu-ventana { position: relative; height: 3.9cqw; display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.hu-riel { display: flex; width: max-content; animation: huCorre 34s linear infinite; }
@keyframes huCorre { to { transform: translate3d(-33.3333%, 0, 0); } }
.hu-tanda { display: flex; align-items: center; flex: none; }
.hu-item { flex: none; white-space: nowrap; font: 400 1.34cqw/1 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .19em; text-transform: uppercase; color: #FFF6FA; text-shadow: 0 1px 5px rgba(0, 0, 0, .72); }
.hu-sep { flex: none; display: grid; place-items: center; width: 5.4cqw; }
.hu-sep i { display: block; width: .44cqw; height: .44cqw; border-radius: 50%; background: #F851A8; }

.rlj-capa { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-font-smoothing: antialiased; }
.rlj-velo { position: absolute; right: 0; bottom: 0; width: 20cqw; height: 11cqw; background: radial-gradient(ellipse at 100% 100%, rgba(8, 4, 10, .50) 0%, rgba(8, 4, 10, .18) 45%, rgba(8, 4, 10, 0) 75%); }
.rlj-widget { position: absolute; right: 2.6cqw; bottom: 1.5cqw; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .7cqw; row-gap: .4cqw; color: #FFF6FA; filter: drop-shadow(0 .1cqw .45cqw rgba(0, 0, 0, .55)); }
.rlj-ico { width: 2.1cqw; height: 2.1cqw; opacity: .92; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rlj-hora { font: 500 2cqw/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rlj-dos { opacity: .55; margin: 0 .04em; }
.rlj-meta { grid-column: 1 / -1; font: 400 .78cqw/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .19em; text-transform: uppercase; color: rgba(255, 246, 250, .72); white-space: nowrap; }

/* El zócalo: «Comienza el turno», diez segundos en una sola línea de tiempo. */
.zt-capa { position: absolute; inset: 0; z-index: 3; pointer-events: none; -webkit-font-smoothing: antialiased; }
.zt-caja { position: absolute; left: 5%; bottom: 5.6%; width: fit-content; max-width: 64%; }
.zt-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; animation: ztScrim 10s both;
  background: linear-gradient(to top, rgba(6, 3, 8, .97) 0%, rgba(6, 3, 8, .94) 22%, rgba(6, 3, 8, .80) 44%, rgba(6, 3, 8, .48) 66%, rgba(6, 3, 8, .18) 84%, rgba(6, 3, 8, 0) 100%); }
.zt-texto { position: relative; display: flex; flex-direction: column; gap: .9cqw; min-width: 0; }
.zt-filete { height: max(1px, .17cqw); width: 100%; margin-bottom: .5cqw; transform-origin: left center; animation: ztFilete 10s both;
  background: linear-gradient(90deg, var(--zt-acento) 0%, var(--zt-acento) 62%, rgba(255, 255, 255, .35) 100%); }
.zt-kicker { display: flex; align-items: baseline; gap: 1.1cqw; font: 600 1.5cqw/1 Inter, system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--zt-acento); text-shadow: 0 1px 6px rgba(0, 0, 0, .75); animation: ztKicker 10s both; }
.zt-kicker em { font-style: normal; color: #FFF6FA; opacity: .85; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.zt-kicker i { font-style: normal; color: rgba(255, 255, 255, .34); letter-spacing: 0; }
.zt-nombre { overflow: hidden; line-height: .98; padding-bottom: .14em; margin-bottom: -.14em; animation: ztNombreSale 10s both; }
.zt-nombre b { display: block; white-space: nowrap; font: 400 7.4cqw/1 Georgia, 'Noto Serif', 'Times New Roman', serif; letter-spacing: -.018em; color: #FFF6FA; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .4); animation: ztNombreEntra 10s both; }
.zt-linea { display: flex; align-items: center; gap: 1.3cqw; min-width: 0; font: 400 2.15cqw/1.25 Inter, system-ui, sans-serif; color: rgba(255, 246, 250, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); animation: ztLinea 10s both; }
.zt-serv { color: #FFF6FA; opacity: .94; white-space: nowrap; }
.zt-punto { flex: none; width: .42cqw; height: .42cqw; border-radius: 50%; background: rgba(255, 255, 255, .34); }
.zt-pro { display: flex; align-items: center; gap: .85cqw; flex: none; white-space: nowrap; }
.zt-av { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; display: grid; place-items: center; background: var(--zt-acento); color: #fff; font: 700 1.1cqw/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 .18cqw rgba(255, 255, 255, .16); }
@keyframes ztScrim { 0% { opacity: 0; } 5% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ztFilete { 0% { transform: scaleX(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 8% { transform: scaleX(1); animation-timing-function: linear; } 92% { transform: scaleX(.012); animation-timing-function: cubic-bezier(.5, 0, .9, .3); } 100% { transform: scaleX(0); } }
@keyframes ztKicker { 0% { opacity: 0; transform: translateY(.7em); filter: blur(5px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 9% { opacity: 1; transform: none; filter: blur(0); } 93% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .3); } 100% { opacity: 0; transform: translateY(-.4em); filter: blur(3px); } }
@keyframes ztNombreEntra { 0% { transform: translateY(108%); animation-timing-function: cubic-bezier(.18, .9, .2, 1); } 13% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes ztNombreSale { 0% { opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .3); } 100% { opacity: 0; transform: translateY(-.25em); } }
@keyframes ztLinea { 0% { opacity: 0; transform: translateY(.6em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 16% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .3); } 100% { opacity: 0; transform: translateY(-.3em); } }
@media (prefers-reduced-motion: reduce) {
  .hu-riel, .tv > .vv, .zt-scrim, .zt-filete, .zt-kicker, .zt-nombre, .zt-nombre b, .zt-linea { animation: none !important; }
}

/* ---------- Precios: el lápiz y «Guardar y sincronizar» (prices/ServiceEditModal + SyncProgress) ---------- */
.lp-ed { display: inline-grid; place-items: center; border-radius: 6px; }
.lp-ed svg { margin-right: 0; }
.lp-acc .lp-ed { margin-right: 8px; }
.lp-ed.tap { animation: lpTap .5s var(--ease) both; }
@keyframes lpTap { 40% { transform: scale(.82); background: #fce4f1; box-shadow: 0 0 0 5px #fce4f1; } 100% { background: #fce4f1; box-shadow: 0 0 0 5px #fce4f1; } }
.lp-ed.tap svg { stroke: #e11383; }
.lp-table tr.is-fresh td { animation: lpFresh 2.4s ease-out both; }
.lp-table tr.is-fresh .lp-precio b { color: #137a52; }
.lp-table tr.is-fresh .lp-ic { animation: lpIc .9s var(--r-aviso) both; }
.lp-table tr.is-fresh .lp-ic:nth-child(2) { animation-delay: .18s; }
.lp-table tr.is-fresh .lp-ic:nth-child(3) { animation-delay: .36s; }
@keyframes lpFresh { 0%, 30% { background: #e3f5ec; } 100% { background: transparent; } }
@keyframes lpIc { 0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(31, 157, 107, .45); } 60% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(31, 157, 107, 0); } 100% { transform: none; } }

.pe { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font-family: var(--ui); color: #1d171f; }
.pe-bg { position: absolute; inset: 0; background: rgba(29, 23, 31, .34); backdrop-filter: blur(1.5px); animation: fadeIn .18s ease both; }
.pe-card { position: relative; width: 560px; height: 344px; display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(20, 10, 25, .45); animation: mvModalIn var(--r-modal-d) var(--r-modal) both; }
.pe.is-leaving .pe-card { animation: mvModalOut var(--r-modal-d) var(--r-modal) both; }
.pe.is-leaving .pe-bg { animation: fadeOutQ .2s ease both; }
.pe-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #f0ebf1; }
.pe-cover { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.pe-head h3 { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.15; }
.pe-desc { font-size: 10.6px; color: #716877; }
.pe-base { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; padding: 4px 10px; border: 1px solid #ece7ee; border-radius: 10px; background: #faf8fb; }
.pe-base small { font-size: 8.4px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #716877; }
.pe-base b { font-size: 11px; }
.pe-x { display: grid; margin-left: 4px; color: #716877; }
.pe-x svg, .pe-foot svg, .pe-crow svg, .pe-dry svg, .pe-res svg, .sync-ic svg, .sync-state svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe-x svg { width: 14px; height: 14px; }
.pe-body { position: relative; flex: 1; min-height: 0; }
.pe-st { position: absolute; inset: 0; padding: 10px 16px; animation: peIn .32s var(--c-salida) .06s both; }
.pe-st.is-leaving { animation: peOut .18s var(--c-acelera) both; }
@keyframes peIn { from { opacity: 0; transform: translateX(18px); } }
@keyframes peOut { to { opacity: 0; transform: translateX(-14px); } }
.pe-th, .pe-row { display: grid; grid-template-columns: 128px 112px minmax(0, 1fr) 54px 108px; align-items: center; gap: 8px; }
.pe-th { padding: 0 2px 6px; font-size: 8.8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #716877; border-bottom: 1px solid #f0ebf1; }
.pe-row { padding: 7px 2px; border-bottom: 1px solid #f6f2f7; }
.pe-row:last-child { border-bottom: 0; }
.pe-l { display: flex; align-items: center; gap: 7px; }
.pe-l img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.largo-chip { display: inline-flex; font-size: 9.6px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3eef4; color: #5b5560; white-space: nowrap; }
.pe-in { position: relative; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; overflow: hidden; border: 1px solid #e3dbe5; border-radius: 8px; background: #fff; font-size: 12px; font-variant-numeric: tabular-nums; transition: border-color .25s, background .25s, box-shadow .25s; }
.pe-pre { color: #716877; font-weight: 600; }
.pe-v { display: block; font-weight: 700; animation: peNum .34s var(--c-salida) both; }
.pe-v.is-leaving { animation: peNumOut .2s var(--c-acelera) both; }
@keyframes peNum { from { opacity: 0; transform: translateY(70%); } }
@keyframes peNumOut { to { opacity: 0; transform: translateY(-70%); } }
.pe-in.dirty { border-color: #e11383; background: #fff7fb; }
.pe-in.dirty .pe-v { color: #ad0c63; }
.pe-in.is-typing { box-shadow: 0 0 0 3px #fce4f1; }
.pe-in.is-typing::after { content: ""; position: absolute; right: 10px; top: 7px; bottom: 7px; width: 1.5px; background: #e11383; animation: peCaret 1s steps(1) infinite; }
@keyframes peCaret { 50% { opacity: 0; } }
.pe-diff { display: inline-flex; align-items: center; gap: 5px; font-size: 9.8px; font-weight: 700; color: #137a52; white-space: nowrap; animation: fadeIn .3s ease both; }
.pe-diff i { font-style: normal; font-size: 8.6px; padding: 1px 5px; border-radius: 6px; background: #e3f5ec; }
.pe-promo { font-size: 11px; color: #b3a9b8; text-align: center; }
.pe-dur { font-size: 9.6px; font-weight: 600; color: #5b5560; background: #f3eef4; padding: 3px 8px; border-radius: 20px; white-space: nowrap; justify-self: start; }
.pe-foot { display: flex; justify-content: flex-end; gap: 8px; min-height: 52px; padding: 10px 16px; border-top: 1px solid #f0ebf1; }
.pe-foot .t-b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 10.8px; transition: transform .15s, background .25s; }
.pe-foot .t-b svg { width: 12px; height: 12px; }
.pe-foot .t-b.tap { animation: peTap .45s var(--ease) both; }
@keyframes peTap { 40% { transform: scale(.94); filter: brightness(.9); } }
.pe-lead { margin: 2px 0 10px; font-size: 11.4px; line-height: 1.45; color: #4a4150; }
.pe-list { display: grid; gap: 6px; }
.pe-crow { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid #f0ebf1; border-radius: 10px; background: #fcfbfc; font-variant-numeric: tabular-nums; }
.pe-cp { display: inline-flex; align-items: center; gap: 8px; font-size: 11.6px; }
.pe-cp s { color: #716877; }
.pe-cp svg { width: 12px; height: 12px; color: #716877; }
.pe-cp b { color: #137a52; font-weight: 800; }
.pe-dry { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 10px; border-radius: 9px; background: #eef9f3; color: #137a52; font-size: 10.6px; font-weight: 600; }
.pe-dry svg { width: 14px; height: 14px; }
.pe-sync { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 8px 28px; }
.sync-title { margin: 0 0 4px; font-size: 13px; font-weight: 800; animation: fadeIn .3s ease both; }
.sync-step { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #f0ebf1; border-radius: 12px; background: #fff; transition: background .3s, border-color .3s; }
.sync-step.run { border-color: #f5c2df; background: #fff7fb; }
.sync-step.done { border-color: #cfeedd; background: #f3fbf7; }
.sync-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f5f1f6; color: #6c6272; transition: background .3s, color .3s; }
.sync-step.run .sync-ic { background: #fce4f1; color: #e11383; }
.sync-step.done .sync-ic { background: #e3f5ec; color: #137a52; }
.sync-ic svg { width: 14px; height: 14px; }
.sync-ic.iso { color: #fff; }
.sync-ic.iso svg { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 15px; height: 15px; }
.sync-ic.iso-web, .sync-step.done .sync-ic.iso-web, .sync-step.run .sync-ic.iso-web { background: linear-gradient(135deg, #f472b6, #c026d3); color: #fff; }
.sync-ic.iso-tur, .sync-step.done .sync-ic.iso-tur, .sync-step.run .sync-ic.iso-tur { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
.sync-ic.iso-goo, .sync-step.done .sync-ic.iso-goo, .sync-step.run .sync-ic.iso-goo { background: linear-gradient(135deg, #34a0f5, #1a73e8); color: #fff; }
.sync-step.idle .sync-ic.iso { opacity: .55; }
.sync-step.done .ok { animation: okPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes okPop { from { transform: scale(0); } to { transform: none; } }
.sync-lab { flex: 1; font-size: 11.6px; font-weight: 600; }
.sync-step.idle .sync-lab { color: #716877; }
.sync-state { width: 20px; height: 20px; display: grid; place-items: center; }
.sync-state .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #f5d3e6; border-top-color: #e11383; animation: spin .7s linear infinite; }
.sync-state .ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1f9d6b; color: #fff; animation: mvTilde var(--r-tilde-d) var(--r-tilde) both; }
.sync-state .ok svg { width: 11px; height: 11px; stroke-width: 3; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0d8df; }
.pe-res { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 10.6px; font-weight: 700; color: #137a52; animation: popIn var(--r-aviso-d) var(--r-aviso) both; }
.pe-res svg { width: 13px; height: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pe-bg, .pe-card, .pe-st, .pe-v, .pe-diff, .sync-title, .sync-state .ok, .pe-res, .lp-table tr.is-fresh td, .lp-table tr.is-fresh .lp-ic, .lp-ed.tap { animation: none !important; }
  .sync-state .spin { animation-duration: 2.4s; }
}

/* ---------- Estadística: dona, área, cilindros y anillos (con los colores de la app) ---------- */
.nx { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 9px 14px 10px; overflow: hidden; }
.nx svg { overflow: visible; }
.nx-card, .nx-tile { background: #fff; border: 1px solid #ece7ee; border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 10, 25, .05), 0 8px 24px rgba(20, 10, 25, .04); }
.nx-r1 { flex: none; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 8px; }
.nx-fact { padding: 11px 15px 8px; }
.nx-fact .lbl { font-size: 10.4px; font-weight: 650; color: #6c6272; }
.nx-fact .num { display: flex; align-items: center; gap: 9px; margin: 1px 0 3px; }
.nx-fact .num b { font-size: 29px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nx-fact .sub { margin: 0; font-size: 10.2px; line-height: 1.4; color: #6c6272; }
.nx-fact .sub b { color: #1d171f; }
.nx-tend { margin-top: 6px; }
.nx-tend .nx-spark { display: block; width: 100%; height: auto; }
.nx-meses { display: flex; justify-content: space-between; padding: 2px 0 0; font-size: 8.4px; color: #a39aa8; }
.nx-meses span:last-child { color: #e11383; font-weight: 700; }
.nx-spark .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nxTrazo 1.1s var(--c-salida) .2s forwards; }
.nx-spark .ar { opacity: 0; animation: fadeInQ .6s ease .7s forwards; }
@keyframes nxTrazo { to { stroke-dashoffset: 0; } }
.nx-medios { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px; }
.nx-dona-w { position: relative; width: 112px; height: 112px; }
.nx-dona { width: 100%; height: 100%; }
.nx-dona circle { fill: none; stroke-width: 15; }
.nx-dona .seg { stroke-linecap: butt; opacity: 0; transform-origin: 60px 60px; animation: nxSeg .6s var(--c-salida) both; }
@keyframes nxSeg { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.nx-dona-w .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.nx-dona-w .c b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.nx-dona-w .c small { font-size: 9px; color: #716877; font-weight: 600; }
.nx-ley h4 { margin: 0 0 6px; font-size: 11.4px; font-weight: 750; }
.nx-ley ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.nx-ley li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 32px; align-items: center; gap: 7px; font-size: 10.4px; }
.nx-ley li > i { width: 9px; height: 9px; border-radius: 3px; }
.nx-ley .n { font-weight: 600; }
.nx-ley .n small { margin-left: 5px; font-size: 9px; font-weight: 500; color: #716877; }
.nx-ley b { font-variant-numeric: tabular-nums; }
.nx-ley em { font-style: normal; text-align: right; font-size: 9.8px; font-weight: 700; color: #6c6272; font-variant-numeric: tabular-nums; }
.nx-tiles { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nx-tile { padding: 7px 10px 7px; }
.nx-tile .t { display: flex; align-items: center; gap: 6px; font-size: 9.8px; font-weight: 650; color: #6c6272; }
.nx-tile .t .nm-delta { margin-left: auto; }
.nx-tile .ic { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: #fdf0f7; color: #b80e6a; }
.nx-tile .ic svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-tile-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 3px; }
.nx-tile-b b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nx-tile-b small { display: block; font-size: 9px; color: #716877; white-space: nowrap; }
.nx-tile .nx-spark { flex: none; width: 70px; height: 28px; }
.nx-ring { flex: none; width: 34px; height: 34px; }
.nx-ring circle { fill: none; stroke-width: 4.5; }
.nx-ring .arc { stroke-linecap: round; animation: nxRing .9s var(--c-salida) .3s both; }
.nx-ring text { font: 800 8.4px var(--ui); fill: #1d171f; }
@keyframes nxRing { from { stroke-dasharray: 0 100; } }
.nx-r3 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 8px; }
.nx-r3 .nx-card { min-height: 0; padding: 9px 12px 8px; display: flex; flex-direction: column; }
.nx-r3 .nm-head { margin-bottom: 4px; }
.nx-area { display: block; width: 100%; flex: 1; min-height: 0; }
.nx-claves { display: flex; gap: 12px; margin: 0 0 2px; font-size: 9.4px; color: #6c6272; }
.nx-claves span { display: inline-flex; align-items: center; gap: 5px; }
.nx-claves i { display: inline-block; }
.nx-claves .l { width: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #7d3ce3, #e11383); }
.nx-claves .p { width: 14px; height: 0; border-top: 1.5px dashed rgba(29, 23, 31, .45); }
.nx-claves .c { width: 8px; height: 10px; border-radius: 2px; background: #efe9f1; }
.nx-area .tk { stroke: #efe9f0; stroke-width: 1; stroke-dasharray: 3 3; }
.nx-area .ty, .nx-area .tx { font: 500 9px var(--ui); fill: #716877; font-variant-numeric: tabular-nums; }
.nx-area .cerr { fill: #f4eff5; }
.nx-area .ln { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-area .pt { fill: #fff; stroke: #c4307e; stroke-width: 1.2; }
.nx-area .prom { stroke: rgba(29, 23, 31, .38); stroke-width: 1.2; stroke-dasharray: 5 4; }
.nx-area .corre { transform-origin: 0 0; animation: nxCorre 1.4s var(--c-salida) .15s both; }
.nx-area .mejor { animation: popIn .5s var(--r-aviso) 1.3s both; transform-box: fill-box; transform-origin: center; }
@keyframes nxCorre { from { transform: scaleX(0); } }
/* Equipo: cápsulas planas. El relleno, en el color de cada profesional, crece
   desde abajo sobre su pista (el mismo color, clarito): sin luces ni sombras. */
.nx-caps { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 2px 2px 0; }
.nx-cap { min-height: 0; display: flex; flex-direction: column; align-items: center; }
.nx-cap .v { font-size: 9.6px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 6px; white-space: nowrap; }
.nx-cap .pista { position: relative; flex: 1; min-height: 0; width: 24px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, #fff); overflow: hidden; }
.nx-cap .pista i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 12px; background: var(--c); animation: nxCap .9s var(--c-salida) var(--d) both; }
.nx-cap .n { margin-top: 7px; font-size: 10px; font-weight: 700; }
.nx-cap small { font-size: 8.4px; color: #716877; white-space: nowrap; }
@keyframes nxCap { from { clip-path: inset(100% 0 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.nx-pie { margin: 5px 0 0; font-size: 9.2px; color: #6c6272; text-align: center; }
/* Anillos: una vuelta por servicio, proporcional a lo facturado. */
.nx-serv-b { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nx-anillos { width: 100%; max-width: 148px; flex: 1; min-height: 0; }
.nx-anillos circle { fill: none; stroke-width: 7.5; stroke-linecap: round; }
.nx-anillos .arc { animation: nxRing 1s var(--c-salida) both; }
.nx-serv-b ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 2px; }
.nx-serv-b li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 36px; align-items: center; gap: 6px; font-size: 9.6px; }
.nx-serv-b li > i { width: 8px; height: 8px; border-radius: 50%; }
.nx-serv-b span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-serv-b b { font-variant-numeric: tabular-nums; }
.nx-serv-b em { font-style: normal; text-align: right; color: #716877; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .nx-spark .ln, .nx-spark .ar, .nx-dona .seg, .nx-ring .arc, .nx-area .corre, .nx-area .mejor, .nx-cap .pista i, .nx-anillos .arc { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------- */
/* Mapa de módulos con qué hace cada uno (11/10). Cada módulo es un link:  */
/* a su destacado o a su tarjeta de «Y además». En el celular cada grupo   */
/* es un acordeón (details) y arranca abierto sólo el primero (app.js).    */
/* ---------------------------------------------------------------------- */
.mapa-g { padding: 22px 22px 14px; }
.mapa-h { list-style: none; display: flex; align-items: center; gap: 8px; cursor: default; }
.mapa-h::-webkit-details-marker { display: none; }
.mapa-h > span:first-child { flex: 1; }
.mapa-k { font-size: 12px; font-weight: 600; color: var(--on-plum-2); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 1px 8px; }
.mapa-cv { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.mapa li { display: block; padding: 0; }
.mapa li a { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 11px 6px 11px 0; background: none; color: #fff; border-radius: 10px; transition: background .2s, padding .2s var(--ease); }
.mapa-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.mapa-d { grid-column: 1; font-size: 13.5px; line-height: 1.4; color: var(--on-plum-2); margin-top: 2px; }
.mapa-go { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .35; transition: opacity .2s, transform .25s var(--ease); }
.mapa li a:hover { background: rgba(255, 255, 255, .05); padding-left: 8px; color: #fff; }
.mapa li a:hover .mapa-n { color: #ff9ccb; }
.mapa li a:hover .mapa-go { opacity: 1; transform: translateX(2px); color: #ff9ccb; }
.mapa .mapa-n { color: inherit; transition: color .2s; }
.mapa .st-curso .mapa-n { color: var(--on-plum-2); }
.mapa li a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mas-card.is-target { border-color: var(--fuchsia); box-shadow: 0 0 0 3px rgba(225, 19, 131, .14); transition: border-color .2s, box-shadow .2s; }

@media (max-width: 720px) {
  .mapa { padding: 6px; border-radius: 22px; }
  .mapa-g { padding: 0 16px; }
  .mapa-h { cursor: pointer; padding: 16px 0; margin: 0; border-bottom: 0; font-size: 15px; color: #fff; }
  .mapa-g[open] .mapa-h { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .mapa-cv { display: block; color: var(--on-plum-2); }
  .mapa-g[open] .mapa-cv { transform: rotate(180deg); }
  .mapa ul { padding-bottom: 8px; }
  .mapa li a { padding: 12px 2px 12px 0; }
  .mapa li a:hover { padding-left: 0; background: none; }
  .mapa-go { opacity: .5; }
}

/* Hecho con criterio: cada regla con su ícono; la promesa se lee sola. */
.crit-h { display: flex; align-items: center; gap: 10px; }
.crit-spark { width: 22px; height: 22px; flex: none; fill: none; stroke: #ff9ccb; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crit-list dt { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 17.5px; line-height: 1.3; color: #fff; }
.crit-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 156, 203, .08); border: 1px solid rgba(255, 156, 203, .16); color: #ff9ccb; }
.crit-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crit-list dd { margin: 2px 0 0 52px; font-size: 15.5px; line-height: 1.5; }
@media (max-width: 720px) {
  .crit-h { font-size: 23px; }
  .crit-list > div { padding: 15px 0; }
  .crit-list dt { gap: 12px; font-size: 16px; line-height: 1.3; }
  .crit-ic { width: 32px; height: 32px; border-radius: 9px; }
  .crit-ic svg { width: 16px; height: 16px; }
  .crit-list dd { margin-left: 44px; font-size: 14.5px; }
}

/* En el celular, las dos listas de «Hecho con criterio» son acordeones como el mapa. */
.crit-h { list-style: none; cursor: default; }
.crit-h::-webkit-details-marker { display: none; }
.crit-t { flex: 1; }
.crit-k, .crit-cv { display: none; }
@media (max-width: 720px) {
  .crit-cols { gap: 0; }
  .crit-col + .crit-col { margin-top: 4px; }
  .crit-h { cursor: pointer; padding: 18px 0 16px; }
  .crit-col:not([open]) .crit-h { border-bottom-color: rgba(255,255,255,.1); }
  .crit-k { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--on-plum-2); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 1px 8px; }
  .crit-cv { display: block; width: 18px; height: 18px; fill: none; stroke: var(--on-plum-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
  .crit-col[open] .crit-cv { transform: rotate(180deg); }
}

/* La factura de ejemplo que aparece al facturar (12/10, como en el video). */
.t-fact { position: absolute; right: 22px; top: 70px; z-index: 40; width: 280px; pointer-events: none; font-family: var(--sans); animation: factIn var(--r-modal-d) var(--r-modal) both; transform-origin: 100% 0; }
.t-fact.is-leaving { animation: factOut .3s var(--c-acelera) both; }
.t-fact:not(.is-leaving) .tag { animation: mvTxtIn .4s var(--c-salida) .28s both; }
.t-fact:not(.is-leaving) .hoja > * { animation: mvTxtIn .45s var(--c-salida) both; }
.t-fact .hoja > :nth-child(1) { animation-delay: .16s; } .t-fact .hoja > :nth-child(2) { animation-delay: .22s; } .t-fact .hoja > :nth-child(3) { animation-delay: .28s; } .t-fact .hoja > :nth-child(4) { animation-delay: .34s; } .t-fact .hoja > :nth-child(5) { animation-delay: .4s; } .t-fact .hoja > :nth-child(6) { animation-delay: .46s; } .t-fact .hoja > :nth-child(7) { animation-delay: .52s; }
.t-fact .tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px 6px; padding: 5px 11px; border-radius: 999px; background: rgba(16, 10, 18, .78); color: #fff; font: 600 12px/1 var(--sans); }
.t-fact .tag i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf7a; box-shadow: 0 0 0 3px rgba(47, 191, 122, .25); }
.t-fact .hoja { background: #fff; border-radius: 10px; padding: 14px 16px 12px; color: #2b2330; font-size: 10.5px; line-height: 1.35; }
.t-fact .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 1px solid #eee; padding-bottom: 9px; }
.t-fact .cab b { font: italic 400 17px/1 var(--serif); }
.t-fact .cab small { display: block; color: #716877; font-size: 9px; margin-top: 3px; }
.t-fact .letra { width: 30px; height: 30px; border: 1.5px solid #2b2330; border-radius: 5px; display: grid; place-items: center; font: 700 17px/1 var(--sans); flex: none; }
.t-fact .num { text-align: right; white-space: nowrap; } .t-fact .num b { font: 700 11px var(--sans); display: block; } .t-fact .num small { color: #716877; font-size: 9px; display: block; }
.t-fact .fila { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #eee; }
.t-fact .tot { display: flex; justify-content: space-between; padding-top: 8px; font: 700 14px var(--sans); }
.t-fact .pie { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #eee; color: #137a52; font-weight: 600; font-size: 10px; }
.t-fact .pie small { display: block; color: #716877; font-weight: 500; }
.t-fact .qr { width: 34px; height: 34px; background: repeating-conic-gradient(#2b2330 0 25%, #fff 0 50%) 0 0 / 8px 8px; border: 3px solid #2b2330; border-radius: 3px; flex: none; }
@keyframes factIn { from { opacity: 0; transform: translateY(-18px) scale(.86) rotate(-5deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes factOut { to { opacity: 0; transform: translateY(-14px) scale(.94) rotate(2deg); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .t-fact, .t-stars .st, .sync-step.done .ok { animation: none; } }

/* Los precios que cambian no se reemplazan: cuentan del viejo al nuevo (el mismo contador
   de la caja). Mientras cuentan, el número Y su signo se encienden en fucsia y crecen apenas,
   juntos: el $ es parte del precio (12/10, Chris). */
.cnt-m { display: inline-flex; align-items: baseline; gap: .12em; transform-origin: 0 60%; transition: color .35s ease, transform .5s var(--r-aviso, ease); }
.cnt-m [data-cnt] { font-variant-numeric: tabular-nums; }
.cnt-m:has(.is-cnt) { color: #e11383; transform: scale(1.07); }
.pe-v [data-cnt] { font-variant-numeric: tabular-nums; }
.pe-in .pe-pre { margin-right: 2px; transition: color .35s ease; }
.pe-in.dirty .pe-pre { color: #ad0c63; }
.pe-in:has(.is-cnt) .pe-pre, .pe-in:has(.is-cnt) .pe-v { color: #e11383; }
.pe-v { transition: color .35s ease; }
.pe-diff i [data-cnt] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .cnt-m { transition: none; transform: none !important; } }

/* Avatares de clientes: degradé suave del tono de cada persona, iniciales en el mismo tono
   oscuro, un brillo arriba y un filo fino. Las profesionales siguen en su color pleno. */
.av-cli {
  --h: 330;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%),
    linear-gradient(145deg, hsl(var(--h) 90% 93%), hsl(var(--h) 62% 80%));
  color: hsl(var(--h) 58% 30%) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--h) 45% 55% / .22), 0 1px 2px hsl(var(--h) 40% 30% / .14);
  font-weight: 700 !important; letter-spacing: .02em;
}
.cl-av.av-cli { width: 28px; height: 28px; font-size: 10px; }
.ch-av.av-cli { font-size: 10.5px; }

/* El cupón del mail de campaña (12/10, Chris): un ticket de verdad. Arriba la marca y el
   descuento grande (el número cuenta al abrir el mail), un corte troquelado con muescas a
   los costados, y abajo el código con su botón de copiar y las condiciones. */
.ph-mail .cp-mail { gap: 12px; }
.cp { position: relative; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #2a1730 0%, #7d1d5c 55%, #e11383 100%); box-shadow: 0 14px 28px -16px rgba(125, 29, 92, .7); animation: cpIn .7s var(--r-aviso) .25s both; }
.cp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(248, 156, 177, .45), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(125, 60, 227, .35), transparent 60%); pointer-events: none; }
.cp::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); animation: cpBrillo 1.1s ease-out 1.1s both; pointer-events: none; }
.cp-top { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 10px; padding: 13px 15px 12px; }
.cp-marca { grid-column: 1 / -1; font: italic 400 13px/1 var(--serif); opacity: .85; margin-bottom: 6px; }
.cp-pct { font: 400 46px/.9 var(--serif); letter-spacing: -.03em; display: inline-flex; align-items: flex-start; }
.cp-pct [data-cnt] { font-variant-numeric: tabular-nums; }
.cp-pct i { font-style: normal; font-size: 22px; margin: 4px 0 0 2px; opacity: .9; }
.cp-que { grid-column: 1; grid-row: 2; font-size: 10.6px; line-height: 1.3; opacity: .92; max-width: 11em; }
.cp-top .cp-pct { grid-column: 2; grid-row: 2 / span 2; }
.cp-corte { position: relative; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, .45); margin: 0 14px; }
.cp-corte::before, .cp-corte::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.cp-corte::before { left: -24px; } .cp-corte::after { right: -24px; }
.cp-bot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 15px 6px; }
.cp-cod small { display: block; font-size: 8.6px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.cp-cod b { display: block; font: 800 17px/1.1 var(--ui, var(--sans)); letter-spacing: .14em; margin-top: 2px; }
.cp-uso { flex: none; text-align: right; font-size: 8.8px; line-height: 1.3; opacity: .82; }
.cp-cond { position: relative; display: flex; align-items: center; gap: 5px; padding: 2px 15px 12px; font-size: 9.4px; opacity: .8; }
.cp-cond svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.ph-mail .b.cp-cta { border: 0; border-radius: 999px; background: #e11383; color: #fff; box-shadow: 0 8px 18px -10px rgba(225, 19, 131, .8); }
@keyframes cpIn { from { opacity: 0; transform: translateY(10px) scale(.95) rotate(-1.5deg); filter: blur(4px); } }
@keyframes cpBrillo { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .cp, .cp::after { animation: none; } .cp::after { display: none; } }

/* Avisos de una clienta: su avatar (el mismo de Clientes y Charlas) con una insignia
   de lo que pasó —turno nuevo, cancelación, reseña— abajo a la derecha (12/10, Chris). */
.t-toast .ic.ic-av { position: relative; width: 34px; height: 34px; border-radius: 50%; font: 700 11.5px/1 var(--ui, var(--sans)); }
.t-toast .ic-ev { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 9px/1 var(--ui, var(--sans)); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.t-toasts .t-toast:not(.is-leaving) .ic-ev { animation: mvIcPop var(--r-ok-d) var(--r-ok) .22s both; }
.t-toast > div > span { display: block; line-height: 1.4; margin-top: 2px; }
.t-toast > div > b { line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .t-toast .ic-ev { animation: none !important; } }


/* La factura de la demo copia el diseño del comprobante real del salón (12/10, Chris):
   emisor, el recuadro de la letra con su código, el número arriba a la derecha, la banda
   gris del cliente, la tabla con cabecera oscura, el TOTAL en barra, la leyenda de la
   Ley 27.743 y el pie con QR y CAE. Datos de ejemplo. */
.t-fact { width: 318px; }
.t-fact .hoja { padding: 12px 13px 11px; font-size: 9px; line-height: 1.3; color: #2b2330; border-radius: 6px; }
.fx-cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }
.fx-emisor b { display: block; font: 800 10.5px/1.1 var(--sans); letter-spacing: .02em; }
.fx-emisor small, .fx-nro small { display: block; color: #777; font-size: 7.6px; margin-top: 2px; }
.fx-letra { display: grid; justify-items: center; border: 1px solid #333; border-top: 0; padding: 0 7px 3px; margin-top: -12px; background: #fff; }
.fx-letra small { font-size: 6.4px; color: #555; letter-spacing: .04em; }
.fx-letra small:first-child { margin: 2px 0 0; color: #888; }
.fx-letra b { font: 800 19px/1 var(--sans); }
.fx-nro { text-align: right; }
.fx-nro > b { display: block; font: 800 10.5px/1.1 var(--sans); }
.fx-nro > span { display: block; font: 700 8.6px/1.2 var(--sans); white-space: nowrap; }
.fx-nro small b { color: #2b2330; }
.fx-cli { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 8px; background: #f1f1f1; border-radius: 2px; }
.fx-cli small { display: block; color: #8a8a8a; font-size: 7.2px; text-transform: uppercase; letter-spacing: .05em; }
.fx-cli b { display: block; font-size: 9.4px; }
.fx-cli > div > small:last-child:not(:first-child) { text-transform: none; letter-spacing: 0; font-size: 7.8px; color: #555; }
.fx-cli .d { text-align: right; }
.fx-tabla { margin-top: 8px; }
.fx-tabla .th, .fx-tabla .td { display: grid; align-items: center; grid-template-columns: 30px 1fr auto; gap: 6px; padding: 4px 7px; }
.fx-tabla .th { background: #4a4a4a; color: #fff; font-weight: 700; font-size: 7.8px; }
.fx-tabla .td { border-bottom: 1px solid #e5e5e5; }
.fx-tabla span:first-child { text-align: center; }
.fx-tot { display: grid; gap: 3px; margin: 7px 0 0 auto; width: 62%; }
.fx-tot .sub { display: flex; justify-content: space-between; padding: 4px 7px; background: #f1f1f1; font-size: 8.2px; }
.fx-tot .total { display: flex; justify-content: space-between; padding: 5px 7px; background: #4a4a4a; color: #fff; font: 800 11px/1 var(--sans); }
.fx-ley { display: grid; gap: 2px; margin-top: 8px; font-size: 7.6px; }
.fx-ley b { font-size: 7.8px; }
.fx-ley span { color: #777; display: flex; justify-content: space-between; max-width: 60%; }
.fx-ley i { font-style: normal; color: #2b2330; }
.fx-pie { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #ddd; }
.fx-pie b { display: block; font: 800 9.4px/1.2 var(--sans); }
.fx-pie small { display: block; color: #777; font-size: 7.6px; }
.fx-pie small.ej { color: #ad0c63; margin-top: 2px; }
/* Un QR de verdad (12/10, Chris): se puede escanear y lleva a hebra.one. */
.t-fact .fx-pie .qr { width: 42px; height: 42px; padding: 2px; box-sizing: border-box; border: 0; border-radius: 0; background: #fff url(/img/qr-demo.svg) center / 100% 100% no-repeat; image-rendering: pixelated; }

/* La factura como ticket recién cortado: centrada en la terminal, derecha, con el borde de
   abajo en picos parejos (máscara) y la sombra afuera del recorte (12/10, Chris). */
.t-fact { right: 16px; top: 62px; transform-origin: 100% 0; filter: drop-shadow(0 22px 26px rgba(20, 8, 26, .32)) drop-shadow(0 0 1px rgba(0, 0, 0, .12)); }
.t-fact .tag { display: flex; width: max-content; margin: 0 6px 8px auto; }
.t-fact .hoja { --pico: 7px; border-radius: 6px 6px 0 0; padding-bottom: calc(11px + var(--pico));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--pico)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--pico)) var(--pico) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--pico)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--pico)) var(--pico) repeat-x; }
/* Alineación: todo a una misma grilla de dos columnas de importes. */
.fx-cab { grid-template-columns: 1fr 44px 1fr; }
.fx-letra { margin-top: -12px; width: 44px; box-sizing: border-box; }
.fx-tabla .th, .fx-tabla .td { grid-template-columns: 26px 1fr 78px; }
.fx-tabla span:last-child { text-align: right; }
.fx-tot { width: 64%; }
.fx-ley span { max-width: none; justify-content: flex-start; gap: 10px; }
.t-fact-vuela, .t-fact-vuela * { animation: none !important; }

/* Los puntos de la línea de tiempo, del color de la hebra en su lugar (--c, app.js): los que
   faltan con el borde de ese color, apagado como el hilo fino; los recorridos llenos (12/10). */
.hero .tl-dot { border-color: color-mix(in srgb, var(--c, #6c5876) 72%, var(--plum)); }
.hero .tl-node.is-past .tl-dot { background: var(--c, var(--fuchsia)); border-color: var(--c, var(--fuchsia)); }
.hero .tl-node.is-active .tl-dot { border-color: var(--c, var(--fuchsia)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--fuchsia)) 18%, transparent); }
.hero .tl-node.is-active .tl-dot::after { border-color: var(--c, var(--fuchsia)); }

/* «Continuar» al terminar la demo: abajo al centro de la escena, vidrio sutil, y el chevron
   que baja y vuelve en loop. Sólo aparece cuando el día terminó (app.js, seguir). */
.demo-seguir { position: absolute; left: 50%; bottom: 18px; z-index: 30; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 6px; border-radius: 999px; color: rgba(255, 255, 255, .86); text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; background: rgba(23, 16, 24, .38); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 10px); transition: opacity .6s ease, transform .7s var(--r-aviso, ease), background .25s, color .25s; }
.demo-seguir.is-on { opacity: 1; transform: translate(-50%, 0); }
.demo-seguir:hover, .demo-seguir:focus-visible { background: rgba(23, 16, 24, .55); color: #fff; }
.demo-seguir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: seguirBaja 1.8s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes seguirBaja { 0%, 100% { transform: translateY(-2px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demo-seguir { transition: opacity .3s; transform: translate(-50%, 0); } .demo-seguir svg { animation: none; } }
.demo-seguir[hidden] { display: none; }

/* Estado de las campañas: columnas de ancho fijo, así la tabla no se mueve cuando la fila
   pasa de «Borrador» a «Enviando» a «Enviada» y los números crecen (12/10, Chris). */
.cm-ult { table-layout: fixed; }
.cm-ult td:first-child { overflow: hidden; text-overflow: ellipsis; }
.cm-ult .cm-badge { min-width: 74px; justify-content: center; box-sizing: border-box; }
.cm-ult .cm-met { min-width: 0; }

/* El asistente de campaña: pasos, constructor del mail, oferta y revisar (12/10, Chris). */
.cw, .cw-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #f7f5f8; }
.cw { animation: cwIn .45s var(--c-salida) both; }
.cw.is-leaving { position: absolute; inset: 0; z-index: 2; animation: cwOut .32s var(--c-acelera) both; }
.cw-panel { animation: cwIn .5s var(--c-salida) .1s both; }
.cw-panel.is-leaving { position: absolute; inset: 0; animation: cwOut .25s var(--c-acelera) both; }
@keyframes cwIn { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } }
@keyframes cwOut { to { opacity: 0; transform: translateY(-8px) scale(.985); filter: blur(4px); } }
.cw-steps { flex: none; list-style: none; margin: 0; padding: 10px 18px 8px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-bottom: 1px solid #ece7ee; }
.cw-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 9.6px/1.2 var(--ui); color: #9a90a0; text-align: center; }
.cw-step-linea { position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: #ece7ee; z-index: 0; overflow: hidden; }
.cw-step:first-child .cw-step-linea { display: none; }
.cw-step-linea i { display: block; height: 100%; background: #e11383; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--c-salida); }
.cw-step.on .cw-step-linea i, .cw-step.hecho .cw-step-linea i { transform: scaleX(1); }
.cw-step-n { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #ddd3df; font: 700 10px var(--ui); color: #9a90a0; transition: background .3s, border-color .3s, color .3s, box-shadow .3s; }
.cw-step-n svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; }
.cw-step.hecho .cw-step-n { background: #e11383; border-color: #e11383; }
.cw-step.on .cw-step-n { border-color: #e11383; color: #e11383; box-shadow: 0 0 0 4px rgba(225, 19, 131, .14); }
.cw-step.on { color: #1d171f; }
.cw-cuerpo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cw-paso { position: absolute; inset: 0; padding: 12px 16px; animation: cwPasoIn .45s var(--c-salida) both; }
.cw-paso.is-leaving { animation: cwPasoOut .3s var(--c-acelera) both; }
@keyframes cwPasoIn { from { opacity: 0; transform: translateX(36px); filter: blur(4px); } }
@keyframes cwPasoOut { to { opacity: 0; transform: translateX(-36px); filter: blur(4px); } }
.cw-paso-t { margin: 0 0 10px; font: 700 13px var(--ui); color: #1d171f; }
.cw-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; background: #fff; border-top: 1px solid #ece7ee; font-size: 10px; }
.cw-foot .t-b { display: inline-flex; align-items: center; gap: 5px; }
.cw-foot .t-b svg, .cw-enviar .t-b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.cw .t-b.tap { animation: peTap .45s var(--ease) both; }
/* Oferta */
.cw-ofertas { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; margin-bottom: 12px; }
.cw-op { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #ece7ee; font: 600 10px var(--ui); color: #6c6272; }
.cw-op.on { border-color: #e11383; box-shadow: 0 0 0 3px rgba(225, 19, 131, .12); color: #1d171f; animation: cwOp .5s var(--r-aviso) .35s both; }
.cw-op svg { width: 14px; height: 14px; fill: none; stroke: #e11383; stroke-width: 2; }
.cw-op small { font-weight: 500; font-size: 8.8px; color: #8a7f8f; }
@keyframes cwOp { from { border-color: #ece7ee; box-shadow: 0 0 0 0 rgba(225, 19, 131, 0); } }
.cw-cupon-fila { display: flex; align-items: center; gap: 18px; }
.cw-cond { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 10.4px; color: #2d2530; }
.cw-cond li { display: flex; align-items: center; gap: 6px; animation: mvTxtIn .4s var(--c-salida) both; }
.cw-cond li:nth-child(1) { animation-delay: .8s; } .cw-cond li:nth-child(2) { animation-delay: .95s; } .cw-cond li:nth-child(3) { animation-delay: 1.1s; }
.cw-cond svg { width: 12px; height: 12px; fill: none; stroke: #1f9d6b; stroke-width: 3; }
/* Revisar y enviar */
.cw-rev-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 10.6px; }
.cw-rev-l li { animation: mvTxtIn .4s var(--c-salida) both; } .cw-rev-l li:nth-child(2) { animation-delay: .08s; } .cw-rev-l li:nth-child(3) { animation-delay: .16s; } .cw-rev-l li:nth-child(4) { animation-delay: .24s; }
.cw-enviar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cw-enviar .t-b { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .cw, .cw-panel, .cw-paso, .cw-bw, .cw-bw::after, .cw-op, .cw-cond li, .cw-rev-l li, .cw-cupon-fila .cw-cupon { animation: none !important; } }

/* ── El mail de «Ya te toca» (campanas.css: .cm-mail-lienzo / .cm-mail-hoja / .cm-mb-*),
   el mismo en el constructor, en «Revisar y enviar» y en el teléfono. Medidas del real
   escaladas: --mh es la escala de cada lugar. */
.mh-lienzo { --mh: .62; background: #f5f3f5; padding: calc(22px * var(--mh)) calc(14px * var(--mh)) calc(24px * var(--mh)); display: flex; flex-direction: column; gap: calc(14px * var(--mh)); color: #1d171f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; text-align: center; }
.mh-hoja { background: #fff; border: 1px solid #ece7ee; border-radius: calc(18px * var(--mh)); border-top: calc(5px * var(--mh)) solid #1d171f; padding-bottom: calc(16px * var(--mh)); overflow: visible; }
.mh-b { position: relative; padding: 0 calc(38px * var(--mh)) calc(14px * var(--mh)); outline: 2px solid transparent; outline-offset: -2px; border-radius: 6px; transition: outline-color .2s; }
.mh-b.sel { outline-color: #e11383; }
.mh-b--logo { padding-top: calc(34px * var(--mh)); padding-bottom: calc(24px * var(--mh)); }
.mh-logo { display: block; margin: 0 auto calc(18px * var(--mh)); font: italic 400 calc(30px * var(--mh))/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.mh-raya { display: block; width: calc(52px * var(--mh)); margin: 0 auto; border-top: 1px solid #ece7ee; }
.mh-b--imagen { padding-bottom: calc(20px * var(--mh)); }
.mh-img { display: block; width: 100%; height: calc(150px * var(--mh)); object-fit: cover; object-position: 50% 30%; border-radius: calc(12px * var(--mh)); }
.mh-tit { margin: 0; font: 400 calc(23px * var(--mh))/1.25 Georgia, 'Times New Roman', serif; }
.mh-txt p { margin: 0 0 calc(12px * var(--mh)); font-size: calc(15px * var(--mh)); line-height: 1.75; color: #55495c; }
.mh-txt p:last-child { margin-bottom: 0; }
.mh-b--cupon { padding-top: calc(4px * var(--mh)); padding-bottom: calc(22px * var(--mh)); }
.mh-cupon { border: 1px dashed #1d171f; background: #fffafd; border-radius: calc(14px * var(--mh)); padding: calc(18px * var(--mh)) calc(16px * var(--mh)); display: flex; flex-direction: column; gap: calc(4px * var(--mh)); text-align: center; }
.mh-cupon small { text-transform: uppercase; letter-spacing: .22em; font-size: calc(11px * var(--mh)); color: #8b8290; }
.mh-cupon strong { font: 400 calc(28px * var(--mh))/1.15 Georgia, 'Times New Roman', serif; letter-spacing: .08em; color: #1d171f; }
.mh-cupon span { font-size: calc(13px * var(--mh)); line-height: 1.6; color: #55495c; }
.mh-b--boton { padding-top: calc(8px * var(--mh)); padding-bottom: calc(26px * var(--mh)); }
.mh-btn { display: inline-block; background: #1d171f; color: #fff; font-weight: 600; font-size: calc(15px * var(--mh)); padding: calc(14px * var(--mh)) calc(34px * var(--mh)); border-radius: 999px; }
.mh-redes { font-size: calc(11px * var(--mh)); letter-spacing: .22em; text-transform: uppercase; }
.mh-pie { display: flex; flex-direction: column; gap: calc(4px * var(--mh)); }
.mh-pie b { font-size: calc(11px * var(--mh)); letter-spacing: .22em; text-transform: uppercase; font-weight: 400; }
.mh-pie span, .mh-pie u { font-size: calc(12px * var(--mh)); line-height: 1.7; color: #8b8290; }
.mh-var { display: inline-block; padding: 0 4px; border-radius: 5px; background: #f1e9fd; color: #6b3fc0; font: 600 .9em/1.45 ui-monospace, Menlo, monospace; }
/* La barra del bloque elegido (subir, bajar, duplicar, quitar), encima del borde. */
.mh-acc { position: absolute; bottom: calc(100% - 2px); right: 8px; z-index: 3; display: flex; align-items: center; gap: 1px; padding: 2px 3px; border-radius: 7px 7px 0 0; background: #e11383; animation: mvTxtIn .3s var(--c-salida) both; }
.mh-b:first-child .mh-acc { bottom: auto; top: 4px; border-radius: 7px; }
.mh-acc svg { width: 15px; height: 13px; padding: 0 2px; fill: none; stroke: #fff; stroke-width: 2; }
.mh-acc i { width: 1px; height: 10px; margin: 0 2px; background: rgba(255, 255, 255, .4); }

/* ── El constructor (EmailBuilder.tsx), en chico ── */
.cw-eb { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.cw-eb-env { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-eb-campo { background: #fff; border: 1px solid #ece7ee; border-radius: 10px; padding: 6px 10px 5px; display: flex; flex-direction: column; gap: 3px; }
.cw-eb-campo > small, .cw-f > small { font: 650 9.6px var(--ui); color: #1d171f; }
.cw-eb-campo > em { font-style: normal; font-size: 8.4px; color: #8b8290; }
.cw-eb-fila { display: flex; gap: 6px; align-items: center; }
.cw-in { flex: 1; min-width: 0; border: 1px solid #e3dbe5; border-radius: 7px; padding: 4px 7px; font-size: 9.6px; line-height: 1.45; color: #1d171f; background: #fff; white-space: normal; }
.cw-eb-fila .cw-in { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-ia-rosa { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; background: #fce4f1; color: #e11383; font: 650 9px var(--ui); white-space: nowrap; }
.cw-ia-rosa svg, .cw-ia-todo svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.cw-eb-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr) 168px; gap: 9px; }
.cw-eb-izq, .cw-eb-der { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cw-card { background: #fff; border: 1px solid #ece7ee; border-radius: 10px; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.cw-card h4 { margin: 0; font: 700 10.4px var(--ui); color: #1d171f; }
.cw-card em { font-style: normal; font-size: 8.4px; color: #8b8290; line-height: 1.35; }
.cw-paleta { display: flex; flex-direction: column; gap: 3px; }
.cw-pal { display: flex; align-items: center; gap: 7px; padding: 3px 7px; border: 1px solid #ece7ee; border-radius: 7px; font: 500 9.4px var(--ui); color: #1d171f; background: #fff; }
.cw-pal svg { width: 11px; height: 11px; fill: none; stroke: #1d171f; stroke-width: 2; flex: none; }
.cw-pal.tap { animation: cwPal .7s var(--ease) both; }
@keyframes cwPal { 25% { transform: scale(.95); background: #fce4f1; border-color: #e11383; color: #e11383; } 100% { transform: none; } }
.cw-vars { display: flex; flex-wrap: wrap; gap: 3px; }
.cw-var { font: 600 7.8px ui-monospace, Menlo, monospace; border: 1px solid #ece7ee; background: #f7f5f8; border-radius: 5px; padding: 2px 4px; color: #1d171f; transition: border-color .3s, color .3s, background .3s; }
.cw-var.usada { border-color: #d7c4f5; background: #f1e9fd; color: #6b3fc0; }
.cw-eb-lienzo { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 10px; border: 1px solid #ece7ee; background: #f3f0f4; }
.cw-eb-lienzo-top { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cw-ia-todo { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 7px; border: 1px solid #e3dbe5; background: #fff; font: 600 9px var(--ui); color: #1d171f; }
.cw-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 7px; background: #ece7ee; }
.cw-seg > span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; font: 600 8.6px var(--ui); color: #6c6272; }
.cw-seg > span.on { background: #fff; color: #1d171f; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cw-seg svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.cw-gmail { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: 9px; overflow: hidden; border: 1px solid #ece7ee; }
.cw-gm-tb { flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-bottom: 1px solid #f1eef2; }
.cw-gm-tb i { width: 9px; height: 9px; border-radius: 2px; background: #c4c7c5; }
.cw-gm-tb b { flex: 1; }
.cw-gm-rem { flex: none; display: flex; align-items: flex-start; gap: 7px; padding: 6px 10px 2px; font-family: Roboto, -apple-system, sans-serif; font-size: 9px; }
.cw-gm-rem > div { flex: 1; min-width: 0; }
.cw-gm-rem b { font-weight: 600; } .cw-gm-rem span { color: #5f6368; } .cw-gm-rem small { display: block; color: #5f6368; font-size: 8px; }
.cw-gm-rem time { color: #5f6368; font-size: 8px; }
.cw-gm-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1d171f; color: #fff; font: 700 7.5px var(--ui); }
.cw-gm-scroll { flex: 1; min-height: 0; overflow: hidden; }
.cw-gm-scroll .mh-lienzo { --mh: .56; background: #fff; padding-top: 6px; }
.cw-gm-scroll .mh-hoja { max-width: 330px; width: 100%; margin: 0 auto; }
.cw-eb .mh-b { animation: cwBloque .55s var(--r-aviso) both; }
@keyframes cwBloque { from { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(3px); } }
.cw-insp header { display: flex; justify-content: space-between; align-items: flex-start; }
.cw-insp header small { display: block; font-size: 8.6px; color: #8b8290; }
.cw-borrar svg { width: 12px; height: 12px; fill: none; stroke: #b0a6b4; stroke-width: 2; }
.cw-insp-cuerpo { display: flex; flex-direction: column; gap: 6px; animation: mvTxtIn .35s var(--c-salida) both; }
.cw-insp-vacio { margin: 0; font-size: 9px; }
.cw-f { display: flex; flex-direction: column; gap: 3px; }
.cw-insp-img { width: 100%; height: 46px; object-fit: cover; border-radius: 6px; }
.cw-tam > span { padding: 2px 5px; }
.cw-glob-f { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #55495c; }
.cw-glob-f b { font: 400 10px Georgia, serif; color: #1d171f; }
.cw-glob-f i { width: 16px; height: 12px; border-radius: 3px; border: 1px solid #ddd3df; }
/* Revisar y enviar: la fila de la bandeja y el mail entero, el mismo que va a llegar. */
.cw-rev { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr; gap: 14px; height: 100%; }
.cw-rev-mail { min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #ece7ee; border-radius: 10px; overflow: hidden; }
.cw-rev-fila { flex: none; display: flex; gap: 8px; align-items: center; padding: 6px 10px; font: 9px Roboto, -apple-system, sans-serif; border-bottom: 1px solid #f1eef2; white-space: nowrap; }
.cw-rev-fila > b { flex: none; width: 54px; } .cw-rev-fila span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5f6368; } .cw-rev-fila span b { color: #1d171f; } .cw-rev-fila time { color: #5f6368; }
.cw-rev-hoja { flex: 1; min-height: 0; overflow: hidden; }
.cw-rev-hoja .mh-lienzo { --mh: .5; }
.cw-rev-hoja .mh-hoja { max-width: 300px; margin: 0 auto; width: 100%; }
.cw-rev-der .cw-paso-t { margin-top: 2px; }
.cw-cup-grande { --mh: .9; width: 250px; flex: none; animation: cpIn .7s var(--r-aviso) .45s both; }
/* En el teléfono: el mismo mail, con las medidas que da el ancho del iPhone. */
.mh-tel { margin: 0 -14px; }
.mh-tel .mh-lienzo { --mh: .66; }
@media (prefers-reduced-motion: reduce) { .cw-eb .mh-b, .mh-acc, .cw-insp-cuerpo, .cw-cup-grande { animation: none !important; } }
.cw-rev-l small { display: block; font-size: 8.4px; text-transform: uppercase; letter-spacing: .06em; color: #9a90a0; font-weight: 600; }

/* El cupón en ticket, dentro del mail (constructor, revisar, teléfono): con --mh como el
   resto de los bloques. Las muescas son del blanco de la hoja. */
.mh-tk { position: relative; overflow: hidden; border-radius: calc(16px * var(--mh)); color: #fff; text-align: left; background: linear-gradient(135deg, #2a1730 0%, #7d1d5c 55%, #e11383 100%); box-shadow: 0 calc(14px * var(--mh)) calc(28px * var(--mh)) calc(-16px * var(--mh)) rgba(125, 29, 92, .7); }
.mh-tk::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(248, 156, 177, .45), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(125, 60, 227, .35), transparent 60%); pointer-events: none; }
.mh-tk-top { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 calc(10px * var(--mh)); padding: calc(16px * var(--mh)) calc(20px * var(--mh)) calc(14px * var(--mh)); }
.mh-tk-marca { grid-column: 1 / -1; font: italic 400 calc(16px * var(--mh))/1 Georgia, serif; opacity: .85; margin-bottom: calc(6px * var(--mh)); }
.mh-tk-que { font-size: calc(13px * var(--mh)); line-height: 1.3; opacity: .92; max-width: 11em; }
.mh-tk-pct { font: 400 calc(58px * var(--mh))/.9 Georgia, serif; letter-spacing: -.03em; display: inline-flex; align-items: flex-start; }
.mh-tk-pct i { font: 500 .42em/1 var(--sans); letter-spacing: 0; margin: .16em 0 0 .08em; opacity: .92; }
.mh-tk-corte { position: relative; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, .45); margin: 0 calc(18px * var(--mh)); }
.mh-tk-corte::before, .mh-tk-corte::after { content: ""; position: absolute; top: calc(-11px * var(--mh)); width: calc(22px * var(--mh)); height: calc(22px * var(--mh)); border-radius: 50%; background: #fff; }
.mh-tk-corte::before { left: calc(-29px * var(--mh)); } .mh-tk-corte::after { right: calc(-29px * var(--mh)); }
.mh-tk-bot { position: relative; padding: calc(13px * var(--mh)) calc(20px * var(--mh)) calc(6px * var(--mh)); }
.mh-tk-bot small { display: block; font-size: calc(10.5px * var(--mh)); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.mh-tk-bot b { display: block; font: 800 calc(22px * var(--mh))/1.15 -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .14em; margin-top: calc(2px * var(--mh)); }
.mh-tk-cond { position: relative; padding: calc(2px * var(--mh)) calc(20px * var(--mh)) calc(15px * var(--mh)); font-size: calc(11.5px * var(--mh)); opacity: .82; }
.cw-cup-grande.mh-lienzo { --mh: .95; background: none; padding: 0; width: 280px; }
.cw-oferta .mh-tk-corte::before, .cw-oferta .mh-tk-corte::after { background: #f7f5f8; }

/* Portada (12/10, Chris): el claim en una sola línea, todo en la Bodoni, con «hebra» en
   cursiva y el degradé del isotipo; abajo, la categoría como subtítulo, cerrando con el
   destello animado. */
/* «El salón entero, en una sola» en la sans de la marca, liviana y apretada; «hebra.» en la
   Bodoni cursiva, más grande, con el degradé y la trenza (12/10, Chris: la serif en toda la
   línea no le gustó). */
.hero-claim { font-family: var(--sans); font-weight: 500; font-size: clamp(30px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.045em; color: #f1e9f4; margin-top: 6px; text-wrap: balance; }
.hero-claim .h-hebra { font-family: var(--serif); font-weight: 400; font-size: 1.32em; letter-spacing: -.01em; line-height: 1; margin-left: .06em; vertical-align: -.04em; }
@media (min-width: 900px) { .hero-claim { white-space: nowrap; } }
.h-hebra { position: relative; display: inline-block; font-style: italic; padding: 0 .04em 0 .02em; background: linear-gradient(100deg, #f9b3c6 0%, #ef5fa8 45%, #b57af0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-hebra-trazo { position: absolute; left: 2%; width: 88%; bottom: -.14em; height: .24em; overflow: visible; }
.h-hebra-trazo path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; animation: hhTrazo 1.6s cubic-bezier(.45, 0, .2, 1) .5s forwards; }
.h-hebra-trazo .f { stroke: url(#hh-g); stroke-width: 3; }
.h-hebra-trazo .g { stroke: url(#hh-g); stroke-width: 1.2; opacity: .55; animation-delay: .75s; }
@keyframes hhTrazo { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .h-hebra-trazo path { animation: none; stroke-dashoffset: 0; } }
.hero-claim { padding-bottom: .1em; }
.hero-sub { margin-top: 4px; }

/* El destello, pegado a «IA» (12/10, Chris). */
.con-ia { display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.hero-spark.junto-ia { width: .82em; height: .82em; margin: 0; vertical-align: 0; transform-origin: 50% 50%; position: relative; top: -.04em; }

/* «Continuar» sin pastilla (12/10, Chris): sólo la palabra, muy espaciada, con un brillo del
   degradé de la marca que la recorre, y dos chevrons que caen en cascada. */
.demo-seguir { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .55)); gap: 6px; padding: 6px 10px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 11px/1 var(--sans); letter-spacing: .38em; text-indent: .38em; }
.demo-seguir:hover, .demo-seguir:focus-visible { background: none; }
.demo-seguir span { background: linear-gradient(100deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .62) 38%, #f9b3c6 46%, #ef5fa8 50%, #b57af0 54%, rgba(255, 255, 255, .62) 62%, rgba(255, 255, 255, .62) 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dsBrillo 3.2s ease-in-out infinite; text-shadow: none; }
.demo-seguir:hover span { animation-duration: 1.4s; }
@keyframes dsBrillo { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.ds-chev { display: grid; justify-items: center; margin-top: 2px; }
.ds-chev svg { width: 16px; height: 9px; margin-top: -2px; fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: dsChev 1.8s cubic-bezier(.45, 0, .25, 1) infinite; }
.ds-chev svg + svg { animation-delay: .22s; }
@keyframes dsChev { 0% { opacity: 0; transform: translateY(-4px); } 35% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .demo-seguir span { animation: none; color: rgba(255, 255, 255, .8); background: none; } .ds-chev svg { animation: none; opacity: .8; } }

/* El armado de la trenza (12/10, Chris: «que el fino no se pierda cuando se unen»): donde el
   fino pasa por ENCIMA del grueso lleva un filo del color del fondo, como un cordón de
   verdad, así se ve que cruza; y el fino encendido es más claro y un poco más grueso. */
.tl-hebra .fino-t.halo { stroke: #120c13; stroke-width: 2.6; opacity: .85; stroke-linecap: round; }
.tl-thread-fill .tl-hebra .fino-t:not(.halo) { stroke-width: 1.4; opacity: 1; }

/* Confirmar: los precios ya contaron en el formulario; acá sólo aparecen, fila por fila,
   el viejo se tacha y el nuevo entra (12/10, Chris: «esta es de transición, de control»). */
.pe-crow { animation: mvTxtIn .4s var(--c-salida) both; }
.pe-crow:nth-child(2) { animation-delay: .07s; } .pe-crow:nth-child(3) { animation-delay: .14s; } .pe-crow:nth-child(4) { animation-delay: .21s; }
.pe-cp-nuevo { color: #e11383; }
@media (prefers-reduced-motion: reduce) { .pe-crow { animation: none; } }

/* El claim ya no espera a sus fuentes (17/10): la letra de reemplazo está calibrada con
   size-adjust (ver «Tipografías propias», arriba) y ocupa lo mismo, así que no salta de ancho. */

/* Las puntas de la trenza se desvanecen en vez de cortarse en seco (12/10, Chris). */
.tl-thread .tl-hebra { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.6%, #000 97.4%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.6%, #000 97.4%, transparent 100%); }

/* «Visitá el sitio de Bucles» (12/10, Chris): pastilla negra de la marca de Bucles. Al pasar
   el mouse no salta: el círculo blanco de la flecha se expande y llena la pastilla, el texto
   pasa a negro y la flecha gira hacia la derecha. Abre en otra pestaña. */
.bucles-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; width: max-content; justify-self: start; align-self: flex-start; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 10px 10px 24px; border-radius: 999px; background: #111; color: #fff; text-decoration: none; font: 500 15px/1 var(--sans); letter-spacing: .01em; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55); transition: color .45s cubic-bezier(.65, 0, .35, 1) .05s; }
.bucles-cta::before { content: ""; position: absolute; z-index: -1; right: 10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: #fff; transform: scale(1); transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.bucles-cta-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #111; transition: background .45s cubic-bezier(.65, 0, .35, 1), color .45s; }
.bucles-cta-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.bucles-cta:hover, .bucles-cta:focus-visible { color: #111; }
.bucles-cta:hover::before, .bucles-cta:focus-visible::before { transform: scale(18); }
.bucles-cta:hover .bucles-cta-ic, .bucles-cta:focus-visible .bucles-cta-ic { background: #111; color: #fff; }
.bucles-cta:hover .bucles-cta-ic svg, .bucles-cta:focus-visible .bucles-cta-ic svg { transform: rotate(45deg); }
.bucles-cta:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.bucles-cta:hover { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55), inset 0 0 0 1.5px #111; }
@media (prefers-reduced-motion: reduce) { .bucles-cta, .bucles-cta::before, .bucles-cta-ic, .bucles-cta-ic svg { transition: none; } }

/* «Le toca volver» como calendario del mes, de lunes a sábado (12/10, Chris): cada día con
   clientes a los que les toca se enciende en orden con el degradé de la marca; si son varios,
   un puntito blanco con cuántos. */
.vz-camp .cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.vz-camp .cal .dw { font-size: 8.5px; font-weight: 600; color: #a39aa8; text-align: left; padding-left: 4px; letter-spacing: .08em; text-transform: uppercase; }
.vz-camp .cal i { position: relative; height: 17px; border-radius: 6px; background: #f7f3f8; box-shadow: inset 0 0 0 1px #efe8f1; color: #b3a9b8; font: 600 9px/17px var(--sans); font-style: normal; text-align: left; padding-left: 6px; font-variant-numeric: tabular-nums; }
.vz-camp .cal i.vacio { background: none; box-shadow: none; }
/* Planos, sin degradé (12/10, Chris): el tono dice cuántos clientes tiene el día. */
.vz-camp .cal i.le-toca { box-shadow: none; }
.vz-camp .cal i.le-toca.n1 { background: #fbd9e9; color: #9b0d56; }
.vz-camp .cal i.le-toca.n2 { background: #f06fae; color: #fff; }
.vz-camp .cal i.le-toca.n3 { background: #e11383; color: #fff; }
.is-in .vz-camp .cal i.le-toca { animation: calOn .4s ease calc(.4s + var(--d)) both; }
@keyframes calOn { from { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.vz-camp .cal i em { position: absolute; top: 50%; right: 4px; margin-top: -5.5px; min-width: 11px; height: 11px; padding: 0 3px; border-radius: 999px; background: #fff; color: #ad0c63; font: 700 7.5px/11px var(--sans); font-style: normal; text-align: center; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .is-in .vz-camp .cal i.le-toca { animation: none; } }
.d-camp .viz { height: 360px; }
/* El cupón y los resultados, lado a lado debajo del calendario. */
.vz-camp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 14px; }
.vz-camp > .ch, .vz-camp > .cal, .vz-camp > .row { grid-column: 1 / -1; }
.vz-camp .coupon { width: 100%; }
.vz-camp .res { align-self: center; flex-direction: column; align-items: flex-start; }

/* ===========================================================================
   Contacto con formulario, llamados a la demo y aviso de cookies (17/10/2026).
   El formulario manda a /api/contacto (planilla + mail a hola@). La tarjeta lleva el
   borde con el degradé de la hebra; el «Enviando…» es la hebra que se dibuja (la
   animación de carga del manual de marca) y el «¡Listo!» la trenza del hero.
   =========================================================================== */
.cta { text-align: left; background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(36px, 5vw, 80px); align-items: start; }
.cta-copy { padding-top: clamp(0px, 1.5vw, 18px); }
.cta-copy .display-2 { margin-bottom: 20px; }
.cta-copy .lead { margin-bottom: 30px; }
.cta-pasos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 16px; }
.cta-pasos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.cta-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); font: italic 400 23px/1 var(--serif); color: var(--fuchsia); box-shadow: 0 6px 16px -10px rgba(173, 12, 99, .45); }
.cta-pasos p { padding-top: 9px; color: var(--ink-2); line-height: 1.5; }
.cta-pasos b { color: var(--ink); font-weight: 600; }
.cta-alt { color: var(--muted); font-size: 15px; }
.cta-alt a { font-weight: 600; }

.lf-card { position: relative; background: var(--white); border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 34px 70px -44px rgba(23, 16, 24, .45), 0 0 0 1px var(--line); }
.lf-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #7d3ce3, #e11383 38%, rgba(248, 156, 177, .55) 62%, transparent 82%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.lf { display: grid; gap: 16px; }
.lf[hidden], .lf-ok[hidden] { display: none; }
.lf-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fuchsia-ink); }
.lf-kicker svg { width: 14px; height: 14px; fill: var(--fuchsia); }
.lf-f { display: grid; gap: 7px; }
.lf-f label { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.lf-opt { font-weight: 400; color: var(--muted); }
.lf input, .lf select, .lf textarea { width: 100%; min-height: 50px; padding: 13px 16px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 14px; -webkit-appearance: none; appearance: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lf textarea { min-height: 78px; resize: vertical; }
.lf input::placeholder, .lf textarea::placeholder { color: #9a8fa0; }
.lf input:hover, .lf select:hover, .lf textarea:hover { border-color: var(--line); }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: none; background: var(--white); border-color: var(--orchid); box-shadow: 0 0 0 4px rgba(125, 60, 227, .14); }
.lf [aria-invalid="true"] { border-color: var(--fuchsia); background: #fff6fa; }
.lf-e { font-size: 13px; color: var(--fuchsia-ink); }
.lf-e:empty { display: none; }
.lf-sel { position: relative; }
.lf-sel select { padding-right: 44px; cursor: pointer; }
.lf-sel svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-send { position: relative; width: 100%; margin-top: 4px; overflow: hidden; }
.lf-send:disabled { cursor: progress; }
.lf-send-t, .lf-send-w { transition: opacity .2s ease, transform .3s var(--c-salida); }
.lf-send-w { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transform: translateY(10px); }
.lf.is-sending .lf-send-t { opacity: 0; transform: translateY(-10px); }
.lf.is-sending .lf-send-w { opacity: 1; transform: none; }
.lf-hilo { width: 44px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: lfHilo 1.5s var(--ease) infinite; }
@keyframes lfHilo { 0% { stroke-dashoffset: 60; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 60; opacity: 0; } }
.lf-err { padding: 11px 14px; border-radius: 12px; background: #fff1f7; color: var(--fuchsia-ink); font-size: 14px; line-height: 1.45; }
.lf-err[hidden] { display: none; }
.lf-legal { font-size: 13px; color: var(--muted); text-align: center; }
.lf-legal a { color: var(--muted); }
.lf-ok { display: grid; justify-items: start; gap: 14px; padding: 14px 2px 4px; outline: none; }
.lf-ok-t { font: 400 clamp(40px, 4.6vw, 56px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.lf-ok-t em { font-style: italic; color: var(--fuchsia); }
.lf-ok-trazo { width: min(260px, 72%); height: 22px; margin-top: -6px; overflow: visible; }
.lf-ok-trazo path { fill: none; stroke: url(#lf-g); stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.lf-ok-trazo .f { stroke-width: 2.6; }
.lf-ok-trazo .g { stroke-width: 1.2; opacity: .7; }
.lf-ok.is-on .lf-ok-trazo .f { animation: lfTrazo 1.1s var(--c-salida) .15s forwards; }
.lf-ok.is-on .lf-ok-trazo .g { animation: lfTrazo 1.1s var(--c-salida) .32s forwards; }
@keyframes lfTrazo { to { stroke-dashoffset: 0; } }
.lf-ok-p { max-width: 34ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) {
  .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-pasos { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-hilo { animation: none; stroke-dashoffset: 0; }
  .lf-ok-trazo path, .lf-ok.is-on .lf-ok-trazo path { animation: none; stroke-dashoffset: 0; }
  .lf-send-t, .lf-send-w { transition: none; }
}

/* Al terminar el día de la demo (cuando aparece «Continuar»), la invitación reemplaza a la ayuda. */
.demo-cta { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--on-plum); font-size: 16px; text-align: center; }
.stage:has(.demo-seguir.is-on) .demo-cta { display: flex; animation: demoCta .6s var(--c-salida) both; }
.stage:has(.demo-seguir.is-on) .stage-hint { display: none; }
@keyframes demoCta { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .stage:has(.demo-seguir.is-on) .demo-cta { animation: none; } }

/* Debajo de los módulos. */
.mods-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; margin-top: clamp(30px, 4vw, 46px); padding: 22px 26px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font: 500 clamp(17px, 1.4vw, 20px)/1.35 var(--sans); color: var(--ink); text-align: center; }

/* Aviso de cookies (sólo Europa, o desde «Cookies» en el pie). */
.ck { position: fixed; z-index: 60; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(384px, calc(100vw - 32px)); padding: 20px 20px 18px; border-radius: 20px; background: color-mix(in srgb, var(--plum) 94%, transparent); color: var(--on-plum); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .35s var(--c-salida); }
.ck.is-on { opacity: 1; transform: none; }
.ck[hidden] { display: none; }
.ck-t { margin-bottom: 8px; font: italic 400 25px/1 var(--serif); color: #fff; }
.ck-p { font-size: 14.5px; line-height: 1.5; color: var(--on-plum-2); }
.ck-p a { color: var(--rose); }
.ck-b { display: flex; gap: 10px; margin-top: 16px; }
.ck-b .btn { flex: 1; }
.ck-no { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.ck-no:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
.ck :focus-visible { outline-color: var(--rose); }
@media (prefers-reduced-motion: reduce) { .ck { transition: opacity .2s; transform: none; } }
.foot-ck { padding: 0; border: 0; background: none; font: inherit; color: #d9cbe0; text-align: left; width: fit-content; cursor: pointer; transition: color .2s; }
.foot-ck:hover { color: #ff9ccb; text-decoration: underline; text-underline-offset: 3px; }

/* 404 con la marca (17/10/2026): la noche de la portada, el número en la Bodoni y la trenza. */
.p404 { background: radial-gradient(120% 70% at 50% 0%, #2b1e32 0%, var(--plum) 58%, #120c13 100%); min-height: 100vh; min-height: 100dvh; color: var(--on-plum); }
.e404 { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 48px var(--gutter); text-align: center; }
.e404-brand { margin-bottom: clamp(12px, 3vh, 36px); }
.e404-n { font: italic 400 clamp(110px, 20vw, 230px)/.82 var(--serif); letter-spacing: -.04em; background: linear-gradient(100deg, #7d3ce3 0%, #e11383 48%, #f89cb1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e404-t { font: 400 clamp(30px, 4.4vw, 52px)/1.05 var(--sans); letter-spacing: -.035em; color: #fff; text-wrap: balance; max-width: 18ch; }
.e404-t em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; color: var(--rose); }
.e404-trazo { width: min(240px, 60vw); height: 22px; margin-top: -8px; overflow: visible; }
.e404-trazo path { fill: none; stroke: url(#e4-g); stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: lfTrazo 1.2s var(--c-salida) .3s forwards; }
.e404-trazo .f { stroke-width: 2.6; }
.e404-trazo .g { stroke-width: 1.2; opacity: .7; animation-delay: .48s; }
.e404-p { max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--on-plum-2); }
.e404-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.e404-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.e404-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
.e404-en { margin-top: 18px; font-size: 14px; color: #a897b3; }
.e404-en a { color: var(--rose); }
.p404 :focus-visible { outline-color: var(--rose); }
@media (prefers-reduced-motion: reduce) { .e404-trazo path { animation: none; stroke-dashoffset: 0; } }

/* Salón fundador (18/10/2026): la oferta de lanzamiento en una tarjeta con la noche de la
   portada. El punto verde es el «encendido» de la app: hay cupos. */
.fund { padding: 0 0 clamp(64px, 8vw, 112px); }
.fund-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(30px, 5.5vw, 76px); border-radius: clamp(24px, 3vw, 36px); background: radial-gradient(130% 100% at 0% 0%, #2b1e32 0%, var(--plum) 55%, #120c13 100%); color: var(--on-plum); box-shadow: 0 48px 90px -56px rgba(23, 16, 24, .7); }
.fund-card::after { content: ""; position: absolute; z-index: -1; right: -18%; bottom: -46%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(225, 19, 131, .2), rgba(125, 60, 227, .08) 55%, transparent); pointer-events: none; }
.fund-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(47, 191, 134, .1); border: 1px solid rgba(47, 191, 134, .34); color: #a6ecce; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.fund-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2fbf86; box-shadow: 0 0 0 4px rgba(31, 157, 107, .22), 0 0 10px rgba(47, 191, 134, .55); }
/* El latido es un anillo que crece y se apaga (transform y opacity: no repinta cada cuadro). */
.fund-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fbf86; animation: fundLatido 2.4s var(--c-salida) infinite; }
@keyframes fundLatido { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(2.8); opacity: 0; } }
.fund-card .h2 { color: #fff; }
.fund-card .h-hebra { padding-right: .06em; }
/* La «r» itálica de la Bodoni termina en una bolita arriba: pegado, el punto se leía «:». */
.fund-card .hh-punto { margin-left: .09em; }
.fund-card .lead { margin-top: 20px; color: var(--on-plum-2); max-width: 46ch; }
.fund-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.fund-note { max-width: 30ch; font-size: 14.5px; line-height: 1.45; color: var(--on-plum-2); }
.fund-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fund-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.fund-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 156, 203, .08); border: 1px solid rgba(255, 156, 203, .18); color: #ff9ccb; }
.fund-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fund-list b { display: block; padding-top: 1px; color: #fff; font-size: 17.5px; font-weight: 600; line-height: 1.3; }
.fund-list p { margin-top: 4px; color: var(--on-plum-2); font-size: 15.5px; line-height: 1.5; }
.fund-card :focus-visible { outline-color: var(--rose); }
@media (max-width: 960px) { .fund-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .fund-card { padding: 30px 20px 22px; }
  .fund-acc .btn { width: 100%; }
  .fund-note { max-width: none; }
  .fund-list li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .fund-ic { width: 38px; height: 38px; border-radius: 11px; }
  .fund-ic svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .fund-chip i::after { animation: none; opacity: 0; } }

/* Preguntas frecuentes (18/10/2026): acordeón con <details>; en los navegadores que lo
   soportan, la respuesta se despliega con altura animada. */
.faq { padding: clamp(72px, 9vw, 120px) 0; background: var(--white); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: 96px; }
.faq-head .lead { margin-top: 20px; }
.faq-head .lead a { font-weight: 600; }
.faq-list { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq-q { border-bottom: 1px solid var(--line); }
.faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; border-radius: 6px; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-t { font-size: clamp(17.5px, 1.4vw, 19.5px); font-weight: 600; line-height: 1.35; color: var(--ink); transition: color .2s; }
.faq-q summary:hover .faq-t { color: var(--fuchsia-ink); }
.faq-mas { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); transition: background-color .25s, border-color .25s, transform .35s var(--c-salida); }
.faq-mas::before, .faq-mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 2px; background: var(--fuchsia-ink); transform: translate(-50%, -50%); transition: transform .35s var(--c-salida), background-color .25s; }
.faq-mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[open] .faq-mas { background: var(--fuchsia); border-color: var(--fuchsia); transform: rotate(180deg); }
.faq-q[open] .faq-mas::before, .faq-q[open] .faq-mas::after { background: #fff; }
.faq-q[open] .faq-mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { max-width: 62ch; padding: 0 54px 24px 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.faq-q::details-content { block-size: 0; overflow-y: clip; transition: block-size .38s var(--c-salida), content-visibility .38s allow-discrete; }
.faq-q[open]::details-content { block-size: auto; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .faq-a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq-q::details-content, .faq-mas, .faq-mas::before, .faq-mas::after { transition: none; } }
/* Abajo del pliegue: el navegador no las arma hasta que se acercan (el trazo de «fundador»
   y el acordeón no suman trabajo a la carga). */
.fund { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.faq { content-visibility: auto; contain-intrinsic-size: auto 940px; }

/* =========================================================================
   Hebra Chat (/chat, 18/10/2026). Usa las piezas de la portada (títulos en dos voces, la
   hebra, el FAQ, el formulario y el pie) y suma la portada con el chat de ejemplo, los tres
   argumentos, la grilla de lo gratis y los planes. Adentro del chat, Inter (la letra del
   producto), como en las pantallas de la demo.
   ========================================================================= */
.hc-prod { display: inline-flex; align-items: center; margin-left: -10px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: var(--rose); font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.hc-hero { background: radial-gradient(120% 70% at 30% 0%, #2b1e32 0%, var(--plum) 58%, #120c13 100%); color: var(--on-plum); padding: clamp(44px, 6.5vw, 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.hc-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hc-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--rose); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hc-kicker svg { width: 14px; height: 14px; fill: currentColor; }
.hc-title { color: #fff; }
.hc-title .h-hebra { padding-right: .06em; }
.hc-hero .lead { margin-top: 22px; color: var(--on-plum-2); max-width: 46ch; }
.hc-hero-acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hc-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.hc-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
.hc-hero-note { margin-top: 20px; max-width: 52ch; color: #a897b3; font-size: 13.5px; line-height: 1.5; }
.hc-hero :focus-visible, .hc-nav :focus-visible { outline-color: var(--rose); }

/* El chat de ejemplo: la ventana del widget con una consulta de precio. */
.hc-mock { position: relative; justify-self: center; width: min(410px, 100%); margin: 0; }
.hc-mock-tag { position: absolute; z-index: 2; top: -13px; right: 22px; padding: 4px 11px; border-radius: 999px; background: #241a2b; border: 1px solid rgba(255, 255, 255, .14); color: var(--on-plum-2); font-size: 12px; font-weight: 500; }
.hc-win { position: relative; border-radius: 24px; overflow: hidden; background: #fff; color: var(--ink); font-family: var(--ui); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
.hc-win-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: linear-gradient(135deg, #2b1e32, #171018); color: #fff; }
.hc-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.hc-av .iso { width: 13px; height: auto; }
.hc-who { display: grid; line-height: 1.25; }
.hc-who b { font-size: 14.5px; font-weight: 600; }
.hc-who small { display: inline-flex; align-items: center; gap: 6px; color: #b9a9c2; font-size: 12px; }
.hc-who i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf86; box-shadow: 0 0 0 3px rgba(31, 157, 107, .25); }
.hc-win-body { display: grid; gap: 10px; padding: 16px; background: var(--paper); }
.hc-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.hc-msg-v { justify-self: end; background: var(--fuchsia); color: #fff; border-bottom-right-radius: 5px; }
.hc-msg-b { justify-self: start; max-width: 94%; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.hc-card { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hc-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hc-card-h img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.hc-card-h b { font-size: 14.5px; font-weight: 600; }
.hc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hc-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2); }
.hc-rows b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-rows .is-hi { background: color-mix(in srgb, var(--fuchsia) 8%, #fff); color: var(--ink); }
.hc-rows .is-hi b { color: var(--fuchsia-ink); }
.hc-card-btn { display: block; margin-top: 8px; padding: 9px; border-radius: 10px; background: var(--fuchsia); color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; }
.hc-src { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.hc-src svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #1f9d6b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hc-win-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.hc-win-in i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fuchsia); }
.hc-win-in svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-bubble { position: absolute; right: -30px; bottom: -40px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #e11383, #7d3ce3); box-shadow: 0 16px 34px -12px rgba(225, 19, 131, .7); }
.hc-bubble svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
/* La charla entra de a una: la consulta, la respuesta y la lista con su botón. */
.hc-msg-v, .hc-msg-b, .hc-rows li, .hc-card-btn, .hc-src { animation: hcEntra .5s var(--c-salida) both; }
.hc-msg-v { animation-delay: .35s; }
.hc-msg-b { animation-delay: 1.05s; }
.hc-rows li:nth-child(1) { animation-delay: 1.45s; }
.hc-rows li:nth-child(2) { animation-delay: 1.57s; }
.hc-rows li:nth-child(3) { animation-delay: 1.69s; }
.hc-card-btn { animation-delay: 1.9s; }
.hc-src { animation-delay: 2.1s; }
@keyframes hcEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Secciones */
.hc-sec { padding: clamp(72px, 9vw, 120px) 0; }
.hc-gratis { background: var(--white); border-block: 1px solid var(--line); }
.hc-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); }
.hc-head .lead { margin-top: 20px; }
.hc-head-c { margin-inline: auto; text-align: center; }
.hc-head-c .lead { margin-inline: auto; }
.hc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--fuchsia) 8%, var(--white)); border: 1px solid color-mix(in srgb, var(--fuchsia) 18%, transparent); color: var(--fuchsia-ink); }
.hc-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-ic-s { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.hc-ic-s svg { width: 19px; height: 19px; }
.hc-tres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.hc-tres li { padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--white); border: 1px solid var(--line); }
.hc-tres h3 { margin: 20px 0 8px; font-size: 19.5px; font-weight: 600; line-height: 1.3; }
.hc-tres p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.hc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.hc-grid li { display: flex; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.hc-grid h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.hc-grid p { margin-top: 5px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

/* Planes */
.hc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.hc-plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); }
.hc-plan.is-top { border-color: var(--fuchsia); box-shadow: 0 34px 70px -44px rgba(173, 12, 99, .55); }
.hc-plan-top { position: absolute; top: -12px; left: 26px; padding: 3px 11px; border-radius: 999px; background: var(--fuchsia); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hc-plan-n { font-size: 19px; font-weight: 600; }
.hc-plan-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 14px; }
.hc-plan-p b { font: italic 400 clamp(40px, 3.8vw, 50px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.hc-plan-p span { color: var(--muted); font-size: 15px; }
.hc-plan-d { margin: 10px 0 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.hc-plan ul { flex: 1; list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.hc-plan li, .hc-pro-mods li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.hc-plan li svg, .hc-pro-mods svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--fuchsia-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-plan .btn { width: 100%; }
.hc-pl-notes { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; color: var(--muted); font-size: 14px; text-align: center; }
.hc-pro { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(44px, 5vw, 72px); padding: clamp(28px, 4.5vw, 60px); border-radius: clamp(24px, 3vw, 34px); background: radial-gradient(130% 110% at 0% 0%, #2b1e32 0%, var(--plum) 55%, #120c13 100%); color: var(--on-plum); }
.hc-pro::after { content: ""; position: absolute; z-index: -1; right: -14%; top: -50%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(125, 60, 227, .22), transparent); pointer-events: none; }
.hc-pro-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(223, 162, 170, .4); color: var(--rose); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hc-pro-t { margin-top: 16px; font: 400 clamp(34px, 3.6vw, 46px)/1.02 var(--serif); letter-spacing: -.02em; color: #fff; }
.hc-pro-p { margin-top: 10px; color: var(--rose); font-size: 17px; font-weight: 600; }
.hc-pro-d { margin: 12px 0 26px; max-width: 42ch; color: var(--on-plum-2); font-size: 16px; line-height: 1.55; }
.hc-pro-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.hc-pro-mods li { color: #f1e9f4; }
.hc-pro-mods svg { stroke: #ff9ccb; }
.hc-pro :focus-visible { outline-color: var(--rose); }
.hc-h1 { margin-top: 28px; color: var(--ink-2); font-size: 16px; text-align: center; }
.hc-alta-em { font-style: italic; color: var(--fuchsia); }

@media (max-width: 1080px) {
  .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hc-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hc-mock { margin-top: 18px; }
  .hc-tres, .hc-plans { grid-template-columns: minmax(0, 1fr); }
  .hc-plans { max-width: 520px; margin-inline: auto; }
  .hc-plan.is-top { margin-top: 10px; }
  .hc-pro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hc-grid, .hc-pro-mods { grid-template-columns: minmax(0, 1fr); }
  .hc-hero-acc .btn { flex: 1 1 100%; }
  .hc-bubble { right: -4px; bottom: -46px; width: 50px; height: 50px; }
  .hc-prod { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-msg-v, .hc-msg-b, .hc-rows li, .hc-card-btn, .hc-src { animation: none; }
}

/* La demo con el nombre de tu salón (18/10/2026, salon.js): el campo arriba de la escena. */
.demo-tuyo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
.demo-tuyo label { display: inline-flex; align-items: center; gap: 8px; color: var(--on-plum); font-size: 15px; font-weight: 500; }
.demo-tuyo label svg { width: 14px; height: 14px; fill: var(--rose); }
.dt-campo { display: flex; flex: 0 1 430px; align-items: center; gap: 6px; padding: 5px 5px 5px 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .2s, box-shadow .2s; }
.dt-campo:focus-within { border-color: rgba(255, 156, 203, .6); box-shadow: 0 0 0 4px rgba(225, 19, 131, .2); }
.dt-campo input[type="text"] { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15.5px; outline: none; }
.dt-campo input::placeholder { color: #a897b3; }
.dt-campo .btn { flex: none; }
.dt-reset { display: none; color: var(--on-plum-2); font-size: 14px; }
.dt-reset:hover { color: #fff; }
.con-salon .dt-reset { display: inline; }
@media (max-width: 640px) {
  .demo-tuyo { gap: 10px; }
  .dt-campo { flex: 1 1 100%; }
}

/* Barra flotante del celular (18/10/2026): «Quedan 5 cupos · Pedí tu demo», al alcance del pulgar.
   Sólo en pantallas chicas: en la compu la barra de arriba ya tiene «Escribinos». */
.flota { display: none; }
@media (max-width: 860px) {
  .flota { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 9px 16px; border-radius: 18px; background: rgba(23, 16, 24, .88); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .45s var(--c-salida), opacity .3s; }
  .flota[data-on="1"] { transform: none; opacity: 1; }
  .flota-t { display: inline-flex; align-items: center; gap: 9px; color: #a6ecce; font-size: 14px; font-weight: 600; }
  .flota-t i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #2fbf86; box-shadow: 0 0 0 4px rgba(31, 157, 107, .22); }
  .flota-t i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fbf86; animation: fundLatido 2.4s var(--c-salida) infinite; }
  .flota :focus-visible { outline-color: var(--rose); }
  .ck:not([hidden]) ~ .flota, body:has(.ck:not([hidden])) .flota { display: none; }
}
@media (prefers-reduced-motion: reduce) { .flota { transition: opacity .2s; } .flota-t i::after { animation: none; opacity: 0; } }

/* Entradas al hacer scroll (18/10/2026): animación atada a la vista (animation-timeline), sin
   JavaScript. El navegador que no la soporta, o quien pide menos movimiento, ve todo quieto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mods-head, .roles-head, #crit-title, .bucles-text, .fund-card, .faq-head, .hc-head, .hc-tres > li, .hc-plan, .hc-pro, .dest {
      animation: hhAparece linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes hhAparece { from { opacity: 0; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }

/* Cambiar de idioma o ir a una página legal funde una página en la otra (View Transitions). */
@view-transition { navigation: auto; }

/* Página de aterrizaje de los anuncios (/software-para-peluquerias, 18/10/2026): el formulario
   arriba, al lado del título con la palabra que se buscó; después, pantallas reales en zigzag. */
.lp-hero { background: radial-gradient(120% 80% at 20% 0%, #2b1e32 0%, var(--plum) 58%, #120c13 100%); color: var(--on-plum); padding: clamp(36px, 5.5vw, 80px) 0 clamp(56px, 7vw, 96px); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-title { color: #fff; }
.lp-title .l-tech { font-size: .6em; }
.lp-title .h-hebra { padding-right: .06em; }
.lp-title .hh-punto { margin-left: .06em; }
.lp-hero .lead { margin-top: 22px; color: var(--on-plum-2); max-width: 50ch; }
.lp-puntos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-puntos li, .lp-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
.lp-puntos li { color: var(--on-plum); }
.lp-puntos svg, .lp-checks svg { width: 19px; height: 19px; flex: none; margin-top: 1px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-puntos svg { stroke: #2fbf86; }
.lp-hero :focus-visible { outline-color: var(--rose); }
.lp-form .lf-card { margin: 0; }
.lp-filas { padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 72px); }
.lp-fila { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lp-fila + .lp-fila { margin-top: clamp(48px, 7vw, 96px); }
.lp-fila-r { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.lp-fila-r .lp-pant { order: 2; }
.lp-pant { margin: 0; border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: 0 40px 80px -48px rgba(23, 16, 24, .55), 0 0 0 1px var(--line); }
.lp-pant img { width: 100%; height: auto; }
.lp-txt h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
.lp-txt p { margin-top: 14px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.lp-filas .mods-cta { margin-top: clamp(48px, 6vw, 80px); }
.lp-incluye { padding: clamp(64px, 8vw, 104px) 0; background: var(--white); border-block: 1px solid var(--line); }
.lp-checks { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.lp-checks li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink); }
.lp-checks svg { stroke: var(--fuchsia-ink); }
.pag-lp .fund { padding-top: clamp(64px, 8vw, 104px); }
.lp-cierre { padding: clamp(72px, 9vw, 120px) 0; text-align: center; background: linear-gradient(180deg, var(--white), var(--paper)); }
.lp-cierre .lead { margin: 18px auto 30px; }
@media (max-width: 960px) {
  .lp-hero-in, .lp-fila { grid-template-columns: minmax(0, 1fr); }
  .lp-fila-r .lp-pant { order: 0; }
  .lp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .lp-checks { grid-template-columns: minmax(0, 1fr); } }