/* Base do site · Larissa Rangel — vem depois de hero.css. Sistema em 02-conceito/sistema.md */
:root{
  --sec:clamp(88px, 10vw, 156px);          /* respiro vertical de seção */
  --larg:1320px;                           /* largura máxima do conteúdo */
  --t-mini:.875rem;                        /* 14 px: menor texto permitido */
  --t-peq:1rem;
  --t-texto:1.125rem;                      /* 18 px: corpo */
  --t-lead:clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  --t-h2:clamp(2.5rem, 1.3rem + 3.9vw, 5.2rem);
  --t-h3:clamp(1.45rem, 1.15rem + .9vw, 2.05rem);
  --t-gigante:clamp(6rem, 2rem + 16vw, 19rem);
  --noite-2:#2c1a11;                       /* fundo da seção noite */
  --raio-card:22px;
  --dur:.9s;
}

html{scroll-padding-top:84px}
body{overflow-x:clip}
:focus-visible{outline:2px solid var(--ouro-tinta);outline-offset:3px}
.so-vis{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- peles de seção (o ritmo claro/escuro do hero) ---------- */
.pele-creme{background:var(--creme);color:var(--cafe)}
.pele-perola{background:var(--perola);color:var(--cafe)}
.pele-cacau{background:var(--cacau);color:var(--creme)}
.pele-noite{background:linear-gradient(to bottom in oklab, var(--noite-2), var(--cafe));color:var(--creme)}
.pele-cacau a:not([class]),.pele-noite a:not([class]){color:inherit}
.secao{position:relative;padding:var(--sec) var(--pad);overflow:clip;isolation:isolate}
.secao-in{position:relative;max-width:var(--larg);margin:0 auto}

/* ---------- as duas vozes (o motivo do hero) ---------- */
.quem{display:block;font-family:var(--f-dela);font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;line-height:1;color:var(--ouro-tinta);margin-bottom:.7em}
.pele-cacau .quem,.pele-noite .quem{color:var(--ouro-claro)}
.voz-sua{font-family:var(--f-sua);font-style:italic;font-weight:300;letter-spacing:-.005em}
.voz-dela{font-family:var(--f-dela);font-weight:800;letter-spacing:-.035em;line-height:.98}
.dupla{margin:0;font-weight:400;font-size:var(--t-h2);line-height:1.02;display:flex;flex-direction:column;gap:.18em}
.dupla .voz-sua{font-size:.62em;color:var(--cafe-2)}
.pele-cacau .dupla .voz-sua,.pele-noite .dupla .voz-sua{color:color-mix(in oklab, var(--creme) 82%, transparent)}
.dupla .voz-dela{display:block;text-wrap:balance}
.dupla .voz-sua{display:block;text-wrap:balance}

/* palavra gigante: contorno = a voz dela leve (o pedido); cheia = a resposta */
.gigante-contorno{font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:var(--t-gigante);line-height:.9;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px currentColor;pointer-events:none;user-select:none}
.gigante-cheia{font-family:var(--f-dela);font-weight:800;font-size:var(--t-gigante);line-height:.88;letter-spacing:-.04em;pointer-events:none;user-select:none}

/* pedido em pílula (os botões do hero) */
.chip{display:inline-flex;align-items:center;border:1px solid color-mix(in oklab, currentColor 30%, transparent);border-radius:999px;padding:9px 17px 10px;font-family:var(--f-sua);font-style:italic;font-weight:400;font-size:1.0625rem;line-height:1.2;background:color-mix(in oklab, #fff 45%, transparent)}
.pele-cacau .chip,.pele-noite .chip{background:color-mix(in oklab, #fff 8%, transparent)}

/* botões */
.btn-zap{display:inline-flex;align-items:center;gap:12px;min-height:56px;background:var(--cafe);color:var(--creme);text-decoration:none;border-radius:999px;padding:0 28px 0 22px;font-family:var(--f-dela);font-weight:700;font-size:1.0625rem;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(58,36,25,.6);transition:transform .25s var(--ease),background .25s}
.btn-zap svg{width:22px;height:22px;fill:var(--ouro-claro);flex:none}
.btn-zap:hover{transform:translateY(-2px);background:#2c1a11}
.pele-cacau .btn-zap,.pele-noite .btn-zap{background:var(--creme);color:var(--cafe)}
.pele-cacau .btn-zap svg,.pele-noite .btn-zap svg{fill:var(--ouro-tinta)}
.pele-cacau .btn-zap:hover,.pele-noite .btn-zap:hover{background:#fff}
.link-fio{display:inline-flex;align-items:center;min-height:48px;color:inherit;text-decoration:none;font-weight:600;border-bottom:1px solid var(--ouro);line-height:1.2}
.link-fio:hover{color:var(--ouro-tinta)}
.pele-cacau .link-fio:hover,.pele-noite .link-fio:hover{color:var(--ouro-claro)}

/* ---------- revelação na rolagem (só com JS; sem JS tudo aparece) ---------- */
.js [data-rev]{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--rd,0s)}
.js [data-rev="fade"]{transform:none}
.js [data-rev].rev-on{opacity:1;transform:none}
.js .rev-rapido [data-rev],.js [data-rev].rev-rapido{transition-delay:0s!important}

/* ---------- barra fixa (aparece depois do hero) ---------- */
.bs-barra{position:fixed;inset:0 0 auto 0;z-index:40;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);
  background:color-mix(in oklab, var(--creme) 88%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid color-mix(in oklab, var(--cafe) 10%, transparent);
  transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
.bs-barra.on{transform:none;visibility:visible}
.bs-barra .a-marca{color:var(--cafe)}
.bs-nav{display:flex;gap:clamp(14px,2vw,30px);font-size:var(--t-peq);font-weight:500}
.bs-nav a{color:var(--cafe);text-decoration:none;padding:12px 0;border-bottom:1px solid transparent}
.bs-nav a:hover{border-color:var(--ouro)}
.bs-barra .btn-zap{min-height:46px;padding:0 20px 0 16px;font-size:.95rem;box-shadow:none}
.bs-barra .btn-zap svg{width:19px;height:19px}

/* ---------- WhatsApp flutuante no celular ---------- */
.bs-zap{display:none}
@media (max-width:1023px){
  .bs-nav{display:none}
  .bs-barra{height:62px}
  .bs-barra .btn-zap{display:none}
  .bs-zap{display:flex;position:fixed;right:16px;bottom:16px;z-index:45;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center;background:var(--cafe);box-shadow:0 12px 30px -10px rgba(40,22,14,.7);transform:scale(.6);opacity:0;visibility:hidden;transition:transform .35s var(--ease),opacity .35s,visibility .35s}
  .bs-zap svg{width:28px;height:28px;fill:var(--ouro-claro)}
  .bs-zap.on{transform:none;opacity:1;visibility:visible}
}

@media (max-width:640px){
  :root{--sec:clamp(76px, 18vw, 104px)}
  .btn-zap{width:100%;justify-content:center}
}

/* ---------- movimento reduzido: tudo parado e visível ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rev]{opacity:1!important;transform:none!important;transition:none!important;transition-delay:0s!important}
  .bs-barra,.bs-zap{transition:none}
}