/* ==========================================================================
   Marcelo Cria — LP de redirecionamento
   Design base: 1401px. A hero é proporcional (unidade --hu = 1cqw, travada
   em 16px acima de 1600px) para reproduzir o layout original com exatidão.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Playfair Display (auto-hospedada: sem dependência de CDN externa)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/playfair-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;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/playfair-italic-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;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #FFFDF5;
  --ink: #1F1714;
  --body-text: #4A4642;
  --rule: #EADCD0;
  --foot-text: #6E5D54;
  --foot-strong: #3B2C25;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --shell: 1000px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: #2E2320;
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; }

a { color: #C4101B; text-decoration: none; }
a:hover { color: #E4141F; }

:focus-visible {
  outline: 3px solid #F04A1E;
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 20px;
  background: #1E1206;
  color: #FFF6EA;
  font-size: 13px;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; color: #FFF6EA; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1401 / 683;
  background: var(--cream);
  overflow: hidden;
  container-type: inline-size;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #E8A56A;
}

/* Véu creme: só entra quando a hero deixa de ser proporcional (< 1200px),
   para manter o texto escuro legível sobre o vídeo. */
.hero__scrim {
  position: absolute;
  inset: 0;
  display: none;
}

.hero__inner {
  --hu: min(1cqw, 16px);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero__logo {
  position: absolute;
  left: calc(16.6 * var(--hu));
  top: calc(6.2 * var(--hu));
  width: calc(7.15 * var(--hu));
  height: calc(5.77 * var(--hu));
  object-fit: contain;
}

.hero__title {
  position: absolute;
  left: calc(16.631 * var(--hu));
  top: calc(15.7744 * var(--hu));
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(3.8544 * var(--hu));
  line-height: calc(4.0685 * var(--hu));
  color: var(--ink);
  white-space: nowrap;
}
.hero__title span,
.hero__title em { display: block; }
.hero__title em { font-style: italic; }

.hero__lead {
  position: absolute;
  left: calc(16.9165 * var(--hu));
  margin: 0;
  font-size: calc(1.0707 * var(--hu));
  line-height: calc(1.4989 * var(--hu));
  color: var(--body-text);
  white-space: nowrap;
}
.hero__lead--1 { top: calc(24.9822 * var(--hu)); }
.hero__lead--2 { top: calc(28.7652 * var(--hu)); }

.hero__cta {
  position: absolute;
  left: calc(16.8451 * var(--hu));
  top: calc(33.7616 * var(--hu));
  height: calc(4.3 * var(--hu));
  display: inline-flex;
  align-items: center;
  gap: calc(1.1 * var(--hu));
  padding: 0 calc(0.5 * var(--hu)) 0 calc(2 * var(--hu));
  border-radius: 999px;
  background: rgba(26, 15, 7, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFF6EA;
  font-size: calc(0.86 * var(--hu));
  font-weight: 700;
  letter-spacing: calc(0.11 * var(--hu));
  white-space: nowrap;
  box-shadow:
    0 calc(1.3 * var(--hu)) calc(2.4 * var(--hu)) calc(-1 * var(--hu)) rgba(26, 15, 7, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero__cta:hover {
  color: #FFF6EA;
  transform: translateY(-2px);
  box-shadow:
    0 calc(1.7 * var(--hu)) calc(2.8 * var(--hu)) calc(-1 * var(--hu)) rgba(26, 15, 7, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hero__cta-badge {
  display: grid;
  place-items: center;
  width: calc(3.1 * var(--hu));
  height: calc(3.1 * var(--hu));
  border-radius: 50%;
  background: linear-gradient(160deg, #F4802E, #E01018);
  color: #fff;
  font-size: calc(1.05 * var(--hu));
  line-height: 1;
  box-shadow: 0 calc(0.3 * var(--hu)) calc(0.7 * var(--hu)) calc(-0.2 * var(--hu)) rgba(224, 16, 24, 0.6);
}

/* Acima de 1600px a hero para de crescer e passa a ter altura fixa,
   mantendo as mesmas proporções internas. */
@media (min-width: 1600px) {
  .hero {
    aspect-ratio: auto;
    height: 780px;
  }
}

/* ==========================================================================
   Faixa social (marquee)
   ========================================================================== */

/* A faixa é mais larga que a tela (112%) e inclinada, então sangra para os
   quatro lados. --bleed abre espaço vertical suficiente para a inclinação e
   deixa o próprio .marquee recortar a sangria lateral, sem scroll horizontal.
   (2,45vw cobre a altura ganha pela rotação em qualquer largura de tela.) */
.marquee {
  --bleed: calc(3vw + 12px);
  position: relative;
  z-index: 3;
  height: calc(52px + var(--bleed) * 2);
  margin-top: calc(-42px - var(--bleed));
  margin-bottom: calc(-1 * var(--bleed));
  overflow: hidden;
}

.marquee__band {
  position: absolute;
  left: -6%;
  top: var(--bleed);
  width: 112%;
  height: 58px;
  background: #FFFFFF;
  transform: rotate(-2.5deg);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: mc-marquee 22s linear infinite;
}

.marquee__item {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

.marquee__icon { width: 24px; height: 24px; }

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

/* ==========================================================================
   Cards
   ========================================================================== */

.cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 72px 24px 40px;
}

.card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

.card__media {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card__body {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card__kicker {
  font-size: 11px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
}

.card__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.card__title em { font-style: italic; }

.card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* --- Card 1: Primeiros 10 Vídeos ----------------------------------------- */

.card--lowticket { background: #2A1B12; min-height: 430px; }
.card--lowticket .card__media {
  background-image: url('assets/card-lowticket.webp');
  background-position: center center;
}
.card--lowticket .card__media::after {
  background: linear-gradient(100deg,
    rgba(20, 12, 8, 0.88) 0%,
    rgba(24, 14, 9, 0.72) 38%,
    rgba(24, 14, 9, 0.15) 62%,
    rgba(24, 14, 9, 0) 78%);
}
.card--lowticket .card__body {
  align-items: flex-start;
  gap: 24px;
  max-width: 52%;
  padding: 62px 0 62px 64px;
}
.card--lowticket .card__kicker { color: #F8A85C; }
.card--lowticket .card__title {
  font-size: 52px;
  letter-spacing: -1px;
  color: #FFF8F0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.card--lowticket .card__text { max-width: 330px; color: #E7D8CC; }

/* --- Card 2: Mentoria ---------------------------------------------------- */

.card--mentoria { background: #B4400E; aspect-ratio: 1657 / 952; }
.card--mentoria .card__media {
  background-image: url('assets/card-mentoria.webp');
  background-position: center bottom;
}
.card--mentoria .card__media::after {
  background: linear-gradient(260deg,
    rgba(28, 14, 6, 0.9) 0%,
    rgba(28, 14, 6, 0.78) 34%,
    rgba(28, 14, 6, 0.2) 58%,
    rgba(28, 14, 6, 0) 74%);
}
.card--mentoria .card__body {
  align-items: flex-end;
  text-align: right;
  gap: 22px;
  margin-left: auto;
  max-width: 52%;
  padding: 58px 64px 58px 0;
}
.card--mentoria .card__kicker { font-size: 13px; letter-spacing: 5px; color: #FBBE7A; }
.card--mentoria .card__title {
  font-size: 48px;
  color: #FFF8F0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.card--mentoria .card__text { max-width: 320px; font-size: 14.5px; color: #EBDCD0; }

/* --- Card 3: Consultoria ------------------------------------------------- */

.card--consultoria { background: #1A1D22; min-height: 400px; }
.card--consultoria .card__media {
  background-image: url('assets/card-consultoria.webp');
  background-position: center center;
}
.card--consultoria .card__media::after {
  background: linear-gradient(100deg,
    rgba(10, 12, 15, 0.9) 0%,
    rgba(10, 12, 15, 0.78) 36%,
    rgba(10, 12, 15, 0.25) 60%,
    rgba(10, 12, 15, 0) 76%);
}
.card--consultoria .card__body {
  align-items: flex-start;
  gap: 22px;
  max-width: 52%;
  padding: 58px 0 58px 64px;
}
.card--consultoria .card__kicker { color: #9FB6C9; }
.card--consultoria .card__title {
  font-size: 50px;
  letter-spacing: -1px;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.card--consultoria .card__text { max-width: 320px; color: #D8DEE5; }

/* ==========================================================================
   Botões "pearl"
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  padding: 20px 38px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  white-space: nowrap;
  text-align: center;
  transition: filter .2s ease;
}
.btn::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 10%;
  bottom: 48%;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.05) 70%,
    rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 9px 8px -9px rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.btn:hover { filter: brightness(1.06); }

.btn--orange {
  background: #F04A1E;
  color: #fff;
  text-shadow: 0 1px 2px rgba(90, 20, 0, 0.35);
  box-shadow:
    inset 0 5px 14px rgba(255, 255, 255, 0.35),
    inset 0 -2px 5px rgba(70, 20, 0, 0.4),
    0 18px 24px -14px rgba(0, 0, 0, 0.7);
}
.btn--orange:hover { color: #fff; }

.btn--dark {
  padding: 19px 38px;
  background: #1E1206;
  color: #fff;
  text-shadow: 0 1px 2px rgba(90, 20, 0, 0.35);
  box-shadow:
    inset 0 5px 14px rgba(255, 255, 255, 0.22),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5),
    0 18px 24px -14px rgba(0, 0, 0, 0.65);
}
.btn--dark:hover { color: #fff; }

.btn--light {
  background: #E8E4DE;
  color: #14181F;
  box-shadow:
    inset 0 5px 14px rgba(255, 255, 255, 0.75),
    inset 0 -2px 6px rgba(20, 25, 32, 0.25),
    0 18px 24px -14px rgba(0, 0, 0, 0.6);
}
.btn--light:hover { color: #14181F; }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.footer {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.footer__rule { height: 1px; background: var(--rule); margin-bottom: 32px; }
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__logo { width: 168px; height: 135px; object-fit: contain; }
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  font-size: 12.5px;
  color: var(--foot-text);
}
.footer__meta strong { color: var(--foot-strong); }

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* --- Hero em fluxo abaixo de 1200px (o texto proporcional ficaria pequeno) */
@media (max-width: 1199px) {
  .hero {
    aspect-ratio: auto;
    min-height: min(100svh, 780px);
    display: flex;
    align-items: flex-start;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
  }
  .hero__video { object-position: 72% center; }
  .hero__scrim {
    display: block;
    z-index: 1;
    background: linear-gradient(100deg,
      rgba(255, 253, 245, 0.96) 0%,
      rgba(255, 253, 245, 0.9) 40%,
      rgba(255, 253, 245, 0.55) 64%,
      rgba(255, 253, 245, 0) 86%);
  }
  .hero__inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.6vw, 22px);
    width: 100%;
    max-width: 660px;
    padding: clamp(34px, 7vw, 70px) clamp(24px, 5vw, 64px) clamp(56px, 9vw, 88px);
  }
  .hero__logo,
  .hero__title,
  .hero__lead,
  .hero__cta { position: static; }

  .hero__logo { width: clamp(84px, 12vw, 108px); height: auto; }

  .hero__title {
    /* 8,6vw mantém "Conteúdo que vira" numa linha só até 320px */
    font-size: clamp(1.85rem, 8.6vw, 3.4rem);
    line-height: 1.08;
    white-space: normal;
  }

  .hero__lead {
    max-width: 46ch;
    font-size: clamp(0.95rem, 1.7vw, 1.0625rem);
    line-height: 1.55;
    white-space: normal;
  }
  .nb { display: none; }

  .hero__cta {
    height: auto;
    margin-top: 6px;
    padding: 8px 8px 8px 28px;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 1.3px;
    box-shadow:
      0 18px 30px -14px rgba(26, 15, 7, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .hero__cta:hover {
    box-shadow:
      0 22px 34px -14px rgba(26, 15, 7, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  .hero__cta-badge {
    width: 42px;
    height: 42px;
    font-size: 15px;
    box-shadow: 0 4px 10px -3px rgba(224, 16, 24, 0.6);
  }
}

/* --- Cards em coluna única ---------------------------------------------- */
@media (max-width: 880px) {
  .cards { padding: 56px 20px 32px; gap: 20px; }

  .card { display: flex; flex-direction: column; }
  .card--mentoria { aspect-ratio: auto; }
  .card--lowticket,
  .card--consultoria { min-height: 0; }

  .card__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .card--lowticket .card__media { background-position: 68% center; }
  .card--mentoria .card__media { background-position: 26% center; }
  .card--consultoria .card__media { background-position: 78% center; }

  .card--lowticket .card__media::after {
    background: linear-gradient(180deg,
      rgba(22, 13, 8, 0) 42%,
      rgba(24, 14, 9, 0.6) 74%,
      #2A1B12 100%);
  }
  .card--mentoria .card__media::after {
    background: linear-gradient(180deg,
      rgba(28, 14, 6, 0) 42%,
      rgba(120, 44, 12, 0.55) 74%,
      #B4400E 100%);
  }
  .card--consultoria .card__media::after {
    background: linear-gradient(180deg,
      rgba(10, 12, 15, 0) 42%,
      rgba(12, 15, 20, 0.6) 74%,
      #1A1D22 100%);
  }

  .card__body,
  .card--lowticket .card__body,
  .card--mentoria .card__body,
  .card--consultoria .card__body {
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    max-width: 100%;
    margin: 0;
    padding: clamp(24px, 5vw, 38px) clamp(22px, 5vw, 38px) clamp(30px, 6vw, 42px);
  }

  .card__title { white-space: normal; }
  .card--lowticket .card__title { font-size: clamp(34px, 8vw, 48px); }
  .card--mentoria .card__title { font-size: clamp(34px, 8vw, 46px); }
  .card--consultoria .card__title { font-size: clamp(34px, 8vw, 46px); }
  .card--lowticket .card__title br { display: none; }
  .card--lowticket .card__title em::before { content: ' '; }

  .card__text { max-width: 46ch; }
  .card--mentoria .card__kicker { font-size: 12px; letter-spacing: 4px; }
}

/* --- Telas pequenas ------------------------------------------------------ */
@media (max-width: 700px) {
  /* Em tela estreita o vídeo atrás do texto ficaria com um zoom enorme (o
     recorte vertical de um quadro 16:9 numa caixa alta mostra só um pedaço).
     Aqui a hero vira coluna: texto no creme e o vídeo como faixa embaixo,
     entrando por baixo da diagonal e da faixa social, como no desktop. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero__inner {
    order: 1;
    max-width: none;
    padding: clamp(30px, 7vw, 52px) clamp(22px, 5.5vw, 40px) clamp(26px, 6vw, 38px);
  }
  .hero__video {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 62% center;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%);
  }
  .hero__scrim { display: none; }
  .marquee {
    height: calc(44px + var(--bleed) * 2);
    margin-top: calc(-34px - var(--bleed));
  }
  .marquee__band { height: 50px; }
  .marquee__item { gap: 10px; padding: 0 9px; }
  .marquee__icon { width: 20px; height: 20px; }
}

@media (max-width: 560px) {
  .hero__video { aspect-ratio: 5 / 4; }
  .card__media { aspect-ratio: 4 / 3; }
  .card__kicker { letter-spacing: 2.6px; }
  .card--mentoria .card__kicker { letter-spacing: 3.2px; }
  .btn,
  .btn--dark {
    width: 100%;
    padding: 18px 22px;
    white-space: normal;
  }
  .footer { padding: 16px 20px 48px; }
  .footer__row { flex-direction: column; text-align: center; gap: 18px; }
  .footer__logo { width: 124px; height: 100px; }
  .footer__meta { text-align: center; }
}

/* --- Movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .hero__cta { transition: none; }
  .hero__cta:hover { transform: none; }
}