/* ==========================================================================
   RED ACADEMY — DESIGN TOKENS
   Fonte de verdade única. Aplicar em TODAS as 5 páginas.
   Substitui valores hardcoded, unifica escalas.
   ========================================================================== */

:root {

  /* ---------- CORES ---------- */

  /* Marca */
  --brand-primary:      #D90B4D;   /* crimson RED (era --c) */
  --brand-primary-hi:   #e8345f;   /* hover / accent claro */
  --brand-primary-lo:   #b00940;   /* pressed / link hover */
  --brand-secondary:    #15378B;   /* navy (era --n) */

  /* Superfícies escuras (semânticas — substituem 5 pretos hardcoded) */
  --surface:            #0c0d11;   /* fundo padrão de seção escura */
  --surface-raised:     #13151b;   /* card sobre --surface */
  --surface-deep:       #06060a;   /* fundo mais profundo (hero, footer) */
  --surface-brand:      #120a2c;   /* fundo com tom violeta (Fellowship) */
  --surface-brand-hi:   #180f34;   /* variação clara do violeta */

  /* Superfícies claras */
  --paper:              #ffffff;
  --paper-muted:        #f5f6f8;

  /* Texto escuro sobre fundo claro */
  --ink:                #15171d;   /* corpo padrão */
  --ink-strong:         #0c0d11;   /* títulos */
  --ink-muted:          #5b6472;   /* legenda */
  --ink-faint:          #3d4250;

  /* Texto claro sobre fundo escuro */
  --ink-invert:         #f5f6f8;
  --ink-invert-muted:   #cdd0d8;
  --ink-invert-faint:   #dfe1e6;

  /* Bordas */
  --border-subtle:      rgba(255,255,255,.08);
  --border-strong:      rgba(255,255,255,.14);
  --border-ink:         rgba(21,23,29,.10);


  /* ---------- TIPOGRAFIA ---------- */

  /* Famílias */
  --font-display: 'Sansation', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida — 6 papéis, mobile 360px ↔ desktop 1440px+ */
  /* Consolida os 26 valores atuais em 6. clamp(min, fluido, max) */
  --fs-display:   clamp(40px, 6vw + 8px, 78px);   /* hero H1 */
  --fs-h1:        clamp(30px, 3.6vw + 8px, 52px); /* seção H1 */
  --fs-h2:        clamp(24px, 2.4vw + 8px, 36px); /* subseção */
  --fs-h3:        clamp(19px, 1.2vw + 12px, 24px);/* card title */
  --fs-body-lg:   clamp(17px, .4vw + 15px, 20px); /* corpo destaque */
  --fs-body:      clamp(15px, .2vw + 14px, 17px); /* corpo padrão (substitui 14/15.5/16/16.5/17) */
  --fs-small:     clamp(13px, .1vw + 12px, 14px); /* legenda, meta */

  /* Line-heights (substitui os 9 valores atuais por 4) */
  --lh-tight:   1.1;   /* display */
  --lh-snug:    1.25;  /* H1-H3 */
  --lh-normal:  1.5;   /* corpo padrão */
  --lh-relaxed: 1.65;  /* corpo longo */

  /* Pesos */
  --fw-regular: 400;
  --fw-bold:    700;

  /* Tracking */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.06em;   /* kickers, eyebrow */


  /* ---------- ESPAÇAMENTO (escala fechada, base 4) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* Padding vertical de seção (fluido) */
  --section-py: clamp(56px, 8vw, 128px);
  --section-px: clamp(20px, 4vw, 40px);


  /* ---------- LAYOUT ---------- */
  --container-max: 1760px;   /* pill navbar já usa este */
  --content-max:   1200px;   /* medida de leitura para prosa */
  --measure:       68ch;     /* linhas de texto longo */


  /* ---------- FORMA ---------- */
  --radius-sm:   6px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;


  /* ---------- SOMBRA ---------- */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.12);
  --shadow-md: 0 14px 34px -20px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6);
  --shadow-brand: 0 16px 46px -10px rgba(217,11,77,.55);


  /* ---------- MOVIMENTO ---------- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .18s;
  --dur-med:  .3s;
  --dur-slow: .5s;
}


/* ==========================================================================
   BREAKPOINTS — consolidados de 11 para 4
   Use APENAS estes. Nenhuma exceção sem justificativa por escrito.
   ========================================================================== */
/*
  Mobile pequeno:    ≤ 480px   (@media (max-width: 480px))
  Mobile / tablet:   ≤ 767px   (@media (max-width: 767px))
  Tablet / desktop:  ≤ 1024px  (@media (max-width: 1024px))
  Desktop:           ≥ 1025px  (padrão / min-width: 1025px se preciso)

  Regra de ordem: mobile-first onde possível.
  Regra de proibição: NUNCA 767+768 no mesmo componente, NUNCA valores
  intermediários (1000, 1040, 1280, 700, 640, 600, 560) — se precisar,
  a escala está errada, não o breakpoint.
*/


/* ==========================================================================
   RESET / BASE
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--surface-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}
h1, h2, h3 { text-wrap: balance; font-family: var(--font-display); }
h1 { font-size: var(--fs-h1);      line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2);      line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3);      line-height: var(--lh-snug); }
p  { max-width: var(--measure);    line-height: var(--lh-relaxed); }
::selection { background: var(--brand-primary); color: #fff; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   LOCKUP DE HERO — ícone acima do texto, centralizado
   Aplicado via .red-lockup nas 4 páginas. Home já vem centralizada no
   desktop pelo próprio style inline; aqui garantimos o mobile das demais.
   !important é necessário porque os lockups têm style inline.
   ========================================================================== */
@media (max-width: 767px) {
  .red-lockup {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .red-lockup > div { text-align: center !important; }

  /* RED CLASS e RED SKILLS: hero inteiro centralizado no mobile,
     para não ficar lockup no centro e título à esquerda. */
  #hero-content { align-items: center !important; text-align: center !important; }

  /* HOME — hero mobile: o white-space:nowrap travava o crescimento do H1
     e o piso do clamp segurava a tagline em 15px. */
  .bv-h1 {
    white-space: normal !important;
    font-size: clamp(38px, 11vw, 64px) !important;
  }
  .bv-tagline { font-size: clamp(19px, 5.6vw, 24px) !important; }

  /* HOME — hero mobile: "Regenerativa/Esportiva/Dor" media a 38px (piso do
     clamp), mas a referência do cliente (Figma, frame 854px de largura) usa
     120px = 14vw — quase 40% maior. Ajustado pra bater com a proporção real. */
  .sh-line { font-size: clamp(40px, 14vw, 76px) !important; }

  /* HOME — hero mobile: "Três territórios..." no Figma é bold, branco sólido,
     line-height 1.46, tracking -0.32px — no bundle original saiu sem peso
     definido (herdava regular), mais apagado que a referência. */
  .sh-sub {
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.46 !important;
    letter-spacing: -0.32px !important;
  }

  /* HOME — hero mobile: #bemvindo tem um scale(1.03) fixo pensado pra quando
     a foto ocupava a seção inteira (zoom sutil, centralizado, sem sobra
     visível). Agora que a foto é um card menor encostado no topo, o mesmo
     zoom da seção inteira empurra o card pra fora do lugar — sobra espaço
     vazio na lateral. Neutraliza só no mobile. */
  #bemvindo { transform: none !important; }

  /* HOME — hero mobile: os dois gradientes escuros (pensados pra escurecer
     a esquerda de uma foto larga, tipo desktop) ficam pesados demais numa
     foto pequena e cobrem lateral que devia estar clara. Sem eles no mobile
     — a foto já é pequena e contida o bastante pra não precisar. */
  #bemvindo > div:nth-of-type(2),
  #bemvindo > div:nth-of-type(3) {
    display: none !important;
  }
}

/* Banner mobile "AGORA NA RED" — carrossel nativo por scroll-snap, sem JS */
.bn-mob-track::-webkit-scrollbar { display: none; }

/* ==========================================================================
   TRAVA DE ESTOURO HORIZONTAL NO MOBILE
   Causa raiz: filhos de container flex têm min-width:auto por padrão e não
   encolhem abaixo do próprio conteúdo — foi o que empurrou o bloco do
   Instagram para fora da tela. Vale para todas as páginas.
   ========================================================================== */
@media (max-width: 767px) {
  img, svg, video, iframe { max-width: 100%; }
  h1, h2, h3, p { overflow-wrap: break-word; }
  [style*="display:flex"] > * { min-width: 0; }
}

/* ==========================================================================
   AJUSTES PONTUAIS DE MOBILE
   ========================================================================== */
@media (max-width: 767px) {

  /* HOME — cabeçalho do Instagram: avatar em cima, texto embaixo.
     Lado a lado, o texto não cabe e o bloco estourava a tela. */
  .ig-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }
  /* só o bloco de texto ocupa a largura — o avatar mantém os 84px */
  .ig-head > div + div { width: 100% !important; }
  .ig-head h2 { font-size: clamp(22px, 6.4vw, 30px) !important; }
  .ig-head p  { max-width: 100% !important; }
  .ig-head [style*="gap:26px"] { flex-wrap: wrap !important; gap: 18px !important; }

  /* CLASS — selo vira faixa no topo do card, em vez de flutuar
     por cima do rótulo da edição. */
  .ed-badge {
    position: static !important;
    display: block !important;
    text-align: center !important;
    border-bottom-left-radius: 0 !important;
    padding: 10px 18px !important;
  }

  /* CLASS — as duas mídias de edição com a mesma proporção. */
  .ed-media { aspect-ratio: 16 / 9 !important; }
}