/* ==========================================================================
   Método ALPHA — cópia estática (HTML/CSS/JS)
   Origem: https://castrolicitacoes.com.br/ml-v14-bio/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* vermelhos — extraídos do logo ALPHA */
  --red-100: #F7C2C4;   /* bordas / divisores sobre claro */
  --red-300: #FF9095;   /* destaque sobre fundo escuro */
  --red-400: #F2323A;   /* hover / topo dos gradientes */
  --red-500: #D6070F;   /* cor de marca (fundo do logo) */
  --red-600: #A50A11;   /* silhuetas escuras do logo */
  --red-700: #7D060B;
  --red-800: #4E0407;
  --red-900: #2E0305;   /* quase preto avermelhado */

  /* neutros / texto */
  --ink-900: #1E0A0C;
  --ink-700: #3A2426;
  --ink-600: #4A2E30;
  --ink-500: #5C4547;

  /* claros */
  --cream:      #FFF5F5;
  --cream-card: #FDF7F7;
  --white:      #FFFFFF;

  /* gradientes */
  --grad-brand:  linear-gradient(90deg, var(--red-500) 0%, var(--red-600) 100%);
  --grad-cta:    linear-gradient(90deg, var(--red-400) 0%, var(--red-600) 100%);
  --grad-footer: linear-gradient(90deg, var(--red-700) 0%, var(--red-500) 100%);
  --grad-faq:    linear-gradient(132deg, var(--red-600), var(--red-500));
  --grad-offer:  radial-gradient(circle at 57.147% 0%, #8A060C 0%, var(--red-800) 20%, var(--red-900) 55%, var(--red-900) 100%);

  /* tipografia */
  --f-serif: 'Cinzel', Georgia, serif;
  --f-sans:  'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --container: 1140px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-700);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

s { text-decoration: line-through; color: var(--ink-500); font-weight: 700; opacity: .7; }

/* --------------------------------------------------------------------------
   3. Layout base
   -------------------------------------------------------------------------- */
.sec { position: relative; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.container-narrow { max-width: 960px; }

.two-col {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.two-col > .col { flex: 1 1 0; min-width: 0; }

/* --------------------------------------------------------------------------
   4. Tipografia utilitária
   -------------------------------------------------------------------------- */
.h-serif {
  font-family: var(--f-serif);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
}

.h-23 { font-size: 23px; }
.h-26 { font-size: 26px; }
.h-30 { font-size: 30px; }
.h-31 { font-size: 31px; }
.h-40 { font-size: 40px; }

.center     { text-align: center; }
.light      { color: var(--white); }
.accent     { color: var(--red-500); }
.accent-light { color: var(--red-300); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   5. Ícones de lista
   -------------------------------------------------------------------------- */
.ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* » duplo chevron */
.ico-chevrons {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6070F' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M8.5 8.5l3.2 3.5-3.2 3.5M12.8 8.5l3.2 3.5-3.2 3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* check dentro de círculo (vermelho) */
.ico-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6070F' stroke-width='1.4'%3E%3Cpath d='M21.5 11.2V12a9.5 9.5 0 11-5.6-8.7' stroke-linecap='round'/%3E%3Cpath d='M8 11.5l3 3 8-8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* check dentro de círculo (lista da oferta) */
.ico-check-solid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6070F' stroke-width='1.4'%3E%3Cpath d='M21.5 11.2V12a9.5 9.5 0 11-5.6-8.7' stroke-linecap='round'/%3E%3Cpath d='M8 11.5l3 3 8-8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-list { display: flex; flex-direction: column; gap: 14px; }

.icon-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-600);
}

/* lista alinhada à esquerda, mas centralizada como bloco (seção 03) */
.icon-list-center {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--white);
  border-radius: 50px;
  transition: transform .25s ease;
}

.btn:hover { transform: scale(1.05); }

.btn-cta { background-image: var(--grad-cta); box-shadow: 0 8px 24px rgba(214, 7, 15, .28); }

.btn-arrow { width: 20px; height: 20px; fill: currentColor; }

.cta-wrap { display: flex; justify-content: center; margin-top: 34px; }

.btn-cta.btn-block {
  width: calc(100% + 100px);
  margin-left: -50px;
  border-radius: 0;
  padding: 22px 24px;
}

/* --------------------------------------------------------------------------
   Marca ALPHA
   -------------------------------------------------------------------------- */
.brand img {
  display: block;
  height: auto;
  width: 100%;
}

.brand-top {
  width: 132px;
  margin: 0 auto 34px;
}

.brand-footer {
  width: 104px;
  margin: 0 0 22px;
}

/* --------------------------------------------------------------------------
   SEÇÃO 01 — Hero / VSL
   -------------------------------------------------------------------------- */
.sec-hero {
  background: var(--white);
  padding: 34px 0 60px;
}

.hero-title {
  max-width: 800px;
  margin-inline: auto;
  font-family: var(--f-serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}

.hero-sub {
  margin-top: 18px;
  font-family: var(--f-sans);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: #000;
}

.hero-label {
  margin-top: 20px;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  color: #000;
}

.vsl { margin-top: 24px; }

.vsl-frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  aspect-ratio: 464 / 832;
  overflow: hidden;
  background: #000;
}

/* pointer-events: none tira do video o duplo-clique de tela cheia e qualquer
   interacao direta. Os overlays ficam por cima em position:absolute, entao
   continuam clicaveis. */
.vsl-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Safari/iOS mostram controle nativo em alguns estados mesmo sem o atributo
   controls (tela cheia, botao de play inicial). */
.vsl-video::-webkit-media-controls,
.vsl-video::-webkit-media-controls-enclosure,
.vsl-video::-webkit-media-controls-panel,
.vsl-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Os dois overlays ficam ocultos por padrao; o JS liga um deles pela classe do
   frame. is-muted = autoplay rodando sem som. is-blocked = o navegador barrou
   ate o autoplay mudo (iOS em economia de bateria, data saver). */
.vsl-play,
.vsl-sound { display: none; }

.vsl-frame.is-blocked .vsl-play,
.vsl-frame.is-paused  .vsl-play,
.vsl-frame.is-muted   .vsl-sound { display: grid; }

/* o quadro inteiro e o botao de pausa/play, entao o cursor precisa dizer isso */
.vsl-frame.is-playing,
.vsl-frame.is-paused { cursor: pointer; }

.vsl-play {
  position: absolute;
  inset: 0;
  place-items: center;
}

.vsl-play svg {
  width: 74px;
  height: 74px;
  fill: var(--white);
  background: rgba(0, 0, 0, .45);
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  padding: 14px;
  transition: transform .2s ease;
}

.vsl-play:hover svg { transform: scale(1.08); }

/* Overlay de som: cobre o video inteiro porque o clique em qualquer ponto
   precisa valer como o gesto que o navegador exige para liberar o audio. */
.vsl-sound {
  position: absolute;
  inset: 0;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, .38);
  transition: background .2s ease;
}

.vsl-sound:hover { background: rgba(0, 0, 0, .48); }

.vsl-sound-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  border: 2px solid rgba(255, 255, 255, .9);
  transition: transform .2s ease;
}

.vsl-sound:hover .vsl-sound-icon { transform: scale(1.08); }

.vsl-sound-icon svg { width: 34px; height: 34px; fill: var(--white); }

.vsl-sound-label {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--white);
  background: rgba(0, 0, 0, .6);
  padding: 8px 16px;
  border-radius: 4px;
}

/* pulso discreto: o overlay precisa ser notado sem virar distracao */
@media (prefers-reduced-motion: no-preference) {
  .vsl-frame.is-muted .vsl-sound-icon { animation: vsl-pulso 2.2s ease-in-out infinite; }
}

@keyframes vsl-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
  70%      { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

/* --------------------------------------------------------------------------
   SEÇÃO 02 — Citação
   -------------------------------------------------------------------------- */
.sec-quote {
  background-image: var(--grad-brand);
  padding: 70px 0;
}

.quote {
  font-family: var(--f-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--white);
}

.quote-author {
  margin-top: 16px;
  font-family: var(--f-text);
  font-size: 18px;
  text-align: center;
  color: rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   SEÇÃO 03 — Produto
   -------------------------------------------------------------------------- */
.sec-product {
  background-image: var(--grad-brand);
  padding: 30px 0 75px;
}

.card-white {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border-radius: 20px;
  padding: 40px;
}

.card-white .mockup { max-width: 800px; width: 100%; margin-top: -110px; }

.sec-product .h-31 { max-width: 850px; }
.sec-product .icon-list { margin-top: 6px; }

/* --------------------------------------------------------------------------
   SEÇÃO 04 — É para você que
   -------------------------------------------------------------------------- */
.sec-foryou { background: var(--white); padding: 70px 0; }

.sec-foryou .two-col { align-items: center; }
.sec-foryou .h-30 { max-width: 550px; margin-bottom: 26px; }
.sec-foryou .col-media img { max-width: 360px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   SEÇÃO 05 — Carrossel "Dê uma espiadinha"
   -------------------------------------------------------------------------- */
.sec-peek {
  background-image: var(--grad-brand);
  padding: 50px 0 130px;
  overflow: hidden;
}

.peek-title { margin-bottom: 36px; color: var(--white); }

.marquee { width: 100%; overflow: hidden; }

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: peek-scroll 40s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.slide { flex: 0 0 auto; width: 455px; }

.slide img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

@keyframes peek-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   SEÇÃO 06 — 4 passos
   -------------------------------------------------------------------------- */
.sec-steps { background: var(--white); padding: 70px 0 90px; }

.two-col-steps { align-items: flex-start; }

.col-sticky {
  position: sticky;
  top: 0;
  background: var(--white);
  padding: 10px 0 20px;
  z-index: 2;
}

.steps { display: flex; flex-direction: column; gap: 30px; }

.step {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--red-100);
  border-radius: 6px;
  padding: 30px;
}

.step-num { flex: 0 0 auto; }
.step-num svg { width: auto; height: 132px; }

.step-body { display: flex; flex-direction: column; gap: 12px; }

.step-body p {
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   SEÇÃO 07 — Oferta + Garantia
   -------------------------------------------------------------------------- */
.sec-offer {
  background-color: var(--red-900);
  background-image: var(--grad-offer);
  padding: 90px 0 100px;
}

.offer-title { color: var(--white); max-width: 760px; margin-inline: auto; }

.offer-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 50px;
}

.offer-card {
  flex: 0 1 558px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--cream-card);
  border-radius: 8px;
  padding: 50px;
  overflow: hidden;
}

.offer-card .mockup { width: 100%; }

.offer-list { display: flex; flex-direction: column; }

.offer-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-700);
  border-bottom: 1px solid rgba(214, 7, 15, .14);
}

.offer-list > li:last-child { border-bottom: 0; }

.offer-list ul {
  margin-top: 6px;
  padding-left: 20px;
  list-style: circle;
}

.offer-list ul li { display: list-item; }

.price-from  { text-align: center; font-size: 16px; color: var(--ink-700); }
.price-label { text-align: center; font-size: 17px; color: var(--ink-700); }

.price {
  text-align: center;
  font-family: var(--f-sans);
  font-size: 67px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -2px;
  color: var(--red-500);
}

.price-cash { text-align: center; font-size: 17px; color: var(--ink-700); }

.guarantee-card {
  flex: 0 1 609px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background: rgba(255, 255, 255, .09);
  border-radius: 8px;
  padding: 40px 40px 40px 60px;
}

.guarantee-card .seal { max-width: 420px; width: 100%; }

.guarantee-card p {
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, .92);
}

/* --------------------------------------------------------------------------
   SEÇÃO 08 — Mentora
   -------------------------------------------------------------------------- */
.sec-mentor {
  background: var(--cream);
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.sec-mentor .two-col { align-items: center; gap: 48px; }

/* recorte com fundo transparente: entra como <img>, nao como background cover */
.col-foto img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 34px rgba(46, 3, 5, .18));
  /* o recorte termina na coxa; o fade evita o corte reto na base */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.sec-mentor .h-40 { margin-bottom: 22px; }

.sec-mentor p {
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-700);
  margin-bottom: 18px;
}

.sec-mentor p:last-child { margin-bottom: 0; }

.col-spacer { pointer-events: none; }

/* --------------------------------------------------------------------------
   SEÇÃO 09 — F.A.Q.
   -------------------------------------------------------------------------- */
.sec-faq { background: var(--cream); padding: 60px 0 80px; }

.accordion { display: flex; flex-direction: column; gap: 10px; }

.acc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px;
  text-align: left;
  font-family: var(--f-text);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  background-image: var(--grad-faq);
  border-radius: 10px;
}

.acc-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform .25s ease;
}

.acc-title[aria-expanded="true"] .acc-icon { transform: rotate(180deg); }

.acc-content {
  padding: 15px;
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-500);
}

.acc-content p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   SEÇÃO 10 — Rodapé
   -------------------------------------------------------------------------- */
.sec-footer {
  background-image: var(--grad-footer);
  color: var(--white);
  padding: 60px 0 70px;
}

.footer-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-left: 130px;
}

.footer-col { flex: 1 1 0; }

.footer-copy,
.footer-heading {
  font-family: var(--f-text);
  font-size: 17px;
  font-weight: 700;
}

.footer-secure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--f-text);
  font-size: 15px;
}

.footer-secure svg { width: 20px; height: 20px; }

.footer-links { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.footer-links a {
  font-family: var(--f-text);
  font-size: 15px;
  transition: opacity .2s ease;
}

.footer-links a:hover { opacity: .75; }

.footer-legal { margin-top: 56px; }

.footer-legal p {
  max-width: 900px;
  margin: 0 auto 14px;
  font-family: var(--f-text);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .offer-grid { flex-direction: column; align-items: stretch; }
  .offer-card,
  .guarantee-card { flex: 1 1 auto; }
  .guarantee-card { padding: 40px; }
  .slide { width: 340px; }
  .footer-top { padding-left: 0; }
}

@media (max-width: 880px) {
  .two-col { flex-direction: column; }
  .col-sticky { position: static; }
  .col-spacer { display: none; }

  /* sem arte mobile dedicada: recorta a arte desktop na figura à esquerda */
  .sec-mentor { padding: 50px 0 60px; }
  .sec-mentor .two-col { flex-direction: column; gap: 28px; }
  .col-foto img { max-width: 300px; }
}

@media (max-width: 767px) {
  .brand-top { width: 104px; margin-bottom: 26px; }
  .brand-footer { width: 88px; }

  .hero-title { font-size: 24px; }
  .hero-sub   { font-size: 17px; }

  .quote  { font-size: 22px; }
  .h-40   { font-size: 30px; }
  .h-31, .h-30 { font-size: 24px; }
  .h-26   { font-size: 21px; }
  .h-23   { font-size: 20px; }

  .card-white { padding: 24px; }
  .card-white .mockup { margin-top: -60px; }

  .step { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; }
  .step-num svg { height: 96px; }

  .offer-card { padding: 28px; }
  .btn-cta.btn-block { width: calc(100% + 56px); margin-left: -28px; }
  .price { font-size: 50px; }

  .guarantee-card { padding: 28px; }

  .slide { width: 260px; }

  .footer-top { flex-direction: column; gap: 30px; }
}