/* ============ BlueZebra · prototype (neon-noir + per-vertical palettes) ============ */
:root{
  --bg:#05070f; --ink:#eaf2ff; --muted:#8aa0c4; --line:rgba(120,160,220,.14);
  --cyan:#2fd6ff; --blue:#2a6bff; --violet:#6b5cff;
  --glow:0 0 40px rgba(47,214,255,.45); --card:rgba(16,24,44,.62); --maxw:1200px;
  /* zebra glow (single source): used by the resting landing zebra AND the demo scene base.
     Editing these changes both places. */
  --z-glow1:rgba(255,196,120,.66); --z-glow2:rgba(240,150,60,.45);
  /* resting/start glow for the landing zebra (blue, to sit on the blue header); the demo
     then morphs this to the scene smoke glow (--s-glow*) on launch */
  --z-blue1:rgba(47,214,255,.5); --z-blue2:rgba(42,107,255,.42);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:radial-gradient(1100px 700px at 78% -8%,rgba(42,107,255,.20),transparent 60%),
    radial-gradient(900px 600px at 10% 110%,rgba(107,92,255,.16),transparent 55%),var(--bg);
  color:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
strong{color:#fff;font-weight:600}
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}

.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem clamp(1rem,4vw,3rem);transition:opacity .45s}
.wordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:.5px;font-size:1.15rem;color:#fff}
.wordmark span{color:var(--cyan);text-shadow:var(--glow)}
.tag-mini{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* ===================== SELECTION (home — always dark brand) ===================== */
#view-selection{position:relative;z-index:10;transition:opacity .5s}
.hero{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;padding:4.75rem clamp(1rem,4vw,3rem) .5rem;min-height:46vh}
.eyebrow{color:var(--cyan);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;margin-bottom:1rem}
.hero-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.94rem,calc(0.875rem + 2.5vw),4.88rem);line-height:1.02;letter-spacing:-.02em;color:#fff}
.hero-sub{color:var(--muted);font-size:clamp(1rem,calc(.79rem + .44vw),1.32rem);line-height:1.55;max-width:46ch;margin-top:1.3rem}
.channels{margin-top:1.5rem}
.channels-label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.channels-row{display:flex;gap:.6rem;align-items:center}
.chan{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(16,24,44,.6);border:1px solid var(--line);color:#bcdcff;transition:transform .25s,color .25s,border-color .25s;cursor:default}
.chan svg{width:20px;height:20px;display:block}
.chan:hover{transform:translateY(-3px);color:var(--brand,#2fd6ff);border-color:rgba(120,160,220,.5)}
.chan-more{width:auto;padding:0 .9rem;border-radius:99px;font-size:.9rem;font-weight:500;letter-spacing:.02em;color:#bcdcff}
.pick-cue{text-align:center;padding:.3rem 1rem 1.1rem}
.pick-cue span{font-family:'Bricolage Grotesque',sans-serif;font-weight:400;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:.005em;color:#6fa3ff;text-shadow:0 0 26px rgba(95,140,255,.35);display:inline-block;animation:cueTone 3.4s ease-in-out infinite}
@keyframes cueTone{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.hero-stage{position:relative;display:grid;place-items:center;min-height:38vh}
@keyframes pulse{0%,100%{transform:scale(.96);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.hero-zebra{position:relative;width:min(100%,421px);height:auto;filter:drop-shadow(0 0 2px rgba(47,214,255,.95)) drop-shadow(0 0 14px rgba(47,214,255,.55)) drop-shadow(0 0 34px rgba(42,107,255,.45)) drop-shadow(0 16px 36px rgba(0,0,0,.4));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.picker{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;padding:.4rem clamp(1rem,4vw,3rem) 1.6rem}
.zcard{position:relative;cursor:pointer;border:1px solid rgba(47,214,255,.2);border-radius:20px;background:var(--card);backdrop-filter:blur(8px);overflow:hidden;aspect-ratio:1;padding:.35rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--ink);font-family:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s,opacity .4s}
.zcard:hover{transform:translateY(-8px);border-color:rgba(47,214,255,1);box-shadow:0 18px 50px rgba(8,14,30,.6)}
.zcard-glow{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:82%;aspect-ratio:1;background:radial-gradient(circle at 50% 46%,rgba(47,214,255,.22),transparent 60%);opacity:.3;transition:opacity .35s;pointer-events:none;filter:blur(4px)}
.zcard:hover .zcard-glow{opacity:.85}
.zcard img{position:relative;width:auto;height:clamp(150px,80%,215px);max-width:97%;filter:drop-shadow(0 0 5px rgba(47,214,255,.55)) drop-shadow(0 0 16px rgba(42,107,255,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.4));transition:transform .35s}
.zcard:hover img{transform:scale(1.05)}
.zcard-name{position:relative;font-family:'Sora',sans-serif;font-weight:300;font-size:1.22rem;letter-spacing:.02em;text-align:center;color:#eaf2ff;line-height:1.2}

.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);background:rgba(10,16,32,.92);border:1px solid var(--line);color:var(--ink);padding:.7rem 1.1rem;border-radius:12px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:40}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* =====================================================================
   SCENE THEME SYSTEM — per-specialty palette via --s-* variables
   ---------------------------------------------------------------------
   BASE = restaurante (defined on #view-stage). Each .theme-* below only
   overrides what differs. Variable groups:
     · Scene tint       : --s-cloud (edge haze + CTA fade), --s-veil, background
     · Text / accent    : --s-muted, --s-accent
     · Zebra glow (pip) : --s-glow1, --s-glow2  (halo + drop-shadow around the video)
     · Reservation card : --s-card / -cardbd / -cardink / -cardmuted / -sep,
                          --s-chip / -chipbd, --s-tagbg, --s-okbg / -oktext
     · "Serpiente"      : --s-snake1, --s-snake2  (animated card border)
     · Conversation     : --s-bz-* (Zebra bubble), --s-bc-* (caller bubble),
                          --s-viz / --s-viz-caller  (voice waveforms, as "r,g,b")
   Contrast rule: DARK scene -> dark glass card + light ink; BRIGHT scene ->
   light card + dark ink (dental keeps dark glass for a clinical/tech look).
   Glow: cyan/blue on cool/dark/tech scenes, warm halo on warm scenes.
   ===================================================================== */
/* ===================== STAGE (overlay) — palette driven by --s-* ===================== */
#view-stage{
  position:fixed;inset:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .55s ease;overflow:hidden;
  /* default palette = RESTAURANTE */
  --s-cloud:#05070f; --s-veil:rgba(5,7,15,.55); --s-muted:#9fb4d6; --s-accent:#f0a64e;
  --s-glow1:var(--z-glow1); --s-glow2:var(--z-glow2);
  --s-chip:rgba(10,16,32,.6); --s-chipbd:rgba(120,160,220,.18);
  --s-card:rgba(0,0,0,.76); --s-cardbd:rgba(240,166,78,.5); --s-cardink:#fff; --s-cardmuted:#9fb4d6; --s-sep:rgba(120,160,220,.16);
  --s-snake1:#f0a64e; --s-snake2:#ffd9a8; --s-tagbg:rgba(240,166,78,.14);
  --s-okbg:#1bd17a; --s-oktext:#7dffc2;
  --s-bz-bg:rgba(240,166,78,.16); --s-bz-bd:rgba(240,166,78,.4); --s-bz-c:#eaf6ff;
  --s-bc-bg:rgba(12,18,34,.86); --s-bc-bd:rgba(120,160,220,.16); --s-bc-c:#eaf2ff;
  --s-viz:240,166,78; --s-viz-caller:234,242,255;
  background:transparent;
}
/* PELUQUERÍA */
#view-stage.theme-salon{
  --s-cloud:#f4eee4; --s-veil:rgba(244,238,228,.5); --s-muted:#7a6e5d; --s-accent:#6f9c7d;
  --s-glow1:rgba(255,243,212,.82); --s-glow2:rgba(244,206,140,.45);
  --s-chip:rgba(255,253,248,.84); --s-chipbd:rgba(120,110,95,.25);
  --s-card:rgba(255,253,249,.9); --s-cardbd:rgba(111,156,125,.55); --s-cardink:#2c2620; --s-cardmuted:#7a6e5d; --s-sep:rgba(120,110,95,.22);
  --s-snake1:#6f9c7d; --s-snake2:#c2ddcb; --s-tagbg:rgba(111,156,125,.16);
  --s-okbg:#3e9c6b; --s-oktext:#2f7d54;
  --s-bz-bg:rgba(111,156,125,.16); --s-bz-bd:rgba(111,156,125,.5); --s-bz-c:#2c2620;
  --s-bc-bg:rgba(255,255,255,.94); --s-bc-bd:rgba(120,110,95,.2); --s-bc-c:#2c2620;
  --s-viz:111,156,125; --s-viz-caller:160,135,105;
  background:#f4eee4;
}
/* CLÍNICA DENTAL */
#view-stage.theme-dental{
  --s-cloud:#e6ecf1; --s-veil:rgba(230,236,241,.42); --s-muted:#a6b1c8; --s-accent:#2fd6ff;
  --s-glow1:rgba(47,214,255,.55); --s-glow2:rgba(150,205,250,.3);
  --s-chip:rgba(12,16,26,.62); --s-chipbd:rgba(150,165,200,.22);
  --s-card:rgba(10,14,22,.74); --s-cardbd:rgba(47,214,255,.5); --s-cardink:#eef2fa; --s-cardmuted:#a6b1c8; --s-sep:rgba(150,165,200,.18);
  --s-snake1:#2fd6ff; --s-snake2:#d0f6ff; --s-tagbg:rgba(47,214,255,.14);
  --s-okbg:#1bd17a; --s-oktext:#7dffc2;
  --s-bz-bg:linear-gradient(135deg,rgba(47,214,255,.26),rgba(16,44,60,.88)); --s-bz-bd:rgba(47,214,255,.55); --s-bz-c:#eef2fa;
  --s-bc-bg:rgba(12,16,26,.86); --s-bc-bd:rgba(150,165,200,.2); --s-bc-c:#eef2fa;
  --s-viz:47,214,255; --s-viz-caller:200,220,245;
  background:#e6ecf1;
}
/* CENTRO DEPORTIVO */
/* CENTRO DEPORTIVO · anochecer dorado (glow de la zebra y sombras de la sección en ámbar de atardecer) */
#view-stage.theme-sport{
  --s-cloud:#13110c; --s-veil:rgba(19,17,12,.55); --s-muted:#b4a98d; --s-accent:#f6b73e;
  --s-glow1:rgba(245,182,92,.6); --s-glow2:rgba(226,140,58,.5);
  --s-chip:rgba(18,14,8,.62); --s-chipbd:rgba(200,180,140,.22);
  --s-card:rgba(16,12,7,.74); --s-cardbd:rgba(246,183,62,.5); --s-cardink:#faf4e9; --s-cardmuted:#b4a98d; --s-sep:rgba(200,180,140,.18);
  --s-snake1:#f6b73e; --s-snake2:#ffe7b3; --s-tagbg:rgba(246,183,62,.14);
  --s-okbg:#1bd17a; --s-oktext:#7dffc2;
  --s-bz-bg:rgba(246,183,62,.18); --s-bz-bd:rgba(246,183,62,.4); --s-bz-c:#faf4e9;
  --s-bc-bg:rgba(16,12,7,.86); --s-bc-bd:rgba(200,180,140,.2); --s-bc-c:#faf4e9;
  --s-viz:246,183,62; --s-viz-caller:225,205,170;
  background:#13110c;
}
/* TALLER MECÁNICO */
#view-stage.theme-garage{
  --s-cloud:#100d09; --s-veil:rgba(16,13,9,.55); --s-muted:#b9ad97; --s-accent:#ff9d4d;
  --s-glow1:rgba(255,170,90,.62); --s-glow2:rgba(255,120,40,.45);
  --s-chip:rgba(18,14,10,.62); --s-chipbd:rgba(170,150,120,.22);
  --s-card:rgba(14,11,7,.76); --s-cardbd:rgba(255,157,77,.5); --s-cardink:#f4efe7; --s-cardmuted:#b9ad97; --s-sep:rgba(170,150,120,.18);
  --s-snake1:#ff9d4d; --s-snake2:#ffd2a0; --s-tagbg:rgba(255,157,77,.14);
  --s-okbg:#1bd17a; --s-oktext:#7dffc2;
  --s-bz-bg:rgba(255,157,77,.16); --s-bz-bd:rgba(255,157,77,.4); --s-bz-c:#f4efe7;
  --s-bc-bg:rgba(18,14,10,.86); --s-bc-bd:rgba(170,150,120,.2); --s-bc-c:#f4efe7;
  --s-viz:255,157,77; --s-viz-caller:235,225,205;
  background:#100d09;
}
/* PROFESIONALES A DOMICILIO */
#view-stage.theme-home{
  --s-cloud:#eef0e4; --s-veil:rgba(238,240,228,.42); --s-muted:#5f6b50; --s-accent:#4e9d63;
  --s-glow1:rgba(140,215,150,.58); --s-glow2:rgba(205,235,205,.3);
  --s-chip:rgba(255,254,250,.84); --s-chipbd:rgba(110,120,90,.25);
  --s-card:rgba(255,254,249,.9); --s-cardbd:rgba(78,157,99,.55); --s-cardink:#26301f; --s-cardmuted:#5f6b50; --s-sep:rgba(110,120,90,.2);
  --s-snake1:#4e9d63; --s-snake2:#bfe3c5; --s-tagbg:rgba(78,157,99,.16);
  --s-okbg:#3e9c6b; --s-oktext:#2f7d54;
  --s-bz-bg:rgba(78,157,99,.16); --s-bz-bd:rgba(78,157,99,.5); --s-bz-c:#26301f;
  --s-bc-bg:rgba(255,255,255,.94); --s-bc-bd:rgba(110,120,90,.2); --s-bc-c:#26301f;
  --s-viz:78,157,99; --s-viz-caller:150,135,100;
  background:#eef0e4;
}
/* ALQUILER DE ESPACIOS / COWORKING */
#view-stage.theme-coworking{
  --s-cloud:#eef1f4; --s-veil:rgba(238,241,244,.5); --s-muted:#6a7686; --s-accent:#2bb6d8;
  --s-glow1:rgba(80,200,225,.58); --s-glow2:rgba(170,222,235,.3);
  --s-chip:rgba(255,255,255,.84); --s-chipbd:rgba(110,130,160,.25);
  --s-card:rgba(255,255,255,.9); --s-cardbd:rgba(43,182,216,.55); --s-cardink:#1d2733; --s-cardmuted:#6a7686; --s-sep:rgba(110,130,160,.2);
  --s-snake1:#2bb6d8; --s-snake2:#bfeef7; --s-tagbg:rgba(43,182,216,.16);
  --s-okbg:#1bb673; --s-oktext:#0f8a55;
  --s-bz-bg:rgba(43,182,216,.16); --s-bz-bd:rgba(43,182,216,.5); --s-bz-c:#1d2733;
  --s-bc-bg:rgba(255,255,255,.94); --s-bc-bd:rgba(110,130,160,.2); --s-bc-c:#1d2733;
  --s-viz:43,182,216; --s-viz-caller:120,140,165;
  background:#eef1f4;
}
/* ALQUILER DE ESPACIOS / TRASTEROS · gris neutro de nave + acento verde-teal (imagen storage_units) */
#view-stage.theme-storage{
  --s-cloud:#edf0f2; --s-veil:rgba(237,240,242,.5); --s-muted:#69727f; --s-accent:#2fb89a;
  --s-glow1:rgba(70,200,170,.55); --s-glow2:rgba(175,225,212,.3);
  --s-chip:rgba(255,255,255,.84); --s-chipbd:rgba(108,124,140,.26);
  --s-card:rgba(255,255,255,.9); --s-cardbd:rgba(47,184,154,.55); --s-cardink:#1f2a2a; --s-cardmuted:#69727f; --s-sep:rgba(108,124,140,.2);
  --s-snake1:#2fb89a; --s-snake2:#bdeede; --s-tagbg:rgba(47,184,154,.16);
  --s-okbg:#1bb673; --s-oktext:#0f8a55;
  --s-bz-bg:rgba(47,184,154,.16); --s-bz-bd:rgba(47,184,154,.5); --s-bz-c:#1f2a2a;
  --s-bc-bg:rgba(255,255,255,.94); --s-bc-bd:rgba(108,124,140,.2); --s-bc-c:#1f2a2a;
  --s-viz:47,184,154; --s-viz-caller:120,135,140;
  background:#edf0f2;
}
body.staged #view-stage{opacity:1;pointer-events:auto}
body.staged #view-selection,body.staged .topbar{opacity:0;pointer-events:none}
/* landing: hide the page content while the demo overlay is staged */
body.staged .lp-main{opacity:0;transition:opacity .3s ease;pointer-events:none}
/* arriving from a landing's demo (?s=..&demo=1): hide the orbital before first paint */
html.demo-boot #view-selection,html.demo-boot .topbar{opacity:0!important}

.scene{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(.85);transform-origin:center}
.scene-cloud{position:absolute;inset:-8%;z-index:2;pointer-events:none;background:radial-gradient(ellipse 71% 67% at 50% 47%,transparent 46%,var(--s-cloud) 63%);filter:url(#cloud) blur(10px)}
.scene-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--s-veil),transparent 40%)}

.zebra-pip{position:fixed;z-index:5;left:50%;top:50%;width:min(46vh,440px);aspect-ratio:1;transform:translate(-50%,-50%) scale(1);opacity:0;transform-origin:top left;will-change:transform}
.zebra-pip.live{left:auto;right:4vw;top:5vh;width:min(40vh,380px);transform:none}
.pip-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .28s ease;filter:drop-shadow(0 0 2px var(--s-glow1)) drop-shadow(0 0 20px var(--s-glow1)) drop-shadow(0 0 54px var(--s-glow2)) drop-shadow(0 18px 40px rgba(0,0,0,.4))}
.pip-glow{position:absolute;inset:2% 2% -4% 2%;border-radius:50%;background:radial-gradient(circle,var(--s-glow1),var(--s-glow2) 45%,transparent 66%);filter:blur(10px);z-index:-1;animation:pulse 5s ease-in-out infinite}
/* landing demo only: the zebra glow ignites from blue (resting) to the scene smoke glow.
   'from' is explicit blue; the omitted end uses the element's own --s-glow* filter. */
@keyframes pipGlowIgnite{from{filter:drop-shadow(0 0 2px var(--z-blue1)) drop-shadow(0 0 20px var(--z-blue1)) drop-shadow(0 0 54px var(--z-blue2)) drop-shadow(0 18px 40px rgba(0,0,0,.4))}}
@keyframes pipGlowFadeIn{from{opacity:0}}
body.lp.staged .pip-vid{animation:pipGlowIgnite .9s ease-out}
body.lp.staged .pip-glow{animation:pulse 5s ease-in-out infinite,pipGlowFadeIn .9s ease-out}

.ring{position:fixed;z-index:11;top:calc(5vh + min(40vh,380px) + .7rem);right:calc(4vw + min(40vh,380px) / 2);transform:translateX(50%);white-space:nowrap;display:flex;align-items:center;gap:.5rem;color:var(--s-accent);font-weight:600;letter-spacing:.04em;background:var(--s-chip);border:1px solid var(--s-chipbd);padding:.5rem 1rem;border-radius:99px;opacity:0;transition:opacity .4s;backdrop-filter:blur(6px)}
.ring-dot{width:9px;height:9px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 12px var(--s-accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* conversation under the zebra (right) */
.hud{position:absolute;z-index:6;right:clamp(1rem,4vw,3rem);top:calc(5vh + min(40vh,380px) + 3.2rem);bottom:auto;left:auto;width:min(470px,88vw);opacity:0;transform:translateY(16px);display:flex;flex-direction:column;align-items:stretch}
.viz-wrap{margin-bottom:.7rem;width:100%;text-align:left}
.viz-label{display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted);margin-bottom:.35rem;text-shadow:0 1px 10px var(--s-cloud),0 0 3px var(--s-cloud),0 1px 4px rgba(0,0,0,.4)}
#viz{width:100%;max-width:470px;height:88px;display:block}
.transcript{display:flex;flex-direction:column;gap:.55rem;max-height:40vh;overflow:hidden;width:100%}
.bubble{max-width:84%;padding:.65rem .9rem;border-radius:14px;font-size:1rem;line-height:1.42;opacity:0;transform:translateY(8px);animation:rise .4s forwards;box-shadow:0 6px 20px rgba(0,0,0,.18)}
@keyframes rise{to{opacity:1;transform:none}}
.bubble.zebra{align-self:flex-start;background:var(--s-bz-bg);border:1px solid var(--s-bz-bd);color:var(--s-bz-c)}
.bubble.caller{align-self:flex-end;background:var(--s-bc-bg);border:1px solid var(--s-bc-bd);color:var(--s-bc-c)}
.bubble .who{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:.15rem}
.bubble .kw{opacity:.4;transition:opacity .14s ease}
.bubble .kw.spoken{opacity:1}

/* reservation: themed card + living snake border */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.reservation{position:absolute;z-index:7;left:clamp(1rem,4vw,3rem);top:14%;transform:translateX(-30px);width:min(380px,86vw);min-height:440px;display:flex;flex-direction:column;background:var(--s-card);backdrop-filter:blur(12px);border:1px solid var(--s-cardbd);border-radius:18px;padding:1.45rem 1.45rem 1.35rem;opacity:0;box-shadow:0 24px 60px rgba(3,6,16,.45)}
.reservation::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:conic-gradient(from var(--a),transparent 0 62%,var(--s-snake1) 78%,var(--s-snake2) 84%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:snake 4.5s linear infinite;pointer-events:none;transition:opacity .6s ease}
.reservation.snake-off::before{animation:none;opacity:0}
@keyframes snake{to{--a:360deg}}
.res-head{display:flex;align-items:center;gap:.55rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.34rem;color:var(--s-cardink);margin-bottom:1rem}
.res-dot{width:9px;height:9px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 12px var(--s-accent)}
.res-fields{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.res-fields li{display:flex;align-items:center;justify-content:space-between;font-size:1.22rem;border-bottom:1px dashed var(--s-sep);padding-bottom:.6rem}
.res-fields li span{color:var(--s-cardmuted)}
.res-fields li b{color:var(--s-cardink);font-weight:600;transition:color .3s}
.res-fields b.flash{animation:flash .7s ease}
@keyframes flash{0%{color:var(--s-accent)}100%{color:var(--s-cardink)}}
.res-tags{justify-content:flex-start!important;gap:.4rem;border-bottom:none!important;flex-wrap:wrap}
.tag{font-size:.94rem;padding:.26rem .72rem;border-radius:99px;background:var(--s-tagbg);border:1px solid var(--s-accent);color:var(--s-accent);opacity:0;transform:scale(.8);animation:pop .4s forwards}
@keyframes pop{to{opacity:1;transform:none}}
.res-status{margin-top:auto;padding-top:1rem;font-size:1.1rem;color:var(--s-cardmuted);display:flex;align-items:center;gap:.45rem}
.res-status.ok{color:var(--s-oktext)}
.res-status .ck{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--s-okbg);color:#04130b;font-size:.82rem;font-weight:800}

.cta{position:absolute;z-index:9;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,transparent,var(--s-cloud) 95%);padding:2rem}
.cta.show{display:flex;animation:rise .5s ease}
.cta h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--s-cardink)}
.cta-sub{color:var(--s-muted);margin-top:1rem;font-size:1.05rem}
#view-stage.theme-dental .cta-sub{color:#fff}
.cta-actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}
.btn-primary{background:linear-gradient(135deg,var(--s-accent),var(--s-snake2));color:#04130b;font-weight:700;text-decoration:none;padding:.85rem 1.6rem;border-radius:99px;box-shadow:0 10px 40px var(--s-glow1);transition:transform .25s,box-shadow .25s}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{background:transparent;border:1px solid var(--s-chipbd);color:var(--s-cardink);font-family:inherit;padding:.85rem 1.4rem;border-radius:99px;cursor:pointer;transition:border-color .25s}
.btn-ghost:hover{border-color:var(--s-accent)}

.stage-exit,.replay{position:absolute;z-index:12;background:var(--s-chip);border:1px solid var(--s-chipbd);color:var(--s-cardink);border-radius:99px;cursor:pointer;font-family:inherit;backdrop-filter:blur(8px)}
.stage-exit{top:1.2rem;right:1.2rem;width:40px;height:40px;font-size:1rem}
.replay{top:1.2rem;right:4.2rem;height:40px;padding:0 1rem;font-size:.85rem;display:none}
.replay.show{display:block}
.stage-exit:hover,.replay:hover{border-color:var(--s-accent)}

/* ===================== responsive ===================== */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:6rem}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-stage{order:-1;min-height:34vh}
  .picker{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  /* ---- call view (mobile): vertical stack ---- */
  /* zebra centered at the top (left-based, since the FLIP leaves transform:none) */
  .zebra-pip.live{left:calc(50% - min(22vw,95px));right:auto;top:3vh;width:min(44vw,190px)}
  .ring{top:calc(3vh + min(44vw,190px) + .4rem);right:auto;left:50%;transform:translateX(-50%)}
  /* sound bar + the latest conversation line, between the zebra and the booking box */
  /* sound bar fixed just below the zebra; the conversation starts right under it and pushes
     DOWN as new lines arrive (newest on top). Older lines slide behind the booking box on their
     own (hud z6 < reservation z7, which blurs+darkens whatever is behind it) — no height limit. */
  .hud{left:.6rem;right:.6rem;top:calc(3vh + min(44vw,190px) + .8rem);bottom:auto;width:auto;align-items:stretch}
  .viz-wrap{width:100%;text-align:center;margin-bottom:.55rem}
  .viz-wrap canvas{height:40px;width:100%}
  .transcript{width:100%;max-height:none;overflow:visible;flex-direction:column}
  .bubble{max-width:88%;font-size:.95rem}
  /* booking box: compact ticket, stuck to the bottom */
  .reservation{left:.6rem;right:.6rem;top:auto;bottom:.6rem;width:auto;transform:none;min-height:0;max-height:40vh;overflow-y:auto;padding:.85rem 1rem;border-radius:18px}
  .res-head{font-size:1.1rem;margin-bottom:.5rem}
  .res-fields{gap:.35rem}
  .res-fields li{font-size:.98rem;padding-bottom:.38rem}
  .res-status{font-size:.9rem;padding-top:.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .hero-zebra,.hero-glow,.pip-glow,.reservation::before{animation:none!important}
}

/* ============================================================================
   v2 · aurora background + glass selector (home)  — appended overrides
   ========================================================================== */
#cv{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.home-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,18,22,.82),rgba(4,18,22,.3) 34%,transparent 58%)}
#flash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;mix-blend-mode:screen}
body.staged #cv,body.staged .home-scrim,body.staged #flash{opacity:0;transition:opacity .4s}
body{background:#041216}

/* hero zebra is now driven by the aurora engine (birth + edge glow) */
.hero-zebra{animation:none!important;filter:none;opacity:0;will-change:transform,opacity,filter;transform-origin:center}

/* --- glass cards (shared) --- */
.zcard{background:rgba(20,34,56,.42);backdrop-filter:blur(9px) saturate(1.55);-webkit-backdrop-filter:blur(9px) saturate(1.55);border:1px solid rgba(150,190,245,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 34px rgba(3,8,20,.45)}
.zcard:hover{border-color:#27d3ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 50px rgba(3,8,20,.6),0 0 26px rgba(39,170,255,.4)}

/* --- RAIL layout (default) : bigger row of glass cards, staggered birth --- */
.rail-wrap{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1rem,4vw,3rem)}
.rail-viewport{overflow:hidden;width:100%}
body.layout-rail .picker{display:flex!important;flex-wrap:nowrap;grid-template-columns:none;gap:22px;max-width:none;margin:0;padding:.5rem 0 1rem;will-change:transform;transition:transform .66s cubic-bezier(.16,1,.3,1)}
body.layout-rail .zcard{flex:0 0 auto;aspect-ratio:auto;height:auto;padding:1rem .6rem .9rem;opacity:0;transform:translateY(26px) scale(.96);transition:transform .55s cubic-bezier(.16,.9,.2,1),opacity .55s,border-color .35s,box-shadow .35s}
body.layout-rail.revealed .zcard{opacity:1;transform:none}
body.layout-rail .zcard:hover{transform:translateY(-8px)}
body.layout-rail .zcard img{height:150px}
body.layout-rail .zcard .zcard-name{font-size:1.05rem;margin-top:.45rem}
.rail-arrow{position:absolute;top:50%;z-index:5;background:none;border:none;padding:.6rem .35rem;color:#7fd4ff;cursor:pointer;display:grid;place-items:center;transition:color .2s,filter .2s;filter:drop-shadow(0 0 9px rgba(39,170,255,.35))}
.rail-prev{left:0;transform:translate(-50%,-50%)}
.rail-next{right:0;transform:translate(50%,-50%)}
.rail-arrow svg{width:32px;height:70px;display:block;transition:transform .2s}
.rail-arrow:hover:not(:disabled){color:#3fe0ff;filter:drop-shadow(0 0 16px rgba(63,224,255,.75))}
.rail-arrow:hover:not(:disabled) svg{transform:scale(1.14)}
.rail-arrow:disabled{opacity:.18;cursor:default;filter:none}

/* --- ORBITAL layout : circular glass nodes around the zebra --- */
body.layout-orbital .pick-cue{display:none}
body.layout-orbital .hero{min-height:88vh}
body.layout-orbital .picker{position:fixed;inset:0;z-index:11;display:block;max-width:none;margin:0;padding:0;pointer-events:none;grid-template-columns:none}
body.layout-orbital .zcard{position:absolute;width:var(--zsize,140px);height:var(--zsize,140px);display:block;background:none;border:none;box-shadow:none;backdrop-filter:none;padding:0;overflow:visible;pointer-events:auto;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .5s ease,transform .55s cubic-bezier(.16,.9,.2,1)}
body.layout-orbital.revealed .zcard{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.layout-orbital .zcard::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(60,84,106,.1);backdrop-filter:blur(5px) saturate(1.55);-webkit-backdrop-filter:blur(5px) saturate(1.55);border:1px solid rgba(150,190,245,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px rgba(3,8,20,.5);transition:border-color .3s,box-shadow .3s;z-index:0}
body.layout-orbital .zcard img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;height:var(--zimg,152px);max-width:none;width:auto}
body.layout-orbital .zcard .zcard-glow{display:none}
body.layout-orbital .zcard .zcard-name{position:absolute;top:50%;transform:translateY(-50%);width:var(--zlabelw,128px);z-index:1;margin:0;line-height:1.18;font-size:var(--zlabel,1.08rem)}
body.layout-orbital .zcard.side-left .zcard-name{right:122%;text-align:right}
body.layout-orbital .zcard.side-right .zcard-name{left:122%;text-align:left}
/* description shown on hover, just below the label (italic, 20% smaller, faded) */
body.layout-orbital .zcard-desc{position:absolute;top:100%;left:0;width:100%;margin-top:.4rem;
  font-style:italic;font-weight:300;font-size:calc(var(--zlabel,1.08rem) * .8);line-height:1.28;
  color:rgba(234,242,255,.9);opacity:0;transition:opacity .22s ease;pointer-events:none}
body.layout-orbital .zcard:hover .zcard-desc,body.layout-orbital .zcard:focus-visible .zcard-desc{opacity:1}
.zcard-soon{display:block;width:fit-content;margin:5px 0 0;font-style:normal;font-weight:600;font-size:.62em;
  letter-spacing:.04em;text-transform:uppercase;color:#cfe0ff;background:rgba(120,160,220,.18);
  border:1px solid var(--line);border-radius:999px;padding:.06rem .42rem;white-space:nowrap}
body.layout-orbital .zcard:hover{transform:translate(-50%,-50%) scale(1.08)}
body.layout-orbital .zcard:hover::after{border-color:#27d3ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 30px rgba(39,170,255,.5)}

@media(max-width:860px){
  body.layout-orbital .picker{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;padding:.4rem 1rem 1.6rem;max-width:var(--maxw);margin:0 auto;pointer-events:auto}
  body.layout-orbital .zcard{position:relative;left:auto!important;top:auto!important;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;transform:translateY(20px) scale(.96)}
  body.layout-orbital.revealed .zcard{transform:none}
  body.layout-orbital .zcard::after{position:absolute;top:2px;left:50%;transform:translateX(-50%);inset:auto;width:120px;height:120px}
  body.layout-orbital .zcard img{position:relative;left:auto;top:auto;transform:none;height:128px;margin-top:-2px}
  body.layout-orbital .zcard .zcard-name{position:static;transform:none;width:auto;right:auto;left:auto;text-align:center;margin-top:.5rem}
  .zcard-desc{display:none}
  body.layout-orbital .pick-cue{display:block}
}

/* --- ORBITAL v3 : responsive 30% / 5% / 60% columns, true circle of zebras --- */
body.layout-orbital .hero{display:grid;grid-template-columns:30% 5% 60%;justify-content:center;align-items:center;max-width:none;margin:0;padding:0 2vw;min-height:100vh;gap:0}
body.layout-orbital .hero-copy{grid-column:1;max-width:none;z-index:12}
body.layout-orbital .hero-stage{grid-column:3;position:relative;inset:auto;display:grid;place-items:center;min-height:100vh;z-index:1}
body.layout-orbital .hero-zebra{position:relative;left:auto;top:auto;width:clamp(210px,21vw,400px);height:auto}
@media(max-width:860px){
  body.layout-orbital .hero{display:block;min-height:auto;padding:6rem 1rem 0;grid-template-columns:none}
  body.layout-orbital .hero-copy{max-width:none;text-align:center}
  body.layout-orbital .hero-stage{min-height:30vh}
  body.layout-orbital .hero-zebra{width:min(70%,320px)}
}

/* =====================================================================
   v2 ADDITIONS — full nav, hero CTAs, scrollable content bands
   (orbital hero stays pixel-identical; only contained so bands scroll clean)
   ===================================================================== */
html{scroll-padding-top:88px}

/* keep the orbital overlay inside the first screen so lower bands don't get covered */
body.layout-orbital .picker{position:absolute}
.band{position:relative;z-index:3}            /* sit above the fixed aurora canvas */
body.below-hero #cv{opacity:0;transition:opacity .5s}   /* fade ambient once scrolled past hero */

/* ---------- top nav ---------- */
.topbar{gap:1.2rem;backdrop-filter:blur(0);background:transparent;border-bottom:1px solid transparent}
.topbar.scrolled{background:rgba(6,14,24,.72);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.topbar .wordmark{text-decoration:none;flex:0 0 auto}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1.7rem}
.nav-center a{color:var(--muted);text-decoration:none;font-size:.93rem;font-weight:500;transition:color .25s}
.nav-center a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:.9rem;margin-left:auto}
/* collapsed language selector: one label, opens a popover with the rest */
.lang{position:relative}
.lang-current{display:inline-flex;align-items:center;gap:.34rem;font:600 .78rem/1 'Hanken Grotesk',sans-serif;letter-spacing:.04em;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px;padding:.46rem .62rem .46rem .72rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.lang-current:hover{color:#fff;border-color:var(--cyan);background:rgba(47,214,255,.1)}
.lang-caret{width:9px;height:6px;opacity:.8;transition:transform .25s}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:128px;display:flex;flex-direction:column;gap:2px;padding:5px;
  background:rgba(10,17,32,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(150,190,245,.2);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-opt{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;font:600 .82rem/1 'Hanken Grotesk',sans-serif;letter-spacing:.03em;
  color:var(--ink);background:none;border:none;border-radius:9px;cursor:pointer;padding:.5rem .6rem;transition:color .18s,background .18s}
.lang-opt span{font-weight:400;font-size:.78rem;color:var(--muted)}
.lang-opt:hover{background:rgba(47,214,255,.1);color:#fff}
.lang-opt:hover span{color:#cfe0ff}
.lang-opt.is-on{color:#04121b;background:var(--cyan)}
.lang-opt.is-on span{color:rgba(4,18,27,.7)}
.nav-login{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--ink);
  border:1px solid rgba(150,190,245,.4);padding:.46rem 1.05rem;border-radius:99px;transition:border-color .2s,background .2s,color .2s}
.nav-login:hover{color:#fff;border-color:var(--cyan);background:rgba(47,214,255,.1)}
.nav-login-m{display:none}
/* Especializaciones dropdown */
.nav-spec{position:relative}
.nav-spec-btn{display:inline-flex;align-items:center;gap:.34rem;background:none;border:none;cursor:pointer;color:var(--muted);font:500 .93rem/1 'Hanken Grotesk',sans-serif;padding:0;transition:color .25s}
.nav-spec-btn:hover{color:#fff}
.nav-spec-btn::after{content:'';position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.spec-caret{width:9px;height:6px;opacity:.8;transition:transform .25s}
.nav-spec:hover .spec-caret,.nav-spec.open .spec-caret{transform:rotate(180deg)}
.nav-spec-menu{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:230px;display:flex;flex-direction:column;gap:2px;padding:6px;
  background:rgba(8,14,28,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(150,190,245,.18);border-radius:14px;box-shadow:0 24px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;z-index:40}
.nav-spec:hover .nav-spec-menu,.nav-spec.open .nav-spec-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-spec-menu a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;padding:.62rem .8rem;border-radius:9px;white-space:nowrap;transition:background .2s,color .2s}
.nav-spec-menu a:hover{background:rgba(47,214,255,.1);color:#fff}
/* "Ver más info" button on the demo stage, aligned with the booking column, tinted by the scene glow */
.stage-more{position:absolute;z-index:12;left:clamp(1rem,4vw,3rem);width:min(380px,86vw);bottom:clamp(1.2rem,4vh,2.4rem);display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .6s}
body.staged .stage-more{opacity:1;pointer-events:auto}
body.lp .stage-more{display:none}
.stage-more-link{text-decoration:none;font-weight:700;color:#04121b;padding:.82rem 1.4rem;border-radius:12px;
  background:linear-gradient(120deg,var(--s-glow1),var(--s-glow2)),#fff;
  box-shadow:0 0 0 1px var(--s-glow1),0 10px 30px var(--s-glow2);transition:transform .2s,box-shadow .2s}
.stage-more-link:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--s-glow1),0 16px 40px var(--s-glow1)}

/* ---------- hero CTAs ---------- */
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(150,190,245,.16);max-width:440px}
.btn-acceso{text-decoration:none;font-weight:700;color:#04121b;background:linear-gradient(120deg,var(--cyan),#7fb4ff);
  padding:.82rem 1.25rem;border-radius:12px;box-shadow:0 0 0 1px rgba(127,180,255,.4),0 10px 30px rgba(39,170,255,.4);transition:transform .2s,box-shadow .2s}
.btn-acceso:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(127,180,255,.65),0 14px 38px rgba(39,170,255,.6)}
.btn-how{text-decoration:none;font-weight:600;color:var(--ink);padding:.82rem 1.2rem;border-radius:12px;
  border:1px solid rgba(150,190,245,.35);background:rgba(255,255,255,.03);transition:border-color .2s,background .2s,transform .2s}
.btn-how:hover{border-color:var(--cyan);background:rgba(47,214,255,.08);transform:translateY(-2px)}
.hero-hook{margin-top:.9rem;font-size:.86rem;color:var(--muted);letter-spacing:.02em}
.hero-hook::before{content:"▸ ";color:var(--cyan)}

/* ---------- shared band scaffolding ---------- */
.band{padding:clamp(3.5rem,8vw,6.5rem) clamp(1rem,4vw,3rem);background:linear-gradient(180deg,#061019,#04121b)}
.band+.band{border-top:1px solid var(--line)}
.band-inner{max-width:var(--maxw);margin:0 auto}
.band-inner.center{text-align:center;max-width:760px}
.band-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--cyan);font-weight:600;margin-bottom:.7rem}
.band-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.12;color:#fff;letter-spacing:-.01em}

/* ---------- HOW: workflow ---------- */
.flow-wrap{margin-top:2.65rem}
.flow{width:100%;height:auto;display:block;font-family:'Hanken Grotesk',sans-serif}
.flow-zone{fill:none;stroke:#8ca2b4;stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round}
.flow-hub{fill:rgba(39,170,255,.06);stroke:#1f8fe0;stroke-width:2;filter:drop-shadow(0 0 12px rgba(39,170,255,.40))}
.flow-result{fill:rgba(21,178,211,.10);stroke:#15b2d3;stroke-width:2;filter:drop-shadow(0 0 10px rgba(21,178,211,.30))}
@keyframes flowres{0%,100%{filter:drop-shadow(0 0 8px rgba(39,170,255,.28))}50%{filter:drop-shadow(0 0 22px rgba(39,170,255,.6))}}
.flow-conn{fill:none;stroke:#2f7fd0;stroke-width:2;stroke-dasharray:7 7;marker-end:url(#fl-arrow);animation:flowdash 1s linear infinite}
.flow-conn.bidir{marker-start:url(#fl-arrow)}
@keyframes flowdash{to{stroke-dashoffset:-56}}
.flow-dot{fill:#27d3ff;filter:drop-shadow(0 0 4px rgba(39,170,255,.85))}
.flow-eyebrow{fill:#0f7d91;font-weight:700;font-size:12px;letter-spacing:.12em}
.flow-eyebrow.hub{fill:#1170a8}
.flow-eyebrow.res{fill:#0e7d96;font-size:11.5px;letter-spacing:.14em}
.flow-node-title{fill:#0e1c27;font-weight:700;font-size:16px;font-family:'Bricolage Grotesque',sans-serif}
.flow-hub-title{fill:#0e1c27;font-weight:800;font-size:22px;font-family:'Bricolage Grotesque',sans-serif}
.flow-muted{fill:#52616c;font-size:13.5px}
.flow-chan{fill:#5e7180;font-size:12.5px}
.flow-bridge{fill:#5b6a74;font-size:12px}
.flow-result-title{fill:#0e1c27;font-weight:700;font-size:16px;font-family:'Bricolage Grotesque',sans-serif}
.flow-eyebrow.hub{font-size:12px;letter-spacing:.06em;fill:#1170a8}
.flow-eyebrow.tools{font-size:11px;letter-spacing:.04em}
.flow-optional{fill:#8a99a4;font-size:11px;font-style:italic}
.flow-junction{fill:#2f7fd0}
.band-why .band-lead{color:#41566a;font-size:1.05rem;line-height:1.55;max-width:60ch;margin-top:1rem}
.band-how .band-lead{color:#41566a;font-size:1.05rem;line-height:1.55;max-width:none;margin-top:1rem}

/* ---------- BENEFITS ---------- */
.band-why .band-title{max-width:24ch;margin-bottom:.4rem}
.benefits{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.2rem}
.benefits li{display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1rem;border:1px solid var(--line);border-radius:16px;background:rgba(10,20,36,.45)}
.benefits svg{width:26px;height:26px;color:var(--cyan)}
.benefits b{color:#fff;font-size:1rem;font-weight:700;line-height:1.2}
.benefits span{color:var(--muted);font-size:.86rem;line-height:1.45}

/* ---------- alternating band backgrounds (break the all-dark look) ---------- */
.band-how{background:#e8edf2}
.band-how .band-eyebrow{color:#0f7d91}
.band-how .band-title{color:#0e1c27;max-width:62ch}

.band-why{background:#ffffff}
.band-why .band-eyebrow{color:#0f7d91}
.band-why .band-title{color:#0e1c27}
.band-why .benefits li{background:#f5f8fa;border-color:#e4eaef}
.band-why .benefits svg{color:#0c93ad}
.band-why .benefits b{color:#0e1c27}
.band-why .benefits span{color:#5b6a74}

/* ---------- footer (slim, single row) ---------- */
.site-footer{position:relative;z-index:3;background:#04121b;border-top:1px solid var(--line);padding:1.25rem clamp(1rem,4vw,3rem)}
.site-footer .foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.site-footer .wordmark{text-decoration:none;font-size:1rem}
.foot-copy{color:var(--muted);font-size:.82rem}
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap;margin-left:auto}
.foot-links a{color:var(--muted);text-decoration:none;font-size:.9rem}
.foot-links a:hover{color:#fff}

/* ---------- deep-link sector highlight (only when arriving on /agente/<sector>) ---------- */
body.layout-orbital .zcard.is-target::after{border-color:#27d3ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 34px rgba(39,170,255,.55);animation:targetpulse 2.4s ease-in-out infinite}
@keyframes targetpulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 22px rgba(39,170,255,.4)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 40px rgba(39,170,255,.7)}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .arch{flex-direction:column;align-items:stretch}
  .arch-owned,.arch-external{max-width:none}
  .arch-bridge{min-width:0;height:54px}
  .arch-bridge::before{left:50%;right:auto;top:8%;bottom:8%;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(150,190,245,.6) 0 7px,transparent 7px 14px)}
  .benefits{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .benefits{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .btn-acceso,.btn-how{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .flow-conn{animation:none}
  .flow-dot{display:none}
  body.layout-orbital .zcard.is-target::after{animation:none}
}

/* ===================== MOBILE (<=860px): nav hamburger + hero swipe carousel ===================== */
.nav-toggle{display:none}
.nav-req-m{display:none}
.pager-dots{display:none}
@media(max-width:860px){
  /* NAV hamburger */
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid rgba(150,190,245,.28);border-radius:11px;background:rgba(10,18,34,.5);cursor:pointer}
  .nav-toggle span{display:block;height:2px;background:#cfe0ff;border-radius:2px;transition:transform .3s,opacity .3s}
  .topbar.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topbar.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .topbar.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-center{position:fixed;left:0;right:0;top:58px;transform:translateY(-10px);flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(8,14,28,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(150,190,245,.18);
    padding:.3rem 1.1rem 1rem;box-shadow:0 24px 50px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .26s,transform .26s,visibility .26s}
  .topbar.nav-open .nav-center{opacity:1;visibility:visible;transform:none}
  .nav-center a{width:100%;padding:.85rem .2rem;font-size:1.02rem;border-bottom:1px solid rgba(150,190,245,.1)}
  .nav-req-m{display:block;color:var(--cyan)!important;border-bottom:none!important}
  /* nav: Acceder moves into the panel; Especializaciones becomes an inline list */
  .nav-right .nav-login{display:none}
  .nav-login-m{display:block;width:100%;padding:.85rem .2rem;font-size:1.02rem;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(150,190,245,.1)}
  .nav-spec{width:100%}
  .nav-spec-btn{width:100%;justify-content:space-between;padding:.85rem .2rem;font-size:1.02rem;border-bottom:1px solid rgba(150,190,245,.1)}
  .nav-spec-btn::after{display:none}
  .nav-spec-menu{position:static!important;transform:none!important;opacity:1;visibility:visible;display:none;min-width:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;padding:.1rem 0 .3rem .7rem}
  .nav-spec.open .nav-spec-menu{display:flex}
  .nav-spec-menu a{padding:.7rem .4rem;font-size:.98rem;border-bottom:1px solid rgba(150,190,245,.08)}
  .stage-more{display:none}

  /* HERO: stack; the carousel becomes the star (hide the separate central zebra) */
  body.layout-orbital .hero{min-height:auto;grid-template-columns:1fr;text-align:center;padding-top:5.6rem;gap:1.1rem}
  body.layout-orbital .hero-stage{display:none}
  body.layout-orbital .pick-cue{display:block;padding:.1rem 1rem .5rem}

  /* PICKER: un-fix the orbital -> horizontal scroll-snap swipe carousel */
  body.layout-orbital .picker{position:static!important;inset:auto!important;display:flex!important;gap:0;pointer-events:auto!important;max-width:100%;
    overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:.3rem max(11vw,calc(50% - 165px)) 1rem;scrollbar-width:none}
  body.layout-orbital .picker::-webkit-scrollbar{display:none}
  body.layout-orbital .zcard{position:relative!important;left:auto!important;top:auto!important;flex:0 0 78vw;max-width:330px;width:78vw;height:auto!important;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;scroll-snap-align:center;
    background:none!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:.6rem;
    transform:scale(.82)!important;opacity:.45!important;transition:transform .4s cubic-bezier(.16,.9,.2,1),opacity .4s!important}
  body.layout-orbital .zcard.is-centered{transform:scale(1)!important;opacity:1!important}
  body.layout-orbital .zcard img{width:min(58vw,236px);height:auto;filter:drop-shadow(0 0 2px rgba(47,214,255,.9)) drop-shadow(0 0 22px rgba(47,214,255,.5)) drop-shadow(0 14px 30px rgba(0,0,0,.45))}
  body.layout-orbital .zcard-name{position:static!important;width:auto!important;font-size:1.18rem;font-weight:600;color:#dbe7ff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  /* A3: kill the orbital glass disc + target ring in the carousel (no circle behind the zebra) */
  body.layout-orbital .zcard::after{display:none!important}
  body.layout-orbital .zcard.is-target::after{display:none!important}
  /* A2: re-enable the burst glow (orbital rule sets display:none with higher specificity) */
  body.layout-orbital .zcard .zcard-glow{display:block;position:absolute;inset:2% 8%;border-radius:50%;background:radial-gradient(circle,rgba(47,214,255,.6),rgba(42,107,255,.34) 46%,transparent 68%);filter:blur(15px);opacity:0;z-index:0}
  body.layout-orbital .zcard img{position:relative;z-index:1}
  body.layout-orbital .zcard.is-centered .zcard-glow{animation:zBurst 1.05s cubic-bezier(.16,.9,.2,1) both}
  @keyframes zBurst{0%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1.22)}60%{opacity:.85;transform:scale(1.04)}100%{opacity:.55;transform:scale(1)}}

  /* pager dots */
  .pager-dots{display:flex;justify-content:center;gap:.5rem;padding:.1rem 0 1.3rem}
  .pager-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(150,190,245,.35);padding:0;cursor:pointer;transition:transform .25s,background .25s}
  .pager-dots button.on{background:var(--cyan);transform:scale(1.45)}

  /* B2: swipe hint (Tinder-style), shown on load, hidden on first interaction */
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.1rem auto -.2rem;width:max-content;max-width:90%;
    padding:.4rem .85rem;border-radius:99px;background:rgba(10,18,34,.55);border:1px solid rgba(47,214,255,.28);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#cfe6ff;font:500 .82rem/1 'Hanken Grotesk',sans-serif;
    opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .4s,transform .4s,visibility .4s;pointer-events:none}
  body.show-swipe-hint .swipe-hint{opacity:1;visibility:visible;transform:none}
  .swipe-hand{font-size:1.05rem;display:inline-block;animation:swipeNudge 1.5s ease-in-out infinite}
  @keyframes swipeNudge{0%,100%{transform:translateX(-7px) rotate(-6deg)}50%{transform:translateX(7px) rotate(6deg)}}
}
.swipe-hint{display:none}
@media(max-width:860px){.swipe-hint{display:flex}}
@media(prefers-reduced-motion:reduce){.swipe-hand{animation:none}}

/* ===================== B3: WORKFLOW vertical (<=860px) ===================== */
.flow-m{display:none}
@media(max-width:860px){
  .flow-wrap .flow{display:none}
  .flow-m{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:420px;margin:.4rem auto 0}
  .fm-node{display:flex;flex-direction:column;gap:.18rem;padding:.85rem 1rem;border-radius:16px;text-align:left;
    border:2px dashed #8ca2b4;background:transparent}
  .fm-eyebrow{font:700 .68rem/1.2 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0f7d91}
  .fm-title{font:700 1.12rem/1.2 'Bricolage Grotesque',sans-serif;color:#0e1c27;margin-top:.05rem}
  .fm-muted{font:400 .9rem/1.4 'Hanken Grotesk',sans-serif;color:#52616c}
  .fm-chan{font:500 .82rem/1.3 'Hanken Grotesk',sans-serif;color:#5e7180;margin-top:.2rem}
  /* hubs = BlueZebra (solid blue with glow) */
  .fm-hub{border:2px solid #1f8fe0;background:rgba(39,170,255,.06);box-shadow:0 0 16px rgba(39,170,255,.28)}
  .fm-hub .fm-title{font-size:1.32rem;font-weight:800}
  /* attached satellites under the panel hub */
  .fm-sats{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(31,143,224,.25)}
  .fm-sat{display:flex;flex-direction:column;gap:.12rem;padding:.6rem .7rem;border-radius:12px;border:1.5px dashed #9bb0c2;background:rgba(255,255,255,.4)}
  .fm-sat-title{font:700 .96rem/1.2 'Bricolage Grotesque',sans-serif;color:#0e1c27}
  /* connectors */
  .fm-arrow{position:relative;align-self:center;width:2px;height:30px;margin:.1rem 0;background:linear-gradient(#1f8fe0,#1f8fe0)}
  .fm-arrow::after{content:"";position:absolute;left:50%;bottom:-1px;width:9px;height:9px;border-right:2px solid #1f8fe0;border-bottom:2px solid #1f8fe0;transform:translateX(-50%) rotate(45deg)}
  .fm-arrow.fm-bi::before{content:"";position:absolute;left:50%;top:-1px;width:9px;height:9px;border-left:2px solid #1f8fe0;border-top:2px solid #1f8fe0;transform:translateX(-50%) rotate(45deg)}
  .fm-arrow.fm-bi{height:42px}
  .fm-opt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
    font:600 .66rem/1 'Hanken Grotesk',sans-serif;letter-spacing:.04em;color:#0f7d91;background:#e8edf2;padding:.18rem .5rem;border-radius:99px;border:1px solid rgba(31,143,224,.3)}
  /* result: detached, cyan-green (--cta family), no connector */
  .fm-result{margin-top:1.1rem;border:2px solid #15b2d3;background:rgba(21,178,211,.1);box-shadow:0 0 14px rgba(21,178,211,.26)}
  .fm-result .fm-eyebrow{color:#0e7d96}
}

/* ===================== C1: SECTOR LANDING PAGES (/agente/<slug>) ===================== */
body.lp{overflow-x:hidden}
.lp-main{position:relative;z-index:3}
.lp-hero{max-width:calc(var(--maxw) + 2 * clamp(1rem,4vw,3rem));margin:0 auto;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2.4rem;
  padding:7.5rem clamp(1rem,4vw,3rem) 3.5rem}
.lp-hero-copy{max-width:560px}
.lp-eyebrow{font:700 .8rem/1.3 'Hanken Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.lp-h1{font:800 clamp(2.1rem,5.4vw,3.3rem)/1.05 'Bricolage Grotesque',sans-serif;color:#fff;letter-spacing:-.01em}
.lp-h1 .hl{color:var(--cyan)}
.lp-sub{margin-top:1.15rem;font-size:1.1rem;line-height:1.55;color:#b9c8e6;max-width:48ch}
.lp-trust{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.3rem;list-style:none}
.lp-trust li{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:#9fb3d6}
.lp-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(47,214,255,.8)}
.lp-hero .hero-cta{margin-top:2rem}
.lp-hero-visual{position:relative;width:100%;border-radius:24px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid rgba(150,190,245,.2);box-shadow:0 30px 80px rgba(3,8,20,.6),0 0 0 1px rgba(47,214,255,.12)}
.lp-hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.lp-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,9,18,.55))}
/* clickable demo trigger (the cropped scene expands into the demo background) */
button.lp-hero-visual{padding:0;margin:0;font:inherit;color:inherit;background:none;cursor:pointer;display:block;-webkit-appearance:none;appearance:none}
.lp-hero-visual img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lp-hero-visual:hover img,.lp-hero-visual:focus-visible img{transform:scale(1.04)}
.lp-demo-hint{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.55rem;
  color:#fff;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(5,9,18,.42),rgba(5,9,18,.12));
  opacity:0;transition:opacity .28s ease;pointer-events:none}
.lp-hero-visual:hover .lp-demo-hint,.lp-hero-visual:focus-visible .lp-demo-hint{opacity:1}
.lp-demo-ic{width:54px;height:54px;color:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.lp-demo-hint b{font:700 1.5rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
/* specialist zebra: centred horizontally in the empty left gutter and vertically with the
   hero block, flipped to look right, sized to the available gutter so it grows on bigger screens */
.lp-zebra{position:absolute;z-index:2;top:50%;
  left:calc(clamp(1rem,4vw,3rem) - (100vw - var(--maxw)) / 4);
  width:clamp(140px, calc((100vw - var(--maxw)) / 2 - 1rem), 300px);height:auto;
  transform:translate(-50%,-50%) scaleX(-1);pointer-events:none;
  filter:drop-shadow(0 0 13px var(--z-blue1)) drop-shadow(0 0 28px var(--z-blue2)) drop-shadow(0 16px 36px rgba(0,0,0,.5))}
@media(max-width:1440px){.lp-zebra{display:none}}

.lp-band{padding:clamp(3.2rem,7vw,5.5rem) clamp(1rem,4vw,3rem)}
.lp-band--light{background:#e8edf2;color:#0e1c27}
.lp-band--white{background:#fff;color:#0e1c27}
.lp-inner{max-width:var(--maxw);margin:0 auto}
.lp-inner.center{text-align:center;max-width:780px}
.lp-band--light .lp-eyebrow,.lp-band--white .lp-eyebrow{color:#0f7d91}
.lp-h2{font:800 clamp(1.6rem,3.6vw,2.3rem)/1.12 'Bricolage Grotesque',sans-serif;color:#0e1c27;letter-spacing:-.01em}
.lp-lead{margin-top:1rem;font-size:1.05rem;line-height:1.6;color:#41566a;max-width:62ch}
.lp-inner.center .lp-lead{margin-left:auto;margin-right:auto}

.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
.lp-card{background:#f4f7fa;border:1px solid rgba(14,28,39,.08);border-radius:18px;padding:1.5rem 1.4rem;text-align:left}
.lp-band--light .lp-card{background:#fff}
.lp-card-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
  background:rgba(15,125,145,.12);color:#0f7d91}
.lp-card-ic svg{width:22px;height:22px}
.lp-card h3{font:700 1.12rem/1.25 'Bricolage Grotesque',sans-serif;color:#0e1c27;margin-bottom:.4rem}
.lp-card p{font-size:.95rem;line-height:1.5;color:#52616c}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;counter-reset:step}
.lp-step{position:relative;padding-top:.4rem}
.lp-step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font:800 1rem/1 'Bricolage Grotesque',sans-serif;color:#04121b;background:linear-gradient(120deg,var(--cyan),#7fb4ff);margin-bottom:.9rem}
.lp-step h3{font:700 1.08rem/1.25 'Bricolage Grotesque',sans-serif;color:#0e1c27;margin-bottom:.35rem}
.lp-step p{font-size:.95rem;line-height:1.5;color:#52616c}

.lp-faq{margin-top:2.2rem;display:grid;gap:.7rem;max-width:820px}
.lp-faq details{border:1px solid rgba(14,28,39,.12);border-radius:14px;background:#fff;overflow:hidden}
.lp-band--white .lp-faq details{background:#f4f7fa}
.lp-faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;font:700 1.02rem/1.35 'Bricolage Grotesque',sans-serif;color:#0e1c27;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-weight:400;font-size:1.4rem;color:#0f7d91;transition:transform .2s}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq p{padding:0 1.2rem 1.15rem;font-size:.98rem;line-height:1.6;color:#41566a;margin:0}

.lp-cta-band{background:linear-gradient(135deg,#0a1730,#06122a);text-align:center;border-radius:0}
.lp-cta-band .lp-h2{color:#fff}
.lp-cta-band .lp-lead{color:#b9c8e6;margin:1rem auto 0}
.lp-cta-band .hero-cta{justify-content:center;margin:2rem auto 0;border:none;padding-top:0;max-width:none}
.lp-backlink{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.6rem;color:var(--cyan);text-decoration:none;font-weight:600;font-size:.95rem}
.lp-backlink:hover{text-decoration:underline}

@media(max-width:860px){
  .lp-hero{grid-template-columns:1fr;padding:6rem 1.1rem 2.6rem;gap:1.6rem}
  .lp-hero-visual{order:-1;aspect-ratio:16/10}
  .lp-cards,.lp-steps{grid-template-columns:1fr}
  .lp-hero .hero-cta,.lp-cta-band .hero-cta{flex-direction:column}
  .lp-hero .btn-acceso,.lp-hero .btn-how,.lp-cta-band .btn-acceso,.lp-cta-band .btn-how{text-align:center}
}
@media(min-width:861px) and (max-width:1040px){
  .lp-cards{grid-template-columns:repeat(3,1fr)}
}

/* brand logo (PNG) replacing text wordmark */
.wordmark{display:inline-block;width:200px;max-width:200px;height:23px;background:url(assets/logo-web.png) left center/contain no-repeat;text-indent:-9999px;white-space:nowrap;overflow:hidden}
.wordmark span{display:none}
.site-footer .wordmark{width:150px;height:17px}

/* Taller y reparaciones: sección no finalizada -> nodo informativo, no interactivo.
   !important para ganar a body.layout-orbital .zcard{pointer-events:auto}. NO tocar transform. */
.zcard[data-vertical="taller"]{cursor:default!important;pointer-events:none!important}
body.layout-orbital .zcard[data-vertical="taller"] .zcard-desc{opacity:1}

/* 2026-07-15 footer: una sola linea centrada, sin logo */
.site-footer .foot{justify-content:center;gap:1.2rem;text-align:center}
.foot-links{margin-left:0;justify-content:center}
.foot-slogan{color:#2fd6ff}