/* ============================================================
   Belly Dance Beginner Course — Fall 2026
   ------------------------------------------------------------
   ⚠️ ORDEM DO ARQUIVO É REGRA, NÃO ESTILO:
   TODA regra sem media query vem ANTES do primeiro @media.
   Uma regra base escrita depois de um @media(min-width) reaplica
   o desktop no celular sem nada acusar no DOM — o mobile quebra
   e a auditoria de markup passa limpa.

   A página é mobile-first e light-only (ivory). Não há toggle de
   tema, então nada de FOUC pra cobrir.
   ============================================================ */

/* ------------------------------ 1. TOKENS ------------------------------ */
:root {
  /* Wine / burgundy — extraído dos flyers */
  --wine-900: #4E1025;
  --wine-800: #65132C;
  --wine-700: #741A37;

  /* Mauve / dusty rose */
  --mauve-600: #8D455B;
  --mauve-500: #A45D71;
  --mauve-400: #B97886;

  /* Champagne / antique gold — DECORAÇÃO (linhas, ícones, molduras).
     Nunca use estes três em texto sobre ivory: #C59131 sobre #FFF8EF
     dá ~3:1 e reprova em corpo de texto. Texto dourado usa --gold-ink. */
  --gold-600: #C59131;
  --gold-500: #D3A64C;
  --gold-400: #E2C16C;

  /* Ouro ESCURECIDO só pra TINTA sobre fundo claro. Separar
     preenchimento de tinta é o que salva o contraste sem perder a cor. */
  --gold-ink: #8A5E12;

  /* Ivory / warm cream */
  --ivory-100: #FFF8EF;
  --ivory-200: #F8EEE5;
  --ivory-300: #F4E5DB;

  /* Papéis e tintas */
  --paper: var(--ivory-100);
  --paper-2: var(--ivory-200);
  --ink: #3A0C1B;
  --ink-2: #6B3346;   /* secundário sobre ivory */
  --ink-on-dark: #FDF4EA;
  --ink-on-dark-2: #E7C9CF;

  --line: rgba(101, 19, 44, 0.14);
  --line-gold: rgba(197, 145, 49, 0.42);

  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(78, 16, 37, 0.06), 0 4px 14px rgba(78, 16, 37, 0.05);
  --shadow-md: 0 2px 6px rgba(78, 16, 37, 0.08), 0 18px 44px rgba(78, 16, 37, 0.10);
  --shadow-lg: 0 6px 18px rgba(78, 16, 37, 0.12), 0 34px 80px rgba(78, 16, 37, 0.16);

  --ff-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --pad: 20px;
  --hdr-h: 62px;

  /* Altura do hero. `svh` só existe em navegador novo; a linha `vh`
     ANTES dele é o fallback real. Custom property NÃO faz fallback de
     duas declarações sozinha — quem escolhe é o @supports lá embaixo. */
  --hero-h: 88vh;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-ui);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* NÃO usar transform/filter no body: quebra `position: fixed` dos
     descendentes (header e barra sticky viram absolute). */
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* `display:grid`/`flex` numa regra posterior VENCE o [hidden] do HTML.
   Este !important é o que impede o elemento escondido de reaparecer. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--mauve-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wine-900); color: var(--ink-on-dark);
  padding: 12px 18px; border-radius: 0 0 10px 0;
  font: 600 15px/1 var(--ff-ui); text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap.narrow { max-width: 780px; }
.center { text-align: center; }

/* --------------------------- 3. TIPOGRAFIA --------------------------- */
.display {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(30px, 7.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--wine-800);
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 500; color: var(--gold-ink); }

.eyebrow {
  font: 600 12px/1.45 var(--ff-ui);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--mauve-600);
  margin-bottom: 14px;
}
.eyebrow .sep { margin-inline: 6px; color: var(--gold-600); }

.lead { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin-top: 14px; text-wrap: pretty; }
.note { font-size: 15px; color: var(--ink-2); margin-top: 22px; }

.gold { color: var(--gold-ink); }

/* Separador ornamental: filete + losango + filete. */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 20px 0; color: var(--gold-600);
}
.rule i {
  display: block; height: 1px; flex: 1 1 auto; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--gold-600), transparent);
}
.rule svg { width: 16px; height: 16px; flex: none; }
.rule-dark { color: var(--gold-400); }
.rule-dark i { background: linear-gradient(90deg, transparent, var(--gold-400), transparent); }

.sec { padding-block: clamp(56px, 11vw, 96px); position: relative; }
.sec-head { margin-bottom: clamp(28px, 6vw, 44px); }
.sec-head .rule { margin-inline: auto; }

/* ---------------------------- 4. BOTÕES ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 15px/1.25 var(--ff-ui); letter-spacing: 0.035em;
  min-height: 48px;                     /* alvo de toque ≥ 44px */
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, background-color .22s, color .22s, border-color .22s;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--wine-800); color: var(--ivory-100);
  border-color: var(--wine-800);
  box-shadow: inset 0 0 0 1px rgba(226, 193, 108, .30), var(--shadow-sm);
}
.btn-primary:hover { background: var(--wine-700); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(226,193,108,.5), var(--shadow-md); }

.btn-outline { background: transparent; color: var(--wine-800); border-color: var(--line-gold); }
.btn-outline:hover { background: var(--ivory-300); border-color: var(--gold-600); transform: translateY(-2px); }

.btn-ghost { background: rgba(255, 248, 239, .72); color: var(--wine-800); border-color: var(--line-gold); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--ivory-100); transform: translateY(-2px); }

.btn-gold { background: linear-gradient(160deg, var(--gold-400), var(--gold-600)); color: #3A2405; border-color: var(--gold-400); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-lg { font-size: 16px; padding: 16px 26px; min-height: 54px; }
.btn-sm { font-size: 13.5px; padding: 10px 18px; min-height: 44px; }

/* --------------------------- 5. HEADER --------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background-color .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: var(--hdr-h); }

.hdr[data-stuck="true"] {
  background: rgba(255, 248, 239, .88);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--line-gold);
  box-shadow: 0 1px 18px rgba(78, 16, 37, .07);
}

/* min-height 44px em TODO link tocável, inclusive a marca: um alvo de
   34px passa em qualquer asserção de DOM e falha no dedo. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; min-height: 44px; }
/* Logo oficial LB Life Solutions. É <img> com alpha de verdade (extraído
   do JPEG pela luminância), não SVG tingido por `color` — por isso não
   depende de `mix-blend-mode`, que morre dentro do backdrop-filter do
   header. `height: auto` mantém a proporção 864:880 do arquivo. */
.brand-orn { width: 42px; height: auto; flex: none; display: block; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-txt b { font: 600 16px/1.12 var(--ff-display); color: var(--wine-800); letter-spacing: .005em; }
.brand-txt i { font: 500 10.5px/1.3 var(--ff-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve-600); }

.hdr-nav { display: none; }
.hdr-cta { display: none; }

.hdr-burger {
  display: grid; place-content: center; gap: 5px;
  width: 46px; height: 46px; flex: none; padding: 0;
  background: rgba(255,248,239,.7); border: 1px solid var(--line-gold);
  border-radius: 12px; cursor: pointer;
}
.hdr-burger span { display: block; width: 20px; height: 1.5px; background: var(--wine-800); transition: transform .26s, opacity .2s; }
.hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mnav {
  overflow: hidden; max-height: 0;
  background: rgba(255, 248, 239, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: max-height .34s cubic-bezier(.3,.8,.3,1);
}
.mnav[data-open="true"] { max-height: 520px; border-bottom: 1px solid var(--line-gold); }
.mnav-in { display: flex; flex-direction: column; padding-block: 8px 18px; }
.mnav-in a {
  padding: 13px 2px; text-decoration: none; font: 500 16px/1.3 var(--ff-ui);
  color: var(--wine-800); border-bottom: 1px solid var(--line);
}
.mnav-cta { margin-top: 14px; border-bottom: 0 !important; color: var(--ivory-100) !important; }

/* ---------------------------- 6. HERO ---------------------------- */
.hero { position: relative; padding-top: calc(var(--hdr-h) + 8px); overflow: hidden; }

.hero-media { position: relative; width: 100%; }
/* A foto de origem é um recorte ALTO (440×1310). Numa caixa quase quadrada
   o `cover` mostra só uma fatia: a 32% sobrava apenas miçanga e o corpo
   sumia. 8% ancora no umbigo + cinturão, que é o que faz a imagem ler
   como "dança" e não como textura abstrata. */
.hero-media img { width: 100%; height: 46vh; min-height: 260px; object-fit: cover; object-position: 50% 8%; }

/* Brilho de tecido: faixa clara diagonal que segue o mouse no desktop.
   É overlay puro — a foto original não é deformada nem recortada. */
.hero-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(46% 34% at var(--mx, 62%) var(--my, 38%),
              rgba(255, 246, 226, .40), rgba(255, 246, 226, 0) 68%);
  mix-blend-mode: soft-light;
  transition: opacity .4s;
}
.hero-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,248,239,.30) 0%, rgba(255,248,239,0) 34%, rgba(255,248,239,.55) 82%, var(--paper) 100%);
}

.hero-in { position: relative; padding-top: 26px; }
.hero-copy { max-width: 620px; }

.hero-h1 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(38px, 12.2vw, 62px); line-height: 1.03;
  letter-spacing: -0.02em; color: var(--wine-900);
  margin-bottom: 4px;
}
.hero-h1 .stagger { display: block; }

.hero-sub { font: 600 18px/1.42 var(--ff-ui); color: var(--wine-800); margin-top: 10px; text-wrap: balance; }
.hero-lede { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin-top: 14px; max-width: 54ch; }

.badge {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--ivory-300); border: 1px solid var(--line-gold);
  font: 600 13px/1.2 var(--ff-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--wine-800);
}
.badge svg { width: 17px; height: 17px; color: var(--gold-ink); flex: none; }

.hero-date { margin-top: 18px; font: 600 16px/1.4 var(--ff-ui); color: var(--gold-ink); }
.hero-city { color: var(--ink-2); font-weight: 500; white-space: nowrap; }

.hero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.hero-meta {
  margin-top: 20px; font: 500 13.5px/1.7 var(--ff-ui);
  letter-spacing: .055em; color: var(--ink-2);
}
.hero-meta span { color: var(--gold-600); margin-inline: 5px; }

/* ------------------------- 7. VALUE BAR ------------------------- */
.valuebar { background: var(--wine-900); color: var(--ink-on-dark); }
.valuebar-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 0; padding-block: 28px; }
.vb { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 8px; }
.vb svg { width: 26px; height: 26px; color: var(--gold-400); margin-bottom: 4px; }
.vb b { font: 600 30px/1 var(--ff-display); color: var(--ivory-100); }
.vb span { font: 500 12px/1.35 var(--ff-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-on-dark-2); }

/* --------------------------- 8. INTRO --------------------------- */
.sec-intro { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.sec-intro .lead + .lead { margin-top: 16px; }

.pull { margin: 34px 0 0; padding: 0; position: relative; }
.pull .orn-mark { display: block; width: 40px; height: 40px; margin: 0 auto 14px; color: var(--gold-600); }
.pull .orn-mark svg { width: 100%; height: 100%; }
.pull p {
  font-family: var(--ff-display); font-size: clamp(22px, 5.6vw, 30px);
  line-height: 1.34; color: var(--wine-800);
}
.pull em { font-style: italic; }

/* ------------------------ 9. TRANSFORMATION ------------------------ */
.transform { display: grid; gap: 18px; }
.tcol {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 22px; background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.tcol-to { border-color: var(--line-gold); background: linear-gradient(180deg, var(--paper) 0%, var(--ivory-300) 100%); }
.tcol-h {
  font-family: var(--ff-display); font-size: 24px; font-weight: 600;
  color: var(--mauve-600); margin-bottom: 16px;
}
.tcol-to .tcol-h { color: var(--wine-800); }
.tlist li {
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
  padding: 11px 0; border-bottom: 1px dashed var(--line);
  font-style: italic;
}
.tlist li:last-child { border-bottom: 0; }
.tlist-to li { font-style: normal; color: var(--ink); display: flex; gap: 11px; align-items: flex-start; }
.tlist-to svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--gold-ink); }

.tarrow { display: grid; place-items: center; color: var(--gold-600); }
.tarrow svg { width: 30px; height: 30px; }

/* --------------------------- 10. CARDS --------------------------- */
.cards { display: grid; gap: 14px; }
.card {
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--radius); padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-600); }
.card-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; color: var(--gold-ink); }
.card-ic svg { width: 100%; height: 100%; }
.card h3 { font-family: var(--ff-display); font-size: 21px; font-weight: 600; color: var(--wine-800); margin-bottom: 7px; }
.card p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.card-lg { padding: 26px 22px; }

/* ------------------------- 11. GRUPOS/AGENDA ------------------------- */
.sec-schedule { background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%); }
.groups { display: grid; gap: 18px; }
.group {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg); padding: 30px 24px 26px;
  text-align: center; box-shadow: var(--shadow-md);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.group:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.group-corner { position: absolute; top: 0; left: 0; width: 74px; height: 74px; color: var(--gold-600); opacity: .5; pointer-events: none; }
.group-corner svg { width: 100%; height: 100%; }
.group-tag {
  font: 600 11.5px/1 var(--ff-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--mauve-600); margin-bottom: 10px;
}
.group-day { font-family: var(--ff-display); font-size: clamp(32px, 8.6vw, 42px); font-weight: 600; color: var(--wine-800); }
.group-date { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.group-time {
  margin-top: 4px; font-family: var(--ff-display); font-size: 26px;
  font-weight: 600; color: var(--gold-ink);
}
.group-btn { margin-top: 20px; width: 100%; }

/* --------------------------- 12. MAKE-UP --------------------------- */
.makeup {
  background: linear-gradient(150deg, var(--wine-900) 0%, var(--wine-700) 62%, var(--mauve-600) 130%);
  color: var(--ink-on-dark); border-radius: var(--radius-lg);
  padding: 34px 24px; box-shadow: var(--shadow-lg);
}
.makeup-ic { display: block; width: 40px; height: 40px; color: var(--gold-400); margin-bottom: 16px; }
.makeup-ic svg { width: 100%; height: 100%; }
.makeup .display { color: var(--ivory-100); }
.makeup .display em { color: var(--gold-400); }
.makeup .lead { color: var(--ink-on-dark-2); }
.makeup-kicker {
  margin-top: 18px; font-family: var(--ff-display); font-style: italic;
  font-size: clamp(19px, 4.6vw, 23px); line-height: 1.4; color: var(--gold-400);
}

.swap { display: grid; gap: 12px; margin-top: 28px; }
.swap-row {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: var(--radius);
  background: rgba(255, 248, 239, .07); border: 1px solid rgba(226, 193, 108, .28);
}
.swap-pill {
  padding: 7px 15px; border-radius: 999px; font: 600 13px/1.3 var(--ff-ui);
  background: rgba(255, 248, 239, .13); color: var(--ivory-100);
  border: 1px solid rgba(226, 193, 108, .34);
}
.swap-pill--alt { background: rgba(226, 193, 108, .17); }
.swap-mid { font: 500 13px/1.3 var(--ff-ui); font-style: italic; color: var(--ink-on-dark-2); }
.swap-arrow { display: grid; place-items: center; color: var(--gold-400); }
.swap-arrow svg { width: 18px; height: 18px; }

/* ---------------------- 13. MINI CHOREOGRAPHY ---------------------- */
.sec-choreo {
  background: linear-gradient(165deg, var(--wine-900) 0%, #3E0B1D 55%, var(--wine-800) 100%);
  color: var(--ink-on-dark); overflow: hidden;
}
.sec-choreo .display { color: var(--ivory-100); }
.sec-choreo .display em { color: var(--gold-400); }
.sec-choreo .lead { color: var(--ink-on-dark-2); }
.sec-choreo .eyebrow { color: var(--gold-400); }
.choreo-in { position: relative; z-index: 1; }

/* Seda: três véus muito lentos e muito discretos. Nada de partícula. */
.silk { position: absolute; inset: -18%; pointer-events: none; opacity: .5; }
.silk i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(58px); opacity: .5;
  animation: drift 34s ease-in-out infinite;
}
.silk i:nth-child(1) { width: 62%; height: 46%; left: -8%; top: 6%;  background: radial-gradient(circle, rgba(164, 93, 113, .55), transparent 70%); }
.silk i:nth-child(2) { width: 54%; height: 44%; right: -6%; top: 32%; background: radial-gradient(circle, rgba(197, 145, 49, .34), transparent 70%); animation-delay: -12s; }
.silk i:nth-child(3) { width: 48%; height: 40%; left: 24%; bottom: -6%; background: radial-gradient(circle, rgba(185, 120, 134, .38), transparent 70%); animation-delay: -23s; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5%, -3.5%, 0) scale(1.09); }
}

.choreo-huge {
  margin-top: 30px; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(27px, 7.4vw, 44px); line-height: 1.16; color: var(--gold-400);
  text-wrap: balance;
}
.choreo-after { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-on-dark-2); }

/* ---------------------------- 14. VÍDEOS ---------------------------- */
.videos { display: grid; gap: 14px; }
.vid {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-gold); background: var(--wine-900);
  box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.vid:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .92; transition: opacity .3s, transform .5s; }
.vid:hover img { opacity: 1; transform: scale(1.035); }
.vid-play {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(78, 16, 37, .72); border: 1px solid var(--gold-400);
  backdrop-filter: blur(3px); color: var(--gold-400);
  transition: transform .28s, background-color .28s;
}
.vid:hover .vid-play { transform: translate(-50%, -50%) scale(1.09); background: rgba(78, 16, 37, .88); }
.vid-play svg { width: 21px; height: 21px; margin-left: 3px; }
.vid-cap { display: block; padding: 13px 15px 15px; background: var(--wine-900); }
.vid-cap b { display: block; font: 600 15px/1.35 var(--ff-display); color: var(--ivory-100); }
.vid-cap i { display: block; margin-top: 3px; font: 500 11.5px/1.4 var(--ff-ui); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-on-dark-2); }
.vid-side { display: grid; gap: 14px; }
/* o <iframe> injetado no clique herda a caixa da miniatura */
.vid .yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* -------------------------- 15. INSTRUTORA -------------------------- */
.sec-instructor { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.inst { display: grid; gap: 30px; }
.inst-media { position: relative; padding-bottom: 46px; }
.inst-photo { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.inst-photo img { width: 100%; object-fit: cover; }
.inst-photo--a { width: 74%; border: 1px solid var(--line-gold); }
.inst-photo--b {
  position: absolute; right: 0; bottom: 0; width: 47%;
  border: 4px solid var(--paper); box-shadow: var(--shadow-md);
}
.inst-corner { position: absolute; top: -10px; right: 6%; width: 78px; height: 78px; color: var(--gold-600); opacity: .55; transform: scaleX(-1); pointer-events: none; }
.inst-corner svg { width: 100%; height: 100%; }
.inst-note { margin-top: 14px; font-size: 15.5px; line-height: 1.66; color: var(--ink-2); }
.inst-copy .btn { margin-top: 22px; }

/* --------------------------- 16. CHECKLIST --------------------------- */
.checklist { display: grid; gap: 2px; }
.checklist li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
  font-size: 16.5px; line-height: 1.6; color: var(--ink);
}
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--gold-ink); }
.checklist-sm li { font-size: 15.5px; padding: 11px 2px; }

.who-close {
  margin-top: 30px; font-family: var(--ff-display);
  font-size: clamp(21px, 5.2vw, 28px); line-height: 1.35; color: var(--wine-800);
  text-wrap: balance;
}
.who-close em { font-style: italic; color: var(--gold-ink); }

/* ------------------------- 17. BACK TO SCHOOL ------------------------- */
.sec-b2s { background: var(--ivory-300); position: relative; overflow: hidden; }
.b2s-h { font-family: var(--ff-display); font-weight: 600; }
.b2s-1 { display: block; font-size: clamp(28px, 7.4vw, 44px); line-height: 1.1; color: var(--wine-900); }
.b2s-2 { display: block; font-size: clamp(32px, 9vw, 54px); line-height: 1.08; margin-top: 6px; }
.b2s-3 { display: block; font-style: italic; font-weight: 500; font-size: clamp(22px, 5.8vw, 34px); line-height: 1.2; margin-top: 4px; color: var(--wine-800); }
.sec-b2s .btn { margin-top: 26px; }

/* ---------------------------- 18. PRICING ---------------------------- */
.pricing { display: grid; gap: 18px; }

.plan {
  position: relative; border-radius: var(--radius-lg);
  padding: 30px 22px; background: var(--paper);
  border: 1px solid var(--line-gold); box-shadow: var(--shadow-sm);
}
.plan-featured {
  border: 2px solid var(--gold-600); box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--paper) 0%, var(--ivory-300) 100%);
  padding-top: 40px; overflow: hidden;
}
.plan-corner { position: absolute; top: 0; right: 0; width: 84px; height: 84px; color: var(--gold-600); opacity: .42; transform: scaleX(-1); pointer-events: none; }
.plan-corner svg { width: 100%; height: 100%; }
.plan-badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  color: #3A2405; font: 700 11.5px/1 var(--ff-ui);
  letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 20px; border-radius: 0 0 12px 12px;
}
.plan-name { font-family: var(--ff-display); font-size: clamp(23px, 5.6vw, 29px); font-weight: 600; color: var(--wine-800); text-align: center; }
.plan-price {
  font-family: var(--ff-display); font-weight: 700; text-align: center;
  font-size: clamp(62px, 17vw, 88px); line-height: 1; color: var(--wine-900);
  margin-top: 10px; letter-spacing: -0.03em;
}
.plan-price .cur { font-size: .46em; vertical-align: super; margin-right: 2px; color: var(--gold-ink); }
.plan-price--sm { font-size: clamp(46px, 12vw, 58px); color: var(--mauve-600); }
.plan-unit { text-align: center; font: 600 14px/1.4 var(--ff-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
/* ⚠️ NÃO usar inline-flex aqui. Com flex, cada nó de texto vira um item
   anônimo e o espaço ENTRE eles é descartado: "Only <b>$12.50</b> per class"
   renderizava "Only$12.50per class". O HTML estava certo; quem comia os
   espaços era o display. `width: fit-content` dá o mesmo shrink-wrap. */
.plan-per {
  text-align: center; margin-top: 12px; padding: 9px 14px;
  border-radius: 999px; background: var(--wine-900); color: var(--ivory-100);
  font: 500 14px/1.4 var(--ff-ui); display: block;
  width: fit-content; margin-inline: auto; align-self: center;
}
.plan-featured { display: flex; flex-direction: column; }
.plan-per b { color: var(--gold-400); font-weight: 700; }

.plan-list { margin-top: 22px; display: grid; gap: 1px; }
.plan-list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.plan-list li:last-child { border-bottom: 0; }
.plan-list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--gold-ink); }

.plan-choose { margin-top: 22px; text-align: center; font: 600 14.5px/1.4 var(--ff-ui); color: var(--wine-800); }
.plan-groups { display: grid; gap: 11px; margin-top: 13px; }
.plan-groups .btn { flex-direction: column; gap: 3px; padding-block: 14px; }
.plan-groups .btn b { font: 700 16px/1.2 var(--ff-ui); letter-spacing: .03em; }
.plan-groups .btn i { font: 500 12.5px/1.3 var(--ff-ui); font-style: normal; letter-spacing: .07em; color: var(--gold-400); }

.plan-fine { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

.plan-second { text-align: center; }
.plan-desc { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.plan-warn {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--ivory-300); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: left;
}
.plan-second .btn { margin-top: 18px; width: 100%; }

/* ---------------------------- 19. SAVINGS ---------------------------- */
.savings {
  margin-top: 26px; display: grid; gap: 14px;
  padding: 28px 20px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--wine-900), var(--wine-700));
  color: var(--ink-on-dark); box-shadow: var(--shadow-lg);
  text-align: center;
}
.sv-lbl { font: 600 11.5px/1.4 var(--ff-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-on-dark-2); }
.sv-math { margin-top: 7px; font-size: 14.5px; color: var(--ink-on-dark-2); }
.sv-num { font-family: var(--ff-display); font-weight: 700; font-size: clamp(38px, 10vw, 50px); line-height: 1.05; margin-top: 2px; }
.sv-num--strike { color: var(--ink-on-dark-2); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--mauve-400); }
.sv-num--win { color: var(--ivory-100); }
.sv-mid { display: grid; place-items: center; color: var(--gold-400); }
.sv-mid svg { width: 32px; height: 32px; }
.sv-save { border-top: 1px solid rgba(226, 193, 108, .34); padding-top: 20px; }
.sv-save-num {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(40px, 11.5vw, 60px); line-height: 1.02; color: var(--gold-400);
  text-transform: uppercase;
}
.sv-save-txt { margin-top: 8px; font: 500 14px/1.5 var(--ff-ui); color: var(--ink-on-dark-2); }
.sv-save ul { margin-top: 12px; display: inline-grid; gap: 7px; text-align: left; }
.sv-save li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-on-dark); }
.sv-save svg { width: 17px; height: 17px; flex: none; color: var(--gold-400); }

/* -------------------------- 20. CERTIFICADO -------------------------- */
.sec-cert { background: var(--ivory-300); }
.cert { display: grid; gap: 28px; }
.cert-frame {
  position: relative; text-align: center;
  padding: 40px 24px; border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--gold-600);
  outline: 1px solid var(--line-gold); outline-offset: 7px;
  box-shadow: var(--shadow-md);
}
.cert-corner { position: absolute; width: 62px; height: 62px; color: var(--gold-600); opacity: .6; pointer-events: none; }
.cert-corner--tl { top: 6px; left: 6px; }
.cert-corner--br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.cert-seal { display: block; width: 48px; height: 48px; margin: 0 auto 16px; color: var(--gold-ink); }
.cert-seal svg { width: 100%; height: 100%; }
.cert-eyebrow { font: 600 11.5px/1.4 var(--ff-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--mauve-600); }
.cert-name { margin-top: 12px; font-family: var(--ff-display); font-size: clamp(23px, 5.6vw, 30px); font-weight: 600; color: var(--wine-800); line-height: 1.2; }
.cert-sub { margin-top: 8px; font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cert-kicker { margin-top: 10px; font: 600 13px/1.4 var(--ff-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.cert-req-h { margin-top: 22px; font: 600 14px/1.4 var(--ff-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--wine-800); }
.cert-strong {
  margin-top: 20px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--wine-900); color: var(--ivory-100);
  font: 600 15.5px/1.55 var(--ff-ui);
}

/* ---------------------------- 21. TIMELINE ---------------------------- */
.timeline { position: relative; display: grid; gap: 0; padding-left: 30px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-600) 12%, var(--gold-600) 88%, transparent);
}
.tl { position: relative; padding: 16px 0 16px 4px; }
.tl-dot {
  position: absolute; left: -30px; top: 20px;
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold-600);
}
.tl-end .tl-dot { width: 30px; height: 30px; left: -37px; top: 15px; background: var(--wine-900); border-color: var(--wine-900); color: var(--gold-400); }
.tl-end .tl-dot svg { width: 17px; height: 17px; }
.tl-when { font: 600 12px/1.4 var(--ff-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--mauve-600); }
.tl-what { margin-top: 4px; font-family: var(--ff-display); font-size: clamp(20px, 5vw, 25px); font-weight: 600; color: var(--wine-800); line-height: 1.25; }
.tl-end .tl-what { color: var(--gold-ink); }

/* ---------------------------- 22. FINAL CTA ---------------------------- */
.sec-final { position: relative; overflow: hidden; background: var(--wine-900); color: var(--ink-on-dark); }
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.sec-final::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(78,16,37,.90) 0%, rgba(78,16,37,.72) 45%, rgba(62,11,29,.94) 100%);
}
.final-in { position: relative; z-index: 1; }
.final-h {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(28px, 7.6vw, 46px); line-height: 1.16; color: var(--ivory-100);
  text-wrap: balance;
}
.final-h em { font-style: italic; color: var(--gold-400); }
.final-sub { margin-top: 6px; font: 600 14px/1.5 var(--ff-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-on-dark-2); }
.final-date { margin-top: 6px; font-family: var(--ff-display); font-size: 22px; color: var(--gold-400); }
.sec-final .btn { margin-top: 26px; }
.final-fine { margin-top: 16px; font-size: 14px; color: var(--ink-on-dark-2); }

/* ------------------------------- 23. FAQ ------------------------------- */
.faq { display: grid; gap: 10px; }
.fq {
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .24s, box-shadow .24s;
}
.fq[open] { border-color: var(--gold-600); box-shadow: var(--shadow-sm); }
.fq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 52px 18px 20px; min-height: 56px;
  font: 600 16px/1.45 var(--ff-ui); color: var(--wine-800);
  display: flex; align-items: center;
}
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 1.8px solid var(--gold-600); border-bottom: 1.8px solid var(--gold-600);
  transform: rotate(45deg); transition: transform .26s;
}
.fq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fq-a { padding: 0 20px 20px; }
.fq-a p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ---------------------------- 23b. LOCALIZAÇÃO ---------------------------- */
.sec-where { background: var(--ivory-300); }
.where { display: grid; gap: 20px; }
.where-copy {
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.where-ic { display: block; width: 40px; height: 40px; color: var(--gold-ink); margin-bottom: 14px; }
.where-ic svg { width: 100%; height: 100%; }
.where-label { font: 600 11.5px/1.4 var(--ff-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mauve-600); }
.where-addr {
  margin-top: 10px; font-style: normal;
  font-family: var(--ff-display); font-size: clamp(22px, 5.4vw, 28px);
  line-height: 1.34; color: var(--wine-800);
}
.where-note { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.where-cta { display: grid; gap: 11px; margin-top: 22px; }

/* Facade do mapa: nasce como <a> real; o JS troca por <iframe> no clique. */
.where-map {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  min-height: 260px; border-radius: var(--radius-lg);
  border: 1px solid var(--line-gold); box-shadow: var(--shadow-sm);
  background: linear-gradient(150deg, var(--ivory-100), var(--ivory-200));
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.where-map:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-600); }
/* malha discreta que sugere um mapa sem baixar um pixel de mapa */
.where-map-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(197,145,49,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,145,49,.30) 1px, transparent 1px),
    linear-gradient(rgba(197,145,49,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,145,49,.16) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 30px 30px, 30px 30px;
}
.where-map-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -64%);
  display: grid; place-items: center; width: 62px; height: 62px;
  color: var(--wine-800);
}
.where-map-pin svg { width: 100%; height: 100%; }
.where-map-cta {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  background: var(--wine-800); color: var(--ivory-100);
  font: 600 14px/1.2 var(--ff-ui); letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(226,193,108,.34), var(--shadow-sm);
}
.where-map .map-frame { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ----------------------------- 24. CONTATO ----------------------------- */
.sec-contact { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.contacts { display: grid; gap: 16px; margin-top: 30px; }
.ct {
  background: var(--paper); border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg); padding: 26px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
}
.ct-ic { display: grid; place-items: center; width: 42px; height: 42px; color: var(--gold-ink); margin-bottom: 12px; }
.ct-ic svg { width: 100%; height: 100%; }
.ct-lbl { font: 600 11.5px/1.4 var(--ff-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mauve-600); }
.ct-val { margin-top: 8px; font-family: var(--ff-display); font-size: 25px; font-weight: 600; color: var(--wine-800); }
/* O e-mail é longo e estoura a caixa em 320px se não puder quebrar. Mas
   `break-all` corta no meio da palavra ("...lifesolution s@gmail.com");
   `anywhere` só recorre ao corte quando não há ponto natural. */
.ct-val--sm { font-size: 16px; overflow-wrap: anywhere; line-height: 1.45; }
.ct .btn { margin-top: 18px; width: 100%; }
.ct-alt {
  margin-top: 5px; font-size: 14px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px;
}

/* ----------------------------- 25. FOOTER ----------------------------- */
.ftr { background: #3E0B1D; color: var(--ink-on-dark); padding-block: 44px 26px; }
.ftr-in { display: grid; gap: 30px; text-align: center; justify-items: center; }
.ftr-orn { display: block; width: 108px; height: auto; margin-bottom: 14px; }
.ftr-name { font-family: var(--ff-display); font-size: 22px; font-weight: 600; color: var(--ivory-100); }
.ftr-season { margin-top: 4px; font: 500 12.5px/1.4 var(--ff-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-on-dark-2); }
.ftr-by { font: 500 11.5px/1.4 var(--ff-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-on-dark-2); margin-bottom: 12px; }
.ftr-mtu img { width: 190px; height: auto; }
.ftr-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.ftr-nav a {
  font-size: 14.5px; color: var(--ink-on-dark-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
}
.ftr-nav a:hover { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.ftr-legal { margin-top: 28px; text-align: center; font-size: 12.5px; color: rgba(231, 201, 207, .72); padding-inline: var(--pad); }

/* -------------------------- 26. STICKY MOBILE -------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255, 248, 239, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-gold);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(115%); transition: transform .32s cubic-bezier(.3,.8,.3,1);
  box-shadow: 0 -6px 24px rgba(78, 16, 37, .10);
}
.sticky[data-hide="false"] { transform: translateY(0); }
.sticky-in { display: flex; align-items: center; gap: 14px; max-width: 620px; margin-inline: auto; }
.sticky-txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.sticky-txt b { font: 700 15px/1.2 var(--ff-ui); color: var(--wine-800); white-space: nowrap; }
.sticky-txt span { color: var(--gold-600); }
.sticky .btn { flex: none; }

/* ------------------------- 27. MOTION (reveal) -------------------------
   🔴 O estado ESCONDIDO vive atrás de `.js`, nunca solto.
   `.reveal { opacity: 0 }` incondicional deixa a página inteira em branco
   quando o JS não roda — e o texto continua no DOM, então nenhuma
   asserção de markup acusa. A classe `js` é posta por um script inline
   no <head>, antes do primeiro paint.
   `.is-in` vem DEPOIS e com a mesma especificidade (0,2,0), então vence
   por ordem de fonte. Não mexer na ordem destas quatro regras.        */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1); }
.js .stagger { opacity: 0; transform: translateY(24px); transition: opacity .66s cubic-bezier(.2,.7,.3,1), transform .66s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in .stagger { opacity: 1; transform: none; }
.reveal.is-in .stagger:nth-child(2) { transition-delay: .13s; }

/* ================== 28. MEDIA QUERIES — SEMPRE POR ÚLTIMO ==================
   Daqui pra baixo NÃO pode existir regra sem media query.
   ========================================================================= */

@supports (height: 100svh) {
  :root { --hero-h: 88svh; }
}

/* ---- ≥ 560px: grades de 2 colunas ---- */
@media (min-width: 560px) {
  .cards-3, .cards-5 { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .hero-cta .btn { flex: 1 1 auto; }
  .swap-row { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .swap-arrow svg { transform: rotate(-90deg); }
  .groups { grid-template-columns: repeat(2, 1fr); }
  .plan-groups { grid-template-columns: repeat(2, 1fr); }
  .valuebar-in { grid-template-columns: repeat(4, 1fr); }
}

/* ---- ≥ 760px: instrutora e certificado lado a lado ---- */
@media (min-width: 760px) {
  body { font-size: 17.5px; }
  .inst { grid-template-columns: 0.92fr 1fr; align-items: center; gap: 40px; }
  .cert { grid-template-columns: 0.85fr 1fr; align-items: center; gap: 40px; }
  .transform { grid-template-columns: 1fr auto 1fr; align-items: start; gap: 22px; }
  .tarrow { align-self: center; }
  .tarrow svg { transform: rotate(-90deg); }
  .contacts { grid-template-columns: repeat(3, 1fr); }
  .savings { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px 26px; padding: 34px 28px; }
  .sv-save { grid-column: 1 / -1; border-top: 1px solid rgba(226,193,108,.34); }
  .videos { grid-template-columns: 1.62fr 1fr; align-items: start; }
  .where { grid-template-columns: 1fr 1.05fr; align-items: stretch; gap: 24px; }
  .where-cta { grid-auto-flow: column; justify-content: start; }
  .where-map { min-height: 340px; }
  .pricing { grid-template-columns: 1.42fr 1fr; align-items: start; }
  .plan-second { position: sticky; top: calc(var(--hdr-h) + 20px); }
  .makeup { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; padding: 44px 38px; }
  .swap { margin-top: 0; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ≥ 900px: hero em duas colunas + header desktop ---- */
@media (min-width: 900px) {
  :root { --hdr-h: 76px; --pad: 32px; }

  .hdr-nav {
    display: flex; align-items: center; gap: 24px; margin-inline: auto;
  }
  .hdr-nav a {
    font: 500 14px/1.3 var(--ff-ui); color: var(--wine-800);
    text-decoration: none; position: relative; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .hdr-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--gold-600); transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.3,1);
  }
  .hdr-nav a:hover::after, .hdr-nav a:focus-visible::after { transform: scaleX(1); }
  .hdr-cta { display: inline-flex; }
  .hdr-burger { display: none; }
  .mnav { display: none; }
  .brand { margin-right: 0; }
  .brand-txt b { font-size: 18px; }

  .hero { padding-top: 0; min-height: var(--hero-h); display: flex; align-items: center; }
  .hero-media {
    position: absolute; top: 0; right: 0; bottom: 0; left: auto;
    width: 52%; height: 100%;
  }
  /* mesma razão do mobile: 42% caía no meio da saia e a figura sumia */
  .hero-media img { height: 100%; min-height: 0; object-position: 50% 10%; }
  .hero-fade {
    background:
      linear-gradient(90deg, var(--paper) 0%, rgba(255,248,239,.86) 22%, rgba(255,248,239,.22) 52%, rgba(255,248,239,0) 78%),
      linear-gradient(180deg, rgba(255,248,239,.34) 0%, rgba(255,248,239,0) 26%, rgba(255,248,239,0) 74%, rgba(255,248,239,.42) 100%);
  }
  /* o header é transparente sobre o hero: sem essa folga a eyebrow
     encosta na marca do header em telas de 900px de altura */
  .hero-in { padding-block: calc(var(--hdr-h) + 34px) 60px; }
  .hero-copy { max-width: 560px; }
  .hero-cta { margin-top: 30px; }
  .hero-cta .btn { flex: 0 1 auto; }

  .cards-5 { grid-template-columns: repeat(5, 1fr); }
  .card { padding: 24px 20px; }
  .card h3 { font-size: 19px; }

  .sticky { display: none; }
  /* 3 cartões de contato dentro de .narrow (780px) davam ~240px cada e o
     e-mail quebrava no meio. A seção fica mais larga só aqui. */
  .sec-contact .wrap { max-width: 1000px; }
  .ct .btn { font-size: 14px; padding-inline: 14px; }
  .ftr-in { grid-template-columns: 1fr auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .ftr-mtu { justify-self: center; text-align: center; }
  .ftr-nav { justify-self: end; justify-content: flex-end; }
}

/* ---- ≥ 1180px: respiro editorial ---- */
@media (min-width: 1180px) {
  .hero-h1 { font-size: clamp(52px, 4.4vw, 66px); }
  .hero-copy { max-width: 600px; }
  .sec { padding-block: 108px; }
  .cards { gap: 18px; }
  .groups { gap: 24px; }
}

/* ---- ≥ 1600px: ultrawide — a coluna de texto não pode esticar ---- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
  .hero-media { width: 48%; }
}

/* ---- Telas muito estreitas (≤ 360px): iPhone SE e afins ---- */
@media (max-width: 360px) {
  :root { --pad: 16px; }
  .btn { font-size: 14px; padding-inline: 16px; }
  .btn-lg { font-size: 14.5px; padding-inline: 18px; }
  .sticky-txt b { font-size: 13.5px; }
  .plan-price { font-size: 58px; }
  /* em 320px "BEGINNER COURSE · FALL 2026" quebrava em duas linhas e
     empurrava a altura do header */
  .brand-txt i { font-size: 9.5px; letter-spacing: .07em; }
  .brand-txt b { font-size: 15px; }
}

/* ---- Respeitar quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
  .silk i { animation: none; }
  .hero-sheen { display: none; }
  .card:hover, .group:hover, .vid:hover, .btn:hover { transform: none; }
  .vid:hover img { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}