/* =========================================================
   Caviar Criativo · Briefing de Website
   Sistema da marca: preto profundo + dourado, tipografia Gogh.
   Layout: trilho fixo à esquerda (etapas e progresso) e palco
   de leitura à direita, uma etapa por vez.
   ========================================================= */

@font-face{ font-family:'Gogh'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Gogh-Book.woff2') format('woff2'); }
@font-face{ font-family:'Gogh'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Gogh-Medium.woff2') format('woff2'); }
@font-face{ font-family:'Gogh'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Gogh-Bold.woff2') format('woff2'); }

:root{
  /* cor (mesmos valores da LP Caviar IDV) */
  --ink:#000000;
  --navy:#131211;          /* superfície elevada */
  --navy-up:#1c1a18;       /* segundo nível */
  --paper:#f7f4ef;
  --gold:#d59c4e;
  --gold-1:#d9a638;
  --gold-2:#c0824d;
  --gold-ink:#8f5e1e;      /* dourado legível sobre claro (AA) */
  --grad-gold:linear-gradient(100deg,var(--gold-1),var(--gold-2));
  --gold-soft:rgba(213,156,78,.12);
  --gold-line:rgba(213,156,78,.45);

  --on-dark:#f2eee8;
  --on-dark-mut:#ada7a0;
  --on-dark-dim:#8d867e;
  --line:rgba(242,238,232,.12);
  --line-strong:rgba(242,238,232,.22);
  --line-gold:rgba(213,156,78,.16);
  --field:rgba(242,238,232,.035);
  --warn:#e8a07a;

  /* tipo */
  --f:'Gogh',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-h1:clamp(1.85rem,3.6vw,2.9rem);
  --t-h2:clamp(1.35rem,2.2vw,1.75rem);
  --t-body:clamp(1rem,1.05vw,1.0625rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.1875rem);
  --t-small:.875rem;
  --t-micro:.75rem;

  /* espaço e movimento */
  --rail-w:300px;
  --read:46rem;
  --r:2px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.4s;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--f); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
a{ color:var(--gold); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--gold); color:#160f04; }

.skip{ position:absolute; left:1rem; top:-4rem; z-index:50; background:var(--gold); color:#160f04; padding:.6rem 1rem; text-decoration:none; }
.skip:focus{ top:1rem; }

/* ---------- estrutura ---------- */
.app{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; min-height:100dvh; }

/* ---------- trilho ---------- */
.rail{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; gap:2rem;
  padding:2rem 1.75rem; border-right:1px solid var(--line-gold);
  background:linear-gradient(180deg,var(--navy) 0%,var(--ink) 100%);
  overflow-y:auto;
}
.rail__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.rail__logo img{ width:150px; height:auto; }
.rail__toggle{ display:none; }

.rail__bar{ height:2px; background:var(--line); overflow:hidden; }
.rail__bar span{ display:block; height:100%; width:0; background:var(--grad-gold); transition:width .6s var(--ease); }
.rail__pct{ margin:.6rem 0 0; font-size:var(--t-small); color:var(--on-dark-mut); font-variant-numeric:tabular-nums; }
.rail__pct strong{ color:var(--on-dark); font-weight:500; }

.rail__label{ margin:0 0 .9rem; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-dim); }
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; position:relative; }
.steps::before{ /* linha vertical que liga as etapas */
  content:''; position:absolute; left:.8rem; top:1rem; bottom:1rem; width:1px; background:var(--line);
}
.step{
  position:relative; display:flex; align-items:center; gap:.9rem; width:100%;
  padding:.55rem .5rem .55rem 0; background:none; border:0; text-align:left; cursor:pointer;
  color:var(--on-dark-mut); transition:color var(--dur) var(--ease);
}
.step:hover{ color:var(--on-dark); }
.step__dot{
  position:relative; z-index:1; flex:0 0 auto; width:1.6rem; height:1.6rem;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--ink);
  font-size:.6875rem; font-variant-numeric:tabular-nums; color:var(--on-dark-dim);
  transition:all var(--dur) var(--ease);
}
.step__dot svg{ width:.8rem; height:.8rem; fill:none; stroke:#160f04; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.step__name{ font-size:.9375rem; }
.step__meta{ margin-left:auto; font-size:var(--t-micro); color:var(--on-dark-dim); font-variant-numeric:tabular-nums; }
.step[aria-current="step"]{ color:var(--on-dark); }
.step[aria-current="step"] .step__dot{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.step.is-done .step__dot{ background:var(--grad-gold); border-color:transparent; }
.step.is-pend .step__dot{ border-color:var(--warn); color:var(--warn); }

.rail__foot{ margin-top:auto; display:flex; flex-direction:column; gap:.75rem; font-size:var(--t-small); color:var(--on-dark-dim); }
.rail__foot p{ margin:0; }
.rail__help a{ color:var(--on-dark-mut); text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.rail__help a:hover{ color:var(--gold); }
.saved{ display:flex; align-items:center; gap:.45rem; }
.saved svg{ width:.95rem; height:.95rem; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- palco ---------- */
.stage{ position:relative; min-width:0; outline:none; overflow:hidden; }
.stage::before{ /* brilho dourado discreto no canto, atmosfera da marca */
  content:''; position:absolute; top:-30vh; right:-20vw; width:70vw; height:70vh; pointer-events:none;
  background:radial-gradient(closest-side,rgba(213,156,78,.09),transparent);
}
.stage__inner{
  position:relative; max-width:calc(var(--read) + 4rem);
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1rem,5vw,4rem) 4rem;
  margin-inline:auto;
}
.stage__inner > *{ animation:entra .6s var(--ease) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(12px); } }

/* cabeçalho de etapa */
.eyebrow{
  display:flex; align-items:center; gap:.75rem; margin:0;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.eyebrow::before{ content:''; width:2rem; height:1px; background:var(--gold-line); }
.eyebrow span{ color:var(--on-dark-dim); letter-spacing:.08em; }
.h1{
  margin:1.1rem 0 0; font-size:var(--t-h1); font-weight:400; line-height:1.12;
  text-transform:uppercase; letter-spacing:.02em; text-wrap:balance;
}
.h1 em, .h2 em{
  font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ margin:1.1rem 0 0; max-width:40rem; font-size:var(--t-lead); color:var(--on-dark-mut); line-height:1.55; }

.sep{ height:1px; margin:2.75rem 0; background:linear-gradient(90deg,var(--gold-line),transparent 70%); }

/* ---------- perguntas ---------- */
.qs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1.5rem; }
.q{ grid-column:1 / -1; min-width:0; display:flex; flex-direction:column; gap:.7rem; }
.q--meia{ grid-column:span 1; }
.q.is-new{ animation:entra .5s var(--ease) both; }
.q__label{ font-size:1.0625rem; font-weight:500; line-height:1.4; color:var(--on-dark); }
.q__label .req{ color:var(--gold); margin-left:.2rem; }
.q__label .opt{ margin-left:.5rem; font-size:var(--t-micro); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-dim); }
.q__hint{ margin:-.35rem 0 0; font-size:var(--t-small); color:var(--on-dark-mut); line-height:1.5; }
.q__err{ margin:0; font-size:var(--t-small); color:var(--warn); display:flex; gap:.4rem; align-items:center; }
.q.has-err .inp{ border-color:var(--warn); }

fieldset.q{ border:0; padding:0; margin:0; }
fieldset.q > legend{ padding:0; margin-bottom:.7rem; }

/* inputs */
.inp{
  width:100%; padding:.95rem 1rem; min-height:52px;
  background:var(--field); border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--on-dark); line-height:1.5;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.inp::placeholder{ color:var(--on-dark-dim); opacity:1; }
.inp:hover{ border-color:rgba(242,238,232,.32); }
.inp:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); background:rgba(213,156,78,.03); }
textarea.inp{ min-height:7.5rem; resize:vertical; overflow:hidden; }
input[type="date"].inp{ min-height:52px; }
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.8) sepia(.6) saturate(3) hue-rotate(350deg); cursor:pointer; }

.nao-sei{
  align-self:flex-start; padding:0; background:none; border:0; cursor:pointer;
  font-size:var(--t-small); color:var(--on-dark-dim);
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px;
}
.nao-sei:hover{ color:var(--gold); text-decoration-color:var(--gold-line); }

/* chips (escolha e multi) */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.6rem 1rem; border:1px solid var(--line-strong); border-radius:var(--r);
  background:transparent; cursor:pointer; font-size:.9375rem; line-height:1.3; text-align:left;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .15s var(--ease);
}
.chip:hover{ border-color:rgba(213,156,78,.55); }
.chip:active{ transform:scale(.97); }
.chip__mark{
  flex:0 0 auto; width:.95rem; height:.95rem; display:grid; place-items:center;
  border:1px solid var(--line-strong); transition:all var(--dur) var(--ease);
}
.chip--radio .chip__mark{ border-radius:50%; }
.chip__mark svg{ width:.65rem; height:.65rem; fill:none; stroke:#160f04; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.chip[aria-checked="true"], .chip[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold-soft); color:var(--on-dark); }
.chip[aria-checked="true"] .chip__mark, .chip[aria-pressed="true"] .chip__mark{ background:var(--grad-gold); border-color:transparent; }
.chip[aria-checked="true"] .chip__mark svg, .chip[aria-pressed="true"] .chip__mark svg{ opacity:1; }
.chip__x{ margin-left:.15rem; color:var(--on-dark-dim); font-size:1.1rem; line-height:1; }
.chip.is-shake{ animation:shake .35s; }
@keyframes shake{ 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }

.add{ display:flex; gap:.5rem; margin-top:.25rem; max-width:28rem; }
.add .inp{ min-height:44px; padding:.6rem .9rem; }
.btn-add{
  flex:0 0 auto; min-height:44px; padding:0 1rem; border:1px dashed var(--gold-line); border-radius:var(--r);
  background:none; color:var(--gold); cursor:pointer; font-size:.9375rem;
  transition:background-color var(--dur) var(--ease);
}
.btn-add:hover{ background:var(--gold-soft); }

/* cards de escolha */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr)); gap:.75rem; }
.card{
  /* display:block de propósito: o Safari do iPhone não estica filhos de um <button> flex */
  position:relative; display:block; width:100%; padding:1.15rem 1.15rem 1.25rem;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--field);
  cursor:pointer; text-align:left; transition:all var(--dur) var(--ease);
}
.card:hover{ border-color:rgba(213,156,78,.55); background:rgba(213,156,78,.04); }
.card__t{ display:block; font-weight:500; font-size:1rem; padding-right:1.5rem; }
.card__d{ display:block; margin-top:.35rem; font-size:var(--t-small); color:var(--on-dark-mut); line-height:1.45; }
.card__a{ /* o "A" da Caviar marca a opção escolhida */
  position:absolute; top:1rem; right:1rem; width:1rem; height:1rem; opacity:0; transform:scale(.6);
  transition:all var(--dur) var(--ease);
}
.card[aria-checked="true"], .card[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold-soft); }
.card[aria-checked="true"] .card__a, .card[aria-pressed="true"] .card__a{ opacity:1; transform:none; }

/* estilos visuais (prévias desenhadas em CSS) */
.moods{ grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr)); }
.mood{ padding:0; overflow:hidden; }
/* Safari do iPhone não estica os filhos de um <button> flex: sem largura explícita a prévia fica com largura zero */
.mood__body{ display:block; padding:.9rem 1rem 1.05rem; text-align:left; }
.mood__body .card__d{ margin-top:.3rem; }
.mood__prev{ position:relative; display:block; width:100%; height:104px; overflow:hidden; border-bottom:1px solid var(--line); }
.mood__prev i{ position:absolute; display:block; }
.mood .card__a{ top:auto; bottom:1rem; }
/* exemplos reais de marcas (etapa Forma): cards maiores, imagem inteira sobre fundo branco */
.moods--img{ grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); }
.moods--img .mood__prev{ height:auto; aspect-ratio:2.2 / 1; background:#fff; }
.moods--img .mood__prev.pv-livre{ background:#131211; }
.mood__prev--img img{ display:block; width:100%; height:100%; object-fit:contain; }

.pv-mini{ background:#f4f3f0; }
.pv-mini i:nth-child(1){ left:14%; top:30%; width:46%; height:7px; background:#1b1b1b; }
.pv-mini i:nth-child(2){ left:14%; top:46%; width:30%; height:4px; background:#bdbab4; }
.pv-mini i:nth-child(3){ left:14%; top:64%; width:18%; height:12px; border:1px solid #1b1b1b; }
.pv-mini i:nth-child(4){ right:12%; top:26%; width:22%; height:50%; background:#e3e0da; }

.pv-luxo{ background:#0b0a09; }
.pv-luxo i:nth-child(1){ left:50%; top:22%; width:34px; height:30px; transform:translateX(-50%); background:linear-gradient(100deg,#d9a638,#c0824d); clip-path:polygon(50% 0,100% 100%,82% 100%,50% 32%,18% 100%,0 100%); }
.pv-luxo i:nth-child(2){ left:30%; top:66%; width:40%; height:3px; background:#d59c4e; }
.pv-luxo i:nth-child(3){ left:38%; top:76%; width:24%; height:2px; background:#5a5248; }
.pv-luxo i:nth-child(4){ inset:8px; border:1px solid rgba(213,156,78,.35); }

.pv-tech{ background:#05080f; background-image:linear-gradient(rgba(80,160,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(80,160,255,.12) 1px,transparent 1px); background-size:14px 14px; }
.pv-tech i:nth-child(1){ left:12%; top:24%; width:52%; height:34px; border:1px solid #47a3ff; border-radius:6px; box-shadow:0 0 14px rgba(71,163,255,.45); }
.pv-tech i:nth-child(2){ left:18%; top:36%; width:30%; height:4px; background:#9fd0ff; border-radius:2px; }
.pv-tech i:nth-child(3){ right:12%; top:24%; width:20%; height:20%; border-radius:50%; background:radial-gradient(circle,#7ef0ff,#1f6fff); filter:blur(1px); }
.pv-tech i:nth-child(4){ left:12%; bottom:16%; width:76%; height:3px; background:linear-gradient(90deg,#47a3ff,transparent); }

.pv-org{ background:#efe6d8; }
.pv-org i:nth-child(1){ left:10%; top:18%; width:48%; height:64%; border-radius:48% 52% 40% 60% / 55% 45% 55% 45%; background:#c9a882; }
.pv-org i:nth-child(2){ right:12%; top:30%; width:28%; height:6px; border-radius:6px; background:#6b5640; }
.pv-org i:nth-child(3){ right:18%; top:44%; width:22%; height:4px; border-radius:4px; background:#a89276; }
.pv-org i:nth-child(4){ right:14%; top:62%; width:22%; height:14px; border-radius:14px; background:#7a8b5c; }

.pv-vibe{ background:#ff5a36; }
.pv-vibe i:nth-child(1){ left:-6%; top:-20%; width:58%; height:90%; border-radius:50%; background:#ffd23f; }
.pv-vibe i:nth-child(2){ right:8%; top:20%; width:30%; height:44%; background:#3a1cff; transform:rotate(12deg); }
.pv-vibe i:nth-child(3){ left:18%; bottom:14%; width:44%; height:9px; background:#111; }
.pv-vibe i:nth-child(4){ right:22%; bottom:10%; width:16px; height:16px; border-radius:50%; background:#fff; }

.pv-corp{ background:#ffffff; }
.pv-corp i:nth-child(1){ left:0; top:0; right:0; height:22%; background:#14284b; }
.pv-corp i:nth-child(2){ left:10%; top:36%; width:24%; height:42%; background:#e6ebf3; }
.pv-corp i:nth-child(3){ left:38%; top:36%; width:24%; height:42%; background:#e6ebf3; }
.pv-corp i:nth-child(4){ left:66%; top:36%; width:24%; height:42%; background:#2f6fd6; }

.pv-edit{ background:#f1ede6; }
.pv-edit i:nth-child(1){ left:8%; top:14%; width:58%; height:38%; background:repeating-linear-gradient(180deg,#141414 0 10px,transparent 10px 15px); }
.pv-edit i:nth-child(2){ left:8%; top:62%; width:26%; height:24%; background:repeating-linear-gradient(180deg,#8a857c 0 2px,transparent 2px 6px); }
.pv-edit i:nth-child(3){ left:38%; top:62%; width:26%; height:24%; background:repeating-linear-gradient(180deg,#8a857c 0 2px,transparent 2px 6px); }
.pv-edit i:nth-child(4){ right:8%; top:14%; width:24%; height:72%; background:#c4502e; }

/* prévias da etapa de forma (identidade visual) */
.pv-sep{ background:#f1ede6; }
.pv-sep i:nth-child(1){ left:16%; top:26%; width:40px; height:40px; border-radius:50%; background:linear-gradient(100deg,#d9a638,#c0824d); }
.pv-sep i:nth-child(2){ left:46%; top:34%; width:38%; height:11px; background:#16130f; }
.pv-sep i:nth-child(3){ left:46%; top:54%; width:24%; height:4px; background:#9a948a; }
.pv-sep i:nth-child(4){ left:16%; top:74%; width:68%; height:1px; background:repeating-linear-gradient(90deg,#9a948a 0 4px,transparent 4px 8px); }
.pv-junto{ background:#f1ede6; }
.pv-junto i:nth-child(1){ left:22%; top:36%; width:58%; height:24px; background:#16130f; }
.pv-junto i:nth-child(2){ left:15%; top:26%; width:44px; height:44px; border-radius:50%; background:linear-gradient(100deg,#d9a638,#c0824d); mix-blend-mode:multiply; }
.pv-junto i:nth-child(3){ left:30%; top:70%; width:40%; height:4px; background:#9a948a; }
.pv-letras{ background:#f1ede6; }
.pv-letras i:nth-child(1){ left:18%; top:36%; width:64%; height:26px; background:repeating-linear-gradient(90deg,#16130f 0 11px,transparent 11px 15px); }
.pv-letras i:nth-child(2){ left:34%; top:72%; width:32%; height:3px; background:#9a948a; }
.pv-livre{ background:#131211; }
.pv-livre i:nth-child(1){ inset:0; display:grid; place-items:center; }
.pv-livre i:nth-child(1)::after{ content:'?'; font-size:46px; line-height:1; color:#d59c4e; font-family:var(--f); }
.pv-amostra{ display:grid; place-items:center; background:#f4f1ec; color:#16130f; font-size:36px; line-height:1; }
.pv-amostra span{ display:block; }
.pv-serif span{ font-family:Georgia,'Times New Roman',serif; }
.pv-sans span{ font-family:'Helvetica Neue',Arial,sans-serif; font-weight:500; }
.pv-script span{ font-family:'Snell Roundhand','Apple Chancery','Brush Script MT',cursive; font-size:42px; }
.pv-bold span{ font-family:Impact,'Arial Narrow',sans-serif; letter-spacing:.04em; }
.pv-round span{ font-family:'Arial Rounded MT Bold','Varela Round','Trebuchet MS',sans-serif; }
.pv-thin span{ font-family:'Helvetica Neue',Arial,sans-serif; font-weight:200; letter-spacing:.28em; font-size:30px; }
.pv-retro{ background:#e8dcc0; }
.pv-retro i:nth-child(1){ left:50%; top:50%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; border:3px solid #8b3a2b; }
.pv-retro i:nth-child(2){ left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; border:1px solid #8b3a2b; }
.pv-retro i:nth-child(3){ left:20%; top:46%; width:60%; height:12px; background:#2f4a3a; }
.pv-ludico{ background:#ffe9a8; }
.pv-ludico i:nth-child(1){ left:14%; top:22%; width:46px; height:46px; border-radius:50%; background:#ff7aa8; }
.pv-ludico i:nth-child(2){ left:46%; top:30%; width:44px; height:44px; background:#3bb3ff; border-radius:12px; transform:rotate(14deg); }
.pv-ludico i:nth-child(3){ left:66%; top:20%; width:0; height:0; border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:40px solid #3ccf91; }
.pv-ludico i:nth-child(4){ left:30%; bottom:12%; width:40%; height:8px; border-radius:8px; background:#16130f; }

/* réguas de personalidade */
.scales{ display:flex; flex-direction:column; gap:.4rem; border-top:1px solid var(--line); }
.scale{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) 7.5rem; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.scale__l, .scale__r{ font-size:.9375rem; color:var(--on-dark-dim); transition:color var(--dur) var(--ease); }
.scale__r{ text-align:right; }
.scale__l.on, .scale__r.on{ color:var(--on-dark); }
.scale__mid{ display:flex; flex-direction:column; gap:.35rem; }
.scale__out{ text-align:center; font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-dim); min-height:1.2em; }
.scale.is-set .scale__out{ color:var(--gold); }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; cursor:pointer; }
.range::-webkit-slider-runnable-track{ height:1px; background:linear-gradient(90deg,var(--line-strong),var(--line-strong)); }
.range::-moz-range-track{ height:1px; background:var(--line-strong); }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; margin-top:-10px; border-radius:50%;
  background:var(--ink); border:1px solid var(--on-dark-dim); transition:all .25s var(--ease);
}
.range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--ink); border:1px solid var(--on-dark-dim); }
.scale.is-set .range::-webkit-slider-thumb{ background:var(--grad-gold); border-color:transparent; box-shadow:0 0 0 5px var(--gold-soft); }
.scale.is-set .range::-moz-range-thumb{ background:var(--gold); border-color:transparent; }
.ticks{ display:flex; justify-content:space-between; padding:0 9px; margin-top:-14px; pointer-events:none; }
.ticks i{ width:1px; height:7px; background:var(--line-strong); }

/* matriz de materiais */
.matrix{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.mrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.mrow__t{ font-size:.9375rem; }
.seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); }
.seg button{
  min-height:38px; padding:.4rem .8rem; background:none; border:0; border-left:1px solid var(--line-strong);
  font-size:.8125rem; color:var(--on-dark-mut); cursor:pointer; white-space:nowrap; transition:all var(--dur) var(--ease);
}
.seg button:first-child{ border-left:0; }
.seg button:hover{ color:var(--on-dark); }
.seg button[aria-checked="true"]{ background:var(--gold-soft); color:var(--gold); }

/* repetidor */
.rep{ display:flex; flex-direction:column; gap:.6rem; }
.rep__row{ display:grid; grid-template-columns:2rem minmax(0,1fr) minmax(0,1.4fr) 2.75rem; gap:.5rem; align-items:center; }
.rep__n{ font-size:var(--t-micro); color:var(--on-dark-dim); font-variant-numeric:tabular-nums; }
.rep__del{
  width:2.75rem; height:2.75rem; display:grid; place-items:center; background:none;
  border:1px solid transparent; border-radius:var(--r); color:var(--on-dark-dim); cursor:pointer;
}
.rep__del:hover{ border-color:var(--line-strong); color:var(--warn); }
.rep__del svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.rep .btn-add{ align-self:flex-start; margin-left:2.5rem; }

/* cores */
.swatches{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.sw{ display:flex; align-items:center; gap:.5rem; padding:.35rem .4rem .35rem .35rem; border:1px solid var(--line-strong); border-radius:var(--r); }
.sw input[type="color"]{ width:2.6rem; height:2.6rem; padding:0; border:0; background:none; cursor:pointer; }
.sw input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.sw input[type="color"]::-webkit-color-swatch{ border:1px solid var(--line-strong); border-radius:var(--r); }
.sw input[type="color"]::-moz-color-swatch{ border:1px solid var(--line-strong); border-radius:var(--r); }
.sw .inp{ width:6.5rem; min-height:40px; padding:.45rem .6rem; font-variant-numeric:tabular-nums; text-transform:uppercase; }
.sw .rep__del{ width:2.4rem; height:2.4rem; }

/* aceite */
.check{ display:flex; gap:.85rem; align-items:flex-start; cursor:pointer; font-size:.9375rem; color:var(--on-dark-mut); line-height:1.5; }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check__box{ flex:0 0 auto; width:1.35rem; height:1.35rem; margin-top:.1rem; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:var(--r); transition:all var(--dur) var(--ease); }
.check__box svg{ width:.8rem; height:.8rem; fill:none; stroke:#160f04; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.check input:checked + .check__box{ background:var(--grad-gold); border-color:transparent; }
.check input:checked + .check__box svg{ opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--gold); outline-offset:3px; }

/* aviso */
.note{
  display:flex; gap:1rem; padding:1.1rem 1.25rem; border:1px solid var(--line-gold); border-radius:var(--r);
  background:linear-gradient(100deg,rgba(213,156,78,.08),transparent); font-size:.9375rem; color:var(--on-dark-mut);
}
.note img{ width:1.1rem; height:1.1rem; margin-top:.2rem; flex:0 0 auto; }
.note p{ margin:0; }

/* ---------- botões ---------- */
.nav{ display:flex; align-items:center; gap:1rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line); flex-wrap:wrap; }
.nav__info{ margin-right:auto; font-size:var(--t-small); color:var(--on-dark-dim); font-variant-numeric:tabular-nums; }
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.6rem; border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:.9375rem; letter-spacing:.01em; text-decoration:none; cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform .15s var(--ease);
}
.btn:active{ transform:scale(.985); }
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease); }
.btn--gold{ background:var(--grad-gold); color:#160f04; }
.btn--gold::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--on-dark); opacity:0; transition:opacity var(--dur) var(--ease); }
.btn--gold:hover::after, .btn--gold:focus-visible::after{ opacity:1; }
.btn--gold:hover svg{ transform:translateX(3px); }
.btn--ghost{ border-color:var(--line-strong); color:var(--on-dark); background:none; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--text{ padding-inline:.25rem; color:var(--on-dark-mut); background:none; font-weight:500; }
.btn--text:hover{ color:var(--gold); }
.btn--lg{ min-height:58px; padding:1.05rem 2.1rem; font-size:1rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading svg{ animation:gira 1s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* ---------- boas-vindas ---------- */
.welcome{ position:relative; }
.welcome__a{ /* o "A" da Caviar em linha, gigante, ao fundo */
  position:absolute; right:-6%; top:-2rem; width:min(38vw,420px); opacity:.09; pointer-events:none;
}
.welcome .h1{ font-size:clamp(2.2rem,5vw,4rem); max-width:16ch; }
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:2.75rem 0 0; border-block:1px solid var(--line); }
.fact{ padding:1.3rem 1.25rem 1.3rem 0; display:flex; flex-direction:column; gap:.3rem; }
.fact + .fact{ padding-left:1.25rem; border-left:1px solid var(--line); }
.fact__v{ font-size:1.5rem; font-weight:400; color:var(--on-dark); font-variant-numeric:tabular-nums; }
.fact__v small{ font-size:.875rem; color:var(--on-dark-mut); margin-left:.2rem; }
.fact__l{ font-size:var(--t-small); color:var(--on-dark-mut); line-height:1.45; }
.prep{ margin-top:2.5rem; }
.prep__t{ margin:0 0 1rem; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-dim); }
.prep ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.5rem; }
.prep li{ position:relative; padding-left:1.4rem; font-size:.9375rem; color:var(--on-dark-mut); }
.prep li::before{ /* bullet com o símbolo Caviar */
  content:''; position:absolute; left:0; top:.4em; width:.8rem; height:.8rem;
  background:var(--grad-gold); -webkit-mask:url('../img/favicon-caviar.svg') center/contain no-repeat; mask:url('../img/favicon-caviar.svg') center/contain no-repeat;
}
.welcome__cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:2.75rem; }
.resume{ margin-top:2.75rem; padding:1.25rem 1.4rem; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--gold-soft); }
.resume p{ margin:0; }
.resume strong{ font-weight:500; color:var(--on-dark); }
.resume .welcome__cta{ margin-top:1rem; }

/* ---------- revisão ---------- */
.review{ display:flex; flex-direction:column; gap:1rem; margin-top:2.75rem; }
.rv{ border:1px solid var(--line); border-radius:var(--r); background:var(--field); }
.rv__head{ display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.rv__n{ font-size:var(--t-micro); color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.rv__t{ margin:0; font-size:1rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.rv__edit{ margin-left:auto; padding:.4rem .2rem; background:none; border:0; color:var(--on-dark-mut); cursor:pointer; font-size:var(--t-small); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-strong); }
.rv__edit:hover{ color:var(--gold); }
.rv dl{ margin:0; padding:.4rem 1.25rem 1rem; display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0 1.5rem; }
.rv dt, .rv dd{ padding:.7rem 0; border-top:1px solid var(--line); font-size:.9375rem; }
.rv dt:first-of-type, .rv dt:first-of-type + dd{ border-top:0; }
.rv dt{ color:var(--on-dark-mut); }
.rv dd{ margin:0; color:var(--on-dark); white-space:pre-line; overflow-wrap:anywhere; }
.rv dd.miss{ color:var(--warn); }
.rv__empty{ margin:0; padding:1rem 1.25rem; font-size:var(--t-small); color:var(--on-dark-dim); }

.missing{ margin-top:2rem; padding:1.1rem 1.25rem; border:1px solid rgba(232,160,122,.4); border-radius:var(--r); color:var(--on-dark-mut); font-size:.9375rem; }
.missing p{ margin:0 0 .5rem; color:var(--warn); }
.missing ul{ margin:0; padding-left:1.1rem; }
.missing button{ padding:0; background:none; border:0; color:var(--on-dark); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* ---------- conclusão ---------- */
.next{ list-style:none; margin:2.75rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line); counter-reset:passo; }
.next li{ padding:1.4rem 1.25rem 1.5rem 0; counter-increment:passo; }
.next li + li{ padding-left:1.25rem; border-left:1px solid var(--line); }
.next li::before{ content:counter(passo,decimal-leading-zero); display:block; margin-bottom:.6rem; font-size:var(--t-micro); letter-spacing:.12em; color:var(--gold); }
.next strong{ display:block; font-weight:500; margin-bottom:.3rem; }
.next span{ font-size:var(--t-small); color:var(--on-dark-mut); }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }
.contact-line{ margin-top:1.5rem; font-size:var(--t-small); color:var(--on-dark-mut); }
.contact-line strong{ color:var(--on-dark); font-weight:500; user-select:all; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(1.5rem + env(safe-area-inset-bottom,0px)); z-index:40; transform:translateX(-50%);
  padding:.8rem 1.2rem; max-width:calc(100% - 2rem); background:var(--navy-up); border:1px solid var(--line-gold); border-radius:var(--r);
  font-size:var(--t-small); box-shadow:0 12px 40px rgba(0,0,0,.5); animation:entra .4s var(--ease) both;
}

.noscript{ padding:1.25rem; border:1px solid var(--line-gold); }

/* ---------- responsivo ---------- */
@media (max-width:960px){
  .app{ grid-template-columns:minmax(0,1fr); }
  .rail{
    position:sticky; top:0; z-index:20; height:auto; gap:0; padding:.9rem 1rem .8rem;
    padding-top:calc(.9rem + env(safe-area-inset-top,0px));
    border-right:0; border-bottom:1px solid var(--line-gold); overflow:visible;
    background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .rail__logo img{ width:118px; }
  .rail__toggle{
    display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.35rem .2rem .35rem .75rem;
    background:none; border:1px solid var(--line-strong); border-radius:var(--r); cursor:pointer; font-size:var(--t-small);
  }
  .rail__toggle svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2; transition:transform var(--dur) var(--ease); }
  .rail__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .rail__progress{ margin-top:.8rem; display:flex; align-items:center; gap:.75rem; }
  .rail__bar{ flex:1; }
  .rail__pct{ margin:0; font-size:var(--t-micro); white-space:nowrap; }
  .rail__nav{ display:none; padding:1.25rem 0 .5rem; }
  .rail.is-open .rail__nav{ display:block; }
  .rail__foot{ display:none; }
  .stage::before{ width:120vw; right:-60vw; }
}
@media (max-width:640px){
  .qs{ grid-template-columns:minmax(0,1fr); }
  .q--meia{ grid-column:1 / -1; }
  .facts, .next{ grid-template-columns:minmax(0,1fr); }
  .fact + .fact, .next li + li{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .prep ul{ grid-template-columns:minmax(0,1fr); }
  .scale{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.25rem 1rem; }
  .scale__mid{ grid-column:1 / -1; grid-row:2; }
  .mrow{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .seg{ display:flex; }
  .seg button{ flex:1; white-space:normal; }
  .rep__row{ grid-template-columns:minmax(0,1fr) 2.75rem; }
  .rep__n{ display:none; }
  .rep__row .inp:nth-of-type(2){ grid-column:1; }
  .rep .btn-add{ margin-left:0; }
  .rv dl{ grid-template-columns:minmax(0,1fr); }
  .rv dd{ border-top:0; padding-top:0; }
  .nav .btn{ flex:1; }
  .nav__info{ width:100%; }
  .welcome__a{ width:60vw; right:-14%; top:-1rem; }
}

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

/* ---------- impressão: cópia do briefing em papel ---------- */
@media print{
  :root{ --on-dark:#16130f; --on-dark-mut:#5f584f; --on-dark-dim:#5f584f; --line:rgba(22,19,15,.15); --field:transparent; color-scheme:light; }
  body{ background:#fff; color:#16130f; }
  .rail, .nav, .actions, .rv__edit, .toast, .welcome__a, .stage::before, .no-print{ display:none !important; }
  .app{ display:block; }
  .stage__inner{ max-width:none; padding:0; }
  .h1 em{ color:var(--gold-ink); -webkit-text-fill-color:var(--gold-ink); background:none; }
  .rv{ break-inside:avoid; }
}

/* ---------- página inicial (escolha do briefing) ---------- */
.hub{ position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.hub::before{ content:''; position:absolute; top:-30vh; right:-20vw; width:70vw; height:70vh; pointer-events:none; background:radial-gradient(closest-side,rgba(213,156,78,.09),transparent); }
.hub__in{ position:relative; width:100%; max-width:68rem; margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) clamp(1rem,5vw,3rem) 3rem; display:flex; flex-direction:column; gap:clamp(2.5rem,6vw,4.5rem); flex:1; }
.hub__logo img{ width:150px; height:auto; }
.hub__head .h1{ font-size:clamp(2rem,4.6vw,3.6rem); max-width:16ch; }
.hub__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.hub__card{
  position:relative; display:flex; flex-direction:column; gap:1.1rem; padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--field); color:inherit; text-decoration:none;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hub__card:hover, .hub__card:focus-visible{ border-color:var(--gold); background:rgba(213,156,78,.05); transform:translateY(-3px); }
.hub__tag{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-variant-numeric:tabular-nums; }
.hub__tag span{ color:var(--on-dark-dim); letter-spacing:.06em; }
.hub__t{ margin:0; font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:400; line-height:1.15; text-transform:uppercase; letter-spacing:.02em; text-wrap:balance; }
.hub__d{ margin:0; color:var(--on-dark-mut); font-size:.9375rem; line-height:1.55; }
.hub__list{ list-style:none; margin:0; padding:1rem 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.hub__list li{ padding:.2rem .6rem; border:1px solid var(--line); font-size:var(--t-small); color:var(--on-dark-mut); }
.hub__go{ margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9375rem; color:var(--gold); }
.hub__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease); }
.hub__card:hover .hub__go svg{ transform:translateX(4px); }
.hub__foot{ font-size:var(--t-small); color:var(--on-dark-dim); }
@media (max-width:760px){ .hub__grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- vínculo entre briefings ---------- */
.vinculo{ margin-top:1.75rem; }
.vinculo:empty{ display:none; }
.vcard{ display:flex; flex-direction:column; gap:.55rem; padding:1.15rem 1.25rem; border:1px solid var(--line-gold); border-radius:var(--r); background:linear-gradient(100deg,rgba(213,156,78,.1),transparent); }
.vcard p{ margin:0; }
.vcard__t{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.vcard__c{ font-size:.9375rem; color:var(--on-dark-mut); }
.vcard__c strong{ font-weight:500; color:var(--on-dark); }
.vcard__d{ font-size:var(--t-small); color:var(--on-dark-mut); line-height:1.5; }
.vcard__warn{ font-size:var(--t-small); color:var(--warn); }
.vcard__a{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:.4rem; }
.vcard--mini{ padding:.9rem 1rem; }
.vcard--mini .vcard__a .btn{ width:100%; }
.vcard--mini .vcard__a{ flex-direction:column; align-items:stretch; gap:.15rem; }
.vcard--mini .btn--text{ min-height:36px; font-size:.8125rem; }
.welcome .vcard{ margin-top:2.5rem; max-width:34rem; }
.from{ margin-left:.6rem; padding:.12rem .5rem; border:1px solid var(--line-gold); font-size:var(--t-micro); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
@media print{ .vcard, .vinculo, .from{ display:none !important; } }