/* =====================================================================
   RETO 5D — folha de estilo das 10 variantes da pagina de vendas
   Cliente: Rafael Coppola (retoayuno.com) · Mercado hispano (MX)
   Migrado do WordPress/Elementor em 17/08/2026.

   IDENTIDADE VISUAL (extraida das paginas que ja estavam no ar)
     azul marca     #2558D5      azul claro (faixa)  #DAE2F7
     verde CTA      #32FF88 -> #27D56F (gradiente)
     roxo           #6F06FF      laranja (pills)     #F1822E
     escassez       #E01B1B      texto               #1B1D21
     Tipografia: Manrope (corpo e titulos) + Sora (numeros e destaques)
   ===================================================================== */

:root{
  --azul:#2558D5;
  --azul-escuro:#1B44AC;
  --azul-claro:#DAE2F7;
  --verde-1:#32FF88;
  --verde-2:#27D56F;
  --roxo:#6F06FF;
  --laranja:#F1822E;
  --escassez:#E01B1B;
  --texto:#1B1D21;
  --texto-suave:#5B6068;
  --branco:#fff;
  --preto:#0A0C10;
  --fonte:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fonte-destaque:'Sora',var(--fonte);
  --largura:1140px;
  --raio:18px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte);color:var(--texto);background:var(--branco);
  line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 22px}
section{padding:64px 0}
/* escala tipografica copiada da pagina que estava no ar:
   titulo de secao 32px/600, titulo de card 25px, corpo 18px, hero 50px, preco 74px */
h1,h2,h3{line-height:1.2;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.2vw,3.125rem)}
h2{font-size:clamp(1.5rem,2.8vw,2rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.5625rem)}
.titulo-secao{text-align:center;margin-bottom:36px}
.centro{text-align:center}
.limite{max-width:760px;margin:0 auto}

/* ---------- barra de escassez (marquee) ---------- */
.escassez{
  position:sticky;top:0;z-index:60;background:var(--escassez);color:#fff;
  overflow:hidden;white-space:nowrap;padding:9px 0;
  font-family:var(--fonte-destaque);font-weight:700;font-size:.78rem;letter-spacing:.14em;
}
.escassez-fita{display:inline-flex;gap:44px;padding-right:44px;animation:desliza 22s linear infinite}
.escassez-fita span::before{content:"·";margin-right:44px;opacity:.55}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.escassez-fita{animation:none}}

/* ---------- hero ----------
   fundo claro como na pagina que estava no ar: a foto do Rafael ja vem com
   fundo branco embutido, entao qualquer fundo escuro aqui abre um retangulo. */
.hero{position:relative;background:#fff;color:var(--texto);overflow:hidden;padding:52px 0 46px}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 strong{font-weight:800}
.hero .apoio{font-size:1.125rem;color:var(--texto);margin-bottom:22px;max-width:34em}
.hero-foto img{width:100%}

/* selos do hero (na pagina antiga eram emoji de check na propria copy) */
.selos{list-style:none;display:grid;gap:9px;margin-bottom:24px}
.selos li{display:flex;gap:10px;align-items:flex-start;font-size:1.125rem;color:var(--texto)}
.selos li::before{
  content:"";flex:0 0 18px;height:18px;margin-top:4px;border-radius:50%;
  background:var(--verde-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0C10' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* data da turma: texto puro, como estava no ar (nao virar selo) */
.data-turma{display:block;font-size:1.125rem;color:var(--texto);margin-bottom:26px}

/* ---------- botao ---------- */
.btn{
  display:block;width:100%;max-width:520px;text-align:center;text-decoration:none;
  font-family:var(--fonte-destaque);font-weight:700;font-size:clamp(1rem,2.2vw,1.28rem);
  text-transform:uppercase;letter-spacing:.02em;color:#062A14;
  background:linear-gradient(90deg,var(--verde-1),var(--verde-2));
  padding:17px 26px;border-radius:26px;
  box-shadow:0 10px 26px rgba(39,213,111,.34);
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(39,213,111,.42)}
.btn-roxo{background:var(--roxo);color:#fff;box-shadow:0 10px 26px rgba(111,6,255,.3)}

/* ---------- barra de lote ---------- */
.lote{max-width:520px;margin-top:16px}
.lote-trilha{height:22px;border-radius:999px;background:rgba(27,29,33,.1);overflow:hidden}
.lote-preenche{
  height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(115deg,var(--roxo) 0 14px,#8B3BFF 14px 28px);
  transition:width 1.3s ease;
  display:flex;align-items:center;padding-left:14px;
  font-size:.66rem;font-weight:700;color:#fff;letter-spacing:.08em;white-space:nowrap;
}
.lote-aviso{margin-top:9px;font-size:.84rem;color:var(--texto-suave)}
/* dentro do card azul da oferta a trilha precisa de contraste claro */
.oferta .lote-trilha{background:rgba(255,255,255,.22)}

/* ---------- blocos de texto ---------- */
.bloco-texto p{margin-bottom:20px;font-size:1.125rem;color:var(--texto);line-height:1.55}
.bloco-texto p:last-child{margin-bottom:0}
.bloco-texto strong{font-weight:700}

/* ---------- colunas dos "Secretos Metabolicos" ----------
   sem card branco e sem sombra: imagem no topo, titulo e bullets logo abaixo,
   direto sobre a faixa clara, igual a pagina que estava no ar. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:22px}
.card h3{margin-bottom:16px}
.card ul{list-style:none;display:grid;gap:6px}
.card li{font-size:1.125rem;color:var(--texto);line-height:1.45}
.card li::before{content:"• ";color:var(--texto)}

/* ---------- faixas coloridas ---------- */
.faixa-clara{background:var(--azul-claro)}
.faixa-azul{background:var(--azul);color:#fff}
.faixa-azul .bloco-texto p{color:rgba(255,255,255,.9)}
.faixa-azul .bloco-texto strong{color:#fff}

/* pills de resultado: barra branca larga com check preto, como estava no ar */
.pills{list-style:none;display:grid;gap:12px}
.pills li{
  background:#fff;color:var(--texto);border-radius:999px;padding:11px 20px;
  font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:11px;
}
.pills li::before{
  content:"";flex:0 0 22px;height:22px;border-radius:50%;background:#111;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo h2{text-align:center}

/* diferenciais: linhas de texto centralizadas, sem caixa */
.diferenciais{list-style:none;display:grid;gap:20px;max-width:820px;margin:0 auto;text-align:center}
.diferenciais li{font-size:1.125rem;color:var(--texto)}

/* lista de perfil (para quem e / o que vai receber): uma coluna so */
.perfil{list-style:none;display:grid;grid-template-columns:1fr;gap:14px}
.perfil li{display:flex;gap:13px;align-items:flex-start;font-size:1.125rem;line-height:1.45}
.perfil li::before{
  content:"";flex:0 0 20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.faixa-azul .perfil li::before{background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232558D5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* ---------- carrossel de resultados ----------
   3 por vez no desktop, com setas e bolinhas, como o carrossel do Elementor.
   Sem recorte quadrado: as fotos de antes e depois tem proporcoes diferentes. */
.carrossel-caixa{position:relative;padding:0 42px}
.carrossel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}
.carrossel figure{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start}
.carrossel img{width:100%;height:auto;max-height:420px;object-fit:contain}
.carrossel-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border:0;border-radius:50%;background:transparent;
  color:var(--texto-suave);font-size:26px;line-height:1;cursor:pointer;
}
.carrossel-seta:hover{color:var(--texto)}
.carrossel-seta[data-dir="-1"]{left:0}
.carrossel-seta[data-dir="1"]{right:0}
.carrossel-pontos{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carrossel-pontos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(27,29,33,.22);cursor:pointer}
.carrossel-pontos button[aria-current="true"]{background:var(--texto-suave)}

/* ---------- video ---------- */
.video{position:relative;padding-top:56.25%;border-radius:var(--raio);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.32);max-width:900px;margin:0 auto}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- oferta ---------- */
.oferta{background:var(--azul);color:#fff;border-radius:26px;padding:38px 32px;
  max-width:650px;margin:0 auto;text-align:center}
.oferta h2{margin-bottom:26px}
.entregaveis{list-style:none;display:grid;gap:11px;margin-bottom:28px;text-align:left}
.entregaveis li{background:var(--laranja);border-radius:999px;padding:11px 20px;
  font-size:.88rem;font-weight:700;line-height:1.35;
  display:flex;align-items:center;gap:12px}
.entregaveis li::before{
  content:"";flex:0 0 24px;height:24px;border-radius:50%;background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1822E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
.preco-de{font-size:1rem;opacity:.9}
.preco-rotulo{font-size:.95rem;opacity:.9}
.preco{font-family:var(--fonte);font-size:clamp(2.6rem,7vw,4.625rem);font-weight:600;
  line-height:1.1;margin:4px 0 24px}
.oferta .btn{margin:0 auto}
.oferta .lote{margin:18px auto 0}

/* ---------- bio ---------- */
.bio{position:relative;background:var(--preto);color:#fff;overflow:hidden}
.bio-fundo{position:absolute;inset:0;background:var(--bg-bio) center/cover no-repeat;opacity:.62}
.bio::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,16,.92) 0%,rgba(10,12,16,.82) 45%,rgba(10,12,16,.15) 100%)}
.bio .container{position:relative;z-index:2}
/* o texto ocupa so a metade esquerda: a foto do fundo fica visivel a direita */
.bio .container{max-width:var(--largura)}
.bio h2{margin-bottom:20px;max-width:52%}
.bio p{color:#E4E8EE;margin-bottom:16px;max-width:52%;font-size:1.125rem;line-height:1.5}
.bio strong{color:#fff;font-weight:700}
@media (max-width:900px){.bio h2,.bio p{max-width:none}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border-radius:12px;padding:18px 22px;margin-bottom:12px;
  box-shadow:0 4px 16px rgba(27,29,33,.07)}
.faq summary{font-weight:700;cursor:pointer;font-family:var(--fonte-destaque);font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--azul);font-size:1.5rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--texto-suave);line-height:1.6}

/* numero dos pilares */
.pilar-num{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;
  font-family:var(--fonte-destaque);font-weight:700}

/* ---------- passos (paginas de obrigado) ---------- */
.confirmado{
  display:inline-flex;align-items:center;gap:10px;background:rgba(39,213,111,.12);
  color:#12793F;border:1px solid rgba(39,213,111,.4);border-radius:999px;
  padding:9px 18px;font-weight:700;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
}
.confirmado::before{content:"";width:18px;height:18px;border-radius:50%;
  background:var(--verde-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.passos{display:grid;gap:22px;max-width:760px;margin:0 auto;counter-reset:passo}
.passo{background:#fff;border:1px solid rgba(37,88,213,.16);border-radius:var(--raio);
  padding:26px 26px 28px;position:relative;box-shadow:0 8px 26px rgba(27,29,33,.07)}
.passo::before{counter-increment:passo;content:counter(passo);
  position:absolute;top:-16px;left:26px;width:34px;height:34px;border-radius:50%;
  background:var(--azul);color:#fff;font-family:var(--fonte-destaque);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.95rem}
.passo h3{margin:8px 0 10px}
.passo p{color:var(--texto-suave);margin-bottom:18px}
.passo .btn{max-width:none}
.aviso{background:var(--azul-claro);border-radius:12px;padding:16px 20px;
  font-size:.94rem;color:var(--texto);max-width:760px;margin:24px auto 0}

/* ---------- linhas de material (video + titulo + botao) ---------- */
.material{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;
  padding:26px 0;border-bottom:1px solid rgba(27,29,33,.08)}
.material:last-child{border-bottom:0}
.material .video{margin:0;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.material h3{margin-bottom:14px}
.material .btn{max-width:320px}
@media (max-width:900px){.material{grid-template-columns:1fr;gap:18px}}

/* ---------- rodape ---------- */
footer{background:var(--preto);color:#8D94A1;text-align:center;padding:34px 20px;font-size:.82rem}
footer a{color:#B9C0CB}

/* ---------- CTA fixo mobile ---------- */
.cta-fixo{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 14px;background:rgba(255,255,255,.96);box-shadow:0 -6px 20px rgba(0,0,0,.16)}
.cta-fixo .btn{padding:14px;font-size:1rem;max-width:none}

/* ---------- mobile ---------- */
@media (max-width:900px){
  section{padding:44px 0}
  .hero{padding:36px 0 40px}
  .hero-grid,.duo{grid-template-columns:1fr;gap:26px}
  .hero-foto{order:-1;max-width:330px;margin:0 auto}
  .cards{grid-template-columns:1fr;gap:38px}
  .btn{max-width:none}
  .oferta{padding:30px 18px}
  .carrossel-caixa{padding:0 30px}
  .carrossel figure{flex:0 0 calc(100% - 20px)}
  .carrossel img{max-height:none}
  .duo h2{text-align:left}
  .cta-fixo{display:block}
  body{padding-bottom:74px}
}