/* ==========================================================================
   Wesley Nogueira — Radiestesia Terapêutica
   Landing page · layout fiel ao arquivo do Figma "Wesley Radiestesia novo"
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Cores extraídas do Figma */
  --brown-900:#6E3D1E;
  --brown-700:#A75D16;
  --orange-500:#C27628;
  --orange-400:#C47D34;
  --orange-300:#C67D33;
  --cream-100:#FFF8F0;
  --cream-200:#F5E6D1;
  --cream-300:#F4E5D0;
  --sand:#D8B78E;
  --ink:#20201E;
  --ink-soft:#363430;
  --white:#fff;

  /* Tipografia */
  --font-display:"Cardo",Georgia,"Times New Roman",serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Layout */
  --container:1253px; /* 1205px de conteúdo + gutters, igual ao Figma */
  --gutter:clamp(20px,1.714vw,24px);
  --radius-card:32px;
  --radius-inner:19px;
  --radius-pill:22px;

  /* Efeitos */
  --noise:url("../assets/noise.webp");
  --shadow-btn:
     inset 0 2px 1px rgba(255,255,255,.85),
     inset 0 -4px 2px rgba(32,32,30,.22),
     0 0 20px rgba(255,255,255,.45),
     0 0 180px rgba(194,118,40,.5);
  --shadow-btn-dark:
     inset 0 2px 1px rgba(255,255,255,.35),
     inset 0 -4px 2px rgba(0,0,0,.3),
     0 0 20px rgba(255,255,255,.12),
     0 18px 60px rgba(0,0,0,.25);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange-400);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cream-300);color:var(--brown-900);padding:12px 18px;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}

/* ---------- 3. Utilitários ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-size:clamp(11.5px,1.143vw,16px);
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.25;
  text-transform:uppercase;
  color:var(--orange-500);
}
.eyebrow--center{text-align:center}
.eyebrow--left{text-align:left}
.eyebrow--dark{color:var(--orange-500)}
/* No herói o rótulo é mais claro que o laranja padrão: #d8b78e, como no Figma.
   Em telas pequenas a regra do fim do arquivo deixa um tom ainda mais claro. */
.hero .eyebrow{color:#d8b78e}

.section{padding-block:clamp(64px,6.429vw,90px)}

.section__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.143vw,44px);
  line-height:1.05;
  letter-spacing:-.005em;
  text-align:center;
  color:var(--ink);
  margin-top:4px;
}
.section__title--left{text-align:left}
.section__title--dark{color:#F0DBC1}

.section__lead{
  max-width:640px;
  margin:16px auto 0;
  text-align:center;
  font-size:clamp(16px,1.429vw,20px);
  line-height:1.4;
  color:var(--ink);
}

.center-cta{display:flex;justify-content:center;margin-top:clamp(36px,4.143vw,58px)}

/* ---------- 4. Botões ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(16px,1.357vw,19px);
  line-height:1.2;
  text-align:center;
  padding:16px 30px;
  min-height:55px;
  border-radius:30px;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  isolation:isolate;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background-image:var(--noise);
  background-size:180px;
  opacity:.16;
  mix-blend-mode:overlay;
  border-radius:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--cream{
  background:var(--cream-300);
  color:var(--brown-900);
  box-shadow:var(--shadow-btn);
}
.btn--cream:hover{box-shadow:var(--shadow-btn),0 12px 34px rgba(110,61,30,.28)}

.btn--solid{
  background:var(--orange-500);
  color:var(--white);
  padding:16px 48px;
  box-shadow:0 18px 44px rgba(110,61,30,.24);
}
.btn--solid::after{opacity:.07}
.btn--solid:hover{box-shadow:0 22px 52px rgba(110,61,30,.3)}

.btn--orange{
  background:var(--orange-400);
  color:var(--white);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.5),
    inset 0 -4px 2px rgba(32,32,30,.28),
    0 0 20px rgba(255,255,255,.2),
    0 0 120px rgba(196,125,52,.45);
}
.btn--orange:hover{box-shadow:
    inset 0 2px 1px rgba(255,255,255,.5),
    inset 0 -4px 2px rgba(32,32,30,.28),
    0 0 20px rgba(255,255,255,.25),
    0 0 140px rgba(196,125,52,.6),0 12px 34px rgba(110,61,30,.25)}

.btn--block{width:100%}

/* CTA pequeno dos cartões */
.btn--pill{
  min-height:40px;
  padding:10px 20px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:600;
  line-height:1.25;
  box-shadow:none;
  background:var(--cream-300);
  color:var(--brown-900);
}
.btn--pill::after{opacity:.1}
.btn--pill::after{transition:opacity .45s ease}
.btn--pill:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(110,61,30,.18)}
.btn--pill-outline{
  background:rgba(255,255,255,.9);
  color:var(--brown-900);
  border:1px solid rgba(194,118,40,.45);
}
.btn--pill-outline::after{display:none}
.btn--pill-outline:hover{
  background:var(--cream-200);
  border-color:var(--orange-500);
  box-shadow:0 8px 22px rgba(110,61,30,.12);
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  min-height:min(698px,88svh);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:var(--white);
  background:var(--brown-700);
}
.hero__element{
  position:absolute;
  left:0;top:0;
  width:212px;height:335px;
  z-index:1;
  pointer-events:none;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-color:#A75D16; /* continua o marrom do fundo em telas muito largas */
  background-image:url("../assets/hero-bg.webp");
  background-size:auto 100%;
  background-position:right center;
  background-repeat:no-repeat;
}
.hero__inner{
  position:relative;
  z-index:2;
  padding-block:clamp(48px,5.929vw,83px);
}
@media (min-width:860px){
  .hero__inner{padding-left:calc(var(--gutter) + 31px)}
}
.hero__logo{
  /* a assinatura nova é larga (1463x431): 180px de largura dá os mesmos ~53px
     de altura do logo antigo, então o herói não muda de posição */
  width:clamp(158px,12.857vw,180px);
  height:auto;
  margin-bottom:clamp(18px,2.214vw,31px);
}
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px,4.0vw,56px);
  line-height:1.05;
  max-width:560px;
  margin-top:clamp(10px,0.929vw,13px);
}
.hero__lead{
  max-width:412px;
  margin-top:clamp(14px,1.286vw,18px);
  font-size:clamp(17px,1.571vw,22px);
  line-height:1.41;
}
.hero .btn{margin-top:clamp(26px,3.143vw,44px)}
.hero__checks{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px,1.143vw,16px);
  margin-top:clamp(14px,1.357vw,19px);
}
.hero__checks li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:clamp(14px,1.143vw,16px);
  line-height:1.4;
  color:var(--cream-300);
}
.ico-check{width:14px;height:10px;flex:none;stroke:var(--sand)}

/* ---------- 6. A proposta ---------- */
.section--proposta{
  padding-block:clamp(64px,9.0vw,126px);
  /* brilho creme atrás dos cartões que volta ao branco antes do fim da seção:
     sem isso o creme terminava exatamente onde começa "ATENDIMENTOS" */
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 66%,#F9F1E9 73%,#F6EBE0 79%,#FBF6F0 86%,#ffffff 93%);
}
.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:clamp(26px,2.857vw,40px);
}
/* linha que liga os três passos (Figma: Line 821, gradiente laranja -> marrom) */
.steps::before{
  content:"";
  position:absolute;
  left:7px;right:0;top:50%;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg,#c27628 0%,#c78139 32%,#ad6725 34%,#834b21 51%,#ae651e 66%,#6e3d1e 68%);
}
.step{
  position:relative;
  min-height:262px;
  padding:63px 37px 44px;
  border-radius:var(--radius-card);
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
}
.step::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--noise);background-size:220px;
  opacity:.12;mix-blend-mode:overlay;
}
/* texturas vetoriais exportadas do Figma (3% de opacidade) */
.step .step__deco{
  position:absolute;
  z-index:0;
  max-width:none;
  pointer-events:none;
}
.step--1 .step__deco{left:45px;top:-5px;width:297px;height:260px}
.step--2 .step__deco{left:42px;top:-13px;width:262px;height:266px}
.step--3 .step__deco{left:9px;top:-7px;width:252px;height:252px}
.step::after{
  content:"";position:absolute;inset:13px;z-index:1;
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius-inner);
  pointer-events:none;
}
.step__title,.step__text{position:relative;z-index:2}
.step--1{background:var(--orange-500)}
.step--2{background:var(--brown-700)}
.step--3{
  background:var(--brown-900);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.14),
    inset 0 -4px 2px rgba(32,32,30,.6),
    0 0 30px rgba(255,255,255,.06),
    0 24px 70px rgba(110,61,30,.35);
}
.step__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,2.514vw,35.2px);
  line-height:1.53;
}
.step__text{
  max-width:266px;
  margin-top:4px;
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.44;
}

/* ---------- 7. Atendimentos ---------- */
.section--atendimentos{padding-top:0;padding-bottom:clamp(56px,5.071vw,71px)}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:23px;
  margin-top:clamp(30px,3.357vw,47px);
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:547px;
  padding:47px 36px 34px;
  border-radius:var(--radius-card);
  background:var(--white);
  border:1px solid rgba(194,118,40,.28);
  isolation:isolate;
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background-image:var(--noise);background-size:200px;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
}
.card--filled{padding-top:58px}
/* No Figma o cartão 1 aparece laranja porque está com o mouse em cima.
   Todos os cartões são brancos; o efeito laranja aparece no hover/focus,
   com transição longa para o estado de destaque não parecer abrupto. */
.card__badge,.card__title,.card__text,.bullets li,.card__label,
.card__note,.card__price,.card__price-unit,.pills li,.card__cta .btn{
  transition:
    color .4s cubic-bezier(.22,.61,.36,1),
    background-color .45s ease,
    border-color .45s ease,
    opacity .45s ease,
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease,
    font-size .45s cubic-bezier(.22,.61,.36,1);
}
.card:hover,.card:focus-within{
  background:var(--orange-500);
  border-color:transparent;
  color:var(--white);
  overflow:visible;
  box-shadow:-34px 16px 0 -24px var(--brown-900),0 24px 60px rgba(110,61,30,.22);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:var(--radius-card);
  background-image:var(--noise);background-size:220px;
  opacity:0;mix-blend-mode:overlay;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
}
.card:hover::before,.card:focus-within::before{opacity:.14}
.card>*{position:relative;z-index:1}

.card__badge{
  align-self:flex-start;
  padding:5px 9px 4px;
  border-radius:16px;
  background:rgba(198,125,51,.3);
  color:var(--orange-300);
  font-size:clamp(11px,0.921vw,12.9px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.085em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.card:hover .card__badge,.card:focus-within .card__badge{
  background:rgba(255,255,255,.2);
  color:var(--white);
}
.card__title{
  margin-right:-12px; /* o título do Figma usa 323px, 10px além da área de texto */
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(23px,2.143vw,30px);
  line-height:1.17;
  letter-spacing:-.005em;
  color:var(--ink);
}
.card:hover .card__title,.card:focus-within .card__title{color:var(--white)}
.card__title--lg{font-size:clamp(26px,2.514vw,35.2px);line-height:1.53}
.card__text{
  max-width:313px;
  margin-top:2px;
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.44;
  color:var(--ink);
}
.card:hover .card__text,.card:focus-within .card__text{color:var(--white)}

.card__label{
  margin-top:20px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange-500);
}

.bullets{margin-top:6px}
.bullets li{
  position:relative;
  padding-left:17px;
  font-size:clamp(13px,1.0vw,14px);
  line-height:2.57;
  color:var(--ink);
}
.card:hover .bullets li,.card:focus-within .bullets li{color:var(--white)}
.bullets li::before{
  content:"";
  position:absolute;left:0;top:1.25em;
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  opacity:.95;
}

.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pills li{
  transition:color .45s ease,border-color .45s ease,background-color .45s ease;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:1px solid var(--orange-500);
  border-radius:20px;
  font-size:clamp(12px,1.0vw,14px);
  line-height:1.35;
  color:var(--ink);
}
.pill__ico{width:16px;height:16px;flex:none;opacity:.9}

.card__price{
  margin-top:auto;
  padding-top:16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,2.143vw,30px);
  line-height:1.4;
  color:var(--brown-900);
}
.card--filled .card__price{padding-top:0}
.card:hover .card__price,.card:focus-within .card__price{
  color:var(--cream-100);
  font-size:clamp(34px,3.507vw,49.1px);
  line-height:1.53;
}
/* no estado de destaque os demais elementos também ficam claros */
.card:hover .card__label,.card:focus-within .card__label{color:var(--white)}
.card:hover .card__note,.card:focus-within .card__note{color:rgba(255,255,255,.9)}
.card:hover .card__price-unit,.card:focus-within .card__price-unit{color:var(--white)}
.card:hover .pills li,.card:focus-within .pills li{
  border-color:rgba(255,255,255,.7);
  color:var(--white);
}
.card__deco{transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .card__deco,.card:focus-within .card__deco{opacity:.75}
.card__price--xl{letter-spacing:-.01em}
.card__price-unit{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(14px,1.286vw,18px);
  letter-spacing:.02em;
  color:var(--ink);
  margin-left:4px;
}
.card__note{
  margin-top:2px;
  font-size:clamp(11.5px,0.857vw,12px);
  line-height:1.65;
  color:var(--ink);
}
.card__cta{margin-top:14px}
/* No Figma o botão do cartão é branco sobre branco no estado normal:
   ele só ganha forma quando o cartão entra no estado de destaque. */
.card:not(:hover):not(:focus-within) .card__cta .btn--pill{
  background:transparent;
  border-color:transparent;
  color:var(--white);
  box-shadow:none;
  opacity:0;
  transform:translateY(6px);
}
.card:not(:hover):not(:focus-within) .card__cta .btn--pill::after{opacity:0}
/* Em telas sem hover (toque) o botão precisa continuar visível */
@media (hover:none){
  .card:not(:hover):not(:focus-within) .card__cta .btn--pill{
    background:var(--cream-300);
    color:var(--brown-900);
    opacity:1;
    transform:none;
  }
  .card:not(:hover):not(:focus-within) .card__cta .btn--pill::after{opacity:1}
}
/* textura vetorial do Figma ("COISA RADIOLOGA", branco a 10%):
   fica invisível no cartão branco e aparece no estado de destaque */
.card__deco{
  position:absolute;
  left:59px;top:20px;
  width:276px;height:294px;
  z-index:0;
  opacity:.6;
  pointer-events:none;
}
.form-card__deco{
  position:absolute;
  left:58px;top:70px;
  width:276px;height:225px;
  z-index:0;
  opacity:.6;
  pointer-events:none;
}
.form-card form{position:relative;z-index:1}
.form-card .btn--block{
  display:flex;
  width:min(100%,297px);
  margin:28px auto 0;
}

/* ---------- 8. Guia rápido (seção escura) ---------- */
.section--dark{
  position:relative;
  background:var(--ink);
  color:var(--white);
  padding-block:clamp(56px,9.143vw,128px) clamp(56px,9.286vw,130px);
  overflow:hidden;
}
.section--dark::before{
  content:"";
  position:absolute;
  right:0;top:0;
  width:min(518px,60%);height:100%;
  background:url("../assets/deco-radionic.webp") right center/cover no-repeat;
  opacity:.12;
  mix-blend-mode:screen;
  pointer-events:none;
}
.guia__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,445px);
  gap:clamp(40px,10.714vw,150px);
  align-items:start;
}
.guia__text{
  max-width:375px;
  margin-top:18px;
  font-size:clamp(16px,1.429vw,20px);
  line-height:1.4;
}
.guia__col .btn{margin-top:clamp(24px,2.5vw,35px)}
.guia__list li+li{margin-top:20px;padding-top:22px;border-top:1px solid rgba(194,118,40,.55)}
.guia__list li{transition:border-color .45s cubic-bezier(.22,.61,.36,1)}
.guia__list li:hover,.guia__list li:focus-within{border-top-color:var(--orange-500)}
.guia__list a{
  display:flex;
  gap:14px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
.guia__list a:hover{transform:translateX(4px)}
.guia__num{
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.45;
  color:var(--orange-500);
}
.guia__item{display:block}
.guia__item strong{
  display:block;
  font-weight:300;
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.45;
  color:var(--white);
  transition:color .45s cubic-bezier(.22,.61,.36,1);
}
/* no Figma o item 1 aparece laranja por estar com o mouse em cima */
.guia__list li:hover .guia__item strong,
.guia__list li:focus-within .guia__item strong{color:var(--orange-500)}
.guia__item em{
  display:block;
  margin-top:2px;
  font-style:normal;
  font-size:clamp(13px,1.0vw,14px);
  line-height:1.6;
  color:var(--white);
}

/* ---------- 9. Sobre Wesley ---------- */
.section--sobre{
  position:relative;
  padding-block:clamp(64px,8.143vw,114px) clamp(70px,9.643vw,135px);
  overflow:hidden;
}
.sobre__deco{
  position:absolute;
  left:-302px;top:213px;
  width:965px;height:auto;
  opacity:.5;
  pointer-events:none;
}
/* textura vetorial do Figma (Subtract 262x262, 3% de opacidade) */
.sobre__subtract{
  position:absolute;
  right:-116px;top:44px;
  width:262px;height:262px;
  pointer-events:none;
}
.sobre__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,487px) minmax(0,1fr);
  gap:clamp(34px,3.214vw,45px);
  align-items:start;
}
.sobre__media img{
  width:100%;
  border-radius:36px;
  object-fit:cover;
}
.sobre__content{max-width:596px;padding-top:21px}
.sobre__quote{
  margin-top:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.143vw,44px);
  line-height:1.05;
  letter-spacing:-.005em;
  max-width:514px;
}
.sobre__quote .hl{color:var(--orange-500)}
.sobre__highlight{
  max-width:548px;
  margin-top:22px;
  padding:24px 27px;
  background:var(--cream-300);
  border-radius:20px;
  font-weight:500;
  font-size:clamp(17px,1.429vw,20px);
  line-height:1.6;
}
.sobre__text{
  max-width:521px;
  margin-top:22px;
  font-size:clamp(16px,1.286vw,18px);
  line-height:1.75;
  color:var(--ink-soft);
}
.sobre__eyebrow-sm{
  margin-top:21px;
  font-size:clamp(14px,1.393vw,19.5px);
  letter-spacing:.1em;
  color:var(--orange-400);
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:7px;
}
.tags li{
  position:relative;
  padding-left:12px;
  font-size:clamp(14px,1.107vw,15.5px);
  line-height:1.3;
  color:var(--ink-soft);
}
.tags li::before{
  content:"";
  position:absolute;left:0;top:.45em;
  width:8px;height:8px;border-radius:50%;
  background:var(--orange-400);
}

/* ---------- 9b. WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;
  right:clamp(16px,2.143vw,30px);
  bottom:clamp(16px,2.143vw,30px);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 12px 30px rgba(32,32,30,.28);
  animation:waIn .45s ease-out .5s backwards;
  transition:transform .25s ease,box-shadow .25s ease;
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 36px rgba(32,32,30,.34)}
.wa-float:focus-visible{outline:3px solid rgba(37,211,102,.45);outline-offset:3px}
@keyframes waIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wa-float{animation:none;transition:none}
}
@media (max-width:520px){
  .wa-float{width:52px;height:52px}
  .wa-float svg{width:28px;height:28px}
}

/* ---------- 10. Contato / formulário ---------- */
.section--contato{
  position:relative;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  background:linear-gradient(var(--white) 0 clamp(120px,17.714vw,248px),var(--orange-500) clamp(120px,17.714vw,248px));
}
/* elemento vetorial do Figma acima da caixa de contato */
.contato__deco{
  position:absolute;
  left:-62px;top:-153px;
  width:288px;height:333px;
  z-index:0;
  pointer-events:none;
}
.contact-box{
  position:relative;
  z-index:1;
  overflow:hidden; /* evita colapso de margem com a caixa interna */
  background:var(--cream-300);
  border-radius:var(--radius-card);
}
.contact-box__inner{
  position:relative;
  margin:13px;
  padding:17px clamp(24px,7.143vw,100px) 40px clamp(24px,8.429vw,118px);
  border:1px solid var(--orange-500);
  border-radius:var(--radius-inner);
  display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,464px);
  gap:clamp(34px,6.571vw,92px);
  align-items:start;
}
.contact-box__col:first-child{padding-top:clamp(24px,5.286vw,74px)}
/* Painéis empilhados atrás do cartão do formulário (Figma: grupos "verde" e "laranja") */
.contact-box__col--form{
  position:relative;
  display:flex;
  justify-content:flex-start;
}
.contact-box__col--form::before,
.contact-box__col--form::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.contact-box__col--form::before{
  left:0;top:15px;
  width:400px;height:366px;
  border-radius:31px;
  background:var(--brown-700);
}
.contact-box__col--form::after{
  left:127px;top:18px;
  width:337px;height:388px;
  border-radius:23px;
  background:var(--brown-900);
}
.contact-box__text{
  max-width:340px;
  margin-top:22px;
  font-size:clamp(16px,1.429vw,20px);
  line-height:1.6;
}
.contact-box__text strong{font-weight:500}

.form-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:410px;
  margin-left:23px;
  padding:46px 34px 28px;
  background-color:var(--orange-500);
  border-radius:var(--radius-card);
  isolation:isolate;
}
/* contorno interno claro */
.form-card::after{
  content:"";
  position:absolute;inset:21px 15px 18px;z-index:2;
  border:2px solid rgba(255,255,255,.72);
  border-radius:21px;
  pointer-events:none;
}
.field+.field{margin-top:22px}
.field+.field--area{margin-top:26px}
.field label{
  display:block;
  margin-left:6px;
  margin-bottom:8px;
  font-size:clamp(16px,1.429vw,20px);
  font-weight:400;
  line-height:1.2;
  color:var(--white);
}
.field input,.field textarea,.field select{
  width:100%;
  min-height:45px;
  background:var(--white);
  border:0;
  border-radius:8px;
  padding:13px 14px;
  font-size:14px;
  font-weight:300;
  color:#0F081B;
  line-height:1.3;
}
.field textarea{display:block;resize:vertical;height:146px;min-height:146px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:#8C8590;opacity:1}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px}
.field select:invalid{color:#8C8590}
.select-wrap{position:relative}
.select-wrap__arrow{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:9px;height:5px;pointer-events:none;
}
.form-card .btn{margin-top:28px}
.form-card__note{
  text-align:center;
  font-size:12px;
  line-height:1.5;
  margin-top:12px;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  color:rgba(255,255,255,.82);
}
.form-card__error{
  margin-top:14px;
  font-size:13px;
  line-height:1.4;
  color:#FFE9C9;
}

/* ---------- 11. Footer ---------- */
.footer{
  background:var(--orange-500);
  color:var(--cream-300);
  padding-block:clamp(48px,5.071vw,71px) clamp(36px,3.643vw,51px);
}
.footer__inner{display:flex;flex-direction:column;align-items:center}
.footer__logo{
  width:clamp(186px,16.429vw,230px);
  height:auto;
}
.footer__social{
  display:flex;
  gap:16px;
  margin-top:clamp(28px,2.929vw,41px);
}
.footer__social a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  color:var(--cream-300);
  transition:background-color .25s ease,transform .25s ease;
}
.footer__social a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.footer__social svg{width:28px;height:28px}
.footer__legal{
  width:100%;
  margin-top:clamp(30px,3.929vw,55px);
  padding-top:clamp(20px,1.929vw,27px);
  border-top:1px solid var(--cream-300);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:clamp(14px,1.143vw,16px);
  font-weight:500;
  line-height:1.25;
}
.footer__legal p:last-child{max-width:395px;text-align:right}

/* ---------- 12. Animações ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.guia__list a,.footer__social a{transition:none}
}

/* ---------- 13. Responsivo ---------- */
@media (max-width:1100px){
  .steps,.cards{grid-template-columns:repeat(2,1fr)}
  .step,.card{min-height:0}
  .card__price{margin-top:26px}
  .guia__inner{grid-template-columns:1fr;gap:44px}
  .section--dark::before{width:340px;opacity:.12}
  .sobre__inner{grid-template-columns:1fr;gap:36px}
  .sobre__media{max-width:520px}
  .sobre__quote{max-width:20ch}
  .contact-box__inner{grid-template-columns:1fr;gap:36px}
  .contact-box__col--form{justify-content:flex-start}
  .contact-box__col--form::before,
  .contact-box__col--form::after{display:none}
  .form-card{max-width:520px;margin-left:0}
  .form-card .btn--block{width:100%}
  .sobre__deco{left:-380px;opacity:.35}
}

@media (max-width:1100px){
  /* em telas menores a foto passa a preencher o bloco: reforça o contraste do texto */
  .hero__bg{background-size:cover;background-position:70% center}
  .hero::after{
    content:"";
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(112deg,rgba(110,61,30,.88) 0%,rgba(110,61,30,.72) 38%,rgba(110,61,30,.34) 68%,rgba(110,61,30,.1) 100%);
  }
  .hero .eyebrow{color:#EFD9B8}
}

@media (max-width:760px){
  .steps,.cards{grid-template-columns:1fr;gap:20px}
  .step{padding:38px 26px 34px}
  .card{padding:34px 24px 30px}
  .card--filled::after{left:-14px;right:14px;top:14px;bottom:-16px}
  .hero{min-height:auto}
  .hero__bg{background-position:70% center}
  .hero__inner{padding-block:56px 48px}
  .hero__title,.sobre__quote{max-width:100%}
  .section--dark::before{width:240px;opacity:.1}
  .sobre__deco{display:none}
  .footer__legal{flex-direction:column;gap:14px}
  .footer__legal p:last-child{text-align:left;max-width:100%}
  .card__deco{width:220px;height:234px;left:8px;top:10px}
}

@media (max-width:420px){
  .hero__checks{gap:10px}
  .btn{padding:15px 22px}
}

/* ---------- 14. Impressão ---------- */
@media print{
  .hero__bg,.card__deco,.sobre__deco,.section--dark::before{display:none}
  .reveal{opacity:1;transform:none}
}

/* O cartão também é um elemento .reveal (animação de entrada). Como `transition`
   é uma propriedade única, esta regra fica no fim do arquivo e soma as duas coisas:
   a entrada da seção e a suavidade do estado de destaque no hover. */
.card{
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1),
    background-color .5s cubic-bezier(.22,.61,.36,1),
    border-color .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    color .4s ease;
}