/* =============================================================
   METAL VALE BIJU — Landing page de vendas
   Linguagem visual replicada da referência (Nyx Hair):
   creme + rosa chapado + amarelo, cards pill, ondas, sparkles.

   Sumário:
   1.  Tokens
   2.  Reset e base
   3.  Utilitários (container, títulos, sparkles, ondas)
   4.  Botões
   5.  Animação de entrada no scroll
   6.  Header fixo (pill)
   7.  Hero
   8.  Bloco rosa — conexão / dor
   9.  Os três cursos (cards pill)
   10. Para quem é
   11. Depoimentos (duas esteiras)
   12. Oferta
   13. Garantia (selo serrilhado)
   14. Rodapé
   15. Barra fixa de CTA
   16. Responsivo
   ============================================================= */


/* =============================================================
   1. TOKENS — cores tiradas da referência
   ============================================================= */
:root{
  --creme:        #FDF6E3;   /* fundo claro da referência */
  --creme-card:   #FEFAEF;   /* cards sobre o rosa */
  --rosa:         #E8194B;   /* rosa chapado das seções */
  --rosa-escuro:  #C4123D;   /* sombras e estados */
  --rosa-claro:   #FF4D7D;   /* detalhes */
  --amarelo:      #F7E463;   /* botões */
  --amarelo-esc:  #E4CE3F;   /* borda/sombra dos botões */
  --texto:        #4A1020;   /* texto sobre creme */
  --texto-suave:  #7A3247;

  --serif:  "Fraunces", Georgia, serif;
  --sans:   "Nunito", "Karla", -apple-system, BlinkMacSystemFont, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  2.6rem;
  --t-3xl:  3.4rem;

  --largura-max:  1180px;
  --raio:         28px;
  --raio-pill:    999px;
  --espaco-secao: clamp(4rem, 8vw, 7rem);
}


/* =============================================================
   2. RESET E BASE
   ============================================================= */
*,*::before,*::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1,h2,h3{
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; }
ul,ol,dl,dt,dd{ margin: 0; padding: 0; }
li{ list-style: none; }

a:focus-visible,
button:focus-visible{
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Foco sobre fundo rosa precisa de cor que apareça */
.bloco-rosa a:focus-visible,
.depoimentos a:focus-visible,
.rodape a:focus-visible,
.cabecalho a:focus-visible{
  outline-color: var(--amarelo);
}


/* =============================================================
   3. UTILITÁRIOS
   ============================================================= */
.container{
  width: min(100% - 2.5rem, var(--largura-max));
  margin-inline: auto;
}

/* --- Títulos --- */
.titulo-secao{
  font-size: clamp(1.9rem, 4.2vw, var(--t-2xl));
  text-align: center;
  color: var(--rosa);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Sobre o rosa chapado, o título vira amarelo (como na referência).
   Vale para qualquer seção de fundo rosa, não só .bloco-rosa. */
.bloco-rosa .titulo-secao,
.depoimentos .titulo-secao{ color: var(--amarelo); }

.apoio-secao{
  text-align: center;
  max-width: 58ch;
  margin: 1.25rem auto 0;
  color: var(--texto-suave);
}

.bloco-rosa .apoio-secao{ color: rgba(253, 246, 227, .92); }

/* --- Blocos de cor --- */
.bloco-rosa{
  position: relative;
  background: var(--rosa);
  color: var(--creme);
  padding: var(--espaco-secao) 0;
}

.bloco-creme{
  position: relative;
  background: var(--creme);
  padding: var(--espaco-secao) 0;
}

/* --- Foto de fundo das seções -------------------------------
   A foto entra bem apagada por baixo da cor chapada, só como
   textura. O conteúdo fica acima com z-index.
   As seções são alternadas: nunca duas com foto em sequência. */
.tem-fundo > .container,
.tem-fundo > .esteira{
  position: relative;
  z-index: 2;
}

/* Onda e sparkles já são absolutos: só sobem de camada.
   Redeclarar position aqui os tiraria do posicionamento. */
.tem-fundo > .onda,
.tem-fundo > .brilho{ z-index: 2; }

.fundo-foto{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Sobre o rosa: a foto aparece pouco e a cor domina */
.bloco-rosa .fundo-foto,
.depoimentos .fundo-foto{ opacity: .14; }

/* Sobre o creme: mais apagada ainda, o fundo é claro */
.bloco-creme .fundo-foto{ opacity: .10; }

.fundo-foto--conexao{ background-image: url("assets/bg2desktop.webp"); }
.fundo-foto--depoimentos{ background-image: url("assets/bg3desktop.webp"); }
.fundo-foto--garantia{ background-image: url("assets/bgofertadesktop.webp"); }

/* --- Onda divisória entre seções ---------------------------
   A referência separa os blocos com uma curva, não com corte
   reto. O SVG fica na base da seção, apontando para a próxima. */
.onda{
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}

.onda--baixo{ bottom: -1px; }
.onda--cima{ top: -1px; }

.onda svg{
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 80px);
}

/* --- Sparkles: a estrela de 4 pontas da referência ---------- */
.brilho{
  position: absolute;
  pointer-events: none;
  opacity: .55;
  /* Cada estrela flutua e gira no seu ritmo. O --atraso muda a
     fase para elas não pulsarem em sincronia. */
  animation: flutuar 7s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}

.brilho svg{
  display: block;
  width: 100%;
  height: auto;
  animation: girar 18s linear infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes flutuar{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%     { transform: translateY(-14px) scale(1.08); }
}

/* Estrela decorativa dentro dos botões e títulos */
.estrela-inline{
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* =============================================================
   4. BOTÕES
   Amarelo com borda e sombra deslocada, como na referência.
   ============================================================= */
.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 800;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: var(--raio-pill);
  border: 2px solid var(--rosa);
  background: var(--amarelo);
  color: var(--rosa);
  cursor: pointer;
  /* A sombra sólida deslocada é a assinatura dos botões da ref. */
  box-shadow: 4px 4px 0 var(--rosa);
  transition: transform .18s ease, box-shadow .18s ease;
}

.botao:hover,
.botao:focus-visible{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--rosa);
}

.botao:active{
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--rosa);
}

/* Faixa de luz atravessando o botão no hover.
   Base: efeito "botão com brilho interno no hover" (Zephyr). */
.botao{ position: relative; overflow: hidden; }

.botao::after{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .75),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.botao:hover::after,
.botao:focus-visible::after{
  animation: brilhoPassando .75s ease;
}

@keyframes brilhoPassando{
  to{ left: 130%; }
}

/* A estrela dentro do botão gira ao passar o mouse */
.botao .estrela-inline{ transition: transform .5s ease; }

.botao:hover .estrela-inline{ transform: rotate(180deg) scale(1.15); }

/* Sobre fundo rosa, a borda/sombra viram creme para destacar */
.bloco-rosa .botao,
.depoimentos .botao{
  border-color: var(--creme);
  box-shadow: 4px 4px 0 var(--rosa-escuro);
}

.bloco-rosa .botao:hover,
.bloco-rosa .botao:focus-visible,
.depoimentos .botao:hover,
.depoimentos .botao:focus-visible{
  box-shadow: 2px 2px 0 var(--rosa-escuro);
}

.botao--bloco{ display: flex; width: 100%; }

/* Selo de segurança embaixo dos CTAs, como na referência */
.selo-ssl{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .85rem;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.bloco-rosa .selo-ssl,
.depoimentos .selo-ssl{ color: rgba(253, 246, 227, .85); }

.selo-ssl svg{ width: 12px; height: 12px; flex-shrink: 0; }

.cta-central{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}


/* =============================================================
   5. ANIMAÇÃO DE ENTRADA NO SCROLL
   Base: efeito "Animação de entrada conforme o scroll" (Zephyr).
   ============================================================= */
.scroll-bottom{
  opacity: 0;
  filter: blur(7px);
  transform: translateY(40px);
  transition: opacity .6s ease, filter .6s ease, transform .6s ease;
}

.scroll-bottom.ativo{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (min-width: 600px){
  .e1{ transition-delay: .08s; }
  .e2{ transition-delay: .18s; }
  .e3{ transition-delay: .28s; }
  .e4{ transition-delay: .38s; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  .scroll-bottom{
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  /* Nada roda sozinho: rotação, flutuação, pulso e brilho param */
  .girar,
  .girar-lento,
  .selo,
  .brilho,
  .brilho svg{
    animation: none;
  }

  .botao:hover{ transform: none; }
  .botao:hover::after{ animation: none; }

  .curso:hover,
  .plano:hover,
  .perfil:hover,
  .objecao:hover,
  .depoimento:hover{
    transform: none;
  }
}


/* =============================================================
   6. HEADER FIXO (pill rosa flutuante)
   ============================================================= */
.cabecalho{
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 1.25rem;
}

.cabecalho__pill{
  width: min(100%, 1240px);
  margin-inline: auto;
  background: var(--rosa);
  border-radius: var(--raio-pill);
  padding: .7rem 1rem .7rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 10px 30px -12px rgba(74, 16, 32, .45);
}

.cabecalho__logo{
  width: 132px;
  flex-shrink: 0;
  /* A logo é roxa; sobre o rosa ela vira creme */
  filter: brightness(0) invert(1);
}

.cabecalho__nav{
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.cabecalho__nav a{
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--creme);
  transition: color .2s ease;
}

.cabecalho__nav a:hover{ color: var(--amarelo); }

/* CTA do header: contorno amarelo, fundo transparente */
.cabecalho__cta{
  padding: .7rem 1.75rem;
  border: 2px solid var(--amarelo);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--amarelo);
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.cabecalho__cta:hover,
.cabecalho__cta:focus-visible{
  background: var(--amarelo);
  color: var(--rosa);
}


/* =============================================================
   7. HERO
   Fundo creme, texto à esquerda, foto recortada à direita.
   ============================================================= */
.hero{
  position: relative;
  min-height: min(94vh, 860px);
  display: flex;
  align-items: center;
  padding: clamp(8rem, 14vw, 10rem) 0 clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}

/* A foto ocupa a seção inteira */
.hero__media{
  position: absolute;
  inset: 0;
  background-image: url("assets/hero1desktop.webp");
  background-size: cover;
  background-position: center right;
}

/* Véu claro: abre da esquerda (onde fica o texto) e some à direita,
   deixando a foto aparecer no lado do colar. */
.hero__veu{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(253, 246, 227, .97) 0%,
    rgba(253, 246, 227, .93) 30%,
    rgba(253, 246, 227, .60) 52%,
    rgba(253, 246, 227, .10) 74%,
    rgba(253, 246, 227, 0)   90%
  );
}

.hero__conteudo{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__titulo{
  font-size: clamp(2.1rem, 4.6vw, var(--t-3xl));
  color: var(--rosa);
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

/* O trecho em cor escura, como no título da referência */
.hero__titulo em{
  font-style: normal;
  color: var(--texto);
}

.hero__texto{
  max-width: 46ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 2.25rem;
}

/* Sparkles decorativos, cada um em uma fase diferente.
   No hero eles ficam sobre a foto, então vão em creme/amarelo. */
.hero .brilho--a{ top: 16%; right: 8%; width: 62px; color: var(--amarelo); --atraso: 0s; }
.hero .brilho--b{ bottom: 18%; right: 30%; width: 34px; color: var(--creme); --atraso: -2.5s; }
.hero .brilho--c{ top: 30%; left: 46%; width: 46px; color: var(--rosa-claro); --atraso: -4.5s; }

.cursos .brilho--d{ top: 6%; left: 4%; width: 44px; color: var(--rosa-claro); --atraso: -1.5s; }
.cursos .brilho--e{ bottom: 8%; right: 5%; width: 56px; color: var(--amarelo); --atraso: -3.5s; }

#garantia .brilho--f{ top: 14%; right: 8%; width: 50px; color: var(--rosa-claro); --atraso: -1s; }
#garantia .brilho--g{ bottom: 12%; left: 6%; width: 38px; color: var(--amarelo); --atraso: -3s; }


/* =============================================================
   8. BLOCO ROSA — CONEXÃO / DOR
   ============================================================= */
.conexao__texto{
  max-width: 62ch;
  margin: 2rem auto 0;
  text-align: center;
  color: rgba(253, 246, 227, .94);
}

/* As três objeções: cards pill claros sobre o rosa */
.objecoes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 2rem;
}

.objecao{
  background: var(--creme-card);
  color: var(--texto);
  border-radius: var(--raio-pill);
  padding: 1.6rem 2rem;
  text-align: center;
  font-size: var(--t-base);
  font-style: italic;
  line-height: 1.45;
  box-shadow: 5px 5px 0 var(--rosa-escuro);
  transition: transform .3s ease, box-shadow .3s ease;
}

.objecao:hover{
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 8px 10px 0 var(--rosa-escuro);
}

.conexao__virada{
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--amarelo);
}


/* =============================================================
   9. OS TRÊS CURSOS — cards em formato pill
   ============================================================= */
.cursos__grade{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
  align-items: stretch;
}

.curso{
  background: #fff;
  border: 2px solid var(--rosa);
  /* Pill: raio grande em cima e embaixo, como os cards da ref. */
  border-radius: 140px 140px var(--raio) var(--raio);
  padding: 3rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 7px 7px 0 var(--rosa);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* O card sobe e a sombra cresce junto, como se descolasse */
.curso:hover{
  transform: translateY(-8px);
  box-shadow: 10px 14px 0 var(--rosa);
}

.curso__rotulo{
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--rosa-claro);
  margin-bottom: .25rem;
}

.curso__nome{
  font-size: clamp(1.5rem, 2.6vw, var(--t-xl));
  color: var(--rosa);
  margin-bottom: .75rem;
}

.curso__chamada{
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
}

.curso__aulas{ text-align: left; }

.curso__aulas dt{
  font-weight: 800;
  color: var(--rosa);
  margin-bottom: .25rem;
}

.curso__aulas dd{
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-suave);
  margin-bottom: 1.25rem;
}

.curso__lista{
  display: grid;
  gap: .8rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.curso__lista li{
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-suave);
}

/* Marcador: a estrela de 4 pontas da referência */
.curso__lista li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 12px;
  height: 12px;
  background: var(--rosa);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
}

.curso__fecho{
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--rosa);
  margin-bottom: 1.5rem;
}

.curso .botao{
  margin-top: auto;
  font-size: var(--t-sm);
  padding: .9rem 1.5rem;
}


/* =============================================================
   10. PARA QUEM É
   ============================================================= */
.perfis{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.perfil{
  grid-column: span 2;
  background: #fff;
  border: 2px solid var(--rosa);
  border-radius: var(--raio);
  padding: 1.75rem 1.75rem 1.75rem 3.5rem;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
  box-shadow: 5px 5px 0 var(--rosa);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Sobe e inclina de leve.
   Base: efeito "Elemento subindo e rotacionando no hover" (Zephyr),
   com ângulo bem menor que o original (-10deg era demais aqui). */
.perfil:hover{
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 8px 10px 0 var(--rosa);
}

.perfil:nth-child(4){ grid-column: 2 / span 2; }
.perfil:nth-child(5){ grid-column: 4 / span 2; }

/* A estrela do marcador gira quando o card recebe o mouse */
.perfil::before{ transition: transform .5s ease; }

.perfil:hover::before{ transform: translateY(-50%) rotate(180deg); }

.perfil::before{
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--rosa);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
}


/* =============================================================
   11. DEPOIMENTOS — duas esteiras em sentidos opostos
   ============================================================= */
.depoimentos{
  position: relative;
  background: var(--rosa);
  color: var(--creme);
  padding: var(--espaco-secao) 0 calc(var(--espaco-secao) * .8);
  overflow: hidden;
}

/* --- Videos das alunas em mockup de celular ------------------
   Ficam acima das esteiras de texto, dentro da mesma seção rosa. */
.videos-depoimento{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 3rem 0 .5rem;
}

.mockup{
  width: 200px;
  flex-shrink: 0;
}

/* Moldura do celular: cantos bem arredondados, borda grossa
   escura e um "notch" simples no topo, tudo em CSS puro */
.mockup__tela{
  position: relative;
  /* 9:16 — mesma proporção dos vídeos (720x1280), senão o
     object-fit: cover corta as laterais e come o texto do poster */
  aspect-ratio: 9 / 16;
  background: #17090f;
  border: 10px solid #17090f;
  border-radius: 34px;
  box-shadow: 0 18px 34px -16px rgba(23, 9, 15, .55);
  overflow: hidden;
}

.mockup__tela::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 20px;
  background: #17090f;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.mockup__capa,
.mockup__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.mockup__capa{ cursor: pointer; }

/* O card sobe de leve no hover, como os demais elementos do site */
.mockup{ transition: transform .3s ease; }
.mockup:hover{ transform: translateY(-6px); }

.esteira{
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.esteira + .esteira{ margin-top: 1rem; }

.esteira__trilha{
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: max-content;
  padding: .5rem 0;
  animation: correr var(--duracao, 60s) linear infinite;
}

.esteira[data-sentido="direita"] .esteira__trilha{
  animation-direction: reverse;
}

@keyframes correr{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.esteira:hover .esteira__trilha,
.esteira:focus-within .esteira__trilha{
  animation-play-state: paused;
}

.depoimento{
  flex: 0 0 auto;
  width: 330px;
  background: var(--creme-card);
  border-radius: var(--raio);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  box-shadow: 6px 6px 0 var(--rosa-escuro);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* A esteira já pausa no hover; o card sob o cursor se destaca */
.depoimento:hover{
  transform: translateY(-6px);
  box-shadow: 9px 12px 0 var(--rosa-escuro);
}

/* Aspas grandes no topo do card, como na referência */
.depoimento__aspas{
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .6;
  color: var(--rosa);
}

.depoimento__texto{
  margin: 0;
  font-size: var(--t-sm);
  font-style: italic;
  line-height: 1.55;
  color: var(--texto);
}

.depoimento__autora{
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(232, 25, 75, .22);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--texto-suave);
}

@media (prefers-reduced-motion: reduce){
  .esteira{
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .esteira__trilha{ animation: none; }
}


/* =============================================================
   12. OFERTA
   ============================================================= */
.planos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
  align-items: stretch;
}

.plano{
  background: #fff;
  border: 2px solid var(--rosa);
  border-radius: var(--raio);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 7px 7px 0 var(--rosa);
  transition: transform .3s ease, box-shadow .3s ease;
}

.plano:hover{
  transform: translateY(-8px);
  box-shadow: 10px 14px 0 var(--rosa);
}

.plano__nome{
  font-size: var(--t-lg);
  color: var(--rosa);
  margin-bottom: .75rem;
}

.plano__resumo{
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--texto-suave);
  margin-bottom: 1.75rem;
}

.plano__preco{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin-bottom: 1.75rem;
}

.plano__de{
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* Efeito "Riscar palavra e mudar a cor do risco" (Zephyr) */
risco{
  text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-color: var(--rosa);
  -webkit-text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
}

.plano__por{
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--rosa);
}

.plano__parcela{
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.plano .botao{ margin-top: auto; }


/* =============================================================
   13. GARANTIA — selo serrilhado, tipo lacre
   ============================================================= */
.garantia__grade{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: 960px;
  margin-inline: auto;
}

.selo{ width: clamp(200px, 26vw, 280px); }
.selo svg{ width: 100%; height: auto; overflow: visible; }

/* A serrilha é desenhada num raio ~116; encolhe para abrir espaço
   ao anel de texto que gira por fora dela (raio 112) */
.selo__serrilha{
  fill: var(--rosa);
  transform-box: view-box;
  transform-origin: 120px 120px;
  transform: scale(.80);
}
.selo__miolo{ fill: var(--creme); }
.selo__aro{ fill: none; stroke: var(--rosa); stroke-width: 3; }

.selo__numero{
  font-family: var(--sans);
  font-size: 54px;
  font-weight: 800;
  fill: var(--rosa);
  text-anchor: middle;
}

.selo__dias{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  fill: var(--rosa);
  text-anchor: middle;
}

/* Rosa: o anel de texto passa por dentro e por fora da serrilha,
   e em creme ele sumiria no trecho que sai para o fundo claro */
.selo__curva{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  fill: var(--rosa);
}

/* --- Rotação contínua -----------------------------------------
   Base: efeito "Elemento girando" (Zephyr). O CSS original da
   plataforma tem um erro de digitação em 0%{rotate(Odeg)}: usa a
   letra O maiúscula no lugar do zero, o que invalida o keyframe.
   Aqui vai corrigido, com transform-origin no centro do viewBox
   (SVG não aceita porcentagem de forma confiável em <g>). */
.girar,
.girar-lento{
  /* view-box: o transform-origin passa a valer no sistema de
     coordenadas do viewBox, não na caixa do próprio desenho */
  transform-box: view-box;
  transform-origin: 120px 120px;
}

.girar{ animation: girar 22s linear infinite; }

.girar-lento{ animation: girar 40s linear infinite reverse; }

@keyframes girar{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* O selo inteiro respira levemente, chamando atenção sem cansar.
   Base: efeito "Bloco/card pulsando" (Zephyr), com pausa entre
   os pulsos em vez de pulso contínuo. */
.selo{ animation: pulsoPausado 6s ease-in-out infinite; }

@keyframes pulsoPausado{
  0%   { transform: scale(1); }
  8%   { transform: scale(1.04); }
  16%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.garantia__titulo{
  font-size: clamp(1.9rem, 4vw, var(--t-2xl));
  color: var(--rosa);
  margin-bottom: 1rem;
}

.garantia__texto p{ color: var(--texto); }

.garantia__texto strong{ color: var(--rosa); }

.garantia__texto .botao{ margin-top: 1.5rem; }

.garantia__texto .selo-ssl{ justify-content: flex-start; }


/* =============================================================
   14. RODAPÉ
   ============================================================= */
.rodape{
  background: var(--rosa);
  color: rgba(253, 246, 227, .90);
  padding: 3.5rem 0 2.5rem;
}

/* Logo centralizada no topo do rodapé, como na referência */
.rodape__logo-topo{
  width: 190px;
  margin: 0 auto 3rem;
  filter: brightness(0) invert(1);
}

.rodape__colunas{
  display: grid;
  grid-template-columns: 1.2fr 1fr .9fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
}

.rodape__titulo{
  font-size: var(--t-base);
  font-weight: 800;
  color: var(--amarelo);
  margin-bottom: 1.15rem;
}

/* --- Bandeiras de pagamento ---
   Chips claros. Trocar por <img> das bandeiras oficiais quando
   o cliente definir o checkout. */
.bandeiras{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.bandeira{
  background: var(--creme);
  color: var(--rosa);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .4rem .7rem;
  border-radius: 6px;
}

/* --- Listas de contato e informações --- */
.rodape__contatos{
  display: grid;
  gap: .7rem;
}

.rodape__contatos li{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-sm);
}

.rodape__contatos svg{
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--amarelo);
}

.rodape__contatos a{
  text-decoration: none;
  color: rgba(253, 246, 227, .90);
  transition: color .2s ease;
}

.rodape__contatos a:hover{ color: var(--amarelo); }

/* --- Etiquetas de segurança --- */
.rodape__seguranca{
  display: grid;
  gap: .5rem;
}

.etiqueta{
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--creme);
  color: var(--rosa);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .5rem .8rem;
  border-radius: 6px;
}

.etiqueta svg{ width: 13px; height: 13px; flex-shrink: 0; }

/* --- Bloco legal --- */
.rodape__legal{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
  padding-top: 2rem;
  border-top: 1px solid rgba(253, 246, 227, .22);
}

.rodape__copy{
  font-size: var(--t-xs);
  color: rgba(253, 246, 227, .85);
  margin: 0;
  white-space: nowrap;
}

.rodape__aviso{
  font-size: var(--t-xs);
  line-height: 1.55;
  color: rgba(253, 246, 227, .72);
  margin: 0;
}


/* =============================================================
   15. BARRA FIXA DE CTA (mobile)
   ============================================================= */
.barra-fixa{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(253, 246, 227, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -8px 26px -18px rgba(74, 16, 32, .7);
  transform: translateY(115%);
  transition: transform .35s ease;
}

.barra-fixa.visivel{ transform: translateY(0); }

@media (min-width: 721px){
  .barra-fixa{ display: none; }
}


/* =============================================================
   16. RESPONSIVO
   ============================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1024px){

  /* O menu do header sai; ficam logo e CTA */
  .cabecalho__nav{ display: none; }

  /* O véu fecha mais: em tela estreita a foto fica atrás do texto */
  .hero__veu{
    background: linear-gradient(
      100deg,
      rgba(253, 246, 227, .97) 0%,
      rgba(253, 246, 227, .94) 45%,
      rgba(253, 246, 227, .72) 70%,
      rgba(253, 246, 227, .40) 100%
    );
  }

  .hero__titulo{ max-width: 20ch; }

  /* Fundos das seções também trocam para a versão vertical */
  .fundo-foto--conexao{ background-image: url("assets/bg2mobile.webp"); }
  .fundo-foto--depoimentos{ background-image: url("assets/bg3mobile.webp"); }
  .fundo-foto--garantia{ background-image: url("assets/bgofertamobile.webp"); }

  .cursos__grade,
  .planos{ grid-template-columns: repeat(2, 1fr); }

  .cursos__grade > :last-child,
  .planos > :last-child{
    grid-column: 1 / -1;
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }

  .objecoes{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  .perfil,
  .perfil:nth-child(4){ grid-column: span 3; }
  .perfil:nth-child(5){ grid-column: 2 / span 4; }

  .garantia__grade{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .garantia__texto .selo-ssl{ justify-content: center; }

  /* Rodapé: 4 colunas viram 2 */
  .rodape__colunas{ grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  .rodape__legal{ grid-template-columns: 1fr; gap: 1.25rem; }

  .rodape__copy{ white-space: normal; }
}


/* ---------- Mobile ---------- */
@media (max-width: 720px){

  :root{ --raio: 22px; }

  .cabecalho{ top: .6rem; padding: 0 .75rem; }

  .cabecalho__pill{ padding: .55rem .6rem .55rem 1.25rem; }

  .cabecalho__logo{ width: 104px; }

  .cabecalho__cta{ padding: .6rem 1.15rem; font-size: var(--t-xs); }

  .hero{
    min-height: auto;
    padding: 7rem 0 4rem;
    align-items: flex-start;
  }

  /* A versão vertical da foto enquadra melhor no celular */
  .hero__media{
    background-image: url("assets/hero1mobile.webp");
    background-position: center top;
  }

  /* Véu de cima para baixo: o texto fica sobre a área clara do topo */
  .hero__veu{
    background: linear-gradient(
      180deg,
      rgba(253, 246, 227, .96) 0%,
      rgba(253, 246, 227, .93) 42%,
      rgba(253, 246, 227, .74) 68%,
      rgba(253, 246, 227, .50) 100%
    );
  }

  .hero__titulo{ max-width: 100%; }

  .hero__texto{
    max-width: 100%;
    font-size: var(--t-base);
  }

  .hero__acao{ width: 100%; }

  .hero .botao{ width: 100%; }

  .cursos__grade,
  .planos,
  .perfis{ grid-template-columns: 1fr; gap: 1.25rem; }

  .cursos__grade > :last-child,
  .planos > :last-child{ grid-column: auto; max-width: 100%; }

  .perfil,
  .perfil:nth-child(4),
  .perfil:nth-child(5){ grid-column: auto; }

  .curso{
    border-radius: 90px 90px var(--raio) var(--raio);
    padding: 2.5rem 1.5rem 2rem;
  }

  /* Videos-depoimento: um mockup maior por linha, em vez de vários pequenos */
  .mockup{ width: min(74vw, 260px); }

  /* Depoimentos: cards mais estreitos e fade menor */
  .depoimento{ width: 70vw; max-width: 290px; padding: 1.5rem; }

  .esteira__trilha{ gap: 1rem; }

  .esteira{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  /* Rodapé em coluna única no celular */
  .rodape__colunas{ grid-template-columns: 1fr; gap: 2rem; }

  .rodape__logo-topo{ width: 150px; margin-bottom: 2.25rem; }

  .rodape{ padding-bottom: 6rem; }

  /* Sparkles menores para não poluir a tela pequena */
  .hero .brilho--a{ width: 40px; }
  .hero .brilho--b{ display: none; }
  .hero .brilho--c{ width: 30px; }
}


/* ---------- Mobile pequeno ---------- */
@media (max-width: 420px){
  .botao{ padding: .95rem 1.5rem; font-size: var(--t-base); }
  .plano{ padding: 2rem 1.35rem; }
}