/* ============================================================
   LP RHOMANA — build v3 (16/09/2026) · Figma eNkADTTRBZRfxAB94bvSzf
   Frame "LP Rhomana — V2 · Desktop 1441" (197:58) · 1440 × 6977
   Cada seção carrega o node-id de origem. Valores literais do
   Figma, sem arredondar. Mobile: refluxo próprio abaixo de 1024
   e de 768. Movimento: só opacity/transform/filter, estado final
   sem JS sempre correto.
   ============================================================ */

/* ---------- fontes (licenciadas com a marca, subset Latin) ---------- */
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-VF.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-VF.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

/* ---------- tokens (coleção Rhomana no Figma) ---------- */
:root{
  --areia:#F3E6D8; --areia-clara:#F8E7D8; --branco:#FFF9F2;
  --vinho:#4C1E16; --vinho-hero:#502420; --vinho-marca:#642821; --vinho-profundo:#3F1F1B;
  --argila:#B95A42; --argila-forte:#C7583C; --dourado:#B88A55; --salvia:#87977A;
  --laranja:#E76619; --laranja-depo:#EC4911;
  --filete:rgba(63,31,27,.14); --filete-escuro:rgba(255,249,242,.20);
  --r-sm:12px; --r-md:18px; --r-lg:24px;

  --lp:1440px;            /* largura de referência */
  --cont:1012px;          /* container de leitura */
  --gutter:clamp(20px, 4.2vw, 214px);

  /* Movimento — curva "Apple": saída rápida, chegada longa */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.9s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--vinho-profundo);
  background:var(--areia);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;font-optical-sizing:auto;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* container: 1012 centrado; abaixo de 1052 vira 100% − 2·gutter */
.wrap{width:min(var(--cont), 100% - 2*var(--gutter));margin-inline:auto;position:relative}
.wrap-l{width:min(1248px, 100% - 2*clamp(20px,4.2vw,96px));margin-inline:auto;position:relative}

section{position:relative}
/* Seções que cortam conteúdo usam overflow:clip, não hidden: hidden cria um scroll
   container e o animation-timeline:view() passaria a medir contra a seção, não
   contra a viewport (foi o que travou o movimento na 1ª rodada). */

/* ---------- textura: relevo, nunca cor. Mesmo blend e opacidade do Figma ---------- */
.tex::before{content:'';position:absolute;inset:0;pointer-events:none;background-size:cover;background-position:center;z-index:0}
.tex-areia::before{background-image:url('../assets/img/tex-areia.jpg');mix-blend-mode:multiply;opacity:.20}
.tex-areia-16::before{background-image:url('../assets/img/tex-areia-clara.jpg');mix-blend-mode:multiply;opacity:.16}
.tex-parede::before{background-image:url('../assets/img/tex-parede.jpg');mix-blend-mode:overlay;opacity:.26}
.tex-vinho::before{background-image:url('../assets/img/tex-vinho.jpg');mix-blend-mode:overlay;opacity:.30}
.tex > *{position:relative;z-index:1}

/* ---------- tipografia (text styles LP/…) ---------- */
.h2{font-size:36px;line-height:44px;font-weight:600;color:var(--vinho-profundo)}
.en{color:var(--argila)}                         /* ênfase de título sobre areia */
.en-corpo{color:var(--vinho-marca);font-weight:700} /* ênfase de corpo sobre areia */
.campo-vinho{background:var(--vinho);color:var(--areia)}
.campo-vinho .h2{color:var(--areia)}
.campo-vinho .en{color:var(--dourado)}
.faixa-txt{font-size:27px;line-height:34px;font-weight:700;text-align:center;width:fit-content;max-width:100%;margin-inline:auto}

/* ---------- botões (LP / Botão) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--laranja);color:var(--branco);font-weight:700;white-space:nowrap;
  font-size:19px;line-height:24px;padding:23px 44px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px) scale(1.025);box-shadow:0 14px 34px -10px rgba(231,102,25,.55)}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn-vinho{background:var(--vinho-marca);font-size:15px;line-height:20px;padding:17px 32px}
.btn-vinho:hover{box-shadow:0 12px 28px -10px rgba(100,40,33,.6)}

/* =====================================================================
   01 · HEADER — 197:59 · h118 · sticky · areia-clara · filete inferior
   Efeito: ao rolar >24px compacta para 72px, ganha vidro e sombra.
   ===================================================================== */
.header{
  position:sticky;top:0;z-index:100;height:118px;display:flex;align-items:center;
  background:var(--areia-clara);border-bottom:1px solid var(--filete);
  transition:height .6s var(--ease), background .5s, box-shadow .6s var(--ease), backdrop-filter .5s;
}
.header .wrap{display:flex;align-items:center;justify-content:space-between}
.header .logo{display:flex;align-items:center;min-height:44px;transform-origin:left center;transition:transform .6s var(--ease)}
.header .logo img{width:216px;height:44px}
.header.is-compact{height:72px;background:rgba(248,231,216,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 1px 0 var(--filete), 0 12px 36px -18px rgba(63,31,27,.28)}
.header.is-compact .logo{transform:scale(.8)}
@supports not (backdrop-filter:blur(1px)){.header.is-compact{background:rgba(248,231,216,.96)}}

/* =====================================================================
   02 · HERO — 197:71 · 1440 × 760 · vinho-hero
   Camadas (de trás p/ frente): círculos argila mascarados · círculo
   esquerdo · textura parede overlay .26 · foto Gisele · conteúdo
   ===================================================================== */
/* sem isolation: com isolate o Chrome rasteriza a seção como grupo e o grão
   da textura atravessa botão e texto (medido: σ 2,64 no laranja → 0,00 sem ela).
   O campo mantém a textura porque o fundo opaco da seção já é o backdrop. */
.hero{height:760px;background:var(--vinho-hero);color:var(--areia);overflow:clip}
.hero-bg{position:absolute;inset:0;pointer-events:none;will-change:transform}
/* grupo 197:74: dois círculos tangentes (op .48) com fade horizontal + círculo grande (op .67);
   tudo com fade vertical (máscara 197:73: opaco no topo → transparente na base) */
.hero-circ{position:absolute;left:calc(178/1440*100%);top:0;right:0;bottom:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}
.hero-circ .duo{position:absolute;left:0;top:-33px;width:1387px;height:926px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 631px);mask-image:linear-gradient(90deg,transparent 0,#000 631px)}
.hero-circ .duo i{position:absolute;top:0;width:926px;height:926px;border-radius:50%;background:var(--argila);opacity:.48}
.hero-circ .duo i:nth-child(1){left:-2px}
.hero-circ .duo i:nth-child(2){left:924px}
.hero-circ .uno{position:absolute;left:461px;top:-33px;width:926px;height:926px;border-radius:50%;background:var(--argila);opacity:.67}
/* 197:81 · círculo esquerdo, 748px, op .29, centrado verticalmente */
.hero-esq{position:absolute;left:-570px;top:50%;width:748px;height:748px;margin-top:-374px;border-radius:50%;background:var(--argila);opacity:.29}
.hero-tex{position:absolute;inset:0;background:url('../assets/img/tex-parede.jpg') center/cover;mix-blend-mode:overlay;opacity:.26}
/* 197:83 · foto: 626 × 869.44 em (789, 15.28) — cruza a divisa e é cortada pela seção */
.hero-foto{position:absolute;left:calc(789/1440*100%);top:15.28px;width:626px;height:869.44px;z-index:1;will-change:transform}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:top}
/* 197:84 · conteúdo em (214,166), 540 de largura */
.hero .wrap{height:100%}
.hero-conteudo{position:relative;z-index:2;width:540px;padding-top:166px}
.hero-h1{font-size:48px;line-height:51px;font-weight:400;color:var(--areia);letter-spacing:0}
.hero-h1 b{font-weight:700}
.hero-h1 .x{font-weight:800}
.hero-h1 .lar{color:var(--laranja);font-weight:700}
.hero-sub{margin-top:24px;font-size:20px;line-height:28px;color:rgba(243,230,216,.86)}
.hero-sub b{color:rgba(243,230,216,1)}
/* CTA hero = LP/Botão grande escalado ×1,486 → 104,34 de altura */
.hero-cta{margin-top:40px}
.hero .btn-hero{font-size:28.2px;line-height:35.7px;padding:34.17px 65.37px}

/* =====================================================================
   03 · CONTEXTO — 197:90 · h488 · areia + textura multiply .20
   colunas em (214,157): argumento 592 · filete em x=631 · evidência 340 em x=671
   ===================================================================== */
.contexto{height:488px;background:var(--areia)}
.contexto .cols{position:absolute;top:157px;left:0;width:100%;display:grid;grid-template-columns:592px 1px 340px;column-gap:39px}
.contexto .arg{width:592px}
.kicker{font-size:18px;line-height:26px;color:var(--vinho-marca)}
.contexto .h2{margin-top:16px}
.contexto .grad{background:linear-gradient(90deg,#E76619 0%,#B95A42 44.712%,#E76619 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline}
.contexto .fio-v{width:1px;height:150px;background:var(--filete);margin-top:12px}
.contexto .evid{width:340px;margin-top:31px;font-size:18px;line-height:28px}

/* =====================================================================
   03b · FAIXA PROMESSA — 197:101 · h224 · argila-forte + parede overlay .26
   ===================================================================== */
.promessa{height:224px;background:var(--argila-forte);display:flex;align-items:flex-start;justify-content:center}
.promessa p{width:600px;margin-top:78px;font-size:33.333px;line-height:41.975px;font-weight:700;color:var(--areia);text-align:center}

/* =====================================================================
   04 · SEGMENTOS — 197:104 · h837 · textura 716 · carrossel centrado
   trilho 1659 (5 × 309 + 4 × 28,5) centrado em 1440 → x = −109,5
   ===================================================================== */
.segmentos{height:837px;background:var(--areia);overflow:clip}
.segmentos.tex::before{height:716px}
.segmentos .h2{position:absolute;left:0;right:0;top:100px;text-align:center}
.seg-scroll{position:absolute;top:230px;left:0;right:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab}
.seg-scroll::-webkit-scrollbar{display:none}
.seg-scroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.seg-track{display:flex;gap:28.5px;width:max-content;padding:0 0 6px}
.seg-card{width:309px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .6s var(--ease)}
.seg-card figure{width:100%;height:399px;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;background:var(--areia-clara)}
.seg-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.seg-card:hover img{transform:scale(1.045)}
.seg-card:hover{transform:translateY(-4px)}
.pill{width:280px;height:79px;padding:16px 24px;border-radius:999px;background:var(--salvia);color:var(--branco);
  display:flex;align-items:center;justify-content:center;text-align:center;font-size:17px;line-height:22px;font-weight:700}

/* =====================================================================
   05 · PONTE — 197:123 · h204 · areia-clara · filetes · textura .16
   ===================================================================== */
.ponte{background:var(--areia-clara);border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:63px 0;text-align:center}
.ponte .wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.ponte .t{font-size:27px;line-height:34px;font-weight:700;width:fit-content;max-width:100%}
.ponte .c{font-size:18px;line-height:28px;color:rgba(63,31,27,.78);width:fit-content;max-width:100%}

/* =====================================================================
   06 · CUSTO — 197:127 · h510 · vinho + textura overlay .30 · 3 cartões
   ===================================================================== */
.custo{height:510px;background:var(--vinho);color:var(--areia)}
.custo .cab{position:absolute;left:50%;top:96px;width:868px;transform:translateX(-50%)}
.custo .h2{text-align:center}
.cenarios{position:absolute;top:255px;left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.cenario{background:var(--branco);color:var(--vinho-profundo);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.cenario:hover{transform:translateY(-5px);box-shadow:0 26px 50px -24px rgba(0,0,0,.45)}
.cenario .rot{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.6px}
.cenario p{font-size:16px;line-height:24px}
.cenario .dest{background:var(--laranja);color:var(--branco);padding:2px 8px;font-size:18px;line-height:28px;font-weight:700}

/* =====================================================================
   07 · FECHO DO CUSTO — 197:149 · h220 · vinho
   ===================================================================== */
.fecho-custo{background:var(--vinho);color:var(--areia);padding:56px 0 96px}

/* =====================================================================
   08 · CTA INTERMEDIÁRIO — 197:152 · h640 · foto + véu + cartão de vidro
   ===================================================================== */
.cta-int{height:640px;background:var(--vinho);color:var(--branco);overflow:clip}
.cta-int .foto,.cta-fim .foto{position:absolute;inset:0;z-index:0}
.cta-int .foto img{width:100%;height:100%;object-fit:cover;object-position:center}
.cta-int .veu{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(76,30,22,.92) 0%,rgba(76,30,22,.74) 25.481%,rgba(76,30,22,0) 68.269%)}
.cta-int .wrap{z-index:2;height:100%}
.cta-int .conteudo{position:absolute;top:160px;left:0;width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.marca-peq{width:133px;height:27px}
.cta-int .h2{color:var(--branco)}
.cta-int .h2 .en{color:var(--dourado)}
/* 197:167 · cartão flutuante [D32] em (992,420) → right = 1440−992−352 = 96 */
.flutuante{position:absolute;z-index:3;right:clamp(20px,6.67vw,96px);top:420px;width:352px;padding:22px 24px;border-radius:var(--r-lg);
  background:rgba(255,249,242,.12);border:1px solid rgba(255,249,242,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px}
.flutuante .rot{font-size:11px;line-height:16px;font-weight:700;letter-spacing:1.1px;color:var(--dourado)}
.flutuante p{font-size:15px;line-height:23px;color:rgba(255,249,242,.92)}

/* =====================================================================
   09 · MÉTODO — 197:170 · h700 · areia · trilho horizontal [A28]
   ===================================================================== */
.metodo{height:700px;background:var(--areia);overflow:clip}
.metodo-fundo{position:absolute;left:0;top:-38px;width:100%;height:774px;pointer-events:none}
.metodo-fundo img{width:100%;height:100%}
.metodo .cab{position:absolute;top:96px;left:0;right:0;height:56px}
.metodo .cab .h2{position:absolute;left:0;top:6px;width:690px}
.metodo .cab .h2 .r{font-weight:400}
.metodo .cab .h2 .x{font-weight:800;color:var(--argila)}
.metodo .cab .lead{position:absolute;left:778px;top:0;width:470px;font-size:18px;line-height:28px;color:rgba(63,31,27,.8)}
.trilho{position:absolute;top:208px;left:0;right:0;height:396px}
.trilho .fio{position:absolute;left:-24px;right:-24px;top:198px;height:1px;background:var(--filete);transform-origin:left;}
.ponto{position:absolute;top:189px;width:18px;height:18px;border-radius:50%;background:var(--argila);
  box-shadow:0 0 0 5px var(--areia)}
.etapa{position:absolute;width:288px;display:flex;flex-direction:column;gap:10px}
.etapa .cab-e{display:flex;align-items:baseline;gap:12px}
.etapa .cab-e.dir{justify-content:flex-end}
.etapa h3{font-size:20px;line-height:26px;font-weight:700;white-space:nowrap}
.etapa .barra{width:1px;height:26px;background:var(--filete);align-self:center}
.etapa .num{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:100%;font-size:40px;line-height:40px;letter-spacing:-.8px;color:var(--argila)}
.etapa p{font-size:16px;line-height:24px;color:rgba(63,31,27,.82)}
.etapa.dir p{text-align:right}
.e1{left:12px;top:20px}   .p1{left:147px}
.e2{left:324px;top:230px} .p2{left:459px}
.e3{left:613px;top:44px;width:311px} .p3{left:771px}
.e4{left:948px;top:230px} .p4{left:1083px}

/* =====================================================================
   11 · FAIXA VINHO — 197:208 · h162 · vinho + parede overlay .26
   ===================================================================== */
.faixa-vinho{background:var(--vinho);color:var(--areia);padding:64px 0}

/* =====================================================================
   12 · CLIENTES — 197:211 · h436 · marquise contínua entre filetes
   Velocidade: 2200px de trilho a 44px/s → 50s por volta.
   ===================================================================== */
.clientes{background:var(--areia);padding:96px 0;overflow:clip}
.clientes .h2{margin-bottom:48px}
.marquee{position:relative;height:152px;border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);overflow:hidden}
.marquee-track{display:flex;width:max-content;height:150px;animation:marquee 50s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
/* célula com fundo areia: o multiply do logo precisa de backdrop dentro do grupo transformado da marquise.
   A textura desta seção fica ACIMA do trilho, como no Figma (197:240 é o último filho, multiply .16). */
.cel{width:200px;height:150px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--filete);flex:none;background:var(--areia)}
.clientes.tex::before{z-index:2}
.cel img{mix-blend-mode:multiply;object-fit:contain;transition:transform .6s var(--ease)}
.cel:hover img{transform:scale(1.06)}
/* 197:217 · a fila começa em x = −186 (OdontoVida cortado à esquerda, Alvorada à direita). Uma volta = 50% do trilho duplicado. */
@keyframes marquee{from{transform:translateX(-186px)}to{transform:translateX(calc(-50% - 186px))}}
html.qa .marquee-track{transform:translateX(-186px)!important}

/* =====================================================================
   14 · DEPOIMENTOS — 197:241 · h710 · areia + textura .20 · carrossel
   ===================================================================== */
.depo{background:var(--areia);padding:64px 0 40px}
.depo .cab{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.depo .sub{font-size:18px;line-height:28px;color:rgba(63,31,27,.74);max-width:70ch}
.depo-scroll{height:430px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;cursor:grab;
  margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
.depo-scroll::-webkit-scrollbar{display:none}
.depo-scroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.depo-track{display:flex;gap:24px;width:max-content;height:406px}
.depo-card{width:392px;height:406px;padding:28px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:24px;scroll-snap-align:start;
  background:rgba(255,249,241,.88);border:1px solid rgba(63,31,27,.1);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.depo-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(63,31,27,.35)}
.depo-card .pessoa{display:flex;align-items:center;gap:18px;height:84px}
.depo-card .foto{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none}
.depo-card .foto img{width:100%;height:100%;object-fit:cover}
.depo-card .id{display:flex;flex-direction:column;gap:6px;min-width:0}
.depo-card .nome{font-size:21px;line-height:27px;font-weight:700;color:var(--laranja-depo);white-space:nowrap}
.depo-card .cargo{font-size:13px;line-height:19px;color:rgba(63,31,27,.72)}
.depo-card blockquote{font-size:16px;line-height:24px;color:var(--vinho-profundo)}
.depo-nav{display:flex;align-items:center;justify-content:space-between;height:36px;margin-top:28px}
.depo-nav .pos{font-size:13px;font-weight:700;letter-spacing:1.04px;color:var(--laranja-depo);font-variant-numeric:tabular-nums}
.depo-nav .ctr{display:flex;gap:10px}
.depo-nav button{width:36px;height:36px;border-radius:18px;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease), background .3s, opacity .3s}
.depo-nav .prev{border:1px solid rgba(63,31,27,.26);color:var(--vinho-profundo)}
.depo-nav .next{background:var(--laranja-depo);color:#FFF9F1}
.depo-nav button:hover{transform:scale(1.08)}
.depo-nav button:active{transform:scale(.94)}
.depo-nav button[disabled]{opacity:.35;pointer-events:none}

/* =====================================================================
   15 · CTA FINAL — 197:260 · h700 · foto mascarada + mancha argila
   Foto 1659 × 934 em (0,−64), máscara horizontal: transparente em x=0 → opaca em x=1041,5 (72,3%)
   ===================================================================== */
.cta-fim{height:700px;background:var(--vinho);color:var(--branco);overflow:clip}
.cta-fim .foto{top:-64px;bottom:auto;height:934px;width:1659px;max-width:none;left:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1041.5px);mask-image:linear-gradient(90deg,transparent 0,#000 1041.5px)}
.cta-fim .foto img{width:100%;height:100%;object-fit:cover}
/* 197:266 · mancha argila desfocada (σ 50, op .55) no canto inferior esquerdo, com fade vertical */
.cta-fim .mancha{position:absolute;left:0;top:153px;width:1024px;height:546px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 78% at 28% 92%,rgba(185,90,66,.62) 0%,rgba(185,90,66,.34) 42%,rgba(185,90,66,0) 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 100%)}
.cta-fim .wrap{z-index:2;height:100%}
.cta-fim .conteudo{position:absolute;top:104px;left:0;width:489px;display:flex;flex-direction:column;align-items:flex-start}
.cta-fim .h2{margin-top:30px;width:460px;font-size:40px;line-height:48.889px;font-weight:600;color:var(--branco)}
.cta-fim .h2 .x{font-weight:800}
.cta-fim .p1{margin-top:24px}
.cta-fim .p2{margin-top:14px}
.cta-fim p{width:470px;font-size:18px;line-height:28px;color:rgba(255,249,242,.88)}
.cta-fim .btn{margin-top:40px}
.cta-fim .cob{margin-top:26px;width:100%;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1.04px;color:rgba(255,249,242,.72)}

/* =====================================================================
   16 · FECHO DE MARCA — 197:289 · h180 · base 1050 (195→1245) com filete
   ===================================================================== */
.fecho{height:180px;background:var(--areia)}
.fecho .base{position:absolute;top:96px;left:50%;width:min(1050px, 100% - 2*var(--gutter));transform:translateX(-50%);height:46px;border-top:1px solid var(--filete)}
.fecho .cidade{position:absolute;left:0;top:21px;font-size:16px;line-height:24px;font-weight:500}
.fecho .btn-mini{position:absolute;right:28px;top:0;width:160px;height:44px;border-radius:var(--r-sm);background:var(--laranja);color:var(--branco);
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:24px;font-weight:700;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.fecho .btn-mini:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(231,102,25,.55)}

/* =====================================================================
   17 · CONTATO — 197:295 · h88 · vinho + textura .30
   ===================================================================== */
.contato{height:88px;background:var(--vinho);display:flex;align-items:center}
.contato .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
.contato a{font-size:16px;line-height:24px;font-weight:700;color:var(--dourado);transition:color .3s;padding:10px 0}
.contato a:hover{color:var(--branco)}

/* =====================================================================
   MOVIMENTO — revelação ao rolar. Só ativa com html.js; sem JS ou com
   reduced-motion o estado final é o padrão (nada fica invisível).
   ===================================================================== */
.br-m{display:none}
@media (max-width:767px){.br-m{display:inline}.br-d{display:none}}
@media (min-width:768px){.nb{white-space:nowrap}}
html.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0)*90ms)}
html.js [data-reveal="scale"]{transform:translateY(16px) scale(.97)}
html.js [data-reveal="left"]{transform:translateX(-32px)}
/* cards dentro de trilho com overflow: entram por escala, sem deslocar — deslocamento vertical seria cortado pelo trilho */
html.js [data-reveal="pop"]{transform:scale(.94)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js .hero [data-reveal]{transition-duration:1.2s}

/* fotos de CTA: entram a 1.06 e assentam em 1 (zoom-out "Apple") */
html.js .zoom-in img{transform:scale(1.06);transition:transform 1.8s var(--ease)}
html.js .zoom-in.is-in img{transform:scale(1)}

/* trilho do método: filete desenha da esquerda */
html.js .trilho .fio{transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
html.js .trilho.is-in .fio{transform:scaleX(1)}
html.js .ponto{transform:scale(0);transition:transform .7s var(--ease)}
html.js .trilho.is-in .ponto{transform:scale(1)}
html.js .trilho.is-in .p1{transition-delay:.35s}
html.js .trilho.is-in .p2{transition-delay:.55s}
html.js .trilho.is-in .p3{transition-delay:.75s}
html.js .trilho.is-in .p4{transition-delay:.95s}

/* modo QA (?qa=1) e preferência do usuário: tudo no quadro final */
html.qa *,html.qa *::before,html.qa *::after{animation:none!important;transition:none!important}
html.qa [data-reveal]{opacity:1!important;transform:none!important}
html.qa .zoom-in img{transform:none!important}
html.qa .trilho .fio,html.qa .ponto{transform:none!important}
html.qa .marquee-track{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html.js [data-reveal]{opacity:1;transform:none;animation:none!important}
  html.js .zoom-in img,html.js .trilho .fio,html.js .ponto{transform:none}
}
@media (hover:none),(max-width:1023px){
  .depo-nav{height:44px}
  .depo-nav button{width:44px;height:44px;border-radius:22px}
}
@media (hover:none){
  .btn:hover,.cenario:hover,.depo-card:hover,.seg-card:hover,.fecho .btn-mini:hover{transform:none;box-shadow:none}
  .seg-card:hover img,.cel:hover img{transform:none}
}

/* =====================================================================
   RESPONSIVO
   1440+  : conteúdo centrado, fundos sangram (já resolvido pelo .wrap)
   1024–1439 : mesma diagramação; margens encolhem; hero e CTAs recalculam
   768–1023  : tablet — hero empilha, método em 2 colunas, custo 1 coluna
   ≤767      : mobile — coluna única, gutter 20, carrosséis por toque
   ===================================================================== */
/* =====================================================================
   ESCALA FLUIDA DO DESKTOP — 1024 a 1439 (decisão do Igor, 16/09/2026)
   Abaixo de 1440 a composição inteira de 1440 encolhe junto com a janela
   (zoom no body), em vez de manter tamanhos fixos que ficam grandes demais
   numa janela de 1290. Em 1440 zoom = 1: pixel perfect com o Figma.
   Degraus a cada ~60px; a largura de layout resultante fica em 1420–1460
   e o .wrap absorve a diferença. `zoom` é Baseline (Chrome, Safari, Firefox 126+).
   ===================================================================== */
@media (min-width:1400px) and (max-width:1439px){body{zoom:.972}}
@media (min-width:1340px) and (max-width:1399px){body{zoom:.93}}
@media (min-width:1280px) and (max-width:1339px){body{zoom:.889}}
@media (min-width:1200px) and (max-width:1279px){body{zoom:.84}}
@media (min-width:1120px) and (max-width:1199px){body{zoom:.78}}
@media (min-width:1024px) and (max-width:1119px){body{zoom:.72}}

/* os ajustes intermediários abaixo só fazem sentido onde não há zoom (Firefox < 126) */
@supports not (zoom:1){
@media (max-width:1439px){
  .hero-foto{left:auto;right:calc(25/1440*100%)}
  .metodo .cab .lead{left:auto;right:0;width:min(470px,38%)}
  .metodo .cab .h2{width:min(690px,58%)}
}
@media (max-width:1300px){
  /* trilho do método: recalcula posições em % do trilho (1248 de referência) */
  .e1{left:1%}.e2{left:26%}.e3{left:49%;width:288px}.e4{left:76%}
  .p1{left:calc(11.8% + 9px)}.p2{left:calc(36.8% + 9px)}.p3{left:calc(61.8% + 9px)}.p4{left:calc(86.8% + 9px)}
  .e1,.e2,.e3,.e4{width:23%}
  .etapa .cab-e{flex-wrap:wrap;row-gap:4px}
}
@media (min-width:1024px) and (max-width:1100px){
  .contexto{height:auto;padding:96px 0}
  .contexto .cols{position:static;grid-template-columns:1fr 1px minmax(280px,340px);column-gap:32px}
  .contexto .arg,.contexto .evid{width:auto}
  .custo{height:auto;padding:96px 0}
  .custo .cab{position:static;width:auto;transform:none;margin-bottom:63px}
  .cenarios{position:static}
  .hero-conteudo{width:min(540px,58%)}
  .flutuante{top:auto;bottom:72px}
}

}

/* base do refluxo abaixo de 1024 (antes vivia no bloco ≤1100; o zoom fluido tornou o 1024–1100 desnecessário) */
@media (max-width:1023px){
  .contexto{height:auto;padding:96px 0}
  .contexto .cols{position:static;grid-template-columns:1fr 1px minmax(280px,340px);column-gap:32px}
  .contexto .arg,.contexto .evid{width:auto}
  .custo{height:auto;padding:96px 0}
  .custo .cab{position:static;width:auto;transform:none;margin-bottom:63px}
  .cenarios{position:static}
  .hero-conteudo{width:min(540px,58%)}
  .flutuante{top:auto;bottom:72px}
}
@media (max-width:1023px){
  .etapa .cab-e{flex-wrap:wrap;row-gap:4px}
}


@media (max-width:1023px){
  :root{--gutter:clamp(20px,5vw,48px)}
  /* HERO — empilha: texto em cima, foto abaixo ancorada à direita */
  .hero{height:auto;min-height:0;padding:64px 0 0;display:flex;flex-direction:column}
  .hero .wrap{height:auto;order:1}
  .hero-foto{order:2}
  .hero-tex,.hero-bg{order:0}
  .hero-conteudo{width:min(560px,100%);padding-top:0;padding-bottom:40px}
  .hero-h1{font-size:44px;line-height:48px}
  .hero .btn-hero{font-size:22px;line-height:28px;padding:24px 48px}
  .hero-foto{position:relative;left:auto;right:auto;top:0;width:min(560px,86%);height:auto;aspect-ratio:608/845;margin:0 0 0 auto;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .hero-foto img{object-position:top}
  .hero-circ{left:20%}
  .hero-circ .duo,.hero-circ .uno{transform:scale(.8);transform-origin:top left}
  /* CONTEXTO */
  .contexto .cols{grid-template-columns:1fr;row-gap:32px}
  .contexto .fio-v{width:100%;height:1px;margin:0}
  .contexto .evid{margin-top:0;max-width:60ch}
  /* SEGMENTOS */
  .segmentos{height:auto;padding:96px 0 80px}
  .segmentos.tex::before{height:100%}
  .segmentos .h2{position:static;margin-bottom:56px;padding-inline:var(--gutter)}
  .seg-scroll{position:static;padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
  /* CUSTO */
  .cenarios{grid-template-columns:1fr 1fr}
  /* CTA INT */
  .cta-int{height:auto;padding:96px 0 120px;display:flex;flex-direction:column}
  .cta-int .conteudo{position:static;width:min(520px,100%)}
  .cta-int .veu{background:linear-gradient(180deg,rgba(76,30,22,.92) 0%,rgba(76,30,22,.78) 60%,rgba(76,30,22,.55) 100%)}
  .flutuante{position:relative;right:auto;bottom:auto;top:auto;margin:48px auto 0 var(--gutter);width:min(352px,100% - 2*var(--gutter))}
  /* MÉTODO — vertical com trilho à esquerda */
  .metodo{height:auto;padding:96px 0}
  .metodo-fundo{height:100%;top:0}
  .metodo-fundo img{height:100%;object-fit:cover}
  .metodo .cab{position:static;height:auto;display:flex;flex-direction:column;gap:20px;margin-bottom:56px}
  .metodo .cab .h2,.metodo .cab .lead{position:static;width:100%}
  .metodo .cab .lead{max-width:60ch}
  .etapa h3{white-space:normal}
  .trilho{position:relative;top:auto;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:48px 40px;padding-left:44px}
  .trilho .fio{left:8px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
  html.js .trilho .fio{transform:scaleY(0)}html.js .trilho.is-in .fio{transform:scaleY(1)}
  .ponto{display:none}
  .etapa,.e1,.e2,.e3,.e4{position:relative;top:auto;left:auto;width:auto}
  .etapa .cab-e.dir{justify-content:flex-end;flex-direction:row-reverse}
  .etapa.dir p{text-align:left}
  .etapa::before{content:'';position:absolute;left:0;margin-top:11px;width:18px;height:18px;border-radius:50%;background:var(--argila);box-shadow:0 0 0 5px var(--areia)}
  .etapa::before{left:-44px}
  /* DEPOIMENTOS */
  .depo-card{width:392px}
  /* CTA FINAL */
  .cta-fim{height:auto;padding:96px 0 120px}
  .cta-fim .foto{width:100%;height:100%;top:0;-webkit-mask-image:none;mask-image:none;opacity:.55}
  .cta-fim .foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(76,30,22,.85),rgba(76,30,22,.45))}
  .cta-fim .conteudo{position:static;width:min(489px,100%)}
  .cta-fim .mancha{top:auto;bottom:0}
  /* FECHO / CONTATO */
  .fecho .btn-mini{right:0}
}

/* =====================================================================
   MOBILE ≤767 — implementa o frame "LP Rhomana — V2 · Mobile 390"
   (Figma 229:90, 15/09/2026). Convenção do arquivo: tudo centrado,
   H2 18/23 SemiBold, corpo 14/20, seções com padding 40/20 e gap 22,
   ênfase sobre areia em vinho-marca (não argila). Valores literais.
   Desvios declarados: alvos de toque levados a 44px (regra que não cede)
   e círculos do hero aproximados por CSS.
   ===================================================================== */
@media (max-width:767px){
  :root{--gutter:20px}

  /* --- base tipográfica do arquivo mobile --- */
  .h2{font-size:18px;line-height:23px;font-weight:600;letter-spacing:0;text-align:center}
  .en{color:var(--vinho-marca);font-weight:700}
  .campo-vinho .en{color:var(--dourado);font-weight:inherit}
  .faixa-txt{font-size:17px;line-height:22px;width:100%}
  .kicker{font-size:12px;line-height:14px;text-align:center;max-width:244px;margin-inline:auto}
  .btn{font-size:19px;line-height:24px;padding:23px 44px}

  /* --- 01 header · h76 · logo 95×19,4 · CTA 117,8×37,8 → 44 por toque --- */
  .header{height:76px}
  .header.is-compact{height:62px}
  .header .logo img{width:95px;height:19.35px}
  .btn-vinho{font-size:11px;line-height:14px;padding:15px 22px;border-radius:6.5px}   /* 44px · raio do Figma */

  /* --- 02 hero · h677 · foto em cima (260×361,7 em y50), texto centrado abaixo --- */
  .hero{height:auto;padding:50px 0 65px;display:flex;flex-direction:column;
        background:linear-gradient(180deg,#642821 0%,#3F1F1B 100%)}
  .hero-bg,.hero-tex{order:0}
  .hero-foto{order:1;position:relative;width:260px;height:361.7px;margin:0 0 0 calc(50% - 119.7px);left:auto;right:auto;top:auto;z-index:1;
    -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .hero-foto img{object-position:top}
  .hero .wrap{order:2;height:auto;z-index:2}
  .hero-conteudo{width:100%;padding:0;margin-top:-31px;display:flex;flex-direction:column;align-items:center;gap:23px;text-align:center}
  .hero-h1{font-size:20px;line-height:25px}
  .hero-sub{margin:0;font-size:14px;line-height:20px;color:rgba(243,230,216,.9)}
  .hero-cta{margin:0}
  .hero .btn-hero{font-size:19px;line-height:24px;padding:23px 44px;width:auto}       /* 284×70 */
  /* círculos: três de 310px na faixa y 87–399 (Group 1 do Figma), aproximados */
  .hero-circ{left:0;-webkit-mask-image:none;mask-image:none}
  .hero-circ .duo{left:-115px;top:87px;width:620px;height:312px;-webkit-mask-image:none;mask-image:none}
  .hero-circ .duo i{width:310px;height:310px;opacity:.42}
  .hero-circ .duo i:nth-child(1){left:0}
  .hero-circ .duo i:nth-child(2){left:310px}
  .hero-circ .uno{left:40px;top:87px;width:310px;height:310px;opacity:.52}
  .hero-esq{display:none}

  /* --- 03 contexto · h314 · pad 40/20 · kicker→14→H2 · 28 · filete · 28 · evidência --- */
  .contexto{padding:40px 0}
  .contexto .cols{grid-template-columns:1fr;row-gap:28px;text-align:center}
  .contexto .h2{margin-top:14px;max-width:256px;margin-inline:auto}
  .contexto .grad{font-weight:700}
  .contexto .fio-v{width:100%;height:1px;margin:0;background:rgba(63,31,27,.10)}
  .contexto .evid{width:auto;max-width:296px;margin:0 auto;font-size:14px;line-height:20px}

  /* --- 03b promessa · h120 · pad 38/20 --- */
  .promessa{height:auto;padding:38px 0}
  .promessa p{width:100%;margin:0;padding:0 var(--gutter);font-size:17px;line-height:22px}

  /* --- 04 segmentos · h498 · pad 40/0 gap 22 · cards 230 · foto 297 · pill 210 --- */
  .segmentos{padding:40px 0}
  .segmentos .h2{margin-bottom:22px}
  .seg-scroll{padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
  .seg-track{gap:20px;padding:0}
  .seg-card{width:230px;gap:8px}
  .seg-card figure{height:297px}
  .pill{width:210px;height:auto;min-height:48px;padding:14px 18px;font-size:14px;line-height:20px}

  /* --- 05 ponte · h176 · pad 40/20 gap 12 --- */
  .ponte{padding:40px 0;border:0}
  .ponte .wrap{gap:12px}
  .ponte .t{font-size:17px;line-height:22px;width:100%}
  .ponte .c{font-size:14px;line-height:20px;width:100%;color:rgba(63,31,27,.8)}

  /* --- 06 custo · pad 40/20 gap 22 · cards gap 16, pad 20, gap 12 --- */
  .custo{padding:40px 0}
  .custo .cab{margin-bottom:22px}
  .cenarios{grid-template-columns:1fr;gap:16px}
  .cenario{padding:20px;gap:12px;align-items:center;text-align:center}
  .cenario .rot{font-size:11px;line-height:15px;letter-spacing:0}
  .cenario p{font-size:14px;line-height:20px}
  .cenario .dest{width:100%;font-size:19px;line-height:25px;padding:2px 8px}
  .fecho-custo{padding:40px 0}

  /* --- 08 cta intermediário · h863 · foto inteira com véu vertical · conteúdo em y449 --- */
  .cta-int{height:auto;min-height:863px;padding:449px 0 100px;display:block}
  /* export do nó 229:185 (recorte CROP do Figma), mesma proporção da seção */
  .cta-int .foto img{object-position:center}
  .cta-int .veu{background:linear-gradient(180deg,rgba(185,90,66,0) 0%,#3F1F1B 100%)}
  .cta-int .conteudo{width:100%;align-items:center;text-align:center;gap:22px}
  .marca-peq{width:113px;height:23px}
  .cta-int .h2{font-size:17px;line-height:22px}
  .cta-int .btn{width:auto}                                                          /* 277×70 */
  .flutuante{margin:24px auto 0;width:min(350px,100% - 2*var(--gutter));padding:22px;border-radius:var(--r-lg);
    background:rgba(255,249,242,.10);align-items:center;text-align:center;gap:10px}
  .flutuante .rot{font-size:11px;line-height:15px;letter-spacing:0}
  .flutuante p{font-size:14px;line-height:20px;color:rgba(255,249,242,.9)}

  /* --- 09 método · pad 40/20 gap 22 · trilho vertical centrado: filete, ponto, etapa… gap 18 --- */
  .metodo{padding:40px 0}
  .metodo .cab{margin-bottom:22px;gap:14px;text-align:center}
  .metodo .cab .h2 .r{font-weight:400}
  .metodo .cab .h2 .x{font-weight:700;color:var(--vinho-marca)}
  .metodo .cab .lead{font-size:14px;line-height:20px;max-width:none}
  .trilho{display:flex;flex-direction:column;align-items:center;gap:18px;padding:0}
  .trilho .fio{display:block;position:static;width:100%;height:1px;background:rgba(63,31,27,.10);order:0;transform-origin:center}
  html.js .trilho .fio{transform:scaleX(0)} html.js .trilho.is-in .fio{transform:scaleX(1)}
  .ponto{display:block;position:static;width:18px;height:18px;box-shadow:none}
  .ponto.p1{order:1}.e1{order:2}.ponto.p2{order:3}.e2{order:4}.ponto.p3{order:5}.e3{order:6}.ponto.p4{order:7}.e4{order:8}
  .etapa{position:static;width:100%;padding:0;border:0;gap:8px;align-items:center;text-align:center}
  .etapa + .etapa{border-top:0}
  .etapa::before{display:none}
  .etapa .cab-e{flex-direction:column;align-items:center;gap:6px;flex-wrap:nowrap}
  .etapa .cab-e.dir{flex-direction:column-reverse;justify-content:flex-start}
  .etapa .num{font-size:26px;line-height:28px;letter-spacing:0}
  .etapa .barra{width:40px;height:1px;background:rgba(63,31,27,.10)}
  .etapa h3{font-size:16px;line-height:21px;white-space:normal}
  .etapa p{font-size:14px;line-height:20px;text-align:center;max-width:none;color:rgba(63,31,27,.8)}

  /* --- 11 faixa vinho · h124 --- */
  .faixa-vinho{padding:40px 0}

  /* --- 12 clientes · pad 40/0 gap 22 · células 130×110 --- */
  .clientes{padding:40px 0}
  .clientes .h2{margin-bottom:22px}
  .marquee{height:112px;-webkit-mask-image:none;mask-image:none}
  .marquee-track{height:110px;margin-left:140px}   /* 229:246: fila em x = −46 → −186 (keyframe) + 140 */
  .cel{width:130px;height:110px}
  .cel img{transform:scale(.64)}

  /* --- 14 depoimentos · pad 40/20 gap 22 · cards 288, pad 20, gap 16 --- */
  .depo{padding:40px 0}
  .depo .cab{gap:8px;margin-bottom:22px;text-align:center}
  .depo .sub{font-size:14px;line-height:20px;color:rgba(63,31,27,.7);max-width:none}
  .depo-scroll{height:auto;padding-bottom:0}
  .depo-track{height:auto;gap:14px}
  .depo-card{width:288px;height:auto;padding:20px;gap:16px}
  .depo-card .pessoa{height:auto;gap:14px}
  .depo-card .foto{width:64px;height:64px}
  .depo-card .nome{font-size:16px;line-height:22px;white-space:normal}
  .depo-card .cargo{font-size:12px;line-height:17px}
  .depo-card blockquote{font-size:14px;line-height:20px;max-width:none}
  .depo-nav{margin-top:22px}
  .depo-nav .pos{font-size:12px;letter-spacing:1px}

  /* --- 15 cta final · h636 · foto no alto (466) · conteúdo em y227, centrado --- */
  .cta-fim{height:auto;min-height:636px;padding:227px 0 43px}
  .cta-fim .foto{top:0;height:466px;width:100%;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
  .cta-fim .foto::after{content:none}
  /* camada 242:340 do Figma: a foto do desktop em 1001×563, posicionada em (−510, −5) */
  .cta-fim .foto img{position:absolute;width:1001px;height:563px;max-width:none;left:-510px;top:-5px;object-fit:fill}
  .cta-fim .mancha{top:auto;bottom:0;height:60%}
  .cta-fim .conteudo{width:100%;align-items:center;text-align:center}
  .cta-fim .marca-peq{width:88px;height:18px}
  .cta-fim .h2{font-size:22px;line-height:28px;width:100%;margin-top:22px}
  .cta-fim .h2 .x{font-weight:600}   /* 229:311: no mobile o H2 é SemiBold uniforme, sem ênfase */
  .cta-fim p{width:100%;font-size:14px;line-height:20px;color:rgba(255,249,242,.9);max-width:none}
  .cta-fim .p1{margin-top:16px}
  .cta-fim .p2{margin-top:12px}
  .cta-fim .btn{width:100%;margin-top:26px;font-size:19px;line-height:25px;padding:20.5px 16px}   /* 350×66 */
  .cta-fim .cob{margin-top:20px;font-size:11px;line-height:15px;letter-spacing:.8px;color:rgba(255,249,242,.7)}

  /* --- 16 fecho · h169 · base com filete, cidade e botão 208×51 centrados --- */
  .fecho{height:auto;padding:40px 0}
  .fecho .base{position:static;transform:none;width:calc(100% - 2*var(--gutter));margin-inline:auto;height:auto;
    padding-top:7px;display:flex;flex-direction:column;align-items:center;gap:12px;border-top:1px solid rgba(63,31,27,.10)}
  .fecho .cidade{position:static;font-size:14px;line-height:20px;font-weight:500}
  .fecho .btn-mini{position:static;width:208px;height:51px;border-radius:999px;font-size:19px;line-height:25px}

  /* --- 17 contato · h124 · pad 32/20 · três linhas centradas 14/20 · toque 44 --- */
  .contato{height:auto;padding:12px 0}
  .contato .wrap{flex-direction:column;align-items:center;gap:0}
  .contato a{font-size:14px;line-height:20px;padding:12px 0}                       /* 44px */

  /* teto de leitura só onde a coluna passa de 75ch (600–767) */
  .hero-sub,.contexto .evid,.ponte .c,.cenario p,.metodo .cab .lead,.etapa p,
  .depo .sub,.depo-card blockquote,.cta-fim p,.flutuante p{max-width:62ch;margin-inline:auto}
}
@media (max-width:360px){
  .hero .btn-hero{padding:23px 36px}
  .cta-fim .btn{font-size:16px;line-height:22px;padding:20px 12px}
  .seg-card{width:220px}
}

/* telas muito largas: nada cresce além de 1440 de conteúdo, mas os fundos sangram */
@media (min-width:1441px){
  .hero-foto{left:calc(50% + 69px)}          /* 789 − 720 */
  .hero-circ{left:calc(50% - 542px)}         /* 178 − 720 */
  .hero-esq{left:calc(50% - 1290px)}         /* −570 − 720 */
  .cta-fim .foto{left:calc(50% - 720px)}
  .cta-fim .mancha{left:calc(50% - 720px)}
  .flutuante{right:calc(50% - 624px)}        /* 720 − 96 */
}


/* =====================================================================
   MOVIMENTO "APPLE" — ligado ao scroll (CSS scroll-driven animations)
   Três travas: (1) só opacity/transform; (2) o estado final é o padrão —
   tudo abaixo vive dentro de @supports, então navegador sem suporte
   (Firefox) fica correto e estático, com o IntersectionObserver cobrindo
   a revelação; (3) html.qa e prefers-reduced-motion desligam tudo.
   Suporte: Chrome/Edge 115+, Safari 18+ (≈84% global, set/2026).
   ===================================================================== */
/* palavras: o JS divide os textos marcados em <span class="w" style="--w:n"> */
.w{display:inline-block}
/* hero: o H1 entra palavra a palavra na carga (tempo, não scroll) */
html.js .hero-h1 .w{animation:wordIn 1.1s var(--ease) both;animation-delay:calc(.12s + var(--w)*55ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}

@supports (animation-timeline: view()){
  /* faixas de afirmação (03b, 07, 11): cada palavra acende conforme cruza o
     viewport, da esquerda para a direita. Só opacidade — sem deslocar layout. */
  html.js .scrub .w{animation:wordScrub linear both;animation-timeline:view();
    animation-range:cover calc(8% + var(--w)*1.1%) cover calc(36% + var(--w)*1.1%)}
  @keyframes wordScrub{from{opacity:.22}to{opacity:1}}

  /* revelação das seções guiada pelo scroll (determinística — não depende do
     IntersectionObserver disparar). O hero mantém a entrada por tempo na carga;
     cards de carrossel (pop) ficam no observer porque o trilho é o scroll
     container deles e o view() mediria contra ele. --i = degrau do stagger. */
  html.js main > section:not(.hero) [data-reveal]:not([data-reveal="pop"]){
    transition:none;animation:revealY linear both;animation-timeline:view();
    animation-range:cover calc(3% + var(--i,0)*3%) cover calc(26% + var(--i,0)*3%)}
  html.js main > section:not(.hero) [data-reveal="scale"]{animation-name:revealS}
  html.js main > section:not(.hero) [data-reveal="left"]{animation-name:revealL}
  @keyframes revealY{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @keyframes revealS{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes revealL{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}

  /* fotos de CTA (08, 15): a escala assenta com o scroll, não com o tempo */
  html.js .zoom-in img{transition:none;animation:zoomOut linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes zoomOut{from{transform:scale(1.14)}to{transform:scale(1)}}

  @media (min-width:1024px){
    /* hero: saída — conteúdo sobe e apaga, foto sobe mais rápido que a página,
       círculos ao fundo andam devagar. Três velocidades = profundidade. */
    html.js .hero-conteudo{animation:heroOut linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes heroOut{to{opacity:0;transform:translateY(-72px)}}
    html.js .hero-foto{animation:heroFoto linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes heroFoto{to{transform:translateY(-150px)}}
    html.js .hero-bg,html.js .metodo-fundo{animation:driftY linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes driftY{from{transform:translateY(38px)}to{transform:translateY(-38px)}}

    /* método: o filete desenha e os pontos nascem à medida que o trilho sobe */
    html.js .trilho .fio{transition:none;animation:drawX linear both;animation-timeline:view();animation-range:cover 6% cover 40%}
    @keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    html.js .ponto{transition:none;animation:pop var(--ease) both;animation-timeline:view();
      animation-range:cover calc(12% + var(--i,0)*7%) cover calc(24% + var(--i,0)*7%)}
    @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
  }
}
/* congelamento e preferência do usuário: estado final, sem exceção */
html.qa .w,html.qa .hero-conteudo,html.qa .hero-foto,html.qa .hero-bg,html.qa .metodo-fundo,
html.qa .zoom-in img,html.qa .trilho .fio,html.qa .ponto{animation:none!important;opacity:1;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .w,html.js .hero-conteudo,html.js .hero-foto,html.js .hero-bg,html.js .metodo-fundo,
  html.js .zoom-in img,html.js .trilho .fio,html.js .ponto{animation:none!important;opacity:1;transform:none!important}
}