/* ---------- 0. FONTES (servidas do proprio dominio) ---------------------- */
/* Duas familias, tres arquivos, 73 KB. Nada de host externo.
   font-display:swap = o texto aparece na hora com a fonte do sistema e troca
   quando a nossa chega. Nunca fica invisivel esperando.

   A de texto e a Schibsted Grotesk, licenca SIL Open Font 1.1, o texto da
   licenca esta em assets/fonts/OFL-Schibsted-Grotesk.txt e precisa continuar
   subindo junto com a fonte: a OFL exige isso de quem redistribui.

   Ela entrou no lugar da Inter, que e a fonte mais usada da internet e por
   isso nao tem voz nenhuma. A Schibsted e uma grotesca de jornal, da mesma
   familia de tradicao da DM Serif Display do titulo, entao as duas casam;
   o carater dela mora em detalhe que se sente sem chamar atencao: a cauda do
   Q, o 1 sem pe, as aberturas fechadas. E, medida nas strings reais dos
   botoes, e 0,4% mais estreita que a Inter, entao nenhuma chamada quebrou.

   Ela e variavel (400 a 700 num arquivo so): os quatro pesos que a pagina
   usa custam um download, nao quatro.
   DM Serif Display tem um peso so, por desenho. Por isso todo titulo pede
   font-weight:400 e font-synthesis-weight:none logo abaixo: sem isso o
   navegador engorda a serifa na marra e o desenho quebra. */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"DM Serif Display";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- RESERVAS COM METRICA CASADA ----------------------------------
   font-display:swap mostra o texto na hora com a fonte do sistema e troca
   quando a nossa chega. O problema e o instante da troca: a Schibsted e
   2,04% mais larga que a Arial, entao na troca a pagina inteira reflui.
   Numa conexao lenta, que e a desta compradora, isso acontece com a
   manchete ja na tela.

   As duas faces abaixo nao baixam nada: pegam a fonte que ja existe na
   maquina e reescalam ate a largura de avanco bater com a nossa. Com isso a
   troca so muda o desenho da letra, nao a posicao de nada.

   As porcentagens foram MEDIDAS neste projeto, com as duas fontes
   carregadas, sobre uma frase com os tres idiomas:
     Schibsted Grotesk / Arial = 102,04%
   Se um dia trocar de fonte, medir de novo: numero chutado aqui piora.
   Era 105,37% enquanto a fonte de texto era a Inter.

   Altura de linha nao entra na conta porque a pagina inteira declara
   line-height em numero; nenhum lugar usa normal, entao a caixa de linha ja
   vem do CSS e nao das metricas da fonte.

   Sem Arial nem Georgia na maquina, a face nao encontra origem e o navegador
   simplesmente segue para a proxima da pilha, como antes. */
@font-face{
  font-family:"Schibsted reserva";
  src:local("Arial"), local("Helvetica Neue"), local("Helvetica");
  font-weight:400 700;
  font-style:normal;
  size-adjust:102.04%;
}
/* A Georgia e metrica-proxima da DM Serif Display em caixa baixa (0,34% de
   diferenca medida neste projeto), e o logotipo e a unica coisa que ainda
   usa a serifa. Nao precisa de face ajustada: a troca mexe em duas palavras
   e nao move mais nada da pagina.

   Existiu aqui uma reserva so para a manchete, porque em CAIXA ALTA a
   diferenca chega a 13,4% e a manchete pulava de 5 para 7 linhas na troca.
   A manchete virou sans; a reserva foi junto. */

/* A unica palavra em italico na pagina inteira e "Beauty", no logotipo.
   Este arquivo tem exatamente esses 6 glifos: 1,3 KB em vez de 25. */
@font-face{
  font-family:"DM Serif Display";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/dm-serif-display-italic-wordmark.woff2") format("woff2");
  unicode-range:U+0042,U+0061,U+0065,U+0074,U+0075,U+0079;
}

/* =========================================================================
   AGENDA CHEIA BEAUTY — folha de estilo única
   Mobile first (360 / 375 / 390 / 412 / 430) → tablet → desktop
   Sem frameworks, sem dependências. Ordem: tokens → base → componentes.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* ---- fundos ---------------------------------------------------------- */
  --bg:        #FEF9F5;   /* creme quente, o que fica FORA da coluna         */
  --paper:     #FFFFFF;   /* a coluna e os cards                            */
  --bg-alt:    #FCF2EE;   /* blush claro, secao alternada                   */
  --pink-bg:   #FFE9EF;   /* fundo da secao de preco                        */
  --pink-mist: #FDE7ED;   /* pilulas e selos                                */

  /* ---- marca ----------------------------------------------------------- */
  --magenta:   #D41F54;
  --magenta-d: #B01243;
  --magenta-l: #F27A9E;
  --wine:      #56173A;
  --ink:       #170B12;
  --ink-2:     #22171D;
  --verde:     #1F8A4C;   /* so confirmacao: check, WhatsApp, garantia      */
  --verde-bg:  #EAF6EF;

  /* ---- texto ----------------------------------------------------------- */
  --txt:       #170B12;
  --txt-2:     #6E5C65;
  --txt-l:     #FDF6F3;
  --txt-l2:    rgba(253,246,243,.72);
  --line:      #F4DEE4;
  --line-2:    #EDD1D9;

  /* ---- forma ----------------------------------------------------------- */
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --pill: 999px;
  --sh-col: 0 4px 24px rgba(86,23,58,.10);
  --sh-card: 0 10px 30px -18px rgba(86,23,58,.40);

  /* ---- COLUNA ----------------------------------------------------------
     O modelo e uma coluna de 480px centralizada, com sombra, do topo ao
     rodape. No desktop ela NAO se espalha: a pagina inteira continua com
     largura de celular, porque e assim que ela vai ser lida. A sombra e o
     creme em volta sao o que fazem ela parecer um objeto, e nao uma pagina
     estreita por acidente. */
  --col: 480px;
  --sec-pad-y: 40px;
  --sec-pad-x: 20px;

  /* ---- tipografia ------------------------------------------------------ */
  --font: "Schibsted Grotesk", "Schibsted reserva", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* So o logotipo, no topo e no rodape. Todo o resto da pagina e sans. */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;

  --t-rotulo:  12px;
  --t-micro:   14px;
  --t-botao:   15px;   /* preso a largura do botao, conferido em 320px */
  --t-corpo: 15.5px;
  --t-enfase:  17px;
  --t-marca: 17.5px;

  --lh-rotulo: 1.2;
  --lh-curto:  1.4;
  --lh-corpo: 1.55;

  --tr-rotulo: .1em;
  --tr-botao: .02em;

  --price-size: clamp(44px, 14vw, 64px);
}

/* ---------- 2. RESET E BASE ---------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:var(--lh-corpo);
  color:var(--txt);
  background:var(--bg);
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
/* Titulo em sans bold, nao em serifa.
   A DM Serif Display e uma serifa de contraste alto: ela le como elegante,
   e esta pagina e de resposta direta, onde o titulo precisa ler como
   urgente. As duas templates que deram origem a ela usam sans bold no
   titulo pelo mesmo motivo. A serifa ficou so no logotipo, que e marca.

   Como o corpo ja e Schibsted Grotesk, o titulo nao baixa arquivo nenhum
   a mais: e o mesmo variavel, no peso 700. */
h1,h2,h3{
  margin:0;
  font-family:var(--font);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
}
a{ color:inherit; }

/* As superficies que o navegador desenha sozinho, e que sem isso chegam com
   o azul padrao de ninguem. */
:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--pink-bg); color:var(--ink); }
.barra ::selection,.rodape ::selection{ background:var(--magenta); color:#fff; }

/* ---------- 3. A COLUNA -------------------------------------------------- */
.col{
  max-width:var(--col);
  margin-inline:auto;
  background:var(--paper);
  box-shadow:var(--sh-col);
}
.sec{
  padding:var(--sec-pad-y) var(--sec-pad-x);
  background:var(--paper);
}
.sec--alt{ background:var(--bg-alt); }
.sec--oferta{ background:var(--pink-bg); }
.sec--curta{ padding-block:28px; }

/* ---------- 4. BARRA DE URGENCIA ----------------------------------------- */
/* Primeira faixa da pagina, nao acompanha a rolagem: sai de cena no
   primeiro rolar, como qualquer outro bloco. */
.barra{
  background:var(--ink);
  color:var(--txt-l);
  text-align:center;
  padding:10px max(14px, env(safe-area-inset-left)) 11px max(14px, env(safe-area-inset-right));
}
.barra__in{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:4px 9px;
  font-size:var(--t-rotulo); font-weight:600; line-height:var(--lh-rotulo);
  text-transform:uppercase; letter-spacing:.06em;
}
.barra__forte{ color:var(--magenta-l); }
.barra__t{
  display:inline-block;
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:6px;
  padding:3px 9px 4px;
  font-size:var(--t-micro); font-weight:700;
  letter-spacing:.08em;
  /* sem isso a largura muda a cada segundo e a barra inteira treme */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* Quando o relogio zera o preco riscado some da pagina inteira. */
html.sem-oferta [data-preco-de]{ display:none; }

/* ---------- 5. MARCA ----------------------------------------------------- */
.marca{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:18px;
}
.marca__img{ width:30px; }
.marca__nome{
  font-family:var(--font-display); font-size:var(--t-marca); font-weight:400;
  letter-spacing:-.01em;
}
.marca__nome em{ color:var(--magenta); font-style:italic; }

/* ---------- 6. TIPOGRAFIA DE SECAO --------------------------------------- */
.h1{
  font-size:clamp(29px,7.6vw,36px);
  line-height:1.14;
  /* Caixa alta nao pede tracking negativo: em bold ela ja fecha sozinha. */
  letter-spacing:0;
  text-align:center;
  margin-bottom:10px;
}
.h2{
  font-size:clamp(25px,6.4vw,30px);
  text-align:center;
  margin-bottom:10px;
}
.h3{ font-size:22px; text-align:center; margin-bottom:8px; }
.sub{
  font-size:var(--t-enfase); line-height:var(--lh-corpo);
  color:var(--txt-2); text-align:center;
  margin-inline:auto; max-width:34ch;
}
.sub--peq{ font-size:var(--t-corpo); }
.rotulo{
  display:block; text-align:center;
  font-size:var(--t-rotulo); font-weight:700;
  letter-spacing:var(--tr-rotulo); text-transform:uppercase;
  color:var(--magenta-d);
  margin-bottom:8px;
}

/* ---------- 7. BOTAO ----------------------------------------------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:60px;
  padding:16px 18px;
  border:0; border-radius:var(--r-sm);
  background:linear-gradient(180deg,#E8306A 0%, var(--magenta) 46%, #BC1247 100%);
  color:#fff;
  font-family:inherit; font-size:var(--t-botao); font-weight:700;
  letter-spacing:var(--tr-botao); text-transform:uppercase;
  line-height:1.2;
  text-align:center; text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(212,31,84,.85);
  position:relative;
}

/* O pulso e o unico movimento com proposito da pagina: ele existe para o
   olho achar o botao depois de uma rolagem longa.

   Ele mora num anel, NAO no botao. Escalar o proprio botao obrigava o
   navegador a rasterizar o texto de novo a cada batida, e a letra saia
   visivelmente borrada no Windows. O anel nao tem texto dentro, entao pode
   escalar a vontade.

   inset:0 e nao negativo: o anel nasce exatamente na borda e so sai para
   fora pelo transform, que nao entra no calculo de layout. Com inset
   negativo ele passava a contar como transbordo do botao.

   pointer-events:none para o anel nunca roubar o clique. */
.btn::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:2.5px solid var(--magenta);
  opacity:0;
  pointer-events:none;
  animation:pulso 3.4s ease-out 1.2s infinite;
}
@keyframes pulso{
  0%,85%   { transform:scale(1);    opacity:0; }
  87%      { opacity:.8; }
  98%,100% { transform:scale(1.09); opacity:0; }
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px) scale(.995); }
.btn:active::after{ animation:none; opacity:0; }
.btn__seta{ width:18px; height:18px; flex:none; opacity:.9; }
/* O botao do plano de entrada. SOLIDO, nao vazado: botao de contorno le
   como acao secundaria e converte pior, e este plano precisa vender. Quem
   mantem a hierarquia e a COR, nao o preenchimento: o magenta continua
   sendo o unico botao com a cor de acao da marca, e este fica no quase
   preto. Mesma logica dos dois cards da template de origem, que usam
   solido nos dois em cores diferentes.

   Sem pulso: um so botao pulsando por tela, e ele e o do completo. */
.btn--alt{
  background:var(--ink);
  color:#fff;
  box-shadow:0 8px 20px -12px rgba(23,11,18,.8);
  animation:none;
}
.btn--alt:hover{ filter:brightness(1.35); }
.btn--alt::after{ animation:none; content:none; }
.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

.micro{
  text-align:center; font-size:var(--t-micro); line-height:var(--lh-curto);
  color:var(--txt-2); margin-top:11px;
}

/* ---------- 8. MOCKUP (no lugar do video) -------------------------------- */
/* O modelo abre com um VSL. Sem video, quem ocupa a primeira dobra e a
   unica prova visual que existe: o produto. Moldura e fundo entram porque
   o mockup tem fundo transparente e, solto no branco, ele boiava. */
.palco{
  margin:22px auto 0;
  padding:18px 14px;
  background:linear-gradient(180deg,var(--pink-mist) 0%, #FFF6F9 100%);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
}
.palco img{ margin-inline:auto; }

/* ---------- 9. SELOS DE CONFIANCA ---------------------------------------- */
.selos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px 16px;
  margin-top:16px;
  font-size:var(--t-micro); color:var(--txt-2);
}
.selos li{ display:flex; align-items:center; gap:6px; }
.selos svg{ width:15px; height:15px; color:var(--verde); flex:none; }

/* ---------- 10. CARROSSEL ------------------------------------------------ */
/* Rolagem nativa com encaixe, nao transform com JS: funciona com o dedo,
   com a roda do mouse, com o teclado e com leitor de tela sem eu escrever
   nada disso. As setas so empurram o scrollLeft. */
.carrossel{ position:relative; margin-top:18px; }
.carrossel__pista{
  display:flex; gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:4px;
}
.carrossel__pista::-webkit-scrollbar{ display:none; }
.carrossel__pista > li{
  flex:0 0 78%;
  scroll-snap-align:center;
}
.carrossel__pista img{
  width:100%; border-radius:var(--r);
  box-shadow:var(--sh-card);
}
.carrossel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; z-index:2;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px -4px rgba(86,23,58,.4);
  color:var(--magenta);
  cursor:pointer;
}
.carrossel__nav svg{ width:18px; height:18px; }
.carrossel__nav--ant{ left:2px; }
.carrossel__nav--prox{ right:2px; }
.carrossel__nav:disabled{ opacity:0; pointer-events:none; }
.carrossel__pontos{
  display:flex; justify-content:center; gap:6px; margin-top:12px;
}
.carrossel__pontos button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line-2); cursor:pointer;
  transition:background .2s, width .2s;
}
.carrossel__pontos button[aria-current="true"]{
  background:var(--magenta); width:18px; border-radius:99px;
}

/* ---------- 11. LISTA DE DOR --------------------------------------------- */
.dor{ display:grid; gap:11px; margin-top:20px; }
.dor li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:var(--t-corpo); line-height:var(--lh-curto); font-weight:500;
}
.dor svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--magenta); }
.dor__fim{
  text-align:center; margin-top:18px;
  font-size:var(--t-enfase); font-weight:700; color:var(--magenta-d);
}

/* ---------- 12. CONVERSA DO WHATSAPP ------------------------------------- */
.zap{
  background:#0B141A;
  border-radius:var(--r);
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
}
.zap__rotulo{
  font-size:var(--t-rotulo); font-weight:700; letter-spacing:var(--tr-rotulo);
  text-transform:uppercase; color:#8FD3AD; margin-bottom:10px;
}
.zap__fio{ display:flex; flex-direction:column; gap:8px; }
.zap p{
  font-size:var(--t-corpo); line-height:var(--lh-curto);
  padding:10px 13px; max-width:92%;
}
.zap__in{
  background:#202C33; color:#E9EDEF;
  border-radius:12px 12px 12px 3px; align-self:flex-start;
}
.zap__out{
  background:#005C4B; color:#E9EDEF;
  border-radius:12px 12px 3px 12px; align-self:flex-end;
}

/* ---------- 13. PASSOS --------------------------------------------------- */
.passos{ display:grid; gap:20px; margin-top:22px; }
.passos li{ text-align:center; }
.passos__ico{
  width:56px; height:56px; margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--pink-mist);
  color:var(--magenta);
}
.passos__ico svg{ width:26px; height:26px; }
.passos__t{ font-size:var(--t-enfase); font-weight:700; margin-bottom:3px; }
.passos__d{ font-size:var(--t-corpo); color:var(--txt-2); line-height:var(--lh-curto); }

/* ---------- 14. CARD DE OFERTA ------------------------------------------- */
/* Dois cards, e a diferenca entre eles e o argumento.
   O completo leva borda grossa, sombra e o preco grande; o de entrada fica
   com fio de 1px, sem sombra e preco menor. Quem bate o olho ve qual e o
   principal antes de ler qualquer palavra. */
.oferta{
  position:relative;
  background:var(--paper);
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  padding:28px 20px 24px;
  text-align:center;
}
.oferta--destaque{
  border:3px solid var(--magenta);
  box-shadow:var(--sh-card);
  padding-top:34px;
}
.oferta--entrada{ padding-top:32px; }
.oferta--entrada .oferta__preco{ font-size:clamp(34px,10vw,44px); color:var(--txt); }

/* Selo encavalado na borda de cima. */
.oferta__selo{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  padding:5px 14px 6px;
  border-radius:var(--pill);
  background:var(--magenta); color:#fff;
  font-size:var(--t-rotulo); font-weight:700;
  letter-spacing:var(--tr-rotulo); text-transform:uppercase;
  line-height:1; white-space:nowrap;
}
.oferta__selo--promo{ background:var(--ink); }

/* O que o plano de entrada NAO tem. Sem isto os dois cards viram duas
   listas de coisas boas e a escolha fica no preco, que e onde o barato
   sempre ganha. */
/* Uma linha de posicionamento embaixo do nome do plano: ela diz para
   QUEM o plano e, antes de a pessoa comecar a ler a lista. */
.oferta__sub{
  font-size:var(--t-micro); color:var(--txt-2); line-height:var(--lh-curto);
  margin:-6px auto 14px; max-width:30ch;
}
/* A primeira linha do card completo, que carrega o de baixo inteiro. */
.oferta__lista li.oferta__tudo{ font-weight:700; color:var(--magenta-d); }
.oferta__lista li.oferta__tudo svg{ color:var(--magenta); }

.oferta__ponte{
  text-align:center; margin:18px 0;
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2);
}
.oferta__img{ width:74%; margin:0 auto 16px; }
.oferta__t{ font-size:21px; margin-bottom:12px; }
.oferta__de{
  font-size:var(--t-micro); color:var(--txt-2); margin-bottom:2px;
}
.oferta__riscado{
  font-size:var(--t-enfase); font-weight:600; color:var(--txt-2);
  text-decoration:line-through;
  text-decoration-color:var(--magenta);
  text-decoration-thickness:2px;
  line-height:var(--lh-rotulo);
}
.oferta__preco{
  font-weight:700;
  font-size:var(--price-size); line-height:1;
  letter-spacing:-.03em; color:var(--magenta);
  white-space:nowrap;
  margin:2px 0 4px;
}
.oferta__preco span{
  font-size:.4em; vertical-align:.42em; margin-right:.06em; letter-spacing:0;
}
.oferta__modo{ font-size:var(--t-corpo); font-weight:600; }
.oferta__lista{
  display:grid; gap:10px;
  text-align:left;
  margin:20px 0;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.oferta__lista li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--t-corpo); line-height:var(--lh-curto); font-weight:500;
}
.oferta__lista svg{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--verde); }
.oferta__paga{
  font-size:var(--t-micro); color:var(--txt-2); line-height:var(--lh-corpo);
  margin-top:12px;
}

/* Cartao verde do "como chega", logo abaixo da oferta. */
.entrega{
  display:flex; align-items:center; gap:12px;
  margin-top:16px; padding:14px 16px;
  background:var(--paper);
  border:2px solid var(--verde);
  border-radius:var(--r-sm);
  font-size:var(--t-micro); line-height:var(--lh-curto);
}
.entrega svg{ width:26px; height:26px; flex:none; color:var(--verde); }

/* ---------- 15. GARANTIA ------------------------------------------------- */
.garantia{
  display:grid; justify-items:center; text-align:center;
  background:var(--verde-bg);
  border-radius:var(--r);
  padding:24px 20px;
}
.garantia__selo{ width:62px; height:62px; color:var(--verde); margin-bottom:10px; }
.garantia__d{
  font-size:var(--t-corpo); color:var(--txt-2); line-height:var(--lh-corpo);
  max-width:38ch; margin-top:6px;
}
.garantia__fim{ margin-top:12px; font-size:var(--t-corpo); font-weight:700; }

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq{
  background:var(--paper);
  border-radius:var(--r);
  padding:6px 18px;
  margin-top:18px;
}
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  padding:15px 30px 15px 0;
  font-size:var(--t-corpo); font-weight:600; line-height:var(--lh-curto);
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:4px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:2px solid var(--magenta);
  border-bottom:2px solid var(--magenta);
  transform:rotate(45deg);
  transition:transform .22s ease;
}
.faq details[open] summary{ color:var(--magenta-d); }
.faq details[open] summary::after{ transform:translateY(4px) rotate(-135deg); }
.faq__r{ padding:0 4px 16px 0; }
.faq__r p{ font-size:var(--t-corpo); color:var(--txt-2); line-height:var(--lh-corpo); }

/* ---------- 17. RODAPE --------------------------------------------------- */
.rodape{
  background:var(--ink); color:var(--txt-l2);
  padding:32px 20px 30px; text-align:center;
}
.rodape__marca{
  font-family:var(--font-display); font-size:var(--t-marca);
  letter-spacing:-.01em; color:var(--txt-l); margin-bottom:10px;
}
.rodape__ajuda{ font-size:var(--t-micro); margin-bottom:16px; }
.rodape__ajuda a{ color:var(--txt-l); text-decoration:underline; text-underline-offset:3px; }
.rodape__legal{
  font-size:13px; line-height:var(--lh-corpo);
  max-width:50ch; margin:0 auto 12px;
}
.rodape__copy{ font-size:13px; color:rgba(253,246,243,.55); }

/* ---------- 18. REVEAL --------------------------------------------------- */
/* Aplicado por JS. Sem JS nada fica escondido. */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
[data-reveal].dentro{ opacity:1; transform:none; }

/* ---------- 19. AJUSTES POR LARGURA -------------------------------------- */
@media (max-width:359px){
  /* So o degrau do botao encolhe: ele e o unico preso a uma largura fixa,
     e a chamada mais longa passava para duas linhas em 320px. */
  :root{ --sec-pad-x:16px; --t-botao:13.5px; }
  /* O botao tambem aperta as laterais e a folga ate a seta: sao 26px
     que o rotulo mais longo precisa para nao virar duas linhas. */
  .btn{ padding-inline:12px; gap:8px; }
  .carrossel__pista > li{ flex-basis:85%; }
}
@media (min-width:520px){
  :root{ --sec-pad-y:52px; }
  /* A coluna vira um objeto sobre o creme: cantos e folga em volta. */
  .col{ margin-bottom:24px; border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; }
  /* A barra encosta na coluna e arredonda por cima: as duas passam a ser o
     mesmo objeto. Atravessando a tela inteira, ela parecia um aviso do
     navegador pousado em cima de um site estreito. */
  .barra{
    max-width:var(--col); margin:24px auto 0;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .carrossel__pista{ scroll-behavior:auto; }
}

@media (forced-colors: active){
  .btn{ border:2px solid ButtonText; }
  .oferta,.entrega,.faq,.garantia{ border-color:CanvasText; }
}