/*
 * Plantilla única de las demos. TODOS los colores y tipografías del nicho llegan como tokens (:root) desde
 * datos.json (los inyecta el servidor): --fondo/2/3/4, --texto, --suave, --tenue, --linea/2, --acento/2, --acentoprof,
 * --sobre, --sec, --ok/--warn/--bad, --display/--body/--mono.
 * Lo único fijo: la barra de la demo, la «Capa Meridian» (identidad de Meridian) y los colores del chat tipo WhatsApp.
 */
:root{
  --wa-bg:#0b141a; --wa-head:#1f2c34; --wa-in:#202c33; --wa-out:#005c4b;
  --wa-text:#e9edef; --wa-meta:#8696a0; --wa-accent:#00a884; --wa-tick:#53bdeb; --wa-chip:#182229;
  --panel-w:400px; --bar-h:40px;
  --glow:color-mix(in srgb,var(--acento) 20%,transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}
body{background:var(--fondo);color:var(--texto);font-family:var(--body);font-size:16px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
picture{display:contents}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}
.tab{font-variant-numeric:tabular-nums}
.oculto{display:none!important}
section{position:relative}

/* ---------- Barra de la demo (identidad de Meridian: fija) ---------- */
.demobar{position:fixed;inset:0 0 auto 0;z-index:80;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;display:flex;align-items:center;gap:12px;background:#060505;color:#f1e6d3;border-bottom:1px solid rgba(241,230,211,.12);font-size:13px}
.demobar .tag{display:inline-flex;align-items:center;gap:8px;color:#a99a8b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.demobar .tag b{color:#f1e6d3;font-weight:600}
.demobar .dot{width:7px;height:7px;border-radius:50%;background:var(--wa-accent);box-shadow:0 0 0 3px rgba(0,168,132,.22);flex:none}
.demobar .sp{flex:1}
.dbtn{text-decoration:none;color:#f1e6d3;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(241,230,211,.25);background:transparent;font-size:12.5px;font-weight:600;white-space:nowrap}
.dbtn:hover{border-color:var(--wa-accent);color:#7ff0cf}
.dbtn[aria-pressed="true"]{background:var(--wa-accent);border-color:var(--wa-accent);color:#04140f}
@media (max-width:640px){.demobar .tag .long{display:none}.dbtn .lbl-long{display:none}.dbtn{padding:0 10px}}

/* ---------- Estructura ---------- */
.site{padding-top:var(--bar-h);transition:margin-right .45s cubic-bezier(.2,.7,.2,1)}
body.reunion .site{margin-right:var(--panel-w)}
.wrap{width:min(1200px,100%);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--acento);font-weight:600;margin:0}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(36px,5.4vw,72px)}
h2 em,h1 em{font-style:italic;color:var(--acento)}
.lede{color:var(--suave);font-size:clamp(16px,1.4vw,18px);max-width:52ch}

/* ---------- Navegación ---------- */
.nav{position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top,0px));z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:color-mix(in srgb,var(--fondo) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linea)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex:0 1 auto}
.brand-txt{min-width:0}
.mono-mark{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--acento);display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:17px;color:var(--acento);position:relative}
.mono-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acento) 35%,transparent)}
.brand-name{display:block;font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{display:block;font-family:var(--body);font-size:10px;letter-spacing:.3em;color:var(--suave);text-transform:uppercase}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--suave)}
.nav-links a{text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--texto)}
@media (max-width:900px){.nav-links{display:none}.nav .wrap{justify-content:space-between}}
@media (max-width:560px){.brand-name{font-size:16px}.brand-sub{display:none}.mono-mark{width:36px;height:36px;font-size:15px}.nav .btn-sm{height:36px;padding:0 14px;font-size:13px}.nav .wrap{height:62px;gap:12px}}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;border:0;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s}
.btn-acento{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 86%,#fff),var(--acento));color:var(--sobre);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--acento) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-acento:hover{box-shadow:0 16px 40px -12px color-mix(in srgb,var(--acento2) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-acento:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn-ghost{border:1px solid var(--linea2);background:color-mix(in srgb,var(--texto) 4%,transparent);color:var(--texto)}
.btn-ghost:hover{border-color:var(--texto)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn svg{width:18px;height:18px}
.btn .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}

/* ---------- Hero (común) ---------- */
.hero{min-height:min(860px,calc(100svh - var(--bar-h)));display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:hidden;padding-block:24px 64px}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 420px at var(--mx,70%) var(--my,45%),var(--glow),transparent 70%),radial-gradient(900px 600px at 80% 110%,color-mix(in srgb,var(--acentoprof) 25%,transparent),transparent 70%)}
#particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero-grid>*{min-width:0}
/* Escritorio con movimiento: el hero espera a las librerías de animación (la clase la quita el JS al arrancar o a los 6 s). */
.anim .hero h1 .line>span{transform:translateY(110%)}
.anim .hero-copy .eyebrow,.anim .hero-copy .lede,.anim .hero-ctas,.anim .hero-facts,.anim .hero-visual,.anim .badge-float{opacity:0}
.hero h1{font-size:clamp(46px,7.2vw,104px)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block}
.hero .lede{margin:26px 0 34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:44px;padding-top:24px;border-top:1px solid var(--linea)}
.fact b{display:block;font-family:var(--display);font-size:30px;font-weight:500;color:var(--texto);line-height:1}
.fact>span{font-size:13px;color:var(--suave)}
.hero-visual{position:relative;aspect-ratio:4/5;max-height:680px;justify-self:center;width:100%;max-width:520px}
.hero-visual .media{position:absolute;inset:0;will-change:transform}
.hero-visual .media img{width:100%;height:100%;object-fit:cover}
.badge-float{position:absolute;left:-8%;top:16%;background:color-mix(in srgb,var(--fondo2) 88%,transparent);color:var(--texto);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--linea2);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:13px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);z-index:3}
.badge-float .ic{width:34px;height:34px;border-radius:10px;background:rgba(0,168,132,.16);display:grid;place-items:center;color:var(--wa-accent)}
.badge-float .ic svg{width:18px;height:18px}
.badge-float b{display:block;font-size:13.5px}
.badge-float span{color:var(--suave);font-size:12px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:380px;order:-1;margin-top:8px}
  .badge-float{left:-2%}
}

/* Etiqueta en la foto: el nombre del negocio sobre una etiqueta/placa en blanco de la imagen */
.foto-etiqueta{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;text-align:center;color:#2a1a0c;mix-blend-mode:multiply;pointer-events:none;padding:4% 3%;z-index:2}
.foto-etiqueta.claro{color:#f4ead8;mix-blend-mode:screen}
.foto-etiqueta .bl-mono{font-family:var(--display);font-style:italic;font-size:clamp(14px,2.2vw,26px);line-height:1;border:1px solid currentColor;border-radius:50%;width:2.1em;height:2.1em;display:grid;place-items:center}
.foto-etiqueta .bl-name{font-family:var(--display);font-size:clamp(7px,.95vw,12px);letter-spacing:.14em;text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere}
.foto-etiqueta .bl-sub{font-family:var(--body);font-size:clamp(5px,.6vw,8px);letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.foto-etiqueta .bl-rule{width:40%;height:1px;background:currentColor;opacity:.5}

/* Anillo de texto: siempre en el hombro de la foto (centrado en la esquina del recuadro, fuera de la curva) */
.ring-label{position:absolute;right:-3%;top:-3%;width:20%;aspect-ratio:1;height:auto;animation:spin 22s linear infinite;z-index:3;min-width:84px}
.ring-label text{font-family:var(--body);font-size:8px;letter-spacing:.12em;fill:var(--acento);text-transform:uppercase;font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.ring-label{right:-2%}}

/* Variante arco (licores) */
.v-arco .arch{position:absolute;inset:0;border-radius:999px 999px 28px 28px;overflow:hidden;background:radial-gradient(120% 80% at 50% 30%,var(--fondo4),var(--fondo) 70%);border:1px solid color-mix(in srgb,var(--acento) 28%,transparent);box-shadow:0 40px 120px -40px color-mix(in srgb,var(--acento) 45%,transparent)}

/* Variante plato (gastronomía) */
.hero-visual.v-plato{aspect-ratio:1;max-width:560px}
.v-plato .plato{position:absolute;inset:4%;border-radius:50%;overflow:hidden;background:var(--fondo3);box-shadow:0 40px 90px -30px rgba(60,30,10,.55),inset 0 0 0 10px color-mix(in srgb,var(--fondo) 80%,#fff),0 0 0 1px var(--linea2)}
.v-plato .plato-sombra{position:absolute;inset:10% 0 -4% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,30,10,.3),transparent);filter:blur(18px)}
.v-plato .ing{position:absolute;display:block;pointer-events:none;z-index:2}
.v-plato .ing1{width:15%;aspect-ratio:1;left:-4%;top:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--acento2),var(--acento));box-shadow:inset -4px -6px 0 color-mix(in srgb,var(--acentoprof) 40%,transparent)}
.v-plato .ing2{width:12%;aspect-ratio:2/3;right:-1%;top:34%;border-radius:100% 0 100% 0;background:var(--sec)}
.v-plato .ing3{width:9%;aspect-ratio:1;left:6%;bottom:6%;border-radius:50%;background:var(--acentoprof)}
.v-plato .ing4{width:11%;aspect-ratio:2/3;left:-5%;top:58%;border-radius:100% 0 100% 0;background:color-mix(in srgb,var(--sec) 75%,#000);transform:rotate(60deg)}
.v-plato .ing5{width:7%;aspect-ratio:1;right:10%;bottom:-2%;border-radius:50%;background:var(--acento2)}
.v-plato .ing6{width:10%;aspect-ratio:1;right:4%;top:2%;border-radius:50%;border:3px solid var(--acento);background:transparent}
.v-plato .ring-label{right:-4%;top:-6%}

/* Variante editorial (tiendas) */
.hero.v-editorial h1{font-family:var(--display);font-size:clamp(44px,6.4vw,104px);line-height:.9;text-transform:uppercase;letter-spacing:-.035em;font-weight:900}
.hero.v-editorial h1 em{font-style:normal;color:var(--acento);-webkit-text-stroke:0}
.hero.v-editorial .hero-grid{grid-template-columns:1.25fr .75fr}
.v-editorial .ed-foto{position:absolute;inset:0;overflow:hidden;background:var(--fondo3);border-radius:4px;box-shadow:14px 14px 0 var(--acento2)}
.v-editorial .ed-tag{position:absolute;right:-4%;bottom:10%;transform:rotate(-8deg);background:var(--acento);color:var(--sobre);padding:10px 16px;font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:.08em;z-index:3}
@media (max-width:900px){.hero.v-editorial h1{font-size:clamp(40px,12.5vw,84px)}}

/* Variante macro (joyería) */
.v-macro .vitrina{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:var(--fondo2);border:1px solid color-mix(in srgb,var(--acento) 40%,transparent);box-shadow:0 40px 100px -40px color-mix(in srgb,var(--acento) 55%,transparent),inset 0 0 0 6px var(--fondo)}
.v-macro .destello{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen;background:radial-gradient(circle at var(--dx,50%) var(--dy,50%),color-mix(in srgb,var(--acento2) 75%,#fff) 0,color-mix(in srgb,var(--acento) 30%,transparent) 14%,transparent 34%)}
.v-macro .vidrio{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 62%,rgba(255,255,255,.08) 100%)}
.v-macro .chispa{position:absolute;color:var(--acento2);width:22px;height:22px;z-index:3;filter:drop-shadow(0 0 8px var(--acento2))}
.v-macro .chispa1{left:14%;top:12%}.v-macro .chispa2{right:18%;top:30%;width:16px;height:16px}.v-macro .chispa3{left:30%;bottom:20%;width:14px;height:14px}.v-macro .chispa4{right:12%;bottom:12%}
.lupa{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid var(--acento2);box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 4px rgba(255,255,255,.15);background-repeat:no-repeat;pointer-events:none;opacity:0;transition:opacity .2s;z-index:4}

/* Variante paisaje (turismo) */
.hero.v-paisaje{min-height:min(900px,calc(100svh - var(--bar-h)));padding-block:64px 160px;align-items:center}
.hero.v-paisaje .hero-grid{grid-template-columns:minmax(0,720px)}
.paisaje{position:absolute;inset:0;overflow:hidden}
/* El fondo mide lo de la pantalla (no lo del texto): al cambiar la tipografía de respaldo por la real no se mueve (CLS). */
.paisaje .media{position:absolute;top:-60px;left:0;right:0;height:130svh;will-change:transform}
.paisaje .media img{width:100%;height:100%;object-fit:cover}
.paisaje .media .ph-fallback{background:linear-gradient(180deg,var(--fondo4),var(--acento) 140%);font-size:0}
.paisaje .cielo{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--fondo) 78%,transparent) 0,color-mix(in srgb,var(--fondo) 35%,transparent) 55%,transparent 85%),linear-gradient(180deg,color-mix(in srgb,var(--fondo) 70%,transparent) 0,color-mix(in srgb,var(--fondo) 10%,transparent) 45%,color-mix(in srgb,var(--acento) 30%,transparent) 100%)}
.paisaje .capa{position:absolute;left:-8%;width:116%;height:22%;bottom:-2%}
@media (max-width:900px){.v-paisaje .badge-float{display:none}}
.paisaje .capa2{fill:color-mix(in srgb,var(--fondo) 55%,var(--sec));bottom:2%;opacity:.5}
.paisaje .capa1{fill:var(--fondo);bottom:-3%}
.paisaje .niebla{position:absolute;left:-10%;width:120%;height:30%;background:radial-gradient(closest-side,color-mix(in srgb,var(--texto) 30%,transparent),transparent);filter:blur(24px)}
.paisaje .niebla1{bottom:26%}.paisaje .niebla2{bottom:10%}
.v-paisaje .badge-float{position:absolute;left:auto;right:6%;top:auto;bottom:22%}
.v-paisaje .hero-copy{position:relative;z-index:2}
.v-paisaje .hero-glow,.v-paisaje #particulas{display:none}
.v-paisaje .hero-visual-wrap{position:absolute}

/* Variante agenda (citas) */
.hero-visual.v-agenda{aspect-ratio:auto;max-width:480px}
.agenda-viva{position:relative;background:var(--fondo2);border:1px solid var(--linea2);border-radius:24px;padding:18px 18px 74px;box-shadow:0 40px 80px -40px rgba(30,20,40,.35)}
.ag-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:13px;color:var(--suave)}
.ag-cab b{font-family:var(--display);font-size:20px;color:var(--texto);font-weight:400}
.ag-prof,.ag-fila{display:grid;grid-template-columns:44px repeat(3,1fr);gap:6px;align-items:center}
.ag-prof{font-size:11.5px;color:var(--suave);margin-bottom:6px;text-align:center}
.ag-fila{margin-bottom:6px}
.ag-hora{font-family:var(--mono);font-size:11px;color:var(--tenue)}
.ag-slot{height:30px;border-radius:9px;background:var(--fondo3);border:1px dashed var(--linea2);position:relative;overflow:hidden;transition:background .4s,border-color .4s}
.ag-slot i{position:absolute;inset:0;background:var(--acento);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ag-slot.lleno{border-style:solid;border-color:var(--acento)}
.ag-slot.lleno i{transform:scaleX(1)}
.ag-rec{position:absolute;left:18px;right:18px;bottom:16px;display:flex;gap:10px;align-items:center;background:var(--fondo);border:1px solid var(--linea2);border-radius:14px;padding:9px 12px;font-size:12.5px;box-shadow:0 10px 24px -12px rgba(30,20,40,.3);opacity:.55;transition:opacity .4s,border-color .4s}
.ag-rec.on{opacity:1;border-color:var(--acento)}
.ag-rec .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--acento);color:var(--sobre);flex:none}
.ag-rec .ic svg{width:17px;height:17px}
.ag-rec b{display:block;font-size:13px}.ag-rec small{color:var(--suave);font-size:11.5px}
.agenda-foto{position:absolute;right:-22px;top:-30px;width:76px;height:76px;border-radius:50%;overflow:hidden;border:4px solid var(--fondo);box-shadow:0 14px 30px -14px rgba(0,0,0,.4);z-index:2}
.agenda-foto .media{position:absolute;inset:0}
.agenda-foto img{width:100%;height:100%;object-fit:cover}
.v-agenda .badge-float{display:none}/* la agenda ya trae su propio recordatorio: el aviso flotante lo tapaba */
.v-agenda .ag-cab{padding-right:52px}

/* ---------- Marquesina ---------- */
.marquee{border-block:1px solid var(--linea);overflow:hidden;padding-block:22px;background:var(--fondo2)}
.marquee-track{display:flex;gap:48px;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--display);font-style:italic;font-size:clamp(28px,3.6vw,46px);color:var(--texto);white-space:nowrap;display:inline-flex;align-items:center;gap:48px}
.marquee-track span::after{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--acento);display:inline-block}

/* ---------- Declaración: texto grande + llamada a la acción ---------- */
.declara{padding-block:clamp(96px,13vw,200px);overflow:hidden}
.declara::before{content:"";position:absolute;right:-12vw;bottom:-18vw;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.declara .wrap{position:relative}
.declara-texto{font-family:var(--display);font-size:clamp(32px,5.6vw,88px);line-height:1.06;letter-spacing:-.015em;max-width:17em;margin:20px 0 0;text-wrap:balance}
.declara-texto .w.em{color:var(--acento);font-style:italic;background:linear-gradient(var(--acento),var(--acento)) 0 94%/100% .055em no-repeat}
.declara-pie{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:clamp(34px,4.5vw,60px)}
.btn-grande{height:64px;padding:0 38px;font-size:17px}
.declara .flecha{width:20px;height:20px}
.declara-nota{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--suave)}
.declara-nota::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wa-accent);flex:none}
.hero.v-editorial~.declara .declara-texto{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.98}

/* ---------- Catálogo ---------- */
.block{padding-block:clamp(80px,11vw,150px)}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.head-row .lede{margin:14px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--linea2);background:transparent;font-size:13.5px;color:var(--suave);transition:all .2s}
.chip:hover{color:var(--texto);border-color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;border-radius:22px;background:linear-gradient(180deg,var(--fondo3),var(--fondo2));border:1px solid var(--linea);overflow:hidden;transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.card:hover{border-color:color-mix(in srgb,var(--acento) 45%,transparent);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--acento) 35%,transparent)}
.card .pic{position:relative;aspect-ratio:1/1;background:radial-gradient(70% 60% at 50% 55%,var(--glow),transparent 70%),var(--fondo2);display:grid;place-items:center;overflow:hidden}
.card .pic img,.card .pic>.ph-fallback{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic img{transform:scale(1.06)}
.card .pill{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--fondo) 75%,transparent);border:1px solid var(--linea2);color:var(--acento);backdrop-filter:blur(6px);z-index:2}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:24px}
.card .meta{color:var(--suave);font-size:13.5px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.price{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--texto)}
.add{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--acento);background:transparent;color:var(--acento);font-weight:600;font-size:13.5px;transition:all .2s}
.add:hover{background:var(--acento);color:var(--sobre)}
.add svg{width:16px;height:16px}
.opc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.talla{min-width:34px;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--linea2);background:transparent;font-size:12.5px;font-family:var(--mono)}
.talla[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.color{width:24px;height:24px;border-radius:50%;border:2px solid var(--fondo);background:var(--c);box-shadow:0 0 0 1px var(--linea2)}
.color[aria-pressed="true"]{box-shadow:0 0 0 2px var(--acento)}

/* ---------- Paquetes (scroll horizontal fijado) ---------- */
.combos{border-block:1px solid var(--linea);overflow:hidden}
.combos-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:80px}
.combos-track{display:flex;gap:22px;padding-inline:clamp(16px,4vw,40px);width:max-content;will-change:transform}
.combo{position:relative;width:min(440px,82vw);flex:none;border-radius:26px;padding:30px;background:linear-gradient(160deg,var(--fondo4) 0%,var(--fondo2) 60%);border:1px solid var(--linea2);display:flex;flex-direction:column;gap:18px;min-height:420px;overflow:hidden}
.combo::before{content:"";position:absolute;width:300px;height:300px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%)}
.combo>*{position:relative}
.combo .num{font-family:var(--mono);font-size:12px;color:var(--acento);letter-spacing:.1em}
.combo h3{font-size:40px}
.combo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--suave);font-size:14.5px}
.combo li{display:flex;gap:10px;align-items:baseline}
.combo li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acento);flex:none;transform:translateY(-2px)}
.combo .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.combo .was{font-family:var(--mono);font-size:13px;color:var(--tenue);text-decoration:line-through}
.combo .now{font-family:var(--display);font-size:42px;line-height:1}
.combo .now small{font-family:var(--body);font-size:14px;color:var(--suave)}
.combo .save{font-size:12px;color:var(--ok);font-weight:600}
.combo .para{font-size:13px;color:var(--suave)}
.combo .cimg{position:absolute;right:-10px;top:10px;width:150px;height:150px;border-radius:50%;overflow:hidden;opacity:.92;mask-image:radial-gradient(circle,#000 55%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
.combo .cimg img,.combo .cimg .ph-fallback{width:100%;height:100%;object-fit:cover}
.combo-intro{width:min(420px,82vw);flex:none;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-right:20px}
@media (max-width:899px){.combos-track{overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding-bottom:12px}.combo,.combo-intro{scroll-snap-align:start}}

/* ---------- Banner ---------- */
.banner{height:min(760px,90svh);overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff}
.banner .media{position:absolute;inset:0;will-change:transform;background:linear-gradient(135deg,var(--fondo4),var(--fondo2))}
.banner .media img{width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,5,.78),rgba(8,6,5,.32) 40%,rgba(8,6,5,.82))}
.banner .inner{position:relative;z-index:2;padding-inline:16px}
.banner .eyebrow{color:var(--acento2)}
.banner h2{font-size:clamp(44px,8vw,120px)}
.banner h2 em{color:var(--acento2)}
.banner p{color:#fff;opacity:.88;margin:18px auto 0;max-width:46ch}

/* ---------- Extras: calendario y antes/después ---------- */
.cal-wrap{display:grid;grid-template-columns:1fr minmax(0,460px);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:900px){.cal-wrap{grid-template-columns:1fr}}
.cal-res{margin:24px 0;padding:16px 18px;border:1px dashed var(--linea2);border-radius:14px;min-height:56px;color:var(--suave)}
.cal-res b{color:var(--texto)}
.cal{background:var(--fondo2);border:1px solid var(--linea2);border-radius:24px;padding:22px}
.cal-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cal-cab b{font-family:var(--display);font-size:22px;text-transform:capitalize;font-weight:400}
.leyenda{font-size:11.5px;color:var(--suave);display:flex;gap:6px;align-items:center}
.leyenda i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-left:8px}
.l-libre{background:var(--acento)}.l-ocupado{background:var(--fondo4);border:1px solid var(--linea2)}
.cal-sem,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-sem{font-size:11px;color:var(--tenue);text-align:center;margin-bottom:6px}
.dia{aspect-ratio:1;border-radius:10px;border:1px solid var(--linea);background:transparent;color:var(--texto);font-family:var(--mono);font-size:13px;display:grid;place-items:center}
.dia.vacio{border:0}
.dia.libre:hover{border-color:var(--acento)}
.dia.ocupado{background:var(--fondo4);color:var(--tenue);text-decoration:line-through;cursor:default;opacity:.7}
.dia.sel{background:var(--acento);color:var(--sobre);border-color:var(--acento)}
.dia.rango{background:color-mix(in srgb,var(--acento) 20%,transparent);border-color:color-mix(in srgb,var(--acento) 40%,transparent)}
.cal-nota{margin:14px 0 0;font-size:11.5px;color:var(--tenue)}
.antes-despues{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--fondo3);border:1px solid var(--linea2);touch-action:pan-y}
.ad-img{position:absolute;inset:0}
.ad-img img,.ad-img .ph-fallback{width:100%;height:100%;object-fit:cover}
.ad-antes{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ad-et{position:absolute;top:14px;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ad-et-a{left:14px}.ad-et-d{right:14px}
.antes-despues input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ad-asa{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.4)}
.ad-asa::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:#222;display:grid;place-items:center;font-size:18px}

/* ---------- Cómo pedir, horario, cierre, pie ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--linea2);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--display);font-style:italic;font-size:56px;color:var(--acento);line-height:1}
.step h3{font-size:28px}
.step p{color:var(--suave);margin:0;font-size:15px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.info{grid-template-columns:minmax(0,1fr)}}
.panelbox{min-width:0}
.panelbox{border:1px solid var(--linea);border-radius:22px;padding:28px;background:var(--fondo2)}
.panelbox h3{font-size:30px;margin-bottom:18px}
.hours{display:grid}
.hours div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--linea);font-size:15px}
.hours div:last-child{border-bottom:0}
.hours span:first-child{min-width:0}
.hours span:last-child{font-family:var(--mono);color:var(--texto);white-space:nowrap;font-size:13.5px}
@media (max-width:420px){.hours div{flex-wrap:wrap}.hours span:last-child{font-size:12px;white-space:normal;text-align:right;margin-left:auto}.panelbox{padding:22px}}
.hours .today{color:var(--acento)}
.zones{display:flex;flex-wrap:wrap;gap:8px}
.zones span{padding:8px 14px;border-radius:999px;background:var(--fondo3);border:1px solid var(--linea);font-size:14px}
.note{margin-top:18px;font-size:13.5px;color:var(--suave);display:flex;gap:10px;align-items:flex-start}
.note svg{width:18px;height:18px;flex:none;color:var(--warn);margin-top:2px}
.final{text-align:center}
.final h2{font-size:clamp(48px,8vw,128px)}
.final .btn{margin-top:36px;height:60px;padding:0 34px;font-size:16px}
/* Mientras el JS pinta el sitio, el pie no sube hasta arriba ni salta al llegar el contenido (CLS). */
main#top:empty{min-height:300svh}
main#top:empty + footer{visibility:hidden}
footer{border-top:1px solid var(--linea);padding-block:40px 120px;color:var(--suave);font-size:13.5px}
footer .wrap{display:grid;gap:22px}
.legal{font-size:12px;color:var(--tenue);max-width:80ch;margin:0}
.made{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.made b{color:var(--texto)}
.reveal{will-change:transform,opacity}

/* ---------- Modo reunión: tipografía según el ancho del sitio ---------- */
@media (min-width:1101px){
  body.reunion .hero h1{font-size:clamp(44px,5.2vw,84px)}
  body.reunion .hero.v-editorial h1{font-size:clamp(40px,5vw,84px)}
  body.reunion h2{font-size:clamp(34px,4.2vw,60px)}
  body.reunion .final h2{font-size:clamp(44px,6vw,96px)}
  body.reunion .banner h2{font-size:clamp(40px,6vw,92px)}
  body.reunion .hero-grid{grid-template-columns:1.1fr .9fr}
}

/* ---------- Lanzador de chat ---------- */
.launcher{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;height:60px;padding:0 22px 0 8px;border-radius:999px;border:0;background:var(--wa-accent);color:#04140f;font-weight:700;font-size:15px;box-shadow:0 18px 40px -12px rgba(0,168,132,.7);transition:right .45s cubic-bezier(.2,.7,.2,1),bottom .45s cubic-bezier(.2,.7,.2,1),transform .25s}
.launcher:hover{transform:translateY(-2px)}
.launcher .av{width:44px;height:44px;border-radius:50%;background:#04140f;color:var(--wa-accent);display:grid;place-items:center}
.launcher .av svg{width:24px;height:24px}
.launcher::before{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--wa-accent);opacity:0;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
body.reunion .launcher{right:calc(var(--panel-w) + 20px)}
.launcher[hidden]{display:none!important}
/* En modo reunión el lanzador sube para no tapar los botones «Pedir» de las tarjetas */
body.reunion .launcher{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.launcher .badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--acento);color:var(--sobre);font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 3px var(--fondo)}
@media (max-width:560px){.launcher .t{display:none}.launcher{padding:0 8px}}

/* ---------- Ventana de chat (WhatsApp: fijo) ---------- */
.chat{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;width:400px;height:min(680px,calc(100svh - var(--bar-h) - 40px));display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--wa-bg);color:var(--wa-text);box-shadow:0 40px 100px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);transform-origin:center;transition:right .45s cubic-bezier(.2,.7,.2,1);font-size:14.5px}
.chat[hidden]{display:none}
body.reunion .chat{right:calc(var(--panel-w) + 20px)}
@media (max-width:560px){.chat{right:0;bottom:0;width:100%;height:calc(100svh - var(--bar-h));border-radius:18px 18px 0 0}body.reunion .chat{right:0}}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--wa-head)}
.chat-head .pp,.screen .pp{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--fondo4),var(--fondo));border:1px solid var(--acento);display:grid;place-items:center;font-family:var(--display);font-style:italic;color:var(--acento2);font-size:15px;flex:none}
.chat-head .who{min-width:0;flex:1}
.chat-head b{display:block;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head small{color:var(--wa-meta);font-size:12.5px}
.chat-head .x{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--wa-meta);display:grid;place-items:center}
.chat-head .x:hover{background:rgba(255,255,255,.06);color:var(--wa-text)}
.chat-modes{display:flex;gap:4px;padding:8px 10px;background:var(--wa-head);border-top:1px solid rgba(255,255,255,.05)}
.chat-modes button{flex:1;height:32px;border-radius:8px;border:0;background:transparent;color:var(--wa-meta);font-size:13px;font-weight:600}
.chat-modes button[aria-pressed="true"]{background:var(--wa-chip);color:var(--wa-text);box-shadow:inset 0 0 0 1px rgba(0,168,132,.5)}
.chat-ctl{display:flex;gap:6px;padding:6px 10px;background:var(--wa-head);border-top:1px solid rgba(255,255,255,.05)}
.chat-ctl[hidden]{display:none}
.chat-ctl button{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--wa-meta);font-size:12px;font-weight:600}
.chat-ctl button[aria-pressed="true"]{background:var(--wa-chip);color:var(--wa-text);border-color:var(--wa-accent)}
.chat-ctl #btnSaltar{margin-left:auto}
.chat-body{flex:1;overflow-y:auto;padding:14px 12px 10px;display:flex;flex-direction:column;gap:3px;background-color:var(--wa-bg);background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:18px 18px;overscroll-behavior:contain}
.day{align-self:center;background:var(--wa-chip);color:var(--wa-meta);font-size:11.5px;padding:5px 12px;border-radius:8px;margin:4px 0 10px;text-transform:uppercase;letter-spacing:.04em}
.sysnote{align-self:center;background:#1d2a20;color:#d8c98a;font-size:12px;padding:7px 12px;border-radius:8px;margin:2px 10px 10px;text-align:center;max-width:90%;line-height:1.4}
.msg{max-width:84%;padding:7px 9px 6px 10px;border-radius:9px;position:relative;line-height:1.42;word-wrap:break-word;white-space:pre-line;box-shadow:0 1px .5px rgba(0,0,0,.25)}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:2px}
.msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px}
.msg.cont{border-radius:9px}
.msg+.msg.in:not(.cont),.msg+.msg.out:not(.cont){margin-top:8px}
.msg .t{float:right;margin:6px 0 -4px 10px;font-size:11px;color:rgba(233,237,239,.6);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.msg .t svg{width:16px;height:11px;color:var(--wa-tick)}
.msg.pop{animation:pop .28s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.typing{align-self:flex-start;background:var(--wa-in);border-radius:9px;border-top-left-radius:2px;padding:12px 14px;display:flex;gap:4px;margin-top:8px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--wa-meta);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.opts{align-self:flex-start;display:flex;flex-direction:column;gap:3px;width:min(84%,300px);margin-top:3px}
.opts button{min-height:40px;padding:6px 10px;border-radius:9px;border:0;background:var(--wa-in);color:var(--wa-accent);font-weight:600;font-size:14px;transition:background .2s}
.opts button:hover:not(:disabled),.opts button.tap{background:#2a3942}
.opts button:disabled{cursor:default;opacity:.55}
.opts button.tap{opacity:1;box-shadow:inset 0 0 0 1px var(--wa-accent)}
.fin-acciones{align-self:center;display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap;justify-content:center}
.fin-acciones button{height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:var(--wa-chip);color:var(--wa-text);font-weight:600;font-size:13.5px}
.fin-acciones button.prim{background:var(--wa-accent);border-color:var(--wa-accent);color:#04140f}
.pcards{align-self:flex-start;display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:3px 2px 6px;margin-top:3px;scroll-snap-type:x mandatory}
.pcard{flex:none;width:200px;background:var(--wa-in);border-radius:10px;overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column}
.pcard .ph{height:120px;background:linear-gradient(135deg,var(--fondo4),var(--fondo2))}
.pcard .ph img,.pcard .ph .ph-fallback{width:100%;height:100%;object-fit:cover}
.pcard .pb{padding:9px 10px 10px;display:flex;flex-direction:column;gap:2px}
.pcard b{font-size:14px}
.pcard small{color:var(--wa-meta);font-size:12px;line-height:1.35}
.pcard .pp2{font-family:var(--mono);font-size:13.5px;color:var(--wa-text);margin-top:4px}
.pcard button{margin-top:8px;height:34px;border-radius:7px;border:0;background:#0b3b31;color:#7ff0cf;font-weight:600;font-size:13px}
.pcard button:disabled{opacity:.5;cursor:default}
.pcard button.tap{background:var(--wa-accent);color:#04140f}
.order{align-self:flex-start;width:min(88%,300px);background:var(--wa-in);border-radius:9px;border-top-left-radius:2px;padding:12px 12px 10px;margin-top:8px}
.order h4{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wa-meta);font-weight:600}
.order .ln{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:3px 0}
.order .ln span:last-child{font-family:var(--mono);white-space:nowrap}
.order .dato{color:var(--wa-meta);font-size:12.5px}
.order .tot{border-top:1px dashed rgba(255,255,255,.15);margin-top:6px;padding-top:7px;font-weight:700}
.order .anticipo{color:#7ff0cf;font-weight:600}
.order .pay{margin-top:10px;width:100%;height:38px;border-radius:8px;border:0;background:var(--wa-accent);color:#04140f;font-weight:700}
.order .pay:disabled{opacity:.5;cursor:default}
.voice{display:flex;align-items:center;gap:10px;min-width:230px}
.voice .play{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--wa-text);display:grid;place-items:center;flex:none}
.voice .wave{flex:1;display:flex;align-items:center;gap:2px;height:28px}
.voice .wave i{flex:1;background:rgba(233,237,239,.45);border-radius:2px;min-width:2px}
.voice .wave i.on{background:var(--wa-tick)}
.voice .vav{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--fondo4),var(--fondo));border:1px solid var(--acento);display:grid;place-items:center;font-family:var(--display);font-style:italic;color:var(--acento2);font-size:13px;flex:none;position:relative}
.voice-cap{display:block;font-size:12px;color:var(--wa-meta);margin-top:4px;font-style:italic;white-space:normal}
.receipt{align-self:flex-end;width:250px;background:var(--wa-out);border-radius:9px;border-top-right-radius:2px;padding:4px;margin-top:8px}
.rc{position:relative;background:#f6f3ee;color:#1b1b1b;border-radius:6px;padding:14px 14px 12px;overflow:hidden;font-size:12.5px}
.rc .ok{width:34px;height:34px;border-radius:50%;background:#1f9d6b;color:#fff;display:grid;place-items:center;margin-bottom:8px}
.rc h5{margin:0;font-size:14px}
.rc .big{font-family:var(--mono);font-size:22px;font-weight:600;margin:6px 0 8px}
.rc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.rc dt{color:#6b6b6b}
.rc dd{margin:0;text-align:right;font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rc .wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rc .wm span{transform:rotate(-24deg);font-weight:800;font-size:26px;letter-spacing:.12em;color:rgba(200,40,40,.28);border:3px solid rgba(200,40,40,.28);padding:2px 10px;border-radius:6px;white-space:nowrap}
.receipt .t{display:flex;justify-content:flex-end;gap:3px;font-size:11px;color:rgba(233,237,239,.6);padding:4px 6px 1px}
.receipt .t svg{width:16px;height:11px;color:var(--wa-tick)}
.chat-foot{display:flex;align-items:center;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--wa-head)}
.chat-foot input{flex:1;min-width:0;height:42px;border-radius:21px;border:0;background:#2a3942;color:var(--wa-text);padding:0 16px;font:inherit;font-size:14.5px}
.chat-foot input::placeholder{color:#a8b5bd}
.chat-foot input:disabled{opacity:.7}
.cbtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--wa-accent);color:#04140f;display:grid;place-items:center;flex:none}
.cbtn:disabled{opacity:.45;cursor:default}
.cbtn svg{width:20px;height:20px}
.cbtn.ghost{background:transparent;color:var(--wa-meta)}
.cbtn.ghost:hover{color:var(--wa-text);background:rgba(255,255,255,.06)}
.cbtn[hidden]{display:none}

/* ---------- Panel del dueño (producto Meridian: oscuro fijo, acento del nicho) ---------- */
.owner{--fondo:#0a0908;--fondo2:#14110f;--fondo3:#1c1815;--linea:rgba(241,230,211,.12);--linea2:rgba(241,230,211,.22);--texto:#f1e6d3;--suave:#a99a8b;--tenue:#7a6d61;
  position:fixed;top:var(--bar-h);right:0;bottom:0;width:var(--panel-w);z-index:50;background:var(--fondo);color:var(--texto);border-left:1px solid var(--linea);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;font-size:14px}
body.reunion .owner{transform:none}
@media (max-width:1100px){body.reunion .site{margin-right:0}body.reunion .launcher{right:20px}body.reunion .chat{right:20px}.owner{width:min(420px,100%);box-shadow:-30px 0 80px rgba(0,0,0,.6)}}
@media (max-width:560px){body.reunion .chat{right:0}}
.owner-head{padding:18px 20px 14px;border-bottom:1px solid var(--linea);display:flex;align-items:flex-start;gap:12px}
.owner-head .dbtn{color:var(--texto)}
.owner-head .tt{flex:1;min-width:0}
.owner-head small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.owner-head h3{font-family:var(--body);font-weight:700;font-size:18px;margin-top:4px;line-height:1.2}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ok);font-weight:600}
/* Punto fijo: las cifras del panel son de ejemplo, así que no simula «datos en vivo» con un pulso. */
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
@keyframes pulse2{50%{opacity:.3}}
.owner-scroll{flex:1;overflow-y:auto;padding:16px 20px 24px;display:flex;flex-direction:column;gap:18px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{border:1px solid var(--linea);border-radius:14px;padding:12px 14px;background:var(--fondo2);transition:border-color .4s,background .4s}
.kpi.flash{border-color:var(--ok);background:rgba(76,195,138,.08)}
.kpi span{display:block;font-size:12px;color:var(--suave)}
.kpi b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi em{font-style:normal;font-size:11.5px;color:var(--ok)}
.kpi.wide{grid-column:1/-1}
.sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:5px;height:90px;padding-top:6px;border-bottom:1px solid var(--linea)}
.bars i{flex:1;background:linear-gradient(180deg,var(--acento2),var(--acentoprof));border-radius:3px 3px 0 0;min-height:3px;opacity:.9}
.bars i.now{background:linear-gradient(180deg,#7ff0cf,var(--wa-accent));opacity:1}
.bars-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--tenue);margin-top:5px}
.orders{display:flex;flex-direction:column;gap:8px}
.ord{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--linea);background:var(--fondo2)}
.ord.new{border-color:var(--ok);animation:glow 2.4s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(76,195,138,.5);background:rgba(76,195,138,.12)}100%{box-shadow:0 0 0 10px rgba(76,195,138,0)}}
.ord .id{font-family:var(--mono);font-size:12px;color:var(--suave)}
.ord .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ord .am{font-family:var(--mono);font-size:13px;text-align:right}
.ord .st{grid-column:2/4;display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--suave)}
.st-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.st-new{background:rgba(76,195,138,.15);color:#4cc38a}
.st-way{background:rgba(231,178,76,.15);color:#e7b24c}
.st-done{background:rgba(169,154,139,.14);color:#a99a8b}
.feed{display:flex;flex-direction:column;border-left:1px solid var(--linea);margin-left:5px}
.feed div{position:relative;padding:0 0 12px 16px;font-size:13px;color:var(--suave)}
.feed div::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--fondo3);border:1px solid var(--linea2)}
.feed div.hot::before{background:#4cc38a;border-color:#4cc38a}
.feed time{display:block;font-family:var(--mono);font-size:11px;color:var(--tenue)}
.sample{font-size:11.5px;color:var(--tenue);border-top:1px solid var(--linea);padding-top:12px;margin:0}
.confeti{position:fixed;z-index:160;width:8px;height:8px;border-radius:2px;pointer-events:none}

/* ---------- Modal personalizar ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.sheet{width:min(520px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--fondo2);color:var(--texto);border:1px solid var(--linea2);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px}
.sheet h3{font-size:30px}
.sheet p{margin:0;color:var(--suave);font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);font-weight:600}
.field input,.field select{height:46px;border-radius:12px;border:1px solid var(--linea2);background:var(--fondo);color:var(--texto);padding:0 14px;font:inherit}
.field input:focus,.field select:focus{border-color:var(--acento);outline:none}
.linkbox{display:flex;gap:8px;align-items:stretch}
.linkbox code{flex:1;min-width:0;background:var(--fondo);border:1px dashed var(--linea2);border-radius:12px;padding:12px;font-family:var(--mono);font-size:12px;color:var(--acento);overflow-wrap:anywhere;user-select:all}
.sheet .acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.ph-fallback{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:48px;color:var(--acento);background:radial-gradient(60% 60% at 50% 50%,var(--glow),transparent 70%),linear-gradient(135deg,var(--fondo3),var(--fondo2))}

/* ---------- Intro de carga (solo la primera vez por sesión; máx. 1,8 s) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:#070605;color:#f1e6d3;display:grid;place-items:center;animation:introOut .5s 2.2s forwards}
.sin-intro .intro{display:none}
/* Versión ligera (celular): sin secciones fijadas, así que el navegador puede saltarse todo lo que queda fuera de pantalla. */
.ligero .block,.ligero .combos,.ligero .banner,.ligero .motor,.ligero footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
/* Celular: sin efectos costosos de pintura (blur de fondo, niebla animada) para que el primer render sea rápido. */
@media (max-width:760px){.nav.solid,.badge-float{backdrop-filter:none;-webkit-backdrop-filter:none}.paisaje .niebla{display:none}.hero-glow{display:none}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro .in-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-inline:16px}
.intro svg{width:96px;height:96px}
.intro circle{fill:none;stroke:var(--acento);stroke-width:1.2;stroke-dasharray:302;stroke-dashoffset:302;animation:draw .8s .1s forwards cubic-bezier(.6,0,.2,1)}
@keyframes draw{to{stroke-dashoffset:0}}
.intro .im{font-family:var(--display);font-style:italic;font-size:34px;fill:var(--acento2)}
.intro .in-name{font-family:var(--display);font-size:clamp(26px,4vw,44px);letter-spacing:.08em;text-transform:uppercase}
.intro .in-sub{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#a99a8b}
.intro .in-bar{width:160px;height:1px;background:rgba(241,230,211,.22);overflow:hidden}
.intro .in-bar i{display:block;height:100%;background:var(--acento);transform-origin:left;animation:bar 1s .2s forwards cubic-bezier(.6,0,.2,1);transform:scaleX(0)}
@keyframes bar{to{transform:scaleX(1)}}

/* ---------- Cursor ---------- */
/* El aro mide siempre 84 px y crece/encoge con la propiedad `scale` (compuesta con el transform de GSAP): sin animar el layout. */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid var(--acento);display:grid;place-items:center;scale:.524;transition:scale .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,opacity .2s}
.cursor b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sobre);opacity:0;transition:opacity .2s}
.cursor.big{scale:1;background:var(--acento);border-color:var(--acento)}
.cursor.big b{opacity:1}
.cursor.hide{opacity:0}
.cursor-dot{position:fixed;left:0;top:0;z-index:151;pointer-events:none;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acento)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--acentoprof),var(--acento2));transform-origin:left;transform:scaleX(0)}

/* ---------- Capa Meridian (identidad de Meridian: oscura y neutra en todos los nichos) ---------- */
.motor{--fondo:#0a0908;--fondo2:#14110f;--fondo3:#1c1815;--linea:rgba(241,230,211,.12);--linea2:rgba(241,230,211,.22);--texto:#f1e6d3;--suave:#a99a8b;--tenue:#7a6d61;
  background:radial-gradient(1200px 600px at 50% 0%,rgba(0,168,132,.07),transparent 60%),#0a0908;color:var(--texto);border-block:1px solid var(--linea)}
.motor-pin{min-height:100svh;display:flex;align-items:center;padding-block:96px 48px}
.motor-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;width:100%}
.mtag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wa-accent);border:1px solid rgba(0,168,132,.4);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.mtag i{width:6px;height:6px;border-radius:50%;background:var(--wa-accent)}
.motor h2{font-size:clamp(32px,3.6vw,54px);margin-bottom:28px}
.motor h2 em{color:var(--acento2)}
.msteps{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
.msteps::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:1px;background:var(--linea2)}
.mstep{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:10px 0;opacity:.38;transition:opacity .4s}
.mstep.on{opacity:1}
.mstep .k{width:31px;height:31px;border-radius:50%;border:1px solid var(--linea2);background:#0a0908;display:grid;place-items:center;font-family:var(--mono);font-size:12px;position:relative;z-index:1;transition:all .4s}
.mstep.on .k{background:var(--acento);border-color:var(--acento);color:var(--sobre)}
.mstep.done .k{border-color:var(--acento);color:var(--acento2)}
.mstep b{display:block;font-size:16px;font-weight:600}
/* El detalle de cada paso se despliega con grid-template-rows (0fr → 1fr), sin animar la altura. */
.mstep div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.mstep.on div{grid-template-rows:auto 1fr}
.mstep div>span{display:block;min-height:0;font-size:13.5px;color:var(--suave);overflow:hidden}
.saltar{margin-top:18px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--linea2);background:transparent;color:var(--suave);font-size:12.5px}
.saltar:hover{color:var(--texto);border-color:var(--texto)}
.phone{position:relative;height:min(680px,calc(100svh - 190px));width:auto;max-width:100%;justify-self:center;aspect-ratio:9/18.5;border-radius:44px;padding:12px;background:linear-gradient(145deg,#2b2520,#0d0b09);box-shadow:0 50px 120px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px #000}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:90px;height:24px;margin-left:-45px;border-radius:20px;background:#000;z-index:3}
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--wa-bg);display:flex;flex-direction:column;font-size:12.5px;color:var(--wa-text)}
.screen .sh{display:flex;align-items:center;gap:9px;padding:46px 12px 10px;background:var(--wa-head)}
.screen .sh .pp{width:30px;height:30px;font-size:12px}
.screen .sh b{font-size:13px}
.screen .sh small{display:block;color:var(--wa-meta);font-size:10.5px}
.screen .sb{flex:1;overflow:hidden;position:relative;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:16px 16px}
.sb-in{position:relative;padding:10px 9px;display:flex;flex-direction:column;gap:5px;will-change:transform}
.screen .msg{font-size:12.5px;max-width:88%;padding:6px 8px 5px 9px}
.screen .msg .t{font-size:9.5px;margin-top:4px}
.screen .mini{align-self:flex-start;width:78%;background:var(--wa-in);border-radius:9px;overflow:hidden}
.screen .mini img,.screen .mini .ph-fallback{width:100%;height:84px;object-fit:cover}
.screen .mini div{padding:6px 8px;display:flex;justify-content:space-between;font-size:11.5px}
.screen .mini div span{font-family:var(--mono)}
.screen .mrc{align-self:flex-end;width:62%;background:#f6f3ee;color:#1b1b1b;border-radius:8px;padding:8px 9px;font-size:10.5px;position:relative;overflow:hidden;border:3px solid var(--wa-out)}
.screen .mrc b{display:block;font-family:var(--mono);font-size:15px}
.screen .mrc em{position:absolute;right:-6px;top:10px;transform:rotate(-20deg);font-style:normal;font-weight:800;font-size:9px;color:rgba(200,40,40,.5);border:1.5px solid rgba(200,40,40,.5);padding:0 4px;border-radius:3px}
.motor-fijo .mx{opacity:0;transform:translateY(14px)}
.sysmap{position:relative;display:grid;gap:12px}
.sysmap .wire{position:absolute;left:34px;top:34px;bottom:96px;width:2px;background:var(--linea2);border-radius:2px}
.sysmap .wire i{position:absolute;inset:0;background:linear-gradient(180deg,var(--wa-accent),#7ff0cf);transform-origin:top;transform:scaleY(0);border-radius:2px}
.sysmap .wire b{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#7ff0cf;box-shadow:0 0 0 4px rgba(0,168,132,.25),0 0 18px #7ff0cf}
body:not(.motor-fijo) .sysmap .wire i{transform:scaleY(1)}
.node{position:relative;display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid var(--linea);background:rgba(22,18,16,.7);transition:border-color .4s,background .4s,box-shadow .4s;z-index:1}
.node .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--fondo3);color:var(--suave);transition:all .4s}
.node .ic svg{width:22px;height:22px}
.node b{display:block;font-size:14.5px}
.node span{display:block;font-size:12px;color:var(--suave)}
.node .st{font-family:var(--mono);font-size:11px;color:var(--tenue);white-space:nowrap}
.node.on{border-color:rgba(0,168,132,.55);background:rgba(0,168,132,.07);box-shadow:0 0 0 4px rgba(0,168,132,.06),0 20px 40px -20px rgba(0,168,132,.4)}
.node.on .ic{background:var(--wa-accent);color:#04140f}
.node.on .st{color:var(--wa-accent)}
.node.done .ic{color:var(--wa-accent)}
.ticket{margin-top:6px;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;border:1px dashed var(--linea2);font-size:12.5px;color:var(--suave)}
.ticket b{display:block;font-family:var(--mono);font-size:22px;color:var(--texto);font-weight:600}
@media (max-width:1100px){.motor-grid{grid-template-columns:minmax(0,1fr) 300px}.sysmap{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.sysmap .wire{display:none}.ticket{grid-column:1/-1}}
@media (max-width:760px){.motor-pin{padding-block:72px}.motor-grid{grid-template-columns:1fr}.phone{max-width:300px}.sysmap{grid-template-columns:1fr 1fr}.node{grid-template-columns:40px 1fr;padding:8px}.node .ic{width:40px;height:40px}.node .st{display:none}.mstep div{grid-template-rows:auto 1fr}.mstep{opacity:1}}
@media (max-height:860px) and (min-width:1101px){
  .motor-pin{padding-block:84px 20px}.sysmap{gap:8px}.node{padding:6px 12px 6px 8px}.node .ic{width:40px;height:40px}.ticket{padding:10px 14px;margin-top:2px}.ticket b{font-size:19px}
  .msteps .mstep{padding:6px 0}.motor h2{margin-bottom:18px}.sysmap .wire{left:28px}
}
body:not(.motor-fijo) .phone{aspect-ratio:auto;height:auto;width:100%;max-width:340px}
body:not(.motor-fijo) .screen{height:auto}
body:not(.motor-fijo) .screen .sb{overflow:visible}

/* ---------- Producto que vuela ---------- */
.fly{position:fixed;z-index:120;pointer-events:none;border-radius:18px;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.6)}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}.mx{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}