{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); --ink:#12263A; --ink-2:#22394F; --fire:#FF4D1C; --fire-dark:#D93A0D; --paper:#FFFFFF; --paper-2:#F3F5F8; --text:#243447; --muted:#5B6B7C; --line:#DCE3EA; --wa:#25D366; --shadow:0 18px 50px -20px rgba(18,38,58,.35); --r:14px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0F1B29; --paper-2:#152537; --text:#E6ECF2; --muted:#9FB0C2; --line:#25384C; --ink:#0A1420; --ink-2:#132232; --shadow:0 18px 50px -20px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ --paper:#0F1B29; --paper-2:#152537; --text:#E6ECF2; --muted:#9FB0C2; --line:#25384C; --ink:#0A1420; --ink-2:#132232; --shadow:0 18px 50px -20px rgba(0,0,0,.7); } html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))} *,*::before,*::after{box-sizing:inherit;margin:0;padding:0} body{font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--paper);color:var(--text);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3{font-family:'Sora','Manrope',system-ui,sans-serif;color:var(--ink);line-height:1.12;letter-spacing:-.02em} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3{color:#fff} } :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3{color:#fff} h1{font-size:clamp(1.9rem,3.9vw,3.05rem);font-weight:800} h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700} h3{font-size:1.15rem;font-weight:600} p{max-width:62ch} a{color:inherit} img{max-width:100%} .wrap{width:min(1120px,92vw);margin:0 auto} section{padding:88px 0} @media (max-width:720px){section{padding:64px 0}} .lead{font-size:1.15rem;color:var(--muted)} .center{text-align:center;max-width:none} .center + .lead{margin:0 auto;text-align:center} .kicker{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fire);margin-bottom:14px} /* botones */ .btn{display:inline-flex;align-items:center;gap:.6rem;font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;padding:.95rem 1.5rem;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:3px solid var(--fire);outline-offset:3px} .btn-fire{background:var(--fire);color:#fff} .btn-fire:hover{background:var(--fire-dark)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink)} :root[data-theme="dark"] .btn-ghost{color:var(--text)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-ghost{color:var(--text)} } .btn-wa{background:var(--wa);color:#fff} .btn-wa:hover{background:#1DB954} .btn svg{width:20px;height:20px;flex:none} /* nav */ .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .logo{display:flex;align-items:center;gap:.55rem;font-family:'Sora',sans-serif;font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em} :root[data-theme="dark"] .logo{color:#fff} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo{color:#fff} } .logo i{width:34px;height:34px;border-radius:10px;background:var(--fire);display:grid;place-items:center;color:#fff;font-style:normal;font-size:1.05rem} .nav ul{display:flex;gap:1.8rem;list-style:none} .nav ul a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--muted)} .nav ul a:hover{color:var(--fire)} @media (max-width:860px){.nav ul{display:none}} .nav .btn{padding:.7rem 1.2rem;font-size:.92rem} /* hero */ .hero{padding:64px 0 48px;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center} .hero .wrap>*{min-width:0} @media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:44px}} .hero h1{margin:0 0 20px} .hero .lead{margin-bottom:28px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero-note{margin-top:14px;font-size:.9rem;color:var(--muted)} .hero-note b{color:var(--text)} .stats{display:flex;gap:22px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap} .stats div{flex:1 1 0;min-width:96px} .stats span{display:block;font-size:.85rem;color:var(--muted);line-height:1.4} .stats strong{display:block;font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-.02em} :root[data-theme="dark"] .stats strong{color:#fff} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stats strong{color:#fff} } .stats span{font-size:.85rem;color:var(--muted)} /* ===================================================================== MOCKUPS "COMO CAPTURAS DE PANTALLA" Todo es HTML/CSS: se ve nítido en cualquier pantalla y escala con la ventana porque las medidas internas estan en em y el marco fija la fuente. ===================================================================== */ .dev{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.3;color:#0f172a} .dev *{box-sizing:border-box} /* laptop */ .lap{--fs:clamp(8.5px,1.05vw,14px);font-size:var(--fs);width:100%;max-width:800px;margin:0 auto;container-type:inline-size} .lap .screen,.lap .base{font-size:var(--fs);font-size:calc(100cqw / 56)} .lap .screen{background:#fff;border:.7em solid #1c1c1e;border-bottom-width:1.2em;border-radius:1.2em 1.2em .4em .4em;aspect-ratio:16/10;overflow:hidden;position:relative;box-shadow:var(--shadow)} .lap .base{height:1em;background:linear-gradient(#e5e7eb,#9ca3af);border-radius:0 0 1.4em 1.4em;margin:0 calc(-1 * min(2.5em, 14px));position:relative} .lap .base::after{content:"";position:absolute;left:50%;top:0;width:12em;height:.35em;background:#6b7280;border-radius:0 0 .5em .5em;transform:translateX(-50%)} /* tablet apaisada */ .tab{--fs:clamp(7.5px,.95vw,13px);font-size:var(--fs);width:100%;max-width:1120px;margin:0 auto;container-type:inline-size} .tab .screen{font-size:var(--fs);font-size:calc(100cqw / 86)} .tab .screen{background:#000;border:1.1em solid #1c1c1e;border-radius:2em;aspect-ratio:16/9.6;overflow:hidden;position:relative;box-shadow:var(--shadow)} /* celular */ .ph{--fs:clamp(9px,1.05vw,13.5px);font-size:var(--fs);width:min(320px,100%);margin:0 auto;container-type:inline-size} .ph .screen{font-size:var(--fs);font-size:calc(100cqw / 23.5)} .ph .screen{background:#fff;border:.65em solid #0d0d0d;border-radius:3.2em;aspect-ratio:9/19.2;overflow:hidden;position:relative;box-shadow:var(--shadow)} .ph .screen::before{content:"";position:absolute;top:.6em;left:50%;transform:translateX(-50%);width:8em;height:1.9em;background:#0d0d0d;border-radius:999px;z-index:5} .ph .status{height:3.4em;display:flex;justify-content:space-between;align-items:flex-end;padding:0 1.6em .3em;font-size:1em;font-weight:700} /* QR real (SVG generado, codifica una URL de ejemplo) */ .qrimg{position:relative;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM8 0h3v1h-3zM13 0h3v1h-3zM19 0h2v1h-2zM22 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h2v1h-2zM11 1h1v1h-1zM13 1h1v1h-1zM16 1h2v1h-2zM22 1h1v1h-1zM28 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM10 2h2v1h-2zM16 2h1v1h-1zM20 2h1v1h-1zM22 2h1v1h-1zM24 2h3v1h-3zM28 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM8 3h1v1h-1zM14 3h2v1h-2zM17 3h1v1h-1zM19 3h1v1h-1zM22 3h1v1h-1zM24 3h3v1h-3zM28 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM14 4h1v1h-1zM16 4h2v1h-2zM19 4h2v1h-2zM22 4h1v1h-1zM24 4h3v1h-3zM28 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM11 5h1v1h-1zM13 5h1v1h-1zM15 5h2v1h-2zM19 5h2v1h-2zM22 5h1v1h-1zM28 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h7v1h-7zM8 7h2v1h-2zM11 7h1v1h-1zM15 7h4v1h-4zM0 8h1v1h-1zM2 8h2v1h-2zM5 8h3v1h-3zM9 8h3v1h-3zM13 8h1v1h-1zM15 8h4v1h-4zM22 8h1v1h-1zM25 8h1v1h-1zM27 8h2v1h-2zM4 9h1v1h-1zM7 9h1v1h-1zM9 9h2v1h-2zM13 9h3v1h-3zM18 9h7v1h-7zM28 9h1v1h-1zM1 10h7v1h-7zM9 10h1v1h-1zM13 10h1v1h-1zM18 10h1v1h-1zM21 10h3v1h-3zM26 10h2v1h-2zM1 11h2v1h-2zM8 11h2v1h-2zM16 11h1v1h-1zM18 11h1v1h-1zM20 11h2v1h-2zM23 11h1v1h-1zM28 11h1v1h-1zM1 12h1v1h-1zM3 12h1v1h-1zM6 12h1v1h-1zM9 12h1v1h-1zM12 12h1v1h-1zM14 12h2v1h-2zM17 12h1v1h-1zM19 12h1v1h-1zM23 12h1v1h-1zM25 12h2v1h-2zM1 13h2v1h-2zM5 13h1v1h-1zM8 13h3v1h-3zM14 13h1v1h-1zM19 13h1v1h-1zM22 13h1v1h-1zM26 13h3v1h-3zM2 14h1v1h-1zM6 14h1v1h-1zM8 14h2v1h-2zM12 14h2v1h-2zM16 14h6v1h-6zM23 14h2v1h-2zM26 14h3v1h-3zM0 15h1v1h-1zM2 15h2v1h-2zM5 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM14 15h2v1h-2zM19 15h1v1h-1zM21 15h2v1h-2zM24 15h1v1h-1zM27 15h1v1h-1zM0 16h1v1h-1zM2 16h1v1h-1zM4 16h8v1h-8zM14 16h1v1h-1zM16 16h1v1h-1zM20 16h2v1h-2zM24 16h2v1h-2zM27 16h1v1h-1zM2 17h2v1h-2zM5 17h1v1h-1zM8 17h3v1h-3zM14 17h4v1h-4zM20 17h2v1h-2zM23 17h1v1h-1zM25 17h3v1h-3zM0 18h1v1h-1zM2 18h5v1h-5zM8 18h2v1h-2zM13 18h3v1h-3zM17 18h1v1h-1zM23 18h2v1h-2zM26 18h1v1h-1zM4 19h1v1h-1zM8 19h1v1h-1zM12 19h3v1h-3zM17 19h3v1h-3zM21 19h1v1h-1zM26 19h1v1h-1zM1 20h8v1h-8zM10 20h1v1h-1zM13 20h2v1h-2zM17 20h1v1h-1zM20 20h7v1h-7zM8 21h2v1h-2zM12 21h1v1h-1zM20 21h1v1h-1zM24 21h5v1h-5zM0 22h7v1h-7zM8 22h3v1h-3zM14 22h1v1h-1zM17 22h1v1h-1zM19 22h2v1h-2zM22 22h1v1h-1zM24 22h2v1h-2zM27 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h2v1h-2zM11 23h1v1h-1zM13 23h3v1h-3zM18 23h3v1h-3zM24 23h2v1h-2zM27 23h2v1h-2zM0 24h1v1h-1zM2 24h3v1h-3zM6 24h1v1h-1zM17 24h2v1h-2zM20 24h5v1h-5zM26 24h2v1h-2zM0 25h1v1h-1zM2 25h3v1h-3zM6 25h1v1h-1zM8 25h5v1h-5zM15 25h1v1h-1zM17 25h5v1h-5zM23 25h3v1h-3zM28 25h1v1h-1zM0 26h1v1h-1zM2 26h3v1h-3zM6 26h1v1h-1zM8 26h3v1h-3zM12 26h2v1h-2zM16 26h1v1h-1zM18 26h1v1h-1zM23 26h1v1h-1zM26 26h1v1h-1zM28 26h1v1h-1zM0 27h1v1h-1zM6 27h1v1h-1zM10 27h1v1h-1zM14 27h1v1h-1zM18 27h1v1h-1zM20 27h2v1h-2zM25 27h1v1h-1zM27 27h1v1h-1zM0 28h7v1h-7zM8 28h1v1h-1zM11 28h1v1h-1zM14 28h1v1h-1zM16 28h1v1h-1zM19 28h2v1h-2zM22 28h2v1h-2zM25 28h1v1h-1zM27 28h1v1h-1z' fill='%23111'/%3E%3C/svg%3E") center/contain no-repeat #fff;border:.6em solid #fff;outline:1px solid #e2e8f0} /* ---- fotos de platos (sin imagenes externas): degradado + emoji ---- */ .foto{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 36%,#fde68a 0,#f59e0b 42%,#b45309 78%,#7c2d12 100%);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35);line-height:1} .foto.v{background:radial-gradient(circle at 38% 36%,#d9f99d 0,#65a30d 45%,#365314 100%)} .foto.s{background:radial-gradient(circle at 40% 40%,#fef9c3 0,#facc15 42%,#a16207 100%)} .foto.r{background:radial-gradient(circle at 40% 40%,#fecaca 0,#ef4444 45%,#7f1d1d 100%)} .foto.g{background:radial-gradient(circle at 40% 40%,#bbf7d0 0,#22c55e 45%,#14532d 100%)} .foto.m{background:radial-gradient(circle at 40% 40%,#fed7aa 0,#ea580c 45%,#7c2d12 100%)} /* ---- CAJA (laptop): pantalla "Cuentas & Ventas" ---- */ .caja{display:grid;grid-template-columns:10.5em 1fr;height:100%;background:#f7f8fb;position:relative} .caja .side{background:#1c2140;color:#c7cbe3;padding:1.1em .9em;display:flex;flex-direction:column;gap:.3em} .caja .brand{font-weight:900;color:#fff;font-size:1em;letter-spacing:.03em;display:flex;align-items:center;gap:.4em} .caja .brand i{font-style:normal;color:#818cf8;font-size:.9em} .caja .sub{font-size:.6em;color:#8b91b8;margin-left:.3em} .caja .chip{font-size:.58em;background:#2a3059;border:1px solid #3d4680;border-radius:.6em;padding:.2em .6em;width:max-content;color:#c7d2fe;margin:.1em 0 .9em .2em} .caja .it{font-size:.72em;padding:.55em .7em;border-radius:.6em;display:flex;align-items:center;gap:.5em;color:#aab0d6} .caja .it.on{background:#4f46e5;color:#fff;font-weight:800} .caja .it i{font-style:normal;opacity:.75;width:1.1em} .caja .out{margin-top:auto;color:#f87171;font-size:.72em;padding:.5em .7em} .caja .main{padding:1em 1.2em;display:flex;flex-direction:column;gap:.8em;min-width:0} .caja .top{display:flex;justify-content:space-between;align-items:center} .caja .top h4{font-size:1.25em;font-weight:800;color:#1e293b;display:flex;align-items:center;gap:.5em} .caja .top h4 i{font-style:normal;color:#94a3b8;font-weight:400} .caja .top h4 small{color:#10b981;font-size:.5em;font-weight:800} .caja .live{display:flex;gap:.6em;align-items:center} .caja .live b{font-size:.55em;background:#ecfdf5;color:#047857;border-radius:999px;padding:.35em .8em;font-weight:900;letter-spacing:.06em} .caja .live b::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#10b981;margin-right:.4em} .caja .clock{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#0f172a;color:#4ade80;font-size:.85em;font-weight:700;padding:.4em .7em;border-radius:.5em;letter-spacing:.06em} .caja .tabs{display:flex;gap:1.6em;font-size:.72em;font-weight:700;color:#64748b;border-bottom:1px solid #e2e8f0;padding:0 .2em} .caja .tabs b{color:#4f46e5;border-bottom:2px solid #4f46e5;padding-bottom:.6em;margin-bottom:-1px} .caja .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:.7em} .caja .card{background:#fff;border:1px solid #e5e7eb;border-radius:.8em;padding:.7em .7em .6em;box-shadow:0 1px 2px rgba(15,23,42,.05);min-width:0} .caja .card h5{font-size:.8em;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;color:#1e293b;white-space:nowrap;overflow:hidden} .caja .card h5 span{font-size:.7em;color:#94a3b8;font-weight:600;flex:none;margin-left:.4em} .caja .card small{display:block;font-size:.56em;color:#94a3b8;margin-top:.25em;white-space:nowrap;overflow:hidden} .caja .card small.mz{color:#4f46e5;font-weight:700} .caja .card p{font-size:.58em;color:#334155;margin:.4em 0 0;line-height:1.35;max-width:none;min-height:2.7em} .caja .card p em{font-style:normal;color:#ea580c} .caja .cobrar{margin-top:.6em;background:#059669;color:#fff;border-radius:.6em;padding:.45em .6em;display:flex;justify-content:space-between;align-items:center} .caja .cobrar div{min-width:0} .caja .cobrar small{display:block;font-size:.52em;opacity:.85;margin:0;color:#fff;font-weight:600} .caja .cobrar b{display:block;font-size:.86em;font-weight:900;letter-spacing:-.01em} .caja .cobrar i{font-style:normal;font-size:.9em;opacity:.9} .caja .modalbg{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:grid;place-items:center} /* modal QR (pantalla del hero) */ .caja .modal{background:#fff;border-radius:1.2em;padding:1.1em;width:17em;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)} .caja .modal .qrimg{width:100%;aspect-ratio:1;border-radius:.7em;background-color:#f8fafc;outline:0} .caja .modal small{display:block;font-size:.6em;font-weight:800;letter-spacing:.14em;color:#64748b;margin-top:.9em} .caja .modal strong{display:block;font-size:2em;font-weight:900;color:#7c3aed;letter-spacing:-.02em;margin:.05em 0 .45em} .caja .modal .ok{background:#10b981;color:#fff;border-radius:.7em;padding:.7em;font-weight:800;font-size:.85em} .caja .modal .back{font-size:.68em;color:#64748b;font-weight:700;margin-top:.8em} /* modal COBRAR ORDEN (modulo caja) */ .caja .cob{background:#fff;border-radius:1.2em;width:17em;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);text-align:center} .caja .cob .ct{background:#f8fafc;padding:1em 1em .9em;border-bottom:1px solid #eef2f7} .caja .cob .ct small{display:block;font-size:.58em;font-weight:800;letter-spacing:.12em;color:#64748b} .caja .cob .ct b{display:block;font-size:.95em;font-weight:800;color:#0f172a;margin:.2em 0 .6em} .caja .cob .falta{background:#fff;border:1px solid #e5e7eb;border-radius:.8em;padding:.6em} .caja .cob .falta small{color:#94a3b8;letter-spacing:.1em} .caja .cob .falta strong{display:block;font-size:2em;font-weight:900;color:#4f46e5;letter-spacing:-.02em;line-height:1.1} .caja .cob .cb{padding:.9em 1em 1em;display:flex;flex-direction:column;gap:.5em} .caja .cob .pre{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:.6em;padding:.5em .6em;font-size:.6em;font-weight:700;text-align:left;display:flex;gap:.5em;align-items:center} .caja .cob .pre::before{content:"";flex:none;width:1.3em;height:1.3em;border:1.5px solid #cbd5e1;border-radius:.25em;background:#fff} .caja .cob .pay{color:#fff;border-radius:.7em;padding:.7em;font-weight:800;font-size:.8em} .caja .cob .pay.g{background:#10b981}.caja .cob .pay.b{background:#2563eb}.caja .cob .pay.p{background:#8b5cf6} .caja .cob .r2{display:grid;grid-template-columns:1fr 1fr;gap:.5em;border-top:1px solid #eef2f7;padding-top:.6em;margin-top:.2em} .caja .cob .r2 span{border-radius:.7em;padding:.65em;font-weight:800;font-size:.68em;background:#f1f5f9;color:#1e293b} .caja .cob .r2 span.wa{background:#10b981;color:#fff} .caja .cob .cancel{font-size:.66em;color:#64748b;font-weight:800;margin-top:.2em} /* ---- COCINA (tablet) ---- */ .kds{height:100%;background:#000;color:#fff;display:flex;flex-direction:column;position:relative} .kds .hdr{display:flex;justify-content:space-between;padding:.6em .9em;font-size:.72em;font-weight:800} .kds .hdr span{color:#f59e0b;background:rgba(0,0,0,.5);border:1px solid #374151;border-radius:.5em;padding:.25em .8em} .kds .hdr b{color:#22d3ee;background:rgba(0,0,0,.5);border:1px solid #374151;border-radius:.5em;padding:.25em .8em;margin-left:.6em} .kds .hdr em{font-style:normal;color:#4b5563;border:1px solid #374151;border-radius:.5em;padding:.25em .8em;font-size:.9em} .kds .cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:0 .7em .7em;min-height:0} .kds .col{background:#111827;border:1px solid #1f2937;border-radius:.9em;overflow:hidden;display:flex;flex-direction:column} .kds .col h5{text-align:center;padding:.7em;background:#1f2937;font-size:1em;font-weight:900;letter-spacing:.08em} .kds .c1 h5{color:#f87171;border-bottom:2px solid #ef4444}.kds .c2 h5{color:#fbbf24;border-bottom:2px solid #eab308}.kds .c3 h5{color:#34d399;border-bottom:2px solid #10b981} .kds .body{padding:.6em;display:flex;flex-direction:column;gap:.6em} .kds .k{background:#1f2937;border:2px solid #374151;border-radius:.8em;padding:.8em} .kds .k.urg{border-color:#ef4444}.kds .k.warn{border-color:#eab308}.kds .k.edit{border-color:#f97316} .kds .k .h{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #374151;padding-bottom:.5em;margin-bottom:.5em} .kds .k .h b{font-size:1.15em;font-weight:900} .kds .k .h b i{font-style:normal;background:#f97316;color:#fff;font-size:.55em;padding:.1em .6em;border-radius:.3em;margin-left:.5em;vertical-align:middle} .kds .k .h small{display:block;color:#6b7280;font-size:.65em;margin-top:.2em} .kds .k .t{font-family:ui-monospace,Menlo,monospace;font-size:1.35em;font-weight:900;color:#d1d5db} .kds .k.urg .t{color:#ef4444}.kds .k.warn .t{color:#eab308} .kds .k .t small{display:block;font-family:'Inter',sans-serif;font-size:.55em;color:#34d399;text-align:right;font-weight:800} .kds .k .li{display:flex;gap:.4em;font-size:.9em;padding:.15em 0} .kds .k .li q{color:#fbbf24;font-weight:800;quotes:none} .kds .k .li.done{opacity:.45;text-decoration:line-through;color:#9ca3af} .kds .k .li.new{background:rgba(30,64,175,.25);border:1px solid rgba(30,64,175,.5);border-radius:.4em;padding:.3em .4em;justify-content:space-between} .kds .k .li.new u{text-decoration:none;background:#1d4ed8;color:#fff;font-size:.6em;font-weight:900;padding:.1em .5em;border-radius:.3em;align-self:center} .kds .k .note{padding-left:1.6em;color:#fcd34d;font-size:.72em;font-weight:700;font-style:italic} .kds .k .btn1{margin-top:.6em;background:#f59e0b;color:#000;text-align:center;border-radius:.5em;padding:.6em;font-weight:900;font-size:.9em} .kds .k .btn2{margin-top:.6em;background:#10b981;color:#fff;text-align:center;border-radius:.5em;padding:.6em;font-weight:900;font-size:.9em} .kds .k .ok{margin-top:.6em;text-align:center;color:#34d399;font-size:.72em;font-weight:800;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:.4em;padding:.45em} /* ---- PANEL (laptop) ---- */ .pan{display:grid;grid-template-columns:11.5em 1fr;height:100%;background:#f3f4f6} .pan .side{background:#fff;border-right:1px solid #e5e7eb;padding:1.1em .9em;display:flex;flex-direction:column;gap:.25em} .pan .brand{font-weight:900;font-size:1em;color:#111827;margin-bottom:.7em;display:flex;align-items:center;gap:.4em} .pan .brand i{width:1.5em;height:1.5em;border-radius:.4em;background:#2563eb;display:inline-block} .pan .it{font-size:.74em;padding:.5em .7em;border-radius:.6em;color:#6b7280;font-weight:600;display:flex;gap:.5em;align-items:center} .pan .it.on{background:#eff6ff;color:#1d4ed8;font-weight:800;border:1px solid #dbeafe} .pan .main{padding:1.1em 1.3em;display:flex;flex-direction:column;gap:.9em;min-width:0} .pan .main h4{font-size:1.35em;font-weight:800;color:#111827} .pan .main h4 small{font-size:.5em;color:#2563eb;margin-left:.4em} .pan .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em} .pan .kpi{background:#fff;border:1px solid #e5e7eb;border-radius:.9em;padding:.8em .9em;box-shadow:0 1px 2px rgba(0,0,0,.04)} .pan .kpi small{display:block;font-size:.62em;color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .pan .kpi b{font-size:1.15em;font-weight:900;color:#111827;white-space:nowrap;display:block;letter-spacing:-.02em} .pan .kpi em{display:block;font-style:normal;font-size:.62em;color:#059669;font-weight:800} .pan .row2{display:grid;grid-template-columns:1.4fr 1fr;gap:.7em;flex:1;min-height:0} .pan .box{background:#fff;border:1px solid #e5e7eb;border-radius:.9em;padding:.8em .9em;display:flex;flex-direction:column;min-height:0} .pan .box h6{font-size:.72em;font-weight:800;color:#374151;margin-bottom:.6em} .pan .chart{flex:1;display:flex;align-items:flex-end;gap:.35em;padding:0 .2em;min-height:6em} .pan .chart i{flex:1;background:#2563eb;border-radius:.3em .3em 0 0;opacity:.9} .pan .chart i.h{background:#f97316} .pan .lbl{display:flex;justify-content:space-between;font-size:.55em;color:#9ca3af;margin-top:.4em;font-weight:700} .pan .tbl{font-size:.7em;display:grid;gap:.4em} .pan .tbl div{display:flex;justify-content:space-between;border-bottom:1px solid #f3f4f6;padding:.25em 0;color:#374151} .pan .tbl div b{color:#111827} /* ---- BOLETA (ticket) ---- */ .ticket-wrap{width:min(380px,100%);margin:0 auto;container-type:inline-size} .ticket{--fs:clamp(9px,1vw,12.5px);font-size:var(--fs);font-size:calc(100cqw / 30);width:100%;margin:0 auto;background:#fff;color:#111;padding:1.4em 1.5em 1.8em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.35;box-shadow:var(--shadow);position:relative; -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 1em) no-repeat, radial-gradient(circle at .6em 100%,transparent .5em,#000 .55em) bottom/1.2em 1em repeat-x; mask:linear-gradient(#000 0 0) top/100% calc(100% - 1em) no-repeat, radial-gradient(circle at .6em 100%,transparent .5em,#000 .55em) bottom/1.2em 1em repeat-x} .ticket .c{text-align:center} .ticket .big{font-size:1.15em;font-weight:900} .ticket .box{border:2px solid #111;padding:.5em;text-align:center;font-weight:900;margin:.7em 0} .ticket .dash{border-top:1px dashed #111;margin:.6em 0} .ticket .r{display:flex;justify-content:space-between;gap:1em} .ticket .r.t{font-weight:900;font-size:1.1em} .ticket .qrimg{width:8em;aspect-ratio:1;margin:.8em auto .4em} .ticket .hash{font-size:.72em;word-break:break-all;text-align:center;color:#333} .ticket .foot{font-size:.7em;text-align:center;color:#444;margin-top:.6em} .ticket .sunat{position:absolute;top:1.2em;right:1.2em;transform:rotate(8deg);border:.22em solid #059669;color:#059669;font-weight:900;font-size:.8em;padding:.2em .6em;border-radius:.4em;letter-spacing:.08em;background:rgba(255,255,255,.85)} /* ---- COMANDA (celular) · pantalla MESAS ---- */ .cm{height:100%;background:#f3f4f8;display:flex;flex-direction:column;position:relative} .cm .top{background:#fff;padding:.4em .9em .35em;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:flex-start} .cm .top .v{font-size:.58em;color:#6366f1;font-weight:800;display:flex;align-items:center;gap:.4em;margin-top:.5em} .cm .top .v::before{content:"";width:1em;height:1em;border-radius:50%;background:#22c55e;display:inline-block} .cm .top .mid{flex:1;margin-left:.6em} .cm .top .br{font-size:.64em;background:#e0e7ff;color:#4338ca;font-weight:800;border-radius:.5em;padding:.15em .6em;display:inline-block} .cm .top .ad{font-size:.62em;color:#64748b;margin-top:.15em} .cm .top .x{width:1.7em;height:1.7em;border-radius:.4em;background:#fee2e2;color:#dc2626;display:grid;place-items:center;font-size:.75em;font-weight:900;margin-top:.5em} .cm .opts{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.6em .6em 0} .cm .opt{background:#fff;border-radius:1em;padding:1em .4em .8em;text-align:center;font-weight:800;font-size:.82em;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,.06)} .cm .opt i{display:block;font-style:normal;font-size:1.7em;margin-bottom:.1em;line-height:1.1} .cm .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:.7em .6em;flex:1;align-content:start} .cm .m{border-radius:.9em;background:#10b981;color:#fff;text-align:center;padding:1.15em .3em .95em;font-weight:900;font-size:.95em;box-shadow:0 2px 6px rgba(0,0,0,.08)} .cm .m small{display:inline-block;font-size:.6em;font-weight:700;background:rgba(0,0,0,.18);border-radius:999px;padding:.15em .8em;margin-top:.35em} .cm .m.b{background:#ef4463} .cm .m.b span{display:flex;justify-content:center;align-items:center;gap:.3em;margin-top:.35em} .cm .m.b small{background:rgba(0,0,0,.28);font-weight:800;margin:0;padding:.15em .6em} .cm .m.b em{font-style:normal;font-size:.52em;background:rgba(255,255,255,.28);border-radius:.4em;padding:.15em .45em;font-weight:800} .cm .m.b em.old{background:#fde047;color:#7c2d12;border:1px solid #a855f7} .cm .nav{background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;padding:.55em 0 1.3em;font-size:.6em;color:#64748b;font-weight:600} .cm .nav div{text-align:center;position:relative} .cm .nav i{display:block;font-style:normal;font-size:1.7em;line-height:1.15} .cm .nav .on{color:#4f46e5} .cm .nav u{position:absolute;top:-.4em;right:-.9em;background:#ef4444;color:#fff;font-size:.85em;width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-weight:800} /* ---- COMANDA (celular) · PEDIDO ACTUAL sobre la carta ---- */ .cp{height:100%;background:#f3f4f8;position:relative;overflow:hidden} .cp .bg{position:absolute;inset:0;filter:blur(3px);transform:scale(1.03)} .cp .hd{background:#fff;padding:.75em 1em;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-weight:800;font-size:.95em;border-bottom:1px solid #e5e7eb;color:#0f172a} .cp .hd span{color:#4f46e5;font-size:.72em;font-weight:700} .cp .srch{margin:.7em .7em .5em;background:#fff;border:1px solid #e5e7eb;border-radius:.7em;padding:.6em .8em;font-size:.7em;color:#94a3b8} .cp .cats{display:flex;gap:.4em;padding:.2em .7em;overflow:hidden} .cp .cats span{font-size:.64em;font-weight:700;padding:.5em .9em;border-radius:.6em;background:#fff;border:1px solid #e5e7eb;color:#334155;white-space:nowrap} .cp .cats span.on{background:#4f46e5;color:#fff;border-color:#4f46e5} .cp .grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.6em .7em} .cp .pc{background:#fff;border-radius:.8em;padding:.45em;box-shadow:0 1px 3px rgba(0,0,0,.06)} .cp .pc .foto{height:calc(4.6em / 1.6);border-radius:.5em;font-size:1.6em} .cp .pc b{display:block;font-size:.66em;margin-top:.5em;color:#1e293b} .cp .pc i{display:block;font-style:normal;font-size:.78em;font-weight:900;color:#0f172a;margin-top:.15em} .cp .dim{position:absolute;inset:0;background:rgba(15,23,42,.38)} .cp .modal{position:absolute;left:.6em;right:.6em;top:50%;transform:translateY(-50%);background:#f8fafc;border-radius:1.1em;overflow:hidden;box-shadow:0 20px 50px -10px rgba(0,0,0,.45)} .cp .mh{background:#fff;padding:.85em 1em;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:1em;border-bottom:1px solid #e5e7eb;color:#0f172a} .cp .mh i{font-style:normal;color:#334155;font-weight:400;font-size:1.15em;line-height:1} .cp .items{padding:.7em .7em .1em;display:flex;flex-direction:column;gap:.6em} .cp .it{background:#fff;border:1px solid #e5e7eb;border-radius:.9em;padding:.65em .75em} .cp .it .r{display:flex;justify-content:space-between;align-items:center;gap:.5em} .cp .it b{font-size:.84em;font-weight:800;display:block;color:#0f172a} .cp .it small{font-size:.64em;color:#64748b;display:block} .cp .qty{display:flex;align-items:center;gap:.35em;flex:none} .cp .qty i{width:1.9em;height:1.9em;border-radius:50%;background:#f1f5f9;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.75em;color:#0f172a} .cp .qty b{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.45em;padding:.25em .65em;font-size:.85em} .cp .note{margin-top:.5em;border:1.5px solid #e5e7eb;border-radius:.5em;padding:.45em .6em;font-size:.68em;color:#0f172a;background:#fff} .cp .note.f{border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.15)} .cp .chips{display:flex;gap:.3em;margin-top:.45em} .cp .chips span{font-size:.56em;background:#e0e7ff;color:#4338ca;border-radius:999px;padding:.25em .7em;font-weight:700} .cp .llevar{margin-top:.45em;font-size:.64em;color:#7c3aed;font-weight:800;display:flex;align-items:center;gap:.45em} .cp .llevar::before{content:"";width:1.3em;height:1.3em;border:1.5px solid #cbd5e1;border-radius:.25em;background:#fff;flex:none} .cp .mf{background:#fff;border-top:1px solid #e5e7eb;padding:.75em .8em .9em;margin-top:.6em} .cp .tot{display:flex;justify-content:space-between;font-weight:800;font-size:.98em;margin-bottom:.6em;color:#0f172a} .cp .btns{display:flex;gap:.5em} .cp .btns span{flex:1;text-align:center;border-radius:.7em;padding:.7em .3em;font-weight:800;font-size:.76em;background:#e5e7eb;color:#334155} .cp .btns span.go{flex:2;background:#149a63;color:#fff} /* ---- CAJA en celular · modal BOLETA ELECTRONICA ---- */ .cb{height:100%;background:#f3f4f8;position:relative;overflow:hidden} .cb .bg{position:absolute;inset:0;filter:blur(3px);transform:scale(1.03)} .cb .hd{background:#fff;padding:.8em 1em;font-weight:800;font-size:.9em;color:#1e293b;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb} .cb .hd small{color:#10b981;font-size:.62em} .cb .tabs{display:flex;gap:1.2em;font-size:.68em;font-weight:700;color:#64748b;padding:.7em 1em 0} .cb .tabs b{color:#4f46e5;border-bottom:2px solid #4f46e5;padding-bottom:.5em} .cb .cards{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.7em .8em} .cb .card{background:#fff;border:1px solid #e5e7eb;border-radius:.8em;padding:.6em} .cb .card b{font-size:.72em;display:block;color:#1e293b} .cb .card small{font-size:.54em;color:#94a3b8;display:block;margin-top:.2em} .cb .card .g{margin-top:.5em;background:#059669;color:#fff;border-radius:.5em;padding:.5em;font-weight:900;font-size:.72em} .cb .dim{position:absolute;inset:0;background:rgba(15,23,42,.42)} .cb .modal{position:absolute;left:.8em;right:.8em;top:50%;transform:translateY(-50%);background:#fff;border-radius:1.1em;padding:1.2em 1em 1em;box-shadow:0 20px 50px -10px rgba(0,0,0,.45);text-align:center} .cb .modal .x{position:absolute;top:.7em;right:.9em;color:#64748b;font-size:1.1em;line-height:1} .cb .modal h6{font-size:.95em;font-weight:900;color:#0f172a;letter-spacing:.01em;margin-bottom:.8em} .cb .modal label{display:block;text-align:left;font-size:.64em;font-weight:800;color:#475569;margin:.5em 0 .3em} .cb .modal .in{border:1.5px solid #e5e7eb;border-radius:.6em;padding:.6em;font-size:.8em;color:#0f172a;background:#f8fafc;text-align:center;font-weight:600} .cb .modal .in.dni{border-color:#4f46e5;font-size:1.05em;letter-spacing:.06em} .cb .modal .ok{text-align:left;font-size:.6em;color:#059669;font-weight:800;margin-top:.3em} .cb .modal .em{margin-top:.9em;background:#dc2626;color:#fff;border-radius:.7em;padding:.75em;font-weight:900;font-size:.85em;letter-spacing:.04em} .cb .modal .back{font-size:.66em;color:#64748b;font-weight:800;margin-top:.8em} /* ---- CARTA WEB (celular) ---- */ .carta{height:100%;background:#f5f5f2;display:flex;flex-direction:column;position:relative;overflow:hidden;font-family:'Manrope','Inter',system-ui,sans-serif;color:#141414} .carta .hd{background:#fff;padding:.5em 1em .5em;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e4} .carta .lg{display:flex;align-items:center;gap:.45em;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:1.05em} .carta .lg i{font-style:normal;width:1.9em;height:1.9em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fde68a,#d97706 60%,#78350f);display:grid;place-items:center;font-size:.85em;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #d4d4d0} .carta .hd b{font-size:.55em;background:#111;color:#fff;border-radius:999px;padding:.55em 1.1em;letter-spacing:.06em;font-weight:700} .carta .srch{margin:.5em 1em 0;padding:.5em .2em;border-bottom:1px solid #dcdcd6;font-size:.78em;color:#9a9a94;display:flex;align-items:center;gap:.5em} .carta .cats{display:flex;gap:.4em;padding:.6em 1em .3em;overflow:hidden} .carta .cats span{font-size:.62em;font-weight:700;padding:.5em 1em;border-radius:999px;background:#fff;border:1px solid #d9d9d3;color:#333;white-space:nowrap} .carta .cats span.on{border:2px solid #111;color:#111} .carta .grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:.6em;padding:.5em .9em 5em;flex:1;overflow:hidden;align-content:start} .carta .pc{background:#fff;border-radius:1em;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05)} .carta .pc .foto{height:calc(5.6em / 1.9);position:relative;font-size:1.9em} .carta .pc .foto u{position:absolute;left:.35em;top:.35em;background:#111;color:#fff;font-size:.32em;font-weight:700;letter-spacing:.08em;border-radius:.4em;padding:.25em .55em;text-decoration:none;text-shadow:none} .carta .pc .foto i{position:absolute;right:.35em;bottom:.35em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;color:#111;font-style:normal;font-size:.62em;font-weight:700;display:grid;place-items:center;text-shadow:none;box-shadow:0 2px 6px rgba(0,0,0,.25)} .carta .pc .foto i.on{background:#111;color:#fff} .carta .pc b{display:block;font-size:.66em;font-weight:700;padding:.7em .8em 0} .carta .pc em{display:block;font-style:normal;font-size:.8em;font-weight:800;padding:.2em .7em .8em} .carta .bar{position:absolute;left:1em;right:1em;bottom:1.4em;background:#2b1a16;color:#fff;border-radius:999px;padding:.75em 1.1em .75em 1.2em;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);font-family:'Playfair Display',Georgia,serif;font-size:.9em} .carta .bar span:first-child{font-style:italic;font-weight:700;display:flex;align-items:center;gap:.5em} .carta .bar u{text-decoration:none;font-style:normal;font-family:'Inter',sans-serif;background:#fff;color:#111;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-size:.72em;font-weight:800} /* ---- CARTA WEB · TU SELECCION (checkout) ---- */ .sel{height:100%;background:#f7f7f4;display:flex;flex-direction:column;font-family:'Manrope','Inter',system-ui,sans-serif;color:#141414;position:relative;overflow:hidden} .sel .hd{background:#fff;padding:.9em 1em .8em;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ebebe6} .sel .hd b{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:1.15em} .sel .hd i{width:1.9em;height:1.9em;border-radius:50%;background:#f0f0ec;display:grid;place-items:center;font-style:normal;color:#666;font-size:.8em} .sel .body{padding:.8em .8em;display:flex;flex-direction:column;gap:.65em;flex:1;min-height:0} .sel .item{background:#fff;border:1px solid #ebebe6;border-radius:.9em;padding:.55em;display:grid;grid-template-columns:2.6em 1fr auto;gap:.6em;align-items:center} .sel .item .foto{width:calc(2.6em / 1.1);height:calc(2.6em / 1.1);border-radius:.5em;font-size:1.1em} .sel .item b{font-size:.74em;font-weight:800;display:block} .sel .item small{font-size:.62em;color:#777;display:block} .sel .item .q{border:1px solid #d9d9d3;border-radius:999px;padding:.3em .7em;font-size:.72em;font-weight:700;display:flex;gap:.7em;color:#333} .sel .lbl{font-size:.56em;letter-spacing:.14em;color:#8a8a84;font-weight:700;border-bottom:1px solid #e3e3de;padding-bottom:.4em;margin-top:.2em} .sel .comp{display:flex;gap:.5em;overflow:hidden} .sel .comp div{flex:none;width:5.1em;background:#fff;border:1px solid #ebebe6;border-radius:.8em;padding:.5em .3em;text-align:center;font-size:.58em;font-weight:700} .sel .comp .foto{width:calc(3.4em / 1.5);height:calc(3.4em / 1.5);border-radius:50%;margin:0 auto .4em;font-size:1.5em} .sel .seg{display:grid;grid-template-columns:1fr 1fr;background:#ecece8;border-radius:.8em;padding:.25em;font-size:.7em;font-weight:700;text-align:center;color:#8a8a84} .sel .seg b{background:#fff;border-radius:.6em;padding:.5em;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.08)} .sel .f{border-bottom:1px solid #e3e3de;padding:.65em .2em;font-size:.72em;display:flex;justify-content:space-between;align-items:center} .sel .f.ph{color:#a3a39c} .sel .f b{background:#2563eb;color:#fff;border-radius:.5em;padding:.3em .6em;font-size:.72em;font-weight:800} .sel .sum{font-size:.7em;color:#777;display:grid;gap:.2em;margin-top:.4em} .sel .sum div{display:flex;justify-content:space-between} .sel .sum .t{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#111;font-size:1.5em;margin-top:.15em} .sel .send{margin-top:.5em;background:#3bd070;color:#fff;border-radius:.9em;padding:.85em;text-align:center;font-weight:800;font-size:.8em;letter-spacing:.06em;box-shadow:0 8px 20px -8px rgba(59,208,112,.8)} /* dos celulares lado a lado */ .duo{display:flex;gap:5%;justify-content:center;align-items:flex-start;width:100%} .duo>.ph{width:46%;max-width:300px;margin:0} .duo>.ph+.ph{margin-top:2.6em} .duo.wrap{flex-wrap:wrap;gap:22px;align-items:center} .duo.wrap>.ph{width:min(280px,100%);flex:1 1 200px;max-width:280px} .duo.wrap>.ticket-wrap{flex:1 1 200px;width:auto;max-width:300px;margin:0} /* composicion del hero: laptop + celular encima */ .hero-mock{position:relative;padding:0 0 3.5em 0} .hero-mock .lap{max-width:100%} .hero-mock .ph{position:absolute;left:-10px;bottom:-6px;width:27%;min-width:120px;--fs:clamp(6.5px,.72vw,9.5px);font-size:var(--fs);filter:drop-shadow(0 25px 30px rgba(0,0,0,.35))} .hero-mock .ph .screen{border-width:.5em} @media (max-width:900px){.hero-mock .ph{left:0;width:30%;--fs:clamp(6px,1.7vw,9px)}} /* franja */ .strip{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)} .strip .wrap{display:flex;gap:24px 40px;align-items:center;justify-content:center;flex-wrap:wrap;font-family:'Sora',sans-serif;font-weight:600;color:var(--muted);font-size:.9rem} .strip .wrap span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fire);margin-right:8px;vertical-align:middle} /* dolor */ .pain h2{max-width:24ch;margin-bottom:16px} .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px} @media (max-width:820px){.pain-grid{grid-template-columns:1fr}} .pain-grid article{padding:26px 0 0;border-top:3px solid var(--fire)} .pain-grid h3{margin-bottom:8px} .pain-grid p{color:var(--muted);font-size:1rem} /* modulos con mockup grande */ .mods{background:var(--paper-2)} .mod{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)} .mod>*{min-width:0} .mod:last-child{border-bottom:0} .mod.flip .mock{order:-1} .mod.wide{grid-template-columns:1fr} .mod.lapmod{grid-template-columns:1.3fr .9fr} .mod.wide .text{max-width:760px;text-align:center;margin:0 auto 34px} .mod.wide .text p,.mod.wide .text ul{margin-left:auto;margin-right:auto;text-align:left} .mod.wide .text ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;max-width:760px} @media (max-width:860px){.mod,.mod.lapmod{grid-template-columns:1fr;gap:28px}.mod.flip .mock{order:0}.mod.wide .text ul{grid-template-columns:1fr}} .mod h3{font-size:1.6rem;margin-bottom:10px} .mod p{color:var(--muted);font-size:1.02rem;margin-bottom:14px} .mod ul{list-style:none;display:grid;gap:8px;font-size:.98rem} .mod li{padding-left:26px;position:relative} .mod li::before,.plan li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--fire);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .mock{display:flex;justify-content:center;align-items:center} .cap{display:block;text-align:center;font-size:.85rem;color:var(--muted);margin-top:14px;font-weight:600} /* pasos */ .steps{background:var(--ink);color:#DCE6F0} .steps h2,.steps h3{color:#fff} .steps .lead{color:#AFC0D2} .step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;counter-reset:s} @media (max-width:820px){.step-list{grid-template-columns:1fr}} .step-list li{list-style:none;background:var(--ink-2);border-radius:var(--r);padding:26px;position:relative;counter-increment:s} .step-list li::before{content:counter(s);position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--fire);color:#fff;font-family:'Sora',sans-serif;font-weight:700;display:grid;place-items:center} .step-list h3{margin:10px 0 8px} .step-list p{font-size:.98rem;color:#AFC0D2} /* grilla de funciones */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} @media (max-width:860px){.feat-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.feat-grid{grid-template-columns:1fr}} .feat{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)} .feat svg{width:36px;height:36px;color:var(--fire);margin-bottom:10px} .feat h3{margin-bottom:4px;font-size:1.05rem} .feat p{font-size:.95rem;color:var(--muted)} /* prueba social */ .proof{background:var(--paper-2)} .quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px;max-width:720px;margin:36px auto 0;box-shadow:var(--shadow)} .quote blockquote{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:500;color:var(--ink);line-height:1.45} :root[data-theme="dark"] .quote blockquote{color:#fff} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .quote blockquote{color:#fff} } .quote footer{margin-top:18px;display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--muted)} .quote footer i{width:40px;height:40px;border-radius:50%;background:var(--fire);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700} /* planes */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch} @media (max-width:860px){.plans{grid-template-columns:1fr}} .plan{border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;background:var(--paper)} .plan.hot{border:2px solid var(--fire);position:relative;box-shadow:var(--shadow)} .plan.hot::after{content:"Más elegido";position:absolute;top:-14px;left:28px;background:var(--fire);color:#fff;font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px;font-family:'Sora',sans-serif} .plan h3{font-size:1.3rem} .plan .who{color:var(--muted);font-size:.95rem;margin:4px 0 18px} .price{font-family:'Sora',sans-serif;font-size:2.6rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1} :root[data-theme="dark"] .price{color:#fff} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .price{color:#fff} } .price small{font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:0} .plan ul{list-style:none;margin:22px 0 26px;display:grid;gap:10px;font-size:.98rem} .plan li{padding-left:26px;position:relative} .plan .btn{margin-top:auto;justify-content:center} .plan-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px} /* faq */ .faq{max-width:760px;margin:36px auto 0} .faq details{border-bottom:1px solid var(--line);padding:18px 0} .faq summary{cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px} :root[data-theme="dark"] .faq summary{color:#fff} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .faq summary{color:#fff} } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--fire);font-size:1.4rem;line-height:1;flex:none} .faq details[open] summary::after{content:"–"} .faq details p{margin-top:12px;color:var(--muted);font-size:1rem} /* cierre / formulario */ .final{background:var(--ink);color:#DCE6F0} .final .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .final .wrap>*{min-width:0} @media (max-width:860px){.final .wrap{grid-template-columns:1fr}} .final h2{color:#fff} .final p{color:#AFC0D2} .form{background:var(--paper);color:var(--text);border-radius:var(--r);padding:30px;display:grid;gap:14px;box-shadow:var(--shadow)} .form label{display:grid;gap:6px;font-weight:600;font-size:.9rem} .form input,.form select{font:inherit;width:100%;min-width:0;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text)} .form input:focus,.form select:focus{outline:3px solid color-mix(in srgb,var(--fire) 35%,transparent);border-color:var(--fire)} .form .btn{justify-content:center;width:100%} .form small{color:var(--muted);text-align:center} footer.site{padding:36px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)} footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* whatsapp flotante */ .fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(37,211,102,.7);color:#fff} .fab svg{width:30px;height:30px}