:root{
  --ink:#05060A;
  --text:#F4F5F7;
  --muted:#A2A9B8;
  --dim:#6F7788;
  --accent:#45E3C2;
  --accent-2:#7A6CFF;
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --edge:rgba(255,255,255,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.22,1.2,.32,1);
  --maxw:1200px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
:root:not([data-theme="light"]){ color-scheme:dark; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }
:root[data-theme="dark"]{ color-scheme:dark; }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 110px); }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:"Manrope","Helvetica Neue",Helvetica,sans-serif;
  font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
canvas{ display:block; }
::selection{ background:var(--accent); color:#04120F; }

/* luz líquida por trás do vidro */
.liquid{ position:fixed; inset:-20vh -10vw; z-index:0; pointer-events:none; filter:blur(50px); opacity:.7; will-change:auto; }
.liquid i{ position:absolute; display:block; border-radius:50%; }
.liquid i:nth-child(1){ width:52vw; height:52vw; left:-8vw; top:2vh; background:rgba(69,227,194,.16); animation:drift1 26s infinite alternate ease-in-out; }
.liquid i:nth-child(2){ width:46vw; height:46vw; right:-6vw; top:26vh; background:rgba(122,108,255,.17); animation:drift2 32s infinite alternate ease-in-out; }
.liquid i:nth-child(3){ width:40vw; height:40vw; left:30vw; bottom:-8vh; background:rgba(69,227,194,.09); animation:drift1 38s infinite alternate-reverse ease-in-out; }
@keyframes drift1{ to{ transform:translate3d(9vw,-7vh,0) scale(1.15); } }
@keyframes drift2{ to{ transform:translate3d(-11vw,9vh,0) scale(1.1); } }
.wrap{ position:relative; z-index:1; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- liquid glass ---------- */
.glass{
  position:relative; isolation:isolate; border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 42%, rgba(255,255,255,.055));
  backdrop-filter:blur(14px) saturate(170%); -webkit-backdrop-filter:blur(14px) saturate(170%);
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -18px 40px -30px rgba(255,255,255,.25), 0 30px 70px -34px rgba(0,0,0,.95);
  overflow:hidden;
}
.glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(420px circle at var(--mx,120%) var(--my,-20%), rgba(255,255,255,.12), transparent 60%);
  opacity:0; transition:opacity .6s var(--ease); }
.glass::after{ content:""; position:absolute; top:0; left:0; width:60%; height:100%; pointer-events:none; z-index:3;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  transform:translateX(-170%) skewX(-12deg); transition:transform 1.1s var(--ease); }
.glass:hover::before{ opacity:1; }
.glass:hover::after{ transform:translateX(320%) skewX(-12deg); }

/* ---------- nav ilha ---------- */
.nav{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 16px); left:50%; transform:translateX(-50%);
  z-index:50; width:calc(100% - 32px); max-width:940px; border-radius:100px; padding:9px 9px 9px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:max-width .7s var(--ease), padding .5s var(--ease), background .5s var(--ease); }
.nav.shrunk{ max-width:760px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em; font-size:17px; }
.brand i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); animation:blip 2.4s infinite; }
@keyframes blip{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.5); opacity:.4 } }
.nav nav{ display:flex; gap:26px; }
.nav nav a{ font-size:14px; color:var(--muted); position:relative; padding:4px 2px; transition:color .35s var(--ease); }
.nav nav a:hover{ color:var(--text); }
.nav nav a::after{ content:""; position:absolute; left:50%; bottom:-2px; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:0; transform:translate(-50%,4px); transition:.35s var(--ease); }
.nav nav a:hover::after{ opacity:1; transform:translate(-50%,0); }
@media (max-width:880px){ .nav nav{ display:none; } .nav{ padding-left:18px; } }

.pill{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 22px; border-radius:100px; cursor:pointer; font-size:14.5px; font-weight:600;
  letter-spacing:-.01em; border:1px solid var(--edge); background:var(--glass);
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -18px rgba(0,0,0,.9);
  transition:transform .45s var(--spring), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  overflow:hidden; }
.pill:hover{ background:var(--glass-2); border-color:rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -20px rgba(0,0,0,1); }
.pill:active{ transform:scale(.97); }
.pill:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pill.primary{ background:linear-gradient(180deg,#6BF0D6,#2CC7A9); color:#032019; border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 42px -18px rgba(69,227,194,.6); }
.pill.primary:hover{ background:linear-gradient(180deg,#7DF4DC,#35D5B6); }

/* ---------- hero ---------- */
.hero{ padding:150px 0 30px; }
@media (max-width:880px){ .hero{ padding-top:120px; } }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; }
@media (max-width:1000px){ .hero-grid{ grid-template-columns:1fr; gap:26px; } }
.tag{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:100px; font-size:12.5px;
  letter-spacing:.02em; color:var(--muted); background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.tag i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:blip 2s infinite; }
h1{ margin:24px 0 0; font-size:clamp(42px,7.4vw,78px); line-height:.99; letter-spacing:-.045em; font-weight:300; }
h1 b{ font-weight:600; background:linear-gradient(100deg,#FFFFFF,#9FF4E2 42%,#B9AEFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1 .line{ display:block; overflow:hidden; padding-bottom:.06em; }
h1 .line > span{ display:block; transform:translateY(106%); opacity:0; transition:transform 1.1s var(--ease), opacity 1.1s var(--ease); }
h1 .line:nth-child(2) > span{ transition-delay:.1s; }
.loaded h1 .line > span{ transform:none; opacity:1; }
.lede{ margin:24px 0 0; max-width:48ch; color:var(--muted); font-size:clamp(16px,2.1vw,19px); font-weight:300; line-height:1.6; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-meta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px 24px; font-size:13px; color:var(--dim); }
.hero-meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero-meta span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); }

/* globo */
.globe-stage{ position:relative; display:grid; place-items:center; }
.globe-wrap{ position:relative; width:min(100%,560px); aspect-ratio:1/1; will-change:transform; }
#globe{ width:100%; height:100%; cursor:grab; touch-action:pan-y; }
#globe.dragging{ cursor:grabbing; }
.hud{ position:absolute; left:2px; bottom:8px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; pointer-events:none; }
.chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:100px; font-size:12px; color:var(--muted);
  background:rgba(12,14,20,.5); border:1px solid var(--edge); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.chip b{ color:var(--text); font-weight:600; }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:blip 1.8s infinite; }
.chip.ghost{ opacity:0; transform:translateY(8px); transition:.7s var(--ease); }
.chip.ghost.show{ opacity:1; transform:none; }
.drag-hint{ position:absolute; top:10px; right:6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
@media (max-width:1000px){ .hud{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; margin-top:12px; } .drag-hint{ display:none; } }

/* ---------- secções ---------- */
section{ padding:clamp(80px,11vw,150px) 0; }
.sec-head{ max-width:760px; margin:0 auto 54px; text-align:center; }
.sec-tag{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
h2{ font-size:clamp(30px,5.2vw,56px); line-height:1.03; letter-spacing:-.04em; font-weight:300; margin:16px 0 0; }
h2 b{ font-weight:600; color:var(--accent); }
.sec-head p{ color:var(--muted); margin:18px auto 0; max-width:52ch; font-weight:300; }

.reveal{ opacity:0; transform:translateY(30px) scale(.985); }
.reveal.in{ opacity:1; transform:none; transition:opacity 1.1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }
.card{ padding:30px 28px 32px; transition:transform .6s var(--spring); }
.card:hover{ transform:translateY(-6px); }
.card .ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(69,227,194,.12);
  border:1px solid rgba(69,227,194,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.card .ico svg{ width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ margin:20px 0 10px; font-size:20px; font-weight:600; letter-spacing:-.02em; }
.card p{ margin:0; color:var(--muted); font-size:14.5px; font-weight:300; line-height:1.62; }
.card .go{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:13px; color:var(--dim); transition:.45s var(--ease); }
.card:hover .go{ color:var(--accent); gap:14px; }

/* marquee */
.marquee{ overflow:hidden; padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.mq{ display:flex; gap:46px; width:max-content; animation:slide 38s linear infinite; }
.marquee:hover .mq{ animation-play-state:paused; }
.mq span{ font-size:14px; color:var(--dim); letter-spacing:.05em; white-space:nowrap; font-weight:300; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* trabalho */
.work{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:760px){ .work{ grid-template-columns:1fr; } }
.wcard{ display:block; padding:28px; transition:transform .6s var(--spring); }
.wcard:hover{ transform:translateY(-6px); }
.wcard .thumb{ height:150px; border-radius:18px; background:
  radial-gradient(100px circle at 25% 30%, rgba(69,227,194,.25), transparent 60%),
  radial-gradient(120px circle at 80% 70%, rgba(122,108,255,.22), transparent 62%), rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; color:var(--dim); font-size:12.5px;
  transition:transform .8s var(--ease); }
.wcard:hover .thumb{ transform:scale(1.03); }
.wcard h3{ margin:20px 0 6px; font-size:21px; font-weight:600; letter-spacing:-.025em; transition:color .45s var(--ease); }
.wcard:hover h3{ color:var(--accent); }
.wcard p{ margin:0; color:var(--muted); font-size:14px; font-weight:300; }

/* processo */
.steps{ display:grid; gap:14px; }
.step{ display:grid; grid-template-columns:96px 1fr; gap:22px; padding:26px 28px; align-items:start; }
.step .k{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding-top:4px; }
.step h3{ margin:0 0 8px; font-size:20px; font-weight:600; letter-spacing:-.02em; }
.step p{ margin:0; color:var(--muted); font-size:15px; font-weight:300; max-width:64ch; }
@media (max-width:640px){ .step{ grid-template-columns:1fr; gap:8px; } }

/* ---------- contacto ---------- */
.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:flex-start; }
@media (max-width:980px){ .contact{ grid-template-columns:1fr; } }
.form-panel{ padding:34px 32px 32px; }
.form-panel h3{ margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:-.03em; }
.form-panel > p{ margin:0 0 24px; color:var(--muted); font-size:14.5px; font-weight:300; }
.field{ position:relative; margin-bottom:14px; }
.field label{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.045);
  border:1px solid var(--edge); color:var(--text); font-size:15px; font-weight:300;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); outline:none; }
.field textarea{ min-height:112px; resize:vertical; }
.field select{ appearance:none; -webkit-appearance:none; }
.field input::placeholder,.field textarea::placeholder{ color:#5C6474; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(69,227,194,.6); background:rgba(69,227,194,.06);
  box-shadow:0 0 0 4px rgba(69,227,194,.12), inset 0 1px 0 rgba(255,255,255,.2); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.form-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px; }
.sent{ font-size:13px; color:var(--accent); opacity:0; transform:translateY(6px); transition:.6s var(--ease); }
.sent.show{ opacity:1; transform:none; }

.map-panel{ padding:26px 26px 22px; display:flex; flex-direction:column; gap:14px; }
.map-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.map-head strong{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.map-head span{ font-size:12px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; }
.map-box{ position:relative; flex:1; min-height:330px; }
#ptmap{ width:100%; height:100%; position:absolute; inset:0; }
.zones{ display:flex; flex-wrap:wrap; gap:8px; }
.zone{ padding:8px 14px; border-radius:100px; font-size:13px; color:var(--muted); cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--edge);
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--spring); }
.zone:hover{ color:var(--text); background:rgba(255,255,255,.09); transform:translateY(-2px); }
.zone.on{ color:#03211B; background:linear-gradient(180deg,#6BF0D6,#2CC7A9); border-color:rgba(255,255,255,.4); font-weight:600; }
.map-foot{ font-size:12.5px; color:var(--dim); }

footer{ padding:40px 0 46px; }
.foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.foot a:hover{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  h1 .line > span{ transform:none; opacity:1; }
}

/* ================= cenas com scroll (vídeo/imagem) ================= */
.scene{ position:relative; }
.scene.s1{ height:300vh; } .scene.s2{ height:320vh; } .scene.s3{ height:170vh; }
.scene .sticky{ position:sticky; top:0; height:100svh; min-height:560px; display:grid; place-items:center; overflow:hidden; }
.media{ position:relative; overflow:hidden; background:#04070E; }
.media video,.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(var(--acc),.28), rgba(var(--acc2),.22)); mix-blend-mode:soft-light; }
.ph{ position:absolute; inset:0; display:grid; place-content:center; gap:8px; text-align:center;
  background-image:radial-gradient(rgba(var(--dot),.35) 1px, transparent 1px); background-size:14px 14px;
  background-color:rgba(10,18,34,.92); color:var(--muted); }
:root[data-theme="light"] .ph{ background-color:#DCE6F5; }
.ph b{ display:block; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.ph small{ font-size:11.5px; color:var(--dim); max-width:22ch; margin:0 auto; line-height:1.5; }
.ph::before{ content:""; position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg, transparent, rgba(var(--acc),.7), transparent); animation:scan 3.4s linear infinite; }
@keyframes scan{ 0%{ transform:translateY(0) } 100%{ transform:translateY(100cqh) } }

/* telemóvel */
.phone{ position:relative; width:min(290px,64vw); aspect-ratio:9/19.3; border-radius:46px; padding:9px;
  background:linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.06) 40%, rgba(255,255,255,.22));
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.5);
  transform-style:preserve-3d; will-change:transform; }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden; container-type:size; }
.phone .notch{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:78px; height:20px; border-radius:20px;
  background:rgba(0,0,0,.85); z-index:4; }
.scene-stage{ position:relative; display:grid; place-items:center; perspective:1400px; }

/* moldura que abre */
.frame{ width:var(--w,46vmin); height:var(--h,58vmin); border-radius:var(--r,32px); container-type:size;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9); will-change:width,height,border-radius; }

/* legendas das cenas */
.scene-copy{ position:absolute; inset:auto 0 9vh; text-align:center; pointer-events:none; padding:0 22px; z-index:5; }
.scene-copy p{ margin:0; position:absolute; left:0; right:0; padding:0 22px;
  font-size:clamp(22px,4.2vw,44px); font-weight:300; letter-spacing:-.035em; line-height:1.1;
  opacity:0; transform:translateY(18px); }
.scene-copy p b{ font-weight:600; color:var(--accent); }
.scene-copy .sub{ font-size:clamp(13px,1.7vw,16px); color:var(--muted); font-weight:300; letter-spacing:0; }
.scene-tag{ position:absolute; top:calc(env(safe-area-inset-top,0px) + 92px); left:0; right:0; text-align:center;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); z-index:5; }

/* tira de tecnologia */
.strip{ display:flex; gap:16px; width:max-content; will-change:transform; }
.tile{ width:min(38vw,430px); aspect-ratio:16/10; border-radius:24px; container-type:size; }
.tile.tall{ aspect-ratio:3/4; width:min(26vw,300px); }
@media (max-width:760px){ .tile{ width:74vw; } .tile.tall{ width:52vw; } }
.wcard .thumb{ overflow:hidden; position:relative; }
.wcard .thumb .inner{ position:absolute; inset:-14% 0; will-change:transform; }


.screen.shop{ background:#F7F9FC; }
.shop-inner{ position:absolute; top:0; left:0; right:0; will-change:transform; color:#0B1526;
  font-size:11px; line-height:1.45; padding-bottom:26px; }
.shop-bar{ position:absolute; top:0; left:0; right:0; height:52px; z-index:6; display:flex; align-items:flex-end;
  justify-content:space-between; padding:0 14px 8px; background:rgba(247,249,252,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(9,40,90,.08); }
.shop-bar .nm{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:#0B1526; }
.shop-bar .cart{ position:relative; width:22px; height:22px; }
.shop-bar .cart svg{ width:16px; height:16px; stroke:#0B1526; fill:none; stroke-width:1.6; }
.shop-bar .badge{ position:absolute; top:-4px; right:-5px; min-width:14px; height:14px; border-radius:8px;
  background:rgb(var(--acc)); color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center;
  transform:scale(0); transition:transform .4s var(--spring); }
.shop-bar .badge.on{ transform:scale(1); }
.shop-hero{ margin:52px 10px 0; border-radius:16px; height:190px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#12335E,#0B1526 60%,#123E74); display:grid; place-items:center; }
.shop-hero svg{ width:96px; height:96px; stroke:rgba(255,255,255,.85); fill:none; stroke-width:1.2; }
.shop-hero .cap{ position:absolute; left:12px; bottom:10px; color:#fff; }
.shop-hero .cap b{ display:block; font-size:13px; font-weight:700; letter-spacing:-.01em; }
.shop-hero .cap span{ font-size:9.5px; opacity:.75; letter-spacing:.14em; text-transform:uppercase; }
.shop-sec{ display:flex; justify-content:space-between; align-items:baseline; margin:16px 12px 8px; }
.shop-sec b{ font-size:12px; } .shop-sec span{ font-size:9px; color:#6C7C93; letter-spacing:.1em; text-transform:uppercase; }
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 10px; }
.pcard{ border-radius:13px; overflow:hidden; background:#fff; border:1px solid rgba(9,40,90,.08); }
.pcard .im{ height:82px; display:grid; place-items:center; background:linear-gradient(160deg,#E7EEF8,#D6E2F2); }
.pcard.alt .im{ background:linear-gradient(160deg,#EDE7F6,#DCE6F8); }
.pcard svg{ width:38px; height:38px; stroke:#28446E; fill:none; stroke-width:1.3; }
.pcard .tx{ padding:7px 8px 9px; }
.pcard .tx b{ display:block; font-size:9.5px; font-weight:600; }
.pcard .tx span{ font-size:9.5px; color:rgb(var(--acc)); font-weight:700; }
.shop-cta{ margin:14px 10px 0; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff;
  font-size:11px; font-weight:700; background:linear-gradient(180deg,rgb(var(--acc)),rgb(var(--acc2)));
  box-shadow:0 10px 22px -12px rgba(var(--acc),.9); }
.shop-note{ margin:10px 12px 0; font-size:9px; color:#6C7C93; }
.tapdot{ position:absolute; width:26px; height:26px; border-radius:50%; z-index:7; pointer-events:none;
  border:1.5px solid rgba(var(--acc),.9); background:rgba(var(--acc),.18); opacity:0; }

/* ================= marca Webmari + temas ================= */
:root,:root[data-theme="dark"]{
  --ink:#060B16; --text:#EDF2FA; --muted:#9BAAC2; --dim:#6B7B94;
  --accent:#17A0E8; --accent-2:#2F7DFB; --deep:#0B4FC0;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085); --edge:rgba(255,255,255,.12);
  --dot:186,205,230; --acc:23,160,232; --acc2:47,125,251;
  --h1a:#EAF4FF; --h1b:#3FB4F5; --h1c:#2F7DFB;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#EFF4FB; --text:#081426; --muted:#4B5B74; --dim:#74849B;
  --accent:#0B74D1; --accent-2:#0A4FBF; --deep:#083A90;
  --glass:rgba(255,255,255,.6); --glass-2:rgba(255,255,255,.8); --edge:rgba(9,40,90,.12);
  --dot:52,84,134; --acc:11,116,209; --acc2:10,79,191;
  --h1a:#0B1A2E; --h1b:#0B74D1; --h1c:#0A4FBF;
  color-scheme:light;
}
body{ transition:background .6s var(--ease), color .6s var(--ease); }
::selection{ background:var(--accent); color:#fff; }
.liquid i:nth-child(1){ background:rgba(var(--acc),.16); }
.liquid i:nth-child(2){ background:rgba(var(--acc2),.17); }
.liquid i:nth-child(3){ background:rgba(var(--acc),.10); }
h1 b{ background:linear-gradient(100deg,var(--h1a),var(--h1b) 48%,var(--h1c)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 b{ color:var(--accent); }
.brand img{ height:24px; width:auto; }
.brand .logo-light{ display:none; }
:root[data-theme="light"] .brand .logo-dark{ display:none; }
:root[data-theme="light"] .brand .logo-light{ display:block; }
.tt{ min-height:44px; width:44px; padding:0; border-radius:50%; }
.tt svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tt .sun{ display:none; }
:root[data-theme="light"] .tt .sun{ display:block; }
:root[data-theme="light"] .tt .moon{ display:none; }
.pill.primary{ background:linear-gradient(180deg,rgba(var(--acc),1),rgba(var(--acc2),1)); color:#fff;
  border-color:rgba(255,255,255,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 16px 42px -18px rgba(var(--acc),.7); }
.pill.primary:hover{ background:linear-gradient(180deg,rgba(var(--acc),1),rgba(var(--acc2),1)); filter:brightness(1.1); }
.card .ico{ background:rgba(var(--acc),.13); border-color:rgba(var(--acc),.3); }
.zone.on{ background:linear-gradient(180deg,rgba(var(--acc),1),rgba(var(--acc2),1)); color:#fff; border-color:rgba(255,255,255,.34); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(var(--acc),.65); background:rgba(var(--acc),.08); box-shadow:0 0 0 4px rgba(var(--acc),.14), inset 0 1px 0 rgba(255,255,255,.2); }
.wcard .thumb{ background:
  radial-gradient(110px circle at 25% 30%, rgba(var(--acc),.3), transparent 62%),
  radial-gradient(130px circle at 80% 70%, rgba(var(--acc2),.26), transparent 64%), rgba(127,157,196,.08); }
.sent{ color:var(--accent); }

/* ---- tema claro ---- */
:root[data-theme="light"] .glass{
  background:linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.55) 45%, rgba(255,255,255,.78));
  border-color:rgba(9,40,90,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 26px 60px -36px rgba(9,40,90,.5); }
:root[data-theme="light"] .glass::before{ background:radial-gradient(420px circle at var(--mx,120%) var(--my,-20%), rgba(255,255,255,.85), transparent 60%); }
:root[data-theme="light"] .glass::after{ background:linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent); }
:root[data-theme="light"] .chip{ background:rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
:root[data-theme="light"] .pill{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -18px rgba(9,40,90,.55); }
:root[data-theme="light"] .field input,:root[data-theme="light"] .field select,:root[data-theme="light"] .field textarea{ background:rgba(255,255,255,.75); }
:root[data-theme="light"] .field input::placeholder,:root[data-theme="light"] .field textarea::placeholder{ color:#8C99AC; }
:root[data-theme="light"] .zone{ background:rgba(255,255,255,.65); }
:root[data-theme="light"] .liquid{ opacity:.55; }