/* Restiko · web (versión 2, con demo). Los colores de la marca viven en :root. Lo común sale de la versión 1; lo nuevo, al final. */
@font-face { font-family: 'Bricolage'; font-weight: 400; font-display: swap; src: url(fuentes/bricolage-400.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 600; font-display: swap; src: url(fuentes/bricolage-600.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 700; font-display: swap; src: url(fuentes/bricolage-700.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url(fuentes/bricolage-800.woff2) format('woff2'); }

:root {
  --marca: #1E4D3B;          /* botella: el azulejo del símbolo, botones, acentos */
  --marca-fuerte: #1E4D3B;   /* textos y botones sobre claro (contraste AAA con blanco) */
  --marca-hondo: #163A2C;    /* secciones oscuras */
  --acento: #F2B33D;         /* mostaza: la mesa del símbolo */
  --acento-suave: #FDF0D2;
  --tinta: #15241D;
  --texto: #2E3A34;
  --suave: #5C6962;
  --fondo: #FBF6EE;          /* papel */
  --fondo-2: #F3EBDD;
  --papel: #FFFFFF;
  --linea: #E6DCCB;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(21, 36, 29, .06), 0 10px 30px -12px rgba(21, 36, 29, .2);
  --letra: 'Bricolage', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 18px/1.6 var(--letra); }
img, svg { max-width: 100%; }
a { color: var(--marca-fuerte); }
h1, h2, h3 { color: var(--tinta); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
/* TPV en España, POS en Latinoamérica (la clase «latam» la pone el script del <head>) */
.solo-latam { display: none; }
.latam .solo-latam { display: inline; }
.latam .solo-es { display: none; }
.pie__eslogan { color: #DDE8E1; font-weight: 700; font-size: 17px; margin: -6px 0 14px !important; }
/* hidden manda siempre: sin esto, un display: grid lo tapa y se ven todas las pestañas a la vez */
[hidden] { display: none !important; }
b { color: var(--tinta); font-weight: 600; }

.saltar { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 20; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.envoltura { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.envoltura--estrecha { max-width: 820px; }
@media (min-width: 720px) { .envoltura { padding: 0 28px; } }

section { padding: clamp(64px, 9vw, 112px) 0; }
.antetitulo { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-fuerte); margin: 0 0 14px; }
.antetitulo--claro { color: var(--acento); }
.titulo-seccion { font-size: clamp(30px, 4.2vw, 46px); max-width: 22ch; margin-bottom: 20px; }
.intro { font-size: clamp(18px, 2vw, 21px); max-width: 60ch; color: var(--suave); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 18px; text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.boton:hover { transform: translateY(-1px); }
.boton--marca { background: var(--marca-fuerte); color: #fff; }
.boton--marca:hover { background: var(--marca-hondo); }
.boton--borde { border: 2px solid var(--tinta); color: var(--tinta); }
.boton--peq { min-height: 42px; padding: 0 18px; font-size: 16px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(251, 246, 238, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.cabecera__logo { display: flex; margin-right: auto; }
.cabecera__logo img { height: 32px; width: auto; display: block; }
.menu { display: none; gap: 26px; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 500; font-size: 16px; }
.menu a:hover { color: var(--marca-fuerte); }
@media (min-width: 980px) { .menu { display: flex; } }
@media (max-width: 420px) { .cabecera .boton--peq { padding: 0 14px; font-size: 15px; } .cabecera__logo img { height: 27px; } }


/* Fácil */
.rejilla-facil { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla-facil { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rejilla-facil { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { background: var(--papel); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); counter-increment: tarjeta; }
.tarjeta h3 { font-size: 22px; margin-bottom: 10px; }
.tarjeta h3::before { content: counter(tarjeta, decimal-leading-zero); display: block; font-size: 15px; letter-spacing: .1em; color: #A8730A; margin-bottom: 12px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 17px; }
.rejilla-facil { counter-reset: tarjeta; }


/* El dueño */
.dueno { background: var(--marca-hondo); color: #DDE8E1; }
.dueno .titulo-seccion { color: #fff; }
.dueno b { color: #fff; }
.dueno__in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) { .dueno__in { grid-template-columns: minmax(220px, 300px) 1fr; gap: 80px; } }
.dueno__movil { width: min(70%, 300px); justify-self: center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.dueno p { max-width: 36em; font-size: 19px; }
.dueno .nota { font-size: 16px; color: #A9BDB2; border-left: 3px solid var(--acento); padding-left: 14px; }

/* Montaje */
.montaje { background: var(--papel); }
.esquema-fig { margin: 40px 0 8px; }
.esquema-fig .maqueta { display: block; width: 100%; height: auto; }
@media (max-width: 699px) { .esquema-fig { display: none; } }
.requisitos { display: grid; gap: 28px 32px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .requisitos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .requisitos { grid-template-columns: repeat(4, 1fr); } }
.requisitos h3 { font-size: 19px; margin-bottom: 8px; }
.requisitos p { font-size: 16px; color: var(--suave); margin: 0; }
.requisitos > div { border-top: 3px solid var(--acento); padding-top: 16px; }

/* Tranquilidad */
.rejilla-tranq { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rejilla-tranq { grid-template-columns: repeat(3, 1fr); } }
.rejilla-tranq > div { background: var(--papel); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.rejilla-tranq h3 { font-size: 21px; margin-bottom: 10px; }
.rejilla-tranq p { margin: 0; font-size: 16.5px; color: var(--suave); }

/* Sin más */
.sin-mas { background: var(--papel); }
.sin-mas__in { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .sin-mas__in { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.sin-mas p { color: var(--suave); max-width: 36em; }
.pack { background: var(--fondo); border: 2px solid var(--acento); border-radius: var(--radio); padding: 28px; }
.pack h3 { font-size: 24px; margin-bottom: 12px; }
.pack p { font-size: 16.5px; margin-bottom: 10px; }
.pack p:last-child { margin: 0; }
.pack__eti { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-fuerte) !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pildora { background: var(--tinta); color: #fff; font-size: 12px; letter-spacing: .06em; padding: 3px 10px; border-radius: 99px; }

/* Con el respaldo de Atinfor */
.respaldo { background: var(--papel); border-top: 1px solid var(--linea); }
.respaldo__in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .respaldo__in { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.respaldo p { color: var(--suave); max-width: 36em; }
.enlace-flecha { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--acento); padding-bottom: 2px; }
.enlace-flecha:hover { border-bottom-color: var(--marca); }
.respaldo__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.respaldo__puntos li { background: var(--fondo); border: 1px solid var(--linea); border-left: 5px solid var(--acento); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.respaldo__puntos b { font-size: 18px; }
.respaldo__puntos span { color: var(--suave); font-size: 16px; line-height: 1.5; }

/* Preguntas */
.preguntas details { background: var(--papel); border-radius: 14px; margin-bottom: 10px; border: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 19px; color: var(--tinta); position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-52%); font-size: 28px; font-weight: 400; color: var(--marca-fuerte); line-height: 1; }
.preguntas details[open] summary::after { content: '–'; }
.preguntas details p { padding: 0 22px 20px; margin: 0; color: var(--suave); font-size: 17px; }

/* Contacto */
.contacto { background: var(--acento); color: var(--tinta); }
.contacto .titulo-seccion { color: var(--tinta); }
.contacto__in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .contacto__in { grid-template-columns: 1fr 1fr; gap: 64px; } }
.contacto p { font-size: 19px; max-width: 30em; margin: 0; }
.contacto__vias { display: grid; gap: 12px; }
.via { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; color: var(--tinta); text-decoration: none; border-radius: 16px; padding: 18px 22px; transition: transform .15s ease; flex-wrap: wrap; }
.via:hover { transform: translateY(-2px); }
.via span { color: var(--suave); font-size: 16px; }
.via b { font-size: clamp(19px, 2.4vw, 22px); }

/* Pie */
.pie { background: #10211A; color: #93A89C; padding: 44px 0; font-size: 14.5px; }
.pie__in img { height: 28px; width: auto; display: block; margin-bottom: 18px; }
.pie p { margin: 0 0 6px; }
.pie a { color: #DDE8E1; }


/* Maquetas SVG (las dibuja sitio/maquetas.mjs) */
.maqueta text { font-family: var(--letra); }
.m-marca { fill: var(--marca); }
.m-blanco { fill: #fff; }
.m-acento { fill: var(--acento); }
.m-papel { fill: var(--fondo); }
.m-fondo-app { fill: #F4F1EA; }
.m-raya { stroke: #E6DDD1; stroke-width: 2; }
.m-titulo { font-weight: 700; font-size: 26px; fill: var(--tinta); }
.m-pastilla { fill: #F3EEE7; }
.m-texto { font-weight: 600; font-size: 20px; fill: var(--tinta); }
.m-hora { font-weight: 600; font-size: 22px; fill: #7A6F66; }
.m-suelo { fill: #FBF8F3; stroke: #E8DFD2; stroke-width: 2; }
.m-suelo-terraza { fill: #EFF4E9; stroke: #DEE7D3; stroke-width: 2; }
.m-pared { stroke: #B9AD9E; stroke-width: 6; stroke-linecap: round; }
.m-zona { font-weight: 700; font-size: 16px; letter-spacing: .12em; fill: #A0948A; }
.m-mesa { fill: #fff; stroke: #D8CDBF; stroke-width: 2.5; }
.m-mesa-ocupada { fill: var(--acento-suave); stroke: #E2A42A; stroke-width: 3; }
.m-mesa-cuenta { fill: #DCEBE2; stroke: var(--marca); stroke-width: 3; }
.m-silla { fill: #7D968B; stroke: #6A8378; stroke-width: 1.5; } /* las sillas del plano del TPV (tipo C) */
.m-num { font-weight: 700; font-size: 28px; fill: var(--tinta); }
.m-nota { font-weight: 600; font-size: 16px; fill: #8A5A00; }
.m-nota-cuenta { font-weight: 700; font-size: 16px; fill: var(--marca); }
.m-junta { fill: none; stroke: #C98E14; stroke-width: 2.5; stroke-dasharray: 8 7; }
.m-boton { fill: #fff; stroke: #E2D8CB; stroke-width: 2; }
.m-boton-txt { font-weight: 600; font-size: 20px; fill: var(--tinta); }
.m-carcasa { fill: #14211B; }
.m-hora-movil { font-weight: 700; font-size: 17px; fill: var(--tinta); }
.m-texto-suave { font-weight: 500; font-size: 17px; fill: #857A70; }
.m-pase { font-weight: 700; font-size: 14px; letter-spacing: .14em; fill: var(--marca-fuerte); }
.m-linea { fill: #fff; }
.m-linea-nueva { fill: #fff; stroke: #EBD49B; stroke-width: 2; }
.m-cant { font-weight: 700; font-size: 20px; fill: var(--marca-fuerte); }
.m-prod { font-weight: 600; font-size: 19px; fill: var(--tinta); }
.m-det { font-weight: 500; font-size: 15px; fill: #857A70; }
.m-precio { font-weight: 600; font-size: 18px; fill: var(--tinta); }
.m-total { font-weight: 700; font-size: 26px; fill: var(--tinta); }
.m-boton-marca { font-weight: 700; font-size: 22px; fill: #fff; }
.m-icono { fill: none; stroke: #8D8178; stroke-width: 2.5; }
.m-icono-l { fill: none; stroke: #8D8178; stroke-width: 2.5; stroke-linecap: round; }
.m-icono-p { fill: #8D8178; }
.m-tarjeta-oscura { fill: var(--marca-hondo); }
.m-claro-suave { font-weight: 500; font-size: 16px; fill: #B9CCC1; }
.m-cifra { font-weight: 700; font-size: 44px; fill: #fff; }
.m-tile { font-weight: 700; font-size: 30px; fill: var(--tinta); }
.m-barra { fill: #EADFD2; }
.m-eje { font-weight: 500; font-size: 13px; fill: #9A8F85; }
.m-caja { stroke: #E3D9CC; stroke-width: 2; }
.m-caja-suave { fill: #FBF6EF; stroke-dasharray: 6 5; }
.m-esq-tit { font-weight: 700; font-size: 22px; fill: var(--tinta); }
.m-esq-sub { font-weight: 500; font-size: 16px; fill: #857A70; }
.m-esq-tit-claro { font-weight: 700; font-size: 24px; fill: #fff; }
.m-esq-sub-claro { font-weight: 500; font-size: 15px; fill: #CFE0D6; }
.m-cable { stroke: #BFB2A3; stroke-width: 3; }
.m-wifi { stroke: #BFB2A3; stroke-width: 3; stroke-dasharray: 10 8; }
.m-internet { stroke: #BFB2A3; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.m-esq-leyenda { font-weight: 500; font-size: 15px; fill: #857A70; }



/* ======================================================================
   Versión 2: lo que se mueve (escena de portada, demo, impresoras, cifras,
   pestañas, Mi bar en vivo). Las animaciones solo con JS (clase con-js en <html>)
   y nunca con «reducir movimiento».
   ====================================================================== */

/* Apariciones al bajar */
.con-js .aparece { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.con-js .aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .con-js .aparece { opacity: 1; transform: none; transition: none; } }
.cabeza { text-align: center; margin: 0 auto 36px; }
.cabeza .titulo-seccion, .cabeza .intro { margin-left: auto; margin-right: auto; }

/* Portada */
.portada { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 88px); overflow: hidden; }
.escena { position: relative; max-width: 900px; margin: 0 auto clamp(40px, 6vw, 64px); padding-right: clamp(40px, 11vw, 150px); }
.escena__tpv { position: relative; }
.portada__texto { text-align: center; max-width: 860px; margin: 0 auto; }
.portada h1 { font-size: clamp(40px, 6.4vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 0 auto 22px; max-width: 15ch; }
.entradilla { font-size: clamp(18px, 2vw, 21px); color: var(--suave); max-width: 40em; margin: 0 auto; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; justify-content: center; }
.portada__respaldo { margin: 22px 0 0; font-size: 15.5px; color: var(--suave); }
.portada__respaldo a { color: var(--marca); font-weight: 700; }

/* El aparato: marco y pantalla de 960 x 600 que se escala (--k) */
.marco-tpv { background: #14211B; padding: clamp(6px, 1.1vw, 12px); border-radius: clamp(14px, 2vw, 26px); box-shadow: 0 40px 70px -34px rgba(21, 36, 29, .55), 0 2px 0 rgba(255, 255, 255, .06) inset; }
.pantalla-tpv { position: relative; aspect-ratio: 960 / 600; overflow: hidden; border-radius: clamp(7px, 1vw, 14px); background: #F4F1EA; --k: 1; }
.pantalla-tpv > .demo-app.f-tpv { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform: scale(var(--k)); transform-origin: 0 0; }
/* en el móvil la demo es una aplicación: alta como la pantalla que queda, sin desplazar dos cosas a la vez */
.pantalla-tpv.es-movil { aspect-ratio: auto; height: max(460px, calc(100dvh - 190px)); } /* web.js la ajusta al hueco exacto */
.pantalla-tpv.es-movil > .demo-app { position: absolute; inset: 0; }
.escena .demo-app { pointer-events: none; }

/* El dedo del piloto automático */
.dedo { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid rgba(21, 36, 29, .6); box-shadow: 0 8px 18px rgba(21, 36, 29, .3); transition: transform .9s cubic-bezier(.4, .1, .25, 1), opacity .35s, scale .2s, background-color .2s; opacity: 0; pointer-events: none; z-index: 3; }
.dedo.visto { opacity: 1; }
.dedo.pulsa { scale: .78; background: rgba(242, 179, 61, .7); }
@media (max-width: 640px) { .dedo { width: 26px; height: 26px; margin: -13px 0 0 -13px; } }

.escena__leyenda { margin: 18px 0 0; min-height: 1.6em; text-align: center; font-weight: 600; font-size: clamp(15px, 1.6vw, 18px); color: var(--suave); }
.escena__leyenda.cambia { animation: leyenda .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes leyenda { from { opacity: 0; transform: translateY(6px); } }

/* La impresora térmica de la portada: el papel sube de la boca */
.escena__impresora { position: absolute; right: 0; bottom: -26px; width: clamp(118px, 22vw, 228px); z-index: 2; }
.termica { position: relative; height: clamp(44px, 7vw, 74px); border-radius: 14px 14px 18px 18px; background: linear-gradient(180deg, #3A4A42, #1A2A22 70%); box-shadow: 0 24px 34px -18px rgba(21, 36, 29, .6), inset 0 2px 0 rgba(255, 255, 255, .12); }
.termica__boca { position: absolute; left: 12%; right: 12%; top: 10px; height: 6px; border-radius: 3px; background: #0B1511; }
.termica__luz { position: absolute; right: 14px; bottom: 12px; width: 8px; height: 8px; border-radius: 50%; background: #2F6B52; }
.termica.imprimiendo .termica__luz { background: #8CF0B8; box-shadow: 0 0 10px #8CF0B8; }
/* la tira acaba justo en la boca y recorta: el papel sube desde dentro de la impresora */
.tira { position: absolute; left: 15%; right: 15%; bottom: calc(100% - 13px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 30px 10px 0; margin: 0 -10px; }
.tira .papel { font-size: clamp(6.5px, 1.05vw, 11px); padding: 1.2em 1.2em 1.6em; box-shadow: 0 10px 24px -14px rgba(21, 36, 29, .5); }
.tira .papel.sube { animation: sube 1.7s steps(22) both; }
@keyframes sube { from { transform: translateY(105%); } to { transform: none; } }

/* El papel térmico (demo, portada y pestañas) */
.papel { position: relative; background: #fff; color: #111; font: 500 13px/1.45 'Consolas', 'Courier New', monospace; padding: 14px 14px 18px; box-shadow: 0 14px 30px -20px rgba(21, 36, 29, .5), 0 0 0 1px #eee; }
.papel::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px; background: linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 12px 9px repeat-x, linear-gradient(225deg, #fff 50%, transparent 50%) 0 0 / 12px 9px repeat-x; }
.papel p { margin: 0 0 6px; }
.papel small { font-size: .92em; }
.p-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; border-bottom: 2px dashed #111; padding-bottom: 7px; margin-bottom: 9px; }
.p-cab b { color: #111; font-size: 1.25em; }
.p-pase { font-weight: 700; margin: 4px 0 5px; }
.p-despues { border: 2px solid #111; text-align: center; font-weight: 700; padding: 2px; margin: 10px 0 6px; }
.p-fila { display: flex; justify-content: space-between; gap: 10px; }
.p-total { border-top: 2px dashed #111; padding-top: 6px; margin-top: 8px !important; font-weight: 700; }
.p-pie { text-align: center; font-size: .9em; margin-top: 10px !important; }
.papel--grande { width: min(100%, 380px); font-size: 15px; padding: 22px 22px 28px; transform: rotate(1deg); }

/* Cifras */
.cifras { padding-top: 0; }
.cifras__in { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cifras__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cifras__in { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: 26px; padding: 34px 26px 30px; text-align: center; }
.cifra b { display: block; font-size: clamp(56px, 6.4vw, 88px); font-weight: 600; color: var(--marca); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra h2 { font-size: 21px; font-weight: 600; margin: 14px 0 8px; letter-spacing: -.01em; }
.cifra p { color: var(--suave); font-size: 15.5px; margin: 0; line-height: 1.5; }
.con-js .cifra:nth-child(2) { transition-delay: .08s; } .con-js .cifra:nth-child(3) { transition-delay: .16s; } .con-js .cifra:nth-child(4) { transition-delay: .24s; }

/* Pruébalo (portada): una invitación con tres papeles que se imprimen al verlos */
.prueba-portal { padding-top: clamp(40px, 6vw, 72px); }
.portal { background: var(--marca-hondo); border-radius: 32px; padding: clamp(28px, 5vw, 64px); display: grid; gap: 28px; align-items: center; overflow: hidden; }
@media (min-width: 900px) { .portal { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; } }
.portal .antetitulo { color: var(--acento); }
.portal .titulo-seccion { color: #fff; }
.portal__texto p { color: #CFE0D6; font-size: 18px; max-width: 34em; }
.boton--grande { min-height: 62px; padding: 0 34px; font-size: 20px; gap: 10px; }
.portal .boton--marca { background: var(--acento); color: var(--tinta); margin-top: 8px; }
.portal .boton--marca:hover { background: #FFC85A; }
.portal__texto .portal__nota { font-size: 15px; color: #A9BDB2; margin: 14px 0 0; }
.portal__papeles { position: relative; height: 330px; }
.portal__papeles .papel { position: absolute; width: min(46%, 240px); font-size: 11.5px; }
.portal__papeles .papel:nth-child(1) { left: 0; top: 46px; transform: rotate(-7deg); }
.portal__papeles .papel:nth-child(2) { left: 27%; top: 0; transform: rotate(1.5deg); z-index: 2; width: min(50%, 260px); }
.portal__papeles .papel:nth-child(3) { right: 0; top: 56px; transform: rotate(6deg); z-index: 1; }
.con-js .portal__papeles .papel { clip-path: inset(0 0 100% 0); }
.con-js .portal__papeles.visto .papel { animation: imprimirPortal 1.5s steps(20) forwards; }
.con-js .portal__papeles.visto .papel:nth-child(2) { animation-delay: .5s; }
.con-js .portal__papeles.visto .papel:nth-child(3) { animation-delay: 1.3s; }
@keyframes imprimirPortal { to { clip-path: inset(0 0 -12px 0); } }
@media (prefers-reduced-motion: reduce) { .con-js .portal__papeles .papel { clip-path: none; animation: none !important; } }
@media (max-width: 520px) { .portal__papeles { height: 290px; } .portal__papeles .papel { font-size: 9.5px; } }

/* La página de la demo (demo.html): el aparato grande y las tres impresoras a la vista */
.envoltura--ancha { max-width: 1640px; }
.pagina-demo .cabecera__logo { margin-right: 0; }
.cabecera__etiqueta { margin-right: auto; padding-left: 16px; border-left: 1px solid var(--linea); font-weight: 700; color: var(--suave); font-size: 16px; white-space: nowrap; }
.enlace-volver { color: var(--texto); text-decoration: none; font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.enlace-volver:hover { color: var(--marca); }
@media (max-width: 760px) { .enlace-volver { display: none; } }
@media (max-width: 480px) { .cabecera__etiqueta { display: none; } .pagina-demo .cabecera__logo { margin-right: auto; } }
.demo-pagina { padding: 14px 0 28px; background: linear-gradient(180deg, var(--fondo), #F1EBDF); min-height: calc(100vh - 69px); }
.demo-pagina__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.demo-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.demo-barra__der { display: flex; align-items: center; gap: 12px; }
.demo-progreso { font-weight: 700; color: var(--suave); font-size: 14.5px; white-space: nowrap; }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--suave); background: var(--papel); border: 1px solid var(--linea); border-radius: 99px; padding: 3px 11px 3px 3px; transition: background-color .25s, color .25s, border-color .25s; }
.pasos li::before { content: counter(paso); width: 22px; height: 22px; border-radius: 50%; background: #F1EBE1; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--tinta); transition: background-color .25s, transform .25s; }
.pasos li.actual { border-color: var(--acento); color: var(--tinta); box-shadow: 0 0 0 3px var(--acento-suave); }
.pasos li.hecha { color: var(--marca); }
.pasos li.hecha::before { content: '✓'; background: var(--marca); color: #fff; }
@media (max-width: 639px) { .pasos { display: none; } }
.siguiente { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--tinta); }
.pasos__fin { background: var(--acento-suave); border-radius: 14px; padding: 12px 16px; font-weight: 600; color: var(--tinta); font-size: 16px; margin: 0 0 12px; }
.demo-rejilla { display: grid; gap: 22px; align-items: start; }
.demo-equipo { min-width: 0; }
@media (min-width: 1100px) {
  .demo-rejilla { grid-template-columns: minmax(0, 1fr) clamp(250px, 21vw, 320px); }
  /* el aparato, todo lo grande que deje la altura de la pantalla */
  .demo-equipo .marco-tpv { max-width: calc((100vh - 185px) * 1.6); margin: 0 auto; }
  .demo-rejilla .impresoras { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 185px); max-height: 860px; }
  .demo-rejilla .impresora { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .demo-rejilla .impresora__salida { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
  .demo-rejilla .papel { font-size: 11.5px; }
  .demo-rejilla .impresora__vacia { padding: 12px; font-size: 13.5px; }
}
.prueba__nota { font-size: 14px; color: var(--suave); text-align: center; margin: 14px auto 0; max-width: 70ch; line-height: 1.45; }
.ver-papel { display: block; width: fit-content; margin: 14px auto 0; background: var(--marca); color: #fff; padding: 11px 20px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 10px 24px -12px rgba(21, 36, 29, .6); }
.ver-papel.entra { animation: subir .35s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 1100px) { .ver-papel { display: none !important; } }

@media (max-width: 639px) {
  .pagina-demo .demo-pagina { padding-top: 8px; }
  .pagina-demo .siguiente { font-size: 15px; margin-bottom: 8px; }
  .pagina-demo .demo-barra { margin-bottom: 4px; }
  .pagina-demo .marco-tpv { padding: 5px; border-radius: 16px; }
}
/* La hoja que sube con el papel recién impreso (pantallas estrechas) */
.hoja-papel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--papel); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 40px -10px rgba(21, 36, 29, .45); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 78dvh; overflow-y: auto; transform: translateY(105%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.hoja-papel.abierta { transform: none; }
.hoja-papel__t { font-weight: 700; color: var(--tinta); margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; }
.hoja-papel__t .boton { flex: none; }
.hoja-papel__papeles { display: grid; gap: 18px; padding: 0 6% 12px; }
/* en la hoja el papel solo se destapa: si además bajara, taparía el título */
.hoja-papel .papel.nuevo { animation: imprimirHoja 1.3s steps(18) both; }
@keyframes imprimirHoja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -12px 0); } }
@media (min-width: 1100px) { .hoja-papel { display: none; } }
/* El aviso de entrada en el móvil */
.aviso-movil { position: fixed; inset: 0; z-index: 40; background: rgba(21, 36, 29, .55); display: grid; align-items: end; }
.aviso-movil[hidden] { display: none; }
.aviso-movil__caja { background: var(--papel); border-radius: 24px 24px 0 0; padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 12px; animation: subir .35s cubic-bezier(.2, .8, .2, 1); }
.aviso-movil__caja h2 { font-size: 24px; }
.aviso-movil__caja p { margin: 0; color: var(--suave); font-size: 16.5px; line-height: 1.5; }
.aviso-movil__caja .boton { width: 100%; }
.aviso-movil__volver { text-align: center; color: var(--suave); font-weight: 600; text-decoration: none; padding: 6px; }
.portal__aviso-movil { display: none; }
@media (max-width: 639px) { .portal__texto .portal__aviso-movil { display: block; font-size: 15px; color: #CFE0D6; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); } }

/* Las tres impresoras de la demo */
.impresoras { display: grid; gap: 18px; }
@media (min-width: 640px) and (max-width: 1099px) { .impresoras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.impresora__t { font-weight: 700; font-size: 14.5px; color: var(--tinta); margin: 0 0 6px; text-align: center; }
.impresora__cuerpo { position: relative; flex: none; height: 34px; border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, #3A4A42, #1A2A22); box-shadow: 0 14px 22px -16px rgba(21, 36, 29, .6); z-index: 1; }
.impresora__cuerpo span { position: absolute; left: 10%; right: 10%; bottom: 8px; height: 5px; border-radius: 3px; background: #0B1511; }
.impresora__cuerpo::after { content: ''; position: absolute; right: 12px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #2F6B52; }
.impresora.imprimiendo .impresora__cuerpo::after { background: #8CF0B8; box-shadow: 0 0 10px #8CF0B8; }
.impresora__salida { margin: -10px 8% 0; display: flex; flex-direction: column; gap: 16px; padding: 10px 0 12px; overflow: hidden; }
.impresora__salida .papel.nuevo { animation: imprimir 1.3s steps(18) both; }
.impresora__salida .papel + .papel { opacity: .55; }
@keyframes imprimir { from { clip-path: inset(0 0 100% 0); transform: translateY(-60px); } to { clip-path: inset(0 0 -12px 0); transform: none; } }
.impresora__vacia { color: var(--suave); font-size: 14px; text-align: center; padding: 18px 14px; border: 2px dashed var(--linea); border-radius: 12px; margin: 6px 0 0; line-height: 1.4; }

/* ---------- La app de la demo ---------- */
.demo-app { font-family: var(--letra); color: var(--tinta); background: #F4F1EA; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.demo-app button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; transition: transform .08s, background-color .15s, box-shadow .15s; }
.demo-app button:active { transform: scale(.96); }
.demo-app button:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }
.d-cab { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border-bottom: 1px solid #E8E0D4; }
.d-marca svg { width: 30px; height: 30px; display: block; }
.d-volver { height: 38px; border-radius: 11px; background: #F1ECE4 !important; padding: 0 14px 0 8px !important; display: flex; align-items: center; gap: 2px; font-weight: 700; font-size: 15px; }
.d-volver svg { width: 20px; height: 20px; }
.d-titulo { font-size: 19px; font-weight: 700; }
.d-hueco { flex: 1; }
.d-cuenta-atras { background: var(--acento-suave); color: #8A5A00; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 99px; }
.d-yo { display: flex; align-items: center; gap: 8px; background: #F1ECE4 !important; padding: 5px 13px 5px 5px !important; border-radius: 99px; font-weight: 600; font-size: 15px; }
.d-yo i { width: 26px; height: 26px; border-radius: 50%; }
.d-reloj { font-weight: 600; color: #7A6F66; font-size: 15px; font-variant-numeric: tabular-nums; }
.d-cuerpo { flex: 1; position: relative; min-height: 0; }

.d-quien { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.d-quien-t { font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.d-usuarios { display: flex; gap: 26px; }
.d-u { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.d-u i { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 36px; color: #15241D; box-shadow: 0 10px 22px -10px rgba(21, 36, 29, .45); transition: transform .15s; }
.d-u:hover i { transform: translateY(-3px); }
.d-quien-nota { color: #857A70; font-size: 14px; margin: 0; }

.d-sala { position: absolute; inset: 0; }
.d-plano { position: absolute; inset: 0; }
.d-lista { display: none; }
.d-zona { position: absolute; top: 14px; bottom: 14px; border-radius: 16px; }
.d-salon { left: 14px; width: 628px; background: #FBF8F3; border: 2px solid #E8DFD2; }
.d-terraza { left: 656px; right: 14px; background: #EEF4E8; border: 2px solid #DCE6D0; }
.d-zona span { position: absolute; top: 12px; left: 16px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #A0948A; }
.d-mesa { position: absolute; transform: translate(-50%, -50%); }
.demo-app .d-mesa:active { transform: translate(-50%, -50%) scale(.95); }
.d-cuadrada { width: 66px; height: 66px; } .d-rect { width: 118px; height: 66px; } .d-redonda { width: 76px; height: 76px; }
.d-tablero { position: absolute; inset: 0; background: #fff; border: 2.5px solid #D8CDBF; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; transition: box-shadow .15s; }
.d-redonda .d-tablero { border-radius: 50%; }
.d-tablero b { font-size: 20px; font-weight: 700; }
.d-tablero small { font-size: 11.5px; font-weight: 700; color: #8A5A00; margin-top: 2px; }
.d-mesa:hover .d-tablero { box-shadow: 0 0 0 5px rgba(30, 77, 59, .14); }
.ocupada .d-tablero { background: var(--acento-suave); border-color: #E2A42A; }
.cuenta .d-tablero { background: #DCEBE2; border-color: var(--marca); }
.cuenta .d-tablero small { color: var(--marca); }
/* Las sillas como en el plano del TPV (mesas «tipo C», 20-10-2026): un semicírculo verde pegado al borde. */
.d-mesa .s { position: absolute; background: #7D968B; border: 1.5px solid #6A8378; box-sizing: border-box; }
.d-mesa .s1, .d-mesa .s2 { width: 26px; height: 13px; }
.d-mesa .s3, .d-mesa .s4 { width: 13px; height: 26px; }
.d-mesa .s1 { border-bottom: 0; border-radius: 13px 13px 0 0; }
.d-mesa .s2 { border-top: 0; border-radius: 0 0 13px 13px; }
.d-cuadrada .s1, .d-redonda .s1 { left: calc(50% - 13px); top: -13px; }
.d-cuadrada .s2, .d-redonda .s2 { left: calc(50% - 13px); bottom: -13px; }
.d-redonda .s3 { top: calc(50% - 13px); left: -13px; border-right: 0; border-radius: 13px 0 0 13px; }
.d-redonda .s4 { top: calc(50% - 13px); right: -13px; border-left: 0; border-radius: 0 13px 13px 0; }
.d-rect .s1, .d-rect .s2, .d-rect .s3, .d-rect .s4 { width: 26px; height: 13px; }
.d-rect .s1 { top: -13px; left: 18px; } .d-rect .s2 { top: -13px; right: 18px; border-top: 1.5px solid #6A8378; border-bottom: 0; border-radius: 13px 13px 0 0; }
.d-rect .s3 { bottom: -13px; left: 18px; border-top: 0; border-bottom: 1.5px solid #6A8378; border-radius: 0 0 13px 13px; }
.d-rect .s4 { bottom: -13px; right: 18px; border-top: 0; border-bottom: 1.5px solid #6A8378; border-radius: 0 0 13px 13px; }

.d-ticket { position: absolute; inset: 0; display: grid; grid-template-columns: 372px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "pedido carta" "pie carta"; }
.d-ticket .d-pedido { grid-area: pedido; } .d-ticket .d-carta { grid-area: carta; } .d-ticket .d-pie { grid-area: pie; background: #fff; border-right: 1px solid #E8E0D4; }
.d-subtabs { display: none; }
.d-pedido { display: flex; flex-direction: column; background: #fff; border-right: 1px solid #E8E0D4; min-height: 0; }
.d-pedido-cab { padding: 9px 16px; font-size: 13px; color: #857A70; border-bottom: 1px solid #F0E9DF; }
.d-lineas { flex: 1; overflow: auto; padding: 4px 10px; }
.d-grupo { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--marca); margin: 10px 6px 5px; }
.d-linea { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; gap: 6px; align-items: center; text-align: left; padding: 8px 9px !important; border-radius: 10px; margin-bottom: 4px; font-size: 15px; line-height: 1.2; }
.d-linea.nueva { background: #FFF7E3 !important; box-shadow: inset 0 0 0 1.5px #EBD49B; }
.d-linea.enviada { background: #F5F2ED !important; color: #5C6962 !important; }
.d-linea .c { font-weight: 800; color: var(--marca); }
.d-linea .n small { color: #857A70; font-size: 12px; }
.d-linea .n .nota { display: block; margin-top: 2px; }
.d-linea .p { font-weight: 600; font-variant-numeric: tabular-nums; }
.d-linea em { font-style: normal; font-weight: 800; text-align: center; color: #A8730A; }
.d-linea.enviada em { color: var(--marca); }
.d-vacio { color: #857A70; font-size: 14px; text-align: center; margin: 46px 20px 0; }
.d-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; border-top: 1px solid #F0E9DF; }
.d-total span { color: #857A70; }
.d-total b { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; }
.d-acciones { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 8px; padding: 0 12px 12px; }
.d-b { height: 54px; border-radius: 13px; background: #F1ECE4 !important; font-weight: 700 !important; font-size: 15px; }
.d-b-marca { background: var(--marca) !important; color: #fff !important; }
.d-b:disabled { opacity: .38; cursor: default; }
.d-carta { display: flex; flex-direction: column; padding: 12px; gap: 10px; min-height: 0; }
.d-familias { display: flex; gap: 8px; }
.d-familias button { flex: 1; height: 44px; border-radius: 12px; background: #fff !important; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1.5px #E6DDD1; }
.d-familias button.activa { background: var(--marca) !important; color: #fff !important; box-shadow: none; }
.d-productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; min-height: 0; }
.d-prod { background: #fff !important; border-radius: 14px; padding: 12px 13px !important; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; box-shadow: inset 0 0 0 1.5px #EDE5D9, inset 0 5px 0 var(--acento); }
.d-prod span { font-weight: 700; font-size: 16px; line-height: 1.15; }
.d-prod small { color: #857A70; font-size: 12.5px; line-height: 1.25; }
.d-prod:hover { box-shadow: inset 0 0 0 1.5px #D8CDBF, inset 0 5px 0 var(--acento); }
.d-teclado { display: grid; grid-template-columns: 1.6fr repeat(6, minmax(0, 1fr)); grid-template-rows: 44px 44px; gap: 6px; }
.d-teclado button { background: #fff !important; border-radius: 10px; font-weight: 700; font-size: 17px; box-shadow: inset 0 0 0 1.5px #E6DDD1; }
.d-cant { grid-row: span 2; border-radius: 12px; background: #EDE7DE; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #8C8178; text-align: center; }
.d-cant.llena { font-size: 24px; font-weight: 800; }
.d-cant.llena { background: var(--marca); color: var(--acento); }
.d-teclado .d-pase { font-size: 11.5px !important; color: var(--marca); line-height: 1.1; padding: 0 2px !important; }
.d-teclado .d-pase.fijo { background: var(--acento-suave) !important; }

.d-capa { position: absolute; inset: 0; background: rgba(21, 36, 29, .45); display: grid; place-items: center; z-index: 5; animation: aparecer .2s; }
.d-dlg { background: #fff; border-radius: 22px; padding: 22px; width: 440px; max-width: calc(100% - 28px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); animation: subir .25s cubic-bezier(.2, .8, .2, 1); }
.d-dlg-t { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.d-dlg-s { margin: 0 0 16px; color: #857A70; font-size: 15px; }
.d-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.d-ops button { height: 66px; border-radius: 14px; background: #F1ECE4 !important; font-weight: 700; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.d-ops button:hover { background: var(--acento-suave) !important; }
.d-ops small { font-weight: 500; color: #857A70; font-size: 12.5px; }
.d-cancelar { margin-top: 10px; width: 100%; height: 40px; color: #857A70 !important; font-weight: 600; }
.d-cobro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.d-cobro div { background: #F6F3EE; border-radius: 12px; padding: 9px 12px; }
.d-cobro span { font-size: 12px; color: #857A70; display: block; }
.d-cobro b { font-size: 20px; font-variant-numeric: tabular-nums; }
.d-cobro .falta b { color: #B23A1B; }
.d-rapidos { display: flex; gap: 8px; margin-bottom: 8px; }
.d-rapidos button { flex: 1; height: 40px; border-radius: 10px; background: var(--acento-suave) !important; font-weight: 700; }
.d-cteclado { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.d-cteclado button { height: 42px; border-radius: 10px; background: #F1ECE4 !important; font-weight: 700; font-size: 17px; }
.d-formas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-capa-cambio { background: rgba(21, 36, 29, .62); cursor: pointer; }
.d-cambio { background: var(--marca); color: #fff; border-radius: 26px; padding: 30px 64px; text-align: center; display: flex; flex-direction: column; gap: 2px; animation: saltar .4s cubic-bezier(.2, 1.4, .4, 1); }
.d-cambio span { font-size: 18px; color: #CFE0D6; }
.d-cambio b { font-size: 68px; color: var(--acento); line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.d-cambio small { color: #CFE0D6; font-size: 14px; }
.d-aviso { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); width: max-content; max-width: 78%; background: #15241D; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); z-index: 6; animation: aviso .3s cubic-bezier(.2, .8, .2, 1); text-align: center; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes saltar { from { opacity: 0; transform: scale(.7); } }
@keyframes aviso { from { opacity: 0; transform: translate(-50%, -10px); } }

/* Formato móvil (el comandero): la sala en lista y la carta encima del pedido */
.f-movil .d-cab { padding: 0 12px; gap: 10px; }
.f-movil .d-reloj { display: none; }
.f-movil .d-cuerpo { overflow-y: auto; overscroll-behavior: contain; }
.f-movil[data-pantalla="mesa"] .d-cuerpo { overflow: hidden; }
.f-movil .d-quien { gap: 22px; padding: 20px; }
.f-movil .d-quien-t { font-size: 28px; }
.f-movil .d-usuarios { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.f-movil .d-u i { width: 76px; height: 76px; font-size: 30px; }
.f-movil .d-sala { position: static; }
.f-movil .d-plano { display: none; }
.f-movil .d-lista { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.d-fila { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; text-align: left; background: #fff !important; border-radius: 12px; padding: 11px 14px !important; box-shadow: inset 0 0 0 1.5px #EDE5D9; }
.d-fila b { font-size: 16px; }
.d-fila span { grid-column: 1; font-size: 13px; color: #857A70; }
.d-fila em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-fila.ocupada { box-shadow: inset 5px 0 0 #E2A42A, inset 0 0 0 1.5px #EDE5D9; }
.d-fila.cuenta { box-shadow: inset 5px 0 0 var(--marca), inset 0 0 0 1.5px #EDE5D9; }
.f-movil .d-ticket { position: absolute; inset: 0; display: flex; flex-direction: column; }
.f-movil .d-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 8px 10px 0; background: #E9E3D9; border-radius: 12px; padding: 3px; flex: none; }
.f-movil .d-subtabs button { padding: 8px 4px !important; border-radius: 10px; font-weight: 700; font-size: 15px; color: #6E6259 !important; display: flex; align-items: center; justify-content: center; gap: 6px; }
.f-movil .d-subtabs button[aria-selected="true"] { background: #fff !important; color: var(--tinta) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.d-uds { min-width: 22px; height: 22px; border-radius: 11px; background: var(--acento); color: var(--tinta); font-size: 12.5px; display: inline-grid; place-items: center; padding: 0 6px; }
.d-uds.salta { animation: salta .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes salta { 40% { transform: scale(1.35); } }
.f-movil .d-ticket[data-vista="carta"] .d-pedido, .f-movil .d-ticket[data-vista="pedido"] .d-carta { display: none; }
.f-movil .d-carta { flex: 1; min-height: 0; padding: 8px 10px 6px; gap: 8px; overflow: hidden; }
.f-movil .d-pedido { flex: 1; min-height: 0; border-right: 0; }
.f-movil .d-lineas { overflow-y: auto; }
.f-movil .d-productos { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.f-movil .d-familias { gap: 6px; }
.f-movil .d-familias button { height: 38px; font-size: 13px; }
.f-movil .d-productos { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(60px, auto); }
.f-movil .d-prod span { font-size: 15px; }
.f-movil .d-teclado { grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)); grid-template-rows: 40px 40px; gap: 5px; }
.f-movil .d-teclado button { font-size: 15px; }
.f-movil .d-pie { flex: none; background: #fff; border-top: 1px solid #E8E0D4; border-right: 0; }
.f-movil .d-total { padding: 8px 14px 4px; }
.f-movil .d-total b { font-size: 20px; }
.f-movil .d-acciones { padding: 4px 12px 12px; }
.f-movil .d-b { height: 48px; font-size: 14px; }
.f-movil .d-dlg { padding: 18px; }
.f-movil .d-cobro b { font-size: 16px; }
.f-movil .d-cteclado button { height: 38px; }
.f-movil .d-cambio { padding: 24px 34px; }
.f-movil .d-cambio b { font-size: 48px; }
.f-movil .d-aviso { top: 62px; max-width: 90%; font-size: 14px; }

/* Pestañas de funciones */
.explora { background: var(--fondo); }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 auto 26px; max-width: 980px; }
.pestanas button { padding: 10px 17px; border-radius: 13px; font: inherit; font-weight: 600; font-size: 16px; color: var(--suave); background: none; border: 0; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(21, 36, 29, .08), 0 8px 20px -12px rgba(21, 36, 29, .35); }
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 30px; padding: clamp(22px, 4vw, 52px); display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.panel.entra { animation: entraPanel .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes entraPanel { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .panel.entra { animation: none; } }
.panel__visual { display: flex; justify-content: center; min-width: 0; }
.panel__visual .maqueta { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 40px -24px rgba(21, 36, 29, .45); }
.panel__visual--movil .maqueta { max-width: 270px; box-shadow: none; filter: drop-shadow(0 20px 26px rgba(21, 36, 29, .3)); }
.panel__texto h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 16px; }
.panel__texto ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.panel__texto li { position: relative; padding-left: 28px; color: var(--suave); font-size: 17px; line-height: 1.5; }
.panel__texto li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.vis-cobro { background: var(--marca); color: #CFE0D6; border-radius: 28px; padding: 38px 56px; text-align: center; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 24px 50px -26px rgba(21, 36, 29, .7); }
.vis-cobro b { font-size: clamp(54px, 7vw, 84px); color: var(--acento); line-height: 1.05; font-weight: 800; }
.vis-cobro small { font-size: 15px; }
.vis-informe { width: 100%; max-width: 460px; background: #FBF8F3; border: 1px solid var(--linea); border-radius: 20px; padding: 22px; }
.vis-informe__t { font-weight: 700; margin: 0 0 16px; color: var(--tinta); }
.barras { display: grid; gap: 12px; }
.barras span { position: relative; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--marca) calc(var(--v) * 100%), #EDE6DA 0); }
.barras span::after { content: attr(data-n); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13.5px; font-weight: 600; color: #fff; }
.panel.entra .barras span { animation: crecer .9s cubic-bezier(.2, .8, .2, 1) both; }
.panel.entra .barras span:nth-child(2) { animation-delay: .06s; } .panel.entra .barras span:nth-child(3) { animation-delay: .12s; } .panel.entra .barras span:nth-child(4) { animation-delay: .18s; } .panel.entra .barras span:nth-child(5) { animation-delay: .24s; }
@keyframes crecer { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
.vis-perfiles { display: grid; gap: 10px; width: 100%; max-width: 480px; }
.vis-perfiles > div { background: #FBF8F3; border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vis-perfiles b { width: 100%; margin-bottom: 2px; }
.vis-perfiles span { font-size: 13.5px; padding: 4px 10px; border-radius: 99px; }
.vis-perfiles .si { background: #DCEBE2; color: var(--marca); }
.vis-perfiles .si::before { content: '✓ '; }
.vis-perfiles .no { background: #F1ECE4; color: #8C8178; text-decoration: line-through; }
.vis-agora { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vis-agora span { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 14px; font-size: 14px; font-family: 'Consolas', monospace; box-shadow: var(--sombra); }
.vis-agora .flecha { border: 0; box-shadow: none; background: none; font-size: 28px; color: var(--marca); font-family: inherit; }
.vis-agora b { background: var(--marca); color: #fff; padding: 12px 20px; border-radius: 14px; }

/* Mi bar en vivo */
@media (min-width: 860px) { .dueno__in { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } }
.dueno .telefono b { color: var(--tinta); }
.dueno .telefono .mb-ventas b { color: #fff; }
.telefono { justify-self: center; width: min(100%, 330px); background: #0D1813; border-radius: 46px; padding: 12px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .6); }
.telefono__pantalla { background: #F4F1EA; border-radius: 35px; padding: 26px 14px 18px; display: flex; flex-direction: column; gap: 10px; color: var(--tinta); font-size: 14px; }
.telefono__pantalla { position: relative; overflow: hidden; }
.mb-noti { position: absolute; left: 10px; right: 10px; top: 12px; z-index: 2; display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .96); border-radius: 18px; padding: 10px 12px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); transform: translateY(-140%); transition: transform .55s cubic-bezier(.2, .9, .25, 1); }
.mb-noti.fuera { transform: none; }
.mb-noti img { border-radius: 8px; flex: none; }
.mb-noti div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mb-noti small { color: #857A70; font-size: 11px; }
.dueno .mb-noti b { font-size: 13.5px; color: var(--tinta); }
.mb-noti span { font-size: 12.5px; color: var(--texto); }
.mb-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marca) !important; }
.mb-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 0 rgba(43, 182, 115, .5); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(43, 182, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); } }
@media (prefers-reduced-motion: reduce) { .mb-vivo::before { animation: none; } }
.mb-vistas { display: grid; grid-template-columns: 1fr 1fr; background: #E9E3D9; border-radius: 12px; padding: 3px; gap: 3px; }
.mb-vistas button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--suave); padding: 7px 4px; border-radius: 10px; cursor: pointer; }
.mb-vistas button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mb-vista { display: flex; flex-direction: column; gap: 10px; }
.mb-z { list-style: none; margin: 0; padding: 4px 14px; background: #fff; border-radius: 16px; }
.mb-z li { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-top: 1px solid #F0E9DF; }
.mb-z li:first-child { border-top: 0; }
.mb-z span { grid-column: 1; font-size: 12.5px; color: #857A70; }
.mb-z em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.mb-z i { font-style: normal; font-weight: 600; }
.mb-z .ok { color: var(--marca); }
.mb-z .mal { color: #B23A1B; }
.dueno .mb-z-nota { font-size: 12.5px; color: #857A70; margin: 0 4px; line-height: 1.4; }
.mb-cab { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.mb-cab b { font-size: 18px; color: var(--tinta); flex: 1; }
.mb-cab span { color: #857A70; }
.mb-ventas { background: var(--marca-hondo); border-radius: 20px; padding: 16px 18px; color: #B9CCC1; display: flex; flex-direction: column; }
.mb-ventas b { color: #fff; font-size: 31px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-ventas b.pulso { animation: pulso .9s; }
@keyframes pulso { 40% { color: var(--acento); } }
.mb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-tiles div { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; }
.mb-tiles span { color: #857A70; font-size: 13px; }
.mb-tiles b { font-size: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-ultimos { background: #fff; border-radius: 16px; padding: 12px 14px; }
.mb-ultimos > span { font-weight: 700; display: block; margin-bottom: 6px; }
.mb-ultimos ul { list-style: none; margin: 0; padding: 0; }
.mb-ultimos li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-top: 1px solid #F0E9DF; align-items: baseline; }
.mb-ultimos li span { color: #857A70; font-size: 12.5px; }
.mb-ultimos li b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-ultimos li em { white-space: nowrap; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.mb-ultimos li.nuevo { animation: entraFila .6s cubic-bezier(.2, .8, .2, 1); background: linear-gradient(90deg, var(--acento-suave), transparent); }
@keyframes entraFila { from { opacity: 0; transform: translateY(-10px); } }

/* Montaje: los cables «corren» */
.esquema-fig .m-wifi { animation: fluirWifi 1.3s linear infinite; }
.esquema-fig .m-internet { animation: fluirInternet 1.8s linear infinite; }
@keyframes fluirWifi { to { stroke-dashoffset: -36; } }
@keyframes fluirInternet { to { stroke-dashoffset: -40; } }
@media (prefers-reduced-motion: reduce) { .esquema-fig .m-wifi, .esquema-fig .m-internet { animation: none; } }

/* Lo que no lleva: se tacha al verlo */
.tachado { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.tachado li { background: var(--fondo); border: 1px solid var(--linea); border-radius: 99px; padding: 8px 16px; font-weight: 600; color: var(--tinta); font-size: 16px; }
.tachado s { text-decoration: none; position: relative; }
.tachado s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2.5px; border-radius: 2px; background: #C2410C; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6, 0, .3, 1); }
.visto .tachado s::after, .sin-js .tachado s::after { transform: scaleX(1); }
.visto .tachado li:nth-child(2) s::after { transition-delay: .15s; } .visto .tachado li:nth-child(3) s::after { transition-delay: .3s; }
.visto .tachado li:nth-child(4) s::after { transition-delay: .45s; } .visto .tachado li:nth-child(5) s::after { transition-delay: .6s; }
html:not(.con-js) .tachado s::after { transform: scaleX(1); }