/* ============================================================
   Guia Morar na Espanha — landing page
   ------------------------------------------------------------
   Estrutura deste arquivo:
     1. Variáveis e base
     2. Layout da página (mobile primeiro)
     3. Blocos, na mesma ordem em que aparecem na página
     4. Versão para computador  →  @media (min-width:920px),
        no final do arquivo
   Tudo o que está fora do @media é a versão para celular.
   ============================================================ */

/* ---------- 1. Variáveis e base ---------- */
:root{
  --rojo:#C8102E;
  --oro:#F5B301;
  --tinta:#16110F;
  --papel:#FFFDF8;
  --papel-2:#F6F1E6;
  --areia:#e6ded0;
  --bonus:#FFF8E3;
  --texto:#4d4741;
  --texto-forte:#2b2523;
  --texto-suave:#6a625c;
  --display:'Bricolage Grotesque',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel-2);
  color:var(--tinta);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{display:block}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---------- 2. Layout da página ---------- */
.page{
  width:100%;
  max-width:520px;
  margin:0 auto;
  background:var(--papel);
  color:var(--tinta);
  box-shadow:0 24px 60px rgba(22,17,15,0.10);
  overflow:hidden;
}
.sec{display:flex;flex-direction:column}
.sec--cream{background:var(--papel-2)}
.sec--dark{background:var(--tinta);color:var(--papel)}

/* Título de seção pequeno, em maiúsculas */
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--rojo);
}
.eyebrow--sand{color:#9b8f77}
.eyebrow--gold{color:var(--oro)}

/* Textos corridos */
.lead{font-size:17px;line-height:1.6;color:var(--texto-forte)}
.body{font-size:16px;line-height:1.65;color:var(--texto)}
.body--forte{color:var(--texto-forte)}
.body--suave{font-size:16px;line-height:1.6;color:var(--texto-suave)}
.body-sm{font-size:15.5px;line-height:1.6;color:var(--texto)}

/* Botões de compra (checkout Kiwify) */
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  background:var(--rojo);
  color:var(--papel);
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.04em;
  text-align:center;
  padding:0 20px;
  border-radius:3px;
  transition:filter .18s ease, transform .18s ease;
}
.cta:hover{filter:brightness(1.12)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* Texto só para leitores de tela (transcrição dos depoimentos) */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 3. Blocos, na ordem da página ---------- */

/* Topo / hero */
.s-hero{padding:40px 28px 38px;gap:20px}
.brand{display:flex;align-items:center;gap:10px}
.flag{display:flex;height:14px;width:26px;flex-direction:column;overflow:hidden}
.flag-r{height:3.5px;background:var(--rojo)}
.flag-y{height:7px;background:var(--oro)}
.h-hero{font-family:var(--display);font-weight:700;font-size:33px;line-height:1.12;letter-spacing:-0.03em}
.hero-sub{font-size:16px;line-height:1.6;color:var(--texto-suave)}

/* Você se identifica */
.s-id{padding:38px 28px;gap:16px}
.id-lead{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-0.02em}

/* Apresentação do guia + depoimentos */
.s-guia{padding:42px 28px;gap:18px}
.guia-intro{font-size:15px;color:var(--texto-suave)}
.h-big{font-family:var(--display);font-weight:800;font-size:38px;line-height:0.98;letter-spacing:-0.04em;text-transform:uppercase}
.depos{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.depo{margin:0;background:var(--papel-2);padding:12px;border-radius:4px}
.depo-img{display:block;width:100%;height:auto;border-radius:2px}

/* O que você vai encontrar */
.s-dentro{padding:38px 28px;gap:22px}
.dentro-head{display:flex;flex-direction:column;gap:8px}
.h-dentro{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-0.02em}
.checks{display:flex;flex-direction:column;gap:16px}
.check{display:flex;gap:12px;align-items:flex-start}
.check-i{color:var(--oro);font-size:16px;line-height:1.55}
.check-t{font-size:16px;line-height:1.55}

/* As etapas */
.s-etapas{padding:42px 28px;gap:26px}
.steps{display:flex;flex-direction:column;gap:24px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--rojo);padding-top:4px;min-width:26px}
.step-b{display:flex;flex-direction:column;gap:6px}
.step-t{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:-0.02em}

/* Quem é a Fernanda */
.s-quem{padding:40px 28px;gap:18px}
.h-quem{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;letter-spacing:-0.03em}

/* O que você recebe */
.s-recebe{padding:42px 28px;gap:22px}
.recebe-lead{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-0.02em;text-transform:uppercase}
.items{display:flex;flex-direction:column;gap:0}
.item{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--areia)}
.item--last{border-bottom:1px solid var(--areia)}
.item-n{font-family:var(--display);font-weight:700;font-size:12px;color:var(--rojo);min-width:22px;padding-top:3px}
.item-t{font-size:15.5px;line-height:1.5}
.bonus{display:flex;gap:14px;padding:14px;background:var(--bonus)}
.bonus--first{margin-top:10px}
.bonus-n{font-family:var(--display);font-weight:700;font-size:11.5px;color:#8a6400;min-width:60px;padding-top:3px;letter-spacing:0.06em}

/* Preço */
.s-preco{padding:40px 28px 44px;gap:18px}
.h-preco{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-0.03em}
.preco-p{font-size:16px;line-height:1.65;color:#b8afa7}
.preco-box{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:1px solid #332a26;border-bottom:1px solid #332a26}
.preco-label{font-size:15px;color:#b8afa7}
.preco-val{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-0.04em;color:var(--oro)}

/* Garantia */
.s-garantia{padding:42px 28px;gap:16px}
.h-garantia{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;letter-spacing:-0.03em}
.selos{display:flex;flex-wrap:wrap;gap:8px}
.selo{background:var(--rojo);color:var(--papel);padding:9px 13px;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:0.1em}

/* Perguntas frequentes */
.s-faq{padding:42px 28px;gap:20px}
.h-faq{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-0.03em}
.faqs{display:flex;flex-direction:column;gap:18px}
.faq{display:flex;flex-direction:column;gap:6px}
.faq-q{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.4}

/* Chamada final */
.s-final{padding:34px 28px;gap:14px}
.final-note{text-align:center;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:0.14em;color:#8a807a}

/* Rodapé */
.s-foot{padding:26px 28px 34px;background:var(--tinta);color:#8a807a;border-top:1px solid #241d1a;gap:6px;text-align:center}
.foot-marca{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.02em;color:var(--papel)}
.foot-handle{font-size:12.5px;color:#8a807a}
.foot-legal{margin-top:8px;font-size:12px;line-height:1.7}
.footlink{text-decoration:underline;text-underline-offset:2px}
.footlink:hover{color:var(--papel)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta{transition:none}
}

/* Respiro em volta do cartão assim que a tela permite */
@media (min-width:560px){
  .page{margin:32px auto}
}

/* ============================================================
   4. VERSÃO PARA COMPUTADOR
   A partir de 920px de largura. Nada aqui afeta o celular.
   ============================================================ */
@media (min-width:920px){

  /* Cartão mais largo e com mais margem interna */
  .page{max-width:760px;margin:48px auto}
  .page > div,
  .page > footer{padding-left:52px;padding-right:52px}

  /* Um pouco mais de ar na vertical */
  .s-hero{padding-top:56px;padding-bottom:52px}
  .s-id{padding-top:50px;padding-bottom:50px}
  .s-guia{padding-top:56px;padding-bottom:56px}
  .s-dentro{padding-top:52px;padding-bottom:52px}
  .s-etapas{padding-top:56px;padding-bottom:56px}
  .s-quem{padding-top:54px;padding-bottom:54px}
  .s-recebe{padding-top:56px;padding-bottom:56px}
  .s-preco{padding-top:54px;padding-bottom:58px}
  .s-garantia{padding-top:56px;padding-bottom:56px}
  .s-faq{padding-top:56px;padding-bottom:56px}
  .s-final{padding-top:44px;padding-bottom:44px}
  .s-foot{padding-top:30px;padding-bottom:40px}

  /* Tipografia um degrau acima */
  .h-hero{font-size:42px}
  .hero-sub{font-size:17px}
  .id-lead{font-size:24px}
  .h-big{font-size:50px}
  .lead{font-size:18px}
  .h-dentro{font-size:30px}
  .step-t{font-size:24px}
  .h-quem{font-size:34px}
  .recebe-lead{font-size:23px}
  .h-preco{font-size:32px}
  .preco-val{font-size:64px}
  .h-garantia{font-size:34px}
  .h-faq{font-size:32px}

  /* Linha de leitura confortável: nenhum parágrafo fica largo demais */
  .lead,.body,.body--suave,.hero-sub,.preco-p{max-width:62ch}

  /* Botão com largura de botão, não de seção */
  .cta{max-width:380px}
  .s-final .cta{margin-left:auto;margin-right:auto}

  /* Depoimentos: um embaixo do outro, mas sem ocupar a largura toda.
     A 460px o texto dos prints fica maior do que fica no celular. */
  .depos{
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
    gap:18px;
  }

  /* Listas em duas colunas */
  .checks{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:36px;
    row-gap:18px;
  }
  .steps{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:40px;
    row-gap:32px;
  }
  .faqs{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:40px;
    row-gap:26px;
  }
  .items{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:32px;
  }
  /* Em duas colunas, os dois itens da última linha (05 e 06)
     é que fecham a lista com uma borda embaixo. */
  .items .item:nth-last-child(4),
  .items .item--last{border-bottom:1px solid var(--areia)}
  /* Os bônus ocupam a largura toda, um em cima do outro */
  .bonus{grid-column:1 / -1}
  .bonus--first{margin-top:18px}
}