/* Variante "fit": carregada DEPOIS de visual.css.
   Todo tamanho que ocupa altura passa a ser multiplicado por --fit (1 = tamanho normal).
   assets/visual-fit.js mede cada etapa e reduz --fit só o necessário para o botão caber.
   Cada valor tem um piso legível (max(...)): quando o piso é atingido, a tela aceita rolar. */

:root{
  --fit:1;
  --gap:max(6px,calc(clamp(10px,1.55vh,16px) * var(--fit)));
  --pad-y:max(6px,calc(clamp(10px,1.7vh,16px) * var(--fit)));
  --fs-h1:max(17px,calc(clamp(20px,3.05vh,27px) * var(--fit)));
  --fs-body:max(12px,calc(clamp(13px,1.85vh,15px) * var(--fit)));
  --fs-sub:max(11px,calc(clamp(11.5px,1.6vh,13.5px) * var(--fit)));
  --h-btn:max(46px,calc(clamp(52px,7.2vh,64px) * var(--fit)));
  --fs-btn:max(15px,calc(clamp(16.5px,2.25vh,19px) * var(--fit)));
  --h-opt:max(50px,calc(clamp(62px,8.8vh,76px) * var(--fit)));
  --gap-opt:max(7px,calc(clamp(10px,1.7vh,16px) * var(--fit)));
}
@media (max-height:740px){
  :root{
    --gap:max(6px,calc(clamp(8px,1.25vh,12px) * var(--fit)));
    --pad-y:max(6px,calc(clamp(8px,1.3vh,12px) * var(--fit)));
  }
}
@media (max-width:359px){ h1.q{font-size:max(17px,calc(23px * var(--fit)))} }

/* ---------- opções ---------- */
.option{padding:max(8px,calc(clamp(11px,1.6vh,15px) * var(--fit))) 16px}
.option .emo{font-size:max(21px,calc(27px * var(--fit)))}
.option .t{font-size:max(14px,calc(clamp(16px,2.25vh,18px) * var(--fit)))}
.option .d{font-size:max(11px,calc(clamp(12px,1.7vh,13px) * var(--fit)));margin-top:max(2px,calc(4px * var(--fit)))}

/* ---------- botão travado ---------- */
.primary.locked{font-size:max(13.5px,calc(15.5px * var(--fit)));min-height:max(46px,calc(60px * var(--fit)))}

/* ---------- vídeos e imagem grande: são a maior alavanca de altura ---------- */
.screen > .video-unit{width:calc(100% * var(--fit));margin-inline:auto}
.screen > img,.screen > picture{width:calc(100% * var(--fit));margin-inline:auto}
/* Reserva altura para título, apresentação e formulário da etapa de nome. */
.screen > picture > img{width:100%;max-height:max(120px,calc((100vh - 360px) * var(--fit)));object-fit:contain}
.rail-caption{font-size:max(12px,calc(clamp(13px,1.85vh,15px) * var(--fit)))}

/* ---------- depoimentos: vídeo no centro, borda do vizinho à vista e pontos embaixo ---------- */
/* Cada depoimento ocupa uma coluna "slot" = vídeo + folga, sem gap entre colunas: assim o passo do
   carrossel é a largura da coluna e a legenda de visual.js continua acertando o índice.
   As colunas das pontas empurram o primeiro e o último vídeo para o centro.
   Conta (R = largura do carrossel, w = vídeo, p = fresta do vizinho):
   folga g = (R - w)/2 - p · slot = w + g · ponta = (R - slot)/2 */
.rail{
  --slide:calc(min(22vh,200px) * var(--fit));
  --peek:34px;
  margin-inline:-18px;                 /* largura toda: a fresta encosta na borda da tela */
  column-gap:0;
  grid-auto-columns:unset;
  grid-template-columns:
    calc((100% - var(--slide)) / 4 + var(--peek) / 2)
    repeat(2, calc(50% + var(--slide) / 2 - var(--peek)))
    calc((100% - var(--slide)) / 4 + var(--peek) / 2);
}
.rail::before,.rail::after{content:""}
@media(max-width:359px){ .rail{margin-inline:-15px} }
.rail > figure{position:relative;justify-items:center;scroll-snap-align:center}
/* --d vem de visual-fit.js: 0 = no centro, 1 = um passo para o lado. Segue o dedo, sem degrau. */
.rail > figure > .video-unit{width:var(--slide);
  transform:scale(calc(1 - .08 * var(--d,0)));opacity:calc(1 - .5 * var(--d,0))}
/* Por cima do vizinho: o toque traz ele para o centro em vez de dar play pela metade. */
.rail > figure.dim::after{content:"";position:absolute;inset:0;z-index:5;cursor:pointer}
/* Arrasto com mouse (visual-fit.js): mãozinha no carrossel e snap desligado enquanto segura. */
.rail{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* arrastar não pinta seleção azul */
@media (hover:hover) and (pointer:fine){ .rail{cursor:grab} }
.rail.arrastando{scroll-snap-type:none;cursor:grabbing}
.rail.arrastando > figure::after{cursor:grabbing}

.dots{display:flex;justify-content:center;gap:7px;margin-top:calc(max(6px,10px * var(--fit)) - var(--gap))}
.dots button{position:relative;width:calc(8px + 16px * (1 - var(--d,1)));height:8px;padding:0;border:0;border-radius:99px;background:#d3dcd7}
.dots button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cta);opacity:calc(1 - var(--d,1))}
.dots button::before{content:"";position:absolute;inset:-10px -5px}   /* área de toque maior sem gastar altura */

/* ---------- medidor ---------- */
.meter svg{max-width:calc(290px * var(--fit))}
.rd.goal .n{font-size:max(32px,calc(44px * var(--fit)))}

/* ---------- formulário ---------- */
/* O campo mantém 17px de fonte: abaixo de 16px o Safari do iPhone dá zoom ao tocar. */
.field{gap:max(4px,calc(7px * var(--fit)))}
.field label{font-size:max(13px,calc(15px * var(--fit)))}
.shell input{height:max(48px,calc(60px * var(--fit)))}
.hint{font-size:max(11.5px,calc(13px * var(--fit)));min-height:calc(18px * var(--fit))}
.trust{font-size:max(11px,calc(12px * var(--fit)))}

/* ---------- resultado ---------- */
/* Espaço curto DENTRO de cada bloco e o espaço normal ENTRE blocos:
   título + alerta · explicação · ficha + nota da ficha · chamada + botão. */
.verdict{gap:max(6px,calc(10px * var(--fit)))}
.verdict h1{font-size:max(17px,calc(23px * var(--fit)))}
.verdict h1{text-wrap:pretty}          /* sem palavra sozinha na última linha */
/* Texto do alerta no mesmo vermelho do símbolo e da borda. */
.verdict .tag{color:var(--danger);font-size:max(13px,calc(15.5px * var(--fit)));padding:max(9px,calc(13px * var(--fit))) 15px}
/* O alerta cabe em UMA linha: o texto mede 19,4× a fonte e sobra (largura − 72px) ao lado do ícone.
   Navegador sem unidade de container fica com a linha de cima. */
.verdict{container-type:inline-size}
.verdict .tag{font-size:max(11px,min(max(13px,calc(15.5px * var(--fit))),calc((100cqi - 72px) / 19.6)))}
.verdict .tag svg{width:max(18px,calc(23px * var(--fit)));height:max(18px,calc(23px * var(--fit)))}
.doc + .docfoot{margin-top:calc(max(4px,7px * var(--fit)) - var(--gap))}
.docfoot + p.body + .primary{margin-top:calc(max(4px,8px * var(--fit)) - var(--gap))}

.doc-h{padding:max(6px,calc(clamp(8px,1.25vh,11px) * var(--fit))) 14px}
/* Ficha em linhas alinhadas: rótulo à esquerda, valor à direita, fio fino entre elas. */
.doc dl{padding:max(1px,calc(3px * var(--fit))) 14px;gap:0}
.row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;
  padding:max(3px,calc(clamp(4px,.62vh,6px) * var(--fit))) 0;border-top:1px solid #edf1ee;
  font-size:max(12px,calc(clamp(13.5px,1.9vh,15px) * var(--fit)))}
.row:first-child{border-top:0}
.row dt{white-space:nowrap}
.row dt::after{content:none}
.row dd{text-align:right}

.docfoot{align-items:flex-start;font-size:max(11px,calc(12.5px * var(--fit)))}
.docfoot svg{margin-top:.15em}
/* Em telas muito baixas, compacta o relatório sem reduzir o tamanho das letras. */
@media (max-height:600px){
  .row{padding:1px 0}
  .verdict ~ p.body,.docfoot{line-height:1.2}
}

/* ---------- oferta ---------- */
/* Título em manchete (versão B): preto + a dor em vermelho com traço feito à mão, seta desenhada no
   lugar do emoji 👇 (que muda de cara em cada celular). O markup vem de visual-fit.js; mesmo texto. */
.offer-title{display:grid;justify-items:center;gap:0;color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.2;
  font-size:max(17px,calc(clamp(19px,2.75vh,23px) * var(--fit)))}
.offer-title .dor{position:relative;color:var(--danger);padding-bottom:max(4px,calc(6px * var(--fit)))}
.offer-title .dor svg{position:absolute;left:-2%;bottom:0;width:104%;height:max(7px,calc(9px * var(--fit)));overflow:visible}
.offer-title .dor path{fill:none;stroke:var(--danger);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:traco 850ms var(--ease) 350ms forwards}
@keyframes traco{to{stroke-dashoffset:0}}
.offer-title .seta{width:max(20px,calc(26px * var(--fit)));height:max(20px,calc(26px * var(--fit)));margin-top:max(2px,calc(4px * var(--fit)));
  fill:none;stroke:var(--danger);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:seta 1.2s ease-in-out infinite}
@keyframes seta{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* A seta já faz a ponte até o vídeo: o espaço até ele fica curto. */
.offer-title + .video-unit{margin-top:calc(max(2px,4px * var(--fit)) - var(--gap))}

/* FisioNexo: logo próprio e legenda literal; só o texto "x de 7" fica oculto (visual.css), a barra aparece. */
.depoimento-copy{text-align:center!important;white-space:pre-line}
.brand:has(.back[hidden]) .spacer{display:none}

/* Só a oitava etapa usa a largura e a rolagem originais da landing. */
.etapa-oferta #shell{max-width:none}
.etapa-oferta .topbar{max-width:520px;margin-inline:auto}
.etapa-oferta #app{padding:0;overflow:visible}
.etapa-oferta #app > .screen{display:block}
.etapa-oferta{scroll-padding-top:24px;scroll-padding-bottom:24px}
.oferta-viewer-open{overflow:hidden}