:root{
  --black:#0a0a0a;
  --cream:#FEFBEB;
  --cream-dim:#F5F0DA;
  --yellow:#FFD732;
  --yellow-dim:#E6C12B;
  --gray:#6b6b63;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Rethink Sans', -apple-system, sans-serif;
  background:var(--cream);
  color:var(--black);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,.display{
  font-family:'Rethink Sans', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:-0.01em;
  overflow-wrap:break-word;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--black);
  font-weight:800; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; padding:6px 14px; border-radius:999px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:10px; font-weight:800;
  font-size:15px; text-transform:uppercase; letter-spacing:0.03em;
  cursor:pointer; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
  font-family:'Rethink Sans', sans-serif;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--yellow); color:var(--black);}
.btn-primary:hover{box-shadow:0 8px 24px rgba(255,215,50,0.45);}
.btn-dark{background:var(--black); color:var(--cream);}
.btn-dark:hover{box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.btn-outline{background:transparent; color:var(--black); border-color:var(--black);}
.btn-outline.on-dark{color:var(--cream); border-color:var(--cream);}
.btn-sm{padding:11px 18px; font-size:13px;}

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(254,251,235,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1180px; margin:0 auto;
}
.nav-logo img{height:34px;}
.nav-links{display:flex; gap:32px; font-weight:600; font-size:14px;}
.nav-links a{opacity:0.75; transition:opacity .15s;}
.nav-links a:hover{opacity:1;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-cta .btn{padding:11px 20px; font-size:13px;}
.nav-toggle{display:none; background:none; border:none; font-size:26px; cursor:pointer;}
.nav-wa-mobile{display:none;}

/* HERO */
.hero{
  position:relative; overflow:hidden; min-height:94vh;
  display:flex; align-items:flex-end; padding-bottom:76px;
  background:#000;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('../assets/hero-bg.jpg');
  background-repeat:no-repeat; background-color:#000;
  /* A logo tem fundo transparente que vira preto solido (igual o fundo do
     hero), entao o unico conteudo visivel e o simbolo em si — por isso usa
     um tamanho controlado (em vez de "cover") pra nunca cortar as letras,
     em nenhuma largura de tela. */
  background-size:auto min(70vh, 620px);
  background-position:72% 46%;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(185deg, rgba(4,4,3,0.15) 0%, rgba(4,4,3,0.3) 45%, rgba(4,4,3,0.95) 100%),
    linear-gradient(100deg, rgba(4,4,3,0.94) 0%, rgba(4,4,3,0.78) 30%, rgba(4,4,3,0.28) 58%, rgba(4,4,3,0.05) 78%);
}
.hero .container{position:relative; z-index:2;}
@media (min-width:1180px){
  /* Em telas bem largas, o container padrao (max-width:1180px, centralizado)
     deixa uma faixa vazia enorme do lado esquerdo do hero. Aqui o container
     do hero usa a largura toda e o texto encosta bem mais na borda esquerda,
     crescendo aos poucos conforme a tela aumenta (sem virar bagunca em
     telas ultra largas, por isso o teto de 160px). */
  .hero .container{
    max-width:none; width:100%; margin:0;
    padding-left:clamp(24px, calc(24px + (100vw - 1180px) * 0.15), 160px);
    padding-right:24px;
  }
}
.hero-eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:20px; font-weight:700;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#d8d6c4;
}
.hero h1{font-size:clamp(32px, 5.2vw, 58px); max-width:600px; color:var(--cream);}
.hero h1 .accent{color:var(--yellow);}
.hero p.lead{font-size:17.5px; max-width:480px; margin:22px 0 32px; color:#e4e2d2;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats{
  display:flex; gap:48px; margin-top:60px; flex-wrap:wrap;
  border-top:1px solid rgba(254,251,235,0.22); padding-top:26px;
}
.hero-stat b{display:block; font-family:'Rethink Sans', sans-serif; font-weight:800; font-size:28px; color:var(--cream);}
.hero-stat span{font-size:13px; color:#b9b7a4; font-weight:600;}
@media (max-width:560px){
  .hero{min-height:88vh; padding-bottom:48px;}
}

/* EQUIPE */
#equipe.team-section{padding-bottom:0;}
.team-photo-banner{
  width:100vw; margin-left:calc(50% - 50vw); margin-top:18px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:#000;
}
.team-card{display:flex; flex-direction:column; background:#000; position:relative;}
/* Foto e texto agora sao blocos separados (foto em cima, texto embaixo
   num fundo solido) — assim o texto nunca fica em cima do rosto, nao
   importa o tamanho da tela. */
.team-photo{
  width:100%; aspect-ratio:6/5;
  background-size:cover; background-repeat:no-repeat; background-color:#000;
}
/* Posicoes calculadas a partir da posicao real do rosto em cada foto
   (medida em pixels), com folga de seguranca, pra nunca cortar em
   nenhuma largura de tela. */
.team-card:nth-child(1) .team-photo{background-position:15.6% 50%;}
.team-card:nth-child(2) .team-photo{background-position:48.7% 50%;}
/* No modelo web, o texto fica maior e por cima da propria foto (autorizado
   pelo cliente), com um degrade escuro embaixo pra garantir leitura sem
   cobrir o rosto — o degrade so escurece de fato na faixa abaixo do queixo. */
.team-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 30px 26px; color:var(--cream);
  background:linear-gradient(180deg, rgba(4,4,3,0) 0%, rgba(4,4,3,0.55) 28%, rgba(4,4,3,0.9) 60%, rgba(4,4,3,0.98) 100%);
}
.team-role{
  display:inline-block; font-weight:800; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:6px;
}
.team-info h3{font-size:27px; text-transform:none; font-family:'Rethink Sans', sans-serif; font-weight:800; margin-bottom:6px;}
.team-info p{font-size:14.5px; color:#d8d6c4; max-width:380px; line-height:1.4;}
.team-insta{
  display:inline-block; margin-top:10px; font-weight:800; font-size:13px;
  color:var(--yellow); text-decoration:none;
}
.team-insta:hover{color:var(--cream); text-decoration:underline;}
@media (max-width:900px){
  .team-photo{aspect-ratio:1/1;}
  .team-card:nth-child(1) .team-photo{background-position:21.3% 50%;}
  .team-card:nth-child(2) .team-photo{background-position:57.2% 50%;}
  /* Abaixo do modelo web, volta pro layout empilhado (foto em cima, texto
     embaixo num bloco solido) — o overlay sobre a foto so vale pra tela
     grande, onde sobra espaco de sobra pra nao esbarrar no rosto. */
  .team-card{position:static;}
  .team-info{
    position:static; padding:22px 24px 26px;
    background:#000;
  }
  .team-role{font-size:12px; margin-bottom:8px;}
  .team-info h3{font-size:22px; margin-bottom:8px;}
  .team-info p{font-size:14px; max-width:360px;}
  .team-insta{font-size:13px; margin-top:8px;}
}
@media (max-width:480px){
  .team-photo{aspect-ratio:9/10;}
  .team-card:nth-child(1) .team-photo{background-position:22.8% 50%;}
  .team-card:nth-child(2) .team-photo{background-position:59.3% 50%;}
}

/* SECTION HEADINGS */
.section{padding:96px 0;}
.section-dark{background:var(--black); color:var(--cream);}
.section-tag{
  display:inline-block; font-weight:800; font-size:13px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--yellow-dim); margin-bottom:14px;
}
.section-dark .section-tag{color:var(--yellow);}
.section h2{font-size:clamp(32px, 5vw, 54px); max-width:680px; margin-bottom:18px;}
.section .sub{font-size:17px; max-width:560px; color:var(--gray);}
/* So aparece no mobile, em cima dos carrosseis de Planos e Depoimentos —
   no computador esses viram grade normal, sem nada pra deslizar. */
.swipe-hint{display:none;}
.section-dark .sub{color:#c9c7b8;}

/* COMO FUNCIONA */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px;}
.step{border:1px solid rgba(254,251,235,0.15); border-radius:var(--radius); padding:28px 22px; transition:border-color .2s;}
.step:hover{border-color:var(--yellow);}
.step .num{font-family:'Rethink Sans', sans-serif; font-weight:800; font-size:44px; color:var(--yellow); margin-bottom:18px; display:block;}
.step h3{font-size:17px; text-transform:none; font-family:'Rethink Sans', sans-serif; font-weight:800; margin-bottom:10px;}
.step p{font-size:14px; color:#c9c7b8;}

/* SERVICOS */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; align-items:stretch;}
.plan-card{
  background:#fff; border:2px solid rgba(0,0,0,0.08); border-radius:var(--radius);
  padding:34px 28px; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;
}
.plan-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.08);}
.plan-card.featured{background:var(--black); color:var(--cream); border-color:var(--black); position:relative;}
.plan-badge{
  position:absolute; top:-14px; left:28px;
  background:var(--yellow); color:var(--black); font-size:11px; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
}
.plan-card h3{font-size:22px; text-transform:none; font-family:'Rethink Sans', sans-serif; font-weight:800; margin-bottom:10px;}
.plan-card .plan-desc{font-size:14px; color:var(--gray); margin-bottom:22px;}
.plan-card.featured .plan-desc{color:#c9c7b8;}
.plan-card .plan-price-tag{
  display:flex; flex-direction:column; gap:2px; margin-bottom:20px;
  font-size:15px; font-weight:800; color:var(--yellow-dim); text-transform:none;
}
.plan-card.featured .plan-price-tag{color:var(--yellow);}
.plan-price-tag strong{font-family:'Rethink Sans', sans-serif; font-weight:800; font-size:21px;}
.price-tag-note{font-size:11.5px; font-weight:600; color:var(--gray);}
.plan-card.featured .price-tag-note{color:#c9c7b8;}
.plan-card ul{list-style:none; margin-bottom:28px; flex:1;}
.plan-card ul li{font-size:14px; padding:9px 0; border-top:1px solid rgba(0,0,0,0.08); display:flex; gap:10px; align-items:flex-start;}
.plan-card.featured ul li{border-top:1px solid rgba(254,251,235,0.12);}
.plan-card ul li::before{content:"✓"; color:var(--yellow-dim); font-weight:800; flex-shrink:0;}
.plan-card.featured ul li::before{color:var(--yellow);}
.plan-card .btn{width:100%;}

/* RESULTADOS */
.results-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
.result-card{
  aspect-ratio:1/1; border-radius:var(--radius); border:2px dashed rgba(254,251,235,0.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:24px; gap:10px; background:rgba(254,251,235,0.03);
}
.result-card.result-photo{padding:0; border-style:solid; border-color:rgba(254,251,235,0.15); overflow:hidden;}
.result-card.result-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.result-card .ph-icon{font-size:34px;}
.result-card .ph-title{font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.03em;}
.result-card .ph-note{font-size:12.5px; color:#a9a798; max-width:220px;}

/* DEPOIMENTOS */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;}
.testi-card{background:#fff; border-radius:var(--radius); padding:30px 26px; border:2px solid rgba(0,0,0,0.08);}
.testi-quote{font-size:28px; color:var(--yellow-dim); font-family:'Rethink Sans', sans-serif; font-weight:800; line-height:1;}
.testi-text{font-size:15px; margin:14px 0 20px; color:#2c2c26; font-style:italic;}
.testi-author{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:42px; height:42px; border-radius:50%; background:var(--cream-dim); border:2px dashed rgba(0,0,0,0.2); flex-shrink:0;}
.testi-name{font-weight:800; font-size:14px;}
.testi-name a{color:var(--black); text-decoration:none;}
.testi-name a:hover{color:var(--yellow-dim); text-decoration:underline;}
.testi-role{font-size:12.5px; color:var(--gray);}

/* CUPOM */
.coupon-box{
  background:rgba(254,251,235,0.06); border:1px solid rgba(254,251,235,0.18); border-radius:var(--radius);
  padding:20px 24px; margin:36px 0 8px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.coupon-box input{
  flex:1; min-width:180px; background:transparent; border:1px solid rgba(254,251,235,0.3); border-radius:8px;
  padding:12px 14px; color:var(--cream); font-family:'Rethink Sans', sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.04em;
}
.coupon-box input::placeholder{color:#8a8878; text-transform:none;}
.coupon-msg{width:100%; font-size:13.5px; font-weight:700; margin-top:4px;}
.coupon-msg.ok{color:var(--yellow);}
.coupon-msg.err{color:#ff8b7a;}

/* PRICING TABLES */
.pricing-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:44px;}
.pricing-card{border:1px solid rgba(254,251,235,0.16); border-radius:var(--radius); padding:30px 28px;}
.pricing-card.featured{border-color:var(--yellow); background:rgba(255,215,50,0.04);}
.pricing-card h3{font-size:20px; text-transform:none; font-family:'Rethink Sans', sans-serif; font-weight:800; margin-bottom:4px;}
.pricing-card .pricing-sub{font-size:13px; color:#a9a798; margin-bottom:22px;}
.price-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 0; border-top:1px solid rgba(254,251,235,0.1);
}
.price-row:first-of-type{border-top:none;}
.price-row .cadence{font-weight:700; font-size:14.5px;}
.price-row .price-wrap{text-align:right;}
.price-row .price-original{font-size:13px; color:#8a8878; text-decoration:line-through; margin-right:8px;}
.price-row .price-value{font-family:'Rethink Sans', sans-serif; font-weight:800; font-size:19px;}
.price-row .price-value.discounted{color:var(--yellow);}
.price-row .installment{display:block; font-size:11.5px; color:#a9a798; font-weight:500; margin-top:2px;}
.payment-terms{margin-top:22px; padding-top:18px; border-top:1px solid rgba(254,251,235,0.1);}
.payment-terms h4{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--yellow); margin-bottom:8px;}
.payment-terms p{font-size:13.5px; color:#c9c7b8; margin-bottom:4px;}
.pricing-card > .btn{width:100%; margin-top:22px;}
.pricing-card .btn-row{display:flex; gap:12px; margin-top:22px;}
.pricing-card .btn-row .btn{flex:1; width:auto; padding-left:14px; padding-right:14px;}

/* FOOTER */
footer{background:var(--black); color:var(--cream); padding:64px 0 28px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(254,251,235,0.12);
}
.footer-logo img{height:32px; margin-bottom:16px;}
.footer-top p{color:#a9a798; font-size:14.5px; max-width:320px;}
.footer-cta{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.footer-contact{font-size:14px; color:#c9c7b8;}
.footer-contact a{color:var(--yellow); text-decoration:underline; text-underline-offset:2px;}
.footer-contact a:hover{color:var(--cream);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color:#8a8878; flex-wrap:wrap; gap:10px;}

/* FLOATING WHATSAPP */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:60px; height:60px; border-radius:50%; background:var(--yellow);
  display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25); border:3px solid var(--black);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.08);}

@media (max-width:900px){
  /* Hero: o bloco de titulo fica perto do topo (fluxo normal); o botao e
     os numeros ficam grudados na base (margin-top:auto no botao empurra
     ele — e tudo que vem depois — pro final do espaco disponivel). Assim
     o botao nao fica flutuando no meio da secao, em cima da logo. */
  .hero{align-items:stretch;}
  .hero .container{display:flex; flex-direction:column;}
  .hero-actions{margin-top:auto; padding-top:32px;}
  .hero-stats{margin-top:28px;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--cream);
    border-bottom:1px solid rgba(0,0,0,0.08); padding:8px 24px 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; border-top:1px solid rgba(0,0,0,0.06); opacity:1;}
  .nav-toggle{display:block;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .results-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr;}
  /* Planos e Depoimentos: em vez de empilhar em coluna unica (o que fica
     gigante, ja que cada card tem bastante conteudo), viram um carrossel
     horizontal — os cards ficam lado a lado, com uma espiadinha do proximo
     card na borda, e a pessoa desliza o dedo pra ver os outros. */
  .plans, .testi-grid{
    display:flex; grid-template-columns:unset; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-left:-24px; margin-right:-24px;
    padding-left:24px; padding-right:24px; padding-bottom:6px;
  }
  .plans::-webkit-scrollbar, .testi-grid::-webkit-scrollbar{display:none;}
  .plan-card{flex:0 0 82%; scroll-snap-align:start;}
  .testi-card{flex:0 0 85%; scroll-snap-align:start;}
  .swipe-hint{
    display:block; font-size:12px; font-weight:700; color:var(--yellow-dim);
    margin-top:10px;
  }
  .section-dark .swipe-hint{color:var(--yellow);}
  /* overflow-x:auto tambem vira overflow-y:auto por baixo dos panos, o que
     cortava o selo "Melhor custo-beneficio" (ele fica -14px acima do card).
     Trocamos parte da margem por padding-top, dando espaco pro selo. */
  .plans{margin-top:38px; padding-top:18px;}
  .footer-top{flex-direction:column;}
}
@media (max-width:560px){
  .steps{gap:14px;}
  .step{padding:18px 14px;}
  .step .num{font-size:26px; margin-bottom:10px;}
  .step h3{font-size:13.5px; margin-bottom:6px;}
  .step p{font-size:11px; line-height:1.35;}
  .results-grid{grid-template-columns:1fr;}
  .team-info{padding:14px 16px 18px;}
  .team-role{font-size:9.5px; margin-bottom:3px;}
  .team-info h3{font-size:15px; margin-bottom:3px; line-height:1.15;}
  .team-info p{font-size:10.5px; line-height:1.3;}
  .team-insta{font-size:10.5px; margin-top:5px;}
  .hero{padding:48px 0 40px;}
  .hero-eyebrow{margin-bottom:14px;}
  .hero-eyebrow .badge{padding:5px 12px; font-size:10.5px;}
  .hero-eyebrow span:last-child{font-size:11px;}
  .hero h1{font-size:24px; max-width:100%;}
  .hero p.lead{font-size:13.5px; line-height:1.5; margin:12px 0 20px; max-width:100%;}
  .hero-actions{gap:10px;}
  .hero-actions .btn-outline{width:100%;}
  .hero-stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0 10px;
    margin-top:0; padding-top:16px;
  }
  .hero-stat b{font-size:15px;}
  .hero-stat span{font-size:9px; line-height:1.3; display:block;}
  .section{padding:64px 0;}
  .price-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .price-row .price-wrap{text-align:left;}
  .pricing-card .btn-row{flex-direction:column;}
  .plan-card{padding:26px 22px;}
  .plan-card h3{font-size:19px;}
  .testi-card{padding:24px 20px;}
  .coupon-box{padding:14px 16px; margin:22px 0 6px; gap:8px;}
  .coupon-box input{padding:10px 12px; font-size:12px; min-width:140px;}
  .coupon-box .btn-sm{padding:9px 14px; font-size:11px;}
  .coupon-msg{font-size:12px;}
}
@media (max-width:480px){
  .nav-cta-btn{display:none;}
  .nav-wa-mobile{
    display:block; margin-top:6px; padding:12px 0 !important;
    font-weight:800 !important; color:var(--black) !important;
    border-top:1px solid rgba(0,0,0,0.06);
  }
  .steps{gap:10px;}
  .step{padding:14px 12px; border-radius:12px;}
  .step .num{font-size:22px; margin-bottom:8px;}
  .step h3{font-size:12.5px; margin-bottom:5px;}
  .step p{font-size:10.5px; line-height:1.3;}
}