/* ===== FONTES (hospedadas no proprio site, sem depender do Google) ===== */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme: light;
  --noir:#231F20;
  --noir-deep:#191617;
  --gold:#D9B557;
  --gold-soft:#E6CC85;
  --gold-ink:#8C6E22;
  --surface:#FFFFFF;
  --surface-alt:#F4F3F1;
  --ink:#231F20;
  --ink-mid:#5A5351;
  --on-noir:#F6F3EC;
  --on-noir-mid:#B9B2A7;
  --line:rgba(35,31,32,.12);
  --line-gold:rgba(217,181,87,.32);
  --wa:#25D366;
  --wa-hi:#34E27A;
  --wa-ink:#0A2E17;
  --alert:#D9472B;
  --alert-ink:#B33A22;
  --alert-soft:#FF8163;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --pad:clamp(20px,5vw,40px);
  --maxw:1120px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    color-scheme: dark;
    --surface:#1C1A1A;
    --surface-alt:#232020;
    --ink:#F2EEE7;
    --ink-mid:#AFA89E;
    --gold-ink:#E0BE68;
    --alert-ink:#FF8163;
    --line:rgba(242,238,231,.14);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface:#1C1A1A;
  --surface-alt:#232020;
  --ink:#F2EEE7;
  --ink-mid:#AFA89E;
  --gold-ink:#E0BE68;
  --alert-ink:#FF8163;
  --line:rgba(242,238,231,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
figure{margin:0}
h1,h2,h3{font-family:"Fraunces","Georgia",serif;font-weight:500;line-height:1.12;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem)}
h2{font-size:clamp(1.7rem,4.4vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.25}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.band{padding:clamp(56px,9vw,104px) var(--pad)}
.band--noir{background:var(--noir);color:var(--on-noir)}
.band--alt{background:var(--surface-alt)}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap--narrow{max-width:760px}
.lead{color:var(--ink-mid);font-size:clamp(1rem,2.2vw,1.12rem);max-width:60ch}
.band--noir .lead{color:var(--on-noir-mid)}
.stack{display:grid;gap:clamp(18px,3vw,26px)}

/* pill */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-gold);color:var(--gold);
  padding:7px 16px 7px 12px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:block}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--wa);color:var(--wa-ink);
  font:700 1.03rem/1 "Manrope",sans-serif;
  padding:19px 32px;border:0;border-radius:999px;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 8px 24px rgba(37,211,102,.26);
}
.btn:hover{background:var(--wa-hi);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg.wa{width:22px;height:22px;fill:currentColor;flex:0 0 22px}
.btn--ghost{background:transparent;color:var(--gold);border:1px solid var(--line-gold);box-shadow:none}
.btn--ghost:hover{background:rgba(217,181,87,.1)}
.btn--block{width:100%}
.btn-note{font-size:.88rem;color:var(--ink-mid);max-width:42ch}
.band--noir .btn-note{color:var(--on-noir-mid)}

/* ---------- HERO ---------- */
.hero{
  background:var(--noir);color:var(--on-noir);
  padding:calc(28px + env(safe-area-inset-top,0px)) var(--pad) clamp(56px,9vw,96px);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-18%;top:-28%;width:70vw;height:70vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(217,181,87,.13),transparent 62%);pointer-events:none;
}
.hero__bar{max-width:var(--maxw);margin:0 auto clamp(40px,7vw,72px);display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:1}
.hero__logo{height:40px;width:auto}
.hero__inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1;display:grid;gap:clamp(36px,5vw,56px);grid-template-columns:1fr}
.hero__copy{display:grid;gap:22px;justify-items:start;max-width:40ch}
.hero h1{color:#fff}
.hero h1 .thin{color:var(--gold)}
.hero__portrait{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-gold);aspect-ratio:2/3;max-width:400px;width:100%;justify-self:start;
}
/* 2/3 em vez de 4/5: a foto e vertical (9:16) e num quadro mais largo
   o corte comia o topo da cabeca ou a base da sacola. */
.hero__portrait picture{display:contents}
.hero__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(25,22,23,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(217,181,87,.26);border-radius:var(--r-sm);
  padding:14px 16px;font-size:.9rem;color:var(--on-noir-mid);line-height:1.45;
}
.hero__cap b{display:block;color:#fff;font-weight:600;font-size:1rem;margin-bottom:2px}
@media(min-width:900px){
  .hero__inner{grid-template-columns:1.1fr .9fr;align-items:center}
  .hero__portrait{justify-self:end}
}
/* Celular: ordem titulo > foto > descricao > botao, tudo numa tela so.
   display:contents dissolve o .hero__copy para que a foto, que e irma dele,
   possa entrar no meio do texto sem duplicar markup.
   Ate 759px, o mesmo ponto em que existe a barra fixa; acima disso a tela
   ja e larga e a foto em faixa ficava grande demais. */
@media(max-width:759px){
  .hero{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:clamp(20px,5vw,36px)}
  .hero__bar{margin-bottom:clamp(14px,3.6vw,26px)}
  .hero__inner{gap:10px;justify-items:start}
  .hero__copy{display:contents}
  /* o selo repete o logo que esta logo acima e custava ~50px de altura,
     que e o que faltava para o hero caber numa tela de celular sem rolar */
  .hero .pill{display:none}
  .hero h1{order:2;font-size:clamp(1.85rem,7.4vw,2.4rem)}
  .hero__portrait{order:3;aspect-ratio:16/12.6;max-width:none;width:100%}
  .hero .lead{order:4}
  .hero__copy .btn{order:5}
  .hero .btn-note{order:6}
  /* a foto e 840x1493: numa faixa horizontal so cabe o rosto.
     Com a faixa mais alta (16/12.6), 9% deixa o rosto a 45% da altura.
     A versao katiane-mobile.jpg ja vem recortada nessa mesma proporcao,
     entao aqui o object-position so vale se a foto for trocada depois. */
  .hero__portrait img{object-position:center 9%}
  .hero__cap{left:10px;right:10px;bottom:10px;padding:8px 12px;font-size:.84rem;line-height:1.3}
  .hero__cap b{display:inline;font-size:.84rem;margin-right:5px}
  .hero__cap-extra{display:none}
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(16,14,14,.72);backdrop-filter:blur(5px);
}
.modal.open{display:flex}
.modal__box{
  background:var(--surface);color:var(--ink);border-radius:var(--r-lg);
  max-width:460px;width:100%;padding:clamp(26px,5vw,38px);position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.4);max-height:90vh;overflow:auto;
}
.modal__box h3{font-size:clamp(1.4rem,4vw,1.75rem);margin-bottom:10px}
.modal__box > p{color:var(--ink-mid);font-size:.99rem}
.modal__list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:12px}
.modal__list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;font-weight:500}
.modal__list svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--gold-ink);fill:none;stroke-width:1.8;margin-top:3px}
.modal__list li.no{color:var(--alert-ink);font-weight:700}
.modal__list li.no svg{stroke:var(--alert-ink)}
.modal__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-mid);
  font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-content:center;
}
.modal__close:hover{background:var(--surface-alt)}
.modal__fine{font-size:.84rem;color:var(--ink-mid);text-align:center;margin-top:14px}

/* aviso consignado */
.warn{
  display:flex;gap:14px;align-items:flex-start;
  border:1.5px solid var(--alert);border-radius:var(--r-md);
  padding:20px 22px;margin-top:18px;background:rgba(217,71,43,.09);
}
.warn svg{flex:0 0 22px;width:22px;height:22px;stroke:var(--alert-ink);fill:none;stroke-width:1.7;margin-top:2px}
.warn b{display:block;margin-bottom:3px;color:var(--alert-ink);font-size:1.05rem}
.warn p{font-size:.95rem;color:var(--ink-mid)}
.band--noir .warn{background:rgba(217,71,43,.16);border-color:var(--alert-soft)}
.band--noir .warn svg{stroke:var(--alert-soft)}
.band--noir .warn p{color:var(--on-noir-mid)}
.band--noir .warn b{color:var(--alert-soft)}

/* ---------- feature row ---------- */
.feats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.feat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;display:grid;gap:12px;align-content:start;
}
.band--alt .feat{background:var(--surface)}
.feat svg{width:26px;height:26px;stroke:var(--gold-ink);fill:none;stroke-width:1.5}
.feat p{font-weight:600;font-size:1rem;line-height:1.35}

/* ---------- Katiane ---------- */
.ceo{
  margin-top:clamp(32px,5vw,48px);display:grid;gap:26px;align-items:center;
  background:var(--surface-alt);border-radius:var(--r-lg);padding:clamp(24px,4vw,38px);
}
.band--alt .ceo{background:var(--surface)}
@media(min-width:760px){.ceo{grid-template-columns:230px 1fr}}
/* height:auto e obrigatorio: os atributos width/height do <img> viram
   regra de CSS e, sem isso, anulam o aspect-ratio abaixo. */
.ceo__photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md)}
@media(max-width:759px){.ceo__photo{max-width:260px}}
.ceo__quote{font-family:"Fraunces",serif;font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.4;margin-bottom:14px}
.ceo__name{font-size:.95rem;color:var(--ink-mid)}
.ceo__name b{color:var(--ink);font-weight:600}

/* ---------- product lines ---------- */
.lines{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.line{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:grid;align-content:start;
}
.line__body{padding:24px 24px 28px;display:grid;gap:10px}
.line__body p{color:var(--ink-mid);font-size:.97rem}
.line img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-bottom:1px solid var(--line)}

/* ---------- math ---------- */
.math{display:grid;gap:12px;grid-template-columns:1fr;margin-top:clamp(26px,4vw,38px)}
@media(min-width:760px){.math{grid-template-columns:repeat(3,1fr);gap:14px}}
.mcard{
  border:1px solid var(--line-gold);border-radius:var(--r-md);padding:26px 24px;
  display:grid;gap:6px;background:rgba(246,243,236,.03);
}
.mcard span{font-size:.92rem;color:var(--on-noir-mid)}
.mcard b{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(2rem,6vw,2.7rem);line-height:1;color:#fff}
.mcard small{font-size:.86rem;color:var(--on-noir-mid)}
.mcard--win{background:rgba(217,181,87,.1);border-color:var(--gold)}
.mcard--win b{color:var(--gold)}

/* foto do primeiro pedido */
.kit{max-width:620px;margin-top:clamp(22px,3.5vw,30px)}
.kit img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line-gold);border-radius:var(--r-md);
}
.kit figcaption{font-size:.84rem;color:var(--on-noir-mid);margin-top:10px}
.fineprint{font-size:.82rem;color:var(--on-noir-mid);opacity:.85;margin-top:18px}
.note-gold{
  margin-top:22px;border-left:2px solid var(--gold);padding:4px 0 4px 18px;
  color:var(--on-noir);font-size:1.02rem;max-width:58ch;
}

/* ---------- steps ---------- */
.steps{display:grid;gap:14px;counter-reset:s;margin-top:clamp(26px,4vw,38px)}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  background:var(--surface-alt);border-radius:var(--r-md);padding:26px 22px;display:grid;gap:10px;align-content:start;
}
.step::before{
  counter-increment:s;content:counter(s);
  font-family:"Fraunces",serif;font-size:1.5rem;color:var(--gold-ink);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-gold);
  display:grid;place-content:center;
}
.step p{color:var(--ink-mid);font-size:.97rem}
.step h3{font-size:1.08rem}

/* ---------- checklist ---------- */
.checks{display:grid;gap:12px;margin-top:clamp(24px,4vw,34px)}
@media(min-width:760px){.checks{grid-template-columns:1fr 1fr}}
.check{
  display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;
}
.check svg{flex:0 0 22px;width:22px;height:22px;stroke:var(--gold-ink);fill:none;stroke-width:1.8;margin-top:2px}
.check p{font-size:.99rem}
.band--noir .check{background:rgba(246,243,236,.03);border-color:var(--line-gold)}
.band--noir .check svg{stroke:var(--gold)}

/* ---------- payment ---------- */
.cols3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:clamp(26px,4vw,38px)}
.col{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;display:grid;gap:12px;align-content:start}
.col h3{font-size:1.12rem}
.col p{color:var(--ink-mid);font-size:.97rem}

/* ---------- testimonials ---------- */
/* Prints de conversa. Cada print entra na altura natural dele porque
   recortar cortaria o texto da mensagem.
   Celular: uma coluna, um abaixo do outro.
   Desktop: duas colunas. column-count (e nao grid) porque as alturas sao
   muito diferentes - no grid as linhas abrem buracos embaixo do print
   mais baixo de cada linha. */
.tests{display:grid;gap:18px;max-width:480px;margin-top:clamp(26px,4vw,38px)}
.test{
  margin:0;padding:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.test img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
@media(min-width:900px){
  .tests{display:block;max-width:none;column-count:2;column-gap:20px}
  .test{break-inside:avoid;margin-bottom:20px}
}

/* ---------- faq ---------- */
.faq{margin-top:clamp(26px,4vw,38px);border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:1.04rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--gold-ink);border-bottom:1.6px solid var(--gold-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 24px;color:var(--ink-mid);max-width:70ch}

/* ---------- footer ---------- */
.foot{background:var(--noir-deep);color:var(--on-noir-mid);padding:clamp(44px,6vw,64px) var(--pad) calc(90px + env(safe-area-inset-bottom,0px));font-size:.93rem}
@media(min-width:760px){.foot{padding-bottom:clamp(44px,6vw,64px)}}
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:26px}
@media(min-width:700px){.foot__grid{grid-template-columns:1fr 1fr 1fr}}
.foot img{height:34px;width:auto;margin-bottom:14px}
.foot h4{font:600 .95rem "Manrope",sans-serif;color:var(--on-noir);margin:0 0 8px}
.foot a{color:var(--gold);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__base{max-width:var(--maxw);margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(246,243,236,.1);font-size:.85rem;opacity:.75}

/* sticky mobile cta */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--pad);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(35,31,32,.975);
  border-top:1px solid rgba(217,181,87,.22);
  transform:translateY(110%);visibility:hidden;
  transition:transform .26s ease,visibility .26s ease;
}
.sticky--on{transform:none;visibility:visible}
.sticky .btn{width:100%;padding:16px 24px}
@media(min-width:760px){.sticky{display:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* Sem animation-delay no h1: ele e o elemento de LCP e qualquer atraso aqui
   adia a metrica de carregamento medida pelo Google. */
.reveal{opacity:0;transform:translateY(12px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards}
.hero__copy .reveal:nth-child(3){animation-delay:.07s}
.hero__copy .reveal:nth-child(4){animation-delay:.14s}
@keyframes rise{to{opacity:1;transform:none}}