/* =====================================================================
   DESINFLAME A PELE — Design System
   Identidade: verde-oliva profundo, dourado-camelo, areia e creme.
   Tipografia: Aloevera Display (títulos), Rebelleon (marca), Hanken (corpo).
   ===================================================================== */

/* ---- Fontes da marca (locais) ---- */
@font-face{
  font-family:'Aloevera';
  src:url('../assets/fonts/AloeveraDisplay-Light.otf') format('opentype');
  font-weight:300; font-display:swap;
}
@font-face{
  font-family:'Aloevera';
  src:url('../assets/fonts/AloeveraDisplay-Regular.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Aloevera';
  src:url('../assets/fonts/AloeveraDisplay-Bold.otf') format('opentype');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Rebelleon';
  src:url('../assets/fonts/Rebelleon-Regular.otf') format('opentype');
  font-weight:400; font-display:swap;
}

/* =====================================================================
   TOKENS
   ===================================================================== */
:root{
  /* Verde-oliva (cor-mãe) */
  --olive-900: oklch(0.30 0.035 132);
  --olive-800: oklch(0.36 0.040 131);   /* #43523B aprox. */
  --olive-700: oklch(0.43 0.045 130);
  --olive-600: oklch(0.52 0.045 128);
  --olive-400: oklch(0.70 0.035 125);

  /* Dourado-camelo (acento) */
  --camel-700: oklch(0.56 0.062 74);
  --camel-600: oklch(0.66 0.070 74);    /* #AF8C62 aprox. */
  --camel-500: oklch(0.74 0.062 76);
  --camel-300: oklch(0.85 0.040 80);

  /* Neutros quentes (tingidos p/ a marca, nunca preto/branco puro) */
  --cream:  oklch(0.965 0.014 86);      /* fundo dos cartões claros */
  --paper:  oklch(0.945 0.016 85);      /* fundo geral do app */
  --sand:   oklch(0.90 0.018 84);       /* superfícies suaves */
  --stone:  oklch(0.855 0.012 82);      /* #D7D2CB warm gray */
  --line:   oklch(0.86 0.014 82);       /* bordas */

  --ink:      oklch(0.30 0.020 120);    /* texto principal (oliva escuro) */
  --ink-soft: oklch(0.44 0.018 110);    /* texto secundário */
  --ink-mute: oklch(0.58 0.014 105);    /* legendas */

  --danger:  oklch(0.55 0.13 28);
  --success: oklch(0.55 0.09 145);

  /* Tipografia */
  --font-display:'Aloevera', 'Hanken Grotesk', serif;
  --font-mark:'Rebelleon', 'Hanken Grotesk', sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;

  /* Raio e sombra */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px oklch(0.30 0.03 120 / .06);
  --shadow-md: 0 10px 30px oklch(0.30 0.04 120 / .10);
  --shadow-lg: 0 24px 60px oklch(0.28 0.05 120 / .18);

  --ease: cubic-bezier(.22,1,.36,1);            /* ease-out-quint */
  --app-max: 460px;
}

/* =====================================================================
   BASE
   ===================================================================== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.55 0.05 128 / .35), transparent 60%),
    var(--olive-800);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0; letter-spacing:.01em; line-height:1.1; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* Tamanho padrão de ícone: vale para todo SVG sem width explícito no HTML.
   Ícones com width="X" (grandes, decorativos) mantêm o próprio tamanho.
   Regras de componente abaixo (.iconbtn svg, .tab svg…) têm a mesma
   especificidade e vêm depois, então sobrescrevem por ordem de fonte. */
svg:not([width]){ width:20px; height:20px; flex:none; }
::selection{ background:var(--camel-500); color:var(--cream); }

/* Scroll refinado */
.scroll::-webkit-scrollbar{ width:6px; }
.scroll::-webkit-scrollbar-thumb{ background:var(--stone); border-radius:99px; }

/* =====================================================================
   MOLDURA DO APP (mobile-first, centralizada no desktop)
   ===================================================================== */
.stage{
  min-height:100dvh;
  display:grid; place-items:center;
  padding:0;
}
@media (min-width:900px){
  .stage{ padding:32px; }
}
.app{
  position:relative;
  width:100%;
  max-width:var(--app-max);
  min-height:100dvh;
  background:var(--paper);
  overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
}
@media (min-width:900px){
  .app{
    min-height:min(880px, 92dvh);
    height:min(880px, 92dvh);
    border-radius:38px;
    box-shadow:var(--shadow-lg), 0 0 0 10px oklch(0.30 0.03 120 / .35);
  }
}

/* Área rolável de cada tela */
.screen{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
.screen__body{ padding:22px 22px 30px; }
.has-nav .screen__body{ padding-bottom:104px; }

/* =====================================================================
   MARCA / LOGO
   ===================================================================== */
.brand{ display:inline-flex; align-items:center; gap:9px; }
.brand__mark{ width:22px; height:26px; flex:none; }
.brand__mark path,.brand__mark line{ stroke:currentColor; stroke-width:1.4; fill:none; }
.brand__word{ font-family:var(--font-mark); letter-spacing:.30em; font-size:.86rem; line-height:1; }
.brand__word b{ display:block; font-weight:400; }
.brand__word small{ display:block; font-size:.5rem; letter-spacing:.42em; opacity:.8; margin-top:3px; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{
  --_bg:var(--olive-800); --_fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:16px 20px; border-radius:99px;
  background:var(--_bg); color:var(--_fg);
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .3s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn--gold{ --_bg:var(--camel-600); --_fg:oklch(0.24 0.03 80); }
.btn--ghost{ --_bg:transparent; --_fg:var(--olive-800); box-shadow:inset 0 0 0 1.5px var(--olive-700); }
.btn--soft{ --_bg:var(--sand); --_fg:var(--ink); box-shadow:none; }
.btn--sm{ width:auto; padding:11px 18px; font-size:.85rem; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* Link discreto */
.link{ color:var(--camel-700); font-weight:600; }
.link:hover{ text-decoration:underline; }

/* =====================================================================
   CAMPOS
   ===================================================================== */
.field{ margin-bottom:16px; }
.field > label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin:0 0 7px 4px; }
.input{
  width:100%; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--cream); color:var(--ink);
  border:1.5px solid var(--line); outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input::placeholder{ color:var(--ink-mute); }
.input:focus{ border-color:var(--camel-600); box-shadow:0 0 0 4px oklch(0.66 0.07 74 / .16); }
textarea.input{ resize:vertical; min-height:96px; line-height:1.55; }

/* Pílulas de opção (quiz, filtros) */
.opt{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  padding:15px 18px; margin-bottom:11px;
  border-radius:14px; background:var(--cream);
  border:1.5px solid var(--line); color:var(--ink);
  font-weight:500;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.opt:hover{ transform:translateY(-1px); border-color:var(--camel-500); }
.opt[aria-pressed="true"]{ border-color:var(--olive-700); background:oklch(0.60 0.05 128 / .10); }
.opt__check{
  margin-left:auto; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:var(--olive-800); color:var(--cream);
  transform:scale(.5); opacity:0; transition:.3s var(--ease);
}
.opt__check svg{ width:14px; height:14px; }
.search > svg{ color:var(--ink-mute); }
.proto-row > svg, .prod > svg, .consult > svg{ color:var(--ink-mute); }
.stars svg{ width:14px; height:14px; }
.food__x svg{ width:16px; height:16px; }
.stepper button svg{ width:16px; height:16px; }
.row > span > svg, .between > span > svg{ vertical-align:middle; }
.opt[aria-pressed="true"] .opt__check{ transform:scale(1); opacity:1; }

/* =====================================================================
   CARTÕES
   ===================================================================== */
.card{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow-sm);
}
.card--flat{ box-shadow:none; }
.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--camel-700);
}
.muted{ color:var(--ink-mute); }
.soft{ color:var(--ink-soft); }

/* Cabeçalho de seção padrão (voltar + título) */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px 14px;
  position:sticky; top:0; z-index:5;
  background:oklch(0.945 0.016 85 / .86); backdrop-filter:blur(8px);
}
.topbar__title{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:0 auto; }
.iconbtn{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--ink);
  transition:background .3s var(--ease);
}
.iconbtn:hover{ background:var(--sand); }
.iconbtn svg{ width:20px; height:20px; }

/* =====================================================================
   BOTTOM NAV
   ===================================================================== */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:var(--olive-800);
  box-shadow:0 -8px 24px oklch(0.28 0.05 120 / .18);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:oklch(0.86 0.02 100 / .62); font-size:.64rem; font-weight:600; letter-spacing:.02em;
  padding:6px 10px; border-radius:14px; flex:1;
  transition:color .3s var(--ease);
}
.tab svg{ width:22px; height:22px; transition:transform .4s var(--ease); }
.tab[aria-current="page"]{ color:var(--cream); }
.tab[aria-current="page"] svg{ transform:translateY(-2px); }
.tab[aria-current="page"]::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--camel-500);
}

/* =====================================================================
   HOME — cabeçalho oliva
   ===================================================================== */
.home-hero{
  position:relative; color:var(--cream);
  background:
    radial-gradient(130% 90% at 85% 0%, oklch(0.46 0.05 128), transparent 55%),
    var(--olive-800);
  padding:20px 22px 26px;
  border-radius:0 0 26px 26px;
}
.home-hero__top{ display:flex; align-items:center; justify-content:space-between; }
.home-hello{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.home-hello__txt .k{ font-size:.82rem; opacity:.82; letter-spacing:.02em; }
.home-hello__txt .n{ font-family:var(--font-display); font-size:1.8rem; line-height:1; margin-top:2px; }
.avatar{ border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px oklch(0.86 0.06 80 / .6); }
.avatar--lg{ width:58px; height:58px; }
.avatar--sm{ width:44px; height:44px; }

/* Checklist do protocolo */
.check{ display:flex; align-items:center; gap:13px; padding:12px 4px; }
.check + .check{ border-top:1px solid var(--line); }
.check__box{
  width:24px; height:24px; border-radius:8px; flex:none;
  border:2px solid var(--camel-500); background:transparent;
  display:grid; place-items:center; color:var(--cream);
  transition:.3s var(--ease);
}
.check[data-done="true"] .check__box{ background:var(--olive-700); border-color:var(--olive-700); }
.check__box svg{ width:14px; height:14px; opacity:0; transition:.3s var(--ease); }
.check[data-done="true"] .check__box svg{ opacity:1; }
.check__label{ font-weight:500; }
.check[data-done="true"] .check__label{ color:var(--ink-mute); text-decoration:line-through; }

/* Barra de progresso */
.bar{ height:8px; border-radius:99px; background:var(--sand); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--camel-600),var(--olive-600));
  transition:width .8s var(--ease); }

/* Antes/depois */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ba figure{ margin:0; position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; background:var(--sand);
  display:grid; place-items:center; }
.ba figcaption{ position:absolute; left:8px; bottom:8px; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); background:oklch(0.30 0.03 120 / .55); padding:3px 8px; border-radius:99px; }

/* =====================================================================
   PROTOCOLOS
   ===================================================================== */
.proto-row{
  display:flex; align-items:center; gap:14px;
  padding:15px; margin-bottom:12px;
  background:var(--cream); border:1px solid var(--line); border-radius:18px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.proto-row:hover{ transform:translateY(-2px); border-color:var(--camel-500); box-shadow:var(--shadow-md); }
.proto-row[data-active="true"]{ background:oklch(0.60 0.05 128 / .10); border-color:var(--olive-700); }
.proto-ic{
  width:52px; height:52px; border-radius:15px; flex:none;
  display:grid; place-items:center; color:var(--olive-800);
  background:radial-gradient(120% 120% at 30% 20%, var(--camel-300), var(--sand));
}
.proto-ic svg{ width:26px; height:26px; }
.proto-row h4{ font-size:1.06rem; }
.proto-row p{ font-size:.8rem; color:var(--ink-mute); margin-top:2px; }

/* Cabeçalho de detalhe do protocolo */
.proto-head{
  position:relative; color:var(--cream); padding:26px 22px 30px;
  border-radius:0 0 26px 26px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 80% 0%, oklch(0.46 0.05 128), transparent 60%),
    var(--olive-800);
}
.proto-head::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:180px; height:180px;
  background:radial-gradient(circle, oklch(0.66 0.07 74 / .25), transparent 70%);
}
.step{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.step + .step{ border-top:1px solid var(--line); }
.step__n{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); background:var(--sand); color:var(--olive-800); font-size:1rem; }
.chip{ display:inline-block; padding:6px 12px; border-radius:99px; background:var(--sand);
  font-size:.74rem; font-weight:600; color:var(--ink-soft); }
.chip--rec{ margin-top:6px; background:oklch(0.60 0.05 128 / .18); color:var(--olive-800); }

/* =====================================================================
   MÉTODO — destaque, pilares e tratamentos
   ===================================================================== */
/* Seção de destaque do programa */
.feature{
  position:relative; overflow:hidden; color:var(--cream);
  padding:26px 22px 24px; border-radius:24px; margin-bottom:8px;
  background:
    radial-gradient(130% 110% at 85% 0%, oklch(0.46 0.05 128), transparent 62%),
    var(--olive-800);
  box-shadow:var(--shadow-md);
}
.feature::after{
  content:""; position:absolute; right:-40px; bottom:-50px; width:200px; height:200px;
  background:radial-gradient(circle, oklch(0.66 0.07 74 / .28), transparent 70%);
}
.feature > *{ position:relative; z-index:1; }
.feature__title{ font-size:2.05rem; line-height:1.02; margin-top:8px; }
.feature__sub{ font-family:var(--font-display); font-size:1.02rem; line-height:1.32;
  color:var(--camel-300); margin-top:10px; max-width:30ch; }
.feature__txt{ font-size:.9rem; line-height:1.6; opacity:.88; margin-top:12px; }
.feature .btn{ width:auto; padding:13px 22px; margin-top:18px; }

/* Pilares (acordeão) */
.pillar{ background:var(--cream); border:1px solid var(--line); border-radius:18px;
  margin-bottom:10px; overflow:hidden; transition:border-color .35s var(--ease); }
.pillar[data-open="true"]{ border-color:var(--olive-700); }
.pillar__head{ display:flex; align-items:center; gap:13px; width:100%; padding:15px; text-align:left; }
.pillar__head b{ font-size:.98rem; font-weight:600; line-height:1.28; display:block; }
.pillar__n{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1rem;
  background:var(--sand); color:var(--olive-800); transition:.35s var(--ease); }
.pillar[data-open="true"] .pillar__n{ background:var(--olive-800); color:var(--cream); }
.pillar__caret{ color:var(--ink-mute); display:flex; transition:transform .35s var(--ease); }
.pillar__caret svg{ width:18px; height:18px; }
.pillar[data-open="true"] .pillar__caret{ transform:rotate(90deg); }
.pillar__body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.pillar[data-open="true"] .pillar__body{ max-height:960px; }
.pillar__inner{ padding:0 15px 16px 60px; }
.trigger{ display:flex; gap:11px; padding:10px 0; }
.trigger + .trigger{ border-top:1px solid var(--line); }
.trigger b{ font-size:.88rem; font-weight:600; }
.trigger__dot{ width:7px; height:7px; border-radius:50%; flex:none; margin-top:7px;
  background:var(--camel-600); }

/* Tratamentos: proteção / chás / orais */
.tabs2{ display:flex; background:var(--sand); border-radius:99px; padding:4px; margin-bottom:20px; }
.tabs2 button{ flex:1; padding:10px; border-radius:99px; font-weight:600; font-size:.86rem; color:var(--ink-soft);
  transition:.3s var(--ease); }
.tabs2 button[aria-selected="true"]{ background:var(--cream); color:var(--olive-800); box-shadow:var(--shadow-sm); }
.tx-item{ display:flex; gap:12px; padding:13px 0; }
.tx-item + .tx-item{ border-top:1px solid var(--line); }
.tx-item b{ font-size:.94rem; font-weight:600; line-height:1.3; }
.tx-item__ic{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:oklch(0.60 0.05 128 / .14); color:var(--olive-700); }
.tx-item__ic svg{ width:15px; height:15px; }
.tx-note{ margin-top:12px; padding:13px 16px; border-radius:14px;
  border-left:3px solid var(--camel-500); background:var(--sand);
  color:var(--ink-soft); font-size:.82rem; line-height:1.5; }

/* =====================================================================
   PRODUTOS
   ===================================================================== */
.search{ display:flex; align-items:center; gap:10px; padding:13px 16px; background:var(--cream);
  border:1.5px solid var(--line); border-radius:99px; margin-bottom:14px; }
.search input{ border:none; background:none; outline:none; width:100%; color:var(--ink); }
.filters{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; }
.filters::-webkit-scrollbar{ display:none; }
.filter{ flex:none; padding:9px 16px; border-radius:99px; background:var(--cream); border:1.5px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--ink-soft); transition:.3s var(--ease); }
.filter[aria-pressed="true"]{ background:var(--olive-800); color:var(--cream); border-color:var(--olive-800); }

.prod{ display:flex; gap:14px; align-items:center; padding:12px; margin-bottom:11px;
  background:var(--cream); border:1px solid var(--line); border-radius:18px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.prod:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.bottle{ width:60px; height:74px; flex:none; border-radius:12px; position:relative;
  background:linear-gradient(160deg, var(--camel-300), var(--sand)); display:grid; place-items:center; overflow:hidden; }
.bottle svg{ width:34px; height:46px; }
.prod__info{ flex:1; min-width:0; }
.prod__info h4{ font-size:1rem; }
.prod__info p{ font-size:.76rem; color:var(--ink-mute); }
.price{ font-family:var(--font-display); font-size:1.05rem; color:var(--olive-800); }
.stars{ color:var(--camel-600); font-size:.8rem; letter-spacing:.05em; }

/* Passo (qty) */
.stepper{ display:inline-flex; align-items:center; gap:14px; background:var(--sand); border-radius:99px; padding:5px; }
.stepper button{ width:30px; height:30px; border-radius:50%; background:var(--cream); display:grid; place-items:center;
  box-shadow:var(--shadow-sm); font-size:1.1rem; color:var(--olive-800); }

/* =====================================================================
   AGENDA — mini landing
   ===================================================================== */
.agenda-hero{ position:relative; overflow:hidden; color:var(--cream); }
.agenda-hero img{ width:100%; height:440px; object-fit:cover; object-position:center 18%; }
.agenda-hero .kenburns{ animation:kenburns 16s var(--ease) both; transform-origin:60% 40%; }
@keyframes kenburns{ from{ transform:scale(1.14); } to{ transform:scale(1); } }
.agenda-hero__veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(0.30 0.03 120 / .05) 0%, oklch(0.30 0.03 120 / .35) 45%, oklch(0.28 0.04 120 / .86) 96%); }
.agenda-hero__txt{ position:absolute; left:22px; right:22px; bottom:24px; }
.agenda-hero__txt h1{ font-size:1.9rem; line-height:1.04; margin-top:6px; }
.agenda-hero__txt p{ max-width:34ch; }

/* barra de prova social (números que sobem) */
.proofbar{ display:flex; justify-content:space-around; align-items:center; gap:6px;
  background:radial-gradient(120% 120% at 20% 0%, oklch(0.46 0.05 128), var(--olive-800));
  color:var(--cream); border-radius:20px; padding:20px 10px; margin-top:22px; box-shadow:var(--shadow-md); }
.proofbar .stat{ flex:1; }
.proofbar .stat b{ color:var(--cream); font-size:1.55rem; }
.proofbar .stat span{ color:oklch(0.88 0.03 95 / .72); font-size:.68rem; }
.proofbar .stat + .stat{ border-left:1px solid oklch(0.86 0.06 80 / .2); }

/* citação / depoimento */
.quote{ position:relative; margin-top:22px; padding:26px 24px 22px;
  background:linear-gradient(160deg, var(--sand), var(--cream));
  border:1px solid var(--line); border-radius:22px; }
.quote::before{ content:'\201C'; position:absolute; top:2px; left:18px;
  font-family:var(--font-display); font-size:4.2rem; line-height:1; color:var(--camel-500); opacity:.35; }
.quote p{ font-family:var(--font-display); font-size:1.22rem; line-height:1.42; color:var(--olive-800); }
.quote__who{ margin-top:14px; font-size:.82rem; color:var(--ink-mute); display:flex; align-items:center; gap:8px; }
.quote__who b{ color:var(--ink); font-weight:600; }
.quote__stars{ color:var(--camel-600); }

/* passos "como funciona" com stagger */
.reveal.in .step{ animation:fadeUp .6s var(--ease) both; }
.reveal.in .step:nth-child(2){ animation-delay:.08s; }
.reveal.in .step:nth-child(3){ animation-delay:.16s; }
.reveal.in .consult{ animation:fadeUp .5s var(--ease) both; }
.reveal.in .consult:nth-child(2){ animation-delay:.07s; }
.reveal.in .consult:nth-child(3){ animation-delay:.14s; }
.reveal.in .consult:nth-child(4){ animation-delay:.21s; }

/* seções da landing com animação de entrada */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.split{ display:grid; grid-template-columns:1.1fr 1fr; gap:14px; align-items:center; }
.split img{ border-radius:18px; aspect-ratio:3/4; object-fit:cover; }
.stat{ text-align:center; padding:8px; }
.stat b{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--olive-800); }
.stat span{ font-size:.72rem; color:var(--ink-mute); letter-spacing:.04em; }

.consult{ display:flex; align-items:center; gap:12px; padding:16px; margin-bottom:11px;
  background:var(--cream); border:1px solid var(--line); border-radius:18px;
  transition:.35s var(--ease); }
.consult:hover{ border-color:var(--olive-700); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.consult__meta{ flex:1; }
.consult__meta h4{ font-size:1.02rem; }
.consult__meta span{ font-size:.76rem; color:var(--ink-mute); }

/* Calendário */
.cal{ background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:16px; }
.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; text-align:center; }
.cal__dow{ font-size:.66rem; font-weight:700; color:var(--ink-mute); padding:6px 0; }
.cal__day{ aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:500;
  transition:.25s var(--ease); }
.cal__day:not(.is-empty):not([disabled]):hover{ background:var(--sand); }
.cal__day[aria-pressed="true"]{ background:var(--olive-800); color:var(--cream); }
.cal__day[disabled]{ color:var(--ink-mute); opacity:.4; }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }
.slot{ padding:12px 0; border-radius:12px; background:var(--cream); border:1.5px solid var(--line);
  font-weight:600; color:var(--ink); transition:.25s var(--ease); }
.slot[aria-pressed="true"]{ background:var(--olive-800); color:var(--cream); border-color:var(--olive-800); }
.slot[disabled]{ opacity:.4; }

/* =====================================================================
   AUTH + ONBOARDING
   ===================================================================== */
.auth{ min-height:100%; flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:36px 30px; color:var(--cream);
  background:
    linear-gradient(180deg, oklch(0.30 0.03 120 / .10), oklch(0.28 0.04 120 / .55)),
    radial-gradient(120% 80% at 50% -10%, oklch(0.55 0.05 128 / .4), transparent 60%),
    var(--olive-800); }
.auth__card{ background:var(--paper); color:var(--ink); border-radius:26px; padding:26px 22px;
  box-shadow:var(--shadow-lg); }
.auth .brand{ color:var(--cream); justify-content:center; }

.onb{ flex:1; min-height:100%; display:flex; flex-direction:column; }
.onb__art{ height:44%; position:relative; overflow:hidden; display:grid; place-items:center; color:var(--cream);
  background:radial-gradient(120% 100% at 50% 10%, oklch(0.48 0.05 128), var(--olive-800)); }
.onb__body{ flex:1; padding:30px 26px; display:flex; flex-direction:column; }
.dots{ display:flex; gap:7px; justify-content:center; margin:18px 0; }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--stone); transition:.3s var(--ease); }
.dots i.on{ width:22px; border-radius:99px; background:var(--olive-700); }

/* =====================================================================
   DIAGNÓSTICO / RESULTADO
   ===================================================================== */
.result-badge{ background:linear-gradient(160deg, var(--sand), var(--cream)); border-radius:20px; padding:22px;
  text-align:center; border:1px solid var(--line); }
.result-badge h2{ font-size:1.7rem; color:var(--olive-800); margin:6px 0; }
.axis{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.axis + .axis{ border-top:1px solid var(--line); }
.axis__meter{ flex:1; height:7px; border-radius:99px; background:var(--sand); overflow:hidden; }
.axis__meter i{ display:block; height:100%; border-radius:99px; }
.axis__tag{ font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.tag-baixo{ background:oklch(0.55 0.09 145 / .16); color:var(--success); }
.tag-moderado{ background:oklch(0.66 0.07 74 / .2); color:var(--camel-700); }
.tag-alto{ background:oklch(0.55 0.13 28 / .16); color:var(--danger); }

.pdf-card{ display:flex; align-items:center; gap:16px; padding:18px; border-radius:18px;
  background:var(--cream); border:1px solid var(--line); }
.pdf-ic{ width:52px; height:64px; flex:none; border-radius:8px; background:var(--olive-800); color:var(--cream);
  display:grid; place-items:center; font-size:.6rem; font-weight:700; letter-spacing:.1em; }

/* Upload de foto */
.dropzone{ border:2px dashed var(--camel-500); border-radius:20px; padding:30px 20px; text-align:center;
  background:oklch(0.66 0.07 74 / .06); color:var(--ink-soft); transition:.3s var(--ease); }
.dropzone:hover{ background:oklch(0.66 0.07 74 / .12); }
.dropzone__preview{ width:100%; max-height:280px; object-fit:cover; border-radius:16px; }

/* Foods to cut / rotina */
.food{ display:flex; align-items:center; gap:12px; padding:11px 0; }
.food + .food{ border-top:1px solid var(--line); }
.food__x{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:oklch(0.55 0.13 28 / .12); color:var(--danger); }
.food__ok{ background:oklch(0.55 0.09 145 / .14); color:var(--success); }

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.stack > * + *{ margin-top:14px; }
.stack-sm > * + *{ margin-top:8px; }
.row{ display:flex; align-items:center; gap:10px; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wrap{ flex-wrap:wrap; }
.center{ text-align:center; }
.grow{ flex:1; min-width:0; }
.mt-sm{ margin-top:8px; } .mt{ margin-top:16px; } .mt-lg{ margin-top:26px; }
.section-title{ display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px; }
.section-title h3{ font-size:1.3rem; }
.h-display{ font-family:var(--font-display); }
.big-num{ font-family:var(--font-display); font-size:2.4rem; color:var(--olive-800); line-height:1; }

/* Slider 0–10 */
.range{ -webkit-appearance:none; width:100%; height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--olive-600),var(--camel-500)); outline:none; }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--cream); box-shadow:var(--shadow-md), 0 0 0 3px var(--olive-700); cursor:pointer; }
.range::-moz-range-thumb{ width:26px; height:26px; border:none; border-radius:50%; background:var(--cream);
  box-shadow:var(--shadow-md), 0 0 0 3px var(--olive-700); cursor:pointer; }
.range-val{ font-family:var(--font-display); font-size:2rem; color:var(--olive-800); text-align:center; }

/* Toast */
.toast-wrap{ position:absolute; left:0; right:0; bottom:100px; z-index:60; display:flex; justify-content:center;
  pointer-events:none; padding:0 20px; }
.toast{ background:var(--olive-900); color:var(--cream); padding:13px 20px; border-radius:14px;
  box-shadow:var(--shadow-lg); font-size:.86rem; font-weight:500; transform:translateY(20px); opacity:0;
  transition:.4s var(--ease); max-width:100%; text-align:center; }
.toast.in{ transform:none; opacity:1; }

/* Modal sheet */
.sheet-bg{ position:absolute; inset:0; z-index:50; background:oklch(0.28 0.04 120 / .45);
  opacity:0; pointer-events:none; transition:.35s var(--ease); }
.sheet-bg.in{ opacity:1; pointer-events:auto; }
.sheet{ position:absolute; left:0; right:0; bottom:0; z-index:51; background:var(--paper);
  border-radius:26px 26px 0 0; padding:22px 22px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .45s var(--ease); max-height:86%; overflow-y:auto; }
.sheet.in{ transform:none; }
.sheet__grab{ width:42px; height:4px; border-radius:99px; background:var(--stone); margin:0 auto 16px; }

/* Empty state */
.empty{ text-align:center; padding:36px 20px; color:var(--ink-mute); }
.empty svg{ width:44px; height:44px; margin-bottom:12px; color:var(--stone); }

/* Loader */
.spinner{ width:26px; height:26px; border-radius:50%; border:3px solid var(--sand);
  border-top-color:var(--olive-700); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.center-load{ flex:1; display:grid; place-items:center; }

/* Entrada de tela */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.fade-in{ animation:fadeUp .5s var(--ease) both; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Admin (desktop) */
.admin-body{ background:var(--paper); color:var(--ink); min-height:100dvh; }
.admin-wrap{ max-width:1100px; margin:0 auto; padding:28px 22px 60px; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.kpi{ background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:18px; }
.kpi b{ font-family:var(--font-display); font-size:2rem; color:var(--olive-800); display:block; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:var(--cream); margin-top:20px; }
table.data{ width:100%; border-collapse:collapse; min-width:720px; }
table.data th,table.data td{ padding:13px 16px; text-align:left; font-size:.85rem; border-bottom:1px solid var(--line); }
table.data th{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr{ cursor:pointer; transition:background .2s var(--ease); }
table.data tbody tr:hover{ background:var(--sand); }