/* ==========================================================================
   Home (index.php) · Rai Damasceno
   Porte de mockups-mastercaption/pages/home.css (prévia aprovada).
   Usa os tokens de /assets/css/rd-mc.css (paleta B · Índigo). Só variáveis de cor.
   Prefixo hm- (página) e hv- (carrossel de vídeos).
   Nav e rodapé NÃO são estilizados aqui: vêm de includes/header.php e footer.php,
   com as regras no fim do rd-mc.css (casca compartilhada do site).
   ========================================================================== */

/* --dim do design system dá 3,6:1 no navy; aqui vira texto de verdade (contador, rodapé) */
:root { --dim: #8b8a99; }
picture { display: contents; } /* o <img> continua sendo o item posicionado */

.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--fill { fill: currentColor; stroke: none; }
.btn--grad { box-shadow: 0 12px 44px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .28); }
@media (hover: hover) and (pointer: fine) { .btn--grad:hover { box-shadow: 0 16px 54px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .28); } }
.btn .ic { width: 17px; height: 17px; }
.section-head .lead { margin-top: 18px; }
.center .section-head .lead, .section-head.center .lead { margin-left: auto; margin-right: auto; }
main { display: block; overflow-x: hidden; overflow-x: clip; }
@media (min-width: 761px) { .section { padding: 120px 0; } .section--tight { padding: 40px 0; } }
.h2 { text-wrap: balance; }
.lead, .hm-card p, .hm-story__p { text-wrap: pretty; }
.section-head .lead { text-wrap: balance; }
.nobr { white-space: nowrap; }
.flag { display: inline-block; width: 22px; height: 15px; margin-right: 8px; border-radius: 3px; vertical-align: -2px; background: linear-gradient(90deg, #169b62 33%, #fff 33% 66%, #ff883e 66%); flex: none; }
a.float { color: var(--text); cursor: pointer; }
.float:focus-visible { outline: none; animation-play-state: paused; scale: 1.06; z-index: 9; }
.float:focus-visible::after { opacity: 1; }
:focus-visible { outline-color: var(--accent-text); }

/* ==========================================================================
   1. HERO · composição aprovada (1440×900) escalada pela largura com --u
   ========================================================================== */
.hm-hero {
  --u: min(1px, calc(100vw / 1440));
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(900 * var(--u));
  background: radial-gradient(70% 60% at 50% 55%, rgba(var(--glow-rgb), .30), transparent 70%), var(--bg);
}
.hm-hero__stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 720 * var(--u)); width: calc(1440 * var(--u)); }
.hm-hero__glow1 { left: calc(380 * var(--u)); top: calc(170 * var(--u)); width: calc(700 * var(--u)); height: calc(620 * var(--u)); }
.hm-hero__glow2 { left: calc(930 * var(--u)); top: calc(420 * var(--u)); width: calc(380 * var(--u)); height: calc(380 * var(--u)); opacity: .4; }
.hm-hero__words { position: absolute; left: 0; right: 0; top: calc(112 * var(--u)); z-index: 1; margin: 0; text-align: center; pointer-events: none; }
.hm-hero__words > span { display: block; white-space: nowrap; } /* sem quebra: com a fonte de reserva (antes da Antonio chegar) a linha quebrava e empurrava o hero */
.hm-hero .hm-w1 { font-size: calc(172 * var(--u)); }
.hm-hero .hm-w2 { font-size: calc(168 * var(--u)); margin-top: calc(8 * var(--u)); }
.hm-br { display: none; }
.hm-hero__person { position: absolute; z-index: 2; left: calc(471 * var(--u)); top: calc(147 * var(--u)); width: calc(520 * var(--u)); }
.hm-hero__person img { width: 100%; height: auto; filter: drop-shadow(0 0 60px rgba(var(--glow-rgb), .45)); }
.hm-hero__fade { position: absolute; left: -100vw; right: -100vw; bottom: 0; height: calc(300 * var(--u)); z-index: 3; background: linear-gradient(180deg, transparent, var(--bg) 85%); pointer-events: none; }
.hm-hero__wires { width: 100%; height: 100%; }

/* cards flutuantes (medidas em em, a letra escala com --u e nunca fica abaixo de 11,5px) */
.hm-hero .float { font-size: max(11.5px, calc(15 * var(--u))); padding: 1.07em 1.33em; border-radius: 1.2em; line-height: 1.4; }
.hm-hero .float__label { font-size: .8em; margin-bottom: .45em; }
.hm-f__line { display: flex; align-items: center; white-space: nowrap; }
.hm-f__line .flag { width: 1.47em; height: 1em; margin-right: .5em; }
.hm-f--prod { left: calc(120 * var(--u)); top: calc(462 * var(--u)); }
.hm-f--rec { left: calc(96 * var(--u)); top: calc(655 * var(--u)); --rot: -2deg; display: flex; align-items: center; gap: .6em; white-space: nowrap; }
.hm-f--rec b { font-weight: 700; letter-spacing: .02em; }
.hm-rec__dot { width: .67em; height: .67em; border-radius: 50%; background: var(--live); box-shadow: 0 0 .8em var(--live); flex: none; animation: hm-blink 1s steps(1, end) infinite; }
@keyframes hm-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }
.hm-rec__time { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; font-weight: 500; min-width: 4.6em; }
.hm-rec__meta { font-size: .87em; color: var(--muted); }
.hm-f--luts { left: calc(1080 * var(--u)); top: calc(462 * var(--u)); --rot: 2deg; display: flex; align-items: center; gap: .95em; }
.hm-f__cover { width: 3.6em; height: 4.8em; border-radius: .55em; object-fit: cover; border: 1px solid var(--line-2); flex: none; }
.hm-f__txt { display: flex; flex-direction: column; white-space: nowrap; }
.hm-f--luts .float__label { margin-bottom: .2em; }
.hm-f__big { font-size: 1.13em; font-weight: 600; letter-spacing: -.01em; }
.hm-f__soft { font-size: .87em; color: var(--muted); }
.hm-f--curso { left: calc(1150 * var(--u)); top: calc(668 * var(--u)); display: flex; align-items: center; gap: .6em; white-space: nowrap; }
/* ícone redondo do curso (o do kit do logo feito pra tamanho pequeno) no lugar do play */
.hm-f--curso .mfcp-fav { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.hm-f--curso b { font-size: 1.07em; font-weight: 600; }
.hm-n--1 { left: calc(257 * var(--u)); top: calc(535 * var(--u)); }
.hm-n--2 { left: calc(1200 * var(--u)); top: calc(578 * var(--u)); }

.hm-hero__copy { position: absolute; left: 0; right: 0; bottom: calc(46 * var(--u)); z-index: 7; text-align: center; padding: 0 var(--gutter); }
.hm-hero__copy .lead { max-width: 560px; margin: 0 auto 22px; color: #d7d6e0; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.hm-hero__btns { display: flex; justify-content: center; gap: 14px; }
.hm-ic-play { width: 13px !important; height: 13px !important; }

/* tablet: a pílula da nav tem altura fixa e o título escalado subia pra baixo dela.
   Desce o palco o que faltar e o texto + botões descem pra fora da foto. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hm-hero { --off: max(0px, calc(104px - 112 * var(--u))); height: auto; padding-top: var(--off); padding-bottom: 48px;
    background: radial-gradient(70% 42% at 50% 40%, rgba(var(--glow-rgb), .30), transparent 70%), var(--bg); } /* a luz some antes do pé do palco: sem faixa clara atrás dos botões */
  .hm-hero__stage { position: relative; top: auto; bottom: auto; left: auto; margin: 0 auto; height: calc(900 * var(--u)); }
  .hm-hero__copy { position: relative; bottom: auto; margin-top: calc(-118 * var(--u)); }
  .hm-hero__fade { height: calc(360 * var(--u)); }
  /* a foto termina no pé do palco (sob o degradê), senão aparecia cortada reto atrás dos botões */
  .hm-hero__person { height: calc(753 * var(--u)); clip-path: inset(-200px -200px 0 -200px); }
}
/* iPad retrato: a letra mínima dos cards deixa eles maiores que o desenho; os da direita ancoram pela direita
   e as linhas pontilhadas saem (os nós não cairiam mais na borda dos cards) */
@media (min-width: 761px) and (max-width: 900px) {
  .hm-f--luts { left: auto; right: calc(56 * var(--u)); }
  .hm-f--curso { left: auto; right: calc(36 * var(--u)); }
  .hm-hero__wires, .hm-n { display: none; }
}
/* 901 a 1100: a letra mínima (11,5px) deixa a pílula maior que o desenho e, com o ícone, ela encostava na borda
   (em 940 ficava cortada pelo overflow do hero). Ancora pela direita, como já é de 761 a 900 */
@media (min-width: 901px) and (max-width: 1100px) {
  .hm-f--curso { left: auto; right: calc(36 * var(--u)); }
}

/* ==========================================================================
   2. O QUE VOCÊ ENCONTRA AQUI (bento)
   ========================================================================== */
.hm-offer { overflow: hidden; padding-bottom: 72px; padding-top: 96px; background: linear-gradient(180deg, var(--bg) 0%, var(--navy) 30%, var(--navy) 70%, var(--bg) 100%); }
.hm-offer__glow { left: 50%; top: 40%; width: 900px; height: 600px; margin-left: -450px; opacity: .35; }
.hm-offer .container { position: relative; }
.hm-bento { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.hm-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; color: var(--text);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), border-color .45s ease, box-shadow .45s ease;
}
.hm-card--curso { grid-row: span 2; background: radial-gradient(80% 60% at 50% 100%, rgba(var(--glow-rgb), .30), transparent 70%), var(--glass-fill), var(--glass-solid); }
.hm-card__text { position: relative; z-index: 2; padding: 36px 36px 0; }
.hm-card h3 { margin: 18px 0 10px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.hm-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 420px; }
/* logo do curso no lugar do selo "Curso" (os cards de LUTs e Consultoria continuam com o selo) */
.hm-card__logo { display: block; width: 216px; height: 40px; }
.hm-card--curso h3 { margin-top: 20px; }
.hm-card__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.hm-card__chips li { padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: #d4d3e0; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.hm-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.hm-card__go .ic { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.hm-card__visual { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .hm-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-text-rgb), .42); box-shadow: var(--glass-shadow), 0 0 70px rgba(var(--glow-rgb), .28); }
  .hm-card:hover .hm-card__go .ic { transform: translateX(4px); }
  .hm-card:hover .hm-curso-vis__imac { transform: translateY(-8px); }
  .hm-card:hover .hm-curso-vis__ipad { transform: translateY(-14px) rotate(-2deg); }
  .hm-card:hover .hm-cons-vis img { transform: scale(1.05); }
}
.hm-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* card do curso: iMac + iPad saindo pela base (tela nova da área de membros, os mesmos arquivos do card de preço do curso.php) */
.hm-curso-vis { flex: 1; min-height: 330px; margin-top: 26px; }
.hm-curso-vis__imac { position: absolute; left: 2%; bottom: -16%; width: 90%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
/* a foto do iPad termina nos pulsos: encosta na base do card (que corta) pra não ficar com as mãos cortadas no ar */
.hm-curso-vis__ipad { position: absolute; right: 2%; bottom: -2px; width: 42%; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .65)); transition: transform .6s cubic-bezier(.2, .7, .3, 1); }

/* cards da direita: texto à esquerda, visual à direita */
.hm-card--side { flex-direction: row; align-items: stretch; min-height: 300px; }
.hm-card--side .hm-card__text { flex: 1 1 54%; padding: 32px 10px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.hm-card--side .hm-card__go { margin-top: auto; padding-top: 18px; }
.hm-card--side .hm-card__visual { flex: 0 0 44%; margin: 12px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #0a0a14; }

/* antes/depois que corre sozinho: só transform (a janela anda pra um lado, a foto de dentro pro outro) */
.hm-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-ba__after { position: absolute; inset: 0; overflow: hidden; transform: translateX(50%); animation: hm-wipe 9s cubic-bezier(.65, 0, .35, 1) infinite; }
.hm-ba__after .hm-ba__img { transform: translateX(-50%); animation: hm-wipe-in 9s cubic-bezier(.65, 0, .35, 1) infinite; }
.hm-ba__line { position: absolute; inset: 0; pointer-events: none; transform: translateX(50%); animation: hm-wipe 9s cubic-bezier(.65, 0, .35, 1) infinite; }
.hm-ba__line::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.hm-ba__line::after { content: ''; position: absolute; left: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
@keyframes hm-wipe { 0%, 100% { transform: translateX(68%); } 50% { transform: translateX(30%); } }
@keyframes hm-wipe-in { 0%, 100% { transform: translateX(-68%); } 50% { transform: translateX(-30%); } }
.hm-ba__tag { position: absolute; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .55); color: #fff; }
.hm-ba__tag--l { left: 12px; }
.hm-ba__tag--r { right: 12px; background: rgba(var(--accent-rgb), .85); }

/* consultoria: foto do Rai no banco + chips do que a consultoria cobre */
.hm-cons-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.hm-cons-vis::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 14, .85)); pointer-events: none; }
.hm-cons-vis__chips { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hm-cons-vis__chips li { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(12, 12, 24, .62); border: 1px solid rgba(255, 255, 255, .16); }

/* ==========================================================================
   3. GRÁTIS (faixa curta)
   ========================================================================== */
.hm-free__box {
  display: grid; grid-template-columns: 300px 1fr auto; align-items: center; gap: 44px; max-width: 1100px; margin: 0 auto;
  padding: 36px 48px 36px 40px; border-radius: 36px; color: var(--text); overflow: hidden;
  background: radial-gradient(60% 120% at 0% 50%, rgba(52, 211, 153, .10), transparent 70%), radial-gradient(60% 120% at 100% 50%, rgba(var(--glow-rgb), .2), transparent 70%), var(--glass-fill), var(--glass-solid);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), border-color .45s ease;
}
.hm-free__covers { position: relative; height: 200px; }
.hm-free__covers img {
  position: absolute; top: 0; left: 50%; width: 132px; height: 177px; margin-left: -66px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--line-2); box-shadow: 0 24px 44px rgba(0, 0, 0, .55); transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.hm-free__covers img:nth-child(1) { transform: translate(-78px, 14px) rotate(-10deg); }
.hm-free__covers img:nth-child(2) { z-index: 2; transform: translateY(0); }
.hm-free__covers img:nth-child(3) { transform: translate(78px, 14px) rotate(10deg); }
@media (hover: hover) and (pointer: fine) {
  .hm-free__box:hover { transform: translateY(-4px); border-color: rgba(var(--accent-text-rgb), .4); }
  .hm-free__box:hover .hm-free__covers img:nth-child(1) { transform: translate(-96px, 8px) rotate(-14deg); }
  .hm-free__box:hover .hm-free__covers img:nth-child(2) { transform: translateY(-10px) scale(1.04); }
  .hm-free__box:hover .hm-free__covers img:nth-child(3) { transform: translate(96px, 8px) rotate(14deg); }
}
.hm-free__box:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.hm-free__title { margin: 14px 0 10px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; }
.hm-free__text p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 440px; }

/* ==========================================================================
   4. VÍDEOS · carrossel no estilo "See the results" (hv-)
   ========================================================================== */
.hm-vids { overflow: hidden; }
.hm-vids .section-head { margin-bottom: 40px; }
.hv { --w: 640px; position: relative; }
.hv__stage { position: relative; height: calc(var(--w) * 9 / 16 + 48px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.hv__stage.is-dragging { cursor: grabbing; }
.hv__stage::before { /* luz embaixo do vídeo do meio */
  content: ''; position: absolute; left: 50%; bottom: -10px; width: calc(var(--w) * 1.5); height: 160px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow-rgb), .5), transparent 70%); filter: blur(30px); pointer-events: none;
}
.hv__item {
  position: absolute; left: 50%; top: 24px; width: var(--w); aspect-ratio: 16 / 9; margin-left: calc(var(--w) / -2);
  translate: var(--dx, 0px) 0;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .8s ease, translate .45s cubic-bezier(.2, .75, .2, 1);
  transform: scale(.4); opacity: 0;
}
.hv__stage.is-dragging .hv__item { transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .8s ease; }
.hv__item[data-pos="0"]  { transform: none; opacity: 1; z-index: 5; }
.hv__item[data-pos="1"]  { transform: translate3d(64%, 0, 0) scale(.76); opacity: 1; z-index: 4; --shade: .5; cursor: pointer; }
.hv__item[data-pos="-1"] { transform: translate3d(-64%, 0, 0) scale(.76); opacity: 1; z-index: 4; --shade: .5; cursor: pointer; }
/* as pontas (±2) ficam invisíveis: só 3 vídeos na tela, como no mastercaption.com (antes sobrava uma fatia cortada seca na borda da tela);
   continuam na pose pra entrar/sair com fade quando o carrossel gira */
.hv__item[data-pos="2"]  { transform: translate3d(112%, 0, 0) scale(.56); opacity: 0; z-index: 3; --shade: .72; pointer-events: none; }
.hv__item[data-pos="-2"] { transform: translate3d(-112%, 0, 0) scale(.56); opacity: 0; z-index: 3; --shade: .72; pointer-events: none; }
.hv__card {
  position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #0b0b14;
  border: 1px solid var(--line-2); box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), border-color .5s ease;
}
.hv__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.hv__card::after { content: ''; position: absolute; inset: 0; background: #05050c; opacity: var(--shade, 0); transition: opacity .8s ease; pointer-events: none; }
.hv__item[data-pos="0"] .hv__card { border-color: rgba(var(--accent-text-rgb), .38); box-shadow: 0 50px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(var(--glow-rgb), .3); }
.hv__card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.hv__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(var(--accent-rgb), .88); border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
.hv__play .ic { width: 28px; height: 28px; margin-left: 4px; }
.hv__item:not([data-pos="0"]) .hv__play { opacity: 0; pointer-events: none; }
.hv__item.is-playing .hv__play { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hv__stage:hover .hv__item[data-pos="0"] .hv__card { transform: scale(1.03); border-color: rgba(var(--accent-text-rgb), .7); }
  .hv__item[data-pos="0"]:hover .hv__play { transform: scale(1.1); }
}
.hv__stage:focus-visible .hv__item[data-pos="0"] .hv__card { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.hv__play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hv__caption { max-width: 640px; margin: 30px auto 0; padding: 0 var(--gutter); text-align: center; min-height: 92px; }
.hv__caption.is-swap { animation: hv-cap .5s ease both; }
@keyframes hv-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hv__label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.hv__label .ic { width: 16px; height: 16px; }
.hv__title { margin: 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; text-wrap: balance; }
/* os títulos vêm do YouTube (últimos vídeos): no máximo 2 linhas (3 no celular), senão a legenda cresceria e empurraria a página quando o carrossel gira */
.hv__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hv__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; }
.hv__arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); transition: background .2s ease, transform .2s ease;
}
.hv__arrow .ic { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .hv__arrow:hover { background: rgba(var(--accent-rgb), .4); transform: scale(1.06); } }
.hv__arrow:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.hv__count { min-width: 64px; margin: 0; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-vids__cta { margin-top: 40px; }
.hm-ic-yt { width: 20px !important; height: 20px !important; color: #ff4d4d; }

/* ==========================================================================
   5. MINHA HISTÓRIA · foto de cinema em faixa larga + texto em 2 colunas
   ========================================================================== */
.hm-story { overflow-x: clip; }
@media (min-width: 761px) { .hm-story { padding-top: 72px; } .hm-vids { padding-bottom: 100px; } }
.hm-story__glow { left: 50%; top: 10%; width: 1000px; height: 600px; margin-left: -500px; opacity: .32; }
.hm-story .container { position: relative; }
.hm-story__media { position: relative; }
.hm-story__photo {
  position: relative; aspect-ratio: 2 / 1; border-radius: 36px; overflow: hidden; border: 1px solid var(--line-2); background: #0a0a14;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 120px rgba(var(--glow-rgb), .2);
}
.hm-story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hm-story__photo::after { /* escurece à esquerda e embaixo pro título, com um toque índigo da paleta */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 14, .92) 0%, rgba(5, 5, 14, .72) 30%, rgba(5, 5, 14, .1) 58%, transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(5, 5, 14, .7)),
    radial-gradient(60% 80% at 0% 100%, rgba(var(--glow-rgb), .35), transparent 70%);
}
.hm-story__over { position: absolute; left: 56px; bottom: 52px; z-index: 2; max-width: 560px; }
.hm-story__over .h2 { font-size: clamp(34px, 4vw, 56px); text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.hm-story__f--1 { right: 44px; bottom: 44px; }
.hm-story__f--1 b { display: flex; align-items: center; font-size: 18px; letter-spacing: -.02em; }
.hm-story__soft { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.hm-story__f--2 { left: 56px; top: 48px; --rot: -2deg; display: flex; align-items: center; gap: 10px; }
.hm-story__f--2 .ic { width: 20px; height: 20px; color: var(--accent-text); }
.hm-story__f--2 b { font-weight: 600; }
.hm-story__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 56px; padding: 0 8px; }
.hm-story__text .lead { max-width: none; margin: 0 0 18px; color: #c9c8d6; }
.hm-story__p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.hm-story__quote {
  margin: 0; padding: 16px 20px; border-left: 3px solid var(--accent-text); border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0)); font-size: 16.5px; font-style: italic; line-height: 1.55; color: var(--text);
}
.hm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.hm-facts > div { padding: 16px 16px 14px; background: rgba(9, 9, 20, .94); }
.hm-facts dt { font-size: 17px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.hm-facts dd { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hm-story__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ==========================================================================
   6. PARCERIAS
   ========================================================================== */
.hm-partner { overflow: hidden; }
.hm-partner__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.hm-partner__text .h2 { font-size: clamp(34px, 4vw, 54px); }
.hm-partner__text .h2 { margin-bottom: 22px; }
.hm-partner__text .lead { color: #c4c3d2; }
.hm-partner__strong { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.hm-partner__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hm-partner__cards { position: relative; height: 420px; }
.hm-partner__wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hm-cc-wrap { position: absolute; z-index: 2; }
.hm-cc-wrap--1 { left: 0; top: 40px; width: 82%; }
.hm-cc-wrap--2 { right: 4%; top: 196px; width: 58%; }
.hm-cc-wrap--3 { left: 8%; top: 318px; width: 66%; }
.hm-cc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; color: var(--text); }
.hm-cc--mail { padding: 20px 22px; border-color: rgba(var(--accent-text-rgb), .3); background: linear-gradient(160deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .04) 60%), var(--glass-fill), rgba(14, 14, 32, .7); }
.hm-cc__ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid rgba(var(--accent-text-rgb), .25); }
.hm-cc--mail .hm-cc__ico { color: #fff; background: linear-gradient(160deg, var(--accent-hover), var(--violet)); border-color: transparent; box-shadow: 0 8px 24px rgba(var(--accent-rgb), .55); }
.hm-cc__ico .ic { width: 20px; height: 20px; }
.hm-cc__txt { min-width: 0; line-height: 1.35; }
.hm-cc__txt b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hm-cc__txt span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.hm-partner__n { z-index: 3; }
.hm-partner__n--1 { left: calc(30% - 5px); top: 137px; }
.hm-partner__n--2 { left: calc(80% - 5px); top: 271px; }

/* ==========================================================================
   7. CTA FINAL
   ========================================================================== */
.hm-final { padding-top: 40px; }
.hm-final__card { padding: 112px 40px; }
.hm-final__inner { position: relative; z-index: 2; }
.hm-final .h2 { font-size: clamp(36px, 4.8vw, 64px); }
.hm-final .lead { margin: 22px auto 34px; }
.hm-final__btn { padding: 0 40px; }
.hm-final .checks { margin-top: 22px; }
/* logo do curso no lugar do eyebrow "Mestre do Final Cut Pro" */
.hm-final__logo { margin: 0 0 26px; display: flex; justify-content: center; line-height: 0; }
.hm-final__logo img { width: 300px; height: 56px; }
.hm-marquee {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 1; overflow: hidden; pointer-events: none; transform: translateY(-50%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hm-marquee__track { display: flex; width: max-content; animation: hm-marquee 52s linear infinite; }
/* line-height folgado: com 1 a Antonio desce abaixo da caixa e o overflow cortava a base das letras */
.hm-marquee__track span {
  padding-right: .25em; white-space: nowrap; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 230px; line-height: 1.35;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-text-rgb), .11);
}
@keyframes hm-marquee { to { transform: translateX(-50%); } }


/* ==========================================================================
   Print (.is-shot) e movimento reduzido
   ========================================================================== */
.is-shot .hm-rec__dot, .is-shot .hm-marquee__track { animation: none; }
.is-shot .hm-ba__after, .is-shot .hm-ba__after .hm-ba__img, .is-shot .hm-ba__line { animation: none; }
.is-shot .hm-ba__after, .is-shot .hm-ba__line { transform: translateX(46%); }
.is-shot .hm-ba__after .hm-ba__img { transform: translateX(-46%); }
.is-shot .hv__item, .is-shot .hv__card::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-rec__dot, .hm-marquee__track, .hm-ba__after, .hm-ba__after .hm-ba__img, .hm-ba__line { animation: none; }
  .hm-card, .hm-curso-vis__imac, .hm-curso-vis__ipad, .hm-free__box, .hm-free__covers img, .hv__item, .hv__card { transition: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1100px) {
  /* bento: curso em cima (largura toda, texto + visual lado a lado), LUTs e consultoria embaixo */
  .hm-bento { grid-template-columns: 1fr 1fr; }
  .hm-card--curso { grid-row: auto; grid-column: 1 / -1; flex-direction: row; align-items: stretch; min-height: 380px; }
  .hm-card--curso .hm-card__text { flex: 0 0 46%; padding: 40px 0 40px 40px; }
  .hm-curso-vis { min-height: 0; margin: 0; }
  .hm-curso-vis__imac { left: 6%; bottom: -10%; width: 84%; }
  .hm-curso-vis__ipad { right: 4%; }
  .hm-card--side { flex-direction: column; min-height: 0; }
  .hm-card--side .hm-card__text { flex: 1 1 auto; padding: 8px 28px 30px; }
  .hm-card--side .hm-card__visual { order: -1; flex: none; aspect-ratio: 16 / 10; margin: 12px 12px 0; }
  .hm-card--side .hm-card__go { padding-top: 20px; }

  .hm-free__box { grid-template-columns: 240px 1fr; gap: 32px; padding: 34px 36px; }
  .hm-free__btn { grid-column: 2; justify-self: start; margin-top: -12px; }
  .hm-free__covers img { width: 112px; height: 150px; margin-left: -56px; }
  .hm-free__covers { height: 176px; }
  .hm-free__covers img:nth-child(1) { transform: translate(-64px, 12px) rotate(-10deg); }
  .hm-free__covers img:nth-child(3) { transform: translate(64px, 12px) rotate(10deg); }

  .hm-story__photo { aspect-ratio: 16 / 10; border-radius: 30px; }
  .hm-story__photo img { object-position: 58% 20%; }
  .hm-story__over { left: 36px; bottom: 36px; max-width: 500px; }
  .hm-story__cols { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; max-width: 680px; margin-left: auto; margin-right: auto; padding: 0; }

  .hm-partner__grid { grid-template-columns: 1fr; gap: 40px; }
  .hm-partner__text { max-width: 640px; }
  .hm-partner__cards { width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hm-partner__text { text-align: center; margin: 0 auto; }
  .hm-partner__btns { justify-content: center; }
}

@media (max-width: 760px) {
  .section { padding: 80px 0; }
  .section--tight { padding: 28px 0; }
  .h2 { font-size: 33px; }

  /* hero no celular: palavras em cima (proporcionais à largura), Rai na frente, 2 cards pequenos, texto e botões embaixo */
  .hm-hero { height: auto; padding: 86px 0 44px; background: radial-gradient(90% 46% at 50% 40%, rgba(var(--glow-rgb), .34), transparent 72%), var(--bg); }
  .hm-hero__stage { position: relative; top: auto; bottom: auto; left: auto; width: auto; }
  .hm-hero__words { position: relative; top: 0; padding: 0 10px; }
  .hm-hero .hm-w1 { font-size: 16.4vw; }
  .hm-hero .hm-w2 { font-size: 13.6vw; margin-top: 1.4vw; }
  .hm-hero__person { position: relative; left: auto; top: auto; z-index: 2; width: 88vw; margin: -6vw auto 0; height: 107vw; clip-path: inset(-120px -120px 0 -120px); }
  .hm-hero__person img { filter: drop-shadow(0 0 36px rgba(var(--glow-rgb), .45)); }
  .hm-hero__glow1 { left: -20vw; top: 40px; width: 140vw; height: 420px; }
  .hm-hero__glow2 { display: none; }
  .hm-hero__fade { left: 0; right: 0; bottom: -2px; height: 46vw; background: linear-gradient(180deg, transparent, var(--bg) 80%); }
  .hm-hero__wires, .hm-n, .hm-f--prod, .hm-f--curso { display: none; }
  .hm-hero .float { font-size: 12px; padding: 10px 12px; border-radius: 14px; }
  .hm-f--rec { left: 8px; top: 88vw; min-height: 44px; }
  .hm-f--luts { left: auto; right: 8px; top: 70vw; }
  .hm-f__cover { width: 2.9em; height: 3.9em; }
  /* com o "4K · 25p" o REC encostava (390) ou entrava (360) embaixo do card das LUTs */
  @media (max-width: 400px) { .hm-rec__meta { display: none; } }
  .hm-hero__copy { position: relative; bottom: auto; margin-top: -22vw; padding: 0 16px; }
  .hm-hero__copy .lead { font-size: 16.5px; margin-bottom: 20px; }
  .hm-hero__btns { gap: 10px; }
  .hm-hero__btns .btn { flex: 1 1 0; min-width: 0; height: 54px; padding: 0 12px; font-size: 14.5px; gap: 8px; }
  .hm-hero__btns .btn .ic:not(.hm-ic-play) { display: none; }

  .hm-offer { padding-top: 44px; }
  .hm-bento { grid-template-columns: 1fr; gap: 16px; }
  .hm-card--curso { flex-direction: column; min-height: 0; }
  .hm-card--curso .hm-card__text { flex: none; padding: 28px 24px 0; }
  .hm-curso-vis { min-height: 230px; margin-top: 18px; }
  .hm-card__logo { width: 200px; height: 37px; }
  .hm-card h3 { font-size: 27px; margin-top: 14px; }
  .hm-card p { font-size: 15px; }
  .hm-card--side .hm-card__text { padding: 6px 24px 26px; }
  .hm-card__go { padding-top: 0; margin-top: 18px; min-height: 44px; }
  .hm-card--side .hm-card__go { padding-top: 0; margin-top: 18px; }

  .hm-free__box { grid-template-columns: 1fr; gap: 18px; padding: 30px 22px 26px; border-radius: 28px; text-align: center; }
  .hm-free__covers { height: 168px; }
  .hm-free__text p { margin: 0 auto; font-size: 15px; }
  .hm-free__btn { grid-column: auto; justify-self: stretch; margin-top: 4px; height: 52px; }
  .hm-free__title { font-size: 29px; }

  .hm-vids .section-head { margin-bottom: 20px; }
  .hv { --w: 80vw; }
  .hv__stage { height: calc(var(--w) * 9 / 16 + 40px); }
  .hv__item { top: 20px; }
  .hv__item[data-pos="1"]  { transform: translate3d(70%, 0, 0) scale(.8); }
  .hv__item[data-pos="-1"] { transform: translate3d(-70%, 0, 0) scale(.8); }
  .hv__item[data-pos="2"]  { transform: translate3d(120%, 0, 0) scale(.6); opacity: 0; }
  .hv__item[data-pos="-2"] { transform: translate3d(-120%, 0, 0) scale(.6); opacity: 0; }
  .hv__card { border-radius: 18px; }
  .hv__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .hv__play .ic { width: 22px; height: 22px; }
  .hv__caption { margin-top: 20px; min-height: 104px; }
  .hv__title { font-size: 18px; -webkit-line-clamp: 3; line-clamp: 3; }
  .hv__nav { gap: 28px; margin-top: 10px; }
  .hv__arrow { width: 56px; height: 56px; }
  .hm-vids__cta { margin-top: 30px; }
  .hm-vids__cta .btn { width: 100%; max-width: 380px; }

  .hm-story__photo { aspect-ratio: 1 / 1.08; border-radius: 26px; }
  .hm-story__photo img { object-position: 74% 30%; }
  .hm-story__photo::after { background: linear-gradient(180deg, rgba(5, 5, 14, .25) 0%, transparent 30%, rgba(5, 5, 14, .35) 55%, rgba(5, 5, 14, .94) 88%), radial-gradient(70% 50% at 0% 100%, rgba(var(--glow-rgb), .35), transparent 70%); }
  .hm-story__over { left: 20px; right: 20px; bottom: 22px; }
  .hm-story__over .eyebrow { margin-bottom: 12px; }
  .hm-story__over .h2 { font-size: 30px; }
  .hm-story__f { font-size: 13px; padding: 10px 13px; border-radius: 14px; }
  .hm-story__f--1 { left: 12px; right: auto; top: 14px; bottom: auto; }
  .hm-story__f--1 b { font-size: 15px; }
  .hm-story__soft { font-size: 11.5px; }
  .hm-story__f--2 { display: none; }
  .hm-story__cols { margin-top: 30px; gap: 26px; }
  .hm-story__text .lead { font-size: 16.5px; }
  .hm-story__quote { font-size: 15.5px; padding: 14px 16px; }
  .hm-facts { grid-template-columns: 1fr; }
  .hm-facts > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 16px; }
  .hm-facts dt { font-size: 15.5px; }
  .hm-facts dd { margin: 0; font-size: 13.5px; }
  .hm-story__btns .btn, .hm-partner__btns .btn { flex: 1 1 100%; }

  .hm-partner__text .lead { font-size: 16.5px; }
  .hm-partner__btns .btn { height: 54px; padding: 0 18px; font-size: 15px; }
  .hm-partner__cards { height: auto; display: grid; gap: 12px; }
  .hm-partner__wire, .hm-partner__n { display: none; }
  .hm-cc-wrap { position: relative; left: auto; right: auto; top: auto; width: auto; }

  .hm-final { padding-top: 10px; }
  .hm-final__logo { margin-bottom: 20px; }
  .hm-final__logo img { width: 236px; height: 44px; }
  .hm-final__card { padding: 72px 20px; }
  .hm-final .h2 { font-size: 31px; }
  .hm-final__btn { width: 100%; padding: 0 18px; }
  .hm-marquee__track span { font-size: 150px; }

}