/* =====================================================================
   O Padrão Invisível do Dinheiro — Ana Garlet
   Identidade: fundo branco, texto preto, detalhes em vermelho.
   Projetado mobile-first: o celular é o uso principal.
   ===================================================================== */

:root{
  /* superfícies */
  --white:#FFFFFF;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-soft:#FBF7F8;
  --wine-tint:#FDF4F6;

  /* texto */
  --ink:#171113;
  --ink-2:#3D3236;
  --ink-soft:#6E6167;
  --ink-faint:#9A8D92;

  /* vermelho (detalhes) */
  --wine:#8C1226;
  --wine-strong:#6E0E1C;
  --wine-light:#C0304A;

  /* linhas */
  --line:#E8E0E2;
  --line-soft:#F1EAEC;

  /* ação */
  --green:#22C55E;
  --green-dark:#16A34A;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px -4px rgba(23,17,19,.10);
  --shadow-md:0 10px 30px -16px rgba(23,17,19,.22);

  --font-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;

  --max:680px;
  --pad-x:clamp(18px,5vw,28px);

  /* área segura de aparelhos com notch */
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  min-height:100svh;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  overscroll-behavior-y:none;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  /* o realce azul padrão do toque é substituído por estados :active próprios */
  -webkit-tap-highlight-color:transparent;
}

/* Fundo branco puro. Mantido no DOM para uso futuro, sem pintura própria:
   qualquer tinta aqui cria emenda visível sob a barra de progresso fixa. */
.bg-layer{display:none;}

img{max-width:100%;display:block;}

/* ---------------------------------------------------------------- topbar */
.topbar{
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad-x) 4px;
  text-align:center;
}
.brand{
  display:block;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.3em;
  color:var(--ink);
}
.brand-sub{
  display:block;
  margin-top:4px;
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--wine);
}

/* -------------------------------------------------------------- progress */
.progress-wrap{
  position:sticky;
  top:0;
  z-index:20;
  width:100%;
  padding:14px var(--pad-x) 10px;
  background:linear-gradient(180deg,var(--bg) 72%,rgba(255,255,255,0) 100%);
}
.progress{
  width:min(var(--max),100%);
  margin:0 auto;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--line-soft);
  overflow:hidden;
}
.progress-bar{
  height:100%;
  width:0;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--wine-strong) 0%,var(--wine-light) 100%);
  transition:width .55s cubic-bezier(.4,0,.2,1);
}
.progress-hint{
  margin:8px 0 0;
  font-size:.72rem;
  color:var(--ink-faint);
  text-align:center;
}

/* ------------------------------------------------------------------- app */
.app{
  flex:1;
  width:min(var(--max),100%);
  margin:0 auto;
  padding:20px var(--pad-x) 48px;
}

.screen{animation:screenIn .4s cubic-bezier(.22,.9,.3,1) both;}
@keyframes screenIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

/* Telas que contêm elementos position:fixed usam entrada SEM transform.
   Um ancestral com transform vira o bloco de contenção do fixed e o
   elemento deixa de se ancorar na viewport. */
.screen--plana{animation-name:fadeIn;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ------------------------------------------------------------------ tipo */
h1,h2,h3,h4{margin:0;line-height:1.2;color:var(--ink);}

.kicker{
  margin:0 0 12px;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--wine);
}

.q-title{
  font-size:clamp(1.3rem,5.2vw,1.6rem);
  font-weight:600;
  line-height:1.3;
  margin:0 0 8px;
  text-wrap:balance;
}
.q-help{
  margin:0 0 20px;
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.55;
}

/* o "card" agora é só espaçamento: página limpa, sem moldura desnecessária */
.card{padding:8px 0 0;}

/* ----------------------------------------------------------------- start */
.hero{text-align:center;padding-top:8px;}
.hero-photo{
  width:120px;
  height:120px;
  margin:0 auto 20px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 4px var(--wine-tint),0 12px 28px -14px rgba(23,17,19,.4);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;}

.hero .eyebrow{
  display:inline-block;
  margin-bottom:16px;
  padding:6px 15px;
  border:1px solid rgba(140,18,38,.28);
  border-radius:var(--radius-pill);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--wine);
}
.hero h1{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.7rem,7vw,2.3rem);
  line-height:1.2;
  margin:0 0 14px;
  text-wrap:balance;
}
.hero p{
  margin:0 auto 26px;
  max-width:32em;
  font-size:clamp(.95rem,3.4vw,1.02rem);
  line-height:1.65;
  color:var(--ink-soft);
}
.hero-meta{
  margin-top:16px;
  font-size:.75rem;
  color:var(--ink-faint);
}

/* --------------------------------------------------------------- botões */
.btn{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;              /* alvo de toque confortável */
  padding:16px 22px;
  border-radius:var(--radius-pill);
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn:active{transform:scale(.985);}

.btn--green{
  background:var(--green-dark);
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(22,163,74,.75);
}
.btn--green:hover{background:#15A047;}
.btn--green:active{background:#128A3D;}

.btn--wine{background:var(--wine);color:#fff;}
.btn--wine:hover{background:var(--wine-strong);}

.btn--ghost{
  width:auto;
  min-height:44px;
  padding:11px 20px;
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line);
  font-weight:500;
  font-size:.86rem;
}
.btn--ghost:hover{color:var(--ink);border-color:var(--ink-faint);}

.btn[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;}
.btn-reveal{animation:screenIn .35s ease both;}
.btn-row{margin-top:24px;display:flex;justify-content:center;}

/* Listas longas (P9): no celular o botão fica fixo no rodapé, para a pessoa
   nunca perder de vista como seguir. Em telas maiores volta ao fluxo normal. */
@media (max-width:720px){
  .btn-row--sticky{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:30;
    margin:0;
    padding:12px var(--pad-x) calc(12px + var(--safe-b));
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line-soft);
  }
  .btn-row--sticky .btn{width:min(var(--max),100%);}
  /* espaço para o último item da lista não ficar sob a barra */
  .has-fixed-action{padding-bottom:96px;}
}

/* --------------------------------------------------------------- opções */
.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.option{
  display:flex;
  align-items:flex-start;
  gap:13px;
  width:100%;
  min-height:60px;              /* nunca menor que um alvo de toque */
  text-align:left;
  padding:15px 16px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:.96rem;
  font-weight:400;
  line-height:1.5;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.option:hover{border-color:var(--wine-light);background:var(--wine-tint);}
.option:active{background:#FBE9ED;}
.option.is-selected{
  border-color:var(--wine);
  background:var(--wine-tint);
  box-shadow:0 0 0 3px rgba(140,18,38,.10);
}
.option-texto{flex:1 1 auto;min-width:0;}
.option-emoji{
  margin-right:7px;
  font-size:1.08em;
  line-height:1;
  /* garante emoji colorido em qualquer sistema */
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}

/* Base do indicador à esquerda. Hoje só a P9 usa (a caixinha de marcar):
   as alternativas de escolha única não têm mais a letra A/B/C/D. */
.option-letter{
  flex:0 0 auto;
  width:28px;
  height:28px;
  margin-top:1px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  font-size:.76rem;
  font-weight:600;
}
.option.is-selected .option-letter{background:var(--wine-strong);}

.option--check .option-letter{
  border-radius:7px;
  background:#fff;
  border:1.5px solid var(--wine);
  color:var(--wine);
  font-size:.88rem;
}
.option--check.is-selected .option-letter{background:var(--wine);color:#fff;}

/* ---------------------------------------------------------------- inputs */
.field{
  width:100%;
  min-height:56px;
  padding:15px 16px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  font-family:var(--font-sans);
  font-size:16px;               /* 16px evita o zoom automático do iOS */
  color:var(--ink);
  background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field::placeholder{color:var(--ink-faint);}
.field:focus{
  outline:none;
  border-color:var(--wine);
  box-shadow:0 0 0 3px rgba(140,18,38,.10);
}
.field-note{
  margin:10px 2px 0;
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.5;
}

:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}

/* -------------------------------------------------------- intermediárias */
.inter{
  text-align:center;
  padding:22px 0 10px;
  min-height:46vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inter .mark{
  width:40px;
  height:2px;
  background:var(--wine);
  margin:0 auto 24px;
}
.inter h2{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.4rem,5.8vw,1.9rem);
  line-height:1.3;
  color:var(--wine-strong);
  margin:0 0 18px;
  text-wrap:balance;
}
.inter p{
  margin:0 auto 13px;
  max-width:30em;
  font-size:clamp(.96rem,3.4vw,1.04rem);
  line-height:1.68;
  color:var(--ink-2);
}
.inter p strong{font-weight:600;color:var(--ink);}

.timer{
  width:110px;
  height:3px;
  margin:28px auto 0;
  background:var(--line-soft);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.timer span{
  display:block;
  height:100%;
  width:100%;
  background:var(--wine-light);
  transform-origin:left center;
  animation:timerRun linear forwards;
}
@keyframes timerRun{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* invisível E inacessível (clique/tab) até ser revelado */
.skip-row{
  margin-top:20px;
  display:flex;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  animation:revealDelayed .4s ease 2.5s forwards;
}
@keyframes revealDelayed{
  from{opacity:0;visibility:visible;transform:translateY(8px);}
  to{opacity:1;visibility:visible;transform:none;}
}

/* --------------------------------------------------------- processamento */
.processing{text-align:center;padding:16px 0 10px;}
.processing h2{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.35rem,5vw,1.7rem);
  margin:0 0 28px;
}
.steps{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:25em;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.steps li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.94rem;
  line-height:1.45;
  color:var(--ink-faint);
  transition:color .4s ease;
}
.steps li .dot{
  flex:0 0 auto;
  width:20px;height:20px;
  margin-top:2px;
  border-radius:50%;
  border:1.5px solid var(--line);
  display:grid;place-items:center;
  font-size:.64rem;
  color:transparent;
  transition:all .4s ease;
}
.steps li.is-active{color:var(--ink);}
.steps li.is-active .dot{border-color:var(--wine);animation:pulse 1s ease-in-out infinite;}
.steps li.is-done{color:var(--ink-2);}
.steps li.is-done .dot{background:var(--wine);border-color:var(--wine);color:#fff;animation:none;}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(140,18,38,.28);}
  50%{box-shadow:0 0 0 7px rgba(140,18,38,0);}
}

/* ------------------------------------------------------------------- bio */
.bio{text-align:center;padding:8px 0;}
.bio-photo{
  width:108px;height:108px;
  margin:0 auto 18px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 4px var(--wine-tint),0 12px 26px -14px rgba(23,17,19,.4);
}
.bio-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;}
.bio h2{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.3rem,5.2vw,1.65rem);
  line-height:1.32;
  color:var(--wine-strong);
  margin:0 0 18px;
  text-wrap:balance;
}
.bio p{
  margin:0 auto 13px;
  max-width:30em;
  font-size:.97rem;
  line-height:1.66;
  color:var(--ink-soft);
}
.bio .plano-line{
  margin:24px auto 0;
  max-width:30em;
  padding:15px 18px;
  border:1px solid rgba(140,18,38,.20);
  border-radius:var(--radius-md);
  background:var(--wine-tint);
  font-size:.97rem;
  color:var(--ink);
}
.bio .plano-line strong{color:var(--wine-strong);font-weight:600;}
.bio-status{
  margin:14px auto 0 !important;
  font-size:.76rem !important;
  color:var(--ink-faint) !important;
}

/* --------------------------------------------------------------- result */
.result{display:flex;flex-direction:column;gap:16px;}

.result-hero{
  background:var(--wine-tint);
  border:1px solid rgba(140,18,38,.14);
  border-radius:var(--radius-lg);
  padding:28px var(--pad-x);
  text-align:center;
}
.result-badge{
  display:inline-block;
  padding:6px 15px;
  border-radius:var(--radius-pill);
  background:var(--wine);
  color:#fff;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.result-kicker{margin:0 0 6px;font-size:.93rem;color:var(--ink-soft);}
.result-title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.7rem,7vw,2.3rem);
  line-height:1.16;
  color:var(--wine-strong);
  margin:0 0 14px;
  text-wrap:balance;
}
.result-lead{
  margin:0 auto;
  max-width:31em;
  font-size:1rem;
  line-height:1.62;
  color:var(--ink-2);
}

.block{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:24px var(--pad-x);
  box-shadow:var(--shadow-sm);
}
.block h3{
  font-size:1.06rem;
  font-weight:600;
  color:var(--wine-strong);
  margin:0 0 12px;
  line-height:1.35;
}
.block p{margin:0 0 12px;font-size:.98rem;line-height:1.68;color:var(--ink-2);}
.block p:last-child{margin-bottom:0;}
.block p strong{font-weight:600;color:var(--ink);}

.cycle{list-style:none;margin:14px 0 0;padding:0;}
.cycle li{
  position:relative;
  padding:10px 0 10px 32px;
  font-size:.94rem;
  line-height:1.5;
  color:var(--ink-2);
}
.cycle li::before{
  content:"";
  position:absolute;
  left:8px;top:19px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--wine);
}
.cycle li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:11.5px;top:29px;
  width:1.5px;
  height:calc(100% - 12px);
  background:linear-gradient(180deg,var(--wine),rgba(140,18,38,.15));
}

.tried{
  border-left:3px solid var(--wine);
  background:var(--wine-tint);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:16px 18px;
  margin-top:14px;
}
.tried p{font-size:.95rem;margin-bottom:10px;}
.tried p:last-child{margin-bottom:0;}

.assoc{
  border:1px dashed rgba(140,18,38,.3);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin-top:16px;
  background:var(--wine-tint);
}
.assoc .assoc-label{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--wine);
  margin:0 0 6px;
}
.assoc h4{margin:0 0 6px;font-size:.98rem;font-weight:600;color:var(--wine-strong);}
.assoc p{font-size:.92rem;margin:0;color:var(--ink-soft);line-height:1.58;}

/* ---------------------------------------------------------- prova social */
.proof{text-align:center;padding:14px 0 4px;}
.proof h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.3rem,5.2vw,1.6rem);
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.28;
  text-wrap:balance;
}
.proof .proof-sub{
  margin:0 auto 20px;
  max-width:29em;
  font-size:.93rem;
  line-height:1.58;
  color:var(--ink-soft);
}

.video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#0B0B0B;
  box-shadow:var(--shadow-md);
}
/* RECORTE DA FAIXA DE TÍTULO DO YOUTUBE
   O YouTube mostra título, canal e logo no topo do player nos primeiros
   segundos da reprodução, e nenhum parâmetro de URL desliga isso.
   Solução: o iframe fica mais alto que a moldura e centralizado nela. Como
   o vídeo é ajustado pela largura, a altura extra vira tarja preta em cima
   e embaixo — é essa sobra que o recorte elimina, junto com a faixa de
   título. O vídeo em si continua inteiro.
   O recorte é sempre igual à tarja, para qualquer valor abaixo — então dá
   para aumentar à vontade sem perder vídeo. 1.9 dá folga em telas pequenas,
   onde a faixa de título ocupa proporcionalmente mais espaço.
   Se algum vídeo não for 16:9, ajuste aqui. */
:root{ --video-zoom:1.9; }

.video-wrap iframe{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:calc(100% * var(--video-zoom));
  transform:translateY(-50%);
  border:0;
}
.video-caption{margin:11px 0 0;font-size:.79rem;color:var(--ink-faint);}

/* ESCUDO DO VÍDEO
   Fica sobre o player o tempo todo. Enquanto o vídeo toca é transparente
   (mas continua capturando o clique e o hover, o que impede a interface do
   YouTube de aparecer). Assim que o vídeo pausa ou termina, volta a ser
   opaco — é isso que esconde o overlay do YouTube com título, canal e logo,
   que aparece em todo vídeo pausado, mesmo com controls=0. */
.video-shield{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  display:block;
  z-index:2;
  background:#0B0B0B;
  cursor:pointer;
}
.video-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.65);
  transition:transform .18s ease;
}
.video-shield:hover .video-play{transform:translate(-50%,-50%) scale(1.07);}
.video-play svg{width:32px;height:32px;fill:var(--wine-strong);margin-left:4px;}

/* Voltar a cobrir é INSTANTÂNEO (transition:none aqui); só o desaparecer
   é suave. Se a volta fosse animada, o overlay do YouTube apareceria
   durante o cruzamento. */
.video-thumb,
.video-play{opacity:1;transition:none;}

.video-shield.is-playing{background:transparent;}
.video-shield.is-playing .video-thumb,
.video-shield.is-playing .video-play{
  opacity:0;
  transition:opacity .3s ease;
}

/* --------------------------------------------------------------- carrossel */
.carousel{margin-top:30px;}
.carousel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.carousel-head h4{
  margin:0;
  font-size:clamp(.95rem,3.4vw,1.15rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--wine);
}
.carousel-nav{display:flex;gap:8px;}
.carousel-nav button{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--wine-strong);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}
.carousel-nav button:hover{background:var(--wine-tint);border-color:var(--wine-light);}
.carousel-nav button[disabled]{opacity:.32;cursor:default;}

.track{
  display:flex;
  align-items:flex-start;      /* cada card com a altura da sua própria imagem */
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none;}

/* O print aparece inteiro, na largura máxima possível: nada é cortado
   e a mensagem fica legível sem precisar clicar. */
.slide{
  flex:0 0 88%;
  scroll-snap-align:center;
  background:#EFE8E0;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  cursor:zoom-in;
  padding:0;
  display:block;
}
.slide img{width:100%;height:auto;display:block;}
/* em telas estreitas o card ocupa quase toda a largura, para o texto do
   print sair no maior tamanho possível */
@media (max-width:420px){ .slide{flex-basis:93%;} }
@media (min-width:640px){ .slide{flex-basis:62%;} }
@media (min-width:900px){ .slide{flex-basis:47%;} }

/* O ponto é pequeno por estética, mas a área de toque tem 26px:
   o botão é transparente e o ponto visível vem do ::before. */
.dots{display:flex;justify-content:center;gap:0;margin-top:8px;}
.dots button{
  width:28px;height:40px;
  padding:0;
  border:0;
  background:none;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.dots button::before{
  content:"";
  display:block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--line);
  transition:background .2s ease,width .2s ease;
}
.dots button.is-active::before{background:var(--wine);width:18px;border-radius:var(--radius-pill);}

.carousel-hint{margin:12px 0 0;font-size:.75rem;color:var(--ink-faint);}

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(23,17,19,.92);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:64px 16px calc(34px + var(--safe-b));
  animation:screenIn .22s ease both;
}
.lightbox[hidden]{display:none;}
.lightbox img{
  width:min(560px,100%);
  height:auto;
  border-radius:12px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.lightbox-close{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top,0px));
  right:16px;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

/* ---------------------------------------------------------------- oferta */
.offer{
  background:var(--wine-tint);
  border:1px solid rgba(140,18,38,.16);
  border-radius:var(--radius-lg);
  padding:30px var(--pad-x);
  text-align:center;
}
.offer-photo{
  width:124px;height:124px;
  margin:0 auto 18px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 4px #fff,0 12px 28px -14px rgba(23,17,19,.45);
}
.offer-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;}
.offer h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.4rem,5.6vw,1.85rem);
  line-height:1.24;
  color:var(--wine-strong);
  margin:0 0 12px;
  text-wrap:balance;
}
.offer p{margin:0 auto 12px;max-width:31em;font-size:.98rem;line-height:1.65;color:var(--ink-2);}
.offer-list{
  list-style:none;
  margin:18px auto 22px;
  padding:0;
  max-width:29em;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.offer-list li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:.95rem;
  line-height:1.55;
  color:var(--ink-2);
}
.offer-list li::before{
  content:"";
  flex:0 0 auto;
  width:8px;height:8px;
  margin-top:8px;
  border-radius:50%;
  background:var(--wine);
}
.offer-list li strong{color:var(--ink);font-weight:600;}
.offer .btn--green{max-width:460px;}
.offer-note{margin:12px 0 0 !important;font-size:.78rem !important;color:var(--ink-faint) !important;}

.restart{text-align:center;margin-top:4px;}

/* ------------------------------------------------- CTA fixo (só celular) */
.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  padding:10px var(--pad-x) calc(10px + var(--safe-b));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.sticky-cta.is-visible{transform:none;}
.sticky-cta .btn{min-height:52px;font-size:.92rem;}
@media (min-width:721px){ .sticky-cta{display:none;} }

/* ---------------------------------------------------------------- footer */
.site-footer{
  width:min(var(--max),100%);
  margin:0 auto;
  padding:22px var(--pad-x) calc(30px + var(--safe-b));
  text-align:center;
  font-size:.73rem;
  line-height:1.6;
  color:var(--ink-faint);
}
.site-footer p{margin:0 0 6px;}
.site-footer .disclaimer{font-size:.67rem;max-width:36em;margin:0 auto;}

/* ------------------------------------------------------------ a11y/motion */
.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 (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}