/* =========================================================
   CWB CARE — Assistência Premium
   Base clara da identidade (off-white + coroa dourada).
   Corpo em system-ui: vira SF Pro no Mac/iPhone, que é
   exatamente o público da loja.
   ========================================================= */

:root{
  --paper:    #F8F5F2;
  --white:    #FFFFFF;
  --tint:     #F1ECE6;
  --ink:      #0B0B0C;
  --ink-2:    #121213;
  --muted:    #6E6862;
  --rule:     #E5DED6;

  /* dourado da marca. --gold-ink é a versão escurecida:
     o tom original não atinge contraste AA em texto pequeno. */
  --gold:     #C9A96A;
  --gold-ink: #8A6A2A;
  --gold-lt:  #E0C892;

  --display: "Poppins", system-ui, sans-serif;
  --text:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1160px;
  --gut:  clamp(20px, 5vw, 56px);
  /* recuo lateral único: mantém todas as faixas no mesmo eixo */
  --pad:  max(var(--gut), (100% - var(--maxw)) / 2);
  --gap:  clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* altura do header sticky — usada para deslocar o alvo das âncoras */
  --head: 84px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--text);
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto neutraliza o atributo height do HTML, que venceria o aspect-ratio */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:2px}

/* ---------- alvo das âncoras ----------
   Sem isto o topo da seção para atrás do header sticky.
   Faixas com fundo (tint / fecho escuro) já têm respiro próprio
   no padding-top, então só precisam sair de baixo do header. */
section[id],main[id]{scroll-margin-top:calc(var(--head) + 2rem)}
.block--tint[id],.cta[id]{scroll-margin-top:var(--head)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
}
.skip:focus{left:12px;top:12px}

/* ---------- tipografia base ---------- */
.h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.8rem, 3.6vw, 2.8rem);
  line-height:1.15;letter-spacing:-.02em;
  max-width:20ch;
}
.label{
  font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:1.1rem;
}
.label--light{color:var(--gold)}

/* ---------- botões e links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--text);font-weight:500;font-size:.92rem;
  padding:.85em 1.6em;border-radius:6px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.btn--lg{padding:1em 2em;font-size:.98rem}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:#2B2620}
.btn--gold{background:var(--gold);color:#1B1509}
.btn--gold:hover{background:var(--gold-lt)}
.btn svg{flex:none}

.link{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.94rem;font-weight:500;
  padding-bottom:2px;
  border-bottom:1px solid var(--rule);
  transition:border-color .3s, color .3s;
}
.link span{transition:transform .3s var(--ease)}
.link:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.link:hover span{transform:translateX(4px)}
.link--light{border-color:#3B342C;color:#D8D1C7}
.link--light:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .35s;
}
.topbar.is-stuck{border-bottom-color:var(--rule)}
.topbar__in{
  display:flex;align-items:center;gap:1.5rem;
  padding:.95rem var(--pad);
}
.mark{display:flex;align-items:center;gap:.65rem;color:var(--ink)}
.mark svg{flex:none;color:var(--gold)}
.mark__txt{display:flex;flex-direction:column;line-height:1.15}
.mark__txt b{
  font-family:var(--display);font-size:1.02rem;font-weight:600;
  letter-spacing:.04em;
}
.mark__txt i{
  font-style:normal;font-size:.58rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}

.menu{margin-left:auto;display:flex;gap:2.1rem}
.menu a{font-size:.9rem;color:var(--muted);transition:color .25s}
.menu a:hover{color:var(--ink)}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

.drawer{
  display:flex;flex-direction:column;
  padding:.5rem var(--pad) 1.6rem;
  border-top:1px solid var(--rule);
}
.drawer[hidden]{display:none}
.drawer a{padding:.9rem 0;border-bottom:1px solid var(--rule);font-size:1rem}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,6vh,4.5rem) var(--pad) var(--gap)}
.hero__h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.3rem, 5.4vw, 4.1rem);
  line-height:1.08;letter-spacing:-.035em;
  margin-bottom:1.4rem;
}
.hero__h1 span{display:block}
.hero__h1 em{display:block;font-style:normal;font-weight:500;color:var(--gold-ink)}
.hero__lead{color:var(--muted);font-size:1.05rem;max-width:50ch}
.hero__act{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem;margin-top:2.2rem}

.hero__shot{margin-top:clamp(2.5rem,6vw,4.5rem)}
.hero__shot img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%;
  border-radius:10px;
}

.facts{
  display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;
  margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--muted);
}
.facts b{font-weight:600;color:var(--ink)}

/* ---------- blocos ---------- */
.block{padding:0 var(--pad) var(--gap)}
.block--tint{
  background:var(--tint);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-top:var(--gap);
}
.block__head{margin-bottom:clamp(2.5rem,5vw,3.8rem);max-width:60ch}
.block__intro{color:var(--muted);margin-top:1rem;max-width:54ch}

/* ---------- aparelhos atendidos ---------- */
.gear{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
}
.gear li{background:var(--white);padding:1.7rem clamp(1.1rem,2.2vw,1.7rem)}
.gear svg{color:var(--gold);margin-bottom:1rem}
.gear h3{
  font-family:var(--display);font-weight:500;
  font-size:1.02rem;letter-spacing:-.01em;margin-bottom:.2rem;
}
.gear p{color:var(--muted);font-size:.88rem;line-height:1.55}

/* ---------- serviços com foto ---------- */
.svc{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.svc__item{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,5vw,4rem);align-items:center;
}
.svc__item:nth-child(even) .svc__shot{order:2}
.svc__shot img{
  width:100%;height:clamp(260px,32vw,400px);object-fit:cover;
  border-radius:10px;
}
.svc__shot--tela img{object-position:center 55%}
.svc__shot--placa img{object-position:center 40%}
.svc__shot--mac img{object-position:center 50%}
.svc__num{
  font-family:var(--display);font-weight:300;
  font-size:.8rem;letter-spacing:.18em;color:var(--gold-ink);
  margin-bottom:.9rem;
}
.svc__body h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.18;letter-spacing:-.02em;margin-bottom:.9rem;
}
.svc__body > p{color:var(--muted);max-width:44ch}
.svc__list{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.svc__list li{
  font-size:.8rem;color:var(--ink);
  border:1px solid var(--rule);background:var(--white);
  padding:.35rem .8rem;border-radius:99px;
}

/* ---------- como funciona ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps li{
  padding:1.6rem clamp(1rem,2.2vw,1.8rem) 0;
  border-top:1px solid #DCD4C9;
}
.steps li:first-child{padding-left:0}
.steps li:last-child{padding-right:0}
.steps h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  line-height:1;letter-spacing:-.02em;color:var(--gold-ink);
  margin-bottom:.9rem;
}
.steps__tag{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin-bottom:.7rem;
}
.steps li p:last-child{color:var(--muted);font-size:.9rem}

/* ---------- garantia ---------- */
.trust{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,6vw,5rem);
  border-top:1px solid var(--rule);
}
.trust li{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.trust h3{
  font-family:var(--display);font-weight:500;
  font-size:1.08rem;line-height:1.3;margin-bottom:.3rem;
}
.trust p{color:var(--muted);font-size:.93rem}

.say{
  margin-top:var(--gap);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid #DCD4C9;
  max-width:min(100%, 640px);
}
.say blockquote{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.38;
  letter-spacing:-.02em;
}
.say figcaption{margin-top:1.2rem;font-size:.82rem;color:var(--muted)}

/* ---------- a loja ---------- */
.shop{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.shop__card{
  background:var(--white);border:1px solid var(--rule);border-radius:10px;
  padding:clamp(1.6rem,3vw,2.2rem);
}
.shop__row + .shop__row{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.shop__row h3{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:.6rem;
}
.shop__row p{font-size:.98rem}
.shop__row p span{color:var(--muted);font-size:.9rem}
.shop__card .link{margin-top:1.4rem}

/* ---------- fecho escuro: contato + rodapé ---------- */
.close{background:var(--ink-2);color:#E7E2DA}

.cta{padding:var(--gap) var(--pad) clamp(3.5rem,7vw,5rem)}
.cta__h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1.12;letter-spacing:-.03em;
}
.cta__lead{color:#A69D91;margin-top:1.3rem;max-width:46ch}
.cta__act{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem}

.foot{border-top:1px solid #322C25}
.foot__in{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:2.5rem;padding:clamp(3rem,6vw,4rem) var(--pad);
}
.mark--gold .mark__txt b{color:#E7E2DA}
.mark--gold .mark__txt i{color:var(--gold)}
.foot__brand p{margin-top:1.2rem;font-size:.88rem;color:#8E867B;max-width:36ch}
.foot__col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot__col h3{
  font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.35rem;
}
.foot__col a,.foot__col p{font-size:.9rem;color:#A69D91;transition:color .25s}
.foot__col a:hover{color:#E7E2DA}
.foot__bar{
  padding:1.4rem var(--pad) 2rem;
  border-top:1px solid #322C25;
  font-size:.76rem;color:#7C746A;
}

/* ---------- WhatsApp flutuante ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:200;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#25A85A;color:#fff;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), background .3s;
}
.wa:hover{transform:translateY(-2px);background:#1E8F4C}

/* ---------- reveal ---------- */
/* estado inicial só existe com JS ativo — sem JS o conteúdo aparece normalmente */
.js .up{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .up.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .up{opacity:1;transform:none;transition:none}
  .link span,.btn,.wa{transition:none}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:900px){
  .menu,.topbar__cta{display:none}
  .burger{display:flex;margin-left:auto}
  .gear{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .steps li{padding-left:0;padding-right:clamp(1rem,4vw,2rem)}
  .steps li:nth-child(even){padding-right:0}
  .shop{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  /* em tablet a coluna da foto fica estreita demais para o texto ao lado */
  .svc__item{grid-template-columns:1fr;gap:1.6rem}
  .svc__item:nth-child(even) .svc__shot{order:0}
  .svc__shot img{height:clamp(280px,42vw,380px)}
}

@media (max-width:640px){
  .hero__shot img{aspect-ratio:4/3}
  .gear{grid-template-columns:1fr}
  /* a foto volta para cima em todos os itens, inclusive nos pares */
  .svc__item{grid-template-columns:1fr;gap:1.5rem}
  .svc__item:nth-child(even) .svc__shot{order:0}
  .svc__shot img{height:auto;aspect-ratio:4/3}
  .steps{grid-template-columns:1fr;row-gap:2rem}
  .steps li{padding-right:0}
  .trust{grid-template-columns:1fr}
  .say{max-width:none}
  .foot__in{grid-template-columns:1fr;gap:2rem}
  .hero__act .btn,.cta__act .btn{width:100%}
  .facts{gap:.3rem 1.6rem}
  /* espaço para o botão flutuante não cobrir o texto */
  .foot__bar{padding-bottom:5.5rem}
}