/* =====================================================================
   Rei do Digital — Design System (Bolos Caseiros)
   Tokens, reset, tipografia, botões, formulários e utilitários.
   ===================================================================== */

:root{
  /* --- Paleta da marca (Bolos Caseiros) --- */
  /* O nome dos tokens continua sendo --pink por compatibilidade com todo o
     CSS já escrito. Aqui eles valem caramelo/doce de leite, não rosa. */
  --pink:#D2551E;
  --pink-600:#A93E13;
  /* --pink-300 é usada como COR DE TEXTO em badges e botões suaves. No tema
     claro precisa ser escura o bastante para ler; no escuro, clara. */
  --pink-300:#B8480F;
  --pink-100:#FBE3CE;
  --gold:#C79A3F;
  --dark:#241610;
  --dark-2:#33211A;
  --dark-3:#432B21;
  --white:#FFFFFF;
  --light:#FFF7EF;

  /* --- TEMA CLARO (padrão) --- */
  --bg:#FFFAF3;
  --surface:#FFFFFF;
  --surface-2:#FBF0E3;
  --line:#EEDCC8;
  --text:#241610;
  --text-muted:#6E5A4B;
  --gray:#94826F;
  --gray-200:#6E5A4B;
  --glass:rgba(255,255,255,.88);
  --glass-2:rgba(255,255,255,.95);
  --field-bg:#FFFFFF;
  --track:rgba(36,22,16,.10);
  --chip:rgba(36,22,16,.06);
  --hover:rgba(36,22,16,.035);
  --success:#1B9E6E;
  --warning:#B57900;
  --danger:#C4331D;
  --err-bg:#FCEDE8; --err-bd:#F1C7B8; --err-tx:#8E2A12;
  --ok-bg:#E8F8F1;  --ok-bd:#B2E6D0;  --ok-tx:#0F6B4B;
  --info-bg:#FDF0E4;--info-bd:#F5D3B2; --info-tx:#9A4413;
  --shadow:0 10px 34px rgba(88,52,28,.12);
  --shadow-pink:0 10px 28px rgba(210,85,30,.28);
  --grad:linear-gradient(135deg,#D2551E 0%,#F0913F 55%,#A93E13 100%);
  --grad-soft:linear-gradient(135deg,rgba(210,85,30,.10),rgba(240,145,63,.05));

  /* Formas */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;

  /* Espaço */
  --gut:20px;
  --max:1160px;

  /* Fraunces só é carregada na página de vendas; nas demais o fallback serif
     resolve sem custo de rede. */
  --font-display:'Fraunces','Georgia','Times New Roman',serif;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* --- TEMA ESCURO --- */
:root[data-theme="dark"]{
  --bg:#1A100B;
  --surface:#241610;
  --surface-2:#33211A;
  --line:#432B21;
  --text:#FFFFFF;
  --text-muted:#C6B4A5;
  --gray:#8A7768;
  --gray-200:#C6B4A5;
  --glass:rgba(26,16,11,.86);
  --glass-2:rgba(36,22,16,.95);
  --field-bg:rgba(255,255,255,.04);
  --track:rgba(255,255,255,.08);
  --chip:rgba(255,255,255,.07);
  --hover:rgba(255,255,255,.05);
  --pink-300:#F5A35C;
  --success:#3DDC97;
  --warning:#FFC24B;
  --danger:#FF7A5C;
  --err-bg:rgba(255,122,92,.12); --err-bd:rgba(255,122,92,.40); --err-tx:#FFD3C6;
  --ok-bg:rgba(61,220,151,.10);  --ok-bd:rgba(61,220,151,.35);  --ok-tx:#C6F5E2;
  --info-bg:rgba(240,145,63,.12);--info-bd:rgba(240,145,63,.32); --info-tx:#FBE3CE;
  --shadow:0 12px 40px rgba(0,0,0,.42);
  --shadow-pink:0 12px 32px rgba(210,85,30,.34);
  --grad-soft:linear-gradient(135deg,rgba(210,85,30,.18),rgba(240,145,63,.07));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.18;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(28px,6vw,52px)}
h2{font-size:clamp(24px,4.6vw,38px)}
h3{font-size:clamp(19px,3vw,24px)}
p{margin:0 0 1em}
small{font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:var(--pink);color:#fff}

/* Foco visível — acessibilidade */
:focus-visible{outline:3px solid var(--pink-300);outline-offset:2px;border-radius:6px}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

/* ---------------------------------------------------------------
   Botões
   --------------------------------------------------------------- */
.btn{
  --btn-bg:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:0;border-radius:var(--r-full);
  background:var(--btn-bg);color:#fff;font-weight:800;font-size:16px;
  cursor:pointer;text-align:center;line-height:1.2;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  box-shadow:var(--shadow-pink);min-height:52px;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn--block{display:flex;width:100%}
.btn--lg{padding:20px 36px;font-size:18px;min-height:60px}
.btn--ghost{--btn-bg:transparent;border:1.5px solid var(--line);box-shadow:none;color:var(--text)}
.btn--ghost:hover{border-color:var(--pink);background:rgba(210,85,30,.08)}
.btn--soft{--btn-bg:rgba(210,85,30,.12);color:var(--pink-300);box-shadow:none}
.btn--light{--btn-bg:#fff;color:var(--dark);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn--success{--btn-bg:linear-gradient(135deg,#3DDC97,#22B27A);box-shadow:0 12px 28px rgba(61,220,151,.28)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Pulso discreto no CTA principal */
@media (prefers-reduced-motion:no-preference){
  .btn--pulse{animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 12px 32px rgba(210,85,30,.32)}50%{box-shadow:0 12px 46px rgba(210,85,30,.55)}}
}

/* ---------------------------------------------------------------
   Formulários
   --------------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--text-muted);letter-spacing:.01em}
.input,select.input,textarea.input{
  width:100%;padding:15px 16px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--field-bg);color:var(--text);
  font-size:16px;transition:border-color .15s,background .15s;
}
.input::placeholder{color:var(--gray)}
.input:focus{outline:none;border-color:var(--pink);background:rgba(210,85,30,.06)}
.input[aria-invalid="true"]{border-color:var(--danger)}
textarea.input{min-height:120px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2377717A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field-hint{font-size:12.5px;color:var(--gray);margin-top:6px}
.field-error{font-size:13px;color:var(--danger);margin-top:6px;font-weight:600}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r);transition:.15s}
.check:hover{border-color:var(--pink-300)}
.check input{margin-top:3px;accent-color:var(--pink);width:18px;height:18px}
.check--on{border-color:var(--pink);background:rgba(210,85,30,.08)}

/* ---------------------------------------------------------------
   Componentes comuns
   --------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-full);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.badge--pink{background:rgba(210,85,30,.16);color:var(--pink-300)}
.badge--green{background:rgba(61,220,151,.14);color:var(--success)}
.badge--gray{background:var(--chip);color:var(--text-muted)}
.badge--solid{background:var(--grad);color:#fff;box-shadow:var(--shadow-pink)}

.alert{padding:15px 18px;border-radius:var(--r);font-size:14.5px;margin-bottom:18px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.alert--error{background:var(--err-bg);border-color:var(--err-bd);color:var(--err-tx)}
.alert--success{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.alert--info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info-tx)}

.progress{height:10px;background:var(--track);border-radius:var(--r-full);overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad);border-radius:var(--r-full);transition:width .5s cubic-bezier(.4,0,.2,1)}
.progress--thin{height:6px}

.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Utilitários */
.stack>*+*{margin-top:var(--stack,16px)}
.row{display:flex;gap:12px;align-items:center}
.row--between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grid{display:grid;gap:16px}
.text-center{text-align:center}
.muted{color:var(--text-muted)}
.small{font-size:13.5px}
.pink{color:var(--pink-300)}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:767px){.hide-mobile{display:none!important}}
@media (min-width:768px){.hide-desktop{display:none!important}}

/* Player responsivo 16:9 */
.player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.player{border-radius:0;border-left:0;border-right:0}}

/* Toast de conquista */
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-bottom));z-index:120;display:flex;flex-direction:column;gap:10px;width:calc(100% - 32px);max-width:420px;pointer-events:none}
.toast{display:flex;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--pink);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);animation:toastIn .35s cubic-bezier(.2,.9,.3,1.3)}
.toast b{display:block;font-size:14.5px}
.toast span{font-size:13px;color:var(--text-muted)}
.toast i{font-style:normal;font-size:26px;line-height:1}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:768px){.toast-wrap{bottom:24px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------
   Ícones SVG
   --------------------------------------------------------------- */
.ico{width:20px;height:20px;flex:none;display:block}
.ico--sm{width:15px;height:15px}
.ico--lg{width:26px;height:26px}
.ico--xl{width:40px;height:40px;margin:0 auto 10px}
.ico-badge{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--grad-soft);border:1px solid rgba(210,85,30,.28);color:var(--pink-300)}
.btn .ico{width:18px;height:18px}