/* =========================================================
   Breathe Studio · site
   Cores, logo e fontes: manual-da-marca.html
   Efeitos: adaptados de referencias/07-design-system/design_system.html
   ========================================================= */
:root{
  --ink:#0B0F14; --abismo:#0A1A33; --painel:#11161E; --linha:#1C2430;
  --branco:#F4F7FA; --cinza:#8A94A6; --azul:#3D6BFF; --nevoa:#BFD6FF;
  --display:"Schibsted Grotesk","Helvetica Neue",sans-serif;
  --body:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:48px; --max:1320px;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
html,body{background:var(--ink);color:var(--branco);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{font-weight:300;line-height:1.6}
img,svg{display:block}
a{color:inherit}
p{text-wrap:pretty}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:2px solid var(--nevoa);outline-offset:3px;border-radius:6px}
html{scrollbar-color:#2A3445 var(--ink)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:#2A3445;border-radius:10px;border:2px solid var(--ink)}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--branco);color:var(--ink);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:500}
.skip:focus{top:16px}
.noise{position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ic{width:18px;height:18px;flex:none}
.g{color:var(--cinza)}

/* ---------- tipografia base ---------- */
.h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;font-size:clamp(36px,4.6vw,68px);max-width:16ch;text-wrap:balance}
.body{font-size:17px;line-height:1.7;color:var(--cinza);max-width:52ch}
.micro{font-size:13px;color:var(--cinza);margin-top:14px}
.micro a{color:var(--branco);text-underline-offset:3px;text-decoration-color:rgba(244,247,250,.35)}
.tag-concept{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--branco);background:rgba(11,15,20,.62);border:1px solid rgba(191,214,255,.22);backdrop-filter:blur(10px)}
.tag-concept::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nevoa)}

/* ---------- seções e ritmo ----------
   Sem linhas entre dobras. As dobras 05, 07 e 09 ganham um fundo
   Ink → Abismo de ponta a ponta, que alterna o tom ao rolar. */
.sec{position:relative;max-width:var(--max);margin:0 auto;padding:140px var(--gut);isolation:isolate}
.sec-head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.tone::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,var(--abismo) 22%,var(--abismo) 78%,var(--ink) 100%);opacity:.75}

/* ---------- revelação ao rolar (já visível sem JS) ----------
   3 níveis: títulos sobem por uma máscara, textos aparecem, mídias se abrem. */
.js [data-rv]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv="h"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);translate:0 .35em;transition:clip-path 1s var(--ease),translate 1s var(--ease)}
.js [data-rv="h"].in{clip-path:inset(0 0 -.2em 0);translate:0 0}
.js [data-rv="h"] .g{opacity:0;transition:opacity .8s var(--ease) .25s}
.js [data-rv="h"].in .g{opacity:1}
.js [data-rv="m"]{opacity:0;transform:scale(.98);clip-path:inset(8% round 16px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
.js [data-rv="m"].in{opacity:1;transform:none;clip-path:inset(0 round 0)}

/* ========== DOBRA 01 · TOPO ========== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gut);transition:padding .5s var(--ease),background .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{padding-block:12px;background:rgba(11,15,20,.72);backdrop-filter:blur(18px) saturate(140%);border-color:var(--linha)}
.nav-logo svg{height:46px;width:auto;transition:height .5s var(--ease)}
.nav.scrolled .nav-logo svg{height:38px}
.nav-links{display:flex;gap:8px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--cinza);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--nevoa);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover,.nav-links a.is-active{color:var(--branco)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav-wa-mobile{display:none!important}
.pill{justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;border:1px solid rgba(244,247,250,.22);border-radius:999px;padding:0 22px;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;backdrop-filter:blur(10px);transition:background .3s,border-color .3s,opacity .4s,transform .4s var(--ease)}
.pill:hover{background:rgba(244,247,250,.06);border-color:rgba(244,247,250,.45)}
.nav-toggle{display:none}

/* ---------- botões ---------- */
.beam-btn{position:relative;display:inline-flex;border-radius:999px;padding:1.5px;overflow:hidden;text-decoration:none;isolation:isolate}
.beam-btn .ray{position:absolute;inset:-1000%;background:conic-gradient(from 0deg,transparent 0 320deg,#9DB9FF 345deg,#BFD6FF 360deg);animation:spin2 3s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.beam-btn .in{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;border-radius:999px;background:var(--azul);color:#fff;padding:0 28px;font-weight:500;font-size:15px;overflow:hidden;transition:background .3s}
.beam-btn .in::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.5s ease-in-out 2s infinite}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.beam-btn:hover .in{background:#2E58E6}
.beam-btn .ic{transition:transform .5s var(--ease)}
.beam-btn:hover .ic{transform:translateX(4px)}
.ghost{display:inline-flex;align-items:center;gap:10px;min-height:52px;border-radius:999px;padding:0 22px;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:background .3s}
.ghost:hover{background:rgba(244,247,250,.06)}
.ghost-ic{display:none}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:1px solid rgba(244,247,250,.25);border-radius:999px;padding:0 24px;text-decoration:none;font-weight:500;font-size:15px;transition:background .3s,border-color .3s}
.btn-line:hover{background:rgba(244,247,250,.06);border-color:rgba(244,247,250,.5)}
.btn-line .ic{transition:transform .5s var(--ease)} .btn-line:hover .ic{transform:translateX(4px)}

/* ========== DOBRA 02 · ABERTURA ========== */
.hero{position:relative;overflow:hidden;min-height:88vh;display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:40px;padding:150px max(var(--gut),calc((100% - 1600px) / 2 + var(--gut))) 96px}
.fog{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .fog,.hero .dots{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.dots{position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(191,214,255,.13) 1px,transparent 1px);background-size:26px 26px}
.hero .dots{-webkit-mask-image:radial-gradient(ellipse 55% 50% at 70% 50%,#000,transparent 72%);mask-image:radial-gradient(ellipse 55% 50% at 70% 50%,#000,transparent 72%)}
.big-breath{position:absolute;left:-8%;top:50%;width:70%;transform:translateY(-50%);z-index:0;opacity:.055;overflow:visible}
.big-breath circle{animation:inhale 7s var(--ease) infinite;transform-origin:18px 45px}
.big-breath path{stroke-dasharray:140;animation:exhale 7s var(--ease) infinite}
.big-breath path:nth-child(2){animation-delay:.25s}.big-breath path:nth-child(3){animation-delay:.5s}
@keyframes inhale{0%,100%{transform:scale(1)}40%{transform:scale(.86)}}
@keyframes exhale{0%{stroke-dashoffset:140;opacity:0}20%{opacity:1}55%{stroke-dashoffset:0;opacity:1}85%,100%{stroke-dashoffset:-140;opacity:0}}
.air{position:absolute;inset:0;z-index:1;pointer-events:none}
.air i{position:absolute;left:0;height:1px;width:38%;background:linear-gradient(90deg,transparent,rgba(191,214,255,.5),transparent);opacity:0;animation:flow 9s linear infinite}
.air i:nth-child(1){top:24%}
.air i:nth-child(2){top:41%;width:26%;animation-delay:2.6s;animation-duration:11s}
.air i:nth-child(3){top:63%;animation-delay:5s;animation-duration:10s}
.air i:nth-child(4){top:79%;width:22%;animation-delay:1.4s;animation-duration:12s}
@keyframes flow{0%{transform:translateX(-40vw);opacity:0}15%{opacity:.7}85%{opacity:.5}100%{transform:translateX(120vw);opacity:0}}
.hero-copy{position:relative;z-index:3}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.9;font-size:clamp(64px,8vw,6rem)}
@media (min-width:1500px){h1{font-size:7.5rem}}
.rv{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rv>span{display:block;transform:translateY(105%);animation:up 1.3s var(--ease) forwards}
.rv:nth-child(2)>span{animation-delay:.12s}
@keyframes up{to{transform:none}}
.glass-txt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,#3D6BFF 0%,#BFD6FF 22%,#3D6BFF 44%,#3D6BFF 100%);background-size:250% 100%;animation:sheen 6s ease-in-out 1.4s infinite}
.rv>.glass-txt{animation:up 1.3s var(--ease) .12s forwards,sheen 6s ease-in-out 1.4s infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.sub{display:flex;align-items:center;gap:16px;margin-top:22px;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;opacity:0;animation:fadein 1.2s var(--ease) .5s forwards}
.sub .ln{width:56px;height:1px;background:var(--cinza);transform-origin:left;animation:grow 1.2s var(--ease) .7s both}
@keyframes grow{from{transform:scaleX(0)}}
.lead b{font-weight:inherit}
.br-m{display:none}
.lead{margin-top:34px;font-size:17px;line-height:1.7;color:var(--cinza);max-width:46ch;opacity:0;animation:fadein 1.2s var(--ease) .7s forwards}
@keyframes fadein{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:34px;opacity:0;animation:fadein 1.2s var(--ease) .9s forwards}
.hero .micro{opacity:0;animation:fadein 1.2s var(--ease) 1s forwards}
.hero-card{position:relative;z-index:2;height:min(560px,62vh);perspective:1200px;opacity:0;animation:fadein 1.4s var(--ease) .4s forwards}
.spot{position:absolute;top:50%;left:50%;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(61,107,255,.3),rgba(10,26,51,0) 62%);filter:blur(50px);pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}45%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
.float{width:100%;height:100%;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.tilt{width:100%;height:100%;transform:rotateY(-10deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .7s var(--ease)}
.hero-card .mock{height:100%}
.hero-card .tag-concept{position:absolute;right:16px;bottom:16px;z-index:7}
.beam{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;overflow:hidden;pointer-events:none;z-index:6;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.beam::before{content:"";position:absolute;top:50%;left:50%;width:300%;height:300%;transform:translate(-50%,-50%) rotate(28deg);
  background:conic-gradient(from 0deg,transparent 0 290deg,rgba(191,214,255,.9) 335deg,#3D6BFF 360deg);animation:spin 6s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(388deg)}}

/* ========== COMPARTILHADO · SITES DE EXEMPLO (usados nas dobras 02, 05 e 06) ========== */
.mock{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(191,214,255,.12)}
.m-bar{display:flex;gap:6px;padding:10px 12px;align-items:center}
.m-bar i{width:8px;height:8px;border-radius:50%;display:block;opacity:.45;background:currentColor}
.m-bar span{margin-left:10px;font-family:var(--mono);font-size:11px}
.m-body{position:relative;padding:24px 26px;height:calc(100% - 28px)}
.m-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--body);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.m-nav b{font-size:15px;letter-spacing:0;text-transform:none;font-weight:600}
.m-h{font-size:34px;line-height:1.04;margin-top:30px;max-width:9ch;letter-spacing:-.01em}
.m-p{font-family:var(--body);font-size:12px;line-height:1.55;max-width:24ch;margin-top:12px}
.m-btn{display:inline-block;margin-top:16px;font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:999px}
.m-art{position:absolute;right:22px;top:68px;width:42%;height:62%;overflow:hidden}
.kb{animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translateY(-6px)}}
/* Helena · dermatologia */
.m-helena{background:#F2EDE6;color:#3A2E24}
.m-helena .m-bar{background:#E6DED3;color:#6A5A49}
.m-helena .m-nav{color:#6A5A49} .m-helena .m-nav b{font-family:"Fraunces",serif;color:#3A2E24}
.m-helena .m-h{font-family:"Fraunces",Georgia,serif;font-weight:400}
.m-helena .m-h em{font-style:italic;color:#B0663F}
.m-helena .m-p{color:#6A5A49}
.m-helena .m-btn{background:#3A2E24;color:#F2EDE6}
.m-helena .m-art{border-radius:120px 120px 14px 14px;background:radial-gradient(circle at 40% 30%,#E9C9AE,#C98E6B 55%,#9C5E3F)}
.m-helena .m-art::after{content:"";position:absolute;left:18%;right:18%;bottom:-8%;height:62%;border-radius:50% 50% 0 0;background:#F2EDE6;opacity:.35}
/* site genérico (antes) */
.m-generic{background:#FFFFFF;color:#333;font-family:Arial,Helvetica,sans-serif}
.m-generic .m-bar{background:#E9E9E9;color:#5E5E5E}
.g-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;background:#1F5FA8;color:#fff;font-size:11px}
.g-top b{font-size:14px;letter-spacing:.02em}
.g-banner{height:38%;background:linear-gradient(135deg,#3F5F86,#52729A);display:grid;place-items:center}
.g-banner span{font-size:22px;color:#fff;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.g-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px}
.g-cols div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}
.g-cols i{width:34px;height:34px;border-radius:50%;background:#1F5FA8;opacity:.8}
.g-p{padding:0 18px;font-size:12px;line-height:1.5;color:#666;text-align:center}

/* ========== DOBRA 03 · FAIXA ========== */
.marquee{position:relative;overflow:hidden;padding:30px 0 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.air-mq i:nth-child(1){top:18%;animation-delay:3.4s}
.air-mq i:nth-child(2){top:82%;width:30%;animation-delay:7s;animation-duration:13s}
.mq{display:flex;align-items:center;gap:44px;white-space:nowrap;width:max-content;font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:56px;line-height:1;animation:mq 60s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{color:transparent;-webkit-text-stroke:1px rgba(191,214,255,.3)}
.mq svg{width:44px;height:33px;opacity:.25}

/* ========== DOBRA 04 · PROBLEMA ========== */
.problem .h2{max-width:18ch}
.signs{list-style:none;padding:0;margin-top:72px;border-top:1px solid var(--linha)}
.signs li{position:relative;display:grid;grid-template-columns:72px 1fr;gap:32px;align-items:start;padding:40px 24px;border-bottom:1px solid var(--linha);overflow:hidden;isolation:isolate}
.signs li:last-child{border-bottom:0}
.signs li>div{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.signs li::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(61,107,255,.12),transparent 60%)}
.signs li:hover::before{opacity:1}
.sign-ic{width:44px;height:44px;fill:none;stroke:var(--nevoa);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--nevoa)}
.signs h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.signs p{color:var(--cinza);font-size:16px;max-width:40ch;padding-top:4px}

/* ---- Dobra 04 · fundo vivo ----
   Luz difusa que passeia devagar e textura de pontos. */
.p4-bg{position:absolute;inset:0 calc(50% - 50vw);z-index:-2;overflow:hidden;pointer-events:none;
  background:radial-gradient(80% 60% at 15% 30%,rgba(10,26,51,.85),transparent 70%),radial-gradient(60% 50% at 90% 85%,rgba(10,26,51,.7),transparent 70%);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.p4-light{position:absolute;left:50%;top:40%;width:min(900px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(61,107,255,.16),rgba(61,107,255,.05) 40%,transparent 66%);
  transform:translate(-50%,-50%);animation:p4drift 26s ease-in-out infinite alternate}
@keyframes p4drift{0%{transform:translate(-80%,-60%)}50%{transform:translate(-25%,-35%)}100%{transform:translate(-55%,-55%) scale(1.1)}}
  background:linear-gradient(140deg,rgba(61,107,255,.06),transparent 60%);animation:p4tilt 34s ease-in-out infinite alternate}
.p4-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(191,214,255,.08) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 30% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 30% 50%,#000,transparent 75%)}
.problem.p4-off .p4-bg *{animation-play-state:paused}

/* ---- Dobra 04 · linhas divisórias que se desenham ---- */
.problem .signs{border-top:0;position:relative}
.problem .signs::before,.problem .signs li::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--linha);transform-origin:left;transition:transform 1.1s var(--ease),background .5s}
.problem .signs::before{top:0}
.problem .signs li{border-bottom:0}
.problem .signs li::after{bottom:0}
.problem .signs li:last-child::after{display:none}
.problem .signs li:hover::after{background:linear-gradient(90deg,var(--nevoa),rgba(61,107,255,.4) 40%,var(--linha))}

/* ---- Dobra 04 · reação ao passar o mouse ---- */
.problem .sign-ic,.problem .signs h3{transition:transform .6s var(--ease),filter .6s,color .4s}
@media (hover:hover){
  .problem .signs li:hover .sign-ic{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 0 12px rgba(61,107,255,.55))}
  .problem .signs li:hover h3{transform:translateX(6px)}
}

/* ---- Dobra 04 · entradas (só com JS e sem movimento reduzido: classe .p4-arm) ---- */
.p4-arm .p4-title .w4{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.p4-arm .p4-title .w4>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.p4-arm .p4-title.is-in .w4>span{transform:none}
.p4-arm .signs::before,.p4-arm .signs li::after{transform:scaleX(0)}
.p4-arm .signs.is-in::before,.p4-arm .signs li.is-in::after{transform:scaleX(1)}
.p4-arm .signs li::after{transition-delay:.35s}
.p4-arm .sign-ic{opacity:0;transform:scale(.7)}
.p4-arm .sign-ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) .15s}
.p4-arm .signs h3,.p4-arm .signs p{opacity:0;transform:translateY(var(--p4y,18px));transition:opacity .8s var(--ease),transform .9s var(--ease)}
.p4-arm .signs li.is-in .sign-ic{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s}
.p4-arm .signs li.is-in .sign-ic *{stroke-dashoffset:0}
.p4-arm .signs li.is-in h3{opacity:1;transform:none;transition-delay:.12s}
.p4-arm .signs li.is-in p{opacity:1;transform:none;transition-delay:.24s}
@media (hover:hover){.p4-arm .signs li.is-in:hover h3{transform:translateX(6px);transition-delay:0s}.p4-arm .signs li.is-in:hover .sign-ic{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 0 12px rgba(61,107,255,.55))}}
/* ========== DOBRA 05 · ANTES E DEPOIS ========== */
.compare{position:relative;margin-top:64px;height:min(620px,70vh);border-radius:16px;overflow:hidden;--pos:50%;box-shadow:0 60px 100px -40px rgba(0,0,0,.8);touch-action:pan-y}
.cmp-layer{position:absolute;inset:0;border-radius:16px}
.compare .m-helena .m-body{padding-left:54%}
.compare .m-helena .m-nav span{display:none}
.compare .m-helena .m-h{font-size:clamp(34px,4vw,56px);margin-top:60px}
.compare .m-helena .m-p{font-size:14px;max-width:30ch}
.compare .m-helena .m-art{width:34%;height:70%;top:70px;left:8%;right:auto}
.compare .g-banner{justify-items:start;padding-left:8%}
.compare .g-cols,.compare .g-p{width:50%;text-align:left}
.cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--nevoa);transform:translateX(-1px);z-index:5;pointer-events:none}
.cmp-handle span{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:var(--azul);color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.6),0 0 0 6px rgba(61,107,255,.18);transition:transform .4s var(--ease)}
.cmp-handle .ic{width:22px;height:22px}
.compare.dragging .cmp-handle span{transform:translate(-50%,-50%) scale(1.08)}
.compare{cursor:ew-resize}
.cmp-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.compare:has(.cmp-range:focus-visible) .cmp-handle span{outline:2px solid var(--nevoa);outline-offset:4px}
.cmp-label{position:absolute;bottom:16px;z-index:4;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(11,15,20,.72);color:var(--branco);pointer-events:none}
.l-before{left:16px}.l-after{right:16px}
.compare .tag-concept{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;pointer-events:none}
/* desktop: título, texto e comparador cabem juntos em uma tela */
@media (min-width:1081px){
  .turn{height:100svh;min-height:640px;max-height:1000px;display:flex;flex-direction:column;padding-block:104px 48px}
  .turn .sec-head{flex:none}
  .turn .h2{max-width:22ch;font-size:clamp(34px,min(4.2vw,6.4vh),60px)}
  .turn .compare{flex:1;height:auto;min-height:0;margin-top:clamp(24px,4vh,44px)}
  .turn .compare .m-helena .m-h{font-size:clamp(30px,min(3.6vw,6vh),52px);margin-top:clamp(24px,5vh,60px)}
  .turn .compare .m-helena .m-art{top:clamp(48px,8vh,70px);height:62%}
}

/* ========== DOBRA 06 · PROJETOS ========== */
.proj{display:grid;grid-template-columns:4fr 7fr;grid-template-areas:"info stage" "tabs stage";gap:44px 56px;align-items:center;margin-top:72px}
.proj-info{grid-area:info;position:relative;display:grid;align-self:end}
.pi{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.pi.is-on{opacity:1;transform:none;pointer-events:auto}
.pi h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1.05;margin-top:20px}
.pi dl{margin-top:20px;display:grid;gap:6px}
.pi dt{font-size:13px;color:var(--cinza);margin-top:14px}
.pi dd{margin:0;font-size:17px;line-height:1.55;max-width:34ch;color:var(--branco)}
.proj-tabs{grid-area:tabs;align-self:start;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.proj-tabs button{display:grid;gap:10px;min-height:44px;padding:10px 0 12px;background:none;border:0;cursor:pointer;text-align:left;font:500 13px/1.2 var(--body);color:var(--cinza);transition:color .3s}
.proj-tabs button:hover,.proj-tabs [aria-selected="true"]{color:var(--branco)}
.proj-tabs i{display:block;height:2px;background:rgba(244,247,250,.16);border-radius:2px;overflow:hidden}
.proj-tabs i::after{content:"";display:block;height:100%;width:0;background:var(--nevoa)}
.proj-tabs [aria-selected="true"] i::after{animation:load var(--dur,6s) linear forwards}
.proj.stopped .proj-tabs [aria-selected="true"] i::after{animation:none;width:100%}
.proj.paused .proj-tabs [aria-selected="true"] i::after{animation-play-state:paused}
@keyframes load{to{width:100%}}
.proj-stage{grid-area:stage;position:relative;height:min(560px,64vh);perspective:1400px;touch-action:pan-y}
.ps{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ps.is-on{opacity:1;transform:none}
.ps .mock{height:100%;transition:transform .7s var(--ease)}
.proj-stage:hover .ps.is-on .mock{transform:rotateY(-4deg) rotateX(2deg)}

/* ========== DOBRA 07 · PROCESSO ========== */
.steps{list-style:none;padding:0;margin-top:80px;position:relative;--p:0;max-width:880px}
.steps::before,.steps::after{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--linha)}
.steps::after{background:linear-gradient(var(--nevoa),var(--azul));transform-origin:top;transform:scaleY(var(--p))}
.steps li{position:relative;display:grid;grid-template-columns:16px 1fr;gap:40px;padding:0 0 64px}
.steps li:last-child{padding-bottom:0}
.steps .dot{width:16px;height:16px;border-radius:50%;background:var(--ink);border:1px solid #3A4659;margin-top:12px;position:relative;z-index:1;transition:background .5s,border-color .5s,box-shadow .5s}
.steps li.lit .dot{background:var(--azul);border-color:var(--nevoa);box-shadow:0 0 0 6px rgba(61,107,255,.16)}
.step-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.steps h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.1}
.steps p{color:var(--cinza);font-size:17px;max-width:52ch;margin-top:12px}
.steps .time{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--nevoa);padding:6px 12px;border:1px solid rgba(191,214,255,.25);border-radius:999px;white-space:nowrap}
.total{margin-top:64px;padding-left:56px;font-size:17px;color:var(--cinza)}
.total span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.total b{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;color:var(--branco)}
/* Rolagem guiada (classe .pin posta pelo JS): ao rolar, o título some e os passos entram
   um de cada vez no centro da tela, ampliados. O que já passou sobe pequeno e esmaecido;
   o próximo espera embaixo. Sem JS ou com movimento reduzido, a dobra fica como lista normal. */
.process.pin{padding-block:0}
.process.pin .proc-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.process.pin .proc-title{position:absolute;left:0;right:0;top:var(--tt,120px);display:block;z-index:2;
  opacity:calc(1 - var(--t,0));transform:translate3d(0,calc(var(--t,0) * -40px),0);will-change:opacity,transform}
.process.pin .proc-title .body{margin-top:18px}
.process.pin .proc-win{position:absolute;left:0;right:0;top:var(--wt,120px);bottom:var(--wb,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.process.pin .proc-rail{position:absolute;inset:0}
.process.pin .steps{position:absolute;inset:0;margin:0;max-width:none}
.process.pin .steps::before,.process.pin .steps::after{top:0;bottom:0}
.process.pin .steps li{--h3:clamp(30px,9vw,40px);position:absolute;left:0;right:0;top:50%;padding:0;gap:22px;
  max-width:920px;transform-origin:0 50%;will-change:transform,opacity}
.process.pin .steps .dot{margin-top:calc(var(--h3) * .55 - 8px)}
.process.pin .steps h3{font-size:var(--h3);line-height:1.1;transition:color .5s}
.process.pin .steps p{font-size:17px;margin-top:14px;transition:color .5s}
.process.pin .steps li.is-active .dot{box-shadow:0 0 0 6px var(--ink),0 0 0 7px rgba(191,214,255,.45)}
.process.pin .steps li .time{transition:background .5s,border-color .5s}
.process.pin .steps li.is-active .time{background:rgba(61,107,255,.16);border-color:rgba(191,214,255,.5)}
.process.pin .steps li.is-active p{color:#AEB7C6}
.process.pin .total{position:absolute;left:0;right:0;top:50%;margin:0;will-change:transform,opacity}
.process.pin .total,.process.pin .steps li{transition:none!important}
@media (min-width:1081px){
  .process.pin .steps li{--h3:clamp(44px,min(5vw,8.5svh),78px);gap:44px}
  .process.pin .steps .time{font-size:14px;padding:7px 14px}
  .process.pin .steps p{font-size:clamp(18px,min(1.55vw,2.7svh),24px);max-width:40ch;margin-top:18px}
  .process.pin .total{padding-left:60px}
  .process.pin .total b{font-size:clamp(32px,3.2vw,48px)}
}

/* ========== DOBRA 08 · SOBRE ========== */
.about{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.about-photo{position:sticky;top:120px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#14203A,#0B0F14)}
.photo-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;color:var(--cinza);font-size:14px}
.photo-ph svg{width:96px;height:72px;opacity:.5}
.about-photo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(191,214,255,.1) 1px,transparent 1px);background-size:14px 14px;mix-blend-mode:screen}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-photo:has(img){background:#0B0F14;box-shadow:0 0 0 1px rgba(191,214,255,.10)}
.about-photo:has(img)::after{display:none}
.words{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.3vw,34px);line-height:1.35;letter-spacing:-.02em;margin-top:40px;max-width:30ch}
.words .w{opacity:.35;transition:opacity .4s}
.words .w.on{opacity:1}
.manifesto{margin-top:64px;padding-top:36px;border-top:1px solid var(--linha);display:grid;gap:16px;color:#AEB7C6;font-size:17px;max-width:52ch}
.manifesto footer{font-family:var(--display);font-weight:800;font-size:22px;color:var(--branco);letter-spacing:-.02em;margin-top:6px}

/* ========== DOBRA 09 · PACOTES ========== */
.plans .h2{max-width:14ch}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:72px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:36px 32px;border-radius:18px;background:rgba(17,22,30,.7);border:1px solid var(--linha)}
.plan h3{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em}
.plan-for{color:var(--cinza);font-size:15px;margin-top:6px}
.price{font-family:var(--display);font-weight:800;font-size:56px;letter-spacing:-.04em;line-height:1;margin-top:30px}
.price span{font-size:20px;font-weight:500;color:var(--cinza);margin-right:6px;vertical-align:top;position:relative;top:8px;letter-spacing:0}
.plan ul{list-style:none;padding:28px 0 0;margin-top:28px;border-top:1px solid var(--linha);display:grid;gap:14px;flex:1;align-content:start}
.plan li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.plan li .ic{color:var(--nevoa);margin-top:2px}
.plan-time{font-size:13px;color:var(--cinza);margin:28px 0 18px}
.plan .btn-line,.plan .beam-btn{width:100%}
.plan .beam-btn .in{width:100%;justify-content:center}
.plan-hl{background:linear-gradient(180deg,rgba(61,107,255,.14),rgba(17,22,30,.85) 55%);border-color:transparent}
.plan-badge{position:absolute;top:20px;right:20px;font-size:12px;font-weight:500;color:var(--nevoa);padding:5px 11px;border-radius:999px;background:rgba(61,107,255,.18)}
.plans-hint{display:none}
.plans-note{margin-top:36px;text-align:center;color:var(--cinza);font-size:15px}

/* ========== DOBRA 10 · PERGUNTAS ========== */
.faq{display:grid;grid-template-columns:4fr 7fr;gap:72px;align-items:start}
.faq-side{position:sticky;top:120px}
.faq .h2{max-width:13ch}
.faq-ask{margin-top:40px;display:grid;justify-items:start;gap:16px}
.faq-ask p{color:var(--cinza);font-size:16px}
.faq-list{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:26px 4px;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.015em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--nevoa)}
.plus{position:relative;width:18px;height:18px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq details p{color:var(--cinza);font-size:16px;max-width:60ch;padding:0 4px 28px}
.faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .5s var(--ease),opacity .5s var(--ease),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}

/* ========== DOBRA 11 · CHAMADA FINAL ========== */
.final{position:relative;overflow:hidden;padding:180px var(--gut);text-align:center}
.final .fog{opacity:var(--fogo,1);transition:opacity .3s linear;-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 80%,transparent)}
.final-in{position:relative;z-index:2;display:grid;justify-items:center}
.final-h{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.98;font-size:clamp(44px,6.4vw,6rem);max-width:13ch;text-wrap:balance}
.final .body{margin:28px auto 40px}

/* ========== DOBRA 12 · RODAPÉ ========== */
.foot{position:relative;padding:0 var(--gut) 36px;overflow:hidden}
.foot-word{position:relative;font-family:var(--display);font-weight:800;letter-spacing:-.06em;line-height:.8;font-size:clamp(90px,21vw,330px);text-align:center;padding-top:60px;user-select:none}
.foot-word span{display:block;color:transparent;-webkit-text-stroke:1px rgba(191,214,255,.24)}
.foot-word .fill{position:absolute;left:0;right:0;top:60px;color:var(--nevoa);-webkit-text-stroke:0;
  -webkit-mask-image:radial-gradient(240px circle at var(--fx,-400px) var(--fy,-400px),#000 0%,transparent 70%);mask-image:radial-gradient(240px circle at var(--fx,-400px) var(--fy,-400px),#000 0%,transparent 70%)}
.foot-grid{display:grid;grid-template-columns:1fr auto auto;gap:64px;align-items:start;max-width:var(--max);margin:64px auto 0;padding-top:48px;border-top:1px solid var(--linha)}
.foot-logo{height:52px;width:auto}
.foot nav,.foot-contact{display:grid;gap:2px}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--cinza);font-size:15px;transition:color .3s}
.foot a:hover{color:var(--branco)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;max-width:var(--max);margin:40px auto 0;font-size:13px;color:var(--cinza)}
.foot-bottom a{font-size:13px}

/* ========== EXTRA · BOTÃO FLUTUANTE DE WHATSAPP ========== */
.wa-float{display:none}

/* ---------- modo screenshot / movimento reduzido ---------- */
.shot [data-rv]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;translate:none!important;transition:none!important}
.shot [data-rv] .g{opacity:1!important;transition:none!important}
.shot .rv>span,.shot .sub,.shot .lead,.shot .ctas,.shot .hero .micro,.shot .hero .beam-btn,.shot .hero .ghost,.shot .hero-card,.shot .sub .ln{animation-delay:-4s!important}
.shot .words .w{opacity:1}
.shot .steps{--p:1}
@media (min-width:821px){.shot .hero{min-height:860px}.shot .hero-card{height:560px}.shot .compare{height:620px}.shot .proj-stage{height:560px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  html{scroll-behavior:auto}
  .words .w{opacity:1}
  .js [data-rv],.js [data-rv="h"],.js [data-rv="m"]{opacity:1;transform:none;clip-path:none;translate:none}
  .js [data-rv="h"] .g{opacity:1}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  :root{--gut:32px}
  .nav-links{gap:0}
  .nav-links a{padding:0 9px;letter-spacing:.14em}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .signs li>div{grid-template-columns:1fr;gap:10px}
  .proj{grid-template-columns:1fr;grid-template-areas:"tabs" "stage" "info";gap:28px}
  .plan-grid{gap:14px}
  .plan{padding:30px 22px}
  .price{font-size:46px}
  .about,.faq{grid-template-columns:1fr;gap:48px}
  .about-photo{position:relative;top:0;max-width:420px}
  .faq-side{position:static}
}
@media (max-width:820px){
  :root{--gut:16px}
  html{scroll-padding-top:72px}
  body{font-weight:400}
  .nav{grid-template-columns:1fr auto auto;gap:10px;padding:14px var(--gut)}
  .nav.scrolled{padding-block:10px}
  .nav-logo svg,.nav.scrolled .nav-logo svg{height:36px}
  .nav-cta{padding:0 16px;font-size:12px;letter-spacing:.1em}
  .nav.float-on .nav-cta{opacity:0;transform:translateY(-6px);pointer-events:none}
  .nav-toggle{display:grid;place-content:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,247,250,.22);background:none;cursor:pointer}
  .nav-toggle span{display:block;width:16px;height:1.5px;background:var(--branco);transition:transform .5s var(--ease)}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .nav-links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:4px;padding:0 24px;background:rgba(11,15,20,.96);backdrop-filter:blur(20px);
    clip-path:circle(0 at calc(100% - 38px) 36px);transition:clip-path .8s var(--ease);visibility:hidden}
  .nav.open .nav-links{clip-path:circle(150% at calc(100% - 38px) 36px);visibility:visible}
  .nav-links a{font-family:var(--display);font-size:40px;letter-spacing:-.03em;text-transform:none;font-weight:800;color:var(--branco);padding:4px 0;min-height:56px}
  .nav-links a::after{display:none}
  .nav-links a.is-active{color:var(--nevoa)}
  .nav-links .nav-wa-mobile{display:inline-flex!important;font-family:var(--body);font-size:16px;font-weight:500;color:var(--nevoa);margin-top:24px;min-height:44px}

  /* Abertura no celular: título, texto e botão primeiro; card inteiro embaixo; tudo em uma dobra */
  .nav{padding-inline:20px}
  .nav-logo svg,.nav.scrolled .nav-logo svg{height:34px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(14px,2.6svh,26px);padding:clamp(78px,11svh,92px) 20px clamp(10px,1.8svh,18px);height:calc(100vh - var(--mqh,58px));height:calc(100svh - var(--mqh,58px));min-height:520px;align-items:stretch}
  h1{font-size:clamp(42px,min(13.8vw,7.6svh),64px);line-height:.92}
  .sub{font-size:clamp(19px,min(5.8vw,3.2svh),22px);gap:12px;margin-top:clamp(4px,1svh,8px)} .sub .ln{width:34px}
  .lead{font-size:clamp(14px,min(4vw,2.1svh),15px);line-height:1.5;margin-top:clamp(10px,2svh,18px);max-width:none}
  .lead b{color:var(--branco)}
  .hero .ctas{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(8px,2.6vw,14px);margin-top:clamp(14px,2.6svh,22px)}
  .hero .beam-btn{flex:none}
  .hero .beam-btn .in{justify-content:center;min-height:clamp(46px,6.4svh,52px);padding:0 clamp(12px,3.6vw,20px);gap:8px;font-size:clamp(12.5px,3.5vw,15px);white-space:nowrap}
  .hero .ghost{flex:0 1 auto;min-width:0;min-height:44px;padding:0;gap:6px;border-radius:0;font-size:clamp(10px,2.9vw,11px);letter-spacing:.12em;line-height:1.35;text-align:left}
  .hero .ghost:hover{background:none}
  .hero .ghost .ghost-ic{display:block;width:14px;height:14px}
  .hero .micro{display:none}
  .br-m{display:inline}
  .hero-card{height:auto;min-height:0;display:flex;align-items:center;justify-content:flex-start}
  .hero-card .float{flex:none;width:calc(350px * var(--ms,1));height:calc(300px * var(--ms,1))}
  .hero-card .tilt{position:relative}
  .hero-card .float{animation:none}
  .hero-card .tilt{transform:none!important}
  .hero-card .mock{position:absolute;left:0;top:0;width:350px;height:300px;transform:scale(var(--ms,1));transform-origin:0 0}
  .hero-card .m-bar{padding:8px 12px} .hero-card .m-bar i{width:6px;height:6px} .hero-card .m-bar span{font-size:10px}
  .hero-card .m-body{padding:14px 18px}
  .hero-card .m-nav{font-size:9px} .hero-card .m-nav b{font-size:13px}
  .hero-card .m-h{font-size:25px;margin-top:13px;max-width:9.5ch}
  .hero-card .m-p{font-size:10px;max-width:25ch;margin-top:8px}
  .hero-card .m-btn{font-size:9px;padding:8px 13px;margin-top:10px}
  .hero-card .m-art{right:18px;top:48px;width:36%;height:auto;bottom:44px}
  .hero-card .tag-concept{top:auto;bottom:10px;right:10px;font-size:10px;padding:5px 10px}
  .spot{width:420px;height:420px}
  .big-breath{width:150%;left:-35%;top:24%}
  .air i{width:60%}
  .m-h{font-size:28px;max-width:8ch}
  .m-p{max-width:20ch}
  .m-art{width:34%;height:44%;top:120px}
  .m-nav span{display:none}
  .hero-card .m-nav span{display:inline}
  .mq{font-size:30px;gap:22px}
  .mq svg{width:28px;height:21px}
  .marquee{padding:12px 0 18px}

  .sec{padding:88px var(--gut)}
  .h2{font-size:clamp(34px,9.5vw,48px)}
  .body{font-size:16px}
  .signs{margin-top:44px}
  .signs li{grid-template-columns:1fr;gap:14px;padding:30px 4px}

  .compare{height:520px;margin-top:36px}
  .compare .m-helena .m-body{padding-left:50%;padding-right:14px}
  .compare .m-helena .m-h{font-size:24px;margin-top:70px}
  .compare .m-helena .m-p{font-size:12px;max-width:18ch}
  .compare .m-helena .m-art{width:38%;top:110px;left:5%;height:46%}
  .compare .g-banner span{font-size:16px}
  .cmp-label{bottom:58px;font-size:11px;padding:5px 9px}
  .compare .g-cols{grid-template-columns:repeat(3,1fr);gap:4px;padding:14px 8px}
  .compare .g-cols div{font-size:10px}
  .compare .g-cols i{width:24px;height:24px}
  .compare .g-p{display:none}
  .l-before{left:10px}.l-after{right:10px}
  .g-top span{display:none}

  .proj{margin-top:40px}
  .proj-stage{height:400px}
  .pi dl{margin-top:12px}

  .steps{margin-top:52px}
  .steps li{gap:22px;padding-bottom:44px}
  .steps .dot{margin-top:8px}
  .total{padding-left:38px;margin-top:48px}

  .about{display:flex;flex-direction:column-reverse;gap:40px}
  .about-photo{width:100%;max-width:280px;aspect-ratio:1}
  .about-photo img{object-position:50% 12%}
  .words{margin-top:28px}
  .manifesto{margin-top:44px}

  .plan-grid{display:flex;gap:12px;margin:44px calc(var(--gut) * -1) 0;padding:6px var(--gut) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
  .plan-grid::-webkit-scrollbar{display:none}
  .plan{flex:0 0 85%;scroll-snap-align:center}
  .plans-hint{display:block;margin-top:14px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
  .plans-note{margin-top:24px;font-size:14px}

  .faq{gap:36px}
  .faq-ask{margin-top:24px}
  .faq summary{padding:22px 2px}

  .final{padding:112px var(--gut)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-logo{grid-column:1/-1}
  .foot-contact{grid-column:1/-1}
  .wa-float{position:fixed;right:16px;bottom:16px;z-index:90;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--azul);color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);
    transform:translateY(90px);transition:transform .6s var(--ease)}
  .wa-float .ic{width:24px;height:24px}
  .wa-float.show{transform:none}
}

/* ========== DOBRA 04 · PROBLEMA · composição própria do celular ==========
   Título + 3 sinais em uma tela (100svh menos o topo fixo). Ícone à esquerda,
   título e texto à direita, linhas finas entre os blocos. Movimentos mais curtos. */
@media (max-width:820px){
  .problem{--p4y:10px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--navh,64px) + clamp(12px,2.4svh,24px)) 20px clamp(16px,3svh,32px)}
  .problem .h2{font-size:clamp(29px,min(8.6vw,5.1svh),42px);line-height:1.04;max-width:none}
  .problem .signs{margin-top:clamp(18px,3.4svh,36px)}
  .problem .signs li{grid-template-columns:clamp(30px,8.6vw,38px) 1fr;gap:14px;padding:clamp(13px,2.4svh,24px) 0;align-items:start}
  .problem .signs li>div{grid-template-columns:1fr;gap:clamp(3px,.7svh,7px)}
  .problem .sign-ic{width:clamp(30px,8.6vw,38px);height:auto;margin-top:2px}
  .problem .signs h3{font-size:clamp(17px,min(4.9vw,2.75svh),21px);line-height:1.18;max-width:none}
  .problem .signs p{font-size:clamp(13.5px,min(3.75vw,2.05svh),15px);line-height:1.45;padding-top:0;max-width:none}
  .problem .signs li:last-child>div{padding-right:62px} /* espaço para o botão flutuante de WhatsApp */
  .p4-arm .p4-title .w4>span{transition-duration:.8s;transition-delay:calc(var(--i) * 30ms)}
  .p4-arm .sign-ic *{transition-duration:.9s}
}

/* ========== DOBRA 05 · ANTES E DEPOIS · celular em uma tela ==========
   Título, texto e comparador ocupam a altura da tela (100svh menos o topo fixo);
   o comparador estica para preencher o que sobra. */
@media (max-width:820px){
  .turn{height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;
    padding:calc(var(--navh,64px) + clamp(10px,2svh,20px)) 20px clamp(14px,2.6svh,24px)}
  .turn .sec-head{flex:none;gap:clamp(8px,1.6svh,14px)}
  .turn .h2{font-size:clamp(29px,min(8.6vw,5.1svh),42px);line-height:1.04}
  .turn .body{font-size:clamp(13.5px,min(3.75vw,2.05svh),15px);line-height:1.5}
  .turn .compare{flex:1;height:auto;min-height:0;margin-top:clamp(14px,2.6svh,26px)}
  .turn .compare .m-helena .m-h{font-size:clamp(20px,3.3svh,26px);margin-top:clamp(28px,7svh,70px)}
  .turn .compare .m-helena .m-art{top:clamp(64px,12svh,110px);height:auto;bottom:clamp(92px,15svh,130px)}
  .turn .g-banner{height:34%}
  /* rótulos sobem para a barra do navegador, longe do botão do site de exemplo */
  .turn .cmp-label{top:3px;bottom:auto;font-size:11px;letter-spacing:.06em;padding:4px 8px}
  .turn .l-before{left:8px}.turn .l-after{right:8px}
  .turn .compare .m-helena .m-p{display:none}
  .turn .compare .m-helena .m-btn{margin-top:clamp(10px,2svh,18px)}
  .turn .compare .tag-concept{bottom:10px;white-space:nowrap}
}
/* celulares altos: o texto do site de exemplo volta a aparecer */
@media (max-width:820px) and (min-height:760px){
  .turn .compare .m-helena .m-p{display:block;font-size:12px;max-width:18ch}
}

/* ========== DOBRA 06 · PROJETOS · celular em uma tela ==========
   Abas no topo, site de exemplo no meio (desenhado em 420×380 e escalado pelo JS
   para caber inteiro) e a descrição do projeto embaixo. */
@media (max-width:820px){
  .projects{height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;
    padding:calc(var(--navh,64px) + clamp(10px,2svh,20px)) 20px clamp(14px,2.6svh,24px)}
  .projects .sec-head{flex:none;gap:clamp(6px,1.4svh,14px)}
  .projects .h2{font-size:clamp(29px,min(8.6vw,5.1svh),42px);line-height:1.04}
  .projects .body{font-size:clamp(13.5px,min(3.75vw,2.05svh),15px);line-height:1.5}
  .projects .proj{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.8svh,18px);margin-top:clamp(10px,2svh,22px)}
  .projects .proj-tabs{order:0;flex:none}
  .projects .proj-stage{order:1;flex:1;min-height:0;height:auto}
  .projects .proj-info{order:2;flex:none;padding-right:60px} /* espaço para o botão flutuante */
  .projects .ps{inset:0}
  .projects .ps .mock,.projects .proj-stage:hover .ps.is-on .mock{position:absolute;left:0;top:0;width:400px;height:var(--mh,380px);transform:scale(var(--ms,1));transform-origin:0 0}
  .projects .pi .tag-concept{font-size:11px;padding:4px 9px}
  .projects .pi h3{font-size:clamp(21px,min(6vw,3.4svh),28px);margin-top:clamp(4px,1svh,10px)}
  .projects .pi dl{margin-top:clamp(2px,.6svh,8px);gap:2px}
  .projects .pi dt{font-size:12px;margin-top:clamp(4px,.9svh,10px)}
  .projects .pi dd{font-size:clamp(13.5px,min(3.75vw,2.05svh),15px);line-height:1.4;max-width:none}
}

/* ========== DOBRA 08 · SOBRE · celular em uma tela ==========
   Título em cima; foto à esquerda e apresentação à direita; manifesto embaixo.
   A linha da foto cresce para ocupar a altura que sobrar da tela. */
@media (max-width:820px){
  .about{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"titulo titulo" "foto texto" "manif manif";column-gap:16px;row-gap:clamp(16px,3svh,30px);
    min-height:100svh;padding-top:calc(var(--navh,64px) + clamp(12px,3svh,32px));padding-bottom:clamp(20px,4svh,40px)}
  .about-copy{display:contents}
  .about .h2{grid-area:titulo;font-size:clamp(30px,min(8.6vw,5svh),42px);line-height:1.06}
  .about-photo{grid-area:foto;width:100%;max-width:none;height:100%;min-height:180px;aspect-ratio:auto;border-radius:14px}
  .about-photo img{object-position:50% 20%}
  .about .words{grid-area:texto;align-self:center;font-size:clamp(15px,min(5.1vw,2.36svh),22px);line-height:1.4;margin:0;max-width:none}
  .about .manifesto{grid-area:manif;margin:0;padding-top:clamp(14px,2.6svh,24px);gap:clamp(8px,1.4svh,12px);
    font-size:clamp(14px,min(4.1vw,2.2svh),17px);line-height:1.45;max-width:none}
  .about .manifesto footer{font-size:clamp(18px,min(5vw,2.9svh),22px);margin-top:2px}
  .about .manifesto p:last-of-type{padding-right:58px} /* livre do botão de WhatsApp */
}

/* ========== DOBRA 09 · PACOTES · detalhes ========== */
.plan-plus{margin-top:24px;font-size:13px;font-weight:500;color:var(--nevoa);letter-spacing:.01em}
.plan-plus + ul{margin-top:12px}
.plan li b{font-weight:500;color:var(--branco)}
.plan-more{margin:14px auto 0;padding:8px 6px;background:none;border:0;color:var(--cinza);font:inherit;font-size:14px;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(138,148,166,.45);text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.plan-more:hover,.plan-more:focus-visible{color:var(--branco);text-decoration-color:var(--nevoa)}
.plan-hl .plan-more{color:var(--nevoa)}
@media (min-width:1081px){
  .plan-grid{align-items:center}
  .plan{min-height:100%}
  .plan-hl{padding-block:52px;margin-block:-24px;border:1px solid rgba(191,214,255,.28)}
  .plan-hl h3{font-size:34px}
}
/* janela de detalhes */
html.dlg-open{overflow:hidden}
.plan-dlg{width:min(640px,calc(100% - 32px));max-height:min(88svh,880px);padding:0;margin:auto;border:1px solid var(--linha);border-radius:20px;
  background:#0E141C;color:var(--branco);overflow:hidden}
.plan-dlg.is-hl{border-color:rgba(191,214,255,.28)}
.plan-dlg::backdrop{background:rgba(5,8,12,.72);backdrop-filter:blur(6px)}
.plan-dlg[open]{animation:dlgIn .45s var(--ease)}
.plan-dlg[open]::backdrop{animation:dlgFade .45s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dlgFade{from{opacity:0}to{opacity:1}}
.dlg-in{position:relative;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding:40px 40px 32px}
.dlg-x{position:sticky;top:0;float:right;margin:-16px -16px 0 0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(244,247,250,.06);border:1px solid var(--linha);color:var(--branco);cursor:pointer;z-index:1;transition:background .3s}
.dlg-x:hover{background:rgba(244,247,250,.12)}
.dlg-k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa)}
.plan-dlg h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,44px);letter-spacing:-.03em;margin-top:8px}
.dlg-lead{color:#AEB7C6;font-size:17px;margin-top:10px;max-width:46ch}
.dlg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:28px;border:1px solid var(--linha);border-radius:14px;overflow:hidden;background:var(--linha)}
.dlg-facts div{background:#0E141C;padding:14px 16px}
.dlg-facts dt{font-size:12px;color:var(--cinza)}
.dlg-facts dd{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.plan-dlg h4{font-family:var(--display);font-weight:700;font-size:18px;margin-top:32px}
.dlg-list{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px}
.dlg-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:#C9D0DB}
.dlg-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--nevoa)}
.dlg-list.num{counter-reset:n}
.dlg-list.num li{counter-increment:n;padding-left:30px}
.dlg-list.num li::before{content:counter(n,decimal-leading-zero);border:0;width:auto;height:auto;top:.2em;font-family:var(--mono);font-size:12px;color:var(--nevoa)}
.dlg-list b{font-weight:500;color:var(--branco)}
.dlg-p{margin-top:10px;font-size:15px;line-height:1.55;color:#C9D0DB}
.dlg-cta{margin-top:32px}
.dlg-cta .btn-line,.dlg-cta .beam-btn{width:100%}
.dlg-cta .beam-btn .in{width:100%;justify-content:center}
.dlg-out{margin-top:24px;border-top:1px solid var(--linha);padding-top:18px}
.dlg-out summary{cursor:pointer;color:var(--cinza);font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}
.dlg-out summary::-webkit-details-marker{display:none}
.dlg-out summary::before{content:"+";font-family:var(--mono);color:var(--nevoa);width:12px}
.dlg-out[open] summary::before{content:"–"}
.dlg-out .dlg-list li{color:var(--cinza);font-size:14px}
@media (max-width:820px){
  .plan-dlg{width:100%;max-width:none;max-height:92svh;margin:auto 0 0;border-radius:20px 20px 0 0;border-bottom:0}
  .plan-dlg[open]{animation:dlgUp .45s var(--ease)}
  @keyframes dlgUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .dlg-in{padding:28px 20px calc(24px + env(safe-area-inset-bottom))}
  .dlg-x{margin:-8px -6px 0 0}
  .dlg-facts{grid-template-columns:repeat(2,1fr)}
  .dlg-lead{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.plan-dlg[open],.plan-dlg[open]::backdrop{animation:none}}

/* ========== DOBRA 09 · PACOTES · uma tela ==========
   Desktop/tablet: os 3 cards lado a lado, compactos, cabendo em 100svh.
   Celular: um card por vez com a borda dos vizinhos à vista + seletor com os 3 nomes. */
.plan-act{display:flex;flex-direction:column}
.plan-switch{display:none}
@media (min-width:821px){
  .plans{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--navh,72px) + clamp(16px,3svh,40px));padding-bottom:clamp(20px,3.5svh,44px)}
  .plans .sec-head{gap:24px 48px}
  .plans .h2{font-size:clamp(34px,min(4vw,6.6svh),60px)}
  .plans .sec-head .body{font-size:clamp(15px,1.9svh,17px);line-height:1.55}
  .plan-grid{margin-top:clamp(22px,4svh,52px);padding-block:clamp(10px,1.6svh,18px)}
  .plan{padding:clamp(20px,3svh,32px) clamp(20px,2vw,30px)}
  .plan h3{font-size:clamp(24px,3.4svh,30px)}
  .plan-for{font-size:clamp(13.5px,1.7svh,15px);line-height:1.45;margin-top:4px}
  .price{font-size:clamp(38px,5.6svh,54px);margin-top:clamp(12px,2.4svh,26px)}
  .price span{font-size:clamp(15px,2svh,19px);top:5px}
  .plan-plus{margin-top:clamp(10px,1.8svh,20px)}
  .plan ul{margin-top:clamp(12px,2svh,22px);padding-top:clamp(12px,2svh,22px);gap:clamp(6px,1.1svh,12px)}
  .plan-plus + ul{margin-top:10px}
  .plan li{font-size:clamp(13.5px,1.7svh,15px);line-height:1.45}
  .plan-time{margin:clamp(12px,2.2svh,24px) 0 clamp(10px,1.6svh,16px)}
  .plan .btn-line,.plan .beam-btn .in{min-height:clamp(44px,5.6svh,52px)}
  .plan-more{margin-top:clamp(4px,1svh,12px);padding-block:6px}
  .plans-note{margin-top:clamp(14px,2.4svh,30px);font-size:14px}
}
@media (min-width:1081px){
  .plan-hl{padding-block:clamp(28px,4.4svh,48px);margin-block:calc(clamp(10px,1.6svh,18px) * -1)}
}
@media (max-width:820px){
  .plans{height:100svh;min-height:560px;display:flex;flex-direction:column;
    padding-top:calc(var(--navh,64px) + clamp(8px,2svh,20px));padding-bottom:clamp(12px,2.4svh,24px)}
  .plans .sec-head{flex:none;gap:clamp(6px,1.2svh,12px)}
  .plans .h2{font-size:clamp(28px,min(8vw,4.6svh),38px)}
  .plans .sec-head .body{font-size:clamp(13.5px,min(3.75vw,2.05svh),15px);line-height:1.5}
  /* seletor com os 3 nomes */
  .plan-switch{flex:none;display:flex;gap:4px;margin-top:clamp(12px,2.2svh,22px);padding:4px;border:1px solid var(--linha);border-radius:999px;background:rgba(17,22,30,.6)}
  .plan-switch button{flex:1;min-height:36px;border:0;border-radius:999px;background:none;color:var(--cinza);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .35s var(--ease),color .35s}
  .plan-switch button[aria-pressed="true"]{background:rgba(61,107,255,.22);color:var(--branco)}
  .plan-switch button:focus-visible{outline:2px solid var(--nevoa);outline-offset:2px}
  /* fileira de cards */
  .plan-grid{flex:1;min-height:0;margin-top:clamp(10px,1.8svh,16px);padding-block:2px 4px;align-items:stretch}
  .plan{flex:0 0 84%;padding:clamp(16px,2.6svh,24px) 18px;overflow:hidden}
  .plan h3{font-size:clamp(22px,3.4svh,28px)}
  .plan-badge{top:14px;right:14px;font-size:11.5px;padding:4px 10px}
  .plan-for{font-size:clamp(13px,1.95svh,14.5px);line-height:1.42;margin-top:4px}
  .price{font-size:clamp(32px,5.4svh,46px);margin-top:clamp(8px,1.6svh,16px)}
  .price span{font-size:15px;top:4px}
  .plan-plus{margin-top:clamp(6px,1.2svh,12px);font-size:12.5px}
  .plan ul{margin-top:clamp(8px,1.6svh,16px);padding-top:clamp(8px,1.6svh,16px);gap:clamp(4px,.95svh,10px)}
  .plan-plus + ul{margin-top:8px}
  .plan li{font-size:clamp(13px,1.95svh,14.5px);line-height:1.38;gap:10px}
  .plan li .ic{width:16px;height:16px;flex:none}
  .plan-time{margin:clamp(8px,1.6svh,16px) 0 clamp(8px,1.4svh,12px);font-size:12.5px}
  .plan-act{flex-direction:row;align-items:center;gap:6px}
  .plan-act .btn-line,.plan-act .beam-btn{flex:1;width:auto;min-width:0}
  .plan .btn-line,.plan .beam-btn .in{min-height:44px;font-size:14px;padding-inline:14px;gap:8px}
  .plan-more{margin:0;flex:none;font-size:13px;padding:10px 4px}
  .plans-hint{display:none}
  .plans-note{flex:none;margin-top:clamp(8px,1.6svh,14px);font-size:12.5px;line-height:1.45;padding-right:60px;text-align:left}
}
@media (max-width:820px){ .plan-act .ic{display:none} }
/* ajustes finos para caber em uma tela (o que sai daqui continua em "Ver detalhes") */
@media (min-width:821px){
  .plans{padding-top:calc(var(--navh,72px) + clamp(12px,2svh,32px))}
  .plans .h2{font-size:clamp(32px,min(3.6vw,5.6svh),56px)}
  .price{margin-top:clamp(10px,1.6svh,22px)}
  .plan ul{gap:clamp(5px,.8svh,10px)}
  .plan-act{flex-direction:row;align-items:center;gap:10px}
  .plan-act .btn-line,.plan-act .beam-btn{flex:1;width:auto;min-width:0}
  .plan-more{margin:0;flex:none}
  .plan-time{margin-bottom:clamp(8px,1.2svh,14px)}
}
@media (min-width:821px) and (max-height:820px){
  .plan li:nth-child(n+5){display:none}
}
@media (min-width:821px) and (max-width:1080px){
  .plan li:nth-child(n+4){display:none}
  .plan-act{flex-direction:column;align-items:stretch;gap:2px}
  .plan-act .btn-line,.plan-act .beam-btn{flex:none;width:100%}
}
@media (max-width:820px){
  .plans .sec-head .body,.plans-note{display:none}
  .plan-switch{margin-top:clamp(10px,2svh,20px)}
  .plan-grid{padding-bottom:clamp(8px,2svh,20px)}
}
@media (max-width:820px) and (max-height:800px){
  .plan li:nth-child(n+4){display:none}
}
@media (max-width:820px) and (max-height:800px){
  .plan .pt-x{display:none}
  .plan{padding-top:clamp(14px,2.2svh,24px);padding-bottom:clamp(14px,2.2svh,24px)}
  .plans .h2{font-size:clamp(26px,min(8vw,4.3svh),38px)}
}
@media (min-width:821px) and (max-height:760px){
  .plans .h2{font-size:clamp(30px,min(3.6vw,5.2svh),56px)}
  .plan-grid{margin-top:clamp(16px,2.6svh,52px)}
  .plans-note{margin-top:12px}
}
@media (min-width:821px) and (max-width:1080px){
  .plan-grid{margin-top:24px}
  .plans-note{margin-top:14px}
}
@media (max-width:820px) and (max-height:660px){ .plan-time{margin:6px 0 8px} .plan ul{margin-top:6px;padding-top:8px} }
/* celular: "Ver detalhes" na linha do prazo; o botão do card usa a largura toda */
@media (max-width:820px){
  .plan-act{display:block;position:relative}
  .plan-act .btn-line,.plan-act .beam-btn{width:100%}
  .plan .btn-line,.plan .beam-btn .in{white-space:nowrap}
  .plan-time{padding-right:96px}
  .plan-more{position:absolute;right:0;bottom:calc(100% + 2px);padding:6px 0}
}
.plan .btn-line,.plan .beam-btn .in{white-space:nowrap}
@media (min-width:821px){ .plan-act .btn-line,.plan-act .beam-btn .in{padding-inline:18px;gap:10px} }
@media (max-width:820px) and (max-height:660px){ .plan{padding-block:12px} .price{margin-top:6px} .plan-switch button{min-height:34px} }

/* ========== DOBRA 10 · PERGUNTAS · título preso, perguntas sobem, barra de dúvida fixa ==========
   Sem JS (ou sem a classe .pin) vira uma lista normal com a barra no fim. */
.faq{display:block}
.faq-pin{max-width:960px;margin:0 auto}
.faq .h2{max-width:20ch;font-size:clamp(32px,min(4vw,6.4svh),60px)}
.faq-win{margin-top:clamp(20px,3.4svh,40px)}
.faq-list{border-top:1px solid var(--linha)}
.faq summary{font-size:clamp(18px,1.6vw,22px);padding:clamp(18px,2.6svh,24px) 4px}
.faq details p{font-size:16px;line-height:1.6}
/* barra para enviar a dúvida */
.faq-ask{display:block;margin-top:clamp(16px,2.6svh,28px);padding:14px 14px 14px 20px;border:1px solid rgba(191,214,255,.18);border-radius:20px;
  background:rgba(14,20,28,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .35s}
.faq-ask:focus-within{border-color:rgba(191,214,255,.45)}
.faq-ask-l{display:block;font-size:13.5px;color:var(--cinza);margin-bottom:8px}
.faq-ask-row{display:flex;align-items:center;gap:10px;width:100%}
.faq-ask input{flex:1;min-width:0;height:48px;background:none;border:0;outline:none;color:var(--branco);font:inherit;font-size:17px}
.faq-ask input::placeholder{color:#5D6778}
.faq-send{flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--azul);color:#fff;
  font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.faq-send:hover{background:#2E58E6}
.faq-send:active{transform:scale(.97)}
.faq-send:focus-visible{outline:2px solid var(--nevoa);outline-offset:3px}
.faq-send .s-s{display:none}
.faq-ask.is-empty{animation:askNudge .45s var(--ease)}
@keyframes askNudge{30%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
/* modo preso (classe .pin posta pelo JS) */
.faq.pin{padding-block:0}
.faq.pin .faq-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--navh,72px) + clamp(16px,3svh,40px));padding-bottom:clamp(16px,3svh,32px)}
.faq.pin .faq-top{flex:none}
.faq.pin .faq-win{flex:1;min-height:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 40px),transparent)}
.faq.pin .faq-list{padding-block:16px 32px;border-top:0;transform:translate3d(0,var(--fy,0px),0);will-change:transform}
.faq.pin .faq-list details:first-child{border-top:1px solid var(--linha)}
.faq.pin .faq-ask{flex:none}
@media (max-width:820px){
  .faq .h2{font-size:clamp(28px,min(8.2vw,4.8svh),40px)}
  .faq summary{font-size:clamp(16px,4.4vw,18px);gap:16px}
  .faq details p{font-size:15px}
  .faq-ask{padding:12px 10px 10px 16px;border-radius:18px}
  .faq-ask-l{font-size:12.5px;margin-bottom:4px}
  .faq-ask input{height:44px;font-size:16px}
  .faq-send{height:44px;padding:0 16px}
  .faq-send .s-l{display:none}
  .faq-send .s-s{display:inline}
}
@media (prefers-reduced-motion:reduce){.faq-ask.is-empty{animation:none}}
.faq.pin details summary{opacity:var(--fo,1);transition:opacity .25s linear,color .3s}
.faq.pin details[open] summary{opacity:1}

/* ========== DOBRA 11 · CHAMADA FINAL · uma tela ==========
   Ocupa a tela inteira, conteúdo no centro; embaixo do botão, o que acontece depois do clique. */
.final{min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--navh,72px) + clamp(16px,3svh,40px)) var(--gut) clamp(28px,5svh,64px)}
.final-in{width:100%}
.final-h{font-size:clamp(40px,min(6.4vw,10svh),6rem)}
.final .body{margin:clamp(16px,3svh,28px) auto clamp(22px,4svh,40px)}
.next{list-style:none;padding:0;margin:clamp(32px,6svh,64px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:860px;width:100%;position:relative;text-align:left}
.next::before{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:15px;height:1px;background:linear-gradient(90deg,rgba(191,214,255,.35),rgba(191,214,255,.12))}
.next li{display:grid;justify-items:center;text-align:center;gap:12px;padding:0 14px}
.next .n{position:relative;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--ink);border:1px solid rgba(191,214,255,.35);
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--nevoa)}
.next li:first-child .n{background:var(--azul);border-color:var(--azul);color:#fff}
.next p{font-size:15px;line-height:1.45;color:#AEB7C6;max-width:22ch}
.final .micro{margin-top:clamp(24px,4.4svh,48px)}
@media (max-width:820px){
  .final-h{font-size:clamp(34px,min(10vw,6svh),48px)}
  .final .body{font-size:15px}
  .next{grid-template-columns:1fr;gap:clamp(10px,2svh,16px);max-width:340px;margin-top:clamp(24px,4.4svh,40px)}
  .next::before{left:15px;right:auto;top:16px;bottom:16px;width:1px;height:auto;background:linear-gradient(rgba(191,214,255,.35),rgba(191,214,255,.12))}
  .next li{grid-template-columns:31px 1fr;justify-items:start;text-align:left;align-items:center;gap:14px;padding:0}
  .next p{font-size:14.5px;max-width:none}
  .final .micro{font-size:13px}
}

/* ========== DOBRA 08 · SOBRE · desktop em uma tela ==========
   A foto acompanha a altura disponível; o texto se ajusta à altura da tela. */
@media (min-width:821px){
  .about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,72px);align-items:center;
    height:100svh;min-height:600px;padding-top:calc(var(--navh,72px) + clamp(16px,3svh,40px));padding-bottom:clamp(24px,4svh,48px)}
  .about-photo{position:relative;top:0;width:auto;max-width:100%;height:min(100%,calc((100vw - 2 * var(--gut)) * .42 * 1.25));aspect-ratio:4/5;justify-self:start;align-self:center}
  .about-copy{align-self:center}
  .about .h2{font-size:clamp(34px,min(4.4vw,7svh),68px)}
  .about .words{font-size:clamp(20px,min(2.3vw,3.5svh),34px);margin-top:clamp(18px,3.4svh,40px)}
  .about .manifesto{margin-top:clamp(22px,4.4svh,64px);padding-top:clamp(16px,3svh,36px);gap:clamp(8px,1.4svh,16px);font-size:clamp(15px,1.95svh,17px)}
  .about .manifesto footer{font-size:clamp(18px,2.5svh,22px)}
}

/* ========== DOBRA 12 · RODAPÉ · uma tela ==========
   A palavra grande ocupa o alto e respira; logo, links e contatos ficam juntos no fim. */
.foot{min-height:100svh;display:flex;flex-direction:column;padding-top:var(--navh,72px)}
.foot-word{flex:1;display:flex;align-items:center;justify-content:center;padding-top:0}
.foot-word .fill{top:50%;transform:translateY(-50%)}
.foot-grid{margin-top:clamp(24px,4svh,64px);padding-top:clamp(24px,4svh,48px)}
.foot-bottom{margin-top:clamp(20px,3.4svh,40px)}
@media (max-width:820px){
  .foot{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .foot-word{font-size:clamp(84px,25vw,140px)}
  .foot-grid{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding-top:20px}
  .foot-logo{height:40px}
  .foot nav,.foot-contact{display:flex;flex-wrap:wrap;gap:0 18px}
  .foot a{min-height:40px;font-size:14.5px}
  .foot-contact a:first-child{color:var(--branco)}
  .foot-bottom{margin-top:14px;flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px}
}
.foot-grid,.foot-bottom{width:100%}

/* ========== DOBRA 06 · PROJETOS · desktop em uma tela ==========
   O mostruário ocupa a altura que sobra; título e texto acompanham a altura da tela. */
@media (min-width:1081px){
  .projects{height:100svh;min-height:600px;display:flex;flex-direction:column;
    padding-top:calc(var(--navh,72px) + clamp(16px,3.2svh,44px));padding-bottom:clamp(24px,4.4svh,56px)}
  .projects .sec-head{flex:none}
  .projects .h2{font-size:clamp(34px,min(4.6vw,7svh),68px)}
  .projects .proj{flex:1;min-height:0;margin-top:clamp(20px,4svh,64px);grid-template-rows:minmax(0,1fr) auto;gap:clamp(20px,3.6svh,44px) 56px}
  .projects .proj-stage{height:auto;min-height:0;align-self:stretch}
  .projects .pi h3{font-size:clamp(28px,min(3vw,5svh),44px);margin-top:clamp(10px,2svh,20px)}
  .projects .pi dl{margin-top:clamp(8px,1.6svh,20px)}
  .projects .pi dt{margin-top:clamp(6px,1.2svh,14px)}
  .projects .pi dd{font-size:clamp(15px,2svh,17px);line-height:1.5}
}

/* ========== HERO · site da Dra. Helena Costa (projeto conceito) ==========
   Um site completo dentro da janela: rola sozinho pelas seções e quem visita também pode rolar.
   Medidas em --u (1% da largura da janela), para o mesmo layout escalar do desktop ao celular.
   A dobra 05 copia este mesmo site: editar aqui muda os dois lugares. */
.hs{--u:1cqw;--linho:#F4EFE8;--areia:#EAE0D3;--argila:#924F2C;--cacau:#33261D;--terra:#6B5A4A;--fio:rgba(51,38,29,.14);background:var(--linho)}
.hs .m-bar{position:relative;z-index:2;background:#E4DBCF;color:#7A6958;box-shadow:0 1px 0 rgba(51,38,29,.08)}
.hs .m-url{position:absolute;left:50%;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:5px;padding:2px 12px;border-radius:6px;background:rgba(255,255,255,.55);font-family:var(--body);font-size:10.5px;letter-spacing:.01em;color:#6B5A4A;white-space:nowrap}
.hs .m-url svg{width:9px;height:9px;opacity:.7}
.hero-card .hs .m-scroll{padding:0;overflow-y:auto;overflow-x:hidden;container:hs/size;scrollbar-width:none;font-family:var(--body);color:var(--cacau);background:var(--linho)}
.hero-card .hs .m-scroll::-webkit-scrollbar{display:none}
.hero-card .hs .m-scroll:focus-visible{outline:2px solid var(--argila);outline-offset:-3px}
/* reset sem peso: as classes de cada componente decidem as margens */
:where(.hs) :where(p,figure,blockquote,ul,ol,dl,dd){margin:0}
:where(.hs) :where(ul,ol){list-style:none;padding:0}

/* cabeçalho do site: sobre o linho na abertura, com vidro ao rolar */
.hs-top{position:sticky;top:0;z-index:5;height:max(30px,calc(9 * var(--u)));display:flex;align-items:center;gap:calc(3 * var(--u));padding:0 calc(4.4 * var(--u));transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.hs-top.solid{background:rgba(244,239,232,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(51,38,29,.08)}
.hs-logo{font-family:"Fraunces",Georgia,serif;font-size:calc(3.1 * var(--u));line-height:1;letter-spacing:-.01em;white-space:nowrap}
.hs-logo small{display:block;margin-top:.4em;font-family:var(--body);font-size:.5em;letter-spacing:.04em;color:var(--terra)}
.hs-nav{margin-left:auto;display:flex;gap:calc(2.8 * var(--u));font-size:calc(1.9 * var(--u))}
.hs-nav i,.hs-foot-nav i{font-style:normal;cursor:pointer;transition:color .3s}
.hs-nav i:hover,.hs-foot-nav i:hover{color:var(--argila)}

.hs-btn{display:inline-flex;align-items:center;white-space:nowrap;padding:calc(1.7 * var(--u)) calc(3.1 * var(--u));border-radius:999px;background:var(--cacau);color:var(--linho);font-size:calc(2 * var(--u));font-weight:500;letter-spacing:.01em;cursor:pointer;transition:background-color .35s var(--ease),transform .35s var(--ease)}
.hs-btn:hover{background:var(--argila);transform:translateY(-1px)}
.hs-btn-s{padding:calc(1.15 * var(--u)) calc(2.3 * var(--u));font-size:calc(1.8 * var(--u))}
.hs-link{display:inline-block;font-size:calc(2 * var(--u));white-space:nowrap;cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease),color .3s}
.hs-link:hover{color:var(--argila);background-size:40% 1px}
.hs-ctas{display:flex;align-items:center;gap:calc(3.2 * var(--u));margin-top:calc(3.4 * var(--u))}

/* tipografia: serifa nos títulos, sem serifa no texto */
.hs-k{font-size:calc(1.85 * var(--u));letter-spacing:.02em;color:var(--argila);font-weight:500}
.hs-h1,.hs-h2,.hs-h3,.hs-quote{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:-.018em;font-optical-sizing:auto}
.hs-h1{font-size:calc(5.3 * var(--u));line-height:1.04;margin-top:calc(2.2 * var(--u))}
.hs-h1 span{display:block}
.hs-h2{font-size:calc(4.3 * var(--u));line-height:1.08;margin-top:calc(1.5 * var(--u));max-width:17ch}
.hs-h3{font-size:calc(3.4 * var(--u));line-height:1.1;margin-top:calc(1.2 * var(--u))}
.hs-lead,.hs-p{font-size:calc(2.1 * var(--u));line-height:1.6;color:var(--terra);margin-top:calc(2.4 * var(--u));max-width:42ch}
.hs-h1+.hs-lead{margin-top:calc(3 * var(--u))}
.hs-h2+.hs-p{margin-top:calc(2.6 * var(--u))}
.hs-fine{font-size:calc(1.55 * var(--u));color:var(--terra);margin-top:calc(3 * var(--u))}
.hs-sec{position:relative;padding:calc(9 * var(--u)) calc(4.4 * var(--u))}
.hs dt{font-size:calc(1.55 * var(--u));letter-spacing:.02em;color:var(--terra)}
.hs dd{margin-top:calc(.5 * var(--u));font-size:calc(1.9 * var(--u));line-height:1.45;color:var(--cacau)}

/* abertura: texto à esquerda, retrato à direita, abaixo do cabeçalho */
.hs-hero{height:100cqh;margin-top:calc(-1 * max(30px,calc(9 * var(--u))));padding:max(30px,calc(9 * var(--u))) 0 0 calc(4.4 * var(--u));display:flex;align-items:center}
.hs-hero-txt{width:50%;padding-bottom:calc(1 * var(--u))}
.hs-facts{display:flex;gap:calc(4.4 * var(--u));margin-top:calc(3 * var(--u));padding-top:calc(2.2 * var(--u));border-top:1px solid var(--fio)}
.hs-hero-img{position:absolute;top:max(30px,calc(9 * var(--u)));right:calc(4.4 * var(--u));bottom:calc(4.4 * var(--u));width:41%;overflow:hidden;border-radius:2px;background:var(--areia)}
.hs figure img{display:block;width:100%;height:116%;margin-top:-8%;object-fit:cover;transform:translate3d(0,var(--py,0%),0);will-change:transform}
.hs-hero-img img{object-position:50% 25%}
.hs-hero-img figcaption{position:absolute;left:calc(2.4 * var(--u));top:calc(2.4 * var(--u));padding:calc(1.4 * var(--u)) calc(2.2 * var(--u));border-radius:2px;background:rgba(244,239,232,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cacau);font-family:"Fraunces",Georgia,serif;font-size:calc(2.2 * var(--u));line-height:1.15}
.hs-hero-img figcaption small{display:block;font-family:var(--body);font-size:.7em;color:var(--terra);margin-top:.35em}

/* sobre: retrato e texto lado a lado */
.hs-about{display:grid;grid-template-columns:min(42%,62cqh) 1fr;gap:calc(6.5 * var(--u));align-items:center}
.hs-about-img{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--areia)}
.hs-about-img img{object-position:42% 30%}
.hs-ticks{margin-top:calc(3.2 * var(--u));border-top:1px solid var(--fio)}
.hs-ticks li{position:relative;padding:calc(1.4 * var(--u)) 0 calc(1.4 * var(--u)) calc(3 * var(--u));border-bottom:1px solid var(--fio);font-size:calc(1.95 * var(--u));line-height:1.4}
.hs-ticks li::before{content:"";position:absolute;left:0;top:calc(2.3 * var(--u));width:calc(1.4 * var(--u));height:1px;background:var(--argila)}

/* tratamentos: abertura em duas colunas, foto e as duas listas com uma linha de explicação */
.hs-care{background:var(--areia)}
.hs-care-head{display:grid;grid-template-columns:1fr 1fr;gap:calc(6 * var(--u));align-items:end}
.hs-care-head .hs-p{margin:0 0 calc(.6 * var(--u))}
.hs-care-body{display:grid;grid-template-columns:30% 1fr 1fr;gap:calc(4 * var(--u));margin-top:calc(5.5 * var(--u));align-items:start}
.hs-care-img{aspect-ratio:3/4;overflow:hidden;border-radius:2px}
.hs-care-img img{object-position:45% 50%}
.hs-col{font-size:calc(1.85 * var(--u));color:var(--argila);font-weight:500;padding-bottom:calc(1.5 * var(--u));border-bottom:1px solid rgba(51,38,29,.24)}
.hs-care li{padding:calc(1.7 * var(--u)) 0;border-bottom:1px solid var(--fio)}
.hs-care li b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:calc(2.45 * var(--u));line-height:1.3}
.hs-care li span{display:block;margin-top:calc(.6 * var(--u));font-size:calc(1.7 * var(--u));line-height:1.45;color:var(--terra)}

/* como é o atendimento: a sequência real da consulta ao retorno */
.hs-way{background:var(--cacau);color:var(--linho)}
.hs-way .hs-k{color:#E0A47F}
.hs-way-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3.4 * var(--u));margin-top:calc(5 * var(--u))}
.hs-way-grid li{padding-top:calc(2.4 * var(--u));border-top:1px solid rgba(244,239,232,.25)}
.hs-way-grid small{display:block;font-size:calc(1.6 * var(--u));color:#E0A47F;margin-bottom:calc(1.2 * var(--u))}
.hs-way-grid b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:calc(2.7 * var(--u));line-height:1.15}
.hs-way-grid span{display:block;margin-top:calc(1.3 * var(--u));font-size:calc(1.85 * var(--u));line-height:1.55;color:#D9CDBF}

/* depoimentos (ilustrativos): um destaque e dois menores ao lado */
.hs-voice{background:var(--linho)}
.hs-voice-head{display:flex;align-items:center;justify-content:space-between;gap:calc(3 * var(--u));flex-wrap:wrap}
.hs-note{display:inline-block;font-size:calc(1.55 * var(--u));color:var(--terra);padding:calc(.7 * var(--u)) calc(1.8 * var(--u));border:1px solid rgba(51,38,29,.2);border-radius:999px}
.hs-voice-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:calc(6 * var(--u));margin-top:calc(4.4 * var(--u));align-items:start}
.hs-quote{font-size:calc(3.6 * var(--u));line-height:1.3}
.hs-voice cite{display:block;margin-top:calc(1.8 * var(--u));font-family:var(--body);font-style:normal;font-size:calc(1.7 * var(--u));color:var(--terra)}
.hs-quotes{border-left:1px solid var(--fio);padding-left:calc(4 * var(--u))}
.hs-quotes blockquote{font-family:"Fraunces",Georgia,serif;font-size:calc(2.3 * var(--u));line-height:1.35}
.hs-quotes blockquote+blockquote{margin-top:calc(3 * var(--u));padding-top:calc(3 * var(--u));border-top:1px solid var(--fio)}

/* consultório: foto inteira com o endereço por cima */
.hs-place{padding:0;height:80cqh}
.hs-place-img{position:absolute;inset:0;overflow:hidden}
.hs-addr{position:absolute;left:calc(4.4 * var(--u));bottom:calc(4.4 * var(--u));width:40%;padding:calc(4 * var(--u)) calc(4.4 * var(--u));background:var(--linho);border-radius:2px;box-shadow:0 30px 60px -40px rgba(51,38,29,.5)}
.hs-addr .hs-link{margin-top:calc(2.6 * var(--u))}

/* contato e rodapé */
.hs-end{background:var(--areia);padding-bottom:calc(10 * var(--u))}
.hs-end-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(6 * var(--u));align-items:start}
.hs-end .hs-h2{font-size:calc(5.4 * var(--u));max-width:11ch;margin-top:0}
.hs-info{border-top:1px solid rgba(51,38,29,.2)}
.hs-info div{display:grid;grid-template-columns:32% 1fr;gap:calc(2 * var(--u));padding:calc(1.6 * var(--u)) 0;border-bottom:1px solid var(--fio)}
.hs-info dd{margin-top:0}
.hs-foot{margin-top:calc(9 * var(--u))}
.hs-foot-top{display:flex;align-items:center;justify-content:space-between;gap:calc(3 * var(--u));padding-top:calc(3 * var(--u));border-top:1px solid rgba(51,38,29,.2)}
.hs-foot-nav{display:flex;gap:calc(2.8 * var(--u));font-size:calc(1.8 * var(--u))}
.hs-foot-legal{display:flex;justify-content:space-between;gap:calc(3 * var(--u));margin-top:calc(3 * var(--u));font-size:calc(1.5 * var(--u));line-height:1.5;color:var(--terra)}
.hs-foot-legal span:last-child{white-space:nowrap}

/* movimento: abertura do retrato, linhas do título e revelação das seções */
@keyframes hsReveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hsZoom{from{scale:1.18}to{scale:1}}
@keyframes hsUp{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.hs-hero-img{animation:hsReveal 1.5s var(--ease) .7s both}
.hs-hero-img img{animation:hsZoom 2.4s var(--ease) .7s both}
.hs-hero-txt>*{animation:hsUp 1.1s var(--ease) both}
.hs-hero-txt>.hs-k{animation-delay:.9s}
.hs-h1 span{animation:hsUp 1.1s var(--ease) both}
.hs-h1 span:first-child{animation-delay:1s}
.hs-h1 span:last-child{animation-delay:1.14s}
.hs-hero-txt>.hs-h1{animation:none}
.hs-hero-txt>.hs-lead{animation-delay:1.3s}
.hs-hero-txt>.hs-ctas{animation-delay:1.42s}
.hs-hero-txt>.hs-facts{animation-delay:1.55s}
.hs-hero-img figcaption{animation:hsUp 1s var(--ease) 1.6s both}
.js .hs-rv{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hs-sec.on .hs-rv{opacity:1;transform:none}
.hs-rv+.hs-rv{transition-delay:.12s}
.hs-rv+.hs-rv+.hs-rv{transition-delay:.24s}
.shot .hs *,.shot .hs-hero-img{animation:none!important}
.shot .hs-rv{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .hs *,.hs-hero-img{animation:none!important}
  .js .hs-rv{opacity:1;transform:none;transition:none}
  .hs figure img{transform:none}
}

/* janela estreita (celular, 350px): uma coluna, menos itens no menu, textos maiores */
@container hs (max-width:420px){
  .hs-nav,.hs-facts,.hs-foot-nav{display:none}
  .hs-btn-s{margin-left:auto;font-size:calc(2.3 * var(--u))}
  .hs-logo{font-size:calc(3.8 * var(--u))}
  .hs-h1{font-size:calc(5.9 * var(--u))}
  .hs-hero-txt{width:53%}
  .hs-hero-img{width:40%;right:calc(3 * var(--u));bottom:calc(3 * var(--u))}
  .hs-hero-img figcaption{font-size:calc(2.6 * var(--u));left:calc(1.6 * var(--u));top:calc(1.6 * var(--u));padding:calc(1.2 * var(--u)) calc(1.8 * var(--u))}
  .hs-lead{font-size:calc(2.45 * var(--u));line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hs-btn,.hs-link{font-size:calc(2.45 * var(--u))}
  .hs-hero .hs-link{display:none}
  .hs-k{font-size:calc(2.3 * var(--u))}
  .hs-h2{font-size:calc(5.2 * var(--u))}
  .hs-h3{font-size:calc(4.2 * var(--u))}
  .hs-p{font-size:calc(2.5 * var(--u))}
  .hs-fine,.hs-note,.hs-foot-legal{font-size:calc(2 * var(--u))}
  .hs dt{font-size:calc(2.1 * var(--u))}
  .hs dd{font-size:calc(2.5 * var(--u))}
  .hs-sec{padding:calc(10 * var(--u)) calc(5 * var(--u))}
  .hs-hero{padding:max(30px,calc(9 * var(--u))) 0 0 calc(5 * var(--u))}
  .hs-about,.hs-care-head,.hs-care-body,.hs-voice-grid,.hs-end-grid{grid-template-columns:1fr}
  .hs-about{gap:calc(5 * var(--u))}
  .hs-about-img{aspect-ratio:16/10}
  .hs-about-img img{object-position:42% 22%}
  .hs-ticks li{font-size:calc(2.5 * var(--u));padding-left:calc(3.6 * var(--u))}
  .hs-ticks li::before{top:calc(3 * var(--u))}
  .hs-care-head{gap:0}
  .hs-care-head .hs-p{margin-top:calc(2.6 * var(--u))}
  .hs-care-body{gap:calc(5 * var(--u))}
  .hs-care-img{aspect-ratio:16/9}
  .hs-col{font-size:calc(2.3 * var(--u))}
  .hs-care li b{font-size:calc(3.1 * var(--u))}
  .hs-care li span{font-size:calc(2.3 * var(--u))}
  .hs-way-grid{grid-template-columns:1fr;gap:calc(3 * var(--u));margin-top:calc(4 * var(--u))}
  .hs-way-grid small{font-size:calc(2.1 * var(--u))}
  .hs-way-grid span{font-size:calc(2.3 * var(--u))}
  .hs-way-grid b{font-size:calc(3.3 * var(--u))}
  .hs-voice-head{justify-content:flex-start}
  .hs-voice-grid{gap:calc(5 * var(--u))}
  .hs-quote{font-size:calc(4.6 * var(--u))}
  .hs-voice cite{font-size:calc(2.2 * var(--u))}
  .hs-quotes{border-left:0;padding:calc(4 * var(--u)) 0 0;border-top:1px solid var(--fio)}
  .hs-quotes blockquote{font-size:calc(3 * var(--u))}
  .hs-addr{width:auto;right:calc(5 * var(--u));left:calc(5 * var(--u));bottom:calc(5 * var(--u))}
  .hs-end .hs-h2{font-size:calc(6.4 * var(--u))}
  .hs-end-grid{gap:calc(6 * var(--u))}
  .hs-foot-legal{flex-direction:column;gap:calc(1.4 * var(--u))}
}
@media (max-width:820px){
  .hs .m-url{font-size:9px;padding:1px 9px}
}

/* ========== DOBRA 05 · ANTES E DEPOIS · dois sites inteiros ==========
   As duas páginas ficam empilhadas na mesma rolagem (sempre alinhadas); a de cima,
   o site genérico, é recortada pela divisória. O site da Helena é o mesmo da abertura. */
.cx-glow{position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 42% at 50% 64%,rgba(61,107,255,.2),transparent 70%),
    radial-gradient(ellipse 38% 30% at 12% 92%,rgba(30,58,138,.38),transparent 72%),
    radial-gradient(ellipse 34% 28% at 88% 34%,rgba(29,78,216,.16),transparent 72%)}
.compare.cx{display:flex;flex-direction:column;cursor:auto;touch-action:auto;background:#0B0F14;
  box-shadow:0 0 0 1px rgba(191,214,255,.14),0 50px 140px -40px rgba(61,107,255,.42),0 60px 100px -40px rgba(0,0,0,.8)}
.cx-bars{position:relative;flex:none;height:34px;z-index:3}
.cx-bar{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 14px}
.cx-bar i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.4}
.cx-bar-a{background:#E4DBCF;color:#7A6958;box-shadow:0 1px 0 rgba(51,38,29,.08)}
.cx-bar-b{background:#E9E9E9;color:#6B6B6B;box-shadow:0 1px 0 #CFCFCF}
.cx-url{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:3px 14px;white-space:nowrap;font:11.5px var(--body)}
.cx-url svg{width:9px;height:9px;opacity:.7}
.cx-bar-a .cx-url{right:14px;border-radius:6px;background:rgba(255,255,255,.6)}
.cx-bar-b .cx-url{left:64px;background:#fff;border:1px solid #CFCFCF;font-family:Arial,Helvetica,sans-serif;color:#555}
.cx-bar-b .cx-url b{font-weight:400;color:#B3261E;padding-right:6px;border-right:1px solid #DDD}
.cx-clip{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cx-scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;container:hs/size;scrollbar-width:none;outline:none}
.cx-scroll::-webkit-scrollbar{display:none}
.cx-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--nevoa)}
.cx-pages{display:grid}
.cx-page{grid-area:1/1;min-width:0}
.cx .hs,.cx .gs{--u:min(1cqw,7.2px)}
.cx-after{position:relative;z-index:0;color:var(--cacau);font-family:var(--body)}
.cx .hs-sec{scroll-margin-top:0}

/* site genérico (antes): de propósito sem direção de arte, mas legível */
.gs{--u:1cqw;position:relative;z-index:1;background:#FFFFFF;color:#444;font-family:Arial,Helvetica,sans-serif}
.gs p{margin:0}
.gs-top{position:sticky;top:0;z-index:5;height:max(30px,calc(9 * var(--u)));display:flex;align-items:center;gap:calc(2.4 * var(--u));padding:0 calc(3 * var(--u));background:#1F5FA8;color:#fff;font-size:calc(1.75 * var(--u));box-shadow:0 2px 4px rgba(0,0,0,.3)}
.gs-logo{display:flex;align-items:center;gap:calc(1.2 * var(--u));font-weight:700;font-size:calc(2.5 * var(--u));line-height:1.1}
.gs-logo i{flex:none;width:calc(4.6 * var(--u));height:calc(4.6 * var(--u));display:grid;place-items:center;border-radius:50%;background:#fff;color:#1F5FA8;font-style:normal;font-size:calc(3.6 * var(--u))}
.gs-logo small{display:block;font-weight:400;font-size:calc(1.35 * var(--u));opacity:.85}
.gs-nav{margin-left:auto;white-space:nowrap}
.gs-tel{background:#FF7F27;padding:calc(.8 * var(--u)) calc(1.4 * var(--u));font-weight:700;white-space:nowrap}
.gs-sec{padding:calc(6 * var(--u)) calc(4 * var(--u));text-align:center}
.gs-hero{position:relative;height:calc(100cqh - max(30px,calc(9 * var(--u))));padding:0;display:grid;place-items:center;overflow:hidden;color:#fff}
.gs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gs-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.gs-hero-txt{position:relative;z-index:1;padding:0 calc(6 * var(--u));text-shadow:0 2px 5px rgba(0,0,0,.6)}
.gs-h1{font-size:calc(5.2 * var(--u));font-weight:700;line-height:1.15}
.gs-sub{font-size:calc(2.5 * var(--u));margin-top:calc(1.2 * var(--u))}
.gs-btn{display:inline-block;margin-top:calc(2.8 * var(--u));padding:calc(1.4 * var(--u)) calc(3.6 * var(--u));background:#FF7F27;color:#fff;font-weight:700;font-size:calc(1.9 * var(--u));border-radius:3px;box-shadow:0 3px 0 #C95A0E;text-shadow:none}
.gs-arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);font-size:calc(8 * var(--u));line-height:1;opacity:.75}
.gs-prev{left:calc(2 * var(--u))}.gs-next{right:calc(2 * var(--u))}
.gs-dots{position:absolute;z-index:1;bottom:calc(3 * var(--u));left:50%;transform:translateX(-50%);display:flex;gap:calc(1 * var(--u))}
.gs-dots i{width:calc(1.4 * var(--u));height:calc(1.4 * var(--u));border-radius:50%;background:rgba(255,255,255,.5)}
.gs-dots i.on{background:#fff}
.gs-title{font-size:calc(3.2 * var(--u));font-weight:700;color:#1F5FA8;letter-spacing:.02em}
.gs-title::after{content:"";display:block;width:calc(7 * var(--u));height:3px;margin:calc(1.2 * var(--u)) auto 0;background:#FF7F27}
.gs-row{display:grid;grid-template-columns:1fr 1.2fr;gap:calc(3.4 * var(--u));align-items:center;margin-top:calc(4 * var(--u));text-align:justify}
.gs-row img{display:block;width:100%;height:auto;border:4px solid #DDD}
.gs-p{font-size:calc(1.95 * var(--u));line-height:1.6;color:#555}
.gs-services{background:#F2F2F2}
.gs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(2 * var(--u));margin-top:calc(4 * var(--u))}
.gs-grid div{display:flex;flex-direction:column;align-items:center;gap:calc(1.2 * var(--u));padding:calc(3 * var(--u)) calc(2 * var(--u));background:#fff;border:1px solid #CCC}
.gs-grid i{width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:#17A2B8}
.gs-grid b{font-size:calc(2.1 * var(--u));color:#333}
.gs-grid span{font-size:calc(1.6 * var(--u));color:#1F5FA8;text-decoration:underline}
.gs-why{background:linear-gradient(#17A2B8,#11808F);color:#fff}
.gs-why .gs-title{color:#fff}
.gs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3 * var(--u));margin-top:calc(4 * var(--u))}
.gs-three i{display:block;font-style:normal;font-size:calc(5.4 * var(--u));line-height:1;color:#FFD700}
.gs-three b{display:block;margin-top:calc(1 * var(--u));font-size:calc(2.5 * var(--u))}
.gs-three span{display:block;margin-top:calc(1 * var(--u));font-size:calc(1.75 * var(--u));line-height:1.5}
.gs-quotes{display:grid;grid-template-columns:1fr 1fr;gap:calc(3 * var(--u));margin-top:calc(4 * var(--u))}
.gs-quotes div{padding:calc(3 * var(--u));background:#FFF8DC;border:1px dashed #CCC;font-style:italic;font-size:calc(2 * var(--u));line-height:1.45}
.gs-stars{display:block;margin-bottom:calc(1 * var(--u));color:#FFB400;font-style:normal;letter-spacing:2px}
.gs-quotes b{display:block;margin-top:calc(1.2 * var(--u));font-style:normal;font-size:calc(1.7 * var(--u));color:#777}
.gs-small{margin-top:calc(2 * var(--u));font-size:calc(1.55 * var(--u));color:#707070}
.gs-place{background:#F2F2F2}
.gs-place img{display:block;width:100%;max-width:calc(84 * var(--u));aspect-ratio:16/9;object-fit:cover;margin:calc(4 * var(--u)) auto 0;border:4px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.gs-contact{display:grid;grid-template-columns:1fr 1fr;gap:calc(4 * var(--u));margin-top:calc(4 * var(--u));text-align:left}
.gs-form{display:grid;gap:calc(1.4 * var(--u))}
.gs-form span{padding:calc(1.3 * var(--u)) calc(1.6 * var(--u));background:#FAFAFA;border:1px solid #BBB;font-size:calc(1.7 * var(--u));color:#707070}
.gs-form .gs-msg{height:calc(9 * var(--u))}
.gs-send{justify-self:start;padding:calc(1.3 * var(--u)) calc(4 * var(--u));background:#28A745;color:#fff;font-size:calc(1.8 * var(--u));border-radius:2px}
.gs-foot{margin:calc(6 * var(--u)) calc(-4 * var(--u)) calc(-6 * var(--u));padding:calc(2.4 * var(--u)) calc(4 * var(--u));background:#333;color:#BBB;font-size:calc(1.5 * var(--u))}
@container hs (max-width:420px){
  .gs-nav,.gs-tel{display:none}
  .gs-top::after{content:"\2630";margin-left:auto;font-size:calc(4.4 * var(--u))}
  .gs-logo{font-size:calc(3 * var(--u))}
  .gs-logo small{font-size:calc(1.9 * var(--u))}
  .gs-h1{font-size:calc(6.4 * var(--u))}
  .gs-sub{font-size:calc(3 * var(--u))}
  .gs-btn{font-size:calc(2.6 * var(--u))}
  .gs-title{font-size:calc(4.2 * var(--u))}
  .gs-p{font-size:calc(2.7 * var(--u))}
  .gs-grid b{font-size:calc(2.6 * var(--u))}
  .gs-grid span{font-size:calc(2.2 * var(--u))}
  .gs-three b{font-size:calc(3 * var(--u))}
  .gs-three span{font-size:calc(2.3 * var(--u))}
  .gs-quotes{grid-template-columns:1fr}
  .gs-quotes div{font-size:calc(2.8 * var(--u))}
  .gs-quotes b,.gs-small{font-size:calc(2.2 * var(--u))}
  .gs-contact{grid-template-columns:1fr}
  .gs-form span,.gs-send{font-size:calc(2.4 * var(--u))}
  .gs-foot{font-size:calc(2.1 * var(--u))}
}

/* divisória: linha de luz com um brilho que corre, alça de vidro */
.cx-split{position:absolute;top:0;bottom:0;left:var(--pos);z-index:6;width:48px;margin-left:-24px;cursor:ew-resize;touch-action:none}
.cx-split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(191,214,255,.2),#BFD6FF 28%,#3D6BFF 50%,#BFD6FF 72%,rgba(191,214,255,.2));
  box-shadow:0 0 14px rgba(61,107,255,.55);transition:box-shadow .45s var(--ease),width .3s var(--ease),margin .3s var(--ease)}
.cx-split::after{content:"";position:absolute;left:50%;top:-70px;width:4px;height:70px;margin-left:-2px;border-radius:2px;
  background:linear-gradient(transparent,#fff,transparent);opacity:.75;animation:cxRun 5s linear infinite}
@keyframes cxRun{to{top:100%}}
.cx-knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(11,15,20,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(191,214,255,.55);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 0 6px rgba(61,107,255,.16);
  transition:transform .45s var(--ease),background-color .35s var(--ease),box-shadow .45s var(--ease)}
.cx-knob .ic{width:22px;height:22px}
.cx-knob::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(191,214,255,.7);opacity:0}
.cx-split:hover .cx-knob{box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 0 9px rgba(61,107,255,.22)}
.compare.dragging .cx-knob{transform:scale(1.12);background:var(--azul);box-shadow:0 0 0 12px rgba(61,107,255,.24),0 0 44px rgba(61,107,255,.65)}
.compare.dragging .cx-split::before{width:3px;margin-left:-1.5px;box-shadow:0 0 26px rgba(61,107,255,.95)}
.compare.cx:has(.cmp-range:focus-visible) .cx-knob{outline:2px solid var(--nevoa);outline-offset:4px}
/* apresentação: a linha acende e a alça pulsa uma vez */
.compare.cx-lit .cx-split::before{animation:cxLit 1.3s var(--ease)}
.compare.cx-lit .cx-knob::after{animation:cxRing 1.3s var(--ease)}
@keyframes cxLit{40%{box-shadow:0 0 40px 4px rgba(61,107,255,.95),0 0 90px rgba(191,214,255,.5)}}
@keyframes cxRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.cx-hint{position:absolute;z-index:6;left:var(--pos);top:calc(50% + 46px);transform:translate(-50%,8px);opacity:0;pointer-events:none;
  padding:7px 14px;border-radius:999px;background:rgba(11,15,20,.8);border:1px solid rgba(191,214,255,.25);color:var(--branco);font:500 13px var(--body);white-space:nowrap;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.compare.cx-hinting .cx-hint{opacity:1;transform:translate(-50%,0)}
.cx .cmp-label{top:auto;bottom:16px;z-index:5;transition:opacity .35s var(--ease)}
.cx-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.cx-nav button{font:500 13px var(--body);color:var(--cinza);background:transparent;border:1px solid rgba(191,214,255,.14);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:color .3s,border-color .3s,background-color .3s}
.cx-nav button:hover{color:var(--branco);border-color:rgba(191,214,255,.38)}
.cx-nav button[aria-current="true"]{color:var(--branco);background:rgba(61,107,255,.18);border-color:rgba(61,107,255,.6)}
.cx-nav button:focus-visible{outline:2px solid var(--nevoa);outline-offset:2px}
.turn .cx-nav{flex:none}
@media (prefers-reduced-motion:reduce){
  .cx-split::after{display:none}
  .compare.cx-lit .cx-split::before,.compare.cx-lit .cx-knob::after{animation:none}
}
@media (max-width:820px){
  .cx-bars{height:30px}
  .cx-bar{padding:0 10px}
  .cx-bar i{width:7px;height:7px}
  .cx-url{font-size:10px;padding:2px 9px}
  .cx-bar-a .cx-url{right:10px}
  .cx-bar-b .cx-url{left:44px}
  .cx-bar-b .cx-url b{display:none}
  .cx-split{width:64px;margin-left:-32px}
  .cx-knob{width:58px;height:58px;margin:-29px 0 0 -29px}
  .cx-hint{font-size:12px;top:calc(50% + 44px)}
  .turn .cx .cmp-label{top:auto;bottom:10px;font-size:10px;padding:4px 8px}
  .turn .cx .tag-concept{bottom:44px;font-size:10px;padding:4px 9px}
  .turn .cx-nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:10px -20px 0;padding:0 20px;scrollbar-width:none}
  .turn .cx-nav::-webkit-scrollbar{display:none}
  .turn .cx-nav button{flex:none;font-size:12px;padding:6px 12px}
}

/* ========== DOBRA 06 · PROJETOS · três sites completos ==========
   Cada navegador traz um site inteiro que rola sozinho (e com a rolagem de quem visita).
   O da Dra. Helena é copiado da abertura pelo main.js; Marina e Rafael ficam aqui.
   Medidas em --u (1% da largura do navegador), como no site da Helena. */
.ps .ws{--u:min(1cqw,7.2px)}
.ws .m-bar{position:relative;z-index:2}
.ws .m-url{position:absolute;left:50%;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:5px;padding:2px 12px;border-radius:6px;font-family:var(--body);font-size:10.5px;letter-spacing:.01em;white-space:nowrap}
.ws .m-url svg{width:9px;height:9px;opacity:.7}
.ps .ws .m-scroll{padding:0;overflow-y:auto;overflow-x:hidden;container:hs/size;scrollbar-width:none;overscroll-behavior:contain}
.ps .ws .m-scroll::-webkit-scrollbar{display:none}
.ps .hs .m-scroll{font-family:var(--body);color:var(--cacau);background:var(--linho)}
:where(.ws) :where(p,figure,blockquote,ul,ol,dl,dd){margin:0}
:where(.ws) :where(ul,ol){list-style:none;padding:0}
.ws figure{overflow:hidden}
.ws figure img{display:block;width:100%;height:116%;margin-top:-8%;object-fit:cover;transform:translate3d(0,var(--py,0%),0);will-change:transform}

/* troca de projeto: o navegador que sai recua, o que entra chega e a página "carrega" de cima para baixo */
.ps{opacity:0;visibility:hidden;transform:translateX(4%) scale(.97);transition:opacity .5s var(--ease),transform .9s var(--ease),visibility 0s linear .9s}
.ps.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .22s,transform 1s var(--ease) .22s,visibility 0s}
.ps.is-out{opacity:0;visibility:visible;transform:translateX(-4%) scale(.97);transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s linear .7s}
.ps .m-scroll{clip-path:inset(0 0 100% 0);transition:clip-path .4s var(--ease)}
.ps.is-on .m-scroll{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease) .42s}
.ps .m-url{opacity:0;transition:opacity .3s}
.ps.is-on .m-url{opacity:1;transition:opacity .6s var(--ease) .5s}
.proj-stage:hover .ps.is-on .mock{transform:rotateY(-2deg) rotateX(1deg)}
.pi{opacity:1;transform:none;transition:none}
.pi>*{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pi.is-on>*{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.pi.is-on>:nth-child(1){transition-delay:.3s}
.pi.is-on>:nth-child(2){transition-delay:.38s}
.pi.is-on>:nth-child(3){transition-delay:.48s}
.shot .ps .m-scroll,.shot .ps.is-on .m-scroll{clip-path:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .ps,.ps.is-on,.ps.is-out{transform:none}
  .ps .m-scroll,.ps.is-on .m-scroll{clip-path:none;transition:none}
  .pi>*,.pi.is-on>*{transform:none}
  .ws figure img{transform:none}
}

/* ---------- Marina Alves · advocacia de família ----------
   Verde-mata e pedra, dourado só em fios e no botão; títulos em Caslon */
.ma{--mata:#16302A;--mata2:#10251F;--pedra:#EEEFEA;--pedra2:#E3E4DC;--ouro:#C2A06A;--ouro-t:#7A5C2B;--tinta:#14211C;--musgo:#4C5B53;--fio:rgba(20,33,28,.16);background:var(--mata)}
.ma .m-bar{background:#0D1F1A;color:#8FA399;box-shadow:0 1px 0 rgba(194,160,106,.18)}
.ma .m-url{background:rgba(255,255,255,.07);color:#B9C8C0}
.ma .m-scroll{background:var(--pedra);color:var(--tinta);font-family:var(--body)}
.ma-top{position:sticky;top:0;z-index:5;height:max(30px,calc(8.6 * var(--u)));display:flex;align-items:center;gap:calc(3 * var(--u));padding:0 calc(4.4 * var(--u));color:var(--pedra);background:var(--mata);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.ma-top.solid{background:rgba(22,48,42,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(194,160,106,.25)}
.ma-logo{font-family:"Libre Caslon Display",Georgia,serif;font-size:calc(3 * var(--u));line-height:1;white-space:nowrap}
.ma-logo small{display:block;margin-top:.45em;font-family:var(--body);font-size:.48em;letter-spacing:.06em;color:var(--ouro)}
.ma-nav{margin-left:auto;display:flex;gap:calc(2.6 * var(--u));font-size:calc(1.8 * var(--u));color:#C6D2CB}
.ma-nav i{font-style:normal;cursor:pointer;transition:color .3s}
.ma-nav i:hover{color:var(--ouro)}
.ma-btn{display:inline-flex;align-items:center;white-space:nowrap;padding:calc(1.6 * var(--u)) calc(3 * var(--u));border-radius:2px;background:var(--ouro);color:var(--mata2);font-size:calc(1.9 * var(--u));font-weight:500;letter-spacing:.01em;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.ma-btn:hover{background:#D3B47E;transform:translateY(-1px)}
.ma-btn-s{padding:calc(1.1 * var(--u)) calc(2.2 * var(--u));font-size:calc(1.7 * var(--u))}
.ma-link{font-size:calc(1.9 * var(--u));white-space:nowrap;cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease),color .3s}
.ma-link:hover{color:var(--ouro);background-size:40% 1px}
.ma-ctas{display:flex;align-items:center;gap:calc(3 * var(--u));margin-top:calc(3.4 * var(--u))}
.ma-k{font-size:calc(1.75 * var(--u));letter-spacing:.03em;color:var(--ouro-t);font-weight:500}
.ma-h1,.ma-h2,.ma-h3,.ma-quote{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;letter-spacing:-.01em}
.ma-h1{font-size:calc(5.6 * var(--u));line-height:1.06;margin-top:calc(2.2 * var(--u));max-width:12ch}
.ma-h2{font-size:calc(4.3 * var(--u));line-height:1.12;margin-top:calc(1.6 * var(--u));max-width:20ch}
.ma-h3{font-size:calc(3 * var(--u));line-height:1.15;margin-top:calc(1.2 * var(--u))}
.ma-lead,.ma-p{font-size:calc(2 * var(--u));line-height:1.6;color:var(--musgo);margin-top:calc(2.4 * var(--u));max-width:44ch}
.ma-fine{font-size:calc(1.5 * var(--u));color:#A9BBB1;margin-top:calc(2.6 * var(--u))}
.ma-sec{position:relative;padding:calc(8.5 * var(--u)) calc(4.4 * var(--u))}

.ma-hero{height:100cqh;margin-top:calc(-1 * max(30px,calc(8.6 * var(--u))));padding:max(30px,calc(8.6 * var(--u))) 0 0 calc(4.4 * var(--u));display:flex;align-items:center;background:var(--mata);color:var(--pedra)}
.ma-hero .ma-k{color:var(--ouro)}
.ma-hero .ma-lead{color:#C6D2CB}
.ma-hero-txt{width:53%;padding-bottom:calc(6 * var(--u))}
.ma-hero-img{position:absolute;top:max(30px,calc(8.6 * var(--u)));right:0;bottom:0;width:40%;background:var(--mata2)}
.ma-hero-img img{object-position:50% 22%}
.ma-hero-img::after{content:"";position:absolute;inset:calc(2 * var(--u));border:1px solid rgba(194,160,106,.6);pointer-events:none}
.ma-strip{position:absolute;left:0;bottom:0;width:60%;padding:calc(2 * var(--u)) calc(4.4 * var(--u));border-top:1px solid rgba(194,160,106,.28);font-size:calc(1.55 * var(--u));color:#A9BBB1}

.ma-areas{background:var(--pedra)}
.ma-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(3.4 * var(--u));margin-top:calc(4.4 * var(--u));border-top:1px solid var(--fio)}
.ma-grid li{position:relative;padding:calc(2.6 * var(--u)) 0 calc(2.8 * var(--u));border-bottom:1px solid var(--fio)}
.ma-grid li::before{content:"";display:block;width:calc(2.6 * var(--u));height:1px;margin-bottom:calc(1.6 * var(--u));background:var(--ouro)}
.ma-grid b{display:block;font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;font-size:calc(2.6 * var(--u));line-height:1.2}
.ma-grid span{display:block;margin-top:calc(.8 * var(--u));font-size:calc(1.7 * var(--u));line-height:1.5;color:var(--musgo)}

.ma-how{display:grid;grid-template-columns:44% 1fr;gap:calc(6 * var(--u));align-items:center;background:var(--pedra2)}
.ma-how-img{aspect-ratio:4/3.4;border-radius:2px}
.ma-how-img img{object-position:55% 40%}
.ma-steps{margin-top:calc(3.4 * var(--u));counter-reset:passo}
.ma-steps li{display:grid;grid-template-columns:calc(4.4 * var(--u)) 1fr;padding:calc(1.8 * var(--u)) 0;border-top:1px solid var(--fio);counter-increment:passo}
.ma-steps li::before{content:counter(passo);grid-row:span 2;font-family:"Libre Caslon Display",Georgia,serif;font-size:calc(2.8 * var(--u));line-height:1;color:var(--ouro-t)}
.ma-steps b{font-weight:500;font-size:calc(1.95 * var(--u))}
.ma-steps span{margin-top:calc(.5 * var(--u));font-size:calc(1.75 * var(--u));line-height:1.5;color:var(--musgo)}

.ma-about{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(6 * var(--u));align-items:end;background:var(--mata);color:var(--pedra)}
.ma-quote{font-size:calc(3.5 * var(--u));line-height:1.3;padding-left:calc(3 * var(--u));border-left:1px solid var(--ouro)}
.ma-about .ma-k{color:var(--ouro)}
.ma-about .ma-p{color:#C6D2CB;margin-top:calc(1.6 * var(--u))}

.ma-place{padding:0;height:76cqh;background:var(--mata2)}
.ma-place-img{position:absolute;inset:0}
.ma-card{position:absolute;right:calc(4.4 * var(--u));bottom:calc(4.4 * var(--u));width:42%;padding:calc(3.6 * var(--u)) calc(4 * var(--u));background:var(--pedra);border-top:2px solid var(--ouro);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)}

.ma-end{background:var(--pedra);padding-bottom:calc(9 * var(--u))}
.ma-end-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(6 * var(--u));align-items:start}
.ma-end .ma-h2{font-size:calc(4.6 * var(--u));margin-top:0;max-width:13ch}
.ma-end .ma-btn{background:var(--mata);color:var(--pedra);box-shadow:inset 0 -2px 0 var(--ouro)}
.ma-end .ma-btn:hover{background:#21443B}
.ma-info{border-top:1px solid var(--fio)}
.ma-info div{display:grid;grid-template-columns:30% 1fr;gap:calc(2 * var(--u));padding:calc(1.6 * var(--u)) 0;border-bottom:1px solid var(--fio)}
.ma-info dt{font-size:calc(1.55 * var(--u));color:var(--musgo)}
.ma-info dd{font-size:calc(1.85 * var(--u));line-height:1.45}
.ma-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(3 * var(--u));margin-top:calc(8 * var(--u));padding-top:calc(3 * var(--u));border-top:1px solid var(--fio);font-size:calc(1.5 * var(--u));color:var(--musgo)}
.ma-foot .ma-logo{font-size:calc(2.6 * var(--u));color:var(--tinta);margin-right:auto}
.ma-foot .ma-logo small{color:var(--ouro-t)}

/* ---------- Rafael Nunes · psicologia ----------
   Névoa lavanda e aveia, roxo-uva só para texto e botões; Albert Sans leve nos títulos */
.ra{--nevoa:#F3F1F6;--claro:#FBFAFC;--lavanda:#E9E5F2;--lilas:#C9BEEA;--uva:#2D2742;--ardosia:#5F5875;--violeta:#5E4FA2;--k:#6E5FB0;--fio:rgba(45,39,66,.14);background:var(--nevoa)}
.ra .m-bar{background:#E4E0EC;color:#6E6787;box-shadow:0 1px 0 rgba(45,39,66,.06)}
.ra .m-url{background:rgba(255,255,255,.6);color:#5F5875}
.ra .m-scroll{background:var(--nevoa);color:var(--uva);font-family:"Albert Sans",var(--body)}
.ra-top{position:sticky;top:0;z-index:5;height:max(30px,calc(8.6 * var(--u)));display:flex;align-items:center;gap:calc(3 * var(--u));padding:0 calc(4.4 * var(--u));transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.ra-top.solid{background:rgba(243,241,246,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--fio)}
.ra-logo{font-size:calc(2.6 * var(--u));font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.ra-logo small{display:block;margin-top:.4em;font-size:.6em;font-weight:400;letter-spacing:.01em;color:var(--ardosia)}
.ra-nav{margin-left:auto;display:flex;gap:calc(2.6 * var(--u));font-size:calc(1.8 * var(--u));color:var(--ardosia)}
.ra-nav i{font-style:normal;cursor:pointer;transition:color .3s}
.ra-nav i:hover{color:var(--violeta)}
.ra-btn{display:inline-flex;align-items:center;white-space:nowrap;padding:calc(1.7 * var(--u)) calc(3.2 * var(--u));border-radius:999px;background:var(--violeta);color:#fff;font-size:calc(1.9 * var(--u));font-weight:500;cursor:pointer;box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(94,79,162,.45);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.ra-btn:hover{background:#4E4190;transform:translateY(-1px)}
.ra-btn-s{padding:calc(1.1 * var(--u)) calc(2.3 * var(--u));font-size:calc(1.7 * var(--u));box-shadow:none}
.ra-link{font-size:calc(1.9 * var(--u));white-space:nowrap;cursor:pointer;color:var(--uva);background:linear-gradient(var(--lilas),var(--lilas)) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .4s var(--ease)}
.ra-link:hover{background-size:40% 2px}
.ra-ctas{display:flex;align-items:center;gap:calc(3 * var(--u));margin-top:calc(3.4 * var(--u))}
.ra-k{font-size:calc(1.75 * var(--u));color:var(--k);font-weight:500}
.ra-h1,.ra-h2,.ra-h3{font-weight:300;letter-spacing:-.035em}
.ra-h1{font-size:calc(6 * var(--u));line-height:1.02;margin-top:calc(2 * var(--u));max-width:10ch}
.ra-h2{font-size:calc(4.2 * var(--u));line-height:1.08;margin-top:calc(1.4 * var(--u));max-width:16ch}
.ra-h3{font-size:calc(3.2 * var(--u));line-height:1.12;margin-top:calc(1.2 * var(--u));max-width:20ch}
.ra-lead,.ra-p{font-size:calc(2 * var(--u));line-height:1.6;color:var(--ardosia);margin-top:calc(2.4 * var(--u));max-width:42ch}
.ra-fine{font-size:calc(1.5 * var(--u));color:var(--ardosia);margin-top:calc(2.6 * var(--u))}
.ra-sec{position:relative;padding:calc(8.5 * var(--u)) calc(4.4 * var(--u))}

.ra-hero{height:100cqh;margin-top:calc(-1 * max(30px,calc(8.6 * var(--u))));padding:max(30px,calc(8.6 * var(--u))) 0 0 calc(4.4 * var(--u));display:flex;align-items:center}
.ra-hero-txt{width:52%;padding-bottom:calc(2 * var(--u))}
.ra-hero-img{position:absolute;top:calc(max(30px,calc(8.6 * var(--u))) + 1.4 * var(--u));right:calc(4.4 * var(--u));bottom:calc(4.4 * var(--u));width:38%;border-radius:calc(3 * var(--u));background:var(--lavanda)}
.ra-hero-img img{object-position:50% 30%}
.ra-badge{position:absolute;right:calc(38% - 1.4 * var(--u));bottom:calc(9 * var(--u));padding:calc(1.6 * var(--u)) calc(2.2 * var(--u));border-radius:calc(1.6 * var(--u));background:var(--claro);box-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) calc(-2 * var(--u)) rgba(45,39,66,.3);font-size:calc(1.5 * var(--u));line-height:1.4;color:var(--ardosia);transform:translateX(50%)}
.ra-badge b{display:block;font-weight:500;font-size:calc(1.8 * var(--u));color:var(--uva)}

.ra-way{background:var(--claro)}
.ra-way-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:calc(6 * var(--u));align-items:start}
.ra-way .ra-p{margin-top:0}
.ra-col{margin-top:calc(3 * var(--u));font-size:calc(1.6 * var(--u));color:var(--ardosia)}
.ra-tags{display:flex;flex-wrap:wrap;gap:calc(1 * var(--u));margin-top:calc(1.4 * var(--u))}
.ra-tags li{padding:calc(.9 * var(--u)) calc(1.9 * var(--u));border-radius:999px;background:var(--lavanda);font-size:calc(1.7 * var(--u))}

.ra-care{background:var(--lavanda)}
.ra-cards{display:grid;grid-template-columns:1fr 1fr;gap:calc(3 * var(--u));margin-top:calc(4.4 * var(--u))}
.ra-cards article{padding:calc(1.4 * var(--u)) calc(1.4 * var(--u)) calc(3 * var(--u));border-radius:calc(2.2 * var(--u));background:var(--claro)}
.ra-cards figure{aspect-ratio:16/10;border-radius:calc(1.4 * var(--u))}
.ra-cards b{display:block;margin:calc(2.4 * var(--u)) calc(1.6 * var(--u)) 0;font-weight:400;font-size:calc(2.6 * var(--u));letter-spacing:-.02em}
.ra-cards span{display:block;margin:calc(.8 * var(--u)) calc(1.6 * var(--u)) 0;font-size:calc(1.75 * var(--u));line-height:1.5;color:var(--ardosia)}

.ra-first{background:var(--nevoa)}
.ra-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3.4 * var(--u));margin-top:calc(3 * var(--u));counter-reset:passo}
.ra-steps li{padding-top:calc(2 * var(--u));border-top:1px solid var(--lilas);counter-increment:passo}
.ra-steps li::before{content:counter(passo);display:block;font-weight:300;font-size:calc(5.4 * var(--u));line-height:1;letter-spacing:-.04em;color:var(--violeta);opacity:.55}
.ra-steps b{display:block;margin-top:calc(1.6 * var(--u));font-weight:500;font-size:calc(2.1 * var(--u))}
.ra-steps span{display:block;margin-top:calc(.8 * var(--u));font-size:calc(1.75 * var(--u));line-height:1.5;color:var(--ardosia)}

.ra-about{display:grid;grid-template-columns:min(34%,56cqh) 1fr;gap:calc(6 * var(--u));align-items:center;background:var(--claro)}
.ra-about-img{aspect-ratio:4/5;border-radius:calc(2.4 * var(--u))}
.ra-about-img img{object-position:50% 25%}

.ra-end{background:var(--uva);color:var(--nevoa);padding-bottom:calc(5 * var(--u))}
.ra-end-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:calc(6 * var(--u));align-items:start}
.ra-end .ra-h2{margin-top:0;font-size:calc(4.6 * var(--u));max-width:13ch}
.ra-end .ra-p{color:#CFC8E0}
.ra-end .ra-btn{background:var(--lilas);color:var(--uva);box-shadow:none}
.ra-end .ra-btn:hover{background:#DCD3F5}
.ra-info{border-top:1px solid rgba(243,241,246,.18)}
.ra-info div{display:grid;grid-template-columns:32% 1fr;gap:calc(2 * var(--u));padding:calc(1.6 * var(--u)) 0;border-bottom:1px solid rgba(243,241,246,.18)}
.ra-info dt{font-size:calc(1.55 * var(--u));color:#A99FC4}
.ra-info dd{font-size:calc(1.85 * var(--u))}
.ra-cvv{margin-top:calc(5 * var(--u));padding:calc(1.6 * var(--u)) calc(2.2 * var(--u));border-radius:calc(1.4 * var(--u));background:rgba(243,241,246,.08);font-size:calc(1.6 * var(--u));line-height:1.5;color:#DCD6EA}
.ra-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(3 * var(--u));margin-top:calc(5 * var(--u));padding-top:calc(3 * var(--u));border-top:1px solid rgba(243,241,246,.18);font-size:calc(1.5 * var(--u));color:#A99FC4}
.ra-foot .ra-logo{font-size:calc(2.3 * var(--u));color:var(--nevoa);margin-right:auto}
.ra-foot .ra-logo small{color:#A99FC4}

/* revelação das seções e entrada da abertura */
.js .ma-rv,.js .ra-rv{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .on .ma-rv,.js .on .ra-rv{opacity:1;transform:none}
.ma-rv+.ma-rv,.ra-rv+.ra-rv{transition-delay:.12s}
.ps.is-on .ma-hero-txt>*,.ps.is-on .ra-hero-txt>*{animation:hsUp 1s var(--ease) both}
.ps.is-on .ma-hero-txt>:nth-child(1),.ps.is-on .ra-hero-txt>:nth-child(1){animation-delay:.7s}
.ps.is-on .ma-hero-txt>:nth-child(2),.ps.is-on .ra-hero-txt>:nth-child(2){animation-delay:.8s}
.ps.is-on .ma-hero-txt>:nth-child(3),.ps.is-on .ra-hero-txt>:nth-child(3){animation-delay:.92s}
.ps.is-on .ma-hero-txt>:nth-child(4),.ps.is-on .ra-hero-txt>:nth-child(4){animation-delay:1.02s}
.ps.is-on .ra-badge{animation:hsUp 1s var(--ease) 1.25s both}
.shot .ws *{animation:none!important}
.shot .ma-rv,.shot .ra-rv{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .ws *{animation:none!important}
  .js .ma-rv,.js .ra-rv{opacity:1;transform:none;transition:none}
}

/* navegador estreito (celular): menu enxuto, uma coluna e letras maiores */
@container hs (max-width:420px){
  .ma-nav,.ra-nav,.ma-strip{display:none}
  .ma-btn-s,.ra-btn-s{margin-left:auto;font-size:calc(2.2 * var(--u))}
  .ma-logo{font-size:calc(3.6 * var(--u))}
  .ra-logo{font-size:calc(3.2 * var(--u))}
  .ma-k,.ra-k{font-size:calc(2.2 * var(--u))}
  .ma-h1{font-size:calc(6 * var(--u))}
  .ra-h1{font-size:calc(6.6 * var(--u))}
  .ma-h2,.ra-h2{font-size:calc(5 * var(--u))}
  .ma-h3,.ra-h3{font-size:calc(4 * var(--u))}
  .ma-lead,.ma-p,.ra-lead,.ra-p{font-size:calc(2.5 * var(--u));line-height:1.5}
  .ma-lead,.ra-lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ma-btn,.ma-link,.ra-btn,.ra-link{font-size:calc(2.4 * var(--u))}
  .ma-hero .ma-link,.ra-hero .ra-link,.ra-badge{display:none}
  .ma-fine,.ra-fine,.ma-foot,.ra-foot,.ra-cvv{font-size:calc(2 * var(--u))}
  .ma-sec,.ra-sec{padding:calc(9 * var(--u)) calc(5 * var(--u))}
  .ma-hero,.ra-hero{padding-left:calc(5 * var(--u))}
  .ma-hero-txt{width:56%;padding-bottom:0}
  .ma-hero-img{width:38%}
  .ra-hero-txt{width:55%}
  .ra-hero-img{width:37%;right:calc(3 * var(--u));bottom:calc(3 * var(--u))}
  .ma-grid{grid-template-columns:1fr 1fr}
  .ma-grid b{font-size:calc(3 * var(--u))}
  .ma-grid span,.ma-steps span,.ra-steps span,.ra-cards span{font-size:calc(2.2 * var(--u))}
  .ma-steps b,.ra-steps b{font-size:calc(2.5 * var(--u))}
  .ma-how,.ma-about,.ma-end-grid,.ra-way-grid,.ra-cards,.ra-steps,.ra-about,.ra-end-grid{grid-template-columns:1fr}
  .ma-how-img{aspect-ratio:16/9}
  .ma-quote{font-size:calc(4.2 * var(--u))}
  .ma-card{left:calc(5 * var(--u));right:calc(5 * var(--u));width:auto}
  .ma-info dt,.ra-info dt{font-size:calc(2 * var(--u))}
  .ma-info dd,.ra-info dd{font-size:calc(2.3 * var(--u))}
  .ma-foot,.ra-foot{flex-direction:column;align-items:flex-start;gap:calc(1 * var(--u))}
  .ra-tags li{font-size:calc(2.2 * var(--u))}
  .ra-cards b{font-size:calc(3.2 * var(--u))}
  .ra-steps li::before{font-size:calc(5 * var(--u))}
  .ra-about-img{aspect-ratio:16/10}
}
/* navegador baixo (celular, dobra de projetos): a abertura de cada site mostra só o essencial */
@container hs (max-height:250px){
  .ma-lead,.ra-lead,.ma-hero .ma-k,.ra-hero .ra-k,.hs-hero .hs-k{display:none}
  .ma-h1,.ra-h1,.hs-h1{margin-top:0}
  .hs-h1{font-size:calc(5.4 * var(--u))}
  .hs-hero .hs-lead{-webkit-line-clamp:2;margin-top:calc(2 * var(--u))}
  .hs-hero .hs-ctas{margin-top:calc(2.6 * var(--u))}
}

/* =========================================================
   LOTE ALTA · auditoria de navegação
   ========================================================= */

/* ---------- Luz que respira (todas as dobras) ----------
   Uma única luz fixa atrás do conteúdo. O JS muda posição e intensidade por dobra;
   a transição leva a luz de uma dobra à outra e o ciclo de 8 s faz ela respirar. */
@property --lx{syntax:'<percentage>';inherits:false;initial-value:70%}
@property --ly{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --la{syntax:'<number>';inherits:false;initial-value:0}
body{background:transparent}
.breath-light{position:fixed;inset:-8%;z-index:-1;pointer-events:none;
  background:radial-gradient(46vmax 38vmax at var(--lx) var(--ly),rgba(61,107,255,calc(.16 * var(--la))),rgba(10,26,51,calc(.6 * var(--la))) 48%,transparent 74%);
  transition:--lx 1.8s var(--ease),--ly 1.8s var(--ease),--la 1.6s var(--ease);
  animation:breathL 8s ease-in-out infinite}
@keyframes breathL{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.06);opacity:1}}

/* ---------- Dobra 04 · Problema: cabe em uma tela no computador ----------
   Só os espaços internos se ajustam à altura da tela; textos e elementos são os mesmos. */
@media (min-width:821px){
  .problem{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--navh,72px) + clamp(12px,2.6svh,36px));padding-bottom:clamp(20px,3.6svh,44px)}
  .problem .h2{font-size:clamp(36px,min(4.6vw,7.4svh),68px)}
  .problem .signs{margin-top:clamp(24px,4.6svh,56px)}
  .problem .signs li{padding-block:clamp(16px,3.1svh,34px)}
}
/* linhas: a explicação começa logo depois do título, sem atravessar a tela */
@media (min-width:1081px){
  .problem .signs li>div{grid-template-columns:minmax(0,400px) minmax(0,46ch);justify-content:start;gap:48px}
  .problem .signs p{font-size:17px;max-width:none}
}
/* a grade de pontos (todo mundo igual) se adensa na base, rumo à Virada */
.p4-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background-image:radial-gradient(rgba(191,214,255,.085) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}

/* ---------- Transição 04 → 05 · a grade se desfaz quando a divisória abre ---------- */
.turn .cx-glow::before{content:"";position:absolute;left:0;right:0;top:0;height:44%;
  background-image:radial-gradient(rgba(191,214,255,.085) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);
  transform-origin:50% 0;transition:opacity 1.8s var(--ease),transform 1.8s var(--ease)}
.turn.cx-open .cx-glow::before{opacity:0;transform:scaleY(.5)}

/* ---------- Dobra 09 · Pacotes no celular: a espiada dos cards vizinhos é intencional ---------- */
@media (max-width:820px){
  .plan-grid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent)}
}

@media (prefers-reduced-motion:reduce){
  .breath-light{animation:none;opacity:1}
  .turn .cx-glow::before{transition:none}
}

/* =========================================================
   LOTE MÉDIA · auditoria de navegação
   ========================================================= */

/* ---------- Topo · botão flutuante recolhe enquanto a pessoa rola para baixo (celular) ---------- */
@media (max-width:820px){
  .wa-float.show.tuck{transform:translateY(90px)}
}

/* ---------- Dobra 03 · Faixa: lente de luz no centro ----------
   Uma cópia preenchida da faixa, alinhada à original, aparece só dentro da lente. */
.mq-lens{position:absolute;inset:0;padding:inherit;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 20% 90% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 20% 90% at 50% 50%,#000 30%,transparent 100%)}
.mq-lit span{color:rgba(191,214,255,.92);-webkit-text-stroke:0}
.mq-lit svg{opacity:.7}

/* ---------- Dobra 04 · eco em "parece com todo mundo" ---------- */
.p4-title.echo .w4{overflow:visible}
.p4-title.echo .g .w4>span{animation:p4echo 1.8s var(--ease) both}
.p4-title.echo .g .w4:nth-child(n+3)>span{animation-delay:.08s}
@keyframes p4echo{
  0%{text-shadow:0 0 0 rgba(138,148,166,0),0 0 0 rgba(138,148,166,0)}
  35%{text-shadow:.16em 0 0 rgba(138,148,166,.32),.32em 0 0 rgba(138,148,166,.14)}
  100%{text-shadow:0 0 0 rgba(138,148,166,0),0 0 0 rgba(138,148,166,0)}}

/* ---------- Dobra 05 · a luz de fundo acompanha a costura ---------- */
.turn .cx-glow{background:radial-gradient(ellipse 40% 42% at var(--seam,50%) 64%,rgba(61,107,255,.22),transparent 70%),
    radial-gradient(ellipse 38% 30% at 12% 92%,rgba(30,58,138,.38),transparent 72%),
    radial-gradient(ellipse 34% 28% at 88% 34%,rgba(29,78,216,.16),transparent 72%)}

/* ---------- Dobra 08 · Sobre ----------
   Computador: a frase-assinatura ganha a voz dos títulos.
   Celular: a foto vira uma faixa larga no topo e o texto ocupa a largura toda. */
@media (min-width:821px){
  .about .manifesto footer{font-size:clamp(24px,3.4svh,32px);letter-spacing:-.03em;line-height:1.05}
}
@media (max-width:820px){
  /* a foto ocupa toda a altura que sobra da tela (maior nos celulares altos), nunca menos que 120px */
  .about{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) auto auto auto;
    grid-template-areas:"foto" "titulo" "texto" "manif";row-gap:clamp(12px,2.2svh,22px);align-content:stretch;
    padding-top:calc(var(--navh,64px) + clamp(8px,1.6svh,16px))}
  .about-photo{height:100%;min-height:0;border-radius:12px}
  .about-photo img{object-position:50% 22%}
  .about .h2{font-size:clamp(28px,min(8.2vw,4.6svh),40px)}
  .about .words{align-self:start;font-size:clamp(15px,min(4.5vw,2.45svh),20px);line-height:1.38}
  .about .manifesto{font-size:clamp(13.5px,min(3.9vw,2.1svh),16px)}
}

/* ---------- Dobra 09 · a janela de detalhes cresce a partir do botão ---------- */
.plan-dlg[open]{animation:dlgFrom .5s var(--ease)}
@keyframes dlgFrom{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

/* ---------- Dobra 10 · no celular, a pergunta se dissolve sob o título preso ---------- */
@media (max-width:820px){
  .faq.pin .faq-win{-webkit-mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 40px),transparent)}
}

/* ---------- Dobra 11 · inspirar de novo ----------
   A névoa expande do centro ao entrar, o botão respira e os três passos acendem em sequência. */
.final .fog{transform:scale(calc(.8 + .2 * var(--fogo,1)));transform-origin:50% 60%}
.final .beam-btn{animation:ctaBreath 8s ease-in-out infinite}
@keyframes ctaBreath{0%,100%{box-shadow:0 0 0 0 rgba(61,107,255,0)}50%{box-shadow:0 0 44px 4px rgba(61,107,255,.38)}}
.js .next .n{transition:box-shadow .6s var(--ease)}
.js .next.in li .n{animation:nLit 1.4s var(--ease) both}
.js .next.in li:nth-child(1) .n{animation-delay:.35s}
.js .next.in li:nth-child(2) .n{animation-delay:.8s}
.js .next.in li:nth-child(3) .n{animation-delay:1.25s}
@keyframes nLit{0%{box-shadow:0 0 0 0 rgba(61,107,255,0)}35%{box-shadow:0 0 0 6px rgba(61,107,255,.28),0 0 24px rgba(61,107,255,.6)}100%{box-shadow:0 0 0 0 rgba(61,107,255,0)}}

/* ---------- Dobra 12 · Rodapé: a névoa da chamada final desce e assenta ---------- */
.foot::before{content:"";position:absolute;inset:0 0 auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0,rgba(61,107,255,.14),rgba(10,26,51,.5) 45%,transparent 80%)}
.foot{isolation:isolate}
@media (max-width:820px){
  /* a palavra se apoia no bloco de informações; o espaço de cima fica com a névoa */
  .foot-word{align-items:flex-end;padding-bottom:clamp(8px,2svh,20px)}
  .foot-word .fill{top:auto;bottom:clamp(8px,2svh,20px);transform:none}
}

@media (prefers-reduced-motion:reduce){
  .final .fog{transform:none}
  .final .beam-btn,.js .next.in li .n,.p4-title.echo .g .w4>span{animation:none}
}

/* =========================================================
   LOTE BAIXA · acabamentos
   ========================================================= */

/* ---------- Topo · um traço desliza até o item ativo (computador) ----------
   O sublinhado de passar o mouse continua em cada link; o do item ativo vira este traço único. */
@media (min-width:821px){.nav-links{position:relative}}
.nav-ind{position:absolute;left:0;bottom:8px;height:1px;width:0;background:var(--nevoa);opacity:0;pointer-events:none;
  transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s}
.nav-links a.is-active:not(:hover)::after{transform:scaleX(0)}
@media (max-width:820px){.nav-ind{display:none}}

/* ---------- Dobra 08 · Sobre: a foto se abre do centro, assenta no fundo e flutua de leve ---------- */
.js .about-photo[data-rv="m"]{opacity:1;transform:none;clip-path:inset(0 50% 0 50% round 18px);transition:clip-path 1.3s var(--ease)}
.js .about-photo[data-rv="m"].in{clip-path:inset(0 0 0 0 round 18px)}
.about-photo img{scale:1.08;translate:0 var(--ay,0px)}
.about-photo:has(img)::after{display:block;background:linear-gradient(transparent 60%,rgba(11,15,20,.5));background-size:auto;mix-blend-mode:normal;pointer-events:none}

/* ---------- Dobra 09 · o pacote recomendado respira devagar ---------- */
.plan-hl{animation:hlBreath 6s ease-in-out infinite}
@keyframes hlBreath{0%,100%{box-shadow:0 0 0 0 rgba(61,107,255,0)}50%{box-shadow:0 0 0 1px rgba(191,214,255,.18),0 24px 70px -20px rgba(61,107,255,.45)}}

@media (prefers-reduced-motion:reduce){
  .nav-ind{transition:none}
  .js .about-photo[data-rv="m"]{clip-path:none}
  .about-photo img{scale:1;translate:none}
  .plan-hl{animation:none}
}
.shot .about-photo[data-rv="m"]{clip-path:none!important}

/* =========================================================
   DOBRA 07 · PROCESSO · demonstração do método
   Um painel ao lado dos passos (no celular, embaixo deles) que conta a mesma história:
   0 Conversa (interface escura da Breathe) → 1 Direção de arte (o mundo da cliente)
   → 2 Construção do site → 3 No ar. Só existe na rolagem guiada (.process.pin);
   sem JS ou com movimento reduzido a dobra continua sendo a lista de passos.
   ========================================================= */
.proc-build{display:none}
.process.pin .proc-build{display:block;position:absolute;z-index:1;pointer-events:none;opacity:0;translate:0 14px;transition:opacity .6s var(--ease),translate .8s var(--ease)}
/* o quadro só aparece quando o passo 1 (Conversa) está em destaque */
.process.pin .proc-build.is-on{opacity:1;translate:none}
@media (min-width:1081px){
  .process.pin .steps li{--h3:clamp(40px,min(4.2vw,7.6svh),66px);max-width:54%}
  .process.pin .steps p{max-width:34ch}
  .process.pin .proc-build{right:0;top:50%;width:min(44%,600px);height:min(68svh,600px);
    transform:translate3d(calc((1 - var(--t,0)) * 48px),-50%,0)}
}
@media (max-width:1080px){
  .process.pin .proc-build{left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));height:var(--pvh,300px);
    transform:translate3d(0,calc((1 - var(--t,0)) * 24px),0)}
}
@media (max-width:820px){
  .process.pin .proc-win{-webkit-mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .process.pin .steps p{font-size:15px;line-height:1.5;margin-top:10px}
  .process.pin .total b{font-size:26px}
}

.pv{position:absolute;inset:0;--ease2:cubic-bezier(.65,0,.35,1)}
.pv-chat,.pv-board,.pv-site,.pv-kit,.pv-sum{position:absolute;transition:opacity .7s var(--ease),transform .9s var(--ease)}

/* ---------- 0 · conversa ---------- */
.pv-chat{inset:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#0F151E;
  box-shadow:0 0 0 1px rgba(191,214,255,.14),0 40px 90px -40px rgba(0,0,0,.9),0 0 90px -30px rgba(61,107,255,.35)}
.pv-chat-top{flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(191,214,255,.1);background:rgba(20,28,40,.9)}
.pv-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--azul)}
.pv-av svg{width:22px;height:auto;color:#fff;fill:none;stroke:currentColor}
.pv-who b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--branco)}
.pv-who small{display:block;font-size:12px;color:var(--cinza);margin-top:1px}
.pv-msgs{position:relative;flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
.pv-feed{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;transition:bottom .8s var(--ease)}
.pv.sum-on .pv-feed{bottom:calc(var(--sh0) + 26px)}
.msg{display:flex;max-height:0;margin-top:0;opacity:0;transform:translateY(10px);overflow:hidden;
  transition:max-height .5s var(--ease),margin-top .5s var(--ease),opacity .4s var(--ease),transform .5s var(--ease)}
.msg.on{max-height:140px;margin-top:8px;opacity:1;transform:none}
.msg p{max-width:84%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.45}
.msg.b p{background:#1B2432;color:#DCE3EE;border-bottom-left-radius:5px}
.msg.c{justify-content:flex-end}
.msg.c p{background:var(--azul);color:#fff;border-bottom-right-radius:5px}
.msg mark{color:inherit;font-weight:500;border-radius:3px;background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.26)) 0 100%/0% 100% no-repeat;
  transition:background-size .8s var(--ease) .35s}
.msg.on mark{background-size:100% 100%}
.msg.typing p{display:flex;gap:4px;padding:12px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);animation:pvType 1.1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes pvType{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* ---------- síntese: viaja da conversa para o painel ---------- */
.pv{--sh0:172px}
.pv-sum{left:12px;top:calc(100% - var(--sh0) - 12px);width:calc(100% - 24px);height:var(--sh0);z-index:3;overflow:hidden;
  padding:14px 16px;border-radius:14px;background:#141C28;border:1px solid rgba(191,214,255,.26);color:var(--branco);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .8s var(--ease),left .9s var(--ease2),top .9s var(--ease2),width .9s var(--ease2),height .9s var(--ease2),background-color .9s,border-color .9s,color .9s,padding .9s var(--ease2)}
.pv-sum.on{opacity:1;transform:none}
.pv-sum-t{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.pv-sum-t .ic{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--azul);color:#fff}
.pv-sum dl{margin-top:10px;display:grid;gap:5px}
.pv-sum dl div{display:grid;grid-template-columns:84px 1fr;gap:8px;font-size:12.5px;line-height:1.35}
.pv-sum dt{color:var(--cinza)}
.pv-sum dd{margin:0;color:inherit}

/* ---------- 1 · direção de arte ---------- */
.pv-board{inset:0;padding:14px;border-radius:16px;background:#EDE5DA;color:#33261D;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:172px auto 1fr auto;gap:10px;
  grid-template-areas:"sum pal" "type type" "photo ui" "dir dir";
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);opacity:0;transform:translateY(18px);transform-origin:50% 100%}
.bd-slot{grid-area:sum}
.bd-cell{position:relative;min-height:0;overflow:hidden;padding:12px 14px;border-radius:10px;background:#F7F2EB;
  box-shadow:0 1px 0 rgba(51,38,29,.06);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.bd-cell.on{opacity:1;transform:none}
.bd-l{font-size:11px;font-weight:500;color:#8A7562;letter-spacing:.01em}
.bd-pal{grid-area:pal}
.sw-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.sw{display:grid;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sw.on{opacity:1;transform:none}
.sw i{display:block;height:44px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(51,38,29,.12);transform-origin:50% 100%;transform:scaleY(.2);transition:transform .7s var(--ease) .05s}
.sw.on i{transform:none}
.sw b{font-size:11px;font-weight:500;margin-top:4px}
.sw small{font-size:9.5px;color:#8A7562;line-height:1.2}
.sw-demo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;opacity:0;transition:opacity .6s var(--ease)}
.sw-demo.on{opacity:1}
.d-btn{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#33261D;color:#F4EFE8;font-size:10.5px;font-weight:500;white-space:nowrap}
.d-chip{padding:3px 8px;border-radius:999px;background:#EAE0D3;color:#6B5A4A;font-size:10px}
.d-k{font-size:10px;font-weight:500;color:#924F2C}
.bd-type{grid-area:type;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start}
.ty-pair{display:grid;gap:8px}
.ty{display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.ty.on{opacity:1;transform:none}
.aa{font-size:34px;line-height:1;width:52px;color:#33261D}
.aa-s{font-family:"Fraunces",Georgia,serif;font-weight:400}
.aa-b{font-family:var(--body);font-weight:400}
.ty p{display:grid;line-height:1.2}
.ty b{font-size:12px;font-weight:500}
.ty small{font-size:10.5px;color:#8A7562}
.ty-scale{display:grid;gap:4px;padding-left:18px;border-left:1px solid rgba(51,38,29,.12);opacity:0;transition:opacity .6s var(--ease)}
.ty-scale.on{opacity:1}
.ty-scale .s1{font-family:"Fraunces",Georgia,serif;font-size:22px;line-height:1.1;letter-spacing:-.015em}
.ty-scale .s2{font-family:"Fraunces",Georgia,serif;font-size:15px;line-height:1.2;color:#33261D}
.ty-scale .s3{font-size:11.5px;line-height:1.45;color:#6B5A4A;font-weight:300;max-width:42ch}
.ty-scale p{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.ty-scale.on p{clip-path:inset(0 -2px 0 0)}
.ty-scale.on .s2{transition-delay:.12s}.ty-scale.on .s3{transition-delay:.24s}
.ty-w{grid-column:2;display:flex;gap:14px;font-size:11.5px;color:#33261D;padding-left:18px;opacity:0;transition:opacity .6s var(--ease)}
.ty-w.on{opacity:1}
.bd-photo{grid-area:photo;display:flex;flex-direction:column}
.ph-row{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.25fr;gap:6px;margin-top:8px;grid-template-rows:minmax(0,1fr)}
.ph-row img{width:100%;height:100%;object-fit:cover;border-radius:6px;clip-path:inset(100% 0 0 0 round 6px);transition:clip-path 1s var(--ease)}
.bd-photo.on .ph-row img{clip-path:inset(0 0 0 0 round 6px)}
.bd-photo.on .ph-row img+img{transition-delay:.15s}
.ph-row img:first-child{object-position:50% 25%}
.bd-note{font-size:10.5px;color:#6B5A4A;margin-top:6px}
.bd-ui{grid-area:ui;display:flex;flex-direction:column;gap:8px}
.ui-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.d-link{font-size:10.5px;border-bottom:1px solid currentColor;padding-bottom:1px}
.d-card{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:3px;background:#EAE0D3}
.d-card svg,.d-icons svg{width:20px;height:20px;flex:none;fill:none;stroke:#924F2C;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.d-card span{display:grid;line-height:1.25}
.d-card b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:13px}
.d-card small{font-size:10px;color:#6B5A4A}
.d-icons{display:flex;gap:12px;margin-top:auto}
.bd-ui .d-icons svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .3s}
.bd-ui.on .d-icons svg *{stroke-dashoffset:0}
.bd-dir{grid-area:dir;display:flex;align-items:baseline;gap:10px;padding:8px 4px 0;font-family:"Fraunces",Georgia,serif;font-size:14px;line-height:1.3;color:#33261D;
  opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.bd-dir.on{opacity:1;transform:none}
.bd-dir b{font-family:var(--body);font-weight:500;font-size:11px;color:#924F2C}

/* ---------- 2 · construção do site ---------- */
.pv-site{left:0;right:0;top:0;bottom:58px;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#E4DBCF;
  box-shadow:0 0 0 1px rgba(191,214,255,.14),0 50px 90px -30px rgba(0,0,0,.8);opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .7s var(--ease),transform .9s var(--ease),bottom .9s var(--ease2),box-shadow 1s var(--ease)}
.pv-site .m-bar{flex:none}
.pv-site .pb-url{min-width:46%;justify-content:center;min-height:15px}
.pv-site .pb-url svg{opacity:0;transition:opacity .6s var(--ease)}
.pb-dom{display:inline-block;opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s steps(21,end),opacity .2s}
.pv-site .m-bar .pb-live{position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#B9AC9C;opacity:.6;transition:background .6s,box-shadow .6s}
.pv-view{position:relative;flex:1;min-height:0;overflow:hidden;container:pvv/size;background:#fff;transition:background-color .9s var(--ease)}
.pv-guides{position:absolute;inset:0 4.4cqw;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:2cqw;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.pv-guides i{background:rgba(61,107,255,.07);border-inline:1px dashed rgba(61,107,255,.28)}
.pv-page{--u:min(1cqw,1.3cqh);position:relative;background:#fff;color:#33261D;font-family:var(--body);opacity:0;transition:background-color .9s var(--ease),opacity .6s var(--ease),transform 1.2s var(--ease2)}
/* esqueleto: cada linha de texto é uma barra no lugar exato onde o texto vai ficar */
.pv-page .t{color:transparent;background-color:rgba(51,38,29,.1);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:color .7s var(--ease),background-color .7s var(--ease)}
.w-top{height:calc(9 * var(--u));display:flex;align-items:center;gap:calc(3 * var(--u));padding:0 calc(4.4 * var(--u));border-bottom:1px solid transparent;transition:border-color .8s}
.w-logo{font-family:"Fraunces",Georgia,serif;font-size:max(11px,calc(3.1 * var(--u)));line-height:1.05;white-space:nowrap}
.w-logo small{display:block;font-family:var(--body);font-size:.5em;letter-spacing:.04em;margin-top:.25em}
.w-nav{margin-left:auto;display:flex;gap:calc(2.6 * var(--u));font-size:max(7px,calc(1.8 * var(--u)))}
.w-nav i{font-style:normal}
.w-btn{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:calc(1.5 * var(--u)) calc(3 * var(--u));font-size:max(8px,calc(1.9 * var(--u)));font-weight:500;
  background:rgba(51,38,29,.13);color:transparent;transition:background-color .7s var(--ease),color .7s var(--ease)}
.w-btn-s{padding:calc(1.1 * var(--u)) calc(2.2 * var(--u));font-size:max(7px,calc(1.7 * var(--u)))}
.w-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:calc(4 * var(--u));align-items:center;
  height:calc(100cqh - 9 * var(--u) - 13 * var(--u));padding:0 calc(4.4 * var(--u))}
.w-txt{display:grid;align-content:center}
.w-k{font-size:max(8px,calc(1.85 * var(--u)));font-weight:500;letter-spacing:.01em;color:#924F2C;line-height:1.5}
.w-k span{white-space:nowrap}
.w-h1{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:calc(5 * var(--u));line-height:1.08;letter-spacing:-.018em;margin-top:calc(1.8 * var(--u))}
.w-h1>span{display:block}
.w-h1>span+span{margin-top:.1em}
.w-lead{font-size:max(8px,calc(1.95 * var(--u)));line-height:1.55;color:#6B5A4A;max-width:40ch;margin-top:calc(2.4 * var(--u))}
.w-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:calc(1.6 * var(--u)) calc(3 * var(--u));margin-top:calc(3 * var(--u))}
.w-link{font-size:max(8px,calc(1.9 * var(--u)));white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .7s}
.w-img{position:relative;height:calc(100% - 4 * var(--u));min-height:0;border-radius:2px;overflow:hidden;
  border:1.5px dashed rgba(51,38,29,.28);background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(51,38,29,.14) 50%,transparent calc(50% + .6px)),linear-gradient(to top left,transparent calc(50% - .6px),rgba(51,38,29,.14) 50%,transparent calc(50% + .6px));
  transition:background-color .8s var(--ease),border-color .8s}
.w-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;clip-path:inset(0 0 100% 0);scale:1.08;transition:clip-path 1.2s var(--ease),scale 1.6s var(--ease)}
.w-img figcaption{position:absolute;left:calc(2 * var(--u));top:calc(2 * var(--u));padding:calc(1.2 * var(--u)) calc(1.8 * var(--u));border-radius:2px;background:rgba(244,239,232,.9);
  font-family:"Fraunces",Georgia,serif;font-size:max(8px,calc(1.9 * var(--u)));line-height:1.15;opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease) .5s,transform .7s var(--ease) .5s}
.w-img figcaption small{display:block;font-family:var(--body);font-size:.72em;color:#6B5A4A;margin-top:.3em}
.w-facts{display:grid;grid-template-columns:1fr 1fr;gap:calc(4 * var(--u));height:calc(13 * var(--u));align-items:center;margin:0 calc(4.4 * var(--u));border-top:1px solid rgba(51,38,29,.14)}
.w-facts p{display:grid;gap:calc(.5 * var(--u));line-height:1.3}
.w-facts span{font-size:max(7px,calc(1.55 * var(--u)));color:#6B5A4A}
.w-facts b{font-size:max(8px,calc(1.95 * var(--u)));font-weight:500}
.w-care{padding:calc(6 * var(--u)) calc(4.4 * var(--u)) calc(7 * var(--u));background:transparent;transition:background-color .9s}
.w-h2{font-family:"Fraunces",Georgia,serif;font-size:calc(3.8 * var(--u));line-height:1.1;letter-spacing:-.015em;margin-top:calc(1.2 * var(--u));max-width:22ch}
.w-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(2 * var(--u));margin-top:calc(3.4 * var(--u))}
.w-cards p{display:grid;align-content:start;gap:calc(1 * var(--u));padding:calc(2.4 * var(--u));border-radius:2px;border:1px solid rgba(51,38,29,.12);background:transparent;transition:background-color .8s}
.w-cards b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:max(9px,calc(2.3 * var(--u)));line-height:1.15}
.w-cards span{font-size:max(7.5px,calc(1.65 * var(--u)));line-height:1.45;color:#6B5A4A}
/* entradas de posição (antes de cada nível, os blocos esperam fora do lugar) */
.w-top>*,.w-txt>*,.w-img,.w-facts p,.w-care>*{transition:opacity .6s var(--ease),transform .8s var(--ease),color .7s var(--ease),background-color .7s var(--ease),border-color .8s}
.w-top>*{opacity:0;transform:translateY(-8px)}
.w-txt>*{opacity:0;transform:translateX(-16px)}
.w-img{opacity:0;transform:translateX(16px) scale(.96)}
.w-ctas,.w-facts p,.w-care>*{opacity:0;transform:translateY(10px)}
.w-txt>:nth-child(2){transition-delay:.06s}.w-txt>:nth-child(3){transition-delay:.12s}
.w-top>:nth-child(2){transition-delay:.08s}.w-top>:nth-child(3){transition-delay:.16s}
.w-facts p+p,.w-care>:nth-child(2){transition-delay:.1s}.w-care>:nth-child(3){transition-delay:.2s}

/* níveis da construção (classes b1…b8 postas pela rolagem) */
.pv.b1 .pv-page{opacity:1}
.pv.b1 .pv-guides{opacity:1}
.pv.b2 .w-top>*{opacity:1;transform:none}
.pv.b3 .w-txt>*:not(.w-ctas),.pv.b3 .w-img{opacity:1;transform:none}
.pv.b4 .pv-page,.pv.b4 .pv-view{background-color:#F4EFE8}
.pv.b4 .pv-page .t{background-color:rgba(146,79,44,.13)}
.pv.b4 .w-btn{background-color:#33261D}
.pv.b4 .w-img{background-color:#EAE0D3;border-color:transparent}
.pv.b4 .w-top{border-bottom-color:rgba(51,38,29,.08)}
.pv.b4 .w-cards p{background-color:#EAE0D3;border-color:transparent}
.pv.b5 .pv-page .t{color:inherit;background-color:transparent}
.pv.b5 .w-btn{color:#F4EFE8}
.pv.b5 .w-link{border-bottom-color:currentColor}
.pv.b5 .pv-guides{opacity:0}
.pv.b6 .w-img img{clip-path:inset(0 0 0 0);scale:1}
.pv.b6 .w-img figcaption{opacity:1;transform:none}
.pv.b7 .w-ctas,.pv.b7 .w-facts p,.pv.b7 .w-care>*{opacity:1;transform:none}
.pv.b8 .pv-page{transform:translateY(-52cqh)}
.proc-build[data-stage="3"] .pv-page{transform:none}

/* ---------- kit da identidade (acompanha a construção) ---------- */
.pv-kit{left:50%;bottom:0;height:46px;display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:999px;white-space:nowrap;
  background:rgba(14,20,28,.86);border:1px solid rgba(191,214,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translate(-50%,14px)}
.pv-kit>span{display:flex;align-items:center;gap:4px;opacity:.4;transition:opacity .5s var(--ease),filter .5s}
.pv-kit>span.used{opacity:1;filter:drop-shadow(0 0 8px rgba(191,214,255,.45))}
.k-sw i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.k-ty b{font-size:16px;font-weight:400;color:var(--nevoa);line-height:1}
.k-ty .aa-s{font-family:"Fraunces",Georgia,serif}
.k-ph img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.k-ui i{width:34px;height:14px;border-radius:999px;background:#33261D;box-shadow:0 0 0 1px rgba(255,255,255,.2)}

/* ---------- etapas: qual tela está à frente ---------- */
.proc-build:not([data-stage="0"]) .pv-chat{opacity:0;transform:translateX(-24px) scale(.97)}
.proc-build[data-stage="1"] .pv-board{opacity:1;transform:none}
.proc-build:is([data-stage="2"],[data-stage="3"]) .pv-board{opacity:0;transform:translateY(30px) scale(.86)}
.proc-build:is([data-stage="2"],[data-stage="3"]) .pv-site{opacity:1;transform:none}
.proc-build[data-stage="2"] .pv-kit{opacity:1;transform:translate(-50%,0)}
/* a síntese vira o briefing do painel e some quando o painel se recolhe no kit */
.proc-build[data-stage="1"] .pv-sum{left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);padding:12px 14px;
  background:#F7F2EB;border-color:rgba(51,38,29,.1);color:#33261D}
.proc-build[data-stage="1"] .pv-sum dt{color:#8A7562}
.proc-build[data-stage="1"] .pv-sum dl div{grid-template-columns:70px 1fr;font-size:11.5px}
.proc-build:is([data-stage="2"],[data-stage="3"]) .pv-sum{opacity:0;transform:translateY(40px) scale(.8)}
/* 3 · no ar */
.proc-build[data-stage="3"] .pv-site{bottom:0;box-shadow:0 0 0 1px rgba(191,214,255,.28),0 50px 90px -30px rgba(0,0,0,.8),0 0 80px -10px rgba(61,107,255,.45)}
.proc-build[data-stage="3"] .pb-url svg{opacity:1}
.proc-build[data-stage="3"] .pb-dom{opacity:1;clip-path:inset(0)}
.proc-build[data-stage="3"] .pv-site .m-bar .pb-live{background:var(--azul);opacity:1;box-shadow:0 0 0 3px rgba(61,107,255,.22),0 0 10px rgba(61,107,255,.8)}

/* ---------- site estreito (celular): sem o texto de apoio, para nada ficar espremido ---------- */
@container pvv (max-width:420px){
  .w-nav,.w-lead{display:none}
  .w-h1{font-size:calc(4.8 * var(--u))}
  .w-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:calc(3.4 * var(--u))}
  .w-cards span{display:none}
}

/* ---------- celular: o mesmo painel, mais compacto ---------- */
@media (max-width:820px){
  .pv{--sh0:132px}
  .pv-chat-top{padding:10px 12px;gap:10px}
  .pv-av{width:30px;height:30px}.pv-av svg{width:18px}
  .pv-who b{font-size:13.5px}.pv-who small{font-size:11px}
  .pv-feed{left:10px;right:10px;bottom:10px}
  .pv.sum-on .pv-feed{bottom:calc(var(--sh0) + 20px)}
  .msg p{font-size:12.5px;padding:8px 11px;max-width:86%}
  .msg.on{margin-top:6px}
  .pv-sum{left:8px;width:calc(100% - 16px);top:calc(100% - var(--sh0) - 8px);padding:11px 13px}
  .pv-sum-t{font-size:13px}
  .pv-sum dl{margin-top:7px;gap:3px}
  .pv-sum dl div{grid-template-columns:72px 1fr;font-size:11.5px}
  .pv-board{padding:10px;gap:8px;grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"sum pal" "type type" "photo ui" "dir dir"}
  .bd-cell{padding:8px 10px;border-radius:8px}
  .bd-l{font-size:10px}
  .sw-row{gap:4px;margin-top:5px}
  .sw i{height:24px;border-radius:4px}
  .sw b{font-size:9px}
  .sw small,.sw-demo,.ty-w,.ty-scale .s2,.ty-scale .s3,.bd-note,.d-link,.d-card{display:none}
  .bd-dir{padding:0 4px 2px;gap:8px;font-size:12px;line-height:1.25}
  .bd-dir b{font-size:9.5px}
  .bd-type{grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
  .ty-pair{gap:4px}
  .aa{font-size:22px;width:32px}
  .ty b{font-size:10.5px}.ty small{font-size:9.5px}
  .ty-scale{padding-left:12px}
  .ty-scale .s1{font-size:17px}
  .ph-row{margin-top:5px}
  .bd-ui{gap:6px}
  .d-btn{font-size:9.5px;padding:4px 9px}
  .d-icons{gap:10px}
  .d-icons svg{width:16px;height:16px}
  .bd-ui .d-btn{margin-bottom:-2px}
  .proc-build[data-stage="1"] .pv-sum{padding:8px 10px}
  .proc-build[data-stage="1"] .pv-sum-t{font-size:11.5px}
  .proc-build[data-stage="1"] .pv-sum-t .ic{width:13px;height:13px}
  .proc-build[data-stage="1"] .pv-sum dl{margin-top:5px;gap:2px}
  .proc-build[data-stage="1"] .pv-sum dl div{grid-template-columns:1fr;font-size:10.5px}
  .proc-build[data-stage="1"] .pv-sum dt,.proc-build[data-stage="1"] .pv-sum dl div:is(:first-child,:nth-child(4),:nth-child(5)){display:none}
  .pv-site{bottom:50px}
  .pv-kit{height:40px;gap:12px;padding:0 14px}
  .k-sw i{width:12px;height:12px}
  .k-ph img{width:20px;height:20px}
}

/* =========================================================
   PACOTES · o destaque acompanha a escolha
   O Profissional começa destacado; ao escolher outro pacote, ele recebe
   o mesmo tratamento (fundo azul, borda, tamanho, halo e botão cheio).
   ========================================================= */
.plan{isolation:isolate}
.plan-hl{background:rgba(17,22,30,.85)}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(61,107,255,.14),transparent 55%);opacity:0;transition:opacity .6s var(--ease)}
.plan-hl::before{opacity:1}
.js .plan[data-rv="m"]{transition:opacity .9s var(--ease),transform 1.1s var(--ease),clip-path 1.1s var(--ease),
  padding .6s var(--ease),margin .6s var(--ease),min-height .6s var(--ease),border-color .6s var(--ease),background-color .6s var(--ease)}
/* computador: o destacado cresce o mesmo tanto, mesmo com menos conteúdo (Essencial) */
@media (min-width:1081px){.plan-hl{min-height:calc(100% + 2 * clamp(10px,1.6svh,18px))}}
.plan h3{transition:font-size .6s var(--ease)}
.plan .plan-more{transition:color .4s}
/* botão cheio no pacote destacado, contornado nos demais */
.plan-hl .btn-line{background:var(--azul);border-color:transparent;color:#fff}
.plan-hl .btn-line:hover{background:#2E58E6;border-color:transparent}
.plan:not(.plan-hl) .beam-btn{padding:1px;background:rgba(244,247,250,.25);transition:background-color .3s}
.plan:not(.plan-hl) .beam-btn .ray,.plan:not(.plan-hl) .beam-btn .in::after{opacity:0;animation:none}
.plan:not(.plan-hl) .beam-btn .in{background:#121821;color:var(--branco)}
.plan:not(.plan-hl) .beam-btn:hover{background:rgba(244,247,250,.5)}
.plan:not(.plan-hl) .beam-btn:hover .in{background:#182030}
/* um brilho rápido confirma a escolha */
.plan.is-pick::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(191,214,255,.6),inset 0 0 30px rgba(61,107,255,.18);animation:planPick 1.1s var(--ease) both}
@keyframes planPick{from{opacity:1}to{opacity:0}}
.plan:not(.plan-hl){cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .js .plan[data-rv="m"]{transition:none}
  .plan::before,.plan h3{transition:none}
  .plan.is-pick::after{animation:none;opacity:0}
}

/* =========================================================
   DOBRA 05 · COMPARAÇÃO só na abertura dos dois sites
   A janela não rola (nem roda do mouse, nem dedo, nem teclado) e os
   botões de seção saem: compara-se apenas a primeira impressão.
   ========================================================= */
.compare.cx-fixed .cx-scroll{overflow:hidden;overscroll-behavior:auto}
.turn:has(.cx-fixed) .cx-nav{display:none}

/* =========================================================
   DOBRA 06 · PROJETOS guiados pela rolagem
   A dobra fica presa na tela (o trilho tem a altura extra) e a rolagem
   passa pelos três projetos; a barra de cada aba mostra o avanço.
   ========================================================= */
.proj-track{position:relative}
.proj-track > .projects{position:sticky;top:0}
.proj.scrolled .proj-tabs i::after{animation:none!important;width:var(--fill,0%);transition:width .15s linear}
/* com a rolagem guiada, a roda do mouse e o dedo sempre rolam a página (nunca o site de exemplo);
   o passeio automático pelo site de exemplo continua, porque ele rola por código */
.proj.scrolled [data-psite]{overflow:hidden;overscroll-behavior:auto}

/* =========================================================
   DOBRA 08 · SOBRE · foto sem cortar o cabelo
   O enquadramento parte do topo da foto e o zoom cresce a partir do centro
   do rosto para baixo; o parallax fica dentro dessa sobra.
   ========================================================= */
.about-photo img{object-position:50% 4%;transform-origin:50% 30%}
@media (max-width:820px){.about-photo img{object-position:50% 3%}}

/* ---------- Sobre · celular: foto inteira na lateral esquerda, apresentação ao lado ----------
   Título em cima; foto (no formato original 4:5, sem corte nem zoom) à esquerda e o texto à direita;
   manifesto embaixo, na largura toda. */
@media (max-width:820px){
  .about{grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-rows:auto auto auto;
    grid-template-areas:"titulo titulo" "foto texto" "manif manif";column-gap:16px;row-gap:clamp(14px,2.8svh,28px);align-content:center}
  .about-photo{height:auto;min-height:0;aspect-ratio:4/5;align-self:center;border-radius:12px}
  .about-photo img{object-position:50% 50%;scale:1;translate:none}
  .about .words{align-self:center;font-size:clamp(14px,min(4vw,2.3svh),18px);line-height:1.42}
}
/* celulares: a altura que sobra vai para o conteúdo (tipos e foto crescem com a altura da tela),
   em vez de virar espaço vazio em cima e embaixo */
@media (max-width:820px){
  .about .h2{font-size:clamp(28px,min(8.9vw,5.2svh),40px)}
  .about .words{font-size:clamp(14px,min(4.3vw,2.2svh),19px);line-height:1.42}
  .about .manifesto{font-size:clamp(13.5px,min(4.3vw,2.05svh),18px);line-height:1.5}
  .about{row-gap:clamp(14px,3.6svh,40px)}
}
@media (max-width:820px) and (min-height:780px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:clamp(24px,4.6svh,48px);
    align-content:center;padding-top:calc(var(--navh,64px) + 2svh);padding-bottom:calc(2svh + 64px)}
  .about{grid-template-columns:minmax(0,52fr) minmax(0,48fr);row-gap:clamp(26px,3.6svh,36px)}
  .about .h2{font-size:clamp(30px,9.2vw,42px)}           /* título sempre em 2 linhas */
  .about .words{font-size:clamp(15px,4.3vw,19px);line-height:1.5}
  .about .manifesto{font-size:clamp(16px,4.5vw,20px);line-height:1.55}
}