/* Casa Abierta · sistema visual de El Café de la Casa
   Inspirado en el local: paredes color pizarra, letrero dorado, marcos de madera, terciopelo y helechos.
   Tema oscuro (espresso) para los paneles del equipo; tema .papel (crema) para lo que ve el cliente. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-normal-latin.woff2') format('woff2'); 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: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-italic-latin.woff2') format('woff2'); 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: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-normal-latin.woff2') format('woff2'); 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: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* paleta de la casa */
  --espresso-950: #140F0C; --espresso-900: #1C1511; --espresso-850: #241B16; --espresso-800: #2D221C; --espresso-700: #3A2D25;
  --crema-50: #FFFAF2; --crema-100: #F7EFE3; --crema-200: #EEE2CF; --crema-300: #E2D1B8;
  --oro-300: #F0CB7A; --oro-400: #E3B04B; --oro-500: #CC962F; --oro-700: #8A5C10;
  --tierra-500: #7A4426; --tierra-600: #5E321C; --tierra-700: #45230F;
  --pizarra: #22272A; --helecho: #5E7B4C; --colada: #7E3A72; --terciopelo: #C9C2B4;

  /* semánticos · tema oscuro (paneles) */
  --bg: var(--espresso-950); --s1: var(--espresso-900); --s2: var(--espresso-850); --s3: var(--espresso-800); --s4: var(--espresso-700);
  --linea: rgba(247, 239, 227, .09); --linea-2: rgba(247, 239, 227, .16);
  --t1: #F7EFE4; --t2: #D3C4B2; --t3: #A6957F;
  --acento: var(--oro-400); --acento-txt: var(--oro-300); --acento-suave: rgba(227, 176, 75, .14);
  --primario: var(--oro-400); --primario-t: #1E150E; --primario-h: var(--oro-300);
  --ok: #7DC28C; --ok-suave: rgba(125, 194, 140, .14);
  --aviso: #F2A453; --aviso-suave: rgba(242, 164, 83, .15);
  --error: #EF7A68; --error-suave: rgba(239, 122, 104, .15);
  --info: #92B8DB; --info-suave: rgba(146, 184, 219, .14);
  --morado: #C58BBB;

  /* tipografía */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-12: .75rem; --t-14: .875rem; --t-16: 1rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-32: 2rem; --t-40: 2.5rem; --t-56: 3.5rem; --t-72: 4.5rem;

  /* espacio (múltiplos de 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px;

  /* forma y profundidad */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-5: 28px; --r-full: 999px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .18);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
  --sombra-3: 0 24px 64px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .25);

  /* movimiento */
  --curva: cubic-bezier(.2, .8, .2, 1); --curva-salida: cubic-bezier(.4, 0, 1, 1); --resorte: cubic-bezier(.34, 1.56, .64, 1);
  --d-1: 150ms; --d-2: 220ms; --d-3: 320ms; --d-4: 450ms;

  /* capas */
  --z-barra: 20; --z-hoja: 60; --z-toast: 80; --z-modal: 70;

  color-scheme: dark;
}

/* tema papel (cliente) */
.papel {
  --bg: var(--crema-100); --s1: var(--crema-50); --s2: #F1E6D5; --s3: var(--crema-200); --s4: var(--crema-300);
  --linea: rgba(58, 36, 22, .11); --linea-2: rgba(58, 36, 22, .2);
  --t1: #23160E; --t2: #574233; --t3: #75604F;
  --acento: var(--oro-500); --acento-txt: #855610; --acento-suave: rgba(204, 150, 47, .14);
  --primario: #2A1A11; --primario-t: #FBF3E6; --primario-h: #3B261A;
  --ok: #2F7A43; --ok-suave: rgba(47, 122, 67, .12);
  --aviso: #A85A12; --aviso-suave: rgba(196, 112, 24, .13);
  --error: #B23A2A; --error-suave: rgba(178, 58, 42, .1);
  --info: #2D5F8C; --info-suave: rgba(45, 95, 140, .1);
  --morado: #7E3A72;
  --sombra-1: 0 1px 2px rgba(60, 36, 20, .08), 0 2px 8px rgba(60, 36, 20, .06);
  --sombra-2: 0 10px 28px rgba(60, 36, 20, .12), 0 2px 6px rgba(60, 36, 20, .06);
  --sombra-3: 0 30px 70px rgba(60, 36, 20, .2), 0 8px 20px rgba(60, 36, 20, .1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--t1); font-family: var(--f-texto); font-size: var(--t-16); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; font-feature-settings: 'ss01';
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: 'SOFT' 50, 'WONK' 0; }
p { margin: 0; }
::selection { background: var(--acento); color: var(--primario-t); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.num, .tab { font-variant-numeric: tabular-nums; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cursiva { font-family: var(--f-display); font-style: italic; font-weight: 400; }
.display { font-family: var(--f-display); }
.t2 { color: var(--t2); } .t3 { color: var(--t3); } .acento { color: var(--acento-txt); }
.eyebrow { font-size: var(--t-12); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-txt); }

/* iconos */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; } .ic-24 { width: 24px; height: 24px; } .ic-32 { width: 32px; height: 32px; }

/* botones */
.btn {
  --b-bg: var(--primario); --b-t: var(--primario-t);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5);
  border: 0; border-radius: var(--r-full); background: var(--b-bg); color: var(--b-t); font-weight: 700; font-size: var(--t-16); text-decoration: none;
  cursor: pointer; user-select: none; transition: transform var(--d-1) var(--curva), background var(--d-2) var(--curva), box-shadow var(--d-2) var(--curva), opacity var(--d-2);
  position: relative; white-space: nowrap;
}
.btn:hover { background: var(--primario-h); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy='true'] { color: transparent; pointer-events: none; }
.btn[aria-busy='true']::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--b-t); border-right-color: transparent; animation: girar .7s linear infinite; }
.btn-sec { --b-bg: transparent; --b-t: var(--t1); box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.btn-sec:hover { background: var(--s2); }
.btn-fant { --b-bg: transparent; --b-t: var(--t1); }
.btn-fant:hover { background: var(--s2); }
.btn-ok { --b-bg: var(--ok); --b-t: #0F1F14; } .btn-ok:hover { background: var(--ok); filter: brightness(1.08); }
.btn-peligro { --b-bg: var(--error-suave); --b-t: var(--error); } .btn-peligro:hover { background: var(--error-suave); filter: brightness(1.2); }
.btn-peq { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-14); }
.btn-grande { min-height: 56px; padding: 0 var(--e-8); font-size: var(--t-16); }
.btn-bloque { width: 100%; }
.btn-icono { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }

/* chips e insignias */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--e-4); border-radius: var(--r-full);
  background: var(--s2); color: var(--t2); border: 1px solid var(--linea); font-size: var(--t-14); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--d-2) var(--curva), color var(--d-2), border-color var(--d-2), transform var(--d-1);
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed='true'], .chip.on { background: var(--primario); color: var(--primario-t); border-color: transparent; }
.ins { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--t-12); font-weight: 700; letter-spacing: .02em; background: var(--s3); color: var(--t2); white-space: nowrap; }
.ins-ok { background: var(--ok-suave); color: var(--ok); } .ins-aviso { background: var(--aviso-suave); color: var(--aviso); }
.ins-error { background: var(--error-suave); color: var(--error); } .ins-info { background: var(--info-suave); color: var(--info); }
.ins-oro { background: var(--acento-suave); color: var(--acento-txt); } .ins-morado { background: rgba(126, 58, 114, .16); color: var(--morado); }

.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.punto-vivo { position: relative; }
.punto-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: latido 1.8s var(--curva) infinite; }

/* tarjetas */
.tarjeta { background: var(--s1); border: 1px solid var(--linea); border-radius: var(--r-4); padding: var(--e-5); }
.tarjeta-2 { background: var(--s2); border-radius: var(--r-3); padding: var(--e-4); }
.separador { height: 1px; background: var(--linea); border: 0; margin: var(--e-4) 0; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--e-5); background: var(--s1); border: 1px solid var(--linea); border-radius: var(--r-4); min-width: 0; }
.kpi-et { font-size: var(--t-12); font-weight: 700; color: var(--t3); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.kpi-v { font-family: var(--f-display); font-size: var(--t-32); font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-d { font-size: var(--t-14); color: var(--t2); display: flex; align-items: center; gap: 4px; }
.sube { color: var(--ok); } .baja { color: var(--error); }

/* campos */
.campo { display: grid; gap: 6px; }
.campo > span { font-size: var(--t-14); font-weight: 700; color: var(--t2); }
.entrada {
  min-height: 48px; width: 100%; padding: 0 var(--e-4); border-radius: var(--r-2); border: 1.5px solid var(--linea-2); background: var(--s1); color: var(--t1);
  transition: border-color var(--d-2), box-shadow var(--d-2);
}
textarea.entrada { padding: var(--e-3) var(--e-4); min-height: 88px; resize: vertical; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.entrada[aria-invalid='true'] { border-color: var(--error); }
.error-campo { font-size: var(--t-14); color: var(--error); }

/* pestañas segmentadas con indicador que se desliza */
.segm { position: relative; display: inline-flex; padding: 4px; gap: 2px; background: var(--s2); border-radius: var(--r-full); border: 1px solid var(--linea); }
.segm button { position: relative; z-index: 1; min-height: 40px; padding: 0 var(--e-4); border: 0; background: none; border-radius: var(--r-full); color: var(--t2); font-weight: 700; font-size: var(--t-14); cursor: pointer; transition: color var(--d-2); }
.segm button[aria-selected='true'] { color: var(--primario-t); }
.segm .ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--r-full); background: var(--primario); transition: transform var(--d-3) var(--curva), width var(--d-3) var(--curva); }

/* hoja inferior / modal */
.velo { position: fixed; inset: 0; background: rgba(10, 6, 4, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: var(--z-hoja); opacity: 0; transition: opacity var(--d-3) var(--curva); }
.velo.ver { opacity: 1; }
.hoja {
  position: fixed; z-index: calc(var(--z-hoja) + 1); left: 50%; bottom: 0; width: min(560px, 100%); max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--s1); color: var(--t1); border-radius: var(--r-5) var(--r-5) 0 0; box-shadow: var(--sombra-3); padding: var(--e-3) var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom));
  transform: translate(-50%, 100%); transition: transform var(--d-4) var(--curva);
}
.hoja.ver { transform: translate(-50%, 0); }
.hoja .asa { width: 44px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 0 auto var(--e-4); }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.hoja-cab h3 { font-size: var(--t-24); }
@media (min-width: 760px) {
  .hoja.modal { top: 50%; bottom: auto; border-radius: var(--r-5); transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform var(--d-3) var(--curva), opacity var(--d-3); }
  .hoja.modal.ver { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .hoja.modal .asa { display: none; }
}

/* toasts */
.toasts { position: fixed; z-index: var(--z-toast); left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-3); background: var(--t1); color: var(--bg); box-shadow: var(--sombra-2);
  font-weight: 600; font-size: var(--t-14); pointer-events: auto; animation: toastEntra var(--d-3) var(--curva) both;
}
.toast.sale { animation: toastSale var(--d-2) var(--curva-salida) both; }
.toast .ic { color: var(--acento); }
.toast-ok .ic { color: #3E9B57; } .toast-error .ic { color: #D2513D; }

/* estados vacíos y esqueletos */
.vacio { display: grid; place-items: center; text-align: center; gap: var(--e-3); padding: var(--e-10) var(--e-5); color: var(--t2); }
.vacio .ic { width: 40px; height: 40px; color: var(--t3); }
.vacio h4 { font-size: var(--t-20); color: var(--t1); }
.esq { background: linear-gradient(90deg, var(--s2) 0%, var(--s3) 40%, var(--s2) 80%); background-size: 300% 100%; animation: brillo 1.4s linear infinite; border-radius: var(--r-2); }

/* aparición al hacer scroll */
[data-rev] { opacity: 0; transform: translateY(18px); transition: opacity var(--d-4) var(--curva), transform var(--d-4) var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
[data-rev].visto { opacity: 1; transform: none; }

/* marco de cuadro (como la pared galería del café) */
.marco {
  position: relative; padding: 10px; border-radius: 4px;
  background: linear-gradient(135deg, #B07A3A 0%, #E3B04B 22%, #8A5A24 48%, #D9A54A 72%, #7A4C1C 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 230, 170, .35), inset 0 0 6px rgba(0, 0, 0, .5);
}
.marco::before { content: ''; position: absolute; inset: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 2px 8px rgba(0, 0, 0, .45); pointer-events: none; z-index: 2; }
.marco img { width: 100%; height: 100%; object-fit: cover; }
.marco-madera { background: linear-gradient(135deg, #6B3E1E, #9C6331 30%, #5C3418 60%, #8E5A2D); }
.marco-negro { background: linear-gradient(135deg, #2A2522, #4A403A 40%, #1E1A18); }

/* sello de tinta (Libreta) */
.sello {
  --tinta: var(--tierra-500);
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--linea-2); color: var(--t3); position: relative;
}
.sello.puesto { border: 2.5px solid var(--tinta); color: var(--tinta); background: radial-gradient(circle, rgba(122, 68, 38, .08), transparent 70%); transform: rotate(var(--rot, -8deg)); }
.sello.puesto::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--tinta); opacity: .55; }
.sello.nuevo { animation: estampar .55s var(--resorte) both; }

/* textura de papel */
.textura { position: relative; isolation: isolate; }
.textura::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* barra del sistema (paneles del equipo) */
.sis { position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: var(--e-3); height: 60px; padding: 0 var(--e-5); background: rgba(20, 15, 12, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--linea); }
.sis-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-size: var(--t-20); }
.sis-marca small { font-family: var(--f-texto); font-size: var(--t-12); color: var(--t3); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: block; line-height: 1; margin-top: 2px; }
.sis-nav { display: flex; gap: 4px; margin-left: var(--e-4); overflow-x: auto; scrollbar-width: none; }
.sis-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r-full); text-decoration: none; color: var(--t2); font-weight: 600; font-size: var(--t-14); white-space: nowrap; transition: background var(--d-2), color var(--d-2); }
.sis-nav a:hover { background: var(--s2); color: var(--t1); }
.sis-nav a[aria-current='page'] { background: var(--s3); color: var(--t1); }
.sis-der { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-full); border: 1px dashed var(--linea-2); color: var(--t3); font-size: var(--t-12); font-weight: 700; background: none; cursor: pointer; }
.demo-pill:hover { color: var(--t1); border-color: var(--acento); }

/* logo (el tamaño lo dan los atributos width/height de logo(tam)) */
.logo-casa { flex: none; }

/* barra del sistema en pantallas angostas */
@media (max-width: 760px) {
  .sis { padding: 0 var(--e-3); gap: var(--e-2); }
  .sis-marca span { display: none; }
  .sis-nav { margin-left: 0; flex: 1; min-width: 0; }
  .sis-nav a { padding: 0 10px; }
  .demo-pill { font-size: 0; width: 36px; padding: 0; justify-content: center; }
  .demo-pill .ic { margin: 0; }
}

/* tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.tabla th { text-align: left; font-size: var(--t-12); color: var(--t3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr:last-child td { border-bottom: 0; }

/* gráficos */
.graf { width: 100%; height: auto; overflow: visible; }
.graf text { fill: var(--t3); font-size: 11px; font-family: var(--f-texto); }
.graf .eje { stroke: var(--linea); }

/* animaciones */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes toastEntra { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastSale { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes estampar { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(var(--rot, -8deg)); opacity: 1; } }
@keyframes salto { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.28); } }
@keyframes vapor { 0% { transform: translateY(6px) scaleX(1); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-34px) scaleX(1.4); opacity: 0; } }
@keyframes balanceo { 0%, 100% { transform: rotate(var(--g0, -1.2deg)); } 50% { transform: rotate(var(--g1, 1.2deg)); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes check { to { stroke-dashoffset: 0; } }
@keyframes resplandor { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.salta { animation: salto .42s var(--resorte); }
.entra { animation: entrar var(--d-4) var(--curva) both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-rev] { opacity: 1; transform: none; }
}