:root{--navy:#27335a;--deep:#111932;--gold:#c09035;--glass:rgba(255,255,255,.16);--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:'Josefin Sans',sans-serif}.container{width:min(1300px,calc(100% - 80px));margin:auto}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:700;line-height:.94;letter-spacing:-.04em}h1{font-size:clamp(3rem,5.1vw,5.75rem)}h2{font-size:clamp(2.4rem,4.2vw,4.85rem)}.eyebrow{color:var(--gold);font-size:1.45rem;margin-bottom:1.35rem}.button{display:inline-flex;align-items:center;gap:1.1rem;background:var(--gold);color:#fff;text-decoration:none;border-radius:.42rem;padding:.8rem 1rem .75rem;font-family:Inter,sans-serif;font-size:1.05rem;font-weight:500;transition:.2s transform,.2s background}.button:hover{transform:translateY(-2px);background:#d4a94f}.button b{font-size:1.4em;line-height:.5}.button--outline{background:transparent;border:1px solid var(--gold);font-size:.9rem;padding:.7rem .8rem}.hero{min-height:780px;position:relative;overflow:hidden;background:linear-gradient(110deg,#27335a 0%,#27335a 52%,#1d2849 100%)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(39,51,90,.88) 43%,rgba(39,51,90,.12) 74%);z-index:1}.hero:after{content:"";position:absolute;width:60vw;height:60vw;border:1px solid rgba(255,255,255,.06);border-radius:50%;top:-31vw;left:21vw;transform:rotate(20deg)}.hero__portrait{position:absolute;right:0;bottom:0;height:96%;width:47%;object-fit:cover;object-position:55% 18%;opacity:.96}.hero__glow{position:absolute;right:16%;bottom:-30%;width:43vw;height:43vw;background:radial-gradient(circle,rgba(192,144,53,.23),transparent 64%);z-index:1}.nav{height:98px;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-top:32px;padding:0 36px;border-radius:20px;background:rgba(255,255,255,.13);backdrop-filter:blur(3px)}.logo{font-family:Inter,sans-serif;font-size:.56rem;line-height:1.2;color:white;text-decoration:none;letter-spacing:.06em}.logo span{display:block;font-family:'Josefin Sans';font-weight:700;font-size:1.55rem;color:var(--gold);line-height:.75}.logo small{font-size:.43rem;letter-spacing:.2em}.hero__content{position:relative;z-index:2;padding-top:105px}.hero__content h1{max-width:580px;margin-bottom:25px}.hero__content .lead{font-size:1.24rem;line-height:1.2;max-width:620px;font-weight:300;margin-bottom:27px}.hero__content small{display:block;font-family:Inter,sans-serif;font-size:.58rem;margin-top:12px}.section{padding:100px 0}.section-intro{text-align:center;max-width:900px;margin:0 auto 62px}.section-intro>p:not(.eyebrow){font-weight:400;font-size:1.15rem;line-height:1.25;max-width:850px;margin:25px auto 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.reason-card{min-height:242px;background:var(--glass);border-radius:20px;padding:28px 23px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}.reason-card h3{color:var(--gold);font-size:1.7rem;line-height:1.05;margin-bottom:16px}.reason-card p{font-size:1.07rem;line-height:1.13;font-weight:300;margin:0}.section-cta{text-align:center;margin:68px auto 0}.section-cta p{font-size:1.55rem;color:var(--gold);font-weight:700;line-height:1.05}.steps{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;max-width:1440px;margin:auto;padding:100px 0 0}.steps__photo{position:relative;align-self:stretch;min-height:610px;background:var(--gold);border-radius:0 20px 0 0;overflow:hidden}.steps__photo img{width:94%;height:100%;object-fit:cover;object-position:center top;border-radius:0 20px 0 0}.document{position:absolute;top:28px;left:30px;color:var(--gold);background:rgba(255,255,255,.18);padding:11px;border-radius:10px}.steps__content{padding:0 50px 65px 0}.steps__content h2{font-size:3.45rem;margin-bottom:42px}.steps ol{padding:0;margin:0;list-style:none;display:grid;gap:27px}.steps li{background:var(--glass);border-radius:9px;padding:20px 25px}.steps h3{color:var(--gold);font-size:1.35rem;line-height:1;margin:0 0 10px}.steps h3 em{font-size:3.6rem;font-style:normal;line-height:.4;float:right}.steps li p{margin:0;line-height:1.1;font-size:1rem;font-weight:300}.rights{background:var(--gold);color:#fff;padding:115px 0;position:relative;overflow:hidden}.rights:after{content:"";position:absolute;width:70%;height:160%;right:-22%;top:-50%;background:repeating-linear-gradient(24deg,transparent 0 44px,rgba(255,255,255,.055) 45px 46px);transform:rotate(12deg)}.rights__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr .8fr;gap:60px;align-items:center}.rights .eyebrow{color:#293351}.rights h2{font-size:3.65rem}.checklist{list-style:none;padding:10px 0 0;margin:0}.checklist li{position:relative;padding-left:43px;margin:0 0 21px;font-size:1.08rem;line-height:1.14;font-weight:300}.checklist li:before{content:'✓';position:absolute;left:0;top:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#293351;color:var(--gold);font-weight:bold}.checklist strong{font-weight:600}blockquote{margin:0;background:#293351;border-radius:8px;padding:45px 28px;color:#fff;font-size:2.1rem;line-height:1.04;font-weight:400}blockquote small{display:block;font-size:1rem;line-height:1.15;font-weight:300;margin-top:28px}.about{display:grid;grid-template-columns:1fr .9fr;gap:55px;padding:120px 0}.about h2{font-size:3.5rem;margin-bottom:12px}.about .role{color:var(--gold);font-size:1.3rem}.about__content>p:not(.eyebrow):not(.role){font-size:1.13rem;line-height:1.16;font-weight:300;max-width:630px}.about__content strong{color:var(--gold)}.about__content .button{margin-top:22px}.about__photos{min-height:620px;position:relative}.about__photos i{display:block;background:var(--gold);border-radius:12px;width:15%;height:70%;position:absolute;top:12%;right:13%}.about__photos img{position:absolute;object-fit:cover;border-radius:35px;box-shadow:0 15px 45px rgba(0,0,0,.18)}.about__photos img:first-of-type{width:70%;height:75%;left:0;top:0;object-position:50% 20%}.about__photos img:last-of-type{width:67%;height:48%;right:0;bottom:0;object-position:50% 20%}.faq{background:var(--gold);padding:100px 0}.faq .eyebrow{color:#293351}.accordion{max-width:1083px;margin:0 auto}.faq-item{border:0;margin:13px 0;background:rgba(255,255,255,.17);border-radius:17px;overflow:hidden}.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;padding:25px 35px;font-size:1.25rem;font-weight:700;text-align:center}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';font-size:2.3rem;line-height:.5;color:#293351;font-weight:300}.faq-item[open] summary:after{content:'−'}.faq-item p{margin:0;padding:0 35px 25px;font-family:Inter,sans-serif;font-size:.95rem;line-height:1.45}.contact{text-align:center;padding:108px 0;background:var(--navy)}.contact h2{font-size:3.55rem}.contact h2 span{color:var(--gold)}.contact p{max-width:1000px;margin:42px auto 34px;line-height:1.2;font-size:1.25rem;font-weight:300}footer{background:var(--deep);padding:40px 0;font-family:Inter,sans-serif;font-size:.72rem;line-height:1.45}
@media(max-width:800px){.container{width:min(100% - 40px,600px)}.hero{min-height:720px}.hero:before{background:linear-gradient(90deg,var(--navy) 0%,rgba(39,51,90,.85) 68%,rgba(39,51,90,.1))}.hero__portrait{opacity:.43;width:85%;height:74%;object-position:50% top}.nav{height:63px;margin-top:16px;padding:0 18px;border-radius:12px}.nav .button{font-size:.68rem;padding:.5rem}.hero__content{padding-top:78px}.hero__content .lead{font-size:1.03rem;max-width:90%}.cards{grid-template-columns:1fr;gap:14px}.reason-card{min-height:auto;padding:25px 22px}.steps{grid-template-columns:1fr;gap:0;padding-top:40px}.steps__photo{min-height:440px;margin-right:40px}.steps__content{padding:55px 20px}.steps__content h2{font-size:2.45rem}.rights__grid,.about{grid-template-columns:1fr;gap:40px}.rights{padding:72px 0}.rights h2,.contact h2{font-size:2.55rem}.about{padding:75px 0}.about__photos{min-height:440px}.faq{padding:70px 0}.faq-item summary{padding:18px;font-size:1rem;text-align:left}.faq-item p{padding:0 18px 18px}.contact{padding:75px 0}.contact p{font-size:1.08rem}footer{font-size:.6rem}.section{padding:75px 0}.section-intro{margin-bottom:42px}.section-cta p{font-size:1.25rem}blockquote{font-size:1.65rem}.checklist li{font-size:1rem}}

/* refinamento fiel ao Figma */
.button img{width:24px;height:24px;object-fit:contain;flex:0 0 24px}.button--outline img{width:18px;height:18px}.logo{display:flex;align-items:center}.logo img{width:146px;height:auto;display:block}.nav{border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 38px rgba(8,14,35,.14);background:linear-gradient(110deg,rgba(255,255,255,.17),rgba(255,255,255,.08));backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.reason-card,.steps li,.faq-item{border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,rgba(255,255,255,.21),rgba(255,255,255,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 9px 24px rgba(10,18,48,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.reasons{position:relative;overflow:hidden}.reasons>.container{position:relative;z-index:1}.reasons__grid{position:absolute;width:min(976px,75vw);height:auto;left:50%;top:0;transform:translateX(-50%);opacity:.38;pointer-events:none}.hero__linework{position:absolute;width:62vw;max-width:961px;height:auto;left:12%;top:-15%;opacity:.18;pointer-events:none;z-index:0}.hero__content,.nav{isolation:isolate}.hero__content .button{margin-top:5px}.cards{position:relative}.rights blockquote{box-shadow:0 20px 42px rgba(76,46,11,.2)}.steps li{background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.12))}.about__photos img{border:1px solid rgba(255,255,255,.13)}
@media(max-width:800px){.logo img{width:105px}.hero__linework{width:130vw;left:-18%;top:3%}.reasons__grid{width:180vw;top:6%;opacity:.18}.button img{width:19px;height:19px;flex-basis:19px}}

/* primeira dobra — conferência com o Figma */
.hero{min-height:860px;background:#27335a}/* o stop de ~54% coincide com a borda esquerda da foto (.hero__portrait tem width:46%) e precisa
   ficar alto para dissolver o recorte; a queda depois dele é que libera o rosto. */
.hero:before{background:linear-gradient(90deg,#27335a 0%,#27335a 44%,rgba(39,51,90,.93) 54%,rgba(39,51,90,.4) 70%,rgba(39,51,90,.08) 100%)}.hero__portrait{height:100%;width:46%;object-position:50% 12%;z-index:0}.hero__glow{right:8%;bottom:-20%;width:53vw;height:53vw;background:radial-gradient(circle,rgba(14,20,47,.1) 0%,rgba(14,20,47,.24) 44%,rgba(14,20,47,0) 70%)}.hero__linework{display:none}/* z-index 1 = mesma camada do .hero:before (que é opaco até 51% da largura), mas depois dele no
   DOM, então fica por cima do overlay e ainda abaixo do texto/nav, que estão em z-index 2. */
.hero{--hero-el-op:.02}.hero__element{position:absolute;left:-7%;top:13%;width:min(47vw,690px);height:auto;opacity:var(--hero-el-op);transform:rotate(22deg);transform-origin:center;z-index:1;pointer-events:none}.nav{width:min(1238px,calc(100% - 80px));height:98px;margin-top:32px;padding:0 36px;background:rgba(217,217,217,.2);border:1px solid rgba(255,255,255,.26);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 12px 40px rgba(10,15,40,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.logo img{width:146px}.hero__content{padding-top:100px}.hero__content h1{font-size:clamp(3.35rem,3.6vw,4.7rem);line-height:.99;letter-spacing:-.035em;max-width:760px;margin-bottom:21px}.hero__content .eyebrow{font-size:2.1rem;line-height:1;margin-bottom:24px}.hero__content .lead{max-width:643px;font-size:1.56rem;line-height:1.2;font-weight:300;margin-bottom:28px}.hero__content .button{font-size:1.24rem;gap:.5rem;padding:7px 8px;border-radius:6px}.hero__content .button img{width:24px;height:24px}.hero__content small{font-size:.66rem}.hero-tag{position:absolute;z-index:2;display:flex;align-items:center;gap:9px;padding:5px 12px 5px 7px;min-height:24px;border:1px solid rgba(255,255,255,.09);border-radius:3px;background:rgba(217,217,217,.20);box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 16px rgba(12,17,45,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:400 .88rem/1 Inter,sans-serif;color:rgba(255,255,255,.62)}.hero-tag img{display:block;width:16px;height:16px;object-fit:contain}.hero-tag--strategy{left:calc(50% + 78px);top:70%}.hero-tag--protection{right:6%;top:55%}.hero-tag--protection img{width:15px;height:16px}@media(max-width:800px){.hero{min-height:720px}
/* no mobile a foto ocupa 82% da largura e fica atrás de TODO o texto, então o degradê precisa
   seguir cobrindo — o alívio dos stops acima vale só para o desktop, onde texto e foto não se cruzam. */
.hero:before{background:linear-gradient(90deg,#27335a 0%,#27335a 51%,rgba(39,51,90,.82) 68%,rgba(39,51,90,.22) 100%)}.hero__element{width:95vw;left:-29%;top:22%}.hero__portrait{width:82%;height:79%;opacity:.48}.hero__content{padding-top:74px}.hero__content h1{font-size:clamp(3rem,11vw,4.2rem)}.hero__content .eyebrow{font-size:1.7rem}.hero__content .lead{font-size:1.17rem;max-width:95%}.hero-tag--strategy{left:49%;top:65%}.hero-tag--protection{right:5%;top:49%}.nav{width:calc(100% - 40px)}}

/* terceira dobra — composição do Figma */
.steps{grid-template-columns:minmax(0,749px) minmax(0,558px);gap:79px;max-width:1386px;padding:100px 0 120px}.steps__photo{align-self:start;min-height:1045px;height:1045px;background:transparent;border-radius:0;overflow:visible;position:relative}.steps__gold{position:absolute;z-index:0;right:0;bottom:0;width:12.7%;height:55.9%;border-radius:0 12.5px 12.5px 0;background:var(--gold)}.steps__photo>img{position:absolute;z-index:1;left:0;top:0;width:94.4%;height:100%;object-fit:cover;object-position:center;border:1.25px solid rgba(255,255,255,.47);border-radius:25px}.steps__photo .document{position:absolute;z-index:2;top:137px;left:47px;width:66px;height:68px;display:grid;place-items:center;padding:0;border-radius:20px;background:rgba(217,217,217,.2);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.steps__photo .document img{width:35px;height:45px;object-fit:contain}.steps__content{padding:0}.steps__content h2{font-size:3.08rem;line-height:.99;margin-bottom:55px}.steps ol{gap:27px}.steps li{min-height:242px;padding:25px;border:1px solid rgba(255,255,255,.30);background:rgba(217,217,217,.20);border-radius:20px;box-shadow:none;backdrop-filter:none}.steps h3{font-size:1.875rem;line-height:1.02;margin-bottom:12px}.steps h3 em{font-size:4.43rem;line-height:.58}.steps li p{font-size:1.28rem;line-height:1.1;font-weight:300}@media(max-width:1100px){.steps{grid-template-columns:1fr 1fr;gap:50px;padding:80px 40px 110px}.steps__photo{min-height:0;height:auto;aspect-ratio:749/1045}.steps__photo .document{top:13.1%;left:6.3%;width:8.8%;height:6.5%;border-radius:16px}.steps__photo .document img{width:53%;height:66%}.steps__content h2{font-size:clamp(2.3rem,4vw,3.08rem)}.steps li{min-height:auto}}@media(max-width:800px){.steps{grid-template-columns:1fr;gap:52px;padding:65px 20px 90px}.steps__photo{margin:0;max-width:620px;width:100%}.steps__content{padding:0}.steps__content h2{font-size:2.55rem}.steps li{padding:22px}.steps h3{font-size:1.55rem}.steps li p{font-size:1.1rem}}

/* terceira dobra — distribuição interna dos cards */
.steps ol{width:406px}.steps li{display:flex;flex-direction:column;justify-content:flex-start}.steps h3{position:relative;min-height:60px;padding-right:66px;margin:0 0 12px}.steps h3 em{position:absolute;top:-4px;right:0;float:none}.steps li p{margin:0}@media(max-width:1100px){.steps ol{width:100%}}

/* quarta dobra — box de citação e elemento decorativo */
.rights:after{display:none}
/* --el = largura do SVG (961px no frame de 1440 do Figma); right/top derivam dela para manter
   o bbox rotacionado em x=787,52 / y=0 do frame. --el-op: medido em 4,95% no render do Figma. */
.rights{--el:66.74vw;--el-op:.07;--el-x:-.28}.rights__element{position:absolute;z-index:0;width:var(--el);height:auto;right:calc(var(--el)*var(--el-x));top:calc(var(--el)*.1475);opacity:var(--el-op);transform:rotate(22deg);transform-origin:center;pointer-events:none}.rights__grid{z-index:1}.rights blockquote{width:501px;min-height:405px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:36px 24px;background:#27335a;border-radius:10px;text-align:center}.rights blockquote p{max-width:465px;margin:0;font-size:2.5rem;line-height:1.01;font-weight:400}.rights blockquote strong{color:#c09035;font-weight:400}.rights blockquote small{max-width:417px;margin:25px 0 0;font-size:1.56rem;line-height:1.13;font-weight:300;text-align:center}.rights .checklist{--check:28px;--check-gap:15px}.rights .checklist li{padding-left:calc(var(--check) + var(--check-gap))}/* 1.14em = o line-height do item; centra o check na PRIMEIRA linha em vez de no bloco todo,
   então itens de 1, 2 ou 3 linhas ficam todos com o círculo na mesma altura do texto que abrem. */
.rights .checklist li:before{content:"";width:var(--check);height:var(--check);top:calc((1.14em - var(--check))/2);background:transparent url("assets/rights-check.svg") center/contain no-repeat;border-radius:0}@media(max-width:900px){.rights{--el:128vw}.rights blockquote{width:100%;min-height:auto;padding:38px 24px}.rights blockquote p{font-size:clamp(2rem,7vw,2.5rem)}.rights blockquote small{font-size:1.2rem}.rights .checklist{--check:26px;--check-gap:13px}}

/* segunda dobra — centraliza a última linha quando ela não fecha as 3 colunas.
   Grid de 6 colunas com os cards em span 2: a largura de cada card fica idêntica à do grid de 3
   ((W-56)/3 nos dois casos), e sobra meia coluna de deslocamento — exatamente o que centra os
   restos. Os seletores detectam o resto sozinhos, então funciona se o array de cards mudar. */
.cards{grid-template-columns:repeat(6,1fr)}.reason-card{grid-column:span 2}
.reason-card:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
.reason-card:last-child:nth-child(3n+1){grid-column:3/span 2}
@media(max-width:800px){.cards{grid-template-columns:1fr}.reason-card,.reason-card:nth-last-child(2):nth-child(3n+1),.reason-card:last-child:nth-child(3n+1){grid-column:auto}}

/* quinta dobra — shape dourado e badges glass (referência do Figma).
   A barra passa POR TRÁS da foto grande (que vai até 70%) e só a faixa além dela aparece;
   antes ela começava em 72%, deixando um vão de 12px entre foto e shape. */
.about__photos{--badge:68px}
.about__photos i{width:15%;height:37%;top:12%;right:12.5%;border-radius:0 12px 12px 0}
.about__badge{position:absolute;z-index:3;width:var(--badge);height:var(--badge);display:grid;place-items:center;border-radius:20px;background:rgba(217,217,217,.2);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.about__badge img{position:static;width:36px;height:auto;border:0;border-radius:0;box-shadow:none;object-fit:contain}
.about__badge--scale{left:calc(var(--badge)/-2);top:9%}
.about__badge--star{right:calc(var(--badge)/-6);top:68%}
@media(max-width:800px){.about__photos{--badge:52px}.about__badge--scale{left:calc(var(--badge)/-3)}.about__badge img{width:28px}}
/* proporções da referência: as duas fotos com a mesma largura (80%), a de cima mais vertical e
   sobreposição de ~31% da altura entre elas (grande 0–79%, menor 48–100%). */
/* aspect-ratio (e não min-height fixo) mantém a proporção do frame da referência em qualquer
   largura — com min-height o mobile herdava a altura do desktop e esticava as fotos. */
.about__photos{min-height:0;aspect-ratio:640/920;align-self:start}
.about__photos>img:first-of-type{width:80%;height:79%;left:0;top:0;object-position:50% 12%}
.about__photos>img:last-of-type{width:80%;height:52%;right:0;bottom:0;object-position:50% 24%}
/* a coluna de fotos define a altura da linha (aspect-ratio 640/920); sem isso o texto fica
   preso no topo e sobra um vazio embaixo. Centraliza o texto no eixo das fotos. */
.about__content{align-self:center}
/* sexta dobra — "Dúvidas que todo mundo tem" precisa de ~1096px no tamanho máximo do h2, mas o
   .section-intro limita a 900px e jogava a frase para uma terceira linha. */
.faq .section-intro{max-width:1160px}

/* ============================================================
   PASSE DE ALINHAMENTO E RITMO — sistema único de espaçamento
   Antes havia 3 margens laterais concorrentes (70px no container, 101px na nav, 27px na dobra 3)
   e 6 paddings de dobra sem escala (100/108/115/120). Aqui tudo passa a derivar de --dobra
   e da escala de 8px, para as bordas formarem uma linha contínua ao descer a página.
   ============================================================ */
:root{--dobra:80px;--gap-xs:8px;--gap-s:16px;--gap-m:20px;--gap-l:32px;--gap-xl:48px}

/* 1. alinhamento horizontal: uma só margem (70px @1440) para nav, dobras e conteúdo */
.nav{width:min(1300px,calc(100% - 80px))}
.steps{max-width:1300px;grid-template-columns:749fr 558fr;gap:5.4%}

/* 2. ritmo vertical: mesma respiração em todas as dobras */
.section,.rights,.about,.faq,.contact{padding:var(--dobra) 0}
.steps{padding:var(--dobra) 0}
footer{padding:var(--gap-l) 0}

/* 3. espaçamento entre textos: escala de 8 no lugar dos valores soltos (21.6 / 12 / 62) */
.eyebrow{margin-bottom:var(--gap-m)}
.section-intro{margin-bottom:var(--gap-xl)}
.about h2{margin-bottom:var(--gap-s)}
.about__content .button,.hero__content .button{margin-top:var(--gap-l)}
.section-cta{margin-top:var(--gap-xl)}
/* .steps é a única dobra que não usa .container, então precisa da mesma conta de largura dele —
   com max-width puro ela perdia a margem lateral abaixo de 1300px e encostava na borda. */
.steps{width:min(1300px,calc(100% - 80px));max-width:none}
@media(max-width:1100px){.steps{grid-template-columns:1fr 1fr;gap:50px}}
@media(max-width:800px){.steps{width:min(100% - 40px,600px);grid-template-columns:1fr;gap:52px;padding:72px 0 80px}
 .section,.rights,.about,.faq,.contact{padding:72px 0}}
@media(max-width:800px){.nav{width:min(100% - 40px,600px)}}

/* botão flutuante do WhatsApp — z-index 50 fica acima de tudo (o maior na página é 3, nos badges).
   60px de alvo de toque, acima do mínimo de 44px. */
.wa-float{--wa:82px;position:fixed;right:32px;bottom:32px;z-index:50;width:var(--wa);height:var(--wa);display:grid;place-items:center;border-radius:50%;background:#25d366;box-shadow:0 8px 26px rgba(0,0,0,.3);transition:.2s transform,.2s box-shadow}
.wa-float:hover{transform:scale(1.06);box-shadow:0 12px 32px rgba(0,0,0,.36)}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* ícone em 52% do círculo — a mesma proporção do botão de referência */
.wa-float img{width:calc(var(--wa)*.52);height:calc(var(--wa)*.52);object-fit:contain}
@media(max-width:800px){.wa-float{--wa:64px;right:18px;bottom:18px}}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* tags do hero — --s escala TODAS as medidas do Figma pelo mesmo fator (padding, gap, ícone,
   raio e fonte), então a proporção original do design é preservada, só maior. */
.hero-tag{--s:1.3;gap:calc(9px*var(--s));padding:calc(5px*var(--s)) calc(12px*var(--s)) calc(5px*var(--s)) calc(7px*var(--s));min-height:calc(24px*var(--s));border-radius:calc(3px*var(--s));font-size:calc(.88rem*var(--s))}
.hero-tag img{width:calc(16px*var(--s));height:calc(16px*var(--s))}
.hero-tag--protection img{width:calc(15px*var(--s));height:calc(16px*var(--s))}
.hero-tag--strategy{left:calc(50% + 200px)}
@media(max-width:800px){.hero-tag{--s:1.12}.hero-tag--strategy{left:47%}}

/* ============================================================
   ESCALA TIPOGRÁFICA — derivada da dobra 1
   Os cinco níveis saem dos valores que o hero já usava (53.6 / 33.6 / 25 / 19.8 / 15.8px),
   cuja razão entre degraus é ~1.3. Antes havia 7 tamanhos de corpo e 5 de h2 concorrendo,
   com alguns h2 (60.5px) maiores que o próprio h1 (53.6px), invertendo a hierarquia.
   ============================================================ */
/* o piso de 3.35rem travava a fonte em 53.6px de 1120px a 1490px enquanto o container encolhia,
   fazendo títulos longos quebrarem numa linha a mais. Piso menor = o título escala junto. */
:root{--fs-titulo:clamp(2.1rem,2.75vw,3.4rem);--fs-sub:1.6rem;--fs-lead:1.2rem;--fs-corpo:1.04rem;--fs-nota:.92rem}

h1,h2,.rights h2,.about h2,.contact h2,.steps__content h2{font-size:var(--fs-titulo)}
.eyebrow,.hero__content .eyebrow{font-size:var(--fs-sub)}

/* corpo principal das dobras */
.section-intro>p:not(.eyebrow),.contact p,.checklist li,.steps li p,
.about__content>p:not(.eyebrow):not(.role),.hero__content .lead{font-size:var(--fs-lead)}

/* corpo secundário (dentro de cards e do acordeão) e botões */
.reason-card p,.faq-item p,.button,.hero__content .button{font-size:var(--fs-corpo)}
.faq-item p{font-size:var(--fs-nota)}

/* títulos de card mantêm um degrau entre o subtítulo e o corpo */
.reason-card h3,.steps h3,.faq-item summary,.about .role{font-size:var(--fs-sub);line-height:1.05}
.faq-item summary,.about .role{font-size:var(--fs-corpo)}
/* com o corpo maior, a coluna de texto da dobra 3 passou a ser 149px mais alta que a foto, que
   tinha altura cravada em 1045px. align-self:stretch faz a foto acompanhar a linha do grid. */
.steps__photo{height:auto;min-height:0;align-self:stretch}
/* escala mobile — mesmos valores que a dobra 1 já usava no celular (clamp do h1, sub 1.7rem,
   lead 1.17rem). Sem isto o h2 ficava em 53.6px contra um h1 de 48px, invertendo a hierarquia. */
@media(max-width:800px){:root{--fs-titulo:clamp(3rem,11vw,4.2rem);--fs-sub:1.7rem;--fs-lead:1.17rem;--fs-corpo:1.02rem;--fs-nota:.9rem}}

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   Só transform e opacity — nada que force recálculo de layout durante a animação.
   Todos os estados iniciais ficam escopados em .js: sem JavaScript nada fica invisível.
   ============================================================ */
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* base do reveal no scroll — --i vem do JS e escalona os irmãos */
.js [data-anim]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1);transition-delay:calc(var(--i,0)*70ms)}
.js [data-anim].is-in{opacity:1;transform:none}

/* dobra 1 — cascata na carga, seguindo a ordem de leitura */
.js .hero__content .eyebrow,.js .hero__content h1,.js .hero__content .lead,
.js .hero__content .button,.js .hero__content small{opacity:0;animation:sobe .55s cubic-bezier(.22,.7,.3,1) forwards}
.js .hero__content .eyebrow{animation-delay:.08s}
.js .hero__content h1{animation-delay:.16s}
.js .hero__content .lead{animation-delay:.26s}
.js .hero__content .button{animation-delay:.36s}
.js .hero__content small{animation-delay:.44s}
/* as tags de vidro entram por último, para não competir com o texto */
.js .hero-tag{opacity:0;animation:sobe .5s ease forwards;animation-delay:.62s}
.js .hero-tag--protection{animation-delay:.72s}

/* dobra 4 — o check cresce junto com o item que ele marca */
.js .checklist li:before{transform:scale(.7);transition:transform .45s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(var(--i,0)*70ms + 60ms)}
.js .checklist li.is-in:before{transform:scale(1)}

/* dobra 5 — fotos e badges são absolutos: fade com deslocamento mínimo */
.js .about__photos>img[data-anim],.js .about__badge[data-anim]{transform:translateY(10px)}
.js .about__photos>img.is-in,.js .about__badge.is-in{transform:none}

/* FAQ — a altura é animada via Web Animations API no script.js, medindo o valor real.
   A técnica CSS de 0fr→1fr não colapsa dentro de <details>: o fr resolve para o tamanho do
   conteúdo em vez de zero. Aqui animar height é aceitável — dispara só no clique, não em scroll. */
.js .faq-item__body{overflow:hidden}

/* flutuante — entra quando o CTA do hero sai de vista */
.js .wa-float{opacity:0;transform:scale(.8);pointer-events:none}
.js .wa-float.is-in{opacity:1;transform:none;pointer-events:auto}
.js .wa-float.is-in:hover{transform:scale(1.06)}

@media(prefers-reduced-motion:reduce){
 .js [data-anim],.js .hero__content .eyebrow,.js .hero__content h1,.js .hero__content .lead,
 .js .hero__content .button,.js .hero__content small,.js .hero-tag{opacity:1;transform:none;animation:none;transition:none}
 .js .checklist li:before{transform:scale(1);transition:none}
 .js .faq-item__body{transition:none}
 .js .wa-float{opacity:1;transform:none;pointer-events:auto}
}

/* ============================================================
   FLUTUAÇÃO DAS TAGS + CTAs ENCORPADOS COM PULSO
   ============================================================ */

/* entrada e flutuação são keyframes separados de propósito: 'aparece' mexe só em opacity e
   'flutua' só em transform, então rodam juntas sem uma sobrescrever a outra. */
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes flutua{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1deg)}}

.js .hero-tag{opacity:0;animation:aparece .5s ease .62s forwards,flutua 2.6s ease-in-out .62s infinite}
/* durações e atrasos diferentes para as duas não flutuarem em uníssono */
.js .hero-tag--protection{animation-delay:.72s,1.1s;animation-duration:.5s,3.1s}

/* CTAs: o do hero tinha 7px/8px de padding contra 12.8px/16px dos outros — era o mais importante
   e o mais apertado. Todos passam a usar a mesma medida. */
.button{padding:1.15rem 1.9rem;gap:.85rem;border-radius:8px}
.hero__content .button{padding:1.15rem 1.9rem;gap:.85rem;border-radius:8px}
.button--outline{padding:.95rem 1.5rem}

/* pulso em box-shadow: não usa transform, então não briga com o translateY do :hover */
@keyframes pulsaCta{0%{box-shadow:0 0 0 0 rgba(192,144,53,.45)}70%{box-shadow:0 0 0 18px rgba(192,144,53,0)}100%{box-shadow:0 0 0 0 rgba(192,144,53,0)}}
.js .button{animation:pulsaCta 2.6s ease-out infinite}
.js .hero__content .button{animation:sobe .55s cubic-bezier(.22,.7,.3,1) .36s forwards,pulsaCta 2.6s ease-out .95s infinite}
.js .nav .button{animation-delay:1.3s}
.js .section-cta .button{animation-delay:.5s}
.js .about__content .button{animation-delay:.8s}
.js .button:hover{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
 .js .hero-tag{animation:none;opacity:1;transform:none}
 .js .button,.js .hero__content .button{animation:none}
}

/* ============================================================
   AJUSTE DE ALTURA DAS DOBRAS
   min-height:242px nos cards vinha do Figma, calibrado para a tipografia antiga. Com a escala
   reduzida o conteúdo pede ~194px, então cada card carregava ~50px de vazio. Deixando a altura
   ao conteúdo, o grid ainda iguala os cards de cada linha (align-items:stretch é o padrão).
   ============================================================ */
.reason-card,.steps li{min-height:0}
.steps__content h2{margin-bottom:var(--gap-l)}
.steps ol{gap:var(--gap-m)}
.steps li{padding:20px 22px}
/* o bloco de fotos da dobra 5 cresce com a largura (aspect-ratio); teto para não estourar a tela */
.about__photos{max-height:min(760px,72vh)}
/* último ajuste de altura: ritmo vertical um pouco mais curto em todas as dobras */
:root{--dobra:64px}
.steps__content h2{margin-bottom:var(--gap-m)}
.steps ol{gap:16px}
.steps li{padding:17px 22px}