/* ============================================================
   NX BOATS · CIALAKE — Configurador de lead
   Faixa da marca escura + corpo claro (papel e tinta marinha).
   Princípios: contraste suficiente, pouca cor saturada,
   movimento curto e previsível.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* superfícies claras — o corpo da página */
  --papel:       #F4F6F9;   /* fundo */
  --papel-2:     #EDF1F5;   /* fundo rebaixado */
  --carta:       #FFFFFF;   /* cartões e painéis */

  /* superfície escura — só a faixa da marca */
  --breu:        #0C1826;
  --breu-linha:  rgba(255,255,255,.11);
  --breu-forte:  rgba(255,255,255,.20);
  --breu-texto:  rgba(255,255,255,.52);
  --breu-texto2: rgba(255,255,255,.78);

  /* traços */
  --linha:       rgba(14,27,42,.10);
  --linha-forte: rgba(14,27,42,.20);

  /* texto */
  --tinta:       #0E1B2A;
  --tinta-2:     #47596C;   /* 7,1:1 sobre o papel */
  --tinta-3:     #5C6D82;   /* rotulos pequenos: passa em AA sobre papel, papel-2 e carta */

  /* acento — um único azul-marinho esverdeado, em duas luminosidades */
  --mar:         #0B6B85;   /* sobre claro */
  --mar-escuro:  #085468;
  --mar-claro:   #4FC7DE;   /* sobre escuro */
  --mar-tenue:   #EDF5F8;   /* fundo de item selecionado */
  --mar-fio:     rgba(11,107,133,.30);

  /* laranja — chamariz dos opcionais */
  --laranja:       #E2610B;   /* cheio: icone, borda, contagem */
  --laranja-forte: #C4520A;   /* hover */
  --laranja-texto: #A8460A;   /* texto pequeno: passa em AA */
  --laranja-tenue: #FFF3E8;   /* fundo */
  --laranja-fio:   rgba(226,97,11,.45);

  /* atenção */
  --ambar:       #8A6109;
  --ambar-tenue: #FDF6E7;
  --ambar-fio:   rgba(138,97,9,.28);
  --erro:        #B4283F;

  /* elevação — suave e sempre na mesma direção */
  --sombra-1: 0 1px 2px rgba(14,27,42,.05);
  --sombra-2: 0 1px 2px rgba(14,27,42,.05), 0 6px 16px -8px rgba(14,27,42,.14);

  /* tipografia */
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --corpo:   'Sora', 'Segoe UI', sans-serif;

  /* movimento — curto, sem exagero */
  --mola:    cubic-bezier(.22,1,.36,1);
  --calmo:   cubic-bezier(.4,0,.2,1);
  --rapido:  .18s;
  --medio:   .3s;
  --lento:   .46s;

  /* métrica */
  --raio:    14px;
  --raio-sm: 9px;
  --painel-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
/* .btn é inline-flex e venceria o display:none do atributo hidden */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  min-height:100dvh;
  font-family:var(--corpo);
  font-weight:350;
  font-size:15px;
  line-height:1.55;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
  padding-bottom:calc(var(--painel-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

/* leve variação de luz no fundo — sem textura, sem ruído */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -12%, #FFFFFF 0%, transparent 58%),
    radial-gradient(900px 620px at 92% 106%, #E6EEF3 0%, transparent 60%);
}

::selection{ background:var(--mar); color:#fff }

/* ---------- 2. Tipografia base ---------- */
h1,h2,h3,.rotulo,.chapeu{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
}
h1{ font-size:clamp(1.8rem,4.8vw,2.85rem); letter-spacing:-.015em }
h2{ font-size:clamp(1.35rem,3.2vw,1.95rem); letter-spacing:-.01em }
h3{ font-size:1rem; letter-spacing:.03em }

.chapeu{
  font-size:.68rem; font-weight:600; letter-spacing:.22em;
  color:var(--mar); font-variation-settings:'wdth' 105;
  display:flex; align-items:center; gap:.7rem;
}
.chapeu::before{ content:''; width:26px; height:2px; background:var(--mar); border-radius:2px }

.legenda{ color:var(--tinta-2); font-size:.94rem; max-width:62ch; margin-top:.7rem }
.legenda b{ color:var(--tinta); font-weight:500 }

.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }

/* ---------- 3. Faixa da marca (escura) + trilha ---------- */
.topo{
  position:sticky; top:0; z-index:40;
  padding:.9rem clamp(1rem,4vw,2.6rem) 0;
  background:var(--breu);
  box-shadow:0 6px 18px -14px rgba(14,27,42,.55);
}
.marcas{
  display:flex; align-items:center; gap:clamp(.8rem,2.4vw,1.5rem);
  padding-bottom:.85rem;
}
.marca{ display:block; width:auto }
.marca--nx{ height:26px }
.marca--cia{ height:21px; opacity:.72 }
.marca-sep{ width:1px; height:22px; background:var(--breu-forte) }
.marcas-fim{ margin-left:auto; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--breu-texto); font-family:var(--display);
  font-variation-settings:'wdth' 105; font-weight:600 }

.trilha{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:clamp(.35rem,1.4vw,.9rem);
  border-top:1px solid var(--breu-linha); padding-top:.7rem; padding-bottom:.75rem;
}
.trilha-item{
  display:flex; flex-direction:column; gap:.5rem;
  font-family:var(--display); font-variation-settings:'wdth' 104;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--breu-texto);
  transition:color var(--medio) var(--calmo);
  text-align:left; background:none; border:0; cursor:default; padding:0;
}
.trilha-item .barra{
  height:3px; border-radius:3px; background:var(--breu-linha);
  position:relative; overflow:hidden;
}
.trilha-item .barra::after{
  content:''; position:absolute; inset:0; border-radius:3px;
  background:var(--mar-claro);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lento) var(--mola);
}
.trilha-item.feito{ color:var(--breu-texto2); cursor:pointer }
.trilha-item.feito .barra::after{ transform:scaleX(1); opacity:.45 }
.trilha-item.atual{ color:var(--mar-claro) }
.trilha-item.atual .barra::after{ transform:scaleX(1) }
.trilha-item.feito:hover{ color:var(--mar-claro) }
.trilha-item:focus-visible{ outline:2px solid var(--mar-claro); outline-offset:3px; border-radius:3px }
.trilha-item .texto{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:640px){ .trilha-item .texto{ font-size:0 } .trilha-item .texto::first-letter{ font-size:.62rem } }

/* ---------- 4. Palco / etapas ---------- */
.palco{
  max-width:1180px; margin-inline:auto;
  padding:clamp(1.6rem,4.5vw,3.2rem) clamp(1rem,4vw,2.6rem) 2rem;
}
.etapa{ display:none }
.etapa.ativa{ display:block }

/* entrada em cascata — deslocamento curto, para não cansar a vista */
.etapa.ativa > .rev{
  animation:sobe var(--lento) var(--calmo) backwards;
  animation-delay:calc(var(--i,0) * 40ms + 30ms);
}
.etapa.saindo{ animation:some var(--rapido) var(--calmo) forwards }

@keyframes sobe{ from{ opacity:0; transform:translate3d(0,10px,0) } to{ opacity:1; transform:none } }
@keyframes some{ to{ opacity:0 } }

.cabecalho{ margin-bottom:clamp(1.6rem,4vw,2.4rem) }
.cabecalho h1,.cabecalho h2{ margin-top:.8rem }

/* ---------- 5. Etapa 1 · grade de barcos ---------- */
.frota{
  display:grid; gap:clamp(.9rem,1.8vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
}
.barco{
  position:relative; display:block; width:100%; text-align:left;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--carta); overflow:hidden; cursor:pointer;
  color:inherit; font:inherit; padding:0;
  box-shadow:var(--sombra-1);
  transition:transform var(--medio) var(--calmo), border-color var(--medio) var(--calmo),
             box-shadow var(--medio) var(--calmo);
}
.barco:hover{ transform:translateY(-2px); box-shadow:var(--sombra-2) }
.barco:focus-visible{ outline:2px solid var(--mar); outline-offset:3px }
.barco.escolhido{ border-color:var(--mar); box-shadow:0 0 0 1px var(--mar), var(--sombra-2) }

.barco-foto{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--papel-2) }
.barco-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--lento) var(--calmo);
}
.barco:hover .barco-foto img{ transform:scale(1.025) }

.barco-selo{
  position:absolute; z-index:2; top:.7rem; right:.7rem;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--linha-forte); background:rgba(255,255,255,.94);
  display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:transform var(--medio) var(--mola), opacity var(--rapido) var(--calmo),
             background var(--medio) var(--calmo), border-color var(--medio) var(--calmo);
}
.barco-selo svg{ width:13px; height:13px; stroke:#fff; stroke-width:3;
  fill:none; stroke-linecap:round; stroke-linejoin:round }
.barco.escolhido .barco-selo{ opacity:1; transform:scale(1);
  background:var(--mar); border-color:var(--mar) }

/* o nome fica abaixo da foto, sobre o branco — mais legível que sobre a imagem */
.barco-info{
  position:relative; z-index:2;
  padding:.95rem 1.1rem 1.05rem;
  border-top:1px solid var(--linha);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.barco-modelo{ display:block; font-family:var(--display); font-variation-settings:'wdth' 118;
  font-weight:700; font-size:1.5rem; letter-spacing:-.02em; line-height:1; color:var(--tinta) }
.barco-pes{ display:block; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-3); margin-top:.4rem; font-family:var(--display); font-weight:600 }
.barco-ver{ flex-shrink:0; display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; border:1px solid var(--linha-forte);
  transition:background var(--medio) var(--calmo), border-color var(--medio) var(--calmo) }
.barco-ver svg{ width:16px; height:16px; stroke:var(--tinta-2); stroke-width:2.2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--medio) var(--calmo) }
.barco:hover .barco-ver{ background:var(--mar); border-color:var(--mar) }
.barco:hover .barco-ver svg{ stroke:#fff }
.barco.escolhido .barco-ver{ background:var(--mar); border-color:var(--mar) }
.barco.escolhido .barco-ver svg{ stroke:#fff }

/* ---------- 6. Etapa 2 · configurações ---------- */
.faixa-barco{
  position:relative; border-radius:var(--raio); overflow:hidden;
  border:1px solid var(--linha); margin-bottom:1.8rem;
  min-height:150px; display:flex; align-items:flex-end;
  background:var(--carta); box-shadow:var(--sombra-1);
}
.faixa-barco img{
  position:absolute; top:0; bottom:0; right:0; left:auto;
  width:58%; height:100%; object-fit:cover;
}
/* esfumado só na borda esquerda da foto — o resto da imagem fica limpo */
.faixa-barco::after{
  content:''; position:absolute; top:0; bottom:0; left:36%; width:24%;
  background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 100%);
}
@media (max-width:640px){
  .faixa-barco img{ width:46% }
  .faixa-barco::after{ left:26%; width:28% }
}

.faixa-conteudo{ position:relative; z-index:2; padding:1.3rem 1.4rem;
  display:flex; align-items:center; gap:1rem; width:100%; max-width:58% }
@media (max-width:640px){ .faixa-conteudo{ max-width:66% } }
.faixa-conteudo .modelo{ font-family:var(--display); font-variation-settings:'wdth' 120;
  font-weight:700; font-size:clamp(1.65rem,4.2vw,2.3rem); letter-spacing:-.02em;
  line-height:1; color:var(--tinta) }

.grupo-cfg{ margin-bottom:1.7rem }
.grupo-titulo{
  display:flex; align-items:center; gap:.85rem; margin-bottom:.8rem;
  font-family:var(--display); font-variation-settings:'wdth' 106;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-2);
}
.grupo-titulo::after{ content:''; flex:1; height:1px; background:var(--linha) }

.opcoes{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) }

.opcao{
  position:relative; display:flex; align-items:center; gap:.95rem;
  padding:.9rem 1.05rem; cursor:pointer;
  border:1px solid var(--linha); border-radius:var(--raio-sm);
  background:var(--carta);
  transition:border-color var(--rapido) var(--calmo), background var(--rapido) var(--calmo),
             box-shadow var(--rapido) var(--calmo);
}
.opcao:hover{ border-color:var(--linha-forte); box-shadow:var(--sombra-1) }
.opcao:has(input:focus-visible){ outline:2px solid var(--mar); outline-offset:2px }
.opcao input{ position:absolute; opacity:0; pointer-events:none }

.marca-radio,.marca-check{
  flex-shrink:0; width:19px; height:19px; position:relative;
  border:1.5px solid var(--linha-forte); background:var(--carta);
  transition:border-color var(--rapido) var(--calmo), background var(--rapido) var(--calmo);
}
.marca-radio{ border-radius:50% }
.marca-check{ border-radius:5px }
.marca-radio::after{
  content:''; position:absolute; inset:4px; border-radius:50%;
  background:#fff; transform:scale(0);
  transition:transform var(--medio) var(--mola);
}
.marca-check::after{
  content:''; position:absolute; left:5.5px; top:2px;
  width:5px; height:10px; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(42deg) scale(0);
  transition:transform var(--medio) var(--mola);
}
.opcao input:checked ~ .marca-radio,
.opcao input:checked ~ .marca-check{ background:var(--mar); border-color:var(--mar) }
.opcao input:checked ~ .marca-radio::after{ transform:scale(1) }
.opcao input:checked ~ .marca-check::after{ transform:rotate(42deg) scale(1) }
.opcao:hover .marca-radio,.opcao:hover .marca-check{ border-color:var(--tinta-3) }

.opcao-texto{ flex:1; min-width:0 }
.opcao-nome{ font-size:.9rem; line-height:1.35; font-weight:400; color:var(--tinta) }
.opcao:has(input:checked){ border-color:var(--mar); background:var(--mar-tenue) }
.opcao:has(input:checked) .opcao-nome{ font-weight:500 }

/* ---------- 7. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.92rem 1.6rem; border:1px solid transparent; border-radius:var(--raio-sm);
  font-family:var(--display); font-variation-settings:'wdth' 108;
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; position:relative;
  transition:background var(--rapido) var(--calmo), border-color var(--rapido) var(--calmo),
             color var(--rapido) var(--calmo), box-shadow var(--rapido) var(--calmo),
             opacity var(--rapido) var(--calmo);
}
.btn:focus-visible{ outline:2px solid var(--mar); outline-offset:3px }

.btn--agua{ background:var(--mar); color:#fff; box-shadow:var(--sombra-1) }
.btn--agua:hover{ background:var(--mar-escuro); box-shadow:var(--sombra-2) }

.btn--linha{ background:var(--carta); border-color:var(--linha-forte); color:var(--tinta) }
.btn--linha:hover{ border-color:var(--mar); color:var(--mar) }

.btn--fantasma{ background:transparent; color:var(--tinta-2); padding-inline:.7rem }
.btn--fantasma:hover{ color:var(--tinta) }

.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--papel-2); color:var(--tinta-3); border-color:transparent;
  cursor:not-allowed; pointer-events:none; box-shadow:none;
}
.btn svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* botao adicionais — laranja, para saltar aos olhos quando libera */
.abre-adicionais{
  display:flex; align-items:center; gap:1.1rem; width:100%;
  margin-top:.4rem; padding:1.15rem 1.3rem; cursor:pointer; text-align:left;
  border:1.5px solid var(--laranja); border-radius:var(--raio);
  background:var(--laranja-tenue); color:inherit; font:inherit;
  box-shadow:0 1px 2px rgba(168,70,10,.08), 0 6px 16px -10px rgba(226,97,11,.45);
  transition:border-color var(--medio) var(--calmo), background var(--medio) var(--calmo),
             box-shadow var(--medio) var(--calmo);
}
.abre-adicionais:not([disabled]):hover{
  background:#FFE8D5; border-color:var(--laranja-forte);
  box-shadow:0 2px 4px rgba(168,70,10,.10), 0 12px 26px -12px rgba(226,97,11,.55);
}
.abre-adicionais:focus-visible{ outline:2px solid var(--laranja-forte); outline-offset:3px }

/* enquanto a configuracao nao for escolhida, fica claramente apagado */
.abre-adicionais[disabled]{
  background:var(--papel-2); border:1px dashed var(--linha-forte);
  cursor:not-allowed; box-shadow:none;
}

.abre-adicionais .aa-icone{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--laranja); border:0; display:grid; place-items:center;
  transition:background var(--medio) var(--calmo);
}
.abre-adicionais:not([disabled]):hover .aa-icone{ background:var(--laranja-forte) }
.abre-adicionais .aa-icone svg{ width:18px; height:18px; stroke:#fff; stroke-width:2.4;
  fill:none; stroke-linecap:round }
.abre-adicionais[disabled] .aa-icone{ background:transparent; border:1px solid var(--linha-forte) }
.abre-adicionais[disabled] .aa-icone svg{ stroke:var(--tinta-3); stroke-width:2 }

.aa-titulo{ display:block; font-family:var(--display); font-variation-settings:'wdth' 110;
  font-weight:700; font-size:.88rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--laranja-texto) }
.abre-adicionais[disabled] .aa-titulo{ color:var(--tinta-2) }
.aa-sub{ display:block; font-size:.8rem; color:var(--tinta-2); margin-top:.2rem }
.aa-contagem{ margin-left:auto; flex-shrink:0; text-align:right }
.aa-contagem b{ font-family:var(--display); font-variation-settings:'wdth' 108;
  font-size:1.45rem; font-weight:700; color:var(--laranja); display:block; line-height:1 }
.abre-adicionais[disabled] .aa-contagem b{ color:var(--tinta-3) }
.aa-contagem span{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--laranja-texto); font-family:var(--display); font-weight:700;
  font-variation-settings:'wdth' 104; white-space:nowrap }

/* seta: deixa claro que o bloco abre alguma coisa */
.aa-seta{ flex-shrink:0; display:grid; place-items:center; width:22px; height:22px }
.aa-seta svg{ width:20px; height:20px; stroke:var(--laranja); stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--medio) var(--mola) }
.abre-adicionais:not([disabled]):hover .aa-seta svg{ transform:translateX(3px) }
.abre-adicionais[disabled] .aa-seta svg{ stroke:var(--tinta-3) }

/* halo de uma vez so, quando os adicionais acabam de liberar */
@keyframes acender{
  from{ box-shadow:0 0 0 0 rgba(226,97,11,.5) }
  to  { box-shadow:0 0 0 16px rgba(226,97,11,0) }
}
.abre-adicionais.acendeu{ animation:acender 1s var(--calmo) 2 }
@media (prefers-reduced-motion:reduce){ .abre-adicionais.acendeu{ animation:none } }
.abre-adicionais[disabled] .aa-contagem span{ color:var(--tinta-3) }

/* ---------- 8. Gaveta de adicionais ---------- */
.veu{
  position:fixed; inset:0; z-index:60; background:rgba(12,24,38,.34);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity var(--medio) var(--calmo), visibility var(--medio);
}
.veu.aberto{ opacity:1; visibility:visible }

.gaveta{
  position:fixed; z-index:61; right:0; top:0; bottom:0; width:min(560px,100%);
  display:flex; flex-direction:column;
  background:var(--papel);
  border-left:1px solid var(--linha-forte);
  box-shadow:-24px 0 60px -30px rgba(14,27,42,.4);
  transform:translate3d(100%,0,0); visibility:hidden;
  transition:transform var(--lento) var(--mola), visibility var(--lento);
}
.gaveta.aberta{ transform:none; visibility:visible }
@media (max-width:720px){
  .gaveta{ right:0; left:0; top:auto; width:auto; height:92dvh;
    border-left:0; border-top:1px solid var(--linha-forte);
    border-radius:20px 20px 0 0; transform:translate3d(0,100%,0) }
}

.gaveta-topo{ padding:1.35rem 1.4rem 1rem; border-bottom:1px solid var(--linha);
  background:var(--carta); flex-shrink:0 }
.gaveta-topo .linha1{ display:flex; align-items:flex-start; gap:1rem }
.gaveta-fechar{
  margin-left:auto; flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--linha-forte); background:var(--carta); cursor:pointer;
  display:grid; place-items:center; color:var(--tinta-2);
  transition:color var(--rapido) var(--calmo), border-color var(--rapido) var(--calmo),
             background var(--rapido) var(--calmo) }
.gaveta-fechar:hover{ color:var(--tinta); border-color:var(--tinta-3); background:var(--papel-2) }
.gaveta-fechar:focus-visible{ outline:2px solid var(--mar); outline-offset:2px }
.gaveta-fechar svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round }

.busca{ position:relative; margin-top:1rem }
.busca svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:15px; height:15px; stroke:var(--tinta-3); stroke-width:2; fill:none }
.busca input{
  width:100%; padding:.72rem .9rem .72rem 2.4rem;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--raio-sm);
  color:var(--tinta); font-family:var(--corpo); font-size:.88rem;
  transition:border-color var(--rapido) var(--calmo), background var(--rapido) var(--calmo),
             box-shadow var(--rapido) var(--calmo) }
.busca input:focus{ outline:none; border-color:var(--mar); background:var(--carta);
  box-shadow:0 0 0 3px var(--mar-tenue) }
.busca input::placeholder{ color:var(--tinta-3) }

.gaveta-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:1.2rem 1.4rem 1.6rem; scrollbar-width:thin;
  scrollbar-color:var(--linha-forte) transparent }
.gaveta-corpo::-webkit-scrollbar{ width:8px }
.gaveta-corpo::-webkit-scrollbar-thumb{ background:var(--linha-forte); border-radius:8px }

.gaveta-corpo .opcoes{ grid-template-columns:1fr }
.oculto{ display:none !important }
.vazio{ text-align:center; color:var(--tinta-2); padding:2.4rem 0; font-size:.88rem }

.gaveta-rodape{
  flex-shrink:0; padding:1rem 1.4rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha); background:var(--carta);
  display:flex; align-items:center; gap:1rem;
}
.gaveta-rodape .sub{ flex:1; min-width:0 }
.gaveta-rodape .sub span{ display:block; font-family:var(--display);
  font-variation-settings:'wdth' 106; font-weight:700; font-size:.78rem;
  letter-spacing:.06em; color:var(--tinta) }

/* ---------- 9. Cartões de escolha (troca / pagamento) ---------- */
.cartoes{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.cartao{
  position:relative; cursor:pointer; padding:1.35rem 1.3rem;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--carta); box-shadow:var(--sombra-1);
  transition:border-color var(--rapido) var(--calmo), box-shadow var(--rapido) var(--calmo),
             background var(--rapido) var(--calmo);
  display:flex; flex-direction:column; gap:.45rem;
}
.cartao:hover{ border-color:var(--linha-forte); box-shadow:var(--sombra-2) }
.cartao input{ position:absolute; opacity:0; pointer-events:none }
.cartao:has(input:checked){ border-color:var(--mar); background:var(--mar-tenue);
  box-shadow:0 0 0 1px var(--mar) }
.cartao:has(input:focus-visible){ outline:2px solid var(--mar); outline-offset:2px }
.cartao-topo{ display:flex; align-items:center; gap:.8rem }
.cartao-titulo{ font-family:var(--display); font-variation-settings:'wdth' 110;
  font-weight:700; font-size:.94rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta) }
.cartao-desc{ font-size:.85rem; color:var(--tinta-2); line-height:1.5 }
/* o .marca-radio fica dentro de .cartao-topo, então o combinador ~ precisa descer até ele */
.cartao input:checked ~ .cartao-topo .marca-radio{ background:var(--mar); border-color:var(--mar) }
.cartao input:checked ~ .cartao-topo .marca-radio::after{ transform:scale(1) }
.cartao:hover .marca-radio{ border-color:var(--tinta-3) }

/* ---------- 10. Campos ---------- */
.gaveta-condicional{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows var(--lento) var(--calmo), opacity var(--medio) var(--calmo),
             margin-top var(--lento) var(--calmo);
  margin-top:0;
}
.gaveta-condicional > div{ overflow:hidden; min-height:0 }
.gaveta-condicional.aberta{ grid-template-rows:1fr; opacity:1; margin-top:1.5rem }

.campos{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.campo{ display:flex; flex-direction:column; gap:.45rem }
.campo.largo{ grid-column:1/-1 }
.campo label{
  font-family:var(--display); font-variation-settings:'wdth' 104;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-2);
}
.campo label .opt{ color:var(--tinta-3); letter-spacing:.06em; font-weight:600 }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.82rem .95rem;
  background:var(--carta); border:1px solid var(--linha-forte); border-radius:var(--raio-sm);
  color:var(--tinta); font-family:var(--corpo); font-size:.95rem; font-weight:350;
  transition:border-color var(--rapido) var(--calmo), box-shadow var(--rapido) var(--calmo);
}
.campo textarea{ resize:vertical; min-height:96px; line-height:1.55 }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--mar); box-shadow:0 0 0 3px var(--mar-tenue) }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--tinta-3) }
.campo input.moeda{ font-family:var(--display); font-variation-settings:'wdth' 106;
  font-weight:700; font-size:1.05rem }
.campo.erro input,.campo.erro textarea,.campo.erro select{ border-color:var(--erro) }
.campo.erro input:focus,.campo.erro textarea:focus{ box-shadow:0 0 0 3px rgba(180,40,63,.12) }
.campo .aviso-campo{ font-size:.74rem; color:var(--erro) }

/* ---------- 11. Avisos ---------- */
.aviso{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.95rem 1.1rem; border-radius:var(--raio-sm);
  border:1px solid var(--linha); background:var(--carta);
  font-size:.84rem; color:var(--tinta-2); line-height:1.55;
}
.aviso svg{ flex-shrink:0; width:16px; height:16px; margin-top:.15rem;
  stroke:var(--mar); stroke-width:2; fill:none; stroke-linecap:round }
.aviso b{ color:var(--tinta); font-weight:500 }
.aviso--limite{ border-color:var(--ambar-fio); background:var(--ambar-tenue) }
.aviso--limite svg{ stroke:var(--ambar) }
.aviso--limite b{ color:var(--ambar) }

/* ---------- 12. Resumo ---------- */
.resumo{
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--carta); overflow:hidden; box-shadow:var(--sombra-1);
}
.resumo-secao{ padding:1.05rem 1.25rem; border-bottom:1px solid var(--linha) }
.resumo-secao:last-child{ border-bottom:0 }
.resumo-secao > h3{ font-size:.62rem; font-weight:700; letter-spacing:.18em;
  color:var(--tinta-3); margin-bottom:.7rem }
.linha-resumo{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.32rem 0; font-size:.87rem; color:var(--tinta);
}
.linha-resumo .rot{ color:var(--tinta-2); min-width:0 }
.linha-resumo .val{ text-align:right; font-family:var(--display);
  font-variation-settings:'wdth' 106; font-weight:700; font-size:.9rem; flex-shrink:0 }
.resumo-secao .linha-resumo .rot{ color:var(--tinta) }
.resumo-secao h3 + .linha-resumo{ margin-top:-.1rem }

/* ---------- 13. Painel de investimento (fixo) ---------- */
.painel{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  min-height:var(--painel-h);
  padding:.75rem clamp(1rem,4vw,2.6rem) calc(.75rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:clamp(.8rem,2.5vw,1.8rem);
  background:rgba(255,255,255,.93);
  border-top:1px solid var(--linha-forte);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 -8px 28px -18px rgba(14,27,42,.32);
  transform:translate3d(0,105%,0);
  transition:transform var(--lento) var(--mola);
}
.painel.visivel{ transform:none }
.painel-esq{ flex:1; min-width:0 }
.painel-modelo{
  font-family:var(--display); font-variation-settings:'wdth' 110;
  font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.painel-detalhe{ font-size:.74rem; color:var(--tinta-2); margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.painel-dir{ display:flex; align-items:center; flex-shrink:0 }
@media (max-width:520px){
  .painel{ flex-wrap:wrap; row-gap:.7rem }
  .painel-esq{ flex-basis:100%; order:-1 }
  .painel-dir{ width:100% }
  .painel-dir .btn{ width:100% }
}

/* ---------- 14. Navegação entre etapas ---------- */
.nav-etapa{ display:flex; align-items:center; gap:.8rem; margin-top:2rem; flex-wrap:wrap }
.nav-etapa .espaco{ flex:1 }

/* ---------- 15. Tela final ---------- */
.final{ text-align:center; padding:clamp(2rem,8vw,4.5rem) 0; max-width:640px; margin-inline:auto }
.final-anel{
  width:84px; height:84px; margin:0 auto 2rem; border-radius:50%;
  border:1px solid var(--mar-fio); display:grid; place-items:center;
  background:var(--mar-tenue);
}
.final-anel svg{ width:32px; height:32px; stroke:var(--mar); stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40; animation:risca .7s var(--calmo) .2s forwards }
@keyframes risca{ to{ stroke-dashoffset:0 } }
.final .protocolo{
  display:inline-block; margin-top:1.8rem; padding:.6rem 1.2rem;
  border:1px dashed var(--linha-forte); border-radius:var(--raio-sm);
  font-family:var(--display); font-variation-settings:'wdth' 106;
  font-size:.78rem; letter-spacing:.14em; color:var(--tinta-2); background:var(--carta);
}
.final .protocolo b{ color:var(--mar) }
.final .contagem{
  margin-top:1.6rem; font-size:.84rem; color:var(--tinta-3);
}
.final .contagem b{ color:var(--tinta-2); font-variant-numeric:tabular-nums }

/* ---------- 16. Carregando ---------- */
.girando{ display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:gira .7s linear infinite }
@keyframes gira{ to{ transform:rotate(360deg) } }

/* ---------- 17. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .etapa.ativa > .rev{ animation:none }
}