/*═════════ TIPOGRAFIA ═════════
  As fontes são servidas do próprio domínio, não do Google Fonts.
  Assim nenhum visitante tem o IP enviado para os EUA antes de dar
  consentimento, e o site não precisa de barra de cookies.
  Ficheiros variáveis: Archivo (peso + largura) e Inter Tight (peso). */
@font-face{
  font-family:'Archivo';
  src:url('media/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('media/fonts/inter-tight-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/*═══════════════════════════════════════════════════════════════
  VILLA VITALIS® — SISTEMA
  --volt é o verde oficial da marca. Confirmar hex e trocar aqui.
  Secções claras: adicionar a classe .light — inverte os tokens.
═══════════════════════════════════════════════════════════════*/
:root{
  --volt:#90C008;         /* verde oficial da marca (do logótipo) */
  --volt-hi:#B4E82A;      /* tom claro — estados de hover sobre escuro */
  --on-volt:#0A0E09;      /* texto sobre verde — nunca inverte */
  --volt-t:var(--volt);   /* verde legível como texto */

  --ink:#070A06;
  --ink-2:#0D110B;
  --carbon:#151A13;
  --line:rgba(242,242,238,.14);
  --line-2:rgba(242,242,238,.07);
  --paper:#F2F2EE;
  --mute:#8C9186;
  --mute-2:#787E72;   /* subiu de #5E6359: a 10-11 px dava 3,2:1 e as micro-etiquetas liam-se mal */
  --dim:rgba(242,242,238,.13);

  --d:'Archivo',Helvetica,Arial,sans-serif;
  --b:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --max:1560px;
  --pad:clamp(20px,4.4vw,72px);
  --sec:clamp(84px,12vw,180px);
  --e:cubic-bezier(.19,1,.22,1);
  --e2:cubic-bezier(.65,0,.35,1);
}

/* ── TEMA CLARO (por secção) ── */
.light{
  --ink:#F5F5F1;
  --ink-2:#EBEBE5;
  --carbon:#FFFFFF;
  --line:rgba(10,14,9,.17);
  --line-2:rgba(10,14,9,.10);
  --paper:#0A0E09;
  --mute:#5C6157;
  --mute-2:#696E63;   /* subiu de #8E9388: em fundo claro dava 2,9:1, abaixo do mínimo legível */
  --dim:rgba(10,14,9,.13);
  --volt-t:#5F7A00;
  background:var(--ink);color:var(--paper);
}
.light .ph{background:linear-gradient(135deg,#E5E5DF 0%,#D3D3CB 45%,#EEEEE8 100%)}
.light .ph::after{color:rgba(10,14,9,.24)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--b);font-size:clamp(15px,.95vw,16.5px);line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.lock{overflow:hidden}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--volt);color:var(--on-volt)}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--d);font-weight:500;line-height:.92;letter-spacing:-.035em;text-transform:uppercase;font-variation-settings:'wdth' 108}
.d1{font-size:clamp(3.4rem,13.2vw,13.5rem);font-weight:600;line-height:.84;letter-spacing:-.045em}
.d2{font-size:clamp(2.4rem,7.2vw,6.4rem);line-height:.9;letter-spacing:-.04em;font-weight:500}
.d3{font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:.98;letter-spacing:-.03em}
.d4{font-size:clamp(1.05rem,1.45vw,1.32rem);line-height:1.1;letter-spacing:-.015em;font-weight:600;font-variation-settings:'wdth' 100}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:var(--sec)}
.tnum{font-variant-numeric:tabular-nums}

.mono{font-family:var(--d);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:'wdth' 92}
.idx{display:flex;align-items:center;gap:.9rem;color:var(--mute)}
.idx b{color:var(--volt-t);font-weight:500}
.idx::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:120px}
.lede{font-size:clamp(1.02rem,1.4vw,1.34rem);line-height:1.45;color:var(--mute);font-weight:300;letter-spacing:-.012em}
.body-m{color:var(--mute);font-size:.96rem;line-height:1.62}
.volt{color:var(--volt-t)}

/* ── grão ── */
.grain{
  position:fixed;inset:-120px;z-index:9000;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}
@media(prefers-reduced-motion:no-preference){.grain{animation:grainShift 8s steps(6) infinite}}
@keyframes grainShift{0%{transform:translate(0,0)}17%{transform:translate(-14px,9px)}33%{transform:translate(11px,-13px)}50%{transform:translate(-9px,-8px)}67%{transform:translate(13px,7px)}83%{transform:translate(-6px,12px)}100%{transform:translate(0,0)}}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--volt);z-index:8000;will-change:transform}

.cur,.cur-d{position:fixed;top:0;left:0;z-index:8500;pointer-events:none;border-radius:50%;mix-blend-mode:difference}

/*═════════ BOTÃO VOLTAR ═════════*/
.back{
  position:fixed;left:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:7100;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.05rem;border-radius:100px;
  background:rgba(10,14,9,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(144,192,8,.42);color:#F2F2EE;
  font-family:var(--d);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--e),transform .45s var(--e),visibility .45s,border-color .3s,background .3s
}
.back.on{opacity:1;visibility:visible;transform:none}
.back:hover{background:rgba(10,14,9,.92);border-color:var(--volt)}
.back svg{width:14px;height:14px;flex:none}
@media(max-width:760px){.back{padding:.8rem 1.1rem;font-size:.72rem}}

/*═════════ VÍDEO: BOTÃO SE O AUTOPLAY FOR BLOQUEADO ═════════*/
.vplay{
  position:absolute;right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:6;
  display:none;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:100px;
  background:rgba(10,14,9,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(242,242,238,.4);color:#F2F2EE;cursor:pointer;
  font-family:var(--d);font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,border-color .3s
}
.vplay.on{display:inline-flex}
.vplay:hover{background:rgba(10,14,9,.88);border-color:var(--volt)}
.cur{width:36px;height:36px;border:1px solid rgba(242,242,238,.55);margin:-18px 0 0 -18px;transition:width .38s var(--e),height .38s var(--e),margin .38s var(--e),background .38s var(--e),border-color .38s var(--e)}
.cur-d{width:5px;height:5px;background:#F2F2EE;margin:-2.5px 0 0 -2.5px}
.cur.on{width:78px;height:78px;margin:-39px 0 0 -39px;background:#F2F2EE;border-color:transparent}
.cur.on::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--d);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#0A0E09;mix-blend-mode:normal}
@media(hover:none),(pointer:coarse){.cur,.cur-d{display:none}}

/* ── botões ── */
.btn{
  --bg:var(--volt);--fg:var(--on-volt);
  position:relative;display:inline-flex;align-items:center;gap:1.1rem;
  padding:1.12rem 1.9rem;background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  font-family:var(--d);font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  border-radius:100px;transition:color .45s var(--e);will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--paper);transform:translateY(101%);transition:transform .55s var(--e)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--ink)}
.btn .ar{position:relative;z-index:2;width:16px;height:16px;transition:transform .5s var(--e)}
.btn:hover .ar{transform:translate(4px,-4px)}
.btn-ghost{--bg:transparent;--fg:var(--paper);border:1px solid var(--line)}
.btn-ghost::before{background:var(--volt)}
.btn-ghost:hover{color:var(--on-volt)}
.btn-lg{padding:1.35rem 2.4rem;font-size:.74rem}
.btn-dark{--bg:var(--on-volt);--fg:#F2F2EE}
.btn-dark::before{background:#F2F2EE}
.btn-dark:hover{color:var(--on-volt)}

.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e)}
.ul:hover::after{transform:scaleX(1);transform-origin:0 50%}

/*═════════ NAV ═════════*/
.nav{position:fixed;inset:0 0 auto 0;z-index:7000;padding-block:clamp(16px,2vw,26px);transition:transform .6s var(--e),background .5s var(--e),padding .5s var(--e);color:#F2F2EE}
.nav.hide{transform:translateY(-105%)}
.nav.solid{background:rgba(7,10,6,.74);backdrop-filter:blur(18px) saturate(1.3);padding-block:14px}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.mark{display:flex;align-items:center;gap:.62rem;line-height:1}
.lg-sym{width:30px;height:30px;flex:none}
.lg-word{height:19px;width:120px;flex:none}
.lg-lock{display:flex;align-items:center;gap:.8rem}
.mark-sub{display:none}
@media(min-width:900px){.mark-sub{display:block;font-family:var(--d);font-size:.55rem;letter-spacing:.19em;text-transform:uppercase;color:var(--mute-2);margin-left:1.1rem;padding-left:1.1rem;border-left:1px solid rgba(242,242,238,.14);align-self:center}}
.nav-r{display:flex;align-items:center;gap:.8rem}
.nav-links{display:none;gap:2.1rem;margin-right:1.2rem}
@media(min-width:1150px){.nav-links{display:flex}}
.nav-links a{font-family:var(--d);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8C9186;transition:color .35s}
.nav-links a:hover{color:#F2F2EE}
.nav .btn{padding:.82rem 1.35rem;font-size:.62rem}
.nav .btn::before{background:#F2F2EE}
.nav .btn:hover{color:var(--on-volt)}
.burger{width:46px;height:46px;border:1px solid rgba(242,242,238,.14);border-radius:50%;display:grid;place-items:center;gap:5px;align-content:center;transition:border-color .4s}
.burger:hover{border-color:var(--volt)}
.burger i{display:block;width:15px;height:1.5px;background:#F2F2EE;transition:transform .45s var(--e)}
.burger.x i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.x i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
@media(min-width:1150px){.burger{display:none}}

.menu{position:fixed;inset:0;z-index:6900;background:#0D110B;color:#F2F2EE;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem;clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--e);visibility:hidden}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu ol{display:grid;gap:.1rem}
.menu li{overflow:hidden}
.menu ol a{display:flex;align-items:baseline;gap:1.1rem;padding:.35rem 0;font-family:var(--d);font-weight:600;font-size:clamp(1.85rem,7.4vw,4.2rem);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;transform:translateY(105%);transition:transform .8s var(--e),color .35s}
.menu.open ol a{transform:translateY(0)}
.menu ol a small{font-family:var(--d);font-size:.6rem;letter-spacing:.2em;color:var(--volt);font-weight:500}
.menu ol a:hover{color:var(--volt)}
.menu-foot{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem 2.4rem;color:#8C9186;opacity:0;transition:opacity .6s .4s}
.menu.open .menu-foot{opacity:1}
.menu-foot a:hover{color:var(--volt)}

/*═════════ HERO ═════════*/
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(28px,4vw,54px);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}
.hero-bg .ph{width:100%;height:100%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,6,.86) 0%,rgba(7,10,6,.34) 34%,rgba(7,10,6,.72) 72%,#070A06 100%),radial-gradient(120% 80% at 50% 100%,rgba(7,10,6,.9),transparent 70%)}
.hero-top{position:absolute;top:clamp(96px,13vh,150px);left:0;right:0}
.hero-top .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;color:var(--mute)}
.hero-h{position:relative}
.hero-h .d1{max-width:14ch}
.hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem 2rem;margin-top:clamp(2rem,4vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.hero-meta .k{color:var(--mute-2);margin-bottom:.5rem}
.hero-meta .v{font-family:var(--d);font-size:.94rem;font-weight:500;letter-spacing:-.01em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.hero-note{color:var(--mute);font-size:.82rem}
.hero-trust{display:inline-flex;align-items:center;gap:.5rem;color:var(--mute);font-size:.82rem;
  padding:.44rem .8rem .44rem .6rem;border:1px solid rgba(242,242,238,.16);border-radius:100px;
  transition:border-color .35s var(--e),color .35s var(--e)}
.hero-trust:hover{border-color:rgba(144,192,8,.5);color:#F2F2EE}
.hero-trust b{font-weight:600;color:#F2F2EE}
.hero-trust .stars{display:inline-flex;gap:2px;color:var(--volt)}
.hero-trust .stars svg{width:11px;height:11px}
@media(max-width:760px){.hero-trust{font-size:.86rem}}
.seal{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:clamp(96px,9vw,132px);aspect-ratio:1;display:grid;place-items:center;z-index:4}
@media(max-width:900px){.seal{top:34%;width:82px}}
.seal svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal .core{width:38%;aspect-ratio:1;border-radius:50%;background:var(--volt);display:grid;place-items:center;color:var(--on-volt);transition:transform .5s var(--e)}
.seal:hover .core{transform:scale(1.12)}
.scroll-cue{position:absolute;left:var(--pad);bottom:clamp(28px,4vw,54px);display:flex;align-items:center;gap:.7rem;color:var(--mute-2)}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--volt),transparent);animation:cue 2.2s var(--e2) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}55%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#141813 0%,#1E241B 45%,#0E120C 100%)}
.ph > img,.ph > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph.pos-top > img{object-position:50% 22%}
.ph::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;font-family:var(--d);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,242,238,.16)}

/*═════════ MARQUEE ═════════*/
.mq{border-block:1px solid var(--line-2);padding-block:1.05rem;overflow:hidden;background:var(--ink)}
.mq-t{display:flex;width:max-content;gap:3.4rem;animation:mq 34s linear infinite;will-change:transform}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-t span{font-family:var(--d);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:3.4rem;white-space:nowrap}
.mq-t span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--volt);flex:none}

/*═════════ MANIFESTO ═════════*/
.manif{padding-block:clamp(100px,15vw,220px)}
#manif{font-family:var(--d);font-weight:500;font-size:clamp(1.75rem,5.2vw,4.3rem);line-height:1.02;letter-spacing:-.038em;text-transform:uppercase;max-width:18ch}
.w{display:inline-block;color:var(--dim);transition:color .6s var(--e)}
.w.lit{color:var(--paper)}
.w.hi.lit{color:var(--volt-t)}
.manif-foot{margin-top:clamp(2.4rem,5vw,4rem);display:grid;gap:1.2rem 2.6rem;border-top:1px solid var(--line-2);padding-top:1.8rem;max-width:920px}
@media(min-width:800px){.manif-foot{grid-template-columns:auto 1fr auto 1fr;align-items:baseline}}
.manif-foot .body-m{max-width:32ch}

/*═════════ CONCEITO ═════════*/
.concept-grid{display:grid;gap:3rem}
@media(min-width:1000px){.concept-grid{grid-template-columns:.86fr 1.14fr;gap:clamp(3rem,6vw,7rem)}}
/* A coluna fixa só faz sentido quando há DUAS colunas: ela fica presa
   enquanto a coluna do lado corre. Abaixo de 1000 px a grelha passa a
   uma coluna, e aí uma coluna presa fica parada em cima do texto que
   vem a seguir — era daí que vinham as sobreposições no telemóvel
   ("de onde surge", "princípios" e o formulário). */
.sticky{align-self:start}
@media(min-width:1000px){.sticky{position:sticky;top:clamp(90px,14vh,150px)}}
.concept-media{position:relative;aspect-ratio:3/4;overflow:hidden}
.concept-media .ph{position:absolute;inset:-8% 0;will-change:transform}
.concept-tag{position:absolute;left:0;bottom:0;background:var(--volt);color:var(--on-volt);padding:.85rem 1.2rem;z-index:2}
.steps{display:grid}
.step{padding-block:clamp(2rem,3.6vw,3.1rem);border-top:1px solid var(--line-2)}
.step:last-child{border-bottom:1px solid var(--line-2)}
.step-n{color:var(--volt-t);margin-bottom:1rem}
.step p{font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.42;font-weight:300;color:var(--mute);letter-spacing:-.012em}
.step p strong{font-weight:500;color:var(--paper)}

/*═════════ CONCEITO — as duas óticas ═════════*/
/* ⚠ 24ch mede-se na fonte DESTE elemento. A classe tem de estar no
   próprio h2: num contentor com fonte de corpo, 24ch dá 216 px e o
   título de 102 px parte-se em oito linhas. Já aconteceu uma vez. */
.cc-head{max-width:24ch}
div.cc-head,section.cc-head{max-width:none}
.cc-lede{max-width:62ch;margin-top:1.6rem}
.sub-h{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;color:var(--mute-2)}
.sub-h::after{content:"";flex:1;height:1px;background:var(--line-2)}

.optics{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(2.4rem,4.5vw,3.6rem)}
@media(min-width:900px){.optics{grid-template-columns:1fr 1fr}}
.optic{background:var(--ink);padding:clamp(1.8rem,3vw,2.9rem);display:flex;flex-direction:column;gap:1.2rem;transition:background .5s var(--e);position:relative}
.optic:hover{background:var(--carbon)}
.optic-k{display:flex;align-items:center;gap:.85rem;color:var(--volt-t)}
.optic-k i{width:26px;height:1px;background:currentColor;flex:none}
.optic h3{font-size:clamp(1.3rem,2.5vw,2rem);line-height:1;letter-spacing:-.034em;font-weight:500}
.optic p{color:var(--mute);font-size:.99rem;line-height:1.6}
.optic p strong{color:var(--paper);font-weight:500}
.tagl{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.7rem}
.tagl span{border:1px solid var(--line);border-radius:100px;padding:.42rem .9rem;font-family:var(--d);font-size:.59rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

/* destaque "2 PT em sala" */
.pt2{display:inline-flex;align-self:flex-start;align-items:center;gap:1.05rem;padding:1rem 1.35rem 1rem 1.15rem;background:var(--volt);color:var(--on-volt);border-radius:2px}
.pt2 .big{font-family:var(--d);font-weight:700;font-size:2.4rem;line-height:.8;letter-spacing:-.05em}
.pt2 .txt{font-family:var(--d);font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.3}

/*── três eixos ──*/
.axes-wrap{margin-top:clamp(2.6rem,4.5vw,4rem)}
.axes{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:820px){.axes{grid-template-columns:repeat(3,1fr)}}
.axis{background:var(--ink);padding:clamp(1.6rem,2.6vw,2.2rem);transition:background .5s var(--e)}
.axis:hover{background:var(--carbon)}
.axis .n{font-family:var(--d);font-size:.62rem;letter-spacing:.16em;color:var(--mute-2);display:block;margin-bottom:1.3rem}
.axis h4{font-size:clamp(1.05rem,1.55vw,1.3rem);margin-bottom:.65rem;color:var(--volt-t)}
.axis p{color:var(--mute);font-size:.92rem;line-height:1.56}

/*── ciclo de ajuste ──*/
.cycle{margin-top:clamp(3rem,5.5vw,5rem);border-top:1px solid var(--line-2);padding-top:clamp(2.2rem,3.6vw,3.2rem)}
.cyc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;margin-bottom:clamp(2rem,3.4vw,2.8rem)}
.cyc-top h3{font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:.98;letter-spacing:-.035em;max-width:20ch}
.badge-2m{display:inline-flex;align-items:center;gap:.65rem;background:var(--volt);color:var(--on-volt);border-radius:100px;padding:.68rem 1.2rem;font-family:var(--d);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cyc-steps{display:grid;gap:1.7rem}
/* passaram a ser cinco passos, e cinco não cabem numa grelha de quatro
   sem deixar o último sozinho numa linha. Sobe por patamares: 2, 3 e só
   depois 5 de uma vez, quando há largura para cada um respirar. */
@media(min-width:640px){.cyc-steps{grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,2.4vw,2.2rem)}}
@media(min-width:900px){.cyc-steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1240px){.cyc-steps{grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,1.9vw,1.9rem)}}
.cyc{position:relative;border-top:2px solid var(--line-2);padding-top:1.5rem;transition:border-color .5s var(--e)}
.cyc:hover{border-color:var(--volt)}
.cyc::before{content:"";position:absolute;top:-5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--volt)}
.cyc .n{display:block;font-family:var(--d);font-size:.62rem;letter-spacing:.16em;color:var(--mute-2);margin-bottom:.9rem}
.cyc h4{font-size:1.02rem;margin-bottom:.5rem}
.cyc p{color:var(--mute);font-size:.9rem;line-height:1.52}
.cyc-loop{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.7rem;color:var(--volt-t);font-size:.9rem}
.cyc-loop svg{animation:spin 9s linear infinite}

/*── ecossistema ──*/
.eco{margin-top:clamp(3rem,5.5vw,5rem)}
.eco-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
/* passaram a ser quatro serviços: em três colunas o último ficava
   sozinho numa linha. Duas e depois quatro fecham sempre certo. */
@media(min-width:660px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.eco-grid{grid-template-columns:repeat(4,1fr)}}
.eco-i{background:var(--ink);padding:clamp(1.5rem,2.4vw,2.05rem);transition:background .5s var(--e)}
.eco-i:hover{background:var(--carbon)}
.eco-i .ic{width:27px;height:27px;color:var(--volt-t);margin-bottom:1.2rem}
.eco-i h4{font-size:1rem;margin-bottom:.5rem}
.eco-i p{color:var(--mute);font-size:.88rem;line-height:1.52}

/*── comunidade segura ──*/
.safe{margin-top:clamp(3rem,5.5vw,5rem);background:var(--on-volt);color:#F2F2EE;padding:clamp(2rem,4vw,3.6rem);display:grid;gap:2.2rem}
@media(min-width:900px){.safe{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}}
.safe h3{font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:.98;letter-spacing:-.035em}
.safe h3 em{font-style:normal;color:var(--volt)}
.safe > div > p{color:#9CA196;margin-top:1.3rem;max-width:38ch}
.safe-list{display:grid;gap:1rem}
.safe-list li{display:grid;grid-template-columns:auto 1fr;gap:.95rem;align-items:start;font-size:.99rem;line-height:1.5;color:#D3D7CC}
.safe-list li strong{color:#F2F2EE;font-weight:500}
.safe-list svg{margin-top:.3rem;color:var(--volt);flex:none}

/*═════════ GALERIA ═════════*/
.gal{padding-block:clamp(24px,4vw,52px);overflow:hidden}
.gal-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.gal-track{display:flex;gap:14px;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.gal:hover .gal-track{animation-play-state:paused}
.gal-track .ph{width:clamp(200px,24vw,340px);aspect-ratio:4/5;flex:none;transition:transform .6s var(--e),filter .6s var(--e);filter:grayscale(.55)}
.gal-track .ph:nth-child(even){aspect-ratio:1}
.gal-track .ph:hover{transform:scale(1.03);filter:grayscale(0)}

/*═════════ PRINCÍPIOS ═════════*/
.prin{background:var(--ink-2)}
.prin-grid{display:grid;gap:2.6rem}
@media(min-width:1000px){.prin-grid{grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,6vw,7rem)}}
.prin-list{display:grid}
.pr{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:start;padding-block:clamp(1.5rem,2.6vw,2.2rem);border-top:1px solid var(--line-2);position:relative;transition:padding-left .5s var(--e)}
.prin-list .pr:last-child{border-bottom:1px solid var(--line-2)}
.pr::before{content:"";position:absolute;left:-1.4rem;top:50%;width:6px;height:6px;border-radius:50%;background:var(--volt);opacity:0;transform:translateY(-50%) scale(.4);transition:.5s var(--e)}
@media(hover:hover){.pr:hover{padding-left:1rem}.pr:hover::before{opacity:1;transform:translateY(-50%) scale(1)}}
.pr-n{font-family:var(--d);font-size:.66rem;letter-spacing:.16em;color:var(--mute-2);padding-top:.42rem}
.pr h3{margin-bottom:.5rem}
.pr h3 em{font-style:normal;color:var(--volt-t);font-variation-settings:'wdth' 100}
.pr p{color:var(--mute);font-size:.94rem;max-width:52ch}
.claim{margin-top:clamp(2.4rem,4vw,3.4rem);padding:clamp(1.6rem,2.6vw,2.4rem);border:1px solid var(--line);font-family:var(--d);font-weight:500;font-size:clamp(1.1rem,1.9vw,1.6rem);line-height:1.22;letter-spacing:-.025em;text-transform:uppercase}
.claim b{color:var(--volt-t);font-weight:600}

/*═════════ EXPERIÊNCIAS ═════════*/
.exp-head{margin-bottom:clamp(2.2rem,4.5vw,4rem)}
@media(min-width:901px){.exp-head{display:grid;grid-template-columns:1.5fr 1fr;align-items:end;gap:clamp(2rem,5vw,5rem)}}
@media(max-width:900px){.exp-head > p{margin-top:1.4rem}}
.exp-list{border-top:1px solid var(--line-2)}
.ex{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.8rem;align-items:center;padding-block:clamp(1.7rem,3.4vw,2.9rem);border-bottom:1px solid var(--line-2);overflow:hidden}
@media(min-width:860px){.ex{grid-template-columns:auto 1fr 1.05fr auto;gap:2.4rem}}
.ex::before{content:"";position:absolute;inset:0;background:var(--volt);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--e);z-index:0}
@media(hover:hover){.ex:hover::before{transform:scaleY(1);transform-origin:50% 0}}
.ex > *{position:relative;z-index:1;transition:color .45s var(--e)}
.ex-n{font-family:var(--d);font-size:.66rem;letter-spacing:.16em;color:var(--mute-2)}
.ex h3{font-size:clamp(1.28rem,2.9vw,2.35rem);line-height:1;letter-spacing:-.032em;font-weight:500}
.ex p{color:var(--mute);font-size:.92rem;max-width:44ch}
.ex-ar{width:26px;height:26px;color:var(--mute-2);transition:transform .55s var(--e),color .45s}
@media(hover:hover){.ex:hover .ex-n,.ex:hover h3,.ex:hover p,.ex:hover .ex-ar{color:var(--on-volt)}.ex:hover .ex-ar{transform:translate(6px,-6px)}}
.ex-thumb{display:none}
@media(max-width:859px){.ex-thumb{display:block;grid-column:1/-1;aspect-ratio:16/10;margin-top:.4rem}}
.peek{position:fixed;top:0;left:0;width:clamp(220px,20vw,320px);aspect-ratio:4/5;z-index:5000;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .45s var(--e),transform .55s var(--e);overflow:hidden}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek .ph{position:absolute;inset:0}
@media(max-width:859px),(pointer:coarse){.peek{display:none}}

/*═════════ PARA QUEM ═════════*/
.who{background:var(--ink-2)}
.who-tabs{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:4px;margin-bottom:clamp(2.2rem,4vw,3.4rem);position:relative}
.who-tabs button{padding:.78rem 1.5rem;border-radius:100px;font-family:var(--d);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .4s;position:relative;z-index:2}
.who-tabs button[aria-selected="true"]{color:var(--on-volt)}
.who-pill{position:absolute;top:4px;bottom:4px;border-radius:100px;background:var(--volt);transition:transform .6s var(--e),width .6s var(--e);z-index:1}
.who-panel{display:none}.who-panel.on{display:block}
.who-list{display:grid}
@media(min-width:900px){.who-list{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,5vw,5rem)}}
.who-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding-block:1.15rem;border-bottom:1px solid var(--line-2);font-size:clamp(1rem,1.28vw,1.15rem);line-height:1.4;font-weight:300;color:var(--mute);letter-spacing:-.012em}
.who-list li strong{font-weight:500;color:var(--paper)}
.who-list .ic{width:19px;height:19px;margin-top:.28rem;flex:none}
.quote{margin-top:clamp(2.6rem,5vw,4.2rem);padding-left:clamp(1.2rem,2.4vw,2rem);border-left:2px solid var(--volt);font-family:var(--d);font-weight:400;font-size:clamp(1.15rem,2.3vw,2rem);line-height:1.16;letter-spacing:-.03em;max-width:38ch}
.quote b{color:var(--volt-t);font-weight:600}

/*═════════ PLANOS ═════════*/
.plans{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(2.6rem,5vw,4rem)}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.plans{grid-template-columns:repeat(4,1fr)}}
.pl{background:var(--ink);padding:clamp(1.7rem,2.6vw,2.3rem);display:flex;flex-direction:column;position:relative;transition:background .55s var(--e)}
.pl:hover{background:var(--carbon)}
.pl.hot{background:var(--on-volt);color:#F2F2EE}
.pl.hot::before{content:"";position:absolute;inset:0;border:1px solid var(--volt);pointer-events:none}
.pl.hot .pl-per{color:var(--mute-2)}
.pl.hot li{color:#B9BEB3}
.pl.hot .btn-ghost{--fg:#F2F2EE;border-color:rgba(242,242,238,.2)}
.pl-tag{position:absolute;top:0;right:0;background:var(--volt);color:var(--on-volt);padding:.42rem .8rem;font-family:var(--d);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pl-name{margin-bottom:1.6rem;color:var(--mute)}
.pl-nrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pl-nrow .pl-name{margin-bottom:0}
.pl-rec{display:inline-block;border:1px solid var(--volt);color:var(--volt);border-radius:100px;padding:.1rem .55rem;font-family:var(--d);font-size:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.pl-price{display:flex;align-items:baseline;gap:.2rem;font-family:var(--d);font-weight:600;font-size:clamp(2.1rem,3.2vw,2.9rem);letter-spacing:-.045em;line-height:1;margin-bottom:.3rem}
.pl-price sup{font-size:.32em;font-weight:400;color:var(--mute-2);top:-1.2em;position:relative}
.pl-per{color:var(--mute-2);font-size:.78rem;margin-bottom:1.9rem}
.pl ul{display:grid;gap:.85rem;flex:1;align-content:start;padding-top:1.5rem;border-top:1px solid var(--line-2);margin-bottom:2rem}
.pl.hot ul{border-color:rgba(242,242,238,.14)}
.pl li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:.9rem;line-height:1.42;color:var(--mute)}
.pl li svg{margin-top:.34rem;color:var(--volt-t)}
.pl.hot li svg{color:var(--volt)}
.pl .btn{width:100%;justify-content:space-between}
.pl-foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:1.4rem;color:var(--mute-2);font-size:.8rem}

/*── TREINO 1:1 E 1:2 · sem preço tabelado ───────────────────────*/
.solo{margin-top:clamp(3rem,5vw,4.6rem);display:grid;gap:2.4rem;
  border:1px solid var(--line);padding:clamp(1.8rem,3.4vw,3rem)}
@media(min-width:900px){.solo{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,5vw,5rem);align-items:center}}
.solo-r{display:grid;gap:1.5rem;justify-items:start}
.solo-fmt{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;width:100%}
.solo-n{font-family:var(--d);font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:600;
  letter-spacing:-.03em;color:var(--volt-t);line-height:1}
.solo-fmt p:last-child{color:var(--mute);font-size:.86rem;line-height:1.45;margin-top:.5rem}
.solo-p{color:var(--mute);font-size:.9rem;line-height:1.6;max-width:40ch}

/*── PROGRAMA VILLA BUDDY ────────────────────────────────────────
  O bloco reinverte os tokens para o tema escuro, tal como a classe
  .light faz ao contrário. Assim tudo lá dentro (linhas, texto fraco,
  verde de texto) funciona sozinho, sem cores à mão. */
.buddy{
  --ink:#070A06;--ink-2:#0D110B;
  --line:rgba(242,242,238,.14);--line-2:rgba(242,242,238,.07);
  --paper:#F2F2EE;--mute:#8C9186;--mute-2:#787E72;--volt-t:var(--volt);
  background:var(--ink);color:var(--paper);
  margin-top:clamp(1.6rem,3vw,2.4rem);padding:clamp(1.9rem,3.6vw,3.2rem)}
.buddy-k{color:var(--volt);margin-bottom:.7rem}
.buddy-t{font-family:var(--d);font-weight:600;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(2.1rem,5.4vw,3.6rem);font-variation-settings:'wdth' 96}
.buddy-s{margin-top:1.2rem;max-width:52ch;color:var(--mute);font-size:.96rem;line-height:1.6}
.buddy-s strong{color:var(--paper);font-weight:500}
.buddy-g{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  margin-top:clamp(2rem,3.6vw,3rem)}
@media(min-width:760px){.buddy-g{grid-template-columns:repeat(3,1fr)}}
.bd{background:var(--ink);padding:clamp(1.4rem,2.4vw,1.9rem)}
.bd-hot{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--volt)}
.bd-n{color:var(--mute-2);margin-bottom:1rem}
.bd-hot .bd-n{color:var(--volt)}
.bd-pc{font-family:var(--d);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.6rem,6.4vw,3.4rem);color:var(--paper)}
.bd-hot .bd-pc{color:var(--volt)}
.bd-pc span{font-size:.42em;letter-spacing:0;margin-left:.1em;vertical-align:.42em}
.bd-eur{margin-top:.9rem;color:var(--mute-2);font-size:.86rem}
.bd-eur s{text-decoration:line-through;text-decoration-thickness:1px;opacity:.8}
.bd-eur i{font-style:normal;padding:0 .25rem}
.bd-eur b{color:var(--paper);font-weight:500}
.buddy-f{display:grid;gap:1.6rem;margin-top:clamp(1.6rem,2.6vw,2.2rem);
  padding-top:clamp(1.4rem,2.4vw,1.9rem);border-top:1px solid var(--line-2)}
@media(min-width:860px){.buddy-f{grid-template-columns:1fr auto;align-items:center;gap:2.4rem}}
.buddy-f ul{list-style:none;display:grid;gap:.6rem}
.buddy-f li{position:relative;padding-left:1.5rem;color:var(--mute);font-size:.88rem;line-height:1.5}
.buddy-f li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:5px;
  border-left:1.6px solid var(--volt);border-bottom:1.6px solid var(--volt);transform:rotate(-45deg)}
.buddy-cl{font-family:var(--d);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--volt)}
.buddy-leg{margin-top:1.5rem;color:var(--mute-2);font-size:.78rem;line-height:1.55;max-width:64ch}

/*═════════ HORÁRIOS ═════════*/
.hours-grid{display:grid;gap:3rem}
@media(min-width:1000px){.hours-grid{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,6vw,6rem)}}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-block:1.35rem;border-bottom:1px solid var(--line-2)}
.hrow:first-of-type{border-top:1px solid var(--line-2)}
.hrow .d{font-family:var(--d);font-size:clamp(1.02rem,1.6vw,1.4rem);font-weight:500;letter-spacing:-.02em;text-transform:uppercase}
.hrow .t{font-family:var(--d);font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.01em;color:var(--volt-t)}
.hrow .t.off{color:var(--mute-2)}
.how{border:1px solid var(--line-2);padding:clamp(1.6rem,2.6vw,2.4rem)}
.how ol{counter-reset:h;display:grid;gap:1.5rem;margin-top:1.8rem}
.how li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.how li::before{counter-increment:h;content:"0" counter(h);font-family:var(--d);font-size:.66rem;letter-spacing:.14em;color:var(--volt-t);padding-top:.3rem}
.how li p{color:var(--mute);font-size:.94rem;line-height:1.55}
.how li p strong{color:var(--paper);font-weight:500}
/* nota sobre a app, dentro do mesmo cartão mas destacada por uma
   barra verde: é informação de outra natureza dos três passos */
.app-nota{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line-2)}
.app-nota .mono{color:var(--volt-t);margin-bottom:.6rem}
.app-nota p:last-child{color:var(--mute-2);font-size:.88rem;line-height:1.6;max-width:44ch}

/*═════════ COMUNIDADE · REVIEWS · MAPA ═════════*/
.rev-top{display:grid;gap:2.4rem;align-items:end;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
@media(min-width:900px){.rev-top{grid-template-columns:1fr auto}}
.score{display:flex;align-items:flex-end;gap:1.4rem;flex-wrap:wrap}
.score-n{font-family:var(--d);font-weight:700;font-size:clamp(3.4rem,8vw,6.2rem);line-height:.8;letter-spacing:-.05em}
.score-b .stars{display:flex;gap:3px;color:var(--volt-t);margin-bottom:.45rem}
.score-b p{color:var(--mute);font-size:.9rem}
.g-badge{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--mute)}

.rev-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:700px){.rev-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{background:var(--ink);padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:1.1rem;transition:background .5s var(--e)}
.rev:hover{background:var(--carbon)}
.rev .stars{display:flex;gap:3px;color:var(--volt-t)}
.rev q{quotes:none;font-size:1rem;line-height:1.55;flex:1;color:var(--paper);font-weight:300;letter-spacing:-.008em}
.rev-who{display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.av{width:38px;height:38px;border-radius:50%;background:var(--volt);color:var(--on-volt);display:grid;place-items:center;font-family:var(--d);font-weight:600;font-size:.9rem;flex:none}
.rev-who .n{font-family:var(--d);font-weight:600;font-size:.9rem;letter-spacing:-.01em}
.rev-who .m{color:var(--mute-2);font-size:.76rem}
.rev-extra{display:none}
.rev-grid.tudo .rev-extra{display:flex}
.rev-mais{display:flex;justify-content:center;margin-top:clamp(1.6rem,3vw,2.4rem)}
.rev-fim{color:var(--mute);font-size:.88rem;text-align:center}

.map-wrap{margin-top:clamp(2.4rem,4.5vw,4rem);display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:1000px){.map-wrap{grid-template-columns:1fr 1.9fr}}
.map-info{background:var(--ink);padding:clamp(1.7rem,2.8vw,2.6rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.map-info address{font-style:normal;font-family:var(--d);font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;line-height:1.28;letter-spacing:-.022em;text-transform:uppercase}
.map-info .body-m{margin-top:1rem}
.map-frame{background:var(--ink-2);min-height:340px;position:relative}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.4) contrast(1.05)}
.map-ask{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;padding:1.6rem;text-align:center;cursor:pointer;
  background:repeating-linear-gradient(45deg,var(--ink-2),var(--ink-2) 12px,rgba(255,255,255,.022) 12px,rgba(255,255,255,.022) 24px);
  border:0;color:var(--paper);transition:background-color .4s var(--e)}
.light .map-ask{color:var(--paper)}
.map-ask:hover{background-color:var(--carbon)}
.map-ask svg{width:30px;height:30px;color:var(--volt-t);margin-bottom:.3rem}
.map-ask-t{font-family:var(--d);font-size:.86rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.map-ask-s{color:var(--mute);font-size:.8rem;max-width:30ch;line-height:1.5}

/*═════════ FAIXA VOLT ═════════*/
.band{background:var(--volt);color:var(--on-volt);padding:clamp(70px,10vw,130px) 0 clamp(38px,4.5vw,58px);overflow:hidden;position:relative}
.band-in{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.band-in{grid-template-columns:1.35fr auto}}
.band h2{font-size:clamp(2.2rem,6.4vw,5.4rem);line-height:.88;letter-spacing:-.045em;font-weight:600}
.band p{margin-top:1.2rem;font-size:1rem;max-width:38ch;color:rgba(10,14,9,.72)}
.band-mq{margin-top:clamp(2.4rem,4vw,3.4rem);border-top:1px solid rgba(10,14,9,.22);padding-top:1.1rem;overflow:hidden}
.band-mq .mq-t{animation-duration:26s}
.band-mq .mq-t span{color:rgba(10,14,9,.62)}
.band-mq .mq-t span::after{background:var(--on-volt)}

/*═════════ FORMULÁRIO ═════════*/
.form-grid{display:grid;gap:3rem}
@media(min-width:1000px){.form-grid{grid-template-columns:.82fr 1.18fr;gap:clamp(3rem,6vw,7rem)}}
.f-fields{display:grid}
.fld{position:relative;padding-top:1.7rem;border-bottom:1px solid var(--line);transition:border-color .4s}
.fld:focus-within{border-color:var(--volt)}
.fld-hint{margin-top:.55rem;color:var(--mute-2);font-size:.78rem;line-height:1.5;max-width:46ch}
.fld label{position:absolute;top:.35rem;left:0;font-family:var(--d);font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);transition:color .35s}
/* «Opcional» ao lado do nome do campo. Dito à partida, poupa a hesitação
   de quem olha para um campo e não sabe se pode saltá-lo. */
.fld label .opt{margin-left:.5rem;font-size:.52rem;font-weight:600;letter-spacing:.12em;
  color:var(--mute-2);border:1px solid var(--line);border-radius:100px;padding:.1rem .42rem}
.fld:focus-within label .opt{color:var(--mute-2)}
.fld:focus-within label{color:var(--volt-t)}
.fld input,.fld select,.fld textarea{width:100%;background:none;border:none;color:var(--paper);padding:.5rem 0 1rem;font-family:var(--d);font-size:clamp(1rem,1.35vw,1.15rem);letter-spacing:-.015em}
.fld textarea{resize:vertical;min-height:74px;font-family:var(--b);font-size:1rem}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mute-2)}
.fld select{appearance:none;cursor:pointer}
.fld select option{background:#0D110B;color:#F2F2EE}
.fld .chev{position:absolute;right:0;bottom:1.15rem;width:15px;height:15px;color:var(--mute);pointer-events:none}
.f2{display:grid}
@media(min-width:640px){.f2{grid-template-columns:1fr 1fr;column-gap:2rem}}
/* campo opcional, recolhido: está lá para quem quiser, não ocupa
   espaço mental para quem não quiser */
.mais{margin-top:1.9rem;margin-bottom:1.9rem}
.mais summary{display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  color:var(--mute);font-size:.86rem;padding:.2rem 0;transition:color .3s}
.mais summary::-webkit-details-marker{display:none}
.mais summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.mais[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mais summary:hover{color:var(--paper)}
.mais summary span{font-family:var(--d);font-size:.55rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-2);border:1px solid var(--line);border-radius:100px;padding:.15rem .5rem}
.mais .fld{margin-top:.4rem}
.f-nota{margin-top:1.3rem;color:var(--mute-2);font-size:.78rem;line-height:1.55;max-width:52ch}
/* WhatsApp + chamada, ao lado do formulário. Em ecrã estreito o botão
   ocupa a linha toda e o "ou liga" desce — nunca ficam apertados. */
/* O símbolo do WhatsApp fica no verde da própria marca (#25D366) e não no
   volt. É o único sítio do site com este verde, e é de propósito: um
   símbolo que toda a gente reconhece de relance vale mais do que a
   coerência cromática nesse centímetro quadrado. O BOTÃO continua neutro
   — se fosse todo verde-WhatsApp, competia com o "Marcar a minha semana"
   e deixava de haver via principal. Destaca-se o ícone, não o botão.
   No hover o botão enche-se de volt e o ícone passa a escuro com ele. */
svg.wa{width:21px;height:21px;flex:0 0 auto;color:#25D366;transition:color .35s}
.btn:hover svg.wa{color:currentColor}

/* Botão flutuante · sempre ao alcance do polegar ───────────────────
   O contacto direto vivia só na secção de marcação, lá em baixo. Quem
   estava a meio da página e decidia perguntar uma coisa tinha de
   procurar. Este fica sempre no canto, e só aparece depois do hero
   para não tapar a primeira impressão. */
.wa-flutua{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);
  z-index:60;display:inline-flex;align-items:center;gap:.6rem;
  height:54px;padding:0 1.05rem;border-radius:100px;
  background:rgba(13,17,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(37,211,102,.34);color:var(--paper);text-decoration:none;
  font-family:var(--d);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px) scale(.94);pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1),border-color .3s}
.wa-flutua.on{opacity:1;transform:none;pointer-events:auto}
.wa-flutua:hover{border-color:#25D366}
.wa-flutua svg{width:24px;height:24px;color:#25D366;flex:0 0 auto}
.wa-flutua span{white-space:nowrap}
/* em ecrã estreito fica só o símbolo: o texto roubava metade da largura */
@media(max-width:640px){
  .wa-flutua{height:52px;width:52px;padding:0;justify-content:center}
  .wa-flutua span{display:none}
}
/* enquanto a barra de cookies está aberta, o botão sai da frente */
body.vv-ck-aberta .wa-flutua{opacity:0;transform:translateY(14px) scale(.94);pointer-events:none}
@media(prefers-reduced-motion:reduce){.wa-flutua{transition:opacity .2s}}

/* o que a semana inclui, ao lado do formulário */
.inclui{list-style:none;margin-top:1.8rem;display:grid;gap:.7rem;max-width:32ch}
.inclui li{position:relative;padding-left:1.5rem;color:var(--mute);font-size:.9rem;line-height:1.5}
.inclui li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:5px;
  border-left:1.6px solid var(--volt-t);border-bottom:1.6px solid var(--volt-t);transform:rotate(-45deg)}
.f-err{margin-top:1rem;padding:1.1rem 1.2rem;border:1px solid #B4553F;color:#E8B4A6;font-size:.88rem;line-height:1.55}
.f-err[hidden]{display:none}
.f-err .btn{border-color:#B4553F;color:#E8B4A6}
.f-err .btn:hover{border-color:#E8B4A6;background:rgba(232,180,166,.08)}
.f-ok{display:none;border:1px solid var(--volt);padding:clamp(1.8rem,3vw,2.6rem);text-align:center}
.f-ok.on{display:block}
.f-ok .tk{width:52px;height:52px;border-radius:50%;background:var(--volt);color:var(--on-volt);display:grid;place-items:center;margin:0 auto 1.2rem}

/*═════════ PROFISSIONAIS ═════════*/
.pro{display:grid;border-top:1px solid var(--line-2)}
@media(min-width:900px){.pro{grid-template-columns:1fr 1fr}}
.pro-cell{padding:clamp(2.6rem,5vw,4.6rem) 0}
@media(min-width:900px){.pro-cell+.pro-cell{padding-left:clamp(2.5rem,5vw,5rem);border-left:1px solid var(--line-2)}}
.pro-cell p{color:var(--mute);max-width:46ch;margin-top:1.2rem}

/*═════════ FOOTER ═════════*/
footer{border-top:1px solid var(--line-2);padding-top:clamp(3.5rem,6vw,6rem)}
.f-grid{display:grid;gap:2.6rem}
@media(min-width:800px){.f-grid{grid-template-columns:1.3fr 1fr 1fr}}
.f-col h4{color:var(--mute-2);margin-bottom:1.4rem;font-family:var(--d);font-size:.62rem;letter-spacing:.2em;font-weight:500}
.f-col ul{display:grid;gap:.72rem}
.f-col a{color:#C6CABF;font-size:.94rem}
.f-col a:hover{color:var(--volt)}
footer address{font-style:normal;color:#C6CABF;font-size:.94rem;line-height:1.7}
.bigmark{margin-top:clamp(3rem,6vw,6rem);font-family:var(--d);font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,14.4vw,15rem);line-height:.8;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px rgba(242,242,238,.17);white-space:nowrap;display:flex;justify-content:space-between;align-items:baseline}
.bigmark sup{font-size:.16em}
.f-legal{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding-block:1.7rem;margin-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line-2);color:var(--mute-2);font-size:.78rem}
.f-legal a:hover{color:var(--volt)}

/*═════════ ANIMAÇÃO ═════════*/
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--e),transform .95s var(--e)}
.rv.in{opacity:1;transform:none}
.ln{overflow:hidden;display:block}
.ln > i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.05s var(--e)}
.in .ln > i,.ln.in > i{transform:translateY(0)}
.cl{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e)}
.cl.in{clip-path:inset(0 0 0 0)}

/*═════════ MOBILE ═════════*/
.nav-cta .lbl-s{display:none}
@media(max-width:760px){
  .nav-cta .lbl-f{display:none}
  .nav-cta .lbl-s{display:inline}
  .nav .btn{padding:.72rem 1.1rem;font-size:.6rem;gap:.7rem}
  .burger{width:42px;height:42px}
  .scroll-cue{display:none}
  /* o bloco "Braga · Portugal" é absoluto: este espaço reserva-lhe
     lugar para o título nunca lhe subir por cima em ecrãs baixos */
  .hero{padding-bottom:36px;padding-top:186px}
  .hero-top{top:88px}
  .pl-foot,.f-legal{flex-direction:column;gap:.6rem}
  .gal-track .ph{width:180px}
}

/*═════════ AFINAÇÕES PARA TELEMÓVEL ═════════*/
@media(max-width:760px){
  /* menos ar entre secções — a página passa a ter menos ~20% de altura */
  :root{--sec:clamp(58px,13vw,86px)}
  .manif{padding-block:clamp(66px,16vw,104px)}
  .cycle,.eco,.safe,.axes-wrap{margin-top:clamp(2.2rem,7vw,3rem)}
  .cyc-steps{gap:1.3rem}
  .steps .step{padding-block:1.5rem}
  .pr{padding-block:1.35rem}
  .ex{padding-block:1.4rem}
  .pl{padding:1.5rem 1.35rem}
  /* a 360 px faltavam 2 px para caberem duas colunas (150+22+150 = 322
     em 320 disponíveis) e as quatro estatísticas empilhavam-se todas.
     Baixar o mínimo para 138 px devolve as duas colunas. */
  .hero-meta{gap:1.1rem 1.4rem;margin-top:1.6rem;padding-top:1.2rem;
             grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
  /* Em duas colunas de ~160 px estes valores partiam-se em três linhas
     e as células ficavam de alturas diferentes. Um pouco mais pequenos
     e mais juntos, cabem em duas linhas e a grelha volta a ler-se. */
  .hero-meta .v{font-size:.86rem;line-height:1.32}
  .hero-meta .k{margin-bottom:.35rem}

  /* alvos de toque com pelo menos 44 px */
  .f-col ul a,.menu-foot a,.c-list a,.pl-foot a,.nav-links a{
    display:inline-block;padding-block:.62rem;min-height:44px}
  .f-col ul{gap:.1rem}
  .ul.volt,.pl-foot .ul{padding-block:.5rem}

  /* micro-tipografia legível no telemóvel */
  .mono{font-size:.72rem}
  .nav .btn{font-size:.68rem;padding:.78rem 1.15rem}
  .menu-foot{font-size:.74rem;gap:.4rem 1.6rem}
  .f-legal{font-size:.76rem}
  .pl-foot{font-size:.84rem}

  /* etiquetas e microtexto que ainda ficavam abaixo dos 11 px */
  .tagl span{font-size:.68rem;padding:.5rem 1rem}
  .pl-tag{font-size:.68rem;padding:.5rem .9rem}
  .pl-rec{font-size:.66rem}
  .badge-2m{font-size:.7rem}
  .who-tabs button{font-size:.7rem;padding:.85rem 1.3rem}
  .pt2 .txt{font-size:.76rem}
  .axis .n,.cyc .n,.pr-n,.ex-n{font-size:.7rem}
  .rev-who .m,.pl-price sup{font-size:.78rem}

  /* últimos alvos de toque abaixo dos 44 px */
  .f-legal a{display:inline-block;padding-block:.6rem;min-height:44px}
  .f-legal > span{display:block}
  .f-legal #ano{display:inline}
  .pro-cell .ul.mono{display:inline-block;padding-block:.7rem;min-height:44px;font-size:.78rem}
  .f-col > a.ul{display:inline-block;padding-block:.6rem;min-height:44px}

  /* mapa mais baixo — 700 px era metade de um ecrã perdido */
  .map-frame,.map-frame iframe{min-height:260px;height:260px}
  .map-info{padding:1.6rem 1.35rem}
  .map-info address{font-size:1.05rem}

  /* botões largos ficam melhores a toda a largura */
  .hero-cta .btn,.band .btn,.cta-band .btn{width:100%;justify-content:space-between}
  .hero-cta{gap:.8rem}
}
@media(max-width:400px){
  .nav-cta .lbl-s{font-size:.66rem}
  .d1{font-size:clamp(3rem,12.5vw,4rem)}
}

/*═════════════════════════════════════════════════════════════════
  REFINAMENTO MOBILE
  Auditoria feita a 360, 375, 390 e 430 px. Corrige o que
  transbordava e abre respiração onde estava apertado.
═════════════════════════════════════════════════════════════════*/
@media(max-width:760px){

  /* ── A BARRA DE TOPO JÁ NÃO EMPURRA A PÁGINA ──────────────────
     O logótipo (160 px) mais o bloco da direita (177 px) mais 2 rem
     de intervalo davam 369 px de conteúdo em 335 px disponíveis num
     iPhone SE. Como os filhos de um flex não encolhem abaixo do seu
     conteúdo, a barra crescia e arrastava a PÁGINA INTEIRA para o
     lado: era daí que vinha o scroll horizontal. */
  .nav .wrap{gap:.7rem}
  .mark{min-width:0;gap:.5rem}
  /* flex:none porque há espaço de sobra na barra: sem isto o flex
     encolhe este bloco 4 px abaixo do conteúdo e o botão fica colado
     ao menu. (O .seal parece transbordar nas medições, mas é só a
     caixa a crescer por o anel estar a rodar.) */
  .nav-r{flex:none;gap:.45rem}
  .lg-sym{width:27px;height:27px}
  .lg-word{width:104px;height:17px}
  .nav-cta{padding:.7rem .95rem}
  .burger{margin-right:-.25rem}

  /* ── TÍTULOS: NENHUMA PALAVRA VOLTA A SER CORTADA ─────────────
     "ACOMPANHAMENTO" são 14 letras. A 38 px ocupava 406 px numa
     coluna de 350 e ficava cortado a meio. */
  .d2{font-size:clamp(1.9rem,7.8vw,2.7rem);hyphens:auto;-webkit-hyphens:auto}
  .d3{font-size:clamp(1.45rem,5.8vw,2rem);hyphens:auto;-webkit-hyphens:auto}
  .cc-head{max-width:none}
  h1,h2,h3,h4,p,li,address,q{overflow-wrap:break-word}

  /* ── HERO MAIS LIMPO ──────────────────────────────────────────
     O selo rotativo "ver o espaço" caía exatamente por cima da linha
     "mais do que um treino". Em ecrã grande tem espaço e fica bem; em
     telemóvel é ruído por cima de texto. Sai.
     Sai também a segunda linha do topo: o hero já tem título, botão,
     nota, avaliação e quatro estatísticas. Menos uma frase é mais ar,
     e a mensagem dela aparece logo a seguir no manifesto. */
  .seal{display:none}
  .hero-top .wrap p:last-child{display:none}
  .hero-top{top:96px}

  /* ── nenhuma coluna de grelha pode empurrar a irmã ──────────── */
  .prin-grid,.prin-grid > *,.concept-grid > *,.exp-row > *,
  .form-grid > *,.map-wrap > *,.who-grid > *{min-width:0}

  /* ── MAIS AR ──────────────────────────────────────────────────
     Cartões com mais folga por dentro e linhas mais discretas:
     é o que separa "denso" de "clean". */
  .pl{padding:1.7rem 1.45rem}
  .rev{padding:1.6rem 1.4rem;gap:1rem}
  .safe,.pt2,.cyc,.axis{padding:1.5rem 1.35rem}
  .lede{line-height:1.55}
  .body-m{line-height:1.66}

  /* ── ETIQUETAS DOS PLANOS ─────────────────────────────────────
     Em telemóvel a etiqueta absoluta caía por cima do nome do plano.
     Passa a ocupar o seu lugar, por cima do nome. */
  .pl.hot{padding-top:1.15rem}
  /* align-self:flex-start é o que impede a etiqueta de esticar de
     ponta a ponta: dentro de um flex em coluna, um inline-block passa
     a item de flex e estica sozinho. */
  .pl-tag{position:static;align-self:flex-start;margin-bottom:.95rem;
          border-radius:100px;padding:.42rem .9rem}
  /* "Mais escolhido" e "Recomendado" dizem a mesma coisa. Em ecrã
     grande as duas cabem e reforçam-se; num cartão de 300 px são três
     etiquetas empilhadas antes de se chegar ao preço. Fica uma. */
  .pl-rec{display:none}
  .pl-nrow{margin-bottom:1.3rem}

  /* ── alvos de toque e microtexto ─────────────────────────────── */
  .toc a,.fnav a{padding-block:.35rem}
}

/* Instruções de rato só onde há rato. */
.so-rato{display:none}
@media(hover:hover) and (pointer:fine){.so-rato{display:block}}

@media(max-width:400px){
  .d2{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .lg-word{width:94px;height:15px}
  .nav-cta{padding:.66rem .8rem}
}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.cl{opacity:1;transform:none;clip-path:none}
  .ln > i{transform:none}
  .w{color:var(--paper)}.w.hi{color:var(--volt-t)}
  .cur,.cur-d,.peek{display:none}
}


/*═════════════════════════════════════════════════════════════════
  PÁGINAS INTERIORES
  O site passou de uma página a quatro. Estas classes são as que só
  existem fora da home: a capa de cada página, os resumos que a home
  usa para apontar para elas, e a página de franchising.
═════════════════════════════════════════════════════════════════*/

/*── capa das páginas interiores ────────────────────────────────
  Não é um hero: não tem vídeo nem ocupa o ecrã todo. É um cabeçalho
  com ar à volta, para a página começar sem estrondo mas com peso. */
.capa{padding-block:clamp(130px,17vh,220px) clamp(46px,7vw,86px);border-bottom:1px solid var(--line-2)}
.capa .idx{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.d1-s{font-family:var(--d);font-weight:600;line-height:.92;letter-spacing:-.042em;
  font-size:clamp(2.6rem,8.4vw,6.2rem);font-variation-settings:'wdth' 96;max-width:16ch}
/* ⚠ Esta regra TEM de vir depois da definição de cima. Estava dentro do
   bloco de telemóvel, que aparece antes no ficheiro, e por isso nunca
   ganhava: "ACOMPANHAMENTO" continuava a partir a meio, sem hífen.
   O tamanho desce o suficiente para a palavra mais longa caber inteira
   a 360 px, sem depender de o navegador ter padrões de hifenização
   para português, que nem todos têm. */
@media(max-width:900px){
  /* ⚠ O que apertava o título não era o tamanho da letra, era o
     max-width:16ch: `ch` mede na fonte do próprio elemento, e a 27 px
     dá uma caixa de 240 px. Numa coluna dessas, "ACOMPANHAMENTO" tem
     mesmo de partir. Em telemóvel a caixa deixa de ter limite, que é
     para isso que a coluna já é estreita. */
  .d1-s{max-width:none;font-size:clamp(1.9rem,7.4vw,2.7rem);
        hyphens:auto;-webkit-hyphens:auto}
}
.capa .lede{margin-top:clamp(1.4rem,2.6vw,2.2rem);max-width:52ch}

/*── resumo em três colunas ─────────────────────────────────────
  Usado na home para condensar o conceito, e na de franchising para
  dizer com quem se quer falar. Três ideias, uma linha cada. */
.resumo-grid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  margin-top:clamp(2.2rem,4vw,3.2rem)}
@media(min-width:820px){.resumo-grid{grid-template-columns:repeat(3,1fr)}}
.rz{background:var(--ink);padding:clamp(1.6rem,2.8vw,2.3rem);display:flex;flex-direction:column}
.rz-n{font-family:var(--d);font-size:clamp(2.2rem,4.4vw,3rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--volt-t);margin-bottom:1rem}
.rz h3{font-family:var(--d);font-size:clamp(1rem,1.5vw,1.16rem);font-weight:500;
  letter-spacing:-.015em;line-height:1.25;margin-bottom:.7rem}
.rz p{color:var(--mute);font-size:.92rem;line-height:1.6}

/*── vista rápida dos planos, na home ───────────────────────────
  Três cartões clicáveis, sem a lista de benefícios. Quem quer
  comparar vai à página dos planos; aqui só se quer a ordem de
  grandeza e um caminho. */
.pv{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  margin-top:clamp(2.2rem,4vw,3rem)}
@media(min-width:760px){.pv{grid-template-columns:repeat(3,1fr)}}
.pvi{position:relative;background:var(--ink);padding:clamp(1.7rem,2.8vw,2.2rem);
  display:block;transition:background .4s var(--e)}
.pvi:hover{background:var(--ink-2)}
/* Cartão escuro dentro de uma secção clara. Tem de voltar a declarar
   os tokens escuros, senão herda os da secção: --paper ali vale preto,
   e o preço saía preto sobre preto, invisível. É o mesmo mecanismo do
   .buddy, e a regra do projeto para qualquer ilha escura em fundo claro. */
.pvi-hot{
  --ink:#070A06;--ink-2:#0D110B;
  --line:rgba(242,242,238,.14);--line-2:rgba(242,242,238,.07);
  --paper:#F2F2EE;--mute:#8C9186;--mute-2:#787E72;--volt-t:var(--volt);
  background:var(--ink);color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--volt)}
.pvi-hot:hover{background:var(--ink-2)}
.pvi-hot .pvi-n{color:var(--volt)}
.pvi-hot .pvi-p{color:var(--paper)}
.pvi-hot .pvi-d{color:var(--mute)}
.pvi-n{color:var(--mute-2);margin-bottom:1.1rem;font-family:var(--d);font-size:.62rem;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.pvi-p{font-family:var(--d);font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:600;
  letter-spacing:-.035em;line-height:1}
.pvi-p sup{font-size:.42em;vertical-align:.9em;margin-left:.1em}
.pvi-d{margin-top:.9rem;color:var(--mute);font-size:.88rem;line-height:1.5}
.pvi .pl-tag{top:0;right:0}
@media(max-width:760px){
  .pvi.pvi-hot{padding-top:3.1rem}
}

/*── franchising ────────────────────────────────────────────────*/
.fr-grid{display:grid;gap:2.6rem}
@media(min-width:1000px){.fr-grid{grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,6vw,7rem)}}
.box-nota{margin-top:clamp(2rem,3.4vw,2.8rem);border-left:2px solid var(--volt);
  padding:1.3rem 0 1.3rem 1.4rem;max-width:62ch}
.box-nota p{color:var(--mute);font-size:.95rem;line-height:1.65}
.box-nota strong{color:var(--paper);font-weight:500}

/*── a página onde estamos, marcada no menu ─────────────────────*/
.nav-links a[aria-current]{color:var(--paper)}
.nav-links a[aria-current]::after{transform:scaleX(1)}


/*═════════════════════════════════════════════════════════════════
  GEOMETRIA DE FUNDO
  ─────────────────
  É o logótipo, não uma abstração dele: as oito setas em traço, as seis
  cunhas escuras cheias e as DUAS CUNHAS VERDES, exatamente como na
  marca. Vem da mesma função que desenha o logótipo, por isso os ângulos
  são os mesmos e a figura nunca "quase" acerta.

  Duas camadas, porque uma máscara só dá uma cor:
    ::after  → a tinta, com a cor do texto da secção (troca sozinha
               entre fundo claro e escuro)
    ::before → as duas cunhas verdes, em --volt

  As duas partilham tamanho e posição, por isso encaixam sempre.

  ⚠ Fica por baixo do conteúdo e nunca apanha o rato.
  ⚠ Nenhuma cor escrita à mão: tudo sai de tokens, senão volta a
    acontecer o que aconteceu ao preço do plano Base.
═════════════════════════════════════════════════════════════════*/
:root{
  --geo-tinta:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMy4wIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQ3LjE4LDQuNDYgTDYwLjAwLDMwLjAwIEw2OS42NywxOC4xMCIvPjxwYXRoIGQ9Ik05MC4yMSwxMS42NiBMODEuMjEsMzguNzkgTDk2LjQ3LDM3LjIxIi8+PHBhdGggZD0iTTExNS41NCw0Ny4xOCBMOTAuMDAsNjAuMDAgTDEwMS45MCw2OS42NyIvPjxwYXRoIGQ9Ik0xMDguMzQsOTAuMjEgTDgxLjIxLDgxLjIxIEw4Mi43OSw5Ni40NyIvPjxwYXRoIGQ9Ik03Mi44MiwxMTUuNTQgTDYwLjAwLDkwLjAwIEw1MC4zMywxMDEuOTAiLz48cGF0aCBkPSJNMjkuNzksMTA4LjM0IEwzOC43OSw4MS4yMSBMMjMuNTMsODIuNzkiLz48cGF0aCBkPSJNNC40Niw3Mi44MiBMMzAuMDAsNjAuMDAgTDE4LjEwLDUwLjMzIi8+PHBhdGggZD0iTTExLjY2LDI5Ljc5IEwzOC43OSwzOC43OSBMMzcuMjEsMjMuNTMiLz48L2c+PGcgZmlsbD0iIzAwMCI+PHBhdGggZD0iTTk4LjY3LDczLjYyIEwxMTYuMjgsNzQuMDMgQTU4LDU4IDAgMCAxIDEwOS4xOSw5MC43NCBMOTYuNjYsNzguMzYgQTQxLDQxIDAgMCAwIDk4LjY3LDczLjYyIFoiLz48cGF0aCBkPSJNNzcuNzIsOTYuOTggTDg5Ljg3LDEwOS43MiBBNTgsNTggMCAwIDEgNzMuMDUsMTE2LjUxIEw3Mi45NCw5OC45MCBBNDEsNDEgMCAwIDAgNzcuNzIsOTYuOTggWiIvPjxwYXRoIGQ9Ik00Ni4zOCw5OC42NyBMNDUuOTcsMTE2LjI4IEE1OCw1OCAwIDAgMSAyOS4yNiwxMDkuMTkgTDQxLjY0LDk2LjY2IEE0MSw0MSAwIDAgMCA0Ni4zOCw5OC42NyBaIi8+PHBhdGggZD0iTTIzLjAyLDc3LjcyIEwxMC4yOCw4OS44NyBBNTgsNTggMCAwIDEgMy40OSw3My4wNSBMMjEuMTAsNzIuOTQgQTQxLDQxIDAgMCAwIDIzLjAyLDc3LjcyIFoiLz48cGF0aCBkPSJNMjEuMzMsNDYuMzggTDMuNzIsNDUuOTcgQTU4LDU4IDAgMCAxIDEwLjgxLDI5LjI2IEwyMy4zNCw0MS42NCBBNDEsNDEgMCAwIDAgMjEuMzMsNDYuMzggWiIvPjxwYXRoIGQ9Ik00Mi4yOCwyMy4wMiBMMzAuMTMsMTAuMjggQTU4LDU4IDAgMCAxIDQ2Ljk1LDMuNDkgTDQ3LjA2LDIxLjEwIEE0MSw0MSAwIDAgMCA0Mi4yOCwyMy4wMiBaIi8+PC9nPjwvc3ZnPg==");
  --geo-verde:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48ZyBmaWxsPSIjMDAwIj48cGF0aCBkPSJNNzMuNjIsMjEuMzMgTDc0LjAzLDMuNzIgQTU4LDU4IDAgMCAxIDkwLjc0LDEwLjgxIEw3OC4zNiwyMy4zNCBBNDEsNDEgMCAwIDAgNzMuNjIsMjEuMzMgWiIvPjxwYXRoIGQ9Ik05Ni45OCw0Mi4yOCBMMTA5LjcyLDMwLjEzIEE1OCw1OCAwIDAgMSAxMTYuNTEsNDYuOTUgTDk4LjkwLDQ3LjA2IEE0MSw0MSAwIDAgMCA5Ni45OCw0Mi4yOCBaIi8+PC9nPjwvc3ZnPg==");
  --geo-op:.05;          /* peso da tinta */
  --geo-op-v:.13;        /* o verde aguenta um pouco mais */
}

.geo{position:relative;overflow:clip}
.geo > .wrap,.geo > .band-mq{position:relative;z-index:1}
.geo::before,.geo::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:var(--geo-w,clamp(300px,40vw,600px));aspect-ratio:1;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:var(--geo-pos,center);mask-position:var(--geo-pos,center);
  -webkit-mask-size:var(--geo-zoom,contain);mask-size:var(--geo-zoom,contain);
}
.geo::after{background:var(--paper);opacity:var(--geo-op);
  -webkit-mask-image:var(--geo-tinta);mask-image:var(--geo-tinta)}
.geo::before{background:var(--volt);opacity:var(--geo-op-v);
  -webkit-mask-image:var(--geo-verde);mask-image:var(--geo-verde)}

/*── posições ────────────────────────────────────────────────────
  Cinco arranjos, atribuídos de secção para secção sem repetir a
  seguir a si próprio. A figura sai sempre por uma aresta: inteira e
  ao centro pareceria um carimbo. */
.geo-a::before,.geo-a::after{right:clamp(-200px,-11vw,-70px);top:50%;translate:0 -50%}
.geo-b::before,.geo-b::after{left:clamp(-180px,-10vw,-64px);bottom:-14%}
.geo-c::before,.geo-c::after{right:4%;top:clamp(-150px,-8vw,-56px)}
.geo-d::before,.geo-d::after{right:-9%;top:-42%}
.geo-e::before,.geo-e::after{left:-6%;top:clamp(-140px,-7vw,-50px)}

/*── tamanhos ── */
.geo-g{--geo-w:clamp(340px,46vw,680px)}   /* grande */
.geo-p{--geo-w:clamp(240px,30vw,440px)}   /* pequeno */

/*── fragmento ──
  A máscara ampliada mostra só um pedaço da marca. Lê-se como pormenor
  de arquitetura em vez de logótipo repetido. */
.geo-frag{--geo-zoom:210%;--geo-pos:22% 30%}
.geo-frag2{--geo-zoom:185%;--geo-pos:78% 66%}

/*── na faixa verde a tinta é escura, e o verde sobre verde sai ──*/
.band.geo::after{background:var(--on-volt);opacity:.075}
.band.geo::before{opacity:0}

/*── telemóvel ──
  Numa coluna estreita a figura passaria por trás do texto todo em vez
  de ocupar o vazio ao lado dele. Recua e encolhe. */
@media(max-width:900px){
  .geo{--geo-op:.04;--geo-op-v:.10;--geo-w:clamp(210px,52vw,320px)}
  .geo-g{--geo-w:clamp(240px,60vw,360px)}
  .geo-p{--geo-w:clamp(180px,44vw,260px)}
  .geo-a::before,.geo-a::after{right:-24%;top:auto;bottom:3%;translate:0 0}
  .geo-b::before,.geo-b::after{left:-24%;bottom:-7%}
  .geo-c::before,.geo-c::after{right:-18%;top:-5%}
  .geo-d::before,.geo-d::after{right:-20%;top:-26%}
  .geo-e::before,.geo-e::after{left:-20%;top:-5%}
}

/*═════════ A SEGUNDA VIA · AULA EM 24H ══════════════════════════
  Duas portas de entrada, com pesos diferentes de propósito. A semana
  é a principal — é onde há conversa, diagnóstico e onde o método se
  explica — e fica com o formulário e com o verde. Esta é o atalho
  para quem não quer esperar por um telefonema, e é ela que evita
  perder essa pessoa: sem uma via direta, quem não quer telefonema
  fecha o site.

  ⚠ A primeira versão era um rectângulo de contorno de 1 px no meio de
    uma secção preta e passava despercebida — o cliente disse-o assim.
    Um contorno não é hierarquia: sobre preto, uma linha a 14% de opacidade
    quase não existe. Agora o bloco tem SUPERFÍCIE PRÓPRIA (fundo mais
    claro que a secção), um filete verde em cima que o separa do que vem
    antes, um "24h" grande que serve de âncora visual, e um botão sólido
    claro. Continua a não ser um segundo botão verde: o verde é da
    semana, e dois verdes lado a lado anulavam-se.
  ───────────────────────────────────────────────────────────────*/
/*── AS TRÊS VIAS ────────────────────────────────────────────────
  Substituíram o bloco «24h» que vivia depois do formulário e a caixa
  de contacto que vivia na coluna da esquerda. A escolha faz-se uma
  vez, no topo da secção, e o formulário vem logo a seguir.

  Uma coluna em telemóvel, três a partir de 900 px. A ordem do
  ficheiro é a ordem de leitura em coluna única, e por isso a via
  recomendada está escrita primeiro — em telemóvel é a primeira que
  se lê, e é a que aponta para o formulário. */
.vias-topo{max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem)}
.vias-topo .lede{margin-top:1.3rem;max-width:52ch}

.vias3{display:grid;gap:clamp(1rem,2vw,1.3rem);
  margin-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:900px){
  .vias3{grid-template-columns:1.25fr 1fr 1fr;align-items:stretch}
}

.via3{background:var(--carbon);
  box-shadow:inset 0 0 0 1px var(--line-2);
  padding:clamp(1.5rem,3.2vw,2.1rem);
  display:flex;flex-direction:column;gap:.85rem}

/* A via principal: filete verde em cima, contorno mais presente e um
   fundo ligeiramente puxado ao verde. Não leva botão — o peso vem da
   superfície, não de mais um CTA a competir com o de submeter. */
.via3-alvo{border-top:3px solid var(--volt);
  box-shadow:inset 0 0 0 1px rgba(144,192,8,.22);
  background:linear-gradient(180deg,rgba(144,192,8,.055),rgba(144,192,8,0) 42%),var(--carbon)}

.via3-selo{align-self:flex-start;font-family:var(--d);font-size:.55rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-volt);
  background:var(--volt);border-radius:100px;padding:.3rem .65rem}

.via3-t{font-family:var(--d);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.25rem,3.4vw,1.6rem);line-height:1.1;color:var(--paper)}
.via3-alvo .via3-t{font-size:clamp(1.45rem,4vw,1.9rem)}
.via3-p{color:var(--mute);font-size:.93rem;line-height:1.6;max-width:44ch}

.via3-inclui{margin-top:.35rem;gap:.55rem}
.via3-inclui li{font-size:.86rem}

/* «É já aqui em baixo» com a seta. Substitui o botão que este cartão
   não tem: diz para onde ir sem obrigar a um salto. */
.via3-aponta{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;gap:.55rem;
  font-family:var(--d);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--volt)}
.via3-aponta svg{width:15px;height:15px;animation:via3desce 2.4s ease-in-out infinite}
@keyframes via3desce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.via3-aponta svg{animation:none}}

/* O «24h» do terceiro cartão: mesma âncora visual do bloco antigo,
   à escala do cartão. */
.via3-num{font-family:var(--d);font-weight:600;color:var(--volt-t);
  font-size:clamp(1.9rem,5vw,2.6rem);line-height:.85;letter-spacing:-.05em;
  font-variation-settings:'wdth' 108}

/* margin-top:auto encosta os botões ao fundo: com três cartões de
   alturas diferentes, sem isto ficavam a alturas diferentes também. */
.via3-pe{margin-top:auto;padding-top:.7rem;display:flex;flex-wrap:wrap;
  gap:.7rem 1rem;align-items:center}
.via3-pe .btn{justify-content:space-between;gap:.65rem}
@media(max-width:899px){.via3-pe .btn{width:100%}}
.via3-tel{font-size:.86rem;color:var(--mute)}
.via3-tel:hover{color:var(--volt)}

/* Botão sólido claro: tem o peso de um botão principal sem disputar o
   verde da semana. Ao passar o rato inverte para verde, como os outros. */
.btn-paper{--bg:var(--paper);--fg:var(--ink)}
.btn-paper::before{background:var(--volt)}
.btn-paper:hover{color:var(--on-volt)}


/*── o atalho no cabeçalho ──────────────────────────────────────
  Passou de texto cinzento a pastilha de contorno claro: com o nome
  antigo lia-se como mais um item do menu e ninguém lhe tocava.
  Continua a aparecer só a partir de 900 px. Abaixo disso a barra tem
  logótipo, botão e menu, e um terceiro elemento empurrava o botão
  principal contra o burger — erro que já se corrigiu uma vez neste
  ficheiro. Em telemóvel o caminho é o item 07 do menu, realçado. */
.nav-app{display:none}
@media(min-width:900px){
  .nav-app{display:inline-flex;align-items:center;gap:.5rem;
    padding:.62rem 1.02rem;border:1px solid rgba(242,242,238,.34);border-radius:100px;
    font-family:var(--d);font-size:.62rem;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--paper);white-space:nowrap;
    margin-right:.5rem;
    transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
  .nav-app:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .nav-app svg{width:11px;height:11px;flex:none}
}

/*── o item 07 do menu, que em telemóvel é a única porta para a app ──
  Leva um ponto verde à frente para se distinguir dos outros seis, que
  são páginas do site. Este sai do site. */
.menu ol a[data-app-reserva]{color:var(--volt-t)}
.menu ol a[data-app-reserva]:hover{color:var(--paper)}
.menu ol a[data-app-reserva] small{color:var(--paper)}

/* O rótulo "Semana grátis" partia em duas linhas entre 1150 e 1300 px,
   onde os links do menu voltam a aparecer e a barra fica apertada. O
   botão passa a crescer em largura em vez de em altura. */
.nav-cta{white-space:nowrap}

/*── a aula em 24h, no alto da página ───────────────────────────
  O .hero-cta é um flex com quebra: esta linha entra como mais um
  item e assenta ao lado da nota em ecrã largo, por baixo em
  telemóvel. Fica em verde e sublinhada, para se ler como caminho
  alternativo e não como legenda do botão. */
.hero-alt{display:inline-flex;align-items:center;gap:.45rem;
  color:var(--volt-t);font-family:var(--d);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid rgba(144,192,8,.42);padding-bottom:.22rem;
  transition:color .35s,border-color .35s}
.hero-alt:hover{color:var(--paper);border-color:var(--paper)}
.hero-alt svg{width:11px;height:11px;flex:none}
@media(max-width:760px){
  /* .hero-cta .btn leva width:100% em telemóvel; esta linha não pode
     herdar isso, senão o sublinhado atravessa o ecrã todo. */
  .hero-alt{width:auto;align-self:flex-start}
}