/* MP site v4 - tokens, materiais, reset e classes globais */
/* letras: Schibsted Grotesk (titulos) + Public Sans (texto). Ficheiros proprios, latin + latin-ext, variaveis.
   Instrument Serif fica so para os sites de exemplo dentro do ecra (nao e pre-carregada). */
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/schibsted-grotesk-var.woff2?v=612b3433') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('fonts/public-sans-var.woff2?v=0de0c985') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
/* Fraunces: letra de destaque (so momentos grandes: texto de abertura, palavra-chave dos titulos, precos, fecho).
   Corte proprio: peso 400 a 600, tamanho optico 48 a 144, latin + latin-ext. Nao e pre-carregada. */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin.woff2?v=5834235f') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-ext.woff2?v=7c0f31bb') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif.woff2?v=37ddf465') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-italic.woff2?v=24e6c99c') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* paleta "Atlantico e Ouro" (marca/final/palette.json). Sem laranja. */
  --paper:#F7F3EA;--paper-2:#EFE9DC;--paper-2a:#EFE9DC;--surface:#FFFFFF;
  --ink:#121826;--mut:#5A6272;--line:#E4DDCF;
  --brand:#0F1E3D;--brand-hover:#1B2E58;--noite:#0A1428;--noite-card:#14213D;--nevoa:#A9B1C1;
  --ouro:#A07E42;--ouro-noite:#B8955A;--champ:#D6BC86;--champ-hover:#E2CC9C;--bronze:#7D5F2A;--veu:#F1E9D8;
  /* nomes antigos do acento: linhas/pontos = Ouro MP, texto dourado em claro = Bronze, fundo de nota = Veu de Ouro */
  --acc:var(--ouro);--acc-hover:var(--brand-hover);--acc-press:var(--noite);--acc-ink:var(--bronze);--acc-tint:var(--veu);
  --basalto:var(--noite);
  --alu-1:#F5F0E8;--alu-2:#E2D9CC;--alu-3:#CFC3B2;
  /* nomes antigos (compatibilidade com as partes) */
  --bg:var(--paper);--bg2:var(--paper-2);--card:var(--surface);--dark:var(--basalto);
  --r-sm:6px;--r-md:12px;--r-lg:28px;--r-pill:999px;
  /* escala de texto: meta 13, interface 15, corpo 17, lede 19; titulos h1 64 / h2 48 / h3 24 (no maximo) */
  --fs-meta:13px;--fs-ui:15px;--fs-body:17px;--fs-lede:19px;
  /* --f-head: titulos e numeros grandes; --f-sans: texto corrido, botoes, etiquetas */
  --f-head:'Schibsted Grotesk','Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* so para os sites de exemplo dentro do ecra */
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --wrap:1180px;--gutter:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sh-dev:0 1px 0 #fff inset,0 30px 60px -20px rgba(18,24,38,.18),0 8px 16px -8px rgba(18,24,38,.12);
}
@media(min-width:640px){:root{--gutter:24px}}
@media(min-width:1024px){:root{--gutter:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;position:relative;isolation:isolate}
/* grao de papel: ruido estatico a 3%, por baixo do conteudo, nunca animado */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
ul,ol{margin:0;padding:0}
p{margin:0 0 1em}
p,li,summary,figcaption{text-wrap:pretty}
.lede,.hero-sub,.pl-tag,.ex-lede,.passos-lede,.pl-lede,.custos__answer,.fecho-faq__lede,.fecho-cta p{text-wrap:balance}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--f-head);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.6rem,4.4vw,4rem);letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 16px}
h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.015em;line-height:1.2}
h4{font-size:1.05rem;letter-spacing:-.005em}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--mut);max-width:34em}
small,.small{font-size:.875rem}
.mut{color:var(--mut)}

/* palavra de destaque num titulo: Fraunces direita (sem italico), um pouco mais leve, na cor bronze */
.serif,h1 em,h2 em,h3 em{font-family:var(--f-display);font-weight:500;font-style:normal;font-size:1.04em;letter-spacing:-.015em;line-height:inherit;font-optical-sizing:auto;color:var(--acc-ink)}
/* numeros alinhados em coluna (telefone, custos, etapas, notas) */
.tnum,.ex-contacts a,.passos-num,.proof,.custos-item li,.pl-feats,.rodape{font-variant-numeric:tabular-nums}
.sec-dark .serif,.sec-dark h2 em{color:var(--champ)}

/* monograma MP (simbolo #mp-mark, definido uma vez em parts/_sprite.svg) */
.mp-mark{display:block;flex:none;width:36px;height:36px}

/* layout */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(64px,10vw,128px)}
.sec-alt{background:var(--paper-2a)}
/* duas seccoes seguidas com o mesmo fundo: metade do espaco entre elas */
.sec:not(.sec-alt)+.sec:not(.sec-alt){padding-top:clamp(40px,5vw,64px)}
.sec-dark{background:var(--noite);color:var(--paper)}
.grid{display:grid;gap:clamp(16px,2.4vw,32px)}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}

.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:0;text-transform:none;color:var(--acc-ink)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ouro);flex:none}
.sec-alt .eyebrow::before{display:none}
.sec-dark .eyebrow{color:var(--champ)}
.sec-dark .eyebrow::before{background:var(--ouro-noite)}

/* botoes: sobem 1px no hover, seta avanca 3px, encolhem a .98 ao carregar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 26px;font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1;text-decoration:none;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn .arr{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-acc{background:var(--brand);color:var(--paper);border-radius:var(--r-pill);box-shadow:0 6px 14px -8px rgba(15,30,61,.55)}
.sec-dark .btn-acc{background:var(--champ);color:var(--noite)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink);border-radius:var(--r-pill)}
.btn-dark{background:var(--ink);color:var(--paper);border-radius:var(--r-pill)}
@media(hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn:hover .arr{transform:translateX(3px)}
  .btn-acc:hover{background:var(--brand-hover)}
  .sec-dark .btn-acc:hover{background:var(--champ-hover)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .btn-dark:hover{background:#000}
}
.btn:active{transform:scale(.98)}
.sec-dark .btn-line{color:var(--paper);border-color:rgba(247,243,234,.45)}

/* foco visivel */
:focus{outline:none}
:focus-visible{outline:3px solid var(--acc-ink);outline-offset:3px;border-radius:4px}
.sec-dark :focus-visible{outline-color:var(--champ)}

/* acessibilidade */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:1000;padding:12px 20px;background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none;border-radius:var(--r-sm)}
.skip-link:focus{top:12px}

/* seletor de idioma */
[data-lang-toggle]{display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:44px;padding:0 10px;background:transparent;border:0;cursor:pointer;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--mut)}
[data-lang-toggle] [data-l]{padding:2px 4px}
[data-lang-toggle] [data-l][aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--acc)}
[data-lang-toggle] .sep{opacity:.4}

/* revelar: sobe 14px e aparece, 60ms entre irmaos (um so IntersectionObserver no core.js) */
.js.ready .rv:not(.in){opacity:0;transform:translateY(14px)}
.rv{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--rv-i,0) * 60ms)}

/* paginas legais (privacidade) */
.legal-top{border-bottom:1px solid var(--line)}
.legal-top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:12px}
.legal-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em;font-size:1.1rem;text-decoration:none;min-height:44px}
.legal-lg{display:block;width:auto;height:38px;aspect-ratio:520/216;--mk-l:var(--brand);--mk-a:var(--ouro)}
.legal{padding-block:clamp(48px,8vw,96px)}
.legal .wrap{max-width:calc(760px + var(--gutter)*2)}
.legal h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:.4em}
.legal h2{font-size:1.4rem;letter-spacing:-.02em;margin:2em 0 .5em}
.legal ul{padding-left:1.2em;margin:0 0 1em}
.legal li{margin-bottom:.4em}
.legal-foot{border-top:1px solid var(--line);padding-block:32px;font-size:.9rem;color:var(--mut)}
.legal-foot a{display:inline-flex;align-items:center;min-height:44px}

/* movimento reduzido: um interruptor global. Nada se mexe; tudo fica no estado final. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js.ready .rv:not(.in){opacity:1;transform:none}
}

/* == 01-hero.css == */
:root{--nav-h:64px;--stage:#100D0B;--st-ink:#F6F0E8;--st-mut:rgba(246,240,232,.62);--st-dim:rgba(255,245,235,.55)}
@media(max-width:899px){:root{--nav-h:56px}}

/* ===== NAV: transparente sobre o palco escuro; papel solido quando chega a parte clara. Sem backdrop-filter. ===== */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(247,243,234,0);border-bottom:1px solid transparent;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.nav.is-solid{background:rgba(247,243,234,.96);border-bottom-color:var(--line)}
.nav.on-dark.is-solid{background:rgba(16,13,11,.86);border-bottom-color:rgba(255,255,255,.06)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%}
.nav__logo{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;min-height:44px;flex:none;transition:color .25s}
/* logotipo principal curto (simbolo + filete + M.P); nunca roda. Claro: Atlantico e Ouro; sobre o palco: Champanhe e Ouro Noite */
.nav__mark{width:auto;height:44px;aspect-ratio:520/216;--mk-l:var(--brand);--mk-a:var(--ouro)}
@media(max-width:899px){.nav__mark{height:38px}}
.nav.on-dark .nav__mark{--mk-l:var(--champ);--mk-a:var(--ouro-noite)}
.nav__name{font:600 15px/1 var(--f-sans);letter-spacing:-.02em;display:none}
.nav__links{display:none}
.nav__links a,.nav__panel a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.nav__links a:hover,.nav__panel a:hover{color:var(--acc-ink)}
.nav__right{display:flex;align-items:center;gap:6px;position:relative}
.nav__lang{min-height:44px;min-width:44px;padding:0 10px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);font:600 13px/1 var(--f-sans);letter-spacing:.04em;cursor:pointer}
.nav__lang:hover{border-color:var(--ink)}
/* "Contacto": link de texto; depois dos planos passa a pilula de WhatsApp (.is-wa) */
.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-pill);color:var(--ink);font:600 14.5px/1 var(--f-sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),padding .25s var(--ease),box-shadow .25s var(--ease)}
.nav__cta-c{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(26,23,20,.3)}
.nav__cta:hover .nav__cta-c{text-decoration-color:var(--acc)}
.nav__cta-w{display:none;align-items:center;gap:7px}
.nav__cta-w svg{width:17px;height:17px}
.nav__cta.is-wa{padding:0 16px;background:var(--brand);color:var(--paper);box-shadow:0 6px 14px -8px rgba(15,30,61,.55)}
.nav__cta.is-wa .nav__cta-c{display:none}.nav__cta.is-wa .nav__cta-w{display:inline-flex}
@media(hover:hover){.nav__cta.is-wa:hover{background:var(--brand-hover)}}
.nav__more summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:var(--r-pill)}
.nav__more summary::-webkit-details-marker{display:none}
.nav__burger,.nav__burger::before,.nav__burger::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);content:"";position:relative;transition:transform .3s var(--ease),opacity .2s,background-color .25s}
.nav__burger::before{position:absolute;top:-6px}.nav__burger::after{position:absolute;top:6px}
.nav__more[open] .nav__burger{background:transparent!important}
.nav__more[open] .nav__burger::before{transform:translateY(6px) rotate(45deg)}
.nav__more[open] .nav__burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav__panel{position:absolute;right:0;top:calc(100% + 10px);width:min(260px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;box-shadow:0 18px 40px -18px rgba(42,36,32,.25);animation:navIn .25s var(--ease) both}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav__panel a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:8px}
.nav__panel a:hover{background:var(--paper)}
.nav :focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
/* sobre o palco: texto claro */
.nav.on-dark .nav__logo,.nav.on-dark .nav__links a,.nav.on-dark .nav__lang,.nav.on-dark .nav__cta:not(.is-wa){color:rgba(255,245,235,.86)}
.nav.on-dark .nav__links a:hover{color:#fff}
.nav.on-dark .nav__lang{border-color:rgba(255,245,235,.2)}
.nav.on-dark .nav__lang:hover{border-color:rgba(255,245,235,.6);background:rgba(255,255,255,.05)}
.nav.on-dark [data-lang-toggle] [data-l][aria-current="true"]{color:#fff}
.nav.on-dark .nav__cta-c{text-decoration-color:rgba(255,245,235,.35)}
.nav.on-dark .nav__burger,.nav.on-dark .nav__burger::before,.nav.on-dark .nav__burger::after{background:#F6F0E8}
.nav.on-dark :focus-visible{outline-color:#F6F0E8}
@media (max-width:359px){.nav__cta:not(.is-wa){display:none}}
@media (min-width:640px){.nav__name{display:inline}}
@media (min-width:1080px){.nav__links{display:flex;gap:26px}.nav__more{display:none}}

/* ===== ABERTURA: o palco ===== */
.hero{position:relative;z-index:3;isolation:isolate;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 16px) 0 64px;background:var(--stage);color:var(--st-ink);overflow-x:clip}
/* corte para a parte clara: o papel sobe com cantos arredondados (o monitor fica por cima, a cavalo) */
.hero::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:-1px;height:25px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,var(--paper);border-radius:24px 24px 0 0;pointer-events:none}
@media(min-width:900px){.hero::after{height:33px;border-radius:32px 32px 0 0}}
/* cor da luz de cada nicho (r g b) */
.st__glows [data-n="restaurante"],.sp[data-n="restaurante"],.sm-rim [data-n="restaurante"]{--glow:168 60 40}
.st__glows [data-n="barbearia"],.sp[data-n="barbearia"],.sm-rim [data-n="barbearia"]{--glow:72 112 170}
.st__glows [data-n="cafe"],.sp[data-n="cafe"],.sm-rim [data-n="cafe"]{--glow:196 128 44}
.st__glows [data-n="loja"],.sp[data-n="loja"],.sm-rim [data-n="loja"]{--glow:116 138 92}
.st__glows [data-n="negocio"],.sp[data-n="negocio"],.sm-rim [data-n="negocio"]{--glow:184 149 90}
/* base: degrade vertical (mais quente e claro em cima, escuro nas margens e em baixo) */
.st{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;--gy:62%;--ty:12%;
  background:radial-gradient(ellipse 120% 70% at 50% 0%,rgba(42,32,26,.9),transparent 70%),linear-gradient(180deg,#1A1411 0%,var(--stage) 48%,#0A0807 100%)}
/* luz do nicho: 5 camadas pre-compostas, so a opacidade muda (compositor) */
.st__glows{position:absolute;inset:0}
.st__glows i{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.25,.1,.25,1);will-change:opacity;
  background:radial-gradient(ellipse 80% 30% at 50% var(--ty),rgb(var(--glow) / var(--ta,.48)),transparent 72%),radial-gradient(ellipse 70% 34% at 50% var(--gy),rgb(var(--glow) / .42),transparent 72%),radial-gradient(ellipse 26% 16% at 50% var(--gy),rgba(255,236,220,.08),transparent 70%)}
.st__glows i.is-on{opacity:1}
/* grao (claro, estatico) */
.st::before{content:"";position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
/* palavra gigante atras do aparelho (decorativa) */
.st__words{position:absolute;left:0;right:0;top:var(--wy,52%);display:grid;justify-items:center;transform:translateY(-50%)}
.st__words{--wy:12%}
.st__words span{grid-area:1/1;font:italic 400 clamp(110px,34vw,220px)/.9 var(--f-serif);letter-spacing:-.02em;color:rgba(255,245,235,.07);white-space:nowrap;opacity:0;transition:opacity .25s var(--ease)}
.st__words span.is-on{opacity:1;transition:opacity .5s var(--ease) .22s}

.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-top{display:flex;flex-direction:column;align-items:center;order:0;width:100%}

/* rotulo mono: EXEMPLO · RESTAURANTE / CLIENTE REAL · BARBEARIA */
.hero-lbl{position:relative;width:100%;height:20px;margin:0 0 12px;font:500 13px/20px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--st-dim)}
.hero-lbl>span{position:absolute;left:50%;top:0;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;opacity:0;transform:translate(-50%,-4px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.hero-lbl>span.is-on{opacity:1;transform:translate(-50%,0);transition:opacity .3s var(--ease) .18s,transform .35s var(--ease) .18s}
.hero-lbl__dot{width:6px;height:6px;border-radius:50%;background:#3FB66B;box-shadow:0 0 0 3px rgba(63,182,107,.18)}
@media(min-width:900px){.hero-lbl{font-size:12px;margin-bottom:16px}}

/* H1: linha fixa + palavra que muda com o aparelho */
.hero-title{margin:0;font:600 clamp(2.1rem,8.6vw,2.6rem)/1.04 var(--f-sans);letter-spacing:-.035em;color:var(--st-ink);text-wrap:balance}
.ht{display:flex;flex-direction:column;align-items:center}
.ht1--d{display:none}
.hero-title .w{display:inline-block;white-space:pre}
.rot{display:grid;justify-items:center;overflow:hidden;padding:0 .2em .16em;margin:0 -.2em -.16em}
.rot__w{grid-area:1/1;font:italic 400 1.1em/1.05 var(--f-serif);letter-spacing:-.01em;white-space:nowrap;opacity:0;transform:translateY(-.8em);transition:opacity .16s var(--ease),transform .4s var(--ease)}
.rot__w.pre{transform:translateY(.8em);transition:none}
.rot__w.is-on{transition:opacity .4s var(--ease) .12s,transform .5s var(--ease) .12s}
.rot__w.is-on{opacity:1;transform:none}
.hero-sub{display:none;margin:0;color:var(--st-mut)}
html[lang="en"] .ht1--m{font-size:.86em}

/* separadores de nicho: texto simples, sublinhado dourado que enche com o tempo de cada exemplo */
.hero-chips{order:3;width:calc(100% + 2 * var(--gutter));margin:2px calc(-1 * var(--gutter)) 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.hero-chips::-webkit-scrollbar{display:none}
.chips{display:flex;gap:16px;width:max-content;margin:0 auto;padding:0 var(--gutter)}
.chip__d{display:none}
@media(max-width:359px){.chips{gap:12px}.chip{font-size:13.5px!important}}
.chip{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 1px;background:none;border:0;color:rgba(246,240,232,.58);font:500 14.5px/1 var(--f-sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:color .3s var(--ease)}
.chip:hover{color:rgba(246,240,232,.9)}
.chip.is-on{color:var(--st-ink)}
.chip::before{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:rgba(255,245,235,.12);opacity:0;transition:opacity .3s}
.chip.is-on::before{opacity:1}
.chip__t{position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--ouro-noite);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease);pointer-events:none}
.chip.is-on .chip__t{transform:scaleX(1)}
.chips.is-run .chip.is-on .chip__t{animation:chipT var(--cyc,5.2s) linear both}
@keyframes chipT{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.chip:focus-visible,.hero a:focus-visible,.hero-pause:focus-visible{outline:2px solid #F6F0E8;outline-offset:3px;border-radius:4px}

/* links reais da barbearia (so neste nicho; o espaco fica sempre reservado) */
.hero-pjb{order:4;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;min-height:40px;margin:2px 0 0;font-size:13.5px;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.hero[data-n="barbearia"] .hero-pjb{visibility:visible;opacity:1;transition:opacity .45s var(--ease) .15s,visibility 0s}
.hero-pjb a{display:inline-flex;align-items:center;gap:4px;min-height:40px;color:rgba(246,240,232,.82);text-decoration:underline;text-decoration-color:rgba(246,240,232,.28);text-underline-offset:4px}
.hero-pjb a:hover{color:#fff;text-decoration-color:var(--ouro-noite)}
.hero-pjb svg{width:13px;height:13px}

/* pontos + pausa (telemovel): uma linha so, logo por baixo dos aparelhos */
.hero-ctl{order:2;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:26px 0 0}
.hero-dots{display:flex;gap:6px;justify-content:center}
.hero-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,245,235,.26);transition:width .35s var(--ease),background-color .35s var(--ease)}
.hero-dots i.is-on{width:18px;background:var(--st-ink)}

/* pausa (WCAG 2.2.2) */
.hero-pause{position:relative;z-index:4;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:50%;border:1px solid rgba(255,245,235,.35);background:rgba(255,255,255,.04);color:rgba(246,240,232,.8);cursor:pointer;transition:border-color .2s,color .2s}
.hero-pause::after{content:"";position:absolute;inset:-6px}
.hero-pause:hover{border-color:rgba(255,245,235,.5);color:#fff}
.hero-pause svg{width:12px;height:12px}
.hero-pause .ic-pl,.hero-pause[aria-pressed="true"] .ic-pa{display:none}
.hero-pause[aria-pressed="true"] .ic-pl{display:block}

/* ===== APARELHOS ===== */
.hero-dev{order:1;position:relative;width:100%}
.sm-wrap{display:none}

/* --- telemovel: pilha de 5, so 3 a vista --- */
.sp-stack{--sp-w:clamp(206px,min(64vw,calc((100svh - 290px) * .47)),300px);position:relative;width:100%;height:calc(var(--sp-w) * 2.11 + 6px);margin:14px auto 0;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sp{position:absolute;left:50%;top:0;width:var(--sp-w);margin-left:calc(var(--sp-w) / -2);container:ph/inline-size;transform-origin:50% 92%;transition:transform .55s cubic-bezier(.32,.72,0,1),opacity .55s cubic-bezier(.32,.72,0,1),visibility 0s;cursor:pointer;will-change:transform}
/* luz do nicho a sair por baixo e pelos lados do telemovel da frente (so opacidade) */
.sp::before{content:"";position:absolute;z-index:-1;left:-46%;right:-46%;top:22%;bottom:-20%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--glow) / .62) 30%,rgb(var(--glow) / .22) 66%,transparent);opacity:0;transition:opacity .6s cubic-bezier(.25,.1,.25,1);pointer-events:none}
.sp[data-pos="0"]::before{opacity:1}
.sp[data-pos="0"]{z-index:3;transform:translateX(var(--drag,0px));cursor:grab}
.sp[data-pos="-1"]{z-index:2;transform:translateX(-37%) rotate(-7deg) scale(.84)}
.sp[data-pos="1"]{z-index:2;transform:translateX(37%) rotate(7deg) scale(.84)}
.sp[data-pos="-2"]{z-index:1;transform:translateX(-78%) rotate(-12deg) scale(.7);opacity:0}
.sp[data-pos="2"]{z-index:1;transform:translateX(78%) rotate(12deg) scale(.7);opacity:0}
/* fora de cena: deixam de ser pintados depois da transicao */
.sp[data-pos="-2"],.sp[data-pos="2"]{visibility:hidden;transition:transform .55s cubic-bezier(.32,.72,0,1),opacity .55s cubic-bezier(.32,.72,0,1),visibility 0s .55s}
.sp.no-tr,.sp-stack.is-drag .sp[data-pos="0"]{transition:none}
/* abertura: os de tras saem de detras do da frente */
.hero.is-intro .sp:not([data-pos="0"]){transform:scale(.9);opacity:0}
.js .hero.is-intro .sp[data-pos="0"]{transform:translateY(24px) scale(.97)}
.sp__body{position:relative;padding:2.6cqw;border-radius:14cqw;background:linear-gradient(160deg,#2A2724,#171513 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.55),0 34px 60px -26px rgba(0,0,0,.85)}
.sp__body::before{content:"";position:absolute;right:-.9cqw;top:24%;width:1cqw;height:11%;border-radius:0 2px 2px 0;background:#2C2926}
/* os de tras ficam mais escuros (camada estatica, so a opacidade muda) */
.sp__body::after{content:"";position:absolute;inset:0;z-index:8;border-radius:inherit;background:rgba(12,10,8,.5);opacity:0;transition:opacity .6s cubic-bezier(.25,.1,.25,1);pointer-events:none}
.sp:not([data-pos="0"]) .sp__body::after{opacity:1}
.sp[data-pos="1"] .sp__body::after{background:linear-gradient(90deg,rgba(10,8,7,.4),rgba(10,8,7,.6))}
.sp[data-pos="-1"] .sp__body::after{background:linear-gradient(270deg,rgba(10,8,7,.4),rgba(10,8,7,.6))}
.sp__scr{position:relative;aspect-ratio:9/19.5;border-radius:11.5cqw;overflow:hidden;display:flex;flex-direction:column;background:var(--sb,#fff);container:scr/inline-size}
.sp__status{position:relative;z-index:4;flex:none;height:11cqw;display:flex;align-items:center;justify-content:space-between;padding:0 8cqw 0 10cqw;font:600 4.3cqw/1 var(--f-sans);background:var(--sb,#fff);color:var(--sbc,#1A1714)}
.sp__island{position:absolute;left:50%;top:2.8cqw;width:28cqw;height:7.6cqw;margin-left:-14cqw;border-radius:99px;background:#050505}
.sp__sig{display:flex;gap:.9cqw;align-items:flex-end}
.sp__sig i{display:block;width:1.2cqw;border-radius:1px;background:currentColor}
.sp__sig i:nth-child(1){height:1.8cqw}.sp__sig i:nth-child(2){height:2.7cqw}.sp__sig i:nth-child(3){height:3.6cqw}
.sp__scr::after{content:"";position:absolute;z-index:9;left:50%;bottom:1.8cqw;width:34cqw;height:1.2cqw;margin-left:-17cqw;border-radius:9px;background:rgba(26,23,20,.35)}
.sp[data-n="restaurante"]{--sb:#FBF7F0}
.sp[data-n="barbearia"]{--sb:#0C0C0C;--sbc:#fff}
.sp[data-n="barbearia"] .sp__status{box-shadow:0 1px 0 rgba(255,255,255,.06)}
.sp[data-n="barbearia"] .sp__scr::after{background:rgba(255,255,255,.5)}
.sp[data-n="cafe"]{--sb:#fff}
.sp[data-n="loja"]{--sb:#F4F1EA}
.sp[data-n="negocio"]{--sb:#F7F3EA}
.sp .demo{visibility:visible}
.sp[data-pos="-2"] .demo,.sp[data-pos="2"] .demo{visibility:hidden}

/* chao e horizonte por baixo do aparelho */
.hero-dev::before{content:"";position:absolute;left:50%;bottom:4px;width:100vw;height:1px;margin-left:-50vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 20%,rgba(255,255,255,.07) 80%,transparent)}
.hero-dev::after{content:"";position:absolute;left:15%;right:15%;bottom:-18px;height:44px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,235,215,.1),transparent);pointer-events:none}

/* cartoes flutuantes (telemovel) */
.fc{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;max-width:calc(100vw - 24px);padding:8px 13px 8px 10px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font:500 12px/1.2 var(--f-sans);letter-spacing:-.005em;white-space:nowrap;box-shadow:0 12px 28px -12px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.15);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .6s cubic-bezier(.34,1.4,.64,1);pointer-events:none}
.fc.is-on{opacity:1;transform:none}
/* ancorados fora do ecra: o 1.o sobre a moldura de cima (barra de estado), o 2.o sobre a moldura de baixo */
.fc1{left:max(8px,calc(50% - var(--sp-w) / 2 - 34px));top:21%}
.fc2{right:max(8px,calc(50% - var(--sp-w) / 2 - 34px));bottom:13%}
.fc__ic{display:none;width:15px;height:15px;flex:none;color:var(--ink)}
.fc__ic--check{color:#2F8F4E}
.fc[data-ic="menu"] .fc__ic--menu,.fc[data-ic="store"] .fc__ic--store,.fc[data-ic="check"] .fc__ic--check,.fc[data-ic="ig"] .fc__ic--ig,.fc[data-ic="ext"] .fc__ic--ext,.fc[data-ic="clock"] .fc__ic--clock,.fc[data-ic="bag"] .fc__ic--bag{display:block}

/* ===== COMPUTADOR (>= 900px): monitor no palco, a cavalo na parte clara ===== */
@media(min-width:900px){
  :root{--top-h:clamp(300px,calc(160px + 21vh),370px);--mon-w:min(1040px,74vw,calc((100svh - var(--top-h) - 18px) / .675));--hero-prot:calc(var(--mon-w) * .15)}
  .hero{padding:calc(var(--nav-h) + 12px) 0 0}
  .st{--gy:46%;--ty:14%;--ta:.36}
  .st__words{--wy:20%}
  .st__words span{font-size:clamp(180px,17vw,300px);color:rgba(255,245,235,.06)}
  .hero-lbl{order:0}
  .hero-lbl{margin-bottom:12px}
  .hero-title{font-size:clamp(2.4rem,min(4.2vw,6.6vh),4rem);line-height:1.02;letter-spacing:-.038em}
  .ht1--d{display:inline}.ht1--m{display:none}
  .hero-sub{display:block;margin:12px 0 0;max-width:46em;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.45;text-wrap:balance}
  .hero-dots,.sp-stack{display:none}
  .hero-chips{order:1;width:auto;margin:14px 0 0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .chips{gap:30px;padding:0}
  .chip{font-size:15px}
  .chip__d{display:inline}.chip__m{display:none}
  .hero-pjb{order:2;position:relative;z-index:4;min-height:30px;margin:0}
  .hero-pjb a{min-height:30px}
  .hero-dev{order:3;width:var(--mon-w);margin:12px auto calc(-1 * var(--hero-prot))}
  .hero-dev::before{bottom:var(--hero-prot)}
  .hero-dev::after{display:none}
  .sm-wrap{display:block;position:relative}
  /* luz do nicho a contornar o topo do monitor (camadas por nicho, so opacidade) */
  .sm-rim{position:absolute;left:-14%;right:-14%;top:-90px;height:340px;pointer-events:none}
  .sm-rim i{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.25,.1,.25,1);background:radial-gradient(ellipse 50% 42% at 50% 30%,rgb(var(--glow) / .5),transparent 72%)}
  .sm-rim i.is-on{opacity:1}
  .sm{position:relative;container:mon/inline-size}
  .hero-ctl{position:absolute;right:0;bottom:calc(var(--hero-prot) + 40px);margin:0}
  .hero-pause{width:40px;height:40px;margin:0;border-color:rgba(255,245,235,.3)}
  .hero-pause svg{width:14px;height:14px}
  html:not(.js) .sm-wrap{display:none}
  html:not(.js) .sp-stack{display:block}
}
@media(min-width:1100px){.hero-sub{white-space:nowrap;max-width:none}}
@media(min-width:900px) and (max-height:820px){
  .hero-lbl{margin-bottom:8px}
  .hero-sub{margin-top:8px;font-size:15px}
  .hero-chips{margin-top:8px}
}
.sm__body{position:relative;padding:1.05cqw 1.05cqw 1.3cqw;border-radius:1.7cqw;background:linear-gradient(180deg,#24211F,#1A1816);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(0,0,0,.6),0 50px 90px -40px rgba(0,0,0,.8)}
.sm__scr{position:relative;aspect-ratio:16/10;border-radius:.7cqw;overflow:hidden;display:flex;flex-direction:column;background:#fff;container:scr/inline-size}
.sm__stand{display:flex;flex-direction:column;align-items:center}
.sm__neck{width:15%;height:6.5cqw;background:linear-gradient(90deg,#1E1C1A 0%,#3A3633 45%,#24211F 100%);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)}
.sm__base{width:31%;height:1.25cqw;border-radius:.9cqw .9cqw .35cqw .35cqw;background:linear-gradient(180deg,#3B3734,#211F1D);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 30px -14px rgba(42,36,32,.45)}
/* barra do browser */
.sbr{flex:none;position:relative;z-index:3;height:3.9cqw;display:flex;align-items:center;gap:1.6cqw;padding:0 1.6cqw;background:#F1EEEA;border-bottom:1px solid #E1DCD4}
.sbr__dots{display:flex;gap:.7cqw;flex:none;width:7cqw}
.sbr__dots i{width:.95cqw;height:.95cqw;border-radius:50%;background:#D7D1C8}
.sbr__sp{width:7cqw;flex:none}
.sbr__url{flex:1;max-width:46%;margin:0 auto;height:2.6cqw;display:flex;align-items:center;gap:.8cqw;padding:0 .7cqw 0 1.2cqw;border-radius:99px;background:#fff;border:1px solid #E1DCD4;font:500 1.2cqw/1 var(--f-sans);color:#4F4740;white-space:nowrap;overflow:hidden}
.sbr__lock{width:1.1cqw;height:1.1cqw;color:#8F8476;flex:none}
.sbr__txt{overflow:hidden}
.sbr__caret{width:1px;height:1.5cqw;background:var(--ink);margin-left:-.4cqw;opacity:0}
.sbr.typing .sbr__caret{opacity:1}
.sbr__tag{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.5cqw;padding:.45cqw .9cqw;border-radius:99px;background:var(--acc-tint);color:var(--acc-ink);font:600 .95cqw/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase}
.sbr__tag--live{background:#E3F1E6;color:#256B3A}
.sbr__tag--live::before{content:"";width:.75cqw;height:.75cqw;border-radius:50%;background:#2F8F4E}
.sbr__url:not([data-kind="exemplo"]) .sbr__tag--ex,.sbr__url:not([data-kind="real"]) .sbr__tag--live{display:none}
.sbr__url[data-kind="teu"] .sbr__txt{font-style:italic;color:#9A8F82}
.sm__view{position:relative;flex:1;overflow:hidden;background:var(--st-bg,#fff)}
/* aviso da MP (computador), fora do site: pendurado na moldura de cima, a direita */
.sm__toast{position:absolute;z-index:10;right:3%;top:-14px;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font:500 12.5px/1.2 var(--f-sans);white-space:nowrap;box-shadow:0 12px 28px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .5s cubic-bezier(.34,1.4,.64,1);pointer-events:none}
.sm__toast svg{width:14px;height:14px;color:var(--acc-ink)}
.sm__toast.is-on{opacity:1;transform:none}
/* cursor do micro-momento (computador) */
.d-cur{position:absolute;left:0;top:0;z-index:9;width:2.1cqw;height:2.1cqw;opacity:0;transform:translate(var(--cx,80cqw),var(--cy,50cqw));transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s var(--ease);pointer-events:none}
.d-cur svg{width:100%;height:100%;transition:transform .15s var(--ease);transform-origin:20% 15%}
.d-cur.is-on{opacity:1}
.d-cur.is-click svg{transform:scale(.82)}
.d-cur.no-tr{transition:opacity .3s var(--ease)}

/* entrada (CSS; o primeiro exemplo do telemovel ja vem montado e visivel) */
.js .st{animation:heroFade .9s var(--ease) both}
.js .hero-lbl{animation:heroUp .5s cubic-bezier(.25,.1,.25,1) .08s both}
.hero-title.split .w{opacity:0;transform:translateY(.32em);animation:wIn .55s var(--ease) forwards;animation-delay:calc(160ms + var(--wi) * 60ms)}
.js .rot{animation:heroUp .5s var(--ease) .42s both}
.js .hero-sub{animation:heroUp .5s var(--ease) .52s both}
.js .hero-chips,.js .hero-ctl{animation:heroFade .4s var(--ease) .5s both}
/* o monitor ja vem com o site montado: so sobe um pouco (sem opacidade, o ecra nunca fica transparente) */
.js .sm-wrap{animation:devIn .45s cubic-bezier(.25,.1,.25,1) .12s both}
@keyframes wIn{to{opacity:1;transform:none}}
@keyframes heroUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes devIn{from{transform:translateY(18px)}to{transform:none}}

/* ===== EXEMPLOS DENTRO DOS APARELHOS (HTML vivo, nitido em qualquer zoom) ===== */
.view{position:relative;flex:1;overflow:hidden}
.demo{text-align:left;position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden;overflow:hidden;background:var(--d-bg);color:var(--d-ink);font:400 1.3cqw/1.35 var(--f-sans);-webkit-font-smoothing:antialiased}
.demo.is-on,.demo.is-prev{visibility:visible}
.demo.is-on{z-index:2}.demo.is-prev{z-index:1}
/* troca no computador: navegacao de browser (o site antigo fica parado; o novo pinta de cima para baixo) */
.d-scroll{position:relative;flex:1 0 auto;display:flex;flex-direction:column}
.d-nav{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:2.4em;padding:1.5em 3.2em;border-bottom:1px solid var(--d-line);background:var(--d-bg)}
.d-logo{margin-right:auto;font-family:var(--d-font);font-style:var(--d-fs,normal);font-weight:var(--d-fw,400);text-transform:var(--d-tt,none);font-size:1.75em;line-height:1;letter-spacing:var(--d-ls,-.01em);white-space:nowrap}
.d-links{display:flex;gap:2.2em;font-size:1.05em;color:var(--d-mut);white-space:nowrap}
.d-burger{display:none;width:1.5em;height:1.05em;flex:none;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.d-btn{display:inline-flex;align-items:center;justify-content:center;height:3.2em;padding:0 1.5em;border-radius:var(--d-r);background:var(--d-acc);color:var(--d-on-acc);font-weight:600;font-size:1.05em;white-space:nowrap;transition:box-shadow .15s}
.d-btn--sm{height:2.8em;font-size:1em}
.d-btn--ghost{background:transparent;color:var(--d-ink);box-shadow:inset 0 0 0 1.5px var(--d-line-2)}
.is-press{box-shadow:inset 0 0 0 99px rgba(0,0,0,.1)!important}
.d-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:3em;align-items:center;padding:2.6em 3.2em 2.2em}
.d-eyebrow{display:block;margin-bottom:1em;font-size:.95em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--d-acc-ink)}
.d-name{display:block;margin-bottom:.3em;font-family:var(--d-font);font-style:var(--d-fs,normal);font-weight:var(--d-fw,400);text-transform:var(--d-tt,none);letter-spacing:var(--d-ls,-.01em);font-size:4.5em;line-height:.95}
.d-tag{display:block;margin-bottom:1.6em;font-size:1.3em;line-height:1.4;color:var(--d-mut);max-width:22em}
.d-ctas{display:flex;gap:.8em}
.d-photo{aspect-ratio:16/11;border-radius:var(--d-ri);overflow:hidden;background:var(--d-line)}
.d-photo picture{display:contents}
.d-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.d-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;padding:0 3.2em 2.6em}
.d-rows--4{grid-template-columns:repeat(4,1fr)}
.d-row{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:1.05em 1.3em;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-line);font-size:1.12em;white-space:nowrap}
.d-row span{overflow:hidden;text-overflow:ellipsis}
.d-row b{font-weight:600;color:var(--d-acc-ink)}
.d-info{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:2.4em;align-items:start;padding:0 3.2em 2.4em;font-size:1.02em;color:var(--d-mut)}
.d-info b{display:block;margin-bottom:.3em;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:var(--d-acc-ink)}
.d-info{grid-template-columns:1fr 1fr}
.d-hl{display:block;white-space:nowrap}
.d-link{display:block;width:max-content;margin-top:.45em;color:var(--d-acc-ink);font-weight:600;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
/* faixa de cima (cafe: aberto/fechado; loja: levantamento) */
.d-bar{flex:none;position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:.6em;height:2.5em;padding:0 1em;background:var(--d-acc);color:var(--d-on-acc);font-size:.92em;font-weight:500;letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.d-bar .d-open{margin:0;color:inherit;font-size:1em}
.d-bar .d-open__pill{background:rgba(255,255,255,.16);color:inherit;padding:.25em .7em}
.d-bar .d-open__pill::before{background:#7BE09A}
.d-bar .d-open__pill.is-off::before{background:#F2B36B}
/* tasca: foto a toda a largura com o nome por cima; carta em lista com pontos */
.d-hero--full{display:block;position:relative;padding:0}
.d-hero--full .d-photo{position:relative;aspect-ratio:auto;height:30em;border-radius:0}
.d-hero--full .d-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,6,0) 28%,rgba(20,12,6,.74) 100%)}
.d-hero--full .d-copy{position:absolute;left:3.2em;right:3.2em;bottom:2.6em;color:#FFF8EF}
.d-hero--full .d-eyebrow{color:#F3D9B8}
.d-hero--full .d-tag{color:rgba(255,248,239,.88);margin-bottom:1.3em}
.d-hero--full .d-name{font-size:4.2em;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.d-hero--full .d-btn--ghost{color:#FFF8EF;box-shadow:inset 0 0 0 1.5px rgba(255,248,239,.7)}
.d-carta{display:grid;grid-template-columns:1.35fr 1fr;gap:3.6em;padding:2.6em 3.2em 2.4em}
.d-menu{display:flex;flex-direction:column;gap:.75em}
.d-menu__h{font-family:var(--d-font);font-size:1.7em;line-height:1;margin-bottom:.2em}
.d-mi{display:flex;align-items:baseline;gap:.6em;font-size:1.12em;white-space:nowrap}
.d-mi i{flex:1;min-width:1em;border-bottom:1.5px dotted var(--d-line-2);transform:translateY(-.25em)}
.d-mi small{font-size:.82em;color:var(--d-mut)}
.d-mi b{font-weight:600;color:var(--d-acc-ink)}
.d-info--side{grid-template-columns:1fr;gap:1.2em;padding:0}
/* cafe (computador): foto a esquerda, texto a direita (cada exemplo com a sua composicao) */
.demo--cafe .d-hero{grid-template-columns:1.1fr 1fr}
.demo--cafe .d-photo{order:-1}

.d-foot{display:block;margin-top:auto;padding:1.2em 3.2em 1.6em;font-size:.9em;color:var(--d-mut);border-top:1px solid var(--d-line)}
/* cafe: aberto agora */
.d-open{display:flex;align-items:center;gap:.7em;margin:-.5em 0 1.4em;font-size:1.05em;color:var(--d-mut);white-space:nowrap}
.d-open__pill{display:inline-flex;align-items:center;gap:.45em;padding:.35em .75em;border-radius:2em;background:#E4F3E8;color:#256B3A;font-weight:600;font-size:.9em}
.d-open__pill::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#2F8F4E}
/* loja: saco + grelha de produtos */
.d-bag{position:relative;display:inline-flex;width:1.7em;height:1.7em;flex:none;color:var(--d-ink)}
.d-bag svg{width:100%;height:100%}
.d-bag__n{position:absolute;right:-.45em;top:-.35em;display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--d-acc);color:var(--d-on-acc);font:700 .7em/1 var(--f-sans);font-style:normal;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.demo.is-bag .d-bag__n{transform:scale(1)}
.d-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em;padding:.4em 3.2em 2.6em}
.d-prod{display:flex;flex-direction:column;gap:.5em;min-width:0}
.d-prod__img{display:block;aspect-ratio:1;border-radius:var(--d-ri,.2em);overflow:hidden;background:var(--d-line)}
.d-prod__img img{width:100%;height:100%;object-fit:cover;max-width:none}
.d-prod__n{font-size:1.02em;line-height:1.25;color:var(--d-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-prod__p{display:flex;align-items:center;justify-content:space-between;gap:.5em;flex-wrap:wrap}
.d-prod__p b{font-weight:600;color:var(--d-acc-ink)}
.d-prod__add{display:inline-flex;align-items:center;height:2.3em;padding:0 .85em;border-radius:var(--d-r);box-shadow:inset 0 0 0 1.2px var(--d-line-2);font-size:.86em;font-weight:600;color:var(--d-ink);white-space:nowrap;transition:box-shadow .15s}
/* barbearia: capturas reais do site publicado */
.d-shot{flex:none;background:#0C0C0C}
.shot{display:block}
.shot img{display:block;width:100%;height:auto;max-width:none}
.shot--m,.d-hot--m{display:none}
.d-hot{position:absolute;width:2px;height:2px}

/* toque (telemovel) */
.d-tap{position:absolute;z-index:7;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(255,255,255,.38);border:1px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.28);opacity:0;pointer-events:none}
.d-tap::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);opacity:0}
.d-tap.is-on{animation:tapIn .9s var(--ease) both}
.d-tap.is-on::after{animation:ripple .5s ease-out .28s both}
@keyframes tapIn{0%{opacity:0;transform:scale(1.25)}25%{opacity:1;transform:scale(1)}45%{transform:scale(.85)}80%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(.85)}}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}

/* folha de confirmacao: sobe de baixo no telemovel; cartao no canto no computador */
.d-dim{position:absolute;inset:0;z-index:5;background:rgba(10,8,6,.14);opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.d-sheet{position:absolute;z-index:6;right:2.4em;top:6.2em;width:27em;display:flex;flex-direction:column;align-items:stretch;gap:.85em;padding:1.5em;border-radius:1em;background:var(--d-sheet,#fff);color:var(--d-ink);font-size:1.05em;box-shadow:0 24px 50px -20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(1.4em) scale(.96);visibility:hidden;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s;pointer-events:none}
.demo.is-sheet .d-sheet{opacity:1;transform:none;visibility:visible;transition:opacity .35s var(--ease),transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.demo.is-sheet .d-dim{opacity:1}
.ds-grab{display:none;align-self:center;width:3em;height:.3em;border-radius:1em;background:var(--d-line-2)}
.ds-t{font-family:var(--d-font);font-style:var(--d-fs,normal);font-weight:var(--d-fw,600);text-transform:var(--d-tt,none);font-size:1.45em;line-height:1.1;letter-spacing:-.01em}
.ds-pills{display:flex;gap:.5em;flex-wrap:wrap}
.ds-pills span{padding:.6em .9em;border-radius:2em;box-shadow:inset 0 0 0 1px var(--d-line-2);font-weight:500}
.ds-pills .is-sel{background:var(--d-acc);color:var(--d-on-acc);box-shadow:none}
.ds-btn{width:100%;height:3em}
/* estado de sucesso (so depois do 2.o toque, no botao da propria folha) */
.ds-done{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:.6em;padding:1em;border-radius:inherit;background:var(--d-sheet,#fff);font-weight:600;font-size:1.05em;text-align:center;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.ds-done svg{flex:none;width:1.5em;height:1.5em;padding:.25em;border-radius:50%;background:#E3F1E6;color:#256B3A}
.demo.is-done .ds-done{opacity:1}
.ds-opt{display:flex;align-items:center;gap:.7em;padding:.7em .8em;border-radius:.5em;box-shadow:inset 0 0 0 1px var(--d-line-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-opt i{flex:none;width:1.05em;height:1.05em;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--d-line-2)}
.ds-opt.is-sel{box-shadow:inset 0 0 0 1.5px var(--d-acc)}
.ds-opt.is-sel i{box-shadow:inset 0 0 0 .33em var(--d-acc)}
.ds-note{color:var(--d-mut);font-size:.95em}
.ds-foot{color:var(--d-mut);font-size:.85em;text-align:center}
.ds-cat{margin-top:.2em;font-size:.78em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--d-acc-ink)}
.ds-li{display:flex;justify-content:space-between;gap:1em;padding:.15em 0;border-bottom:1px dashed var(--d-line)}
.ds-li b{font-weight:600}
.ds--menu{gap:.45em}
.ds-prod{display:flex;align-items:center;gap:.9em}
.ds-prod__img{flex:none;width:4.2em;height:4.2em;border-radius:.4em;overflow:hidden;background:#E9E4DA}
.ds-prod__img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ds-prod .ds-t{display:block;font-size:1.2em;margin-bottom:.2em}
.ds-price{font-weight:600;color:var(--d-acc-ink)}
.ds-qty{display:flex;align-items:center;gap:1.2em;align-self:flex-start;padding:.35em .8em;border-radius:2em;box-shadow:inset 0 0 0 1px var(--d-line-2)}
.ds-qty i{font-style:normal;color:var(--d-mut)}

/* ===== ecras estreitos (telemovel): o mesmo site em versao movel ===== */
@container scr (max-width:440px){
  .demo{font-size:3.9cqw}
  .d-nav{gap:.8em;padding:1em 1.3em}
  .d-links,.d-nav .d-btn--sm{display:none}
  .d-burger{display:block}
  .d-logo{font-size:1.45em}
  .d-hero{grid-template-columns:1fr;gap:0;padding:0}
  .d-photo{order:-1;aspect-ratio:4/3.3;border-radius:0}
  .d-copy{padding:1.4em 1.3em 1.3em}
  .d-name{font-size:2.6em}
  .d-tag{font-size:1.08em;margin-bottom:1.1em}
  .d-open{font-size:.92em;margin:-.3em 0 1.1em}
  .d-ctas .d-btn{flex:1;height:3em;font-size:1em;padding:0 .8em}
  .d-rows,.d-rows--4{grid-template-columns:1fr;gap:.6em;padding:0 1.3em 1.4em}
  .d-row{padding:.85em 1em;font-size:1.02em}
  .d-prods{grid-template-columns:1fr 1fr;gap:1em .8em;padding:.2em 1.3em 1.4em}
  .d-prod__n{font-size:.95em;white-space:normal;line-height:1.2;height:2.4em}
  .d-prod__add{height:2.1em;padding:0 .7em;font-size:.8em}
  .d-info{grid-template-columns:1fr;gap:.9em;padding:0 1.3em 1.4em;font-size:1em}
  .d-info b{margin-bottom:.15em}
  .d-hero--full .d-photo{height:auto;aspect-ratio:4/4.6}
  .d-hero--full .d-copy{position:absolute;left:1.3em;right:1.3em;bottom:1.3em;padding:0}
  .d-hero--full .d-name{font-size:2.2em}
  .d-hero--full .d-tag{font-size:1em;margin-bottom:1em}
  .d-carta{grid-template-columns:1fr;gap:1.4em;padding:1.4em 1.3em}
  .d-mi{font-size:1em}
  .d-menu__h{font-size:1.45em}
  .d-bar{height:2.4em;font-size:.84em}
  .d-info{grid-template-columns:1fr}
  .demo--cafe .d-hero{grid-template-columns:1fr}
  .d-foot{padding:1.2em 1.3em 3em;font-size:.82em}
  .shot--d,.d-hot--d{display:none}
  .shot--m,.d-hot--m{display:block}
  .d-dim{background:rgba(10,8,6,.34)}
  .d-sheet{left:0;right:0;top:auto;bottom:0;width:auto;gap:.75em;padding:.8em 1.3em max(3em,calc(1.4em + 8cqw));border-radius:1.5em 1.5em 0 0;font-size:1em;opacity:1;transform:translateY(105%);box-shadow:0 -14px 30px -12px rgba(0,0,0,.35)}
  .ds-grab{display:block}
  .ds-t{font-size:1.35em}
  .ds-opt{font-size:.9em;padding:.65em .7em}
}

/* paletas de cada exemplo (cada negocio com a sua cara) */
.demo--rest{--d-bg:#FBF7F0;--d-ink:#2B2118;--d-mut:#76695C;--d-line:#EADFCF;--d-line-2:#CDBDA6;--d-card:#fff;--d-acc:#8C3B22;--d-on-acc:#FFF7EE;--d-acc-ink:#8C3B22;--d-font:var(--f-serif);--d-r:.45em;--d-ri:.6em}
.demo--barb{--d-bg:#0C0C0C;--d-ink:#F5F2EC;--d-mut:#A9A399;--d-line:#2A2826;--d-line-2:#4A4642;--d-card:#151413;--d-sheet:#141312;--d-acc:#CFAF5A;--d-on-acc:#14110A;--d-acc-ink:#CFAF5A;--d-font:var(--f-sans);--d-fw:800;--d-tt:uppercase;--d-r:.2em}
.demo--cafe{--d-bg:#FFFFFF;--d-ink:#14315F;--d-mut:#5B6B86;--d-line:#DCE4F0;--d-line-2:#A9BAD3;--d-card:#F4F7FC;--d-acc:#1F4E8C;--d-on-acc:#fff;--d-acc-ink:#1F4E8C;--d-font:var(--f-serif);--d-fs:italic;--d-r:2em;--d-ri:1.2em}
.demo--loja{--d-bg:#F4F1EA;--d-ink:#2F3328;--d-mut:#6A6F60;--d-line:#DFDBCF;--d-line-2:#B9BCAE;--d-card:#FBFAF6;--d-sheet:#FBFAF6;--d-acc:#5E6B52;--d-on-acc:#F4F1EA;--d-acc-ink:#56614B;--d-font:var(--f-serif);--d-r:.25em;--d-ri:.2em}
.demo--neg{--d-bg:#F7F3EA;--d-ink:#121826}

/* montagem ao abrir (computador): nav -> foto (cortina) -> nome -> linhas -> botao */
.js .demo:not(.built) [data-b="1"]{opacity:0;transform:translateY(-100%)}
.js .demo:not(.built) [data-b="2"]{clip-path:inset(0 100% 0 0)}
.js .demo:not(.built) [data-b="2"] img{transform:scale(1.04)}
.js .demo:not(.built) [data-b="3"]{opacity:0;transform:translateY(.7em)}
.js .demo:not(.built) [data-b="4"]{opacity:0;transform:translateY(.6em)}
.js .demo:not(.built) [data-b="5"]{opacity:0;transform:scale(.88)}
.demo.built [data-b="1"]{transition:opacity .35s var(--ease) .1s,transform .45s var(--ease) .1s}
.demo.built [data-b="2"]{transition:clip-path .65s cubic-bezier(.65,0,.35,1) .25s}
.demo.built [data-b="2"] img{transition:transform 1.1s var(--ease) .25s}
.demo.built [data-b="3"]{transition:opacity .45s var(--ease) .45s,transform .5s var(--ease) .45s}
.demo.built .d-name{transition-delay:.52s}
.demo.built .d-tag{transition-delay:.6s}
.demo.built [data-b="4"]{transition:opacity .4s var(--ease),transform .45s var(--ease);transition-delay:calc(.75s + var(--i,0) * 90ms)}
.demo.built [data-b="5"]{transition:opacity .25s var(--ease) .9s,transform .5s cubic-bezier(.34,1.56,.64,1) .9s}

/* ===== "O teu negocio": mosaico com os sites deste palco (fotos reais) + o lugar do teu (8 s). Sem .is-play: mosaico completo ===== */
.ng{position:absolute;inset:0;overflow:hidden;background:#F7F3EA;color:#121826}
.ng__grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:1.2em;padding:2.2em}
.ng__t{position:relative;overflow:hidden;border-radius:.9em;background:#EFE9DC}
.ng__t picture{display:contents}
.ng__t img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.ng__t:nth-child(2) img{object-position:50% 0}
.ng__t b{position:absolute;left:.8em;bottom:.7em;padding:.4em .75em;border-radius:2em;background:rgba(255,255,255,.94);font-size:1em;font-weight:600;line-height:1;color:#121826}
.ng__me{grid-column:2/4;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1.2em;padding:2.2em 2.4em;border-radius:.9em;background:#0F1E3D;color:#F7F3EA;overflow:hidden}
.ng__type{font:italic 400 4.6em/1 var(--f-serif);letter-spacing:-.01em;white-space:nowrap}
.ng__type .l{display:inline-block;white-space:pre}
.ng__btn{position:relative;height:3.3em;min-width:13em;padding:0 1.6em;border-radius:2em;display:grid;place-items:center;overflow:hidden;background:#D6BC86;color:#0A1428;font-weight:600;font-size:1.05em}
.ng__bw{display:grid;place-items:center}
.ng__bw span{grid-area:1/1;opacity:0;white-space:nowrap}
.demo--neg:not(.is-play) .ng__bw span:last-child{opacity:1}
.ng__end{position:absolute;z-index:3;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0 .25em;margin:0;padding:0 1em;background:#F7F3EA;font:600 4.2em/1.06 var(--f-sans);letter-spacing:-.04em;text-align:center;color:#121826;opacity:0;pointer-events:none}
.ng__end span,.ng__end em{display:inline-block}
.ng__end em{font:italic 400 1.18em/1 var(--f-serif);letter-spacing:-.01em;color:#7D5F2A}
@container scr (max-width:440px){
  .ng__grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1.1fr;gap:.7em;padding:.9em .9em 2.2em}
  .ng__t{border-radius:.8em}
  .ng__t b{left:.55em;bottom:.55em;font-size:.82em}
  .ng__me{grid-column:1/3;padding:1.2em;gap:.9em;border-radius:.8em}
  .ng__type{font-size:2.5em}
  .ng__btn{min-width:0;width:100%;height:3em}
  .ng__end{font-size:2.7em}
  .ng__end span{max-width:6.5em}
}
.demo--neg.is-play .ng-l{animation:ngPop .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--k,0) * .12s)}
.demo--neg.is-play .ng__type .l{animation:heroFade .05s linear both;animation-delay:calc(1s + var(--li,0) * 50ms)}
.demo--neg.is-play .ng__bw span{animation:ngWio .4s var(--ease) both}
.demo--neg.is-play .ng__bw span:nth-child(1){animation-delay:2.3s}
.demo--neg.is-play .ng__bw span:nth-child(2){animation-delay:2.7s}
.demo--neg.is-play .ng__bw span:nth-child(3){animation:ngWin .3s var(--ease) 3.1s both}
.demo--neg.is-play .ng__end{animation:ngEnd 8s linear both}
.demo--neg.is-play .ng__end span,.demo--neg.is-play .ng__end em{animation:ngEndUp 8s linear both}
@keyframes ngPop{from{opacity:0;transform:translateY(.8em) scale(.97)}to{opacity:1;transform:none}}
@keyframes ngWio{0%{opacity:0;transform:translateY(.7em)}30%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.7em)}}
@keyframes ngWin{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
@keyframes ngEnd{0%,55%{opacity:0}61%,95%{opacity:1}100%{opacity:0}}
@keyframes ngEndUp{0%,55%{transform:translateY(14px)}61%,100%{transform:none}}

/* ===== maquinas do 06-exemplo (trabalho feito): monitor e telemovel claros, partilhados ===== */
.dev{position:relative;width:100%}
@media(max-width:699px){.dev--ex{max-height:max(340px,46svh);overflow:hidden;padding-top:6px;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}}
.mon{display:none}
.ph{position:relative;width:min(62vw,270px);margin:0 auto;container-type:inline-size;container-name:ph}
.ph__body{position:relative;padding:3.4cqw;border-radius:15cqw;background:linear-gradient(150deg,#F6F0E6 0%,#E4D9C7 45%,#D2C4AD 100%);box-shadow:var(--sh-dev),0 0 0 1px rgba(160,140,112,.35),inset 0 0 0 1.5px rgba(255,255,255,.55)}
.ph__body::before{content:"";position:absolute;right:-1.1cqw;top:24%;width:1.2cqw;height:13%;border-radius:0 3px 3px 0;background:var(--ouro);box-shadow:0 0 0 .5px rgba(125,95,42,.4)}
.ph__body::after{content:"";position:absolute;left:-1cqw;top:20%;width:1.1cqw;height:7%;border-radius:3px 0 0 3px;background:#CDBFA8}
.ph__screen{position:relative;container-type:inline-size;container-name:scr;aspect-ratio:9/19;border-radius:12cqw;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(42,36,32,.18)}
.ph__status{position:relative;z-index:3;flex:none;height:10.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 8cqw 0 9cqw;font:600 4.2cqw/1 var(--f-sans);color:var(--ink);background:var(--st-bg,#fff)}
.ph__island{position:absolute;left:50%;top:2.6cqw;width:27cqw;height:7cqw;margin-left:-13.5cqw;border-radius:99px;background:var(--basalto)}
.ph__sig{display:flex;gap:.9cqw;align-items:flex-end}
.ph__sig i{display:block;width:1.2cqw;border-radius:1px;background:currentColor}
.ph__sig i:nth-child(1){height:1.8cqw}.ph__sig i:nth-child(2){height:2.7cqw}.ph__sig i:nth-child(3){height:3.6cqw}
.ph__screen::after{content:"";position:absolute;z-index:4;left:50%;bottom:2cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:9px;background:rgba(26,23,20,.32)}
.mon__body{position:relative;padding:1.5cqw 1.5cqw 0;border-radius:2.6cqw 2.6cqw 1.6cqw 1.6cqw;background:linear-gradient(180deg,var(--alu-1) 0%,#ECE5DA 40%,var(--alu-2) 100%);box-shadow:var(--sh-dev),0 0 0 1px rgba(160,140,112,.32)}
.mon__screen{position:relative;aspect-ratio:16/10;border-radius:1.1cqw;overflow:hidden;background:#fff;display:flex;flex-direction:column;container-type:inline-size;container-name:scr;box-shadow:0 0 0 1px rgba(42,36,32,.16)}
.mon__chin{position:relative;height:4.6cqw;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--acc);border-radius:0 0 1.6cqw 1.6cqw}
.mon__chin-mark{width:2.4cqw;height:2.4cqw}
.mon__stand{position:relative;display:flex;flex-direction:column;align-items:center}
.mon__neck{position:relative;width:15%;height:7.5cqw;display:grid;place-items:center;background:linear-gradient(90deg,#24386A 0%,var(--brand) 45%,var(--noite) 100%);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);box-shadow:inset 0 6px 8px -6px rgba(0,0,0,.35)}
.mon__emboss{width:3.4cqw;height:3.4cqw;opacity:.3;--mk-l:#fff;--mk-a:#fff}
.mon__base{width:34%;height:1.6cqw;border-radius:1cqw 1cqw .6cqw .6cqw;background:linear-gradient(180deg,var(--brand-hover),var(--noite));box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 22px -10px rgba(42,36,32,.35)}
.br{flex:none;position:relative;z-index:3;height:5.4cqw;display:flex;align-items:center;gap:2cqw;padding:0 1.8cqw;background:#F4EFE7;border-bottom:1px solid #E7DDCF}
.br__dots{display:flex;gap:.8cqw;flex:none}
.br__dots i{width:1.05cqw;height:1.05cqw;border-radius:50%;background:#DDD2C2}
.br__dots i:first-child{background:var(--ouro)}
.br__url{flex:1;max-width:62%;margin:0 auto;height:3.5cqw;display:flex;align-items:center;gap:.9cqw;padding:0 .8cqw 0 1.4cqw;border-radius:99px;background:#fff;border:1px solid #E7DDCF;font:500 1.5cqw/1 var(--f-sans);color:#5E554C;white-space:nowrap;overflow:hidden}
.br__lock{width:1.3cqw;height:1.3cqw;color:#8F8476;flex:none}
.br__txt{overflow:hidden}
.br__tag{margin-left:auto;flex:none;padding:.5cqw 1cqw;border-radius:99px;background:var(--acc-tint);color:var(--acc-ink);font:600 1.15cqw/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase}
.br__mark{width:2.8cqw;height:2.8cqw;flex:none}

/* ===== movimento reduzido: tudo parado e legivel ===== */
@media(prefers-reduced-motion:reduce){
  .js .demo [data-b],.js .demo [data-b] img{opacity:1!important;transform:none!important;clip-path:none!important}
  .d-scroll{transform:none!important}
  .hero-title.split .w{opacity:1!important;transform:none!important;animation:none!important}
  .st__glows i,.sm-rim i{transition:none}
  .rot__w,.st__words span,.hero-lbl>span,.sp,.sp__body::after{transition:none!important}
  .fc{transition:none}
}

/* ===== ronda 3: troca no computador como uma navegacao real ===== */
.sbr__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#2F6FEB;transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.sbr.is-load .sbr__prog{opacity:1;transform:scaleX(.82);transition:transform 1.1s cubic-bezier(.1,.7,.2,1),opacity .1s}
.sbr.is-loaded .sbr__prog{opacity:0;transform:scaleX(1);transition:transform .2s ease-out,opacity .25s ease .22s}
.sbr__spin{display:none;flex:none;width:1.1cqw;height:1.1cqw;border-radius:50%;border:.17cqw solid #CFC8BE;border-top-color:#2F6FEB;animation:sbrSpin .7s linear infinite}
.sbr.is-load .sbr__lock{display:none}.sbr.is-load .sbr__spin{display:block}
@keyframes sbrSpin{to{transform:rotate(360deg)}}
.sbr__txt.is-sel{background:#C5DBFB;color:#1A1714;border-radius:2px}
/* o site novo pinta de cima para baixo: nav, imagem, texto, linhas, botao (60 ms por camada, sem cortina) */
.js .demo.is-nav:not(.built) [data-b]{opacity:0;transform:none;clip-path:none}
.js .demo.is-nav:not(.built) [data-b] img{transform:none}
.demo.is-nav.built [data-b]{transition:opacity .22s ease-out 0s}
.demo.is-nav.built [data-b] img{transition:none}
.demo.is-nav.built [data-b="2"]{transition-delay:.06s}
.demo.is-nav.built [data-b="3"],.demo.is-nav.built .d-name,.demo.is-nav.built .d-tag{transition-delay:.12s}
.demo.is-nav.built [data-b="4"]{transition-delay:calc(.18s + var(--i,0) * 40ms)}
.demo.is-nav.built [data-b="5"]{transition-delay:.24s}

/* barra: abaixo de 400px o WhatsApp fica so com o icone (o menu nunca encosta a borda) */
@media(max-width:399px){
  .nav__cta.is-wa{width:44px;padding:0;justify-content:center}
  .nav__cta.is-wa .nav__cta-w>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav__lang{padding:0 8px}
}
/* computador: pausa ao lado dos separadores, com 44 px */
@media(min-width:900px){
  .hero-chips{display:flex;align-items:center;justify-content:center;gap:26px}
  .hero-chips .hero-pause{position:relative;width:44px;height:44px;margin:0;flex:none}
  .hero-chips .hero-pause::after{display:none}
  .hero-pjb{min-height:44px}
  .hero-pjb a{min-height:44px}
}
/* portateis baixos (1366x768): sem sub-linha e monitor maior (o pe pode passar a dobra, o ecra nao) */
@media(min-width:900px) and (max-height:820px){
  :root{--top-h:calc(clamp(300px,calc(160px + 21vh),370px) - 30px);--mon-w:min(1040px,76vw,calc((100svh - var(--top-h) - 4px) / .6))}
  .hero-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sbr__prog,.sbr__spin{display:none!important}
  .hero-lbl>span.is-on,.st__words span.is-on{transition:none!important}
}

/* == 02-intro.css == */
.intro{position:relative;padding-top:clamp(28px,6vw,48px)}
/* a abertura acaba num corte arredondado; no computador o monitor entra aqui (--hero-prot) */
@media(min-width:900px){.intro.sec{padding-top:calc(var(--hero-prot,0px) + 28px)}}
.intro-see{display:flex;justify-content:center;margin:0 0 clamp(40px,6vw,72px)}
.intro-see a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;color:var(--mut);font-size:15px;font-weight:500;text-decoration:none}
.intro-see a:hover{color:var(--ink)}
.intro-see svg{transition:transform .3s var(--ease)}
@media(hover:hover){.intro-see a:hover svg{transform:translateY(3px)}}
.intro .eyebrow{color:var(--acc-ink)}
.intro-lead{font-family:var(--f-sans);font-weight:600;letter-spacing:-.025em;line-height:1.18;font-size:clamp(1.75rem,3.2vw,2.75rem);color:var(--ink);max-width:24em;text-wrap:balance;margin:0 0 clamp(48px,7vw,96px)}
.intro-lead .intro-w{display:inline-block;white-space:pre}
.intro-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.intro-points li{border-bottom:1px solid var(--line)}
.intro-row summary{gap:16px;min-height:72px;padding:18px 0;justify-content:flex-start}
.intro-row summary::after{margin-left:auto}
.intro-row summary:hover .intro-ic{transform:translateY(-2px) rotate(-4deg);border-color:#D5C6AF}
.intro-ic{flex:none;transition:transform .3s var(--ease),border-color .3s var(--ease);display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-md);color:var(--acc-ink);background:var(--card)}
.intro-row h3{font-family:var(--f-sans);font-weight:600;letter-spacing:-.02em;font-size:1.25rem;line-height:1.25;margin:0;color:var(--ink)}
.intro-row .acc__a p{padding-left:60px;max-width:38em}
@media (min-width:860px){.intro-row h3{font-size:1.45rem}.intro-row summary{padding:24px 0}}

/* acordeao partilhado (toca e abre) */
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--acc-ink);border-bottom:1.5px solid var(--acc-ink);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc summary:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:var(--r-sm)}
.acc__a{overflow:hidden}
.acc__a p{margin:0;padding:0 0 22px;color:var(--mut);font-size:1.0625rem;line-height:1.6}

/* fotografias (partilhado pelas secoes do meio) */
.ph-band{margin:clamp(56px,8vw,104px) 0 0;padding:0}
.ph-frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.ph-band .ph-frame{margin-inline:var(--gutter);border-radius:var(--r-md)}
@media(min-width:1280px){.ph-band .ph-frame{max-width:calc(var(--wrap) + 160px);margin-inline:max(var(--gutter),calc((100% - var(--wrap) - 160px) / 2))}}

.ph-img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;display:block;max-width:none}
.ph-band figcaption,.ph-fig figcaption{font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--mut);padding-top:12px}
.ph-fig{margin:0;position:relative}
.ph-fig .ph-frame{border-radius:var(--r-sm)}
@media (min-width:700px){.ph-frame{aspect-ratio:21/9}}

/* == 03-passos.css == */
.passos{position:relative}
.passos-top{display:grid;gap:28px;margin-bottom:48px}
.passos-head{max-width:720px}
.passos-fig{max-width:420px}
.passos-fig .ph-frame{aspect-ratio:16/10}
@media (min-width:900px){.passos-top{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;align-items:center;margin-bottom:64px}.passos-fig{justify-self:end;width:100%}.passos-fig .ph-frame{aspect-ratio:4/4.4}}
.passos-head h2{color:var(--ink)}
.passos-lede{font-size:1.1875rem;line-height:1.6;color:var(--mut);margin:0 0 28px;max-width:34em}
.passos-wa{display:flex;gap:14px;align-items:flex-start;padding:18px 0 0;border-top:1px solid var(--line);max-width:36em}
.passos-wa-ic{flex:none;display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-md);color:var(--acc-ink);background:var(--card)}
.passos-wa p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink)}

/* linha de tempo: pontos e palavras */
.passos-line{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:flex;flex-direction:column;gap:0}
.passos-line::before,.passos-line::after{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--line)}
.passos-line::after{width:2px;left:4.5px;background:var(--acc);transform:scaleY(var(--p,1));transform-origin:top center}
.js .passos-line::after{transform:scaleY(var(--p,0))}
.passos-step{position:relative;padding:0 0 32px}
.passos-dot{position:absolute;z-index:1;left:-28px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--acc-ink);transition:background-color .4s var(--ease),transform .4s var(--ease)}
.passos-step.is-lit .passos-dot{background:var(--acc);border-color:var(--acc);transform:scale(1.15)}
.passos-num{display:block;margin:0 0 4px;font:600 12px/1.2 var(--f-sans);letter-spacing:.12em;color:var(--acc-ink);font-variant-numeric:tabular-nums}
.passos-step:last-child .passos-dot{background:var(--acc-ink)}
.passos-step h3{font-weight:600;letter-spacing:-.02em;font-size:1.4rem;line-height:1.25;margin:0 0 6px;color:var(--ink)}
.passos-step>p{margin:0 0 6px;color:var(--mut);font-size:1.0625rem;line-height:1.55;max-width:30em}
.passos-more summary{justify-content:flex-start;gap:10px;font-size:.9375rem;font-weight:600;color:var(--acc-ink);min-height:44px}
.passos-more .acc__a p{padding:0 0 4px;font-size:1rem;max-width:30em}
@media (min-width:900px){
  .passos-line{flex-direction:row;gap:32px;padding:30px 0 0}
  .passos-line::before,.passos-line::after{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .passos-line::after{height:2px;top:4.5px;transform:scaleX(var(--p,1));transform-origin:left center}
  .js .passos-line::after{transform:scaleX(var(--p,0))}
  .passos-step{flex:1 1 0;min-width:0;padding:0 0 8px}
  .passos-dot{left:0;top:-30px}
  .passos-step h3{font-size:1.3rem}
}

/* o que esta incluido (acordeao) */
.passos-inc{margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.passos-inc>summary{min-height:60px;padding:14px 0;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink)}
.passos-inc>summary:hover{color:var(--acc-ink)}
.passos-recebes{list-style:none;margin:0;padding:0 0 16px;display:grid;grid-template-columns:1fr;column-gap:48px}
@media (min-width:640px){.passos-recebes{grid-template-columns:repeat(2,1fr)}}
.passos-recebes li{padding:12px 0 12px 26px;position:relative;display:flex;flex-direction:column;gap:2px}
.passos-inc>summary{transition:color .2s var(--ease)}
.passos-recebes li::before{content:"";position:absolute;left:3px;top:19px;width:10px;height:5px;border-left:1.5px solid var(--acc-ink);border-bottom:1.5px solid var(--acc-ink);transform:rotate(-45deg)}
.passos-recebes strong{font-weight:600;color:var(--ink);font-size:1.0625rem;line-height:1.4;letter-spacing:-.01em}
.passos-recebes span{color:var(--mut);font-size:.9375rem;line-height:1.55}

/* == 04-planos.css == */
/* 04 - Planos */
.pl-head{max-width:46rem;margin:0 0 2.5rem}
.pl-lede{font-size:1.1875rem;line-height:1.6;color:var(--mut);margin:0;max-width:34em}

.pl-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:stretch}
.pl-col{display:flex}
.pl-card{position:relative;flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.75rem 1.5rem;overflow:hidden;border-width:1.5px;transition:border-color .25s ease,background-color .25s ease}
.pl-card:focus-within{border-color:var(--ink)}
.pl-card--ess{border-color:#9A9181}
.pl-card--feat{border-radius:var(--r-lg);border-color:var(--acc);padding:2.1rem 1.5rem 1.75rem}
.pl-card--feat:focus-within{border-color:var(--acc)}
.pl-badge{align-self:flex-start;font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--acc-ink);border:1px solid var(--acc);border-radius:var(--r-sm);padding:.25rem .6rem;margin-bottom:16px}
.pl-name{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.pl-tag{color:var(--mut);font-size:.9375rem;line-height:1.5;margin:0 0 24px;min-height:3em;max-width:34em}
.pl-price{display:flex;align-items:baseline;margin:0;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.pl-num{font-size:clamp(3.2rem,8vw,4.4rem);font-variant-numeric:tabular-nums}
.pl-cur{font-size:1.8rem;margin-left:.15em}
.pl-card--feat .pl-num{color:var(--acc-ink)}
.pl-once{font-size:.9375rem;color:var(--mut);margin:8px 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.pl-intro{font-weight:600;margin:0 0 16px;font-size:.9375rem;line-height:1.5}
.pl-list{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.7rem;flex:1;align-content:start}
.pl-list li{position:relative;padding-left:1.7rem;font-size:.9375rem;line-height:1.5}
.pl-list li::before{content:"";position:absolute;left:.2rem;top:.38em;width:.4rem;height:.75rem;border:solid var(--acc-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(1);transform-origin:center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pl-btn{width:100%;justify-content:center;text-align:center;min-height:48px}

.pl-cmp{margin-top:4.5rem}
.pl-cmp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 0 12px}
.pl-cmp>summary::-webkit-details-marker{display:none}
.pl-cmp>summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--acc-ink);border-bottom:1.5px solid var(--acc-ink);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.pl-cmp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.pl-cmp>summary:hover .pl-cmp-title{color:var(--acc-ink)}
.pl-cmp>summary:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:var(--r-sm)}
.pl-cmp-title{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0;transition:color .2s ease}
.pl-cmp__body{position:relative;overflow:hidden}
.pl-tablewrap{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.pl-tablewrap:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pl-table{width:100%;min-width:34rem;border-collapse:collapse;border-radius:0;font-size:.9375rem}
.pl-table th,.pl-table td{padding:.8rem .75rem;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.pl-table thead th{font-weight:600;vertical-align:bottom;padding-top:1rem}
.pl-table th:first-child,.pl-table tbody th{text-align:left;font-weight:400;padding-left:0}
.pl-table thead th:first-child{font-weight:600}
.pl-th-p{display:block;font-weight:400;color:var(--mut);font-size:.8125rem}
.pl-table .is-feat{background:rgba(160,126,66,.07)}
.pl-table thead .is-feat{border-top:3px solid var(--acc)}
.pl-yes{display:inline-block;width:.4rem;height:.75rem;border:solid var(--acc-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-2px,-2px)}
.pl-no{color:var(--mut);font-size:.8em}
/* telemovel: a coluna das funcionalidades fica fixa a esquerda e as dos planos deslizam; sombra a direita indica que ha mais */
@media (max-width:699px){
  .pl-table{min-width:27rem;font-size:.875rem;table-layout:fixed}
  .pl-table th,.pl-table td{padding-inline:.5rem}
  .pl-table thead th:first-child,.pl-table tbody th{position:sticky;left:0;z-index:1;background:var(--paper);width:40vw;padding-right:.75rem;box-shadow:1px 0 0 var(--line)}
  .pl-cmp__body::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(90deg,rgba(247,242,234,0),var(--paper))}
}
/* EN: o simbolo do euro vem antes do numero (195 € -> €195) */
html[data-lang="en"] .pl-price{flex-direction:row-reverse;justify-content:flex-end}
html[data-lang="en"] .pl-cur{margin:0 .06em 0 0}

.pl-note{margin-top:2.5rem;max-width:46rem;border-left:3px solid var(--acc);padding-left:1.1rem}
.pl-note-strong{font-weight:600;margin:0 0 8px;font-size:1.0625rem}
.pl-note-small{color:var(--mut);margin:0;font-size:.9375rem;line-height:1.6;max-width:60ch}

@media (min-width:900px){
  .pl-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .pl-col--feat{margin-top:-8px;margin-bottom:8px}
  .pl-card{padding:2rem 1.75rem}
  .pl-card--feat{padding:2.4rem 1.75rem 2rem}
}
@media (prefers-reduced-motion:reduce){
  .pl-card,.pl-list li::before{transition:none}
}

.pl-table tbody tr{transition:background-color .2s ease}
.pl-table tbody tr:hover{background-color:rgba(26,23,20,.03)}

.pl-pages{font-size:1rem;font-weight:600;margin:0 0 20px;color:var(--ink)}
.pl-acc{border-top:1px solid var(--line)}
.pl-acc:last-of-type{margin-bottom:1.5rem}
.pl-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-weight:600;font-size:.9375rem}
.pl-acc summary::-webkit-details-marker{display:none}
.pl-acc summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--acc-ink);border-bottom:1.5px solid var(--acc-ink);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.pl-acc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pl-acc summary:hover{color:var(--acc-ink)}
.pl-acc summary:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:var(--r-sm)}
.pl-acc-body{overflow:hidden}
.pl-acc-body .pl-list{margin:0;padding:2px 0 16px}
@media (prefers-reduced-motion:reduce){.pl-acc summary::after{transition:none}}

/* cartoes: sobem 4px e a borda muda de cor (so com rato); sem brilho a seguir o cursor */
.pl-card{transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
@media(hover:hover){
  .pl-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(42,36,32,.35)}
  .pl-card--ess:hover{border-color:var(--ink)}
  .pl-card:not(.pl-card--feat):not(.pl-card--ess):hover{border-color:var(--ink)}
}
.pl-card--feat{box-shadow:0 18px 40px -28px rgba(15,30,61,.4)}
.pl-any{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 16px;max-width:34em;border-radius:var(--r-md);background:var(--acc-tint);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.45}
.pl-any__dot{flex:none;width:8px;height:8px;margin-top:.45em;border-radius:50%;background:var(--acc)}

/* ronda 5: cartoes simetricos (badge sobre a borda, linhas partilhadas, botoes alinhados) e texto pequeno legivel */
.pl-card{overflow:visible}
.pl-card--feat{border-radius:var(--r-md);padding-top:2.1rem}
.pl-badge{position:absolute;top:0;left:1.5rem;transform:translateY(-50%);margin:0;background:var(--surface);font-size:.8125rem}
.pl-tag{font-size:.9375rem;color:#4A5262}
.pl-once{font-size:.9375rem;color:#4A5262}

.pl-list li{font-size:.9375rem}
.pl-btn{margin-top:auto}
.pl-th-p{font-size:.875rem;color:#4A5262}
.pl-table{font-size:.9375rem}
.pl-note-small{color:#4A5262;font-size:.9375rem}
@media (min-width:900px){
  .pl-col--feat{margin:0}
  .pl-card,.pl-card--feat{padding:2.2rem 1.75rem 2rem}
  .pl-badge{left:1.75rem}

  @supports (grid-template-rows:subgrid){
    .pl-grid{grid-template-rows:repeat(9,auto);row-gap:0}
    .pl-col{display:grid;grid-row:span 9;grid-template-rows:subgrid}
    .pl-card{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:0}
  }
}

/* Orcamento Especial (faixa a parte, fora da grelha dos 3 planos) */
/* Orçamento Especial: faixa à parte, fora da grelha dos 3 planos e fora da comparação */
.pl-esp{margin-top:3.5rem;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;padding:2rem 1.75rem;border-radius:var(--r-md,20px);background:var(--ink);color:var(--paper)}
.pl-esp__eyebrow{margin:0 0 .5rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.pl-esp__title{margin:0 0 .6rem;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;color:inherit}
.pl-esp__p{margin:0;max-width:44rem;opacity:.9;line-height:1.6}
.pl-esp__btn{background:var(--paper);color:var(--ink);border-color:var(--paper);white-space:nowrap}
.pl-esp{flex-direction:row;align-items:center;justify-content:space-between;padding:2.4rem 2.6rem}}

/* descontos: preco antes (riscado), etiqueta e preco final */
.pl-was{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:1rem}
.pl-was-n{color:var(--mut);text-decoration-thickness:1.5px;text-decoration-color:var(--acc-ink)}
.pl-off{display:inline-block;padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--champ);color:var(--noite);font-size:.8125rem;font-weight:700;letter-spacing:.02em}

/* == 04z-ponte.css == */
/* Pontes de fotos entre secções: restaurantes ao longo do site, sem espaços em branco */
.ponte{padding:clamp(8px,2vw,24px) 0 clamp(40px,6vw,80px)}
.ponte__moldura{position:relative;overflow:hidden;border-radius:var(--r-lg,24px);background:var(--line)}
.ponte__img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.ponte.in .ponte__img,.ponte__moldura:hover .ponte__img{transform:scale(1)}
.ponte--larga .ponte__moldura{border-radius:0;height:clamp(280px,48vw,560px)}
.ponte--larga .ponte__img{height:118%;margin-top:-9%}
.ponte__grelha{display:grid;gap:clamp(12px,1.6vw,20px)}
.ponte--duas .ponte__grelha{grid-template-columns:1fr}
.ponte--duas .ponte__moldura{aspect-ratio:16/10}
.ponte--tres .ponte__grelha{grid-template-columns:1fr}
.ponte--tres .ponte__moldura{aspect-ratio:4/3}
@media(min-width:900px){
  .ponte--duas .ponte__grelha{grid-template-columns:.8fr 1.2fr;align-items:stretch}
  .ponte--duas .ponte__moldura{aspect-ratio:auto;min-height:420px}
  .ponte--tres .ponte__grelha{grid-template-columns:1fr 1.15fr 1fr;align-items:end}
  .ponte--tres .ponte__moldura:nth-child(2){aspect-ratio:4/4.4}
}
@media(prefers-reduced-motion:reduce){.ponte__img{transform:none;transition:none}}

/* == 06-exemplo.css == */
.ex{overflow-x:clip}
.ex-grid{display:grid;gap:40px;align-items:center}
.ex-lede{font-size:1.1875rem;line-height:1.6;color:var(--mut);margin:0 0 24px;max-width:34em}
.ex-copy .btn{min-height:48px}
.ex-stage{position:relative;margin:0;width:100%;max-width:720px;margin-inline:auto}
.ex-stage::before{content:"";position:absolute;z-index:-1;left:50%;top:45%;width:100%;aspect-ratio:1.5;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(160,126,66,.1),transparent);pointer-events:none}
.dev--ex{padding:0 0 4% 14%}
.dev--ex .mon{display:block;position:relative;container-type:inline-size;container-name:mon}
.dev--ex .ph{position:absolute;left:0;bottom:0;width:26%;margin:0;z-index:2;transition:transform .5s var(--ease)}
.ex-view{background:#1F2A3A}
.ex-view picture{display:contents}
.ex-view img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center}
.br__tag--real{display:inline-flex;align-items:center;gap:.6cqw;background:#E3F1E6;color:#256B3A}
.br__tag--real::before{content:"";width:.9cqw;height:.9cqw;border-radius:50%;background:#2F8F4E}
.ex-cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:.01em}
.ex-cap__dot{width:7px;height:7px;border-radius:50%;background:#2F8F4E;box-shadow:0 0 0 4px #E3F1E6}
@media(hover:hover){.ex-stage:hover .dev--ex .ph{transform:translateY(-8px)}}
.ex-about{margin-top:clamp(56px,8vw,96px);padding-top:40px;border-top:1px solid var(--line);display:grid;gap:32px}
.ex-about h3{font-size:clamp(1.5rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.ex-about p:not(.eyebrow){margin:0;color:var(--mut);max-width:34em}
.ex-contacts{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start}
.ex-contacts li>span{display:block;font-size:13px;color:var(--mut);text-transform:none;letter-spacing:0;font-weight:600}
.ex-contacts .btn span{display:inline;font-size:inherit;color:inherit;text-transform:none;letter-spacing:inherit;font-weight:inherit}
.ex-contacts a:not(.btn){display:inline-block;min-height:44px;line-height:44px;font-size:1.15rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;overflow-wrap:anywhere}
.ex-contacts a:not(.btn):hover{text-decoration-color:var(--acc)}
@media(min-width:900px){
  .ex-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  .ex-about{grid-template-columns:1.2fr 1fr;gap:64px}
}

/* == 07-fecho.css == */
.fecho-faq__grid{display:grid;gap:32px}
.fecho-faq__lede{color:var(--mut);font-size:1.1875rem;line-height:1.6;margin:0;max-width:34em}
.fecho-faq__list{border-top:1px solid var(--line)}
.fecho-item{border-bottom:1px solid var(--line)}
.fecho-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-weight:600;font-size:1.0625rem;letter-spacing:-0.01em}
.fecho-item summary::-webkit-details-marker{display:none}
.fecho-item summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--acc-ink);border-bottom:2px solid var(--acc-ink);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.fecho-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fecho-item summary:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:var(--r-sm)}
.fecho-item__a{overflow:hidden}
.fecho-item__a p{margin:0;padding:0 0 24px;color:var(--mut);max-width:62ch}
@media(min-width:900px){
  .fecho-faq__grid{grid-template-columns:5fr 7fr;gap:64px}
  .fecho-faq__head{position:sticky;top:110px;align-self:start}
}
/* fecho: faixa clara em Veu de Ouro, uma grande linha em serif (sem foto, sem bloco escuro) */
.fecho-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--acc-tint);color:var(--ink);padding:clamp(72px,10vw,128px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fecho-cta__in{text-align:center;display:flex;flex-direction:column;align-items:center}
/* simbolo MP (nunca rodado, sem sombra nem brilho no ficheiro) */
.fecho-cta__mark{width:64px;height:64px;margin:0 auto 22px;--mk-l:var(--brand);--mk-a:var(--ouro)}
.fecho-cta__t{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1;letter-spacing:-.035em;color:var(--ink);margin:0 0 20px}
.fecho-cta__t .serif{color:var(--acc-ink)}
.fecho-cta__t .w{display:inline-block;white-space:pre}
.fecho-cta__t.split .w{opacity:0;transform:translateY(.3em)}
.fecho-cta__t.split.in .w{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--wi) * 90ms)}
.fecho-cta p{color:var(--mut);font-size:1.1875rem;line-height:1.6;margin:0 auto 32px;max-width:34em}
.fecho-cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fecho-cta__btns .btn{min-height:52px}
@media(max-width:479px){.fecho-cta__btns{width:100%}.fecho-cta__btns .btn{flex:1 1 100%}}

/* foto de esplanada atrás do convite final */
.fecho-cta{background:var(--ink);color:#FAF6EF}
.fecho-cta__bg{position:absolute;inset:0;z-index:-1}
.fecho-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,27,22,.62),rgba(31,27,22,.76))}
.fecho-cta__img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.fecho-cta__t,.fecho-cta__t .serif{color:#FAF6EF}
.fecho-cta__t .serif{color:#F3C9A8}
.fecho-cta p{color:#E9E1D3}
.fecho-cta .btn-line{color:#FAF6EF;border-color:#FAF6EF}

/* == 08-rodape.css == */
.rodape{background:var(--noite);color:#F7F3EA;padding:64px 0 24px;border-radius:0}
.rodape a{color:#F7F3EA;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape__grid{display:grid;gap:32px}
.rodape h3{font-size:13px;line-height:1.3;letter-spacing:0;text-transform:none;font-weight:600;color:var(--nevoa);margin:0 0 12px}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li a{display:inline-block;line-height:1.5;padding:6px 0}
@media(max-width:800px){.rodape li a{display:inline-flex;align-items:center;min-height:44px}}
.rodape__logo{display:inline-flex;align-items:center;gap:12px;min-height:48px}
/* logotipo principal invertido (com descritor; minimo 180 px) */
.rodape__logo .rodape__lg{display:block;width:208px;height:auto;aspect-ratio:520/220;--mk-l:var(--champ);--mk-a:var(--ouro-noite);--mk-d:var(--champ)}
.rodape .rodape__logo:hover{text-decoration:none}
.rodape__brand p{margin:14px 0 0;color:var(--nevoa);max-width:34ch}
.rodape__base{margin-top:40px;padding-top:20px;border-top:1px solid rgba(247,243,234,.14);display:flex;flex-direction:column;gap:6px;font-size:.8125rem;color:var(--nevoa)}
.rodape__base p{margin:0}
@media(min-width:800px){
  .rodape__grid{grid-template-columns:1.4fr 1fr 1fr}
  .rodape__base{flex-direction:row;justify-content:space-between}
}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;background:var(--brand);color:var(--paper);border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;text-decoration:none;box-shadow:0 10px 24px -10px rgba(15,30,61,.65),0 2px 6px rgba(18,24,38,.12);animation:waPulse 1.1s var(--ease) 8s 1}
/* com JS: so aparece quando nao ha outro botao de WhatsApp a vista (09-detalhes.js poe .is-on) */
.js .wa-float{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s,background-color .25s var(--ease)}
.js .wa-float.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s linear 0s,background-color .25s var(--ease)}
.wa-float svg{width:20px;height:20px}
.wa-float:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover){.wa-float:hover,.js .wa-float.is-on:hover{background:var(--brand-hover);transform:translateY(-2px)}}
@keyframes waPulse{0%{box-shadow:0 10px 24px -10px rgba(15,30,61,.65),0 0 0 0 rgba(160,126,66,.45)}100%{box-shadow:0 10px 24px -10px rgba(15,30,61,.65),0 0 0 16px rgba(160,126,66,0)}}
@media(max-width:480px){.wa-float{width:52px;height:52px;justify-content:center;padding:0}.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* == 09-detalhes.css == */
/* 09 - Detalhes globais (microinteracoes uniformes). So transform/opacity/background. */
html{scroll-padding-top:0}
section[id]{scroll-margin-top:72px}
::selection{background:rgba(160,126,66,.28);color:var(--ink)}
.sec-dark ::selection{background:rgba(214,188,134,.4);color:#fff}
a,button,summary,.btn{-webkit-tap-highlight-color:transparent}
a,button,summary,[role=button]{cursor:pointer}

/* nav: sublinhado fino que cresce */
.nav__links a{position:relative;padding:6px 0;transition:color .2s ease}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease)}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a.is-on::after{transform:scaleX(1)}
.nav__lang{transition:border-color .2s ease,background-color .2s ease}
.nav__lang:hover{background:rgba(26,23,20,.04)}

/* cartoes e linhas de tabelas */
.card,.cu-card,.ex-card,.pa-card{transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
table tbody tr{transition:background-color .2s ease}
table tbody tr:hover{background-color:rgba(26,23,20,.03)}
.fecho-item summary{transition:color .2s ease}
.fecho-item summary:hover{color:var(--acc-ink)}

/* barra de progresso de scroll */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--acc);transform:scaleX(0);transform-origin:left center;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn:hover,.btn:active,.wa-float,.wa-float:hover,.card,.pl-card,.pl-card:hover{transition:none;transform:none}
  .nav__links a:hover::after{transform:scaleX(1)}
}

/* ===== ronda 5 ===== */
/* barra fixa: papel opaco (o texto de baixo nunca se le atraves dela) */
.nav.is-solid{background:var(--paper)}
.nav.on-dark.is-solid{background:#100D0B}
/* "Contacto" e WhatsApp ocupam o mesmo espaco: a barra nunca se reorganiza a meio do scroll */
.nav__cta,.nav__cta.is-wa{display:inline-grid;place-items:center;padding:0 16px;width:auto}
.nav__cta>.nav__cta-c,.nav__cta>.nav__cta-w,.nav__cta.is-wa>.nav__cta-c{grid-area:1/1;display:inline-flex;align-items:center;transition:opacity .2s var(--ease),visibility 0s}
.nav__cta>.nav__cta-w{visibility:hidden;opacity:0}
.nav__cta.is-wa>.nav__cta-c{visibility:hidden;opacity:0}
.nav__cta.is-wa>.nav__cta-w{visibility:visible;opacity:1}
@media(max-width:399px){.nav__cta,.nav__cta.is-wa{width:auto;padding:0 12px}}
@media(max-width:359px){.nav__cta,.nav__cta.is-wa{display:none}}
.nav__cta{font-size:15px}

/* abertura: titulo visivel logo no primeiro desenho */
.hero-title.split .w{opacity:1;transform:none;animation:none}
.js .hero-lbl,.js .rot,.js .hero-sub{animation:none}
/* rotulo em Inter (sem monoespacada) e ponto em ouro */
.hero-lbl{font:600 12px/20px var(--f-sans);letter-spacing:.08em}
.hero-lbl__dot{background:var(--ouro-noite);box-shadow:0 0 0 3px rgba(184,149,90,.2)}
/* palavra de fundo: so no computador, muito discreta e sempre dentro do palco */
.st__words{display:none}
@media(min-width:900px){
  .st__words{display:grid;left:var(--gutter);right:var(--gutter);overflow:hidden}
  .st__words span{font-size:clamp(140px,12vw,220px);color:rgba(255,245,235,.03)}
}
/* botao principal da abertura (computador): Ver planos + Ver exemplos */
.hero-acts{display:none}
@media(min-width:900px){
  :root{--top-h:calc(clamp(300px,calc(160px + 21vh),370px) + 60px)}
  .hero-acts{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 0}
  .btn-hero{min-height:46px;padding:0 24px;border-radius:var(--r-pill);background:var(--champ);color:var(--noite);font-size:15px}
  @media(hover:hover){.btn-hero:hover{background:var(--champ-hover);transform:translateY(-1px)}}
  .hero-acts__sec{display:inline-flex;align-items:center;min-height:44px;color:rgba(246,240,232,.86);font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:rgba(246,240,232,.3);text-underline-offset:5px}
  .hero-acts__sec:hover{color:#fff;text-decoration-color:var(--ouro-noite)}
}
@media(min-width:900px) and (max-height:820px){
  :root{--top-h:calc(clamp(300px,calc(160px + 21vh),370px) + 30px)}
  .hero-acts{margin-top:12px}
}
/* telemovel: separadores cabem inteiros; links da barbearia logo por baixo do telemovel */
@media(max-width:399px){
  .chips{gap:10px}
  .chip{font-size:14px}
}
@media(max-width:899px){
  .hero-pjb{order:2;margin-top:10px}
  .hero-chips{order:3}
  .hero-ctl{order:4;margin-top:6px}
  .sp-stack{--sp-w:clamp(196px,min(64vw,calc((100svh - 330px) * .47)),300px)}
}

/* prova real logo a seguir a abertura */
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0 0 clamp(48px,7vw,88px);padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:15px;line-height:1.4}
.proof__k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.proof__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ouro)}
.proof__n{font-weight:600;color:var(--ink)}
.proof__a{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--mut);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.proof__a:hover{color:var(--ink);text-decoration-color:var(--acc)}
.proof__a svg{width:13px;height:13px}
.proof__more{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none}
.proof__more:hover{color:var(--acc-ink)}
@media(max-width:639px){.proof__more{margin-left:0}}

/* "Porque um site": titulo curto + lede */
.intro-title{max-width:16em;margin:0 0 16px}
.intro-lede{margin:0 0 clamp(40px,6vw,72px)}

/* como funciona e custos: uma coluna (sem fotografias de ambiente) */

.passos-head{max-width:46rem}
.passos-lede{margin-bottom:0}

/* menos vazio entre custos e trabalho feito */
#custos{padding-bottom:clamp(64px,8vw,104px)}
#exemplo{padding-top:clamp(64px,8vw,104px)}

/* um so chevron para todos os acordeoes */
.acc summary::after,.pl-cmp>summary::after,.custos-item summary::after,.fecho-item summary::after{width:8px;height:8px;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transition:transform .25s var(--ease),border-color .2s var(--ease)}
.acc summary:hover::after,.pl-cmp>summary:hover::after,.custos-item summary:hover::after,.fecho-item summary:hover::after{border-color:var(--acc-ink)}

/* sem verde: estado "real / no ar" em ouro */
.ex-cap__dot{background:var(--ouro);box-shadow:0 0 0 4px var(--veu)}
.br__tag--real,.sbr__tag--live{background:var(--veu);color:var(--bronze)}
.br__tag--real::before,.sbr__tag--live::before{background:var(--ouro)}
.ex-cap{font-size:13px}
.hero-pjb{font-size:13px}
@media(min-width:900px){.ex-grid{align-items:start}.ex-copy{padding-top:56px}}
@media(max-width:399px){.nav__cta .nav__cta-w>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:399px){.hero-pjb{gap:2px 12px;flex-wrap:nowrap}.hero-pjb a{white-space:nowrap}}
/* tablet: as quatro etapas em duas colunas (a seccao ocupa a largura toda) */
@media(min-width:700px) and (max-width:899px){
  .passos-line{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;padding-left:28px}
  .passos-line::before,.passos-line::after{display:none}
}

/* ===== ronda 6 ===== */
/* rotulos: texto normal, sem letras espacadas nem pontos */
.eyebrow::before{display:none}
.hero-lbl{font:500 13px/20px var(--f-sans);letter-spacing:0}
.passos-num{font-size:13px;letter-spacing:0}
.d-eyebrow,.d-info b,.ds-cat,.sbr__tag,.br__tag{letter-spacing:0;text-transform:none}
.d-eyebrow{font-size:1em}
.d-info b{font-size:.92em}
.ds-cat{font-size:.85em}
.sbr__tag{font-size:1.05cqw}
/* sem palavra fantasma por tras do titulo */
.st__words,.st__words span{display:none!important}
.demo--barb{--d-fw:700;--d-tt:none;--d-ls:-.03em;--d-r:.35em;--d-ri:.4em}

/* botao da abertura em todas as larguras (no telemovel compacto, logo por baixo do titulo) */
.btn-hero{min-height:46px;padding:0 24px;border-radius:var(--r-pill);background:var(--champ);color:var(--noite);font-size:15px}
@media(hover:hover){.btn-hero:hover{background:var(--champ-hover);transform:translateY(-1px)}}
.hero-acts__sec{display:inline-flex;align-items:center;min-height:44px;color:rgba(246,240,232,.86);font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:rgba(246,240,232,.3);text-underline-offset:5px}
.hero-acts__sec:hover{color:#fff;text-decoration-color:var(--ouro-noite)}
@media(max-width:899px){
  .hero-acts{display:flex;align-items:center;justify-content:center;gap:20px;margin:14px 0 0}
  .btn-hero{min-height:44px;padding:0 20px}
  .sp-stack{--sp-w:clamp(190px,min(62vw,calc((100svh - 372px) * .47)),300px)}
  .hero-ctl{margin-top:2px}
}

/* barra no telemovel: simbolo + um botao + menu; idioma dentro do menu */
.nav__mono{display:none;width:40px;height:40px;--mk-l:var(--brand);--mk-a:var(--ouro)}
.nav.on-dark .nav__mono{--mk-l:var(--champ);--mk-a:var(--ouro-noite)}
.nav__lang--panel{display:none}
@media(max-width:899px){
  .nav__mark{display:none}
  .nav__mono{display:block}
  .nav__right>.nav__lang{display:none}
  .nav__right{gap:8px}
  .nav__panel .nav__lang--panel{display:flex;align-self:flex-start;margin:6px 12px 4px;color:var(--ink);border:1px solid var(--line);font-size:13px}
}
@media(max-width:359px){.nav__cta,.nav__cta.is-wa{display:inline-grid}}

/* escala de titulos: H1 claramente maior; H2 iguais; fecho nunca maior que o H1 */
h2{font-size:clamp(1.875rem,3vw,2.75rem)}
.fecho-cta__t{font-size:clamp(2.25rem,4.2vw,3.75rem)}
@media(max-width:599px){
  .hero-title{font-size:2.5rem;line-height:1.05}
  h2{font-size:1.875rem;line-height:1.12}
  .fecho-cta__t{font-size:2.25rem}
  h3,.intro-row h3,.passos-step h3,.ex-about h3,.custos__note-title,.pl-cmp-title{font-size:1.25rem}
  .pl-name{font-size:1.375rem}
  .lede,.passos-lede,.pl-lede,.custos__answer,.ex-lede,.fecho-faq__lede,.fecho-cta p{font-size:1.125rem}
}
/* rodape: logotipo curto, sem descritor em maiusculas */
.rodape__logo .rodape__lg{width:180px;aspect-ratio:520/216}
/* com o idioma no menu ha espaco: o botao do WhatsApp mostra o texto */
@media(max-width:899px) and (min-width:340px){.nav__cta .nav__cta-w>span,.nav__cta.is-wa .nav__cta-w>span{position:static;width:auto;height:auto;overflow:visible;clip:auto}.nav__cta,.nav__cta.is-wa{padding:0 16px}}
@media(max-width:899px){.nav__cta:not(.is-wa){justify-items:end;padding-right:6px}}
/* idioma dentro do menu (painel claro): legivel mesmo com a barra sobre fundo escuro */
@media(max-width:899px){.nav .nav__panel .nav__lang--panel,.nav.on-dark .nav__panel .nav__lang--panel{color:var(--ink-soft,#6B655C);border-color:var(--line)}.nav .nav__panel .nav__lang--panel [data-l]{color:inherit}.nav.nav .nav__panel .nav__lang--panel [data-l][aria-current="true"],.nav.on-dark .nav__panel .nav__lang--panel [data-l][aria-current="true"]{color:var(--ink)}}

/* ronda 7: letras. Titulos e numeros grandes em Schibsted Grotesk; texto em Public Sans.
   As palavras de destaque deixam de ser serif italico: mesma letra do titulo, so a cor muda. */
.hero-title{font-family:var(--f-head);font-weight:600;letter-spacing:-.03em}
.rot__w{font:inherit;font-style:normal;letter-spacing:inherit;line-height:1.05;color:var(--champ)}
.intro-lead,.intro-row h3,.ex-about h3,.fecho-cta__t,.pl-name,.pl-price,.nav__name{font-family:var(--f-head)}
.fecho-cta__t{font-weight:600;letter-spacing:-.03em}
.pl-num{font-weight:700;letter-spacing:-.03em}
.ng__type{font:600 4em/1 var(--f-head);letter-spacing:-.03em}
.ng__end{font-family:var(--f-head)}
.ng__end em{font:inherit;font-style:normal;color:#7D5F2A}
.eyebrow,.hero-lbl{font-family:var(--f-sans)}
/* sem maiusculas espacadas em lado nenhum (nem nos sites de exemplo) */
.d-eyebrow,.ds-cat,.proof__k,.br__tag,.sbr__tag{text-transform:none;letter-spacing:0}
.passos-num{letter-spacing:.02em}

/* ===== ronda 8 ===== */
/* letras com contraste: Fraunces (destaque) so em momentos grandes; Schibsted + Public Sans no resto */
.intro-lead{font-family:var(--f-display);font-weight:450;font-optical-sizing:auto;font-size:clamp(1.875rem,3.6vw,3.25rem);line-height:1.16;letter-spacing:-.022em;color:var(--ink);max-width:21em;text-wrap:pretty;margin:0 0 clamp(48px,7vw,96px)}
.intro-lead .intro-w{display:inline;white-space:normal}
.intro-eyebrow{font-size:13px;line-height:1.3;letter-spacing:0;margin:0 0 20px}
.pl-num{font-family:var(--f-display);font-weight:500;letter-spacing:-.025em;font-variant-numeric:lining-nums}
.fecho-cta__t .serif{font-weight:500}

/* trabalho feito no telemovel: titulo, texto, um so aparelho inteiro, botao largo */
@media(max-width:699px){
  .ex-grid{display:flex;flex-direction:column;gap:0}
  .js.ready .ex-copy.rv,.ex-copy{display:contents}
  .ex-copy .eyebrow{order:1;align-self:flex-start}
  .ex-copy h2,.ex-copy .ex-lede{align-self:stretch}
  .ex-copy h2{order:2;max-width:13em}
  .ex-copy .ex-lede{order:3;margin:0 0 28px}
  .ex-stage{order:4;max-width:none;margin:0;padding:28px 0 22px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line)}
  .ex-stage::before{display:none}
  .dev--ex{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
  .dev--ex .mon{display:none}
  .dev--ex .ph{position:relative;left:auto;bottom:auto;width:clamp(196px,56vw,232px);margin:0 auto}
  .ex-cap{margin-top:18px}
  .ex-copy .btn{order:5;width:100%;margin-top:20px}
  .ex-contacts .btn{width:100%}
}

/* == 99-cookies.css == */
/* Aviso de cookies */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;justify-content:center;pointer-events:none}
.ck[hidden]{display:none}
.ck__in{pointer-events:auto;max-width:560px;width:100%;background:#FBF8F2;color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 24px 60px -24px rgba(12,18,36,.45)}
.ck__t{margin:0 0 4px;font-weight:600;font-size:1rem}
.ck__p{margin:0 0 14px;font-size:.92rem;line-height:1.5;color:var(--ink)}
.ck__btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ck__btns .btn{min-height:44px;padding:0 18px}
.ck__link{font-size:.88rem;color:var(--acc-ink);margin-left:auto;text-decoration:underline;text-underline-offset:3px}
@media (prefers-color-scheme:dark){.ck__in{background:#FBF8F2;color:#141A2C}}