/* LMS Inspirali Pós — CSS base (ITCSS).
   Tokens copiados do tema do site (inspirali-pos-theme). Aqui NÃO existe
   theme-overrides.css nem theme fields: os tokens CSS são a única fonte de
   verdade. Ao atualizar o design system no site, copie a pasta tokens de novo.
   settings/_lms.css guarda os tokens só do LMS (camada 3, --lms-*): fica fora
   de tokens/ para a cópia do site continuar idêntica.
   ATENÇÃO: a HubSpot processa .css como HubL. Nada de delimitador HubL em
   comentário (cite a tag pelo nome). O scripts/check-css-hubl.py barra isso. */

/* ============================================================
   CAMADA 1 — TOKENS PRIMITIVOS
   Valores brutos. Nunca referenciados direto na UI; use os
   tokens semânticos (camada 2) ou de componente (camada 3).

   Nomenclatura: --ip-<categoria>-<escala>
   ip = Inspirali Pós (prefixo de namespace do design system)
   ============================================================ */

:root {
  /* --------------------------------------------------------
     CORES — escalas de tonalidade 50 (claro) → 900 (escuro)
     Âncoras extraídas do Manual de Identidade Visual (MIV)
     e normalizadas a partir da home no Figma.
     -------------------------------------------------------- */

  /* Azul cinza (MIV) — PALETA INSTITUCIONAL ESTENDIDA, não prioritária.
     Presente na paleta ampla (pg.15) e na home do Figma, mas fora das
     cores preferenciais da Inspirali Pós (pg.16). Usar com parcimônia.
     Tons 300/400/500 confirmados nos gradientes da home. */
  --ip-teal-50:  #eef4f5;
  --ip-teal-100: #d8e6e8;
  --ip-teal-200: #b9d3d7;
  --ip-teal-300: #8dbcc4;   /* rgb(141,188,196) — home */
  --ip-teal-400: #7eacb4;   /* rgb(126,172,180) — home */
  --ip-teal-500: #679299;   /* rgb(103,146,153) — home */
  --ip-teal-600: #5e8f97;   /* MIV "azul cinza" — canônico */
  --ip-teal-700: #4e767d;
  --ip-teal-800: #3d5c61;
  --ip-teal-900: #2c4347;

  /* Sage / Cinza-esverdeado — COR DE APOIO / SECUNDÁRIA (MIV "cinza
     esverdeado" #818875, pg.16). Única cor de caráter na paleta preferencial. */
  --ip-sage-50:  #f3f4f1;
  --ip-sage-100: #e6e8e1;
  --ip-sage-200: #d2d5c9;
  --ip-sage-300: #bdc0b3;   /* rgb(189,192,179) — home */
  --ip-sage-400: #9da28d;
  --ip-sage-500: #848977;   /* rgb(132,137,119) — home */
  --ip-sage-600: #818875;   /* MIV "cinza esverdeado" — canônico */
  --ip-sage-700: #6f7464;
  --ip-sage-800: #50544a;
  --ip-sage-900: #34362f;

  /* Neutros frios — escala "tinta" da marca. Contém as cores PRINCIPAIS
     (MIV pg.16): cinza escuro #313032 (primária) e cinza gelo #E2E7E9. */
  --ip-neutral-50:  #f7f8f8;
  --ip-neutral-100: #e2e7e9;   /* MIV "cinza gelo" */
  --ip-neutral-200: #d9d9d9;   /* rgb(217,217,217) — home */
  --ip-neutral-300: #c2c3c5;
  --ip-neutral-400: #9a9a9c;
  --ip-neutral-500: #707072;
  --ip-neutral-600: #606060;   /* rgb(96,96,96) — cor de texto mais usada */
  --ip-neutral-700: #4a4a4b;
  --ip-neutral-800: #373737;   /* rgb(55,55,55) — home */
  --ip-neutral-900: #313032;   /* MIV "cinza escuro" — tinta principal */
  --ip-neutral-950: #1a1a1b;

  /* Neutros quentes / Stone — taupes da marca, cores PRINCIPAIS e de apoio
     (MIV pg.16): cinza médio #7A6F66 (principal), cinza bege #CCCAC0 (apoio),
     cinza quente #92867D. */
  --ip-stone-50:  #f6f4f2;
  --ip-stone-100: #ece9e5;
  --ip-stone-200: #dad5ce;
  --ip-stone-300: #cccac0;   /* MIV "cinza bege" */
  --ip-stone-400: #a99e94;
  --ip-stone-500: #92867d;   /* MIV "cinza quente" */
  --ip-stone-600: #7a6f66;   /* MIV "cinza médio" */
  --ip-stone-700: #565046;   /* rgb(86,80,70) — home */
  --ip-stone-800: #423d36;
  --ip-stone-900: #2c2924;

  /* --------------------------------------------------------
     CORES FUNCIONAIS / SECUNDÁRIAS (MIV)
     Usadas como apoio e para estados do sistema.
     -------------------------------------------------------- */
  --ip-green-600:   #0f6e3f;   /* MIV "verde" */
  --ip-green-700:   #007642;   /* MIV variação escura */
  --ip-green-100:   #dceee4;
  --ip-orange-500:  #f79520;   /* MIV "laranja" */
  --ip-orange-700:  #aa5706;   /* MIV área "burnt" */
  --ip-orange-100:  #fdecd5;
  --ip-mustard-500: #b19437;   /* MIV "mostarda" */
  --ip-mustard-100: #f3ecd3;
  --ip-purple-500:  #876898;   /* MIV "magenta escuro" */
  --ip-blue-500:    #4767d7;   /* MIV área "azul" */
  --ip-blue-100:    #dde2f8;
  --ip-red-500:     #ce3b2e;   /* DERIVADO — ver decisões/premissas */
  --ip-red-100:     #f8dedb;

  /* Cores das 11 áreas do conhecimento (MIV pág. 17).
     Estes valores são de PREENCHIMENTO (fundo de selo, faixa, ponto). */
  --ip-area-crianca:    #bc85de;   /* Saúde da Criança e do Adolescente */
  --ip-area-imagem:     #4767d7;   /* Saúde em Imagem e Diagnóstico */
  --ip-area-mulher:     #0d616e;   /* Saúde da Mulher */
  --ip-area-coracao:    #f79520;   /* Saúde do Coração */
  --ip-area-pele:       #92867d;   /* Saúde da Pele e Estética */
  --ip-area-metabolica: #818875;   /* Saúde Metabólica e Performance */
  --ip-area-digestiva:  #b19437;   /* Saúde Digestiva */
  --ip-area-idoso:      #aa5706;   /* Saúde do Idoso */
  --ip-area-gestao:     #0f6e3f;   /* Saúde focada em Gestão e Tecnologia */
  --ip-area-clinica:    #5e8f97;   /* Saúde Clínica */
  --ip-area-mental:     #876898;   /* Saúde Mental e Comportamental */

  /* Variante ON-WHITE das cores de área — para quando a cor da área vira
     TEXTO ou CONTORNO sobre fundo claro (ex.: .ip-tag--area-*). 6 das 11
     cores de preenchimento reprovam AA como texto sobre branco (a de menor
     contraste, criança, dava 2.78:1 — INS-041). Estas são as MESMAS cores
     com a luminosidade HSL reduzida até ≥4.6:1 sobre branco: mantêm matiz e
     saturação, então a identidade da área continua reconhecível.
     NÃO use estes tokens como fundo — para fundo, use os de cima. */
  --ip-area-crianca-text:    #9f51d0;                  /* 4.60:1 (era 2.78:1) */
  --ip-area-imagem-text:     var(--ip-area-imagem);    /* 5.01:1 — já passa */
  --ip-area-mulher-text:     var(--ip-area-mulher);    /* 7.11:1 — já passa */
  --ip-area-coracao-text:    #ae6206;                  /* 4.62:1 (era 2.26:1) */
  --ip-area-pele-text:       #7f736a;                  /* 4.60:1 (era 3.54:1) */
  --ip-area-metabolica-text: #717767;                  /* 4.63:1 (era 3.68:1) */
  --ip-area-digestiva-text:  #89732b;                  /* 4.61:1 (era 2.93:1) */
  --ip-area-idoso-text:      var(--ip-area-idoso);     /* 5.15:1 — já passa */
  --ip-area-gestao-text:     var(--ip-area-gestao);    /* 6.32:1 — já passa */
  --ip-area-clinica-text:    #517c83;                  /* 4.60:1 (era 3.59:1) */
  --ip-area-mental-text:     var(--ip-area-mental);    /* 4.70:1 — já passa */

  /* Branco / preto puros */
  --ip-white: #ffffff;
  --ip-black: #000000;
  --ip-paper: #fefefe;   /* rgb(254,254,254) — fundo de página no Figma */

  /* --------------------------------------------------------
     TIPOGRAFIA — primitivos
     -------------------------------------------------------- */
  /* Fontes servidas via Adobe Fonts (Typekit, link no <head>).
     din-2014-rounded-variable = DIN Round Pro (variável 200–900);
     museo = Museo (300/700). */
  --ip-font-din:   "din-2014-rounded-variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ip-font-museo: "museo", Georgia, "Times New Roman", serif;

  --ip-weight-light:  300;
  --ip-weight-regular:400;
  --ip-weight-medium: 500;
  --ip-weight-bold:   700;
  --ip-weight-black:  900;

  /* Tamanhos base — nomenclatura Tailwind */
  /* PISO DE ACESSIBILIDADE: 14px. O xs valia 12px e era o atalho pelo qual
     legenda/overline entravam abaixo do minimo do projeto (INS-042). Mantido
     com o mesmo nome para nao quebrar os 16 usos, mas agora vale 14px — por
     isso e igual ao sm. Nao volte para 0.75rem: e o piso, nao um degrau. */
  --ip-text-xs:   0.875rem;  /* 14px (era 12px) */
  --ip-text-sm:   0.875rem;  /* 14px */
  --ip-text-base: 1rem;      /* 16px */
  --ip-text-lg:   1.125rem;  /* 18px */
  --ip-text-xl:   1.25rem;   /* 20px */
  --ip-text-2xl:  1.5rem;    /* 24px */
  --ip-text-3xl:  1.875rem;  /* 30px */
  --ip-text-4xl:  2.5rem;    /* 40px */
  --ip-text-5xl:  3rem;      /* 48px */
  --ip-text-6xl:  3.75rem;   /* 60px */
  --ip-text-7xl:  4rem;      /* 64px */

  /* Altura de linha */
  --ip-leading-none:    1;
  --ip-leading-tight:   1.1;
  --ip-leading-snug:    1.25;
  --ip-leading-normal:  1.4;
  --ip-leading-relaxed: 1.6;

  /* Espaçamento entre letras */
  --ip-tracking-tighter: -0.02em;
  --ip-tracking-tight:   -0.01em;
  --ip-tracking-normal:  0em;
  --ip-tracking-wide:    0.04em;
  --ip-tracking-wider:   0.12em;   /* overline */

  /* --------------------------------------------------------
     ESPAÇAMENTO — escala base 4
     -------------------------------------------------------- */
  --ip-space-0:  0;
  --ip-space-1:  0.25rem;   /* 4 */
  --ip-space-2:  0.5rem;    /* 8 */
  --ip-space-3:  0.75rem;   /* 12 */
  --ip-space-4:  1rem;      /* 16 */
  --ip-space-5:  1.25rem;   /* 20 */
  --ip-space-6:  1.5rem;    /* 24 */
  --ip-space-8:  2rem;      /* 32 */
  --ip-space-10: 2.5rem;    /* 40 */
  --ip-space-12: 3rem;      /* 48 */
  --ip-space-16: 4rem;      /* 64 */
  --ip-space-20: 5rem;      /* 80 */
  --ip-space-24: 6rem;      /* 96 */
  --ip-space-32: 8rem;      /* 128 */

  /* --------------------------------------------------------
     RAIO DE BORDA — extraído da home (13 / 20 / 28 / 40 / pill)
     -------------------------------------------------------- */
  --ip-radius-xs:   6px;
  --ip-radius-sm:   8px;
  --ip-radius-md:   13px;    /* inputs, cards pequenos */
  --ip-radius-lg:   20px;    /* cards, botões largos */
  --ip-radius-xl:   28px;    /* cards de destaque, imagens */
  --ip-radius-2xl:  40px;    /* blocos grandes */
  --ip-radius-full: 9999px;  /* pílulas, avatares */

  /* --------------------------------------------------------
     SOMBRA E ELEVAÇÃO — sombras suaves multicamada da home
     -------------------------------------------------------- */
  --ip-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06);
  --ip-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06);
  --ip-shadow-md:
      -7px 10px 7px 0 rgba(0,0,0,0.04),
      -3px 4px 6px 0 rgba(0,0,0,0.08),
      -1px 1px 3px 0 rgba(0,0,0,0.12);
  --ip-shadow-lg:
      -13px 18px 9px 0 rgba(0,0,0,0.03),
      -7px 10px 7px 0 rgba(0,0,0,0.10),
      -3px 4px 6px 0 rgba(0,0,0,0.17),
      -1px 1px 3px 0 rgba(0,0,0,0.20);
  --ip-shadow-xl:
      15px 34px 22px 0 rgba(0,0,0,0.06),
      7px 15px 16px 0 rgba(0,0,0,0.12),
      2px 4px 9px 0 rgba(0,0,0,0.18);

  /* --------------------------------------------------------
     GRID E BREAKPOINTS
     -------------------------------------------------------- */
  --ip-container-sm:  640px;
  --ip-container-md:  768px;
  --ip-container-lg:  1024px;
  --ip-container-xl:  1280px;
  --ip-container-2xl: 1440px;   /* teto full-bleed (faixas / fundos) */
  --ip-content-max:   1390px;   /* área de conteúdo (frame do Figma); tabela ≈1349 dentro com ~20px de respiro */
  --ip-grid-columns:  12;  /* @kind other */
  --ip-grid-gutter:   24px;
  --ip-grid-margin:   clamp(20px, 5vw, 96px);
  --ip-grid-gutter-cards: 74px; /* gutter de grids de 3 cards iguais (.grid-3). Exceções Figma: courses-showcase usa 69px (linha cards+CTA) e 43px (track de cursos) — ver modules-bundle.css */

  /* Respiro lateral da área de conteúdo (.container/.content-wrapper) */
  --ip-section-pad-x:        var(--ip-space-5); /* 20px — desktop/tablet */
  --ip-section-pad-x-mobile: var(--ip-space-6); /* 24px — aplicado localmente onde o frame mobile pede (ex.: footer) */

  /* Breakpoints (para referência em media queries) */
  --ip-bp-sm:  640px;
  --ip-bp-md:  768px;
  --ip-bp-lg:  1024px;
  --ip-bp-xl:  1280px;
  --ip-bp-2xl: 1536px;

  /* --------------------------------------------------------
     TAMANHOS DE ÍCONE
     -------------------------------------------------------- */
  --ip-icon-xs: 16px;
  --ip-icon-sm: 20px;
  --ip-icon-md: 24px;
  --ip-icon-lg: 32px;
  --ip-icon-xl: 48px;

  /* Glifo de seta-à-direita (Phosphor arrow-right) como SVG inline, para usar
     como mask-image onde não dá pra carregar a fonte de ícones (ex.: pseudo-
     elementos em CSS crítico, como a seta do CTA do header). A cor vem do
     elemento via background-color/currentColor. */
  --ip-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32z'/%3E%3C/svg%3E");

  /* --------------------------------------------------------
     GRADIENTES DA MARCA
     ink = CTA principal (sóbrio, alinhado ao MIV).
     brand (sage + azul cinza) = apoio/estendido, herdado da home.
     -------------------------------------------------------- */
  --ip-gradient-brand:
      linear-gradient(68deg, var(--ip-sage-500) -1%, var(--ip-sage-300) 119%),
      linear-gradient(77deg, var(--ip-teal-500) -14%, var(--ip-teal-300) 149%);
  --ip-gradient-brand-soft:
      linear-gradient(44deg, var(--ip-sage-500) -20%, var(--ip-sage-300) 143%);
  --ip-gradient-ink:
      linear-gradient(235deg, #3b3b3b 9%, var(--ip-neutral-900) 104%);
  --ip-gradient-ink-soft:
      linear-gradient(234deg, #6b6b6b 5%, var(--ip-neutral-900) 79%);
  /* selo = degradê tinta padrão dos selos promocionais "always on"
     (texto/ícone em laranja --ip-orange-500). Campanhas trocam o fundo
     por degradê ou PNG próprios via custom property inline no card. */
  --ip-gradient-selo:
      linear-gradient(95deg, #1a1a1b 0%, #3a3a3d 100%);
}
/* ============================================================
   CAMADA 2 — TOKENS SEMÂNTICOS (intenção de uso)
   Mapeiam primitivos para função. A UI consome ESTES tokens,
   nunca os primitivos diretamente.

   Nomenclatura: --color-<intenção>[-<variação>]
   ============================================================ */

:root {
  /* ---- Marca ----
     Hierarquia conforme MIV pg.16 ("Usos preferenciais de Cores"):
     cores principais = neutros (cinza escuro / médio / gelo);
     cor de apoio = cinza esverdeado (sage). O azul cinza NÃO é
     prioritário para a Inspirali Pós — fica como paleta estendida. */
  --color-primary:          var(--ip-neutral-900); /* cinza escuro #313032 */
  --color-primary-hover:    var(--ip-neutral-800);
  --color-primary-active:   var(--ip-neutral-950);
  --color-primary-subtle:   var(--ip-neutral-100); /* cinza gelo */
  --color-primary-contrast: var(--ip-white);

  --color-secondary:        var(--ip-sage-600);   /* cinza esverdeado #818875 — apoio */
  --color-secondary-hover:  var(--ip-sage-700);
  --color-secondary-active: var(--ip-sage-800);
  --color-secondary-subtle: var(--ip-sage-50);
  --color-secondary-contrast: var(--ip-white);

  --color-accent:           var(--ip-stone-600);   /* cinza médio #7A6F66 — neutro quente de apoio */
  --color-accent-hover:     var(--ip-stone-700);
  --color-accent-subtle:    var(--ip-stone-100);
  --color-accent-contrast:  var(--ip-white);

  /* ---- Superfícies e fundos ---- */
  --color-bg:            var(--ip-paper);          /* fundo de página */
  --color-bg-subtle:     var(--ip-neutral-50);     /* seções alternadas claras */
  --color-bg-inverse:    var(--ip-neutral-900);    /* seções escuras (hero, faixas) */
  --color-surface:       var(--ip-white);          /* cards padrão */
  --color-surface-subtle:var(--ip-neutral-50);
  --color-surface-sunken:var(--ip-neutral-100);    /* gelo — inputs, trilhas */
  --color-surface-inverse: var(--ip-neutral-800);  /* cards sobre fundo escuro */

  /* ---- Texto ---- */
  --color-text:           var(--ip-neutral-900);   /* títulos / texto forte */
  --color-text-body:      var(--ip-neutral-600);   /* corpo (#606060) */
  --color-text-muted:     var(--ip-neutral-500);   /* secundário / legendas */
  --color-text-subtle:    var(--ip-neutral-400);   /* placeholder, desabilitado */
  --color-text-on-brand:  var(--ip-white);
  --color-text-inverse:   var(--ip-neutral-100);   /* texto sobre fundo escuro */
  --color-text-inverse-muted: var(--ip-stone-300);
  --color-link:           var(--ip-stone-700);   /* #565046 — 7.98:1 ✓ AAA */
  --color-link-hover:     var(--ip-neutral-900);

  /* ---- Bordas ---- */
  --color-border:         var(--ip-neutral-200);   /* borda padrão */
  --color-border-subtle:  #ededed;                 /* divisórias leves */
  --color-border-strong:  var(--ip-neutral-400);
  --color-border-inverse: rgba(255,255,255,0.16);
  --color-focus-ring:     var(--ip-sage-600);

  /* ---- Estados do sistema ---- */
  --color-success:        var(--ip-green-600);
  --color-success-subtle: var(--ip-green-100);
  --color-warning:        var(--ip-orange-500);
  --color-warning-subtle: var(--ip-orange-100);
  --color-error:          var(--ip-red-500);
  --color-error-subtle:   var(--ip-red-100);
  --color-info:           var(--ip-blue-500);
  --color-info-subtle:    var(--ip-blue-100);

  /* ---- Gradientes semânticos ----
     CTA principal = tinta (sóbrio, alinhado ao MIV).
     O gradiente sage+teal vira apoio/estendido. */
  --gradient-cta:    var(--ip-gradient-ink);
  --gradient-ink:    var(--ip-gradient-ink);
  --gradient-accent: var(--ip-gradient-brand);   /* sage + azul cinza — estendido */
  --gradient-selo:   var(--ip-gradient-selo);    /* faixa padrão dos selos promocionais */

  /* ---- Elevação semântica ---- */
  --elevation-flat:   none;
  --elevation-raised: var(--ip-shadow-md);
  --elevation-overlay:var(--ip-shadow-lg);
  --elevation-modal:  var(--ip-shadow-xl);

  /* ---- Alvo tátil mínimo ----
     Tamanho mínimo de qualquer controle que se toca com o dedo. O tema vinha
     usando 44px solto (Apple HIG) em alguns lugares e valores menores em outros;
     o PageSpeed reprova abaixo de 48px, então 48 é a régua. Aplicar em botão de
     interface — paginação, chip, seta, toggle —, não em link dentro de texto
     corrido, onde o alvo é a linha. */
  --ip-tap-min: 48px;

  /* ---- HubSpot theme fields (exposição explícita) ---- */
  --primary_color:   var(--ip-neutral-900);  /* cinza escuro #313032 */
  --secondary_color: var(--ip-sage-600);     /* cinza esverdeado #818875 */
  --heading_font:    var(--ip-font-museo);
  --body_font:       var(--ip-font-din);
}
/* ============================================================
   TIPOGRAFIA — escala modular (intenção)
   Famílias: títulos = Museo · corpo = DIN Round Pro
   Cada papel expõe família, tamanho, peso, altura e tracking.
   Nomes Tailwind-compatíveis nas observações.
   ============================================================ */

:root {
  /* Display — manifestos / hero gigante (Museo 700, text-7xl) */
  --type-display-font:    var(--ip-font-museo);
  --type-display-size:    var(--ip-text-7xl);
  --type-display-weight:  var(--ip-weight-bold);
  --type-display-leading: var(--ip-leading-tight);
  --type-display-tracking:var(--ip-tracking-tight);

  /* H1 (Museo 700, text-5xl) */
  --type-h1-font:    var(--ip-font-museo);
  --type-h1-size:    var(--ip-text-5xl);
  --type-h1-weight:  var(--ip-weight-bold);
  --type-h1-leading: var(--ip-leading-tight);
  --type-h1-tracking:var(--ip-tracking-tight);

  /* H2 (Museo 700, text-4xl) */
  --type-h2-font:    var(--ip-font-museo);
  --type-h2-size:    var(--ip-text-4xl);
  --type-h2-weight:  var(--ip-weight-bold);
  --type-h2-leading: var(--ip-leading-snug);
  --type-h2-tracking:var(--ip-tracking-tight);

  /* H3 (Museo 700, text-3xl) */
  --type-h3-font:    var(--ip-font-museo);
  --type-h3-size:    var(--ip-text-3xl);
  --type-h3-weight:  var(--ip-weight-bold);
  --type-h3-leading: var(--ip-leading-snug);
  --type-h3-tracking:var(--ip-tracking-normal);

  /* H4 (Museo 700, text-2xl) */
  --type-h4-font:    var(--ip-font-museo);
  --type-h4-size:    var(--ip-text-2xl);
  --type-h4-weight:  var(--ip-weight-bold);
  --type-h4-leading: var(--ip-leading-snug);
  --type-h4-tracking:var(--ip-tracking-normal);

  /* H5 (DIN 700, text-xl) */
  --type-h5-font:    var(--ip-font-din);
  --type-h5-size:    var(--ip-text-xl);
  --type-h5-weight:  var(--ip-weight-bold);
  --type-h5-leading: var(--ip-leading-snug);
  --type-h5-tracking:var(--ip-tracking-normal);

  /* H6 (DIN 700, text-lg) */
  --type-h6-font:    var(--ip-font-din);
  --type-h6-size:    var(--ip-text-lg);
  --type-h6-weight:  var(--ip-weight-bold);
  --type-h6-leading: var(--ip-leading-normal);
  --type-h6-tracking:var(--ip-tracking-normal);

  /* Corpo grande (DIN 400, text-xl) */
  --type-body-lg-font:    var(--ip-font-din);
  --type-body-lg-size:    var(--ip-text-xl);
  --type-body-lg-weight:  var(--ip-weight-regular);
  --type-body-lg-leading: var(--ip-leading-relaxed);
  --type-body-lg-tracking:var(--ip-tracking-normal);

  /* Corpo médio — padrão (DIN 400, text-lg) */
  --type-body-md-font:    var(--ip-font-din);
  --type-body-md-size:    var(--ip-text-lg);
  --type-body-md-weight:  var(--ip-weight-regular);
  --type-body-md-leading: var(--ip-leading-relaxed);
  --type-body-md-tracking:var(--ip-tracking-normal);

  /* Corpo pequeno (DIN 400, text-base) */
  --type-body-sm-font:    var(--ip-font-din);
  --type-body-sm-size:    var(--ip-text-base);
  --type-body-sm-weight:  var(--ip-weight-regular);
  --type-body-sm-leading: var(--ip-leading-normal);
  --type-body-sm-tracking:var(--ip-tracking-normal);

  /* Legenda (DIN 400, text-sm) */
  --type-caption-font:    var(--ip-font-din);
  --type-caption-size:    var(--ip-text-sm);
  --type-caption-weight:  var(--ip-weight-regular);
  --type-caption-leading: var(--ip-leading-normal);
  --type-caption-tracking:var(--ip-tracking-normal);

  /* Overline (DIN 500, text-xs, maiúsculas, tracking largo) */
  --type-overline-font:    var(--ip-font-din);
  --type-overline-size:    var(--ip-text-xs);
  --type-overline-weight:  var(--ip-weight-medium);
  --type-overline-leading: var(--ip-leading-normal);
  --type-overline-tracking:var(--ip-tracking-wider);
}

/* ---- Classes utilitárias (opcionais) ----
   Atalhos para aplicar um papel tipográfico inteiro. */
.ip-display { font-family: var(--type-display-font); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); }
.ip-h1 { font-family: var(--type-h1-font); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); }
.ip-h2 { font-family: var(--type-h2-font); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); }
.ip-h3 { font-family: var(--type-h3-font); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); }
.ip-h4 { font-family: var(--type-h4-font); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); }
.ip-h5 { font-family: var(--type-h5-font); font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); }
.ip-h6 { font-family: var(--type-h6-font); font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); }
.ip-body-lg { font-family: var(--type-body-lg-font); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-leading); }
.ip-body-md { font-family: var(--type-body-md-font); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-leading); }
.ip-body-sm { font-family: var(--type-body-sm-font); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-leading); }
.ip-caption { font-family: var(--type-caption-font); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-leading); }
.ip-overline { font-family: var(--type-overline-font); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-leading); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
/* ============================================================
   CAMADA 3 — TOKENS DE COMPONENTE
   Valores aplicados a componentes recorrentes, com todos os
   estados (padrão, hover, ativo, foco, desabilitado).
   Referenciam SEMPRE a camada semântica.

   Nomenclatura: --<componente>-<propriedade>[-<estado>]
   ============================================================ */

:root {
  /* ---------------- BOTÃO ----------------
     REGRA DO DS (a11y): todo token de FUNDO com variante `-hover` exige o
     token de TEXTO `-hover` correspondente. Fundo que clareia no hover sem
     texto que acompanhe = contraste reprovado (foi o defeito INS-049: o
     gradiente de hover do primário clareia até #6b6b6b e o texto ficava em
     #e2e7e9 → 4.27:1). Ao criar um novo `-bg-hover`, crie o `-text-hover`
     no mesmo commit e valide contra o EXTREMO MAIS CLARO do gradiente. */

  /* Primário — tinta (sóbrio, cor principal #313032). CTA padrão da marca. */
  --btn-primary-bg:           var(--gradient-cta);
  --btn-primary-bg-hover:     var(--ip-gradient-ink-soft);
  --btn-primary-text:         var(--ip-neutral-100);
  /* branco puro sobre o stop de 5% (#6b6b6b) = 5.33:1 ✓ AA */
  --btn-primary-text-hover:   var(--ip-white);
  --btn-primary-text-active:  var(--ip-white);
  --btn-primary-shadow:       var(--ip-shadow-md);
  --btn-primary-ring:         var(--color-focus-ring);

  /* Acento — sage / cinza esverdeado (cor de apoio). */
  --btn-accent-bg:         var(--ip-sage-600);
  --btn-accent-bg-hover:   var(--ip-sage-700);
  --btn-accent-text:       var(--ip-white);
  --btn-accent-text-hover: var(--ip-white);   /* sobre sage-700 = 4.82:1 ✓ */

  /* Tinta sólida — alternativa chapada ao primário. */
  --btn-ink-bg:         var(--ip-neutral-900);
  --btn-ink-bg-hover:   var(--ip-neutral-800);
  --btn-ink-text:       var(--ip-neutral-100);
  --btn-ink-text-hover: var(--ip-neutral-100); /* sobre neutral-800 = 9.55:1 ✓ */

  /* Secundário — contorno */
  --btn-secondary-bg:         transparent;
  --btn-secondary-bg-hover:   var(--ip-neutral-50);
  --btn-secondary-border:     var(--ip-stone-500);
  --btn-secondary-text:       var(--ip-neutral-900);
  /* era stone-600 (#7a6f66) = 4.60:1, folga de 0.10 sobre o mínimo.
     stone-700 sobre neutral-50 = 7.50:1 ✓ */
  --btn-secondary-text-hover: var(--ip-stone-700);

  /* Fantasma / texto */
  --btn-ghost-bg-hover:   var(--ip-neutral-100);
  --btn-ghost-text:       var(--ip-neutral-700);
  --btn-ghost-text-hover: var(--ip-neutral-700); /* sobre neutral-100 = 7.10:1 ✓ */

  /* Desabilitado (todas as variações) */
  --btn-disabled-bg:   var(--ip-neutral-200);
  --btn-disabled-text: var(--ip-neutral-400);
  --btn-disabled-opacity: 0.55;  /* @kind other */

  /* Geometria do botão */
  --btn-radius:         var(--ip-radius-full);
  --btn-radius-square:  var(--ip-radius-lg);
  --btn-font:           var(--ip-font-din);
  --btn-weight:         var(--ip-weight-medium);
  --btn-padding-y:      0.75rem;
  --btn-padding-x:      1.5rem;
  --btn-padding-y-sm:   0.5rem;
  --btn-padding-x-sm:   1rem;
  --btn-padding-y-lg:   1rem;
  --btn-padding-x-lg:   2rem;
  --btn-gap:            0.5rem;

  /* Tracking por tamanho (DS Botão: sm .01em · md .005em · lg 0) */
  --btn-tracking-sm:    0.01em;
  --btn-tracking-md:    0.005em;
  --btn-tracking-lg:    0;

  /* Cores de área — sotaque do botão. Cada modificador .button--area-<nome>
     define estes três; o texto é escolhido para passar WCAG AA (ver README):
       --btn-area-color:        cor da área (preenchimento / borda)
       --btn-area-text:         texto no botão PREENCHIDO (tinta p/ áreas claras)
       --btn-area-outline-text: texto no botão de CONTORNO sobre branco */
  --btn-area-color:        var(--ip-sage-600);
  --btn-area-text:         var(--ip-white);
  --btn-area-outline-text: var(--ip-neutral-900);
  --btn-area-hover-bright: 0.94;   /* DS Button.jsx: hover de preenchido = brightness(.94) */

  /* ---------------- INPUT / CAMPOS ---------------- */
  --input-bg:             var(--ip-white);
  --input-bg-disabled:    var(--ip-neutral-100);
  --input-text:           var(--ip-neutral-900);
  --input-placeholder:    var(--ip-neutral-400);
  --input-border:         var(--ip-neutral-200);   /* #d9d9d9 */
  --input-border-hover:   var(--ip-stone-400);
  --input-border-focus:   var(--ip-sage-600);
  --input-border-error:   var(--ip-red-500);
  --input-ring-focus:     rgba(129,136,117,0.28);
  --input-radius:         var(--ip-radius-md);      /* 13px */
  --input-padding-y:      0.75rem;
  --input-padding-x:      1rem;
  --input-font:           var(--ip-font-din);
  --input-shadow:         inset 0 0 0 1px var(--input-border);
  --input-shadow-focus:   inset 0 0 0 2px var(--input-border-focus), 0 0 0 3px var(--input-ring-focus);

  /* ---------------- ANEL DE FOCO (INS-044) ----------------
     Vários campos zeram o outline para desenhar a própria moldura e ficavam
     SEM substituto: quem navega por teclado tinha indicador nos botões e
     perdia nos campos (busca do catálogo, busca do megamenu, formulários).
     Estes dois tokens são o substituto padrão. Escolha pelo fundo ADJACENTE
     ao campo, não pelo fundo do campo:
       …-on-light  campo sobre superfície clara (sage-600 = 3.68:1 no branco)
       …-on-dark   campo sobre header/hero escuro (sage-300 = 7.10:1 na tinta)
     São 2px sólidos + halo: 1px não cumpre o perímetro mínimo do WCAG 2.4.11.
     Sempre em :focus-visible (não :focus), p/ não piscar o anel no clique. */
  --focus-ring-on-light:   var(--ip-sage-600);
  --focus-ring-on-dark:    var(--ip-sage-300);
  --focus-shadow-on-light: inset 0 0 0 2px var(--focus-ring-on-light), 0 0 0 3px var(--input-ring-focus);
  --focus-shadow-on-dark:  inset 0 0 0 2px var(--focus-ring-on-dark), 0 0 0 3px rgba(255, 255, 255, 0.22);

  /* ---------------- CARD ---------------- */
  --card-bg:            var(--ip-white);
  --card-bg-inverse:    var(--ip-neutral-800);
  --card-border:        var(--ip-neutral-200);
  --card-radius:        var(--ip-radius-xl);        /* 28px */
  --card-radius-sm:     var(--ip-radius-md);
  --card-padding:       var(--ip-space-8);
  --card-shadow:        var(--ip-shadow-md);
  --card-shadow-hover:  var(--ip-shadow-lg);

  /* ---------------- BADGE / TAG ---------------- */
  --badge-radius:       var(--ip-radius-full);
  --badge-font:         var(--ip-font-din);
  --badge-weight:       var(--ip-weight-medium);
  --badge-padding-y:    0.25rem;
  --badge-padding-x:    0.75rem;
  --badge-neutral-bg:   var(--ip-neutral-100);
  --badge-neutral-text: var(--ip-neutral-700);
  --badge-brand-bg:     var(--ip-sage-50);
  --badge-brand-text:   var(--ip-sage-800);

  /* ---------------- NAV / HEADER ---------------- */
  --nav-bg:           var(--ip-neutral-900);
  --nav-text:         var(--ip-neutral-100);
  --nav-text-hover:   var(--ip-white);
  --nav-height:       80px;
  /* Header transparente sobre o hero → sólido ao rolar (ver _header.css +
     theme-overrides.css §Header). #313032 = tinta/ink do MIV. */
  --nav-bg-solid:     var(--ip-neutral-900);            /* #313032 tinta */
  --nav-shadow:       0 6px 24px rgba(0, 0, 0, 0.18);
  --nav-text-idle:    rgba(255, 255, 255, 0.78);        /* link inativo */
  --nav-text-active:  var(--ip-white);                  /* link ativo */
  --nav-underline:    var(--ip-sage-300);               /* sublinhado do ativo */

  /* ---------------- AVATAR ---------------- */
  --avatar-radius:    var(--ip-radius-full);
  --avatar-ring:      var(--ip-neutral-200);

  /* ---------------- TOOLTIP / DIALOG ---------------- */
  --tooltip-bg:       var(--ip-neutral-900);
  --tooltip-text:     var(--ip-neutral-100);
  --tooltip-radius:   var(--ip-radius-sm);
  --dialog-bg:        var(--ip-white);
  --dialog-radius:    var(--ip-radius-xl);
  --dialog-shadow:    var(--ip-shadow-xl);
  --dialog-scrim:     rgba(49,48,50,0.55);

  /* ---------------- SCROLL AREA ---------------- */
  /* Barra de rolagem do DS (painéis com overflow). O thumb é uma pílula que
     "flutua" dentro da pista transparente; sem setas. */
  --scroll-size:        10px;  /* largura da calha (thumb visível = size - 2×inset) */
  --scroll-inset:       3px;   /* respiro entre o thumb e a borda do contêiner */
  --scroll-thumb:       var(--ip-neutral-300);
  --scroll-thumb-hover: var(--ip-neutral-400);
  --scroll-track:       transparent;
}
/* ============================================================
   LMS — tokens de componente (camada 3, só do LMS)
   Vêm do projeto de design "Cursos Gratuitos Inspirali Pós"
   (arquivo lms-tokens.css). Todos apontam para tokens do DS.
   NÃO ficam em css/tokens/: aquela pasta é cópia do site e não
   pode divergir. Carregar DEPOIS dos tokens do DS.
   ============================================================ */
:root {
  /* Layout */
  --lms-gutter:          clamp(16px, 4vw, 64px);
  --lms-content:         1312px;
  --lms-wide:            1440px;
  --lms-header-h:        64px;

  /* Acento do curso: definido por curso (ver .lms-area-*) */
  --lms-course-accent:        var(--ip-area-coracao);       /* preenchimento */
  --lms-course-accent-text:   var(--ip-area-coracao-text);  /* texto/ícone sobre claro, ≥4.6:1 */

  /* Progresso */
  --lms-progress-track:       var(--color-surface-sunken);
  --lms-progress-fill:        var(--lms-course-accent);
  --lms-progress-height:      var(--ip-space-2);
  --lms-progress-height-sm:   6px;
  --lms-progress-radius:      var(--ip-radius-full);
  --lms-progress-done:        var(--color-success);

  /* Player */
  --lms-player-bg:            var(--color-bg-inverse);
  --lms-player-radius:        var(--card-radius);            /* 28 desktop */
  --lms-player-radius-sm:     var(--ip-radius-lg);           /* 20 mobile */
  --lms-player-text:          var(--color-text-inverse-muted);

  /* Item de aula */
  --lms-lesson-radius:        var(--input-radius);           /* 13 */
  --lms-lesson-min-height:    52px;                          /* >= --ip-tap-min */
  --lms-lesson-bg-hover:      var(--color-surface-subtle);
  --lms-lesson-current-bg:    var(--color-secondary-subtle);
  --lms-lesson-icon-done:     var(--color-success);
  --lms-lesson-icon-current:  var(--lms-course-accent-text);
  --lms-lesson-icon-idle:     var(--color-text-muted);

  /* Sheet / drawer mobile */
  --lms-sheet-bg:             var(--dialog-bg);
  --lms-sheet-radius:         var(--card-radius);
  --lms-sheet-shadow:         var(--elevation-modal);
  --lms-sheet-scrim:          var(--dialog-scrim);
  --lms-sheet-handle:         var(--color-border-strong);

  /* Toast */
  --lms-toast-bg:             var(--tooltip-bg);
  --lms-toast-text:           var(--tooltip-text);
  --lms-toast-radius:         var(--ip-radius-lg);
  --lms-toast-shadow:         var(--elevation-overlay);

  /* Skeleton */
  --lms-skeleton-bg:          var(--color-surface-sunken);
  --lms-skeleton-bg-inverse:  var(--color-surface-inverse);

  /* Chip de filtro */
  --lms-chip-bg:              var(--color-surface);
  --lms-chip-bg-selected:     var(--color-primary);
  --lms-chip-text:            var(--color-text);
  --lms-chip-text-selected:   var(--color-primary-contrast);
  --lms-chip-border:          var(--color-border);
  --lms-chip-height:          var(--ip-tap-min);

  /* Certificado */
  --lms-cert-bg:              var(--color-surface);
  --lms-cert-ink:             var(--color-text);
  --lms-cert-rule:            var(--color-border);
  --lms-cert-shape:           var(--color-accent-subtle);
}

@media (min-width: 768px) {
  :root { --lms-header-h: 80px; }
}

/* Troca do acento por área (classe no wrapper do curso, no card ou na tag) */
.lms-area-crianca    { --lms-course-accent: var(--ip-area-crianca);    --lms-course-accent-text: var(--ip-area-crianca-text); }
.lms-area-imagem     { --lms-course-accent: var(--ip-area-imagem);     --lms-course-accent-text: var(--ip-area-imagem-text); }
.lms-area-mulher     { --lms-course-accent: var(--ip-area-mulher);     --lms-course-accent-text: var(--ip-area-mulher-text); }
.lms-area-coracao    { --lms-course-accent: var(--ip-area-coracao);    --lms-course-accent-text: var(--ip-area-coracao-text); }
.lms-area-pele       { --lms-course-accent: var(--ip-area-pele);       --lms-course-accent-text: var(--ip-area-pele-text); }
.lms-area-metabolica { --lms-course-accent: var(--ip-area-metabolica); --lms-course-accent-text: var(--ip-area-metabolica-text); }
.lms-area-digestiva  { --lms-course-accent: var(--ip-area-digestiva);  --lms-course-accent-text: var(--ip-area-digestiva-text); }
.lms-area-idoso      { --lms-course-accent: var(--ip-area-idoso);      --lms-course-accent-text: var(--ip-area-idoso-text); }
.lms-area-gestao     { --lms-course-accent: var(--ip-area-gestao);     --lms-course-accent-text: var(--ip-area-gestao-text); }
.lms-area-clinica    { --lms-course-accent: var(--ip-area-clinica);    --lms-course-accent-text: var(--ip-area-clinica-text); }
.lms-area-mental     { --lms-course-accent: var(--ip-area-mental);     --lms-course-accent-text: var(--ip-area-mental-text); }

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Elementos HTML crus. Diferente do site, o elemento button NÃO é estilizado
   aqui: botão de interface nasce limpo, e CTA usa a classe .ip-btn. Evita a
   armadilha do site (sombra/padding herdados em todo button). */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--type-body-md-font);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ip-space-4);
  color: var(--color-text);
  font-family: var(--ip-font-museo);
  font-weight: var(--ip-weight-bold);
  line-height: 1.1;
}
h1 { font-size: var(--type-h1-size); letter-spacing: var(--type-h1-tracking); }
h2 { font-size: var(--type-h2-size); letter-spacing: var(--type-h2-tracking); }

p, ul, ol { margin: 0 0 var(--ip-space-4); }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

img { max-width: 100%; height: auto; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* O atributo hidden vence o display dos componentes (o JS do LMS alterna
   estados de tela com hidden). */
[hidden] { display: none !important; }

/* Botão de ação (CTA) do design system. Usar em a ou button:
   class="ip-btn ip-btn--primary" · variações: --primary --accent --secondary --ghost --on-dark
   tamanhos: --sm --lg · largura total: --block · valores vêm de tokens/_components.css */

.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--ip-tap-min);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--btn-font);
  font-size: 1rem;
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking-md);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
}
.ip-btn:hover { filter: brightness(.94); }
.ip-btn:active { transform: scale(.975); }
.ip-btn:focus-visible { outline: 2px solid var(--btn-primary-ring); outline-offset: 2px; }

.ip-btn--sm { padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); font-size: .875rem; letter-spacing: var(--btn-tracking-sm); }
.ip-btn--lg { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg); font-size: 1.125rem; letter-spacing: var(--btn-tracking-lg); }

.ip-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--btn-primary-shadow); }
.ip-btn--primary:hover { color: var(--btn-primary-text-hover); }
.ip-btn--accent { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.ip-btn--accent:hover { background: var(--btn-accent-bg-hover); color: var(--btn-accent-text-hover); filter: none; }
.ip-btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); box-shadow: inset 0 0 0 1.5px var(--btn-secondary-border); }
.ip-btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text-hover); filter: none; }
.ip-btn--ghost { background: transparent; color: var(--btn-ghost-text); }
.ip-btn--ghost:hover { background: var(--btn-ghost-bg-hover); filter: none; }
/* Pílula clara sobre fundo escuro (DS Button variant="onDark"). */
.ip-btn--on-dark { background: var(--color-surface); color: var(--color-text); }
.ip-btn--on-dark:hover { background: var(--color-primary-subtle); color: var(--color-text); box-shadow: var(--ip-shadow-sm); filter: none; }
.ip-btn--on-dark:focus-visible { outline-color: var(--focus-ring-on-dark); }

.ip-btn--block { width: 100%; }
.ip-btn .ph, .ip-btn .ph-fill { font-size: 1.15em; }

.ip-btn:disabled, .ip-btn[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  opacity: var(--btn-disabled-opacity);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  transform: none;
}
/* Casca da aplicação: contêineres, cabeçalho, menus e rodapé do LMS.
   Desenho: "Cursos Gratuitos Inspirali Pós — Protótipo" (cabeçalho escuro,
   80px no desktop / 64px no mobile). Comportamento dos menus em js/lms.js. */

.lms-container {
  width: 100%;
  max-width: calc(var(--lms-content) + 2 * var(--lms-gutter));
  margin-inline: auto;
  padding-inline: var(--lms-gutter);
}
.lms-container--wide {
  max-width: var(--lms-wide);
  padding-inline: clamp(12px, 3vw, 64px);
}

.lms-main { flex: 1; }
.lms-body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Cabeçalho ---------- */
.lms-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  color: var(--nav-text);
}
.lms-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--lms-header-h);
  padding: 0 8px 0 16px;
}
.lms-header__start { display: flex; align-items: center; gap: 48px; }
.lms-header__logo { display: flex; }
.lms-header__logo img { display: block; width: auto; height: 28px; }
.lms-header__end { display: flex; align-items: center; gap: 20px; }

.lms-nav { display: none; gap: 32px; font-size: 1rem; font-weight: var(--ip-weight-medium); }
.lms-nav__link {
  padding: 0 0 6px;
  color: var(--nav-text-idle);
  text-decoration: none;
  white-space: nowrap;
}
.lms-nav__link:hover { color: var(--nav-text-active); }
.lms-nav__link[aria-current="page"] {
  color: var(--nav-text-active);
  box-shadow: inset 0 -2px 0 var(--nav-underline);
}

.lms-header__action {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ip-tap-min);
  padding: 0 12px;
  color: var(--nav-text);
  font-size: .9375rem;
  font-weight: var(--ip-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.lms-header__action:hover { color: var(--nav-text-hover); }
.lms-header__action .ph { font-size: 20px; }
.lms-header__action[aria-current="page"] { color: var(--nav-text-active); box-shadow: inset 0 -2px 0 var(--nav-underline); }
.lms-header__action--desk { display: none; }

.lms-header__avatar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ip-tap-min);
  height: var(--ip-tap-min);
}

.lms-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ip-tap-min);
  height: var(--ip-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--nav-text);
  cursor: pointer;
}
.lms-header__icon-btn .ph { font-size: 26px; }
.lms-header :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Botão da conta (desktop) */
.lms-account { position: relative; display: none; }
.lms-account__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ip-tap-min);
  padding: 0 4px;
  border: 0;
  border-radius: var(--ip-radius-full);
  background: none;
  color: var(--nav-text);
  cursor: pointer;
}
.lms-account__btn[aria-expanded="true"] { box-shadow: var(--focus-shadow-on-dark); }
.lms-account__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--ip-radius-lg);
  background: var(--dialog-bg);
  box-shadow: var(--elevation-overlay);
}
.lms-account__menu[hidden] { display: none; }
.lms-account__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.lms-account__name { color: var(--color-text); font-size: 1rem; font-weight: var(--ip-weight-medium); }
.lms-account__email { color: var(--color-text-muted); font-size: .875rem; overflow-wrap: anywhere; }
.lms-account__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ip-tap-min);
  padding: 0 16px;
  border-radius: var(--input-radius);
  color: var(--color-text);
  font-size: 1rem;
  text-decoration: none;
}
.lms-account__item:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.lms-account__item .ph { font-size: 20px; }
.lms-account__item--out { margin-top: 4px; border-top: 1px solid var(--color-border-subtle); color: var(--color-link); }
.lms-account :focus-visible { outline-color: var(--color-focus-ring); }

/* Menu mobile */
.lms-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 24px;
  background: var(--nav-bg);
  box-shadow: var(--elevation-overlay);
}
.lms-mobile-menu[hidden] { display: none; }
.lms-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-bottom: 1px solid var(--color-border-inverse);
  color: var(--nav-text);
  font-size: 1.125rem;
  font-weight: var(--ip-weight-medium);
  text-decoration: none;
}
.lms-mobile-menu__link:last-child { border-bottom: 0; }
.lms-mobile-menu__link:hover,
.lms-mobile-menu__link[aria-current="page"] { color: var(--nav-text-active); }

@media (min-width: 768px) {
  .lms-header__bar { padding: 0 var(--lms-gutter); }
  .lms-header__logo img { height: 36px; }
  .lms-nav { display: flex; }
  .lms-header__action { font-size: 1rem; }
  .lms-header__action--desk { display: flex; }
  .lms-header__mob { display: none; }
  .lms-account { display: block; }
  .lms-mobile-menu { display: none; }
}

/* Rodapé: igual ao do site (.footer-ip, em _site.css). */

/* Link de pular para o conteúdo */
.lms-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--input-radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.lms-skip:focus { top: 12px; }
/* Componentes de interface do LMS, espelhando o DS (Tag, Avatar, Alert,
   Input) e os componentes próprios do protótipo (progresso, chip, card de
   curso, item de aula, toast, diálogo, sheet, skeleton). */

/* ---------- Tipografia de tela ---------- */
.lms-eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: var(--ip-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lms-display,
.lms-h1,
.lms-h2,
.lms-h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--ip-font-museo);
  font-weight: var(--ip-weight-bold);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: pretty;
}
.lms-display { font-size: clamp(2.25rem, 5vw, 4rem); }
.lms-h1 { font-size: clamp(1.875rem, 3.4vw, 3rem); }
.lms-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.lms-h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.lms-lead {
  margin: 0;
  color: var(--color-text-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.lms-muted { color: var(--color-text-muted); font-size: .875rem; }
.lms-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-size: 1rem;
  font-weight: var(--ip-weight-medium);
  text-decoration: none;
  cursor: pointer;
}
.lms-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.lms-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Trilha ---------- */
.lms-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  color: var(--color-text-muted);
  font-size: .875rem;
}
.lms-crumbs a { display: inline-flex; align-items: center; min-height: 40px; color: var(--color-link); text-decoration: none; }
.lms-crumbs a:hover { text-decoration: underline; }

/* ---------- Superfícies ---------- */
.lms-surface {
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.lms-ink {
  border-radius: clamp(28px, 3vw, 40px);
  background: var(--gradient-ink);
  color: var(--color-text-inverse);
}
.lms-ink :focus-visible { outline-color: var(--focus-ring-on-dark); }
.lms-ink__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-text-inverse);
  font-size: .75rem;
  font-weight: var(--ip-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lms-ink__kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--ip-radius-full);
  background: var(--lms-course-accent);
}
.lms-ink .lms-display,
.lms-ink .lms-h1,
.lms-ink .lms-h2 { color: var(--color-text-on-brand); }
.lms-ink .lms-lead { color: var(--color-text-inverse); }

/* ---------- Tag de área (DS Tag, variante on-white) ---------- */
.lms-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: var(--ip-radius-full);
  color: var(--lms-course-accent-text);
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: var(--ip-text-sm);
  font-weight: var(--ip-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.lms-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Avatar (DS Avatar: foto ou iniciais) ---------- */
.lms-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  background: var(--ip-stone-200);
  color: var(--ip-stone-700);
  font-family: var(--ip-font-din);
  font-size: 18px;
  font-weight: var(--ip-weight-bold);
  line-height: 1;
}
.lms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lms-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.lms-avatar--40 { width: 40px; height: 40px; font-size: 15px; }
.lms-avatar--56 { width: 56px; height: 56px; font-size: 21px; }
.lms-avatar--96 { width: 96px; height: 96px; font-size: 36px; }

/* ---------- Alert (DS Alert) ---------- */
.lms-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--ip-radius-md);
  background: var(--color-info-subtle);
  --lms-alert-fg: var(--color-info);
}
.lms-alert--success { background: var(--color-success-subtle); --lms-alert-fg: var(--color-success); }
.lms-alert--error { background: var(--color-error-subtle); --lms-alert-fg: var(--color-error); }
.lms-alert--warning { background: var(--color-warning-subtle); --lms-alert-fg: var(--color-warning); }
.lms-alert__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ip-radius-full);
  background: var(--lms-alert-fg);
  color: var(--color-text-on-brand);
  font-size: 14px;
}
.lms-alert__body { display: flex; flex-direction: column; gap: 2px; }
.lms-alert__title { color: var(--color-text); font-size: var(--ip-text-base); }
.lms-alert__text { color: var(--color-text-body); font-size: var(--ip-text-sm); line-height: 1.5; }
.lms-alert[hidden] { display: none; }

/* ---------- Campo (DS Input) ---------- */
.lms-field { display: flex; flex-direction: column; gap: .375rem; }
.lms-field__label { color: var(--color-text); font-size: var(--ip-text-sm); font-weight: var(--ip-weight-medium); }
.lms-field__input {
  width: 100%;
  min-height: var(--ip-tap-min);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 0;
  border-radius: var(--input-radius);
  background: var(--input-bg);
  box-shadow: var(--input-shadow);
  color: var(--input-text);
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  transition: box-shadow .16s ease;
}
.lms-field__input::placeholder { color: var(--input-placeholder); }
.lms-field__input:hover { box-shadow: inset 0 0 0 1px var(--input-border-hover); }
.lms-field__input:focus { outline: none; box-shadow: var(--input-shadow-focus); }
.lms-field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--input-border-error); }
.lms-field__hint { color: var(--color-text-muted); font-size: var(--ip-text-sm); }
.lms-field__hint--error { color: var(--color-error); }

/* ---------- Barra de progresso ---------- */
.lms-progress {
  height: var(--lms-progress-height);
  overflow: hidden;
  border-radius: var(--lms-progress-radius);
  background: var(--lms-progress-track);
}
.lms-progress--sm { height: var(--lms-progress-height-sm); }
.lms-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--lms-progress-fill);
  transition: width .3s ease;
}
.lms-progress[data-completo="true"] .lms-progress__fill { background: var(--lms-progress-done); }

/* ---------- Chip de filtro ---------- */
.lms-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-inline: calc(-1 * var(--lms-gutter));
  padding: 0 var(--lms-gutter) 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .lms-chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}
.lms-chip {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: var(--lms-chip-height);
  padding: 0 18px;
  border: 0;
  border-radius: var(--ip-radius-full);
  background: var(--lms-chip-bg);
  box-shadow: inset 0 0 0 1px var(--lms-chip-border);
  color: var(--lms-chip-text);
  font-size: .9375rem;
  font-weight: var(--ip-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}
.lms-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ip-radius-full);
  background: var(--lms-course-accent);
}
.lms-chip--todas::before { background: currentColor; }
.lms-chip[aria-pressed="true"] { background: var(--lms-chip-bg-selected); box-shadow: none; color: var(--lms-chip-text-selected); }
.lms-chip:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.lms-chip[aria-pressed="true"]:hover { box-shadow: none; }

/* ---------- Grade de cards ---------- */
.lms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.lms-grid--sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---------- Card de curso (estados: none | progress | done) ---------- */
.lms-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 28px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--color-text-body);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lms-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); color: var(--color-text-body); }
.lms-card[hidden] { display: none; }
.lms-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lms-card__free { color: var(--color-text-muted); font-size: .875rem; }
.lms-card__title { margin: 0; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 1.5rem; font-weight: var(--ip-weight-bold); line-height: 1.1; text-wrap: pretty; }
.lms-card__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; }
.lms-card__meta span, .lms-card__cert, .lms-card__cta, .lms-card__done { display: flex; align-items: center; gap: 6px; }
.lms-card__meta .ph { font-size: 18px; }
.lms-card__teacher { display: flex; align-items: center; gap: 10px; margin-top: auto; color: var(--color-text); font-size: .875rem; }
.lms-card__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}
.lms-card__foot--none { flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; }
.lms-card__cert { color: var(--color-text-muted); font-size: .875rem; }
.lms-card__cert .ph { font-size: 18px; }
.lms-card__cta { color: var(--color-link); font-size: 1rem; font-weight: var(--ip-weight-medium); }
.lms-card__stats { display: flex; justify-content: space-between; font-size: .875rem; }
.lms-card__stats span:first-child { color: var(--color-text); }
.lms-card__stats span:last-child { color: var(--color-text-muted); }
.lms-card__done { color: var(--color-success); font-size: .875rem; font-weight: var(--ip-weight-medium); }
.lms-card__done .ph-fill { font-size: 20px; }
.lms-card .ip-btn { pointer-events: none; }
.lms-card:not([data-estado="none"]) .lms-card__foot--none,
.lms-card:not([data-estado="progress"]) .lms-card__foot--progress,
.lms-card:not([data-estado="done"]) .lms-card__foot--done { display: none; }

.lms-card--skeleton { gap: 16px; pointer-events: none; }
.lms-skel { display: block; border-radius: 6px; background: var(--lms-skeleton-bg); }

/* ---------- Item de aula ---------- */
.lms-lessons { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lms-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--lms-lesson-min-height);
  padding: 6px 12px;
  border-radius: var(--lms-lesson-radius);
  color: var(--color-text);
  text-decoration: none;
}
.lms-lesson:hover { background: var(--lms-lesson-bg-hover); color: var(--color-text); }
.lms-lesson[aria-current="true"],
.lms-lesson[aria-current="page"] { background: var(--lms-lesson-current-bg); }
.lms-lesson__icon { flex-shrink: 0; color: var(--lms-lesson-icon-idle); font-size: 22px; }
.lms-lesson[data-estado="done"] .lms-lesson__icon { color: var(--lms-lesson-icon-done); }
.lms-lesson[data-estado="current"] .lms-lesson__icon { color: var(--lms-lesson-icon-current); }
.lms-lesson__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.lms-lesson__title { font-size: .9375rem; line-height: 1.35; }
.lms-lesson[data-estado="current"] .lms-lesson__title { font-weight: var(--ip-weight-medium); }
.lms-lesson__meta { color: var(--color-text-muted); font-size: .875rem; line-height: 1.4; }

/* Exercício como etapa (D16) e etapa bloqueada (curso em sequência). */
.lms-lesson--exercicio { padding-left: 24px; }
.lms-lesson--exercicio .lms-lesson__title { font-size: .875rem; }
.lms-lesson[data-estado="locked"] { color: var(--color-text-muted); cursor: not-allowed; }
.lms-lesson[data-estado="locked"]:hover { background: transparent; color: var(--color-text-muted); }
.lms-lesson[data-estado="locked"] .lms-lesson__icon { color: var(--color-text-muted); }

/* Aulas agrupadas por módulo (coluna `modulo` de lms_aulas; macro lms.aulas). */
.lms-modulos { display: flex; flex-direction: column; gap: 14px; }
.lms-modulo__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; padding: 0 12px; font-family: var(--ip-font-din); font-size: .9375rem; font-weight: var(--ip-weight-medium); line-height: 1.3; }
.lms-modulo__num { flex-basis: 100%; color: var(--area-text, var(--color-text-muted)); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lms-modulo__nome { color: var(--color-text); }
.lms-modulo__meta { color: var(--color-text-muted); font-size: .8125rem; font-weight: 400; }

/* Variante em linha (página do curso, desktop): título e meta lado a lado */
.lms-lessons--row .lms-lesson { gap: 14px; min-height: 56px; padding: 6px clamp(10px, 1.4vw, 16px); }
.lms-lessons--row .lms-lesson__title { font-size: clamp(.9375rem, 1.2vw, 1rem); line-height: 1.4; }
@media (min-width: 768px) {
  .lms-lessons--row .lms-lesson__body { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .lms-lessons--row .lms-lesson__meta { white-space: nowrap; }
}

/* ---------- Toast ---------- */
.lms-toasts {
  position: fixed;
  z-index: 60;
  bottom: 16px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .lms-toasts { bottom: 24px; left: 24px; right: auto; }
}
.lms-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  min-height: 64px;
  padding: 10px 10px 10px 20px;
  border-radius: var(--lms-toast-radius);
  background: var(--lms-toast-bg);
  box-shadow: var(--lms-toast-shadow);
  color: var(--lms-toast-text);
  pointer-events: auto;
}
.lms-toast > .ph, .lms-toast > .ph-fill { flex-shrink: 0; color: var(--color-text-inverse); font-size: 24px; }
.lms-toast__msg { flex: 1; font-size: 1rem; line-height: 1.4; }
.lms-toast__act {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--ip-radius-full);
  background: transparent;
  color: var(--color-text-on-brand);
  font-size: .9375rem;
  font-weight: var(--ip-weight-medium);
  text-decoration: underline;
  cursor: pointer;
}
.lms-toast--error .lms-toast__act { background: var(--card-bg-inverse); text-decoration: none; }
.lms-toast__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-inverse);
  cursor: pointer;
}
.lms-toast :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* ---------- Diálogo (sessão expirada) ---------- */
.lms-dialog {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--lms-sheet-scrim);
}
.lms-dialog[hidden] { display: none; }
.lms-dialog__box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
  padding: 32px;
  border-radius: var(--dialog-radius);
  background: var(--dialog-bg);
  box-shadow: var(--dialog-shadow);
}
.lms-dialog__box > .ph { color: var(--color-text); font-size: 32px; }
.lms-dialog__title { margin: 0; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 1.5rem; font-weight: var(--ip-weight-bold); line-height: 1.1; }
.lms-dialog__text { margin: 0; font-size: 1rem; line-height: 1.6; }
.lms-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* ---------- Sheet (lista de aulas no mobile) ---------- */
.lms-sheet { position: fixed; z-index: 40; inset: 0; }
.lms-sheet[hidden] { display: none; }
.lms-sheet__scrim { position: absolute; inset: 0; background: var(--lms-sheet-scrim); }
.lms-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 78%;
  border-radius: var(--lms-sheet-radius) var(--lms-sheet-radius) 0 0;
  background: var(--lms-sheet-bg);
  box-shadow: var(--lms-sheet-shadow);
}
.lms-sheet__handle { display: flex; justify-content: center; padding: 10px 0 4px; }
.lms-sheet__handle span { width: 40px; height: 4px; border-radius: var(--ip-radius-full); background: var(--lms-sheet-handle); }
.lms-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 10px 24px; }
.lms-sheet__title { margin: 0; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 1.25rem; font-weight: var(--ip-weight-bold); line-height: 1.1; }
.lms-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ip-tap-min);
  height: var(--ip-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 22px;
  cursor: pointer;
}
.lms-sheet .lms-progress { margin: 0 24px 8px; }
.lms-sheet__list { flex: 1; overflow-y: auto; padding: 4px 12px 24px; }

@media (prefers-reduced-motion: reduce) {
  .lms-card, .lms-progress__fill { transition: none; }
  .lms-card:hover { transform: none; }
}
/* Telas do LMS. Cada bloco é escopado pela classe raiz do módulo
   (.lms-catalogo, .lms-curso, .lms-aula …) ou do template (.lms-auth). */

/* ============ Catálogo ============ */
/* Modelo da listagem de eventos do site: .ip-evl-* em _site.css. */

/* ============ Página do curso ============ */
/* Modelo da página de evento do site: .ip-evento* em _site.css. */

/* ============ Autenticação (login, criar senha, esqueci, redefinir, inscrição) ============ */
.lms-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: var(--lms-wide);
  min-height: clamp(560px, 50vw, 720px);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 40px) clamp(12px, 4vw, 64px) clamp(48px, 6vw, 64px);
}
.lms-auth__panel {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 64px;
  border-radius: 40px;
}
.lms-auth__claim { margin: 0; color: var(--color-text-on-brand); font-family: var(--ip-font-museo); font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: var(--ip-weight-bold); line-height: 1.1; }
.lms-auth__panel .lms-eyebrow { color: var(--color-text-inverse-muted); }
.lms-auth__perks { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.lms-auth__perks li { display: flex; align-items: center; gap: 14px; color: var(--color-text-inverse); font-size: 1.125rem; }
.lms-auth__perks .ph { font-size: 24px; }
.lms-auth__side { display: flex; align-items: center; justify-content: center; padding: clamp(16px, 2vw, 24px) 4px; }
.lms-auth__box { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 440px; }
.lms-auth__head { display: flex; flex-direction: column; gap: 10px; }
.lms-auth__head .lms-h1 { font-size: clamp(1.875rem, 3vw, 2.5rem); }
.lms-auth__head .lms-lead { font-size: clamp(1rem, 1.4vw, 1.125rem); }
.lms-auth__alt { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }
.lms-auth__alt p, .lms-auth__foot { margin: 0; font-size: .9375rem; line-height: 1.6; }
.lms-auth__foot .lms-link { font-size: .9375rem; }
@media (min-width: 768px) {
  .lms-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lms-auth__panel { display: flex; }
}

/* Formulários gerados pela HubSpot (tags de membership e @hubspot/form).
   A marcação não é nossa: estilizamos por descendência dentro de .lms-auth__form.
   Conferir na sandbox a cada mudança de versão dos formulários. */
.lms-auth__form form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.lms-auth__form fieldset { max-width: none !important; margin: 0; padding: 0; border: 0; }
.lms-auth__form .hs-form-field,
.lms-auth__form .hs-form-field > div { display: flex; flex-direction: column; gap: .375rem; }
.lms-auth__form label { color: var(--color-text); font-size: var(--ip-text-sm); font-weight: var(--ip-weight-medium); }
.lms-auth__form input[type="email"],
.lms-auth__form input[type="password"],
.lms-auth__form input[type="text"],
.lms-auth__form input[type="tel"],
.lms-auth__form select {
  width: 100% !important;
  min-height: var(--ip-tap-min);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 0;
  border-radius: var(--input-radius);
  background: var(--input-bg);
  box-shadow: var(--input-shadow);
  color: var(--input-text);
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
}
.lms-auth__form input:focus,
.lms-auth__form select:focus { outline: none; box-shadow: var(--input-shadow-focus); }
.lms-auth__form input.invalid,
.lms-auth__form input.error { box-shadow: inset 0 0 0 1px var(--input-border-error); }
.lms-auth__form input[type="checkbox"] { width: 20px; height: 20px; margin: 0 8px 0 0; accent-color: var(--color-primary); vertical-align: middle; }
/* Listas que a HubSpot põe nos formulários: opções e consentimento
   (ul.inputs-list), mensagens do membership (ul.no-list, vazias até haver
   aviso) e erros. Sem marcador nem recuo. */
.lms-auth__form ul,
.lms-auth__form li { list-style: none; }
.lms-auth__form ul { margin: 0; padding: 0; }
/* Caixa de seleção ao lado do texto: o texto que quebra fica alinhado ao
   próprio início, não embaixo da caixa. */
.lms-auth__form .hs-form-booleancheckbox-display,
.lms-auth__form .hs-form-checkbox-display { display: flex; align-items: flex-start; gap: 10px; }
.lms-auth__form .hs-form-booleancheckbox-display input[type="checkbox"],
.lms-auth__form .hs-form-checkbox-display input[type="checkbox"] { flex-shrink: 0; margin: 1px 0 0; }
.lms-auth__form .hs-error-msgs,
.lms-auth__form .hs-error-msg,
.lms-auth__form .form-input-validation-message { margin: 0; padding: 0; color: var(--color-error); font-size: var(--ip-text-sm); list-style: none; }
.lms-auth__form .legal-consent-container,
.lms-auth__form .hs-richtext { color: var(--color-text-muted); font-size: .875rem; line-height: 1.5; }
.lms-auth__form a { color: var(--color-link); font-size: .9375rem; font-weight: var(--ip-weight-medium); }
.lms-auth__form #hs_login_reset { align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; }
.lms-auth__form input[type="submit"],
.lms-auth__form button[type="submit"],
.lms-auth__form .hs-button {
  width: 100%;
  min-height: var(--ip-tap-min);
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: var(--btn-primary-text);
  font-family: var(--btn-font);
  font-size: 1.125rem;
  font-weight: var(--btn-weight);
  cursor: pointer;
}
.lms-auth__form input[type="submit"]:hover,
.lms-auth__form .hs-button:hover { filter: brightness(.94); color: var(--btn-primary-text-hover); }
.lms-auth__form .submitted-message,
.lms-auth__form .hs-form__thankyou-message { padding: 1rem 1.125rem; border-radius: var(--ip-radius-md); background: var(--color-success-subtle); color: var(--color-text); }

/* ============ Aula ============ */
.lms-aula { padding-bottom: clamp(48px, 6vw, 96px); }
.lms-aula .lms-crumbs { padding-inline: 12px; }
.lms-aula__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.lms-aula__main { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 32px); min-width: 0; }
.lms-aula__pad { padding-inline: 16px; }
.lms-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--lms-player-bg);
  box-shadow: var(--ip-shadow-md);
  color: var(--lms-player-text);
}
.lms-player__frame, .lms-player iframe, .lms-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lms-player video { background: var(--lms-player-bg); object-fit: contain; }
.lms-player__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.lms-player__state[hidden] { display: none; }
.lms-player__state--loading { background: var(--lms-skeleton-bg-inverse); pointer-events: none; } /* o toque chega ao <video> embaixo */
.lms-player__state--loading .ph { color: var(--color-text-inverse); font-size: 40px; opacity: .6; }
.lms-player__state--error { background: var(--lms-player-bg); }
.lms-player__state--error > .ph { color: var(--color-text-inverse); font-size: clamp(28px, 3vw, 40px); }
.lms-player__state strong { color: var(--color-text-on-brand); font-family: var(--ip-font-museo); font-size: clamp(1.125rem, 2vw, 1.5rem); }
.lms-player__state span { max-width: 420px; color: var(--color-text-inverse); font-size: clamp(.875rem, 1.3vw, 1rem); line-height: 1.5; }
.lms-player :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Velocidade do vídeo (até 2x), colada embaixo do player: desfaz o gap da coluna. */
.lms-velocidade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  margin-top: calc(12px - clamp(20px, 2.6vw, 32px));
}
.lms-velocidade[hidden] { display: none; }
.lms-velocidade__rotulo { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: .875rem; }
.lms-velocidade__rotulo .ph { font-size: 18px; }
.lms-velocidade__opcoes { display: flex; gap: 4px; }
.lms-velocidade__opcao {
  min-width: var(--lms-chip-height);
  min-height: var(--lms-chip-height);
  padding: 0 10px;
  border: 0;
  border-radius: var(--ip-radius-full);
  background: var(--lms-chip-bg);
  box-shadow: inset 0 0 0 1px var(--lms-chip-border);
  color: var(--lms-chip-text);
  font-size: .875rem;
  font-weight: var(--ip-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.lms-velocidade__opcao:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.lms-velocidade__opcao[aria-pressed="true"] { background: var(--lms-chip-bg-selected); box-shadow: none; color: var(--lms-chip-text-selected); }
/* Celular estreito: o rótulo fica só no ícone (o texto continua para leitor de tela). */
@media (max-width: 419px) {
  .lms-velocidade__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.lms-aula__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.lms-aula__heading { display: flex; flex: 1 1 380px; flex-direction: column; gap: 12px; min-width: 0; }
.lms-aula__tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lms-aula__heading .lms-h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.lms-aula__drawer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--input-radius);
  background: var(--color-surface);
  box-shadow: var(--ip-shadow-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.lms-aula__drawer-btn .ph { font-size: 22px; }
.lms-aula__drawer-btn > span { display: flex; flex: 1; flex-direction: column; gap: 6px; font-size: .875rem; }
.lms-aula__actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 12px; }
.lms-aula__actions > * { flex: 1 1 200px; }
.lms-aula__actions > :last-child { flex-basis: 180px; }
.lms-aula__dica { flex: 1 1 100%; margin: 0; }
.lms-aula__mark[data-feito="true"] { background: transparent; box-shadow: none; color: var(--btn-ghost-text); }
.lms-aula__mark[data-feito="true"]:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-text-hover); }
.lms-aula__mark[data-feito="true"] .ph-fill { color: var(--color-success); }
.lms-aula__mark .ph-circle-notch { animation: lms-spin 1s linear infinite; }
@keyframes lms-spin { to { transform: rotate(360deg); } }

.lms-aula__about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px 48px;
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--color-border-subtle);
}
.lms-aula__about > div { display: flex; flex-direction: column; gap: 12px; }
.lms-aula__text { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; }
.lms-aula__text > :last-child { margin-bottom: 0; }
.lms-material {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--input-radius);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  text-decoration: none;
}
.lms-material:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.lms-material > .ph { font-size: 24px; }
.lms-material > span { display: flex; flex: 1; flex-direction: column; font-size: 1rem; }
.lms-material .ph-download-simple,
.lms-material .ph-arrow-square-out { color: var(--color-link); font-size: 20px; }

/* Exercício de fixação (perguntas no mesmo visual do quiz final). */
.lms-aula__exercicio {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--color-border-subtle);
}
.lms-aula__exercicio-head { display: flex; flex-direction: column; gap: 8px; }
.lms-aula__exercicio-head > * { margin: 0; }
.lms-aula__exercicio .lms-quiz__q[data-estado="certa"] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--color-success); }
.lms-aula__ex-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}
.lms-aula__ex-nav .ip-btn[hidden] { display: none; }

/* Materiais de apoio (tabela lms_materiais, D17): cartão com link e, embaixo, o texto de apoio. */
.lms-materiais { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lms-materiais__item { display: flex; flex-direction: column; gap: 8px; }
.lms-materiais__texto { padding-inline: 16px; color: var(--color-text-body); font-size: .9375rem; line-height: 1.6; }
.lms-materiais__texto > :first-child { margin-top: 0; }
.lms-materiais__texto > :last-child { margin-bottom: 0; }
/* Aula de leitura/material: texto e materiais um embaixo do outro, materiais com mais destaque. */
.lms-aula__about--leitura { grid-template-columns: minmax(0, 1fr); }

/* Aula ao vivo (D17): a transmissão (YouTube/Vimeo na página) e o cartão com a fase. */
.lms-live { display: flex; flex-direction: column; gap: 16px; }
.lms-live[hidden], .lms-live__card[hidden], .lms-live__frame[hidden] { display: none; }
.lms-live__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--lms-player-bg);
  box-shadow: var(--ip-shadow-md);
}
.lms-live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lms-live__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--ip-shadow-md);
}
.lms-live__card .lms-h3 { margin: 0; color: var(--color-text-inverse); }
.lms-live__card .lms-muted { margin: 0; color: var(--color-text-inverse-muted); }
.lms-live__badge { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.lms-live[data-fase="ao_vivo"] .lms-live__badge { color: var(--color-error); }
.lms-live[data-fase="ao_vivo"] .lms-live__badge .ph-fill { animation: lms-pulso 1.6s ease-in-out infinite; }
@keyframes lms-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lms-live__badge .ph-fill { animation: none; } }
.lms-live__acoes { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.lms-live__acoes [hidden] { display: none; }
.lms-live__acoes .ip-btn--ghost { color: var(--color-text-inverse); }
.lms-live__acoes .ip-btn--ghost:hover { background: transparent; color: var(--color-text-inverse); text-decoration: underline; }

.lms-aula__aside { display: none; }
.lms-aula__aside-head { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.lms-aula__aside-title { color: var(--color-text); font-family: var(--ip-font-museo); font-size: 1.25rem; font-weight: var(--ip-weight-bold); line-height: 1.1; text-decoration: none; }
.lms-aula__aside-title:hover { color: var(--color-text); text-decoration: underline; }
.lms-aula__aside-stats { display: flex; justify-content: space-between; font-size: .875rem; }
.lms-aula__aside-stats span:first-child { color: var(--color-text); }
.lms-aula__aside-stats span:last-child { color: var(--color-text-muted); }
.lms-aula__aside-list { min-height: 0; overflow-y: auto; }
.lms-aula__notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(40px, 6vw, 80px) 16px; }

@media (min-width: 768px) {
  .lms-aula .lms-crumbs { padding-inline: 0; }
  .lms-aula__pad { padding-inline: 0; }
  .lms-player { border-radius: var(--lms-player-radius); }
  .lms-live__frame, .lms-live__card { border-radius: var(--lms-player-radius); }
  .lms-aula__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .lms-aula__drawer-btn { display: none; }
  .lms-aula__actions { flex: 0 1 auto; }
  .lms-aula__aside {
    position: sticky;
    top: calc(var(--lms-header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - var(--lms-header-h) - 48px);
    padding: 28px 16px 12px;
  }
}

/* ============ Conclusão ============ */
.lms-conclusao { padding-bottom: clamp(48px, 6vw, 96px); }
.lms-conclusao__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px);
}
.lms-conclusao__text { display: flex; flex-direction: column; gap: 18px; }
.lms-conclusao__ok { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-success); font-size: .75rem; font-weight: var(--ip-weight-medium); letter-spacing: .12em; text-transform: uppercase; }
.lms-conclusao__ok .ph-fill { font-size: 24px; }
.lms-conclusao__btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.lms-conclusao__btns > :first-child { flex: 1 1 200px; }
.lms-conclusao__btns > :last-child { flex: 1 1 160px; }
.lms-cert-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--ip-radius-lg);
  background: var(--card-bg);
  box-shadow: var(--ip-shadow-lg);
  color: var(--color-text-body);
  text-decoration: none;
  transform: rotate(-1.5deg);
  transition: transform .2s ease;
}
.lms-cert-preview:hover { transform: rotate(0); color: var(--color-text-body); }
.lms-cert-preview::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -40%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: var(--ip-radius-full);
  background: var(--lms-cert-shape);
}
.lms-cert-preview > * { position: relative; z-index: 1; }
.lms-cert-preview img { width: auto; height: clamp(18px, 2vw, 26px); }
.lms-cert-preview__who { display: flex; flex-direction: column; gap: 6px; }
.lms-cert-preview__name { color: var(--color-text); font-family: var(--ip-font-museo); font-size: clamp(1.25rem, 2.4vw, 1.875rem); font-weight: var(--ip-weight-bold); line-height: 1.1; }
.lms-conclusao__offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4.4vw, 56px) clamp(20px, 5vw, 64px);
}
.lms-conclusao__offer-text { display: flex; flex-direction: column; gap: 14px; }
.lms-conclusao__offer-text p { max-width: 620px; margin: 0; color: var(--color-text-inverse); font-size: clamp(.9375rem, 1.4vw, 1.125rem); line-height: 1.6; }
.lms-conclusao__offer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lms-conclusao__offer-cta span { color: var(--color-text-inverse-muted); font-size: .9375rem; }
.lms-conclusao__offer-cta a:not(.ip-btn) { color: var(--color-text-on-brand); }
.lms-estado-vazio { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 4vw, 48px); padding: clamp(28px, 5vw, 64px); }
.lms-estado-vazio__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 7vw, 96px);
  height: clamp(72px, 7vw, 96px);
  border-radius: var(--ip-radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: clamp(36px, 3.4vw, 48px);
}
.lms-estado-vazio__text { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; }
.lms-estado-vazio__text p { margin: 0; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; }
@media (min-width: 768px) {
  .lms-conclusao__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lms-conclusao__offer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ============ Meus cursos ============ */
.lms-meus { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); padding-block: clamp(32px, 5vw, 64px) clamp(64px, 8vw, 120px); }
.lms-meus__hello { display: flex; flex-direction: column; gap: 10px; }
.lms-meus__hello .lms-h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.lms-meus__section { display: flex; flex-direction: column; gap: 20px; }
.lms-meus__section[hidden] { display: none; }
.lms-meus__section-head { display: flex; align-items: baseline; gap: 12px; }
.lms-meus__section-head span { color: var(--color-text-muted); font-size: 1rem; }
.lms-meus__sugg { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 4vw, 48px); border-radius: clamp(28px, 3vw, 40px); background: var(--color-surface-sunken); }
.lms-meus__sugg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.lms-meus__pool { display: none; }

/* ============ Certificado ============ */
.lms-certificado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 4vw, 48px) clamp(12px, 4vw, 64px) clamp(48px, 6vw, 96px);
  background: var(--color-bg-subtle);
}
.lms-certificado__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1100px; }
.lms-certificado__bar > div { display: flex; flex-wrap: wrap; gap: 12px; }
.lms-certificado__note { max-width: 320px; margin: 0; text-align: center; }
@media (min-width: 768px) { .lms-certificado__note { display: none; } }

.lms-cert {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  border-radius: var(--ip-radius-xs);
  background: var(--lms-cert-bg);
  box-shadow: var(--ip-shadow-lg);
  color: var(--lms-cert-ink);
}
.lms-cert__shape { position: absolute; right: -22%; bottom: -48%; width: 70%; aspect-ratio: 1; border-radius: var(--ip-radius-full); background: var(--lms-cert-shape); }
.lms-cert__shape--2 { right: -8%; bottom: -30%; width: 34%; background: var(--color-primary-subtle); }
.lms-cert__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 5.4cqw 6.7cqw 4.7cqw; }
.lms-cert__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; }
.lms-cert__logo { width: auto; height: 4.4cqw; }
.lms-cert__area { display: flex; align-items: center; gap: 1cqw; color: var(--color-text-body); font-size: 1.5cqw; }
.lms-cert__area::before { content: ""; width: 1cqw; height: 1cqw; border-radius: var(--ip-radius-full); background: var(--lms-course-accent); }
.lms-cert__body { display: flex; flex-direction: column; gap: 1.6cqw; max-width: 80%; }
.lms-cert__kicker { color: var(--color-text-muted); font-size: 1.45cqw; font-weight: var(--ip-weight-medium); letter-spacing: .12em; text-transform: uppercase; }
.lms-cert__lead { color: var(--color-text-body); font-size: 1.75cqw; line-height: 1.6; }
.lms-cert__lead strong { color: var(--color-text); font-weight: var(--ip-weight-medium); }
.lms-cert__name { color: var(--color-text); font-family: var(--ip-font-museo); font-size: 4.8cqw; font-weight: var(--ip-weight-bold); line-height: 1.1; }
.lms-cert__foot { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.35fr; align-items: end; gap: 4cqw; }
.lms-cert__sign { display: flex; flex-direction: column; gap: .6cqw; padding-top: 1cqw; border-top: 1px solid var(--lms-cert-rule); font-size: 1.45cqw; }
.lms-cert__sign strong { color: var(--color-text); font-weight: var(--ip-weight-medium); }
.lms-cert__sign span { color: var(--color-text-muted); }
.lms-cert__code { display: flex; flex-direction: column; gap: .5cqw; padding: 1.3cqw 1.7cqw; border-radius: 1.4cqw; background: var(--color-surface); box-shadow: var(--ip-shadow-sm); font-size: 1.45cqw; }
.lms-cert__code span:first-child { color: var(--color-text-muted); }
.lms-cert__code strong { color: var(--color-text); font-size: 1.75cqw; font-weight: var(--ip-weight-medium); letter-spacing: .04em; }
.lms-cert__code span:last-child { color: var(--color-link); overflow-wrap: anywhere; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  .lms-cert, .lms-cert * { visibility: visible !important; }
  .lms-cert {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 297mm !important;
    max-width: none !important;
    height: 210mm !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============ Quiz final ============ */
.lms-quiz {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  max-width: 820px;
  padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 120px);
}
.lms-quiz__head { display: flex; flex-direction: column; gap: 10px; }
.lms-quiz__head .lms-h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.lms-quiz__carregando { display: flex; flex-direction: column; gap: 14px; }
.lms-quiz__carregando[hidden], .lms-quiz__form[hidden] { display: none; }
.lms-quiz__resultado:empty { display: none; }
.lms-quiz__painel .lms-alert__body { gap: 8px; }
.lms-quiz__painel .lms-alert__title { font-weight: var(--ip-weight-medium); }
.lms-quiz__painel .lms-alert__title:focus { outline: none; }
.lms-quiz__painel .ip-btn { align-self: flex-start; margin-top: 6px; }
.lms-quiz__form { display: flex; flex-direction: column; gap: 16px; }
.lms-quiz__q { min-width: 0; margin: 0; padding: clamp(18px, 3vw, 28px); border: 0; box-shadow: var(--card-shadow), inset 0 0 0 2px transparent; }
.lms-quiz__q[data-estado="errada"] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--color-error); }
.lms-quiz__q[data-faltando="true"] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--color-warning); }
.lms-quiz__pergunta { float: left; width: 100%; margin: 0 0 16px; padding: 0; color: var(--color-text); font-size: 1.125rem; font-weight: var(--ip-weight-medium); line-height: 1.4; }
.lms-quiz__num { color: var(--color-text-muted); }
.lms-quiz__alts { clear: both; display: flex; flex-direction: column; gap: 10px; }
.lms-quiz__alt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  align-items: center;
  gap: 14px;
  min-height: var(--ip-tap-min);
  padding: 10px 14px;
  border-radius: var(--input-radius);
  box-shadow: inset 0 0 0 1px var(--input-border);
  color: var(--color-text-body);
  cursor: pointer;
}
.lms-quiz__alt:hover { box-shadow: inset 0 0 0 1px var(--input-border-hover); }
.lms-quiz__alt:has(input:checked) { background: var(--color-surface-subtle); box-shadow: inset 0 0 0 2px var(--color-link); color: var(--color-text); }
.lms-quiz__alt:has(input:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.lms-quiz__alt:has(input:disabled) { cursor: default; }
.lms-quiz__alt input { position: absolute; opacity: 0; pointer-events: none; }
.lms-quiz__letra {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ip-radius-full);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font-size: .875rem;
  font-weight: var(--ip-weight-bold);
}
.lms-quiz__alt:has(input:checked) .lms-quiz__letra { background: var(--color-link); color: var(--color-text-on-brand); }
/* Sem :has() (Firefox 115 ESR, Safari < 15.4): a letra mostra a marcada e o foco. */
.lms-quiz__alt input:checked + .lms-quiz__letra { background: var(--color-link); color: var(--color-text-on-brand); }
.lms-quiz__alt input:focus-visible + .lms-quiz__letra { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.lms-quiz__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lms-quiz__selo { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success); font-size: .875rem; font-weight: var(--ip-weight-medium); }
.lms-quiz__selo:empty { display: none; }
/* Celular: o selo "Resposta certa" desce para baixo do texto (alinhado a ele). */
.lms-quiz__selo { flex-basis: 100%; padding-left: 42px; }
@media (min-width: 768px) { .lms-quiz__selo { flex-basis: auto; padding-left: 0; } }
.lms-quiz__alt[data-certa="true"] { box-shadow: inset 0 0 0 2px var(--color-success); }
.lms-quiz__aviso { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--color-error); font-size: .9375rem; }
.lms-quiz__aviso[hidden], .lms-quiz__explicacao[hidden] { display: none; }
.lms-quiz__explicacao { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--input-radius); background: var(--color-surface-subtle); color: var(--color-text-body); font-size: .9375rem; line-height: 1.55; }
.lms-quiz__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lms-quiz__acoes .ip-btn[hidden] { display: none; }

/* ============ Meu perfil ============ */
.lms-perfil {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
  max-width: 760px;
  padding-block: clamp(32px, 5vw, 64px) clamp(64px, 8vw, 120px);
}
.lms-perfil__head { display: flex; flex-direction: column; gap: 10px; }
.lms-perfil__head .lms-h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.lms-perfil__form { display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 4vw, 40px); }
.lms-perfil__form[aria-busy="true"] .lms-perfil__campos { opacity: .6; }
.lms-perfil__who { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-subtle); }
.lms-perfil__who-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lms-perfil__who-text .lms-muted { margin: 4px 0 0; }
.lms-perfil__foto { position: relative; flex-shrink: 0; }
.lms-perfil__foto-carregando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--avatar-radius);
  background: var(--lms-sheet-scrim);
  color: var(--color-text-inverse);
  font-size: 28px;
}
.lms-perfil__foto-carregando[hidden] { display: none; }
.lms-perfil__foto-carregando span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lms-perfil__foto-carregando .ph { animation: lms-girar 1s linear infinite; }
@keyframes lms-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lms-perfil__foto-carregando .ph { animation: none; } }
.lms-perfil__foto-acoes { display: flex; flex-wrap: wrap; gap: 0 20px; }
.lms-perfil__foto-acoes .lms-link[disabled] { opacity: .5; cursor: default; }
.lms-perfil__nome { margin: 0; color: var(--color-text); font-size: 1.125rem; font-weight: var(--ip-weight-medium); overflow-wrap: anywhere; }
.lms-perfil__email { margin: 0; color: var(--color-text-muted); font-size: .875rem; overflow-wrap: anywhere; }
.lms-perfil__campos { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lms-perfil__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.lms-perfil__campos .lms-field__input[readonly] { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.lms-perfil__campos .lms-field__hint strong { color: var(--color-text); font-weight: var(--ip-weight-medium); overflow-wrap: anywhere; }
.lms-perfil__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.lms-perfil__acoes .lms-link { display: inline-flex; align-items: center; gap: 8px; }
.lms-conclusao__nome-dica { margin: 0; }
/* Enquadramento da foto (janela). Em tela baixa (celular deitado) a camada
   rola e a área encolhe pela altura: o "Salvar foto" nunca fica fora da tela.
   Margem automática centraliza quando cabe e não empurra para cima quando não. */
.lms-enquadrar { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
.lms-enquadrar__box { width: 100%; max-width: 400px; margin-block: auto; }
.lms-enquadrar__area {
  position: relative;
  width: min(100%, 320px, max(160px, 100vh - 300px));
  width: min(100%, 320px, max(160px, 100dvh - 300px));
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--input-radius);
  background: var(--color-surface-subtle);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.lms-enquadrar__area.is-arrastando { cursor: grabbing; }
.lms-enquadrar__area img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* Máscara no formato do avatar: fora do círculo fica escurecido. */
.lms-enquadrar__area::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--avatar-radius);
  box-shadow: 0 0 0 9999px var(--lms-sheet-scrim);
  pointer-events: none;
}
.lms-enquadrar__area:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.lms-enquadrar__zoom { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); font-size: 20px; }
.lms-enquadrar__zoom input { flex: 1; min-height: var(--ip-tap-min); accent-color: var(--color-link); }
@media (max-height: 560px) {
  .lms-enquadrar .lms-dialog__text { display: none; }
  .lms-enquadrar__box { gap: 10px; padding: 20px; }
}

/* ============ Verificação ============ */
.lms-verificar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: calc(760px + 2 * var(--lms-gutter));
  margin-inline: auto;
  padding: clamp(40px, 7vw, 96px) var(--lms-gutter) clamp(64px, 8vw, 120px);
}
.lms-verificar__head { display: flex; flex-direction: column; gap: 12px; }
.lms-verificar__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lms-verificar__form .lms-field { flex: 1 1 280px; }
.lms-verificar__form .ip-btn { flex: 0 1 160px; }
.lms-verificar__ok { overflow: hidden; border-radius: clamp(20px, 2.4vw, 28px); }
.lms-verificar__ok[hidden] { display: none; }
.lms-verificar__ok-head { display: flex; align-items: center; gap: 12px; padding: 18px clamp(20px, 3vw, 32px); background: var(--color-success-subtle); color: var(--color-success); font-size: 1.125rem; font-weight: var(--ip-weight-medium); }
.lms-verificar__ok-head .ph-fill { font-size: 28px; }
.lms-verificar__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px 32px; margin: 0; padding: clamp(20px, 3vw, 32px); }
.lms-verificar__fields div { display: flex; flex-direction: column; gap: 4px; }
.lms-verificar__fields dt { color: var(--color-text-muted); font-size: .875rem; }
.lms-verificar__fields dd { margin: 0; color: var(--color-text); font-size: 1.125rem; font-weight: var(--ip-weight-medium); }
.lms-verificar__ok-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(20px, 3vw, 32px); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: .875rem; }
@media (min-width: 768px) { .lms-verificar__head { text-align: center; } }

/* ============ 404 ============ */
.lms-404 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: clamp(64px, 10vw, 140px); }
/* ==========================================================================
   Componentes portados do site institucional (inspirali-pos-theme), para o LMS
   ter a mesma cara do site:
     · rodapé ............ .footer-ip-*      (site: footer.module, modules-bundle.css)
     · página do curso ... .ip-evento*       (site: evento-* modules, "Evento — Detalhe")
     · catálogo e cards .. .ip-evl-*         (site: eventos-listing.module)
   Classes e medidas iguais às do site de propósito: quem mexer lá acha o
   mesmo nome aqui. Mudou no site? Copie a mudança para cá.
   Diferenças em relação ao site:
     - hex trocado por token (o site tem alguns hex soltos);
     - o hero não reserva os 102px do cabeçalho fixo do site (o do LMS ocupa
       espaço na página), então o respiro do topo é menor;
     - ícones Phosphor sem as classes .ip-icon do site (tamanho aqui no CSS).
   Cor da área: --area (preenchimento) e --area-text (texto), inline no HubL.
   ========================================================================== */

.ip-evento, .ip-evl-card, .ip-evl-feat, .ip-evl-chip { --area: var(--ip-sage-600); }

/* =================== Rodapé =================== */
.footer-ip {
  margin-top: 40px;
  padding-block: 64px 40px;
  border-top: 0.5px solid var(--color-border);
  background-color: var(--ip-neutral-50);
}
.footer-ip__inner { max-width: var(--ip-content-max); margin-inline: auto; padding-inline: var(--ip-section-pad-x); }
.footer-ip__top { display: grid; gap: 3rem 1.5rem; grid-template-columns: 1.6fr repeat(var(--footer-cols, 5), 1fr) 1.4fr; }
.footer-ip__logo { display: block; width: 100%; max-width: 200px; height: auto; }
.footer-ip__tagline { margin: 1.25rem 0 1.5rem; color: var(--ip-neutral-700); font-family: var(--ip-font-din); font-size: 1rem; }
.footer-ip__contact { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; }
.footer-ip__contact-line { display: flex; align-items: center; color: var(--ip-neutral-700); font-family: var(--ip-font-din); font-size: 0.95rem; text-decoration: none; }
.footer-ip__contact-line:hover, .footer-ip__contact-line:focus { color: var(--ip-stone-700); }
.footer-ip__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.footer-ip__social-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--ip-neutral-100); color: var(--ip-stone-600);
  transition: background-color 0.15s ease;
}
.footer-ip__social-link:hover, .footer-ip__social-link:focus { background-color: var(--ip-neutral-200); }
/* O tag icon do HubL põe a classe no span que embrulha o SVG: o SVG precisa de
   largura E altura, senão cada marca sai de um tamanho (ver nota no site). */
.footer-ip__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; fill: currentColor; }
.footer-ip__social-icon svg { display: block; width: 100%; height: 100%; }
.footer-ip__col { min-width: 0; }
.footer-ip__col-title { margin: 0 0 1.25rem; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 1.25rem; font-weight: var(--ip-weight-bold); line-height: 1.2; }
.footer-ip__col-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.footer-ip__col-link { display: flex; align-items: center; color: var(--ip-neutral-500); font-family: var(--ip-font-din); font-size: 0.95rem; text-decoration: none; transition: color 0.15s ease; }
.footer-ip__col-link:hover, .footer-ip__col-link:focus { color: var(--ip-stone-700); }
@media (pointer: coarse) {
  .footer-ip__col-list { gap: 0; }
  .footer-ip__col-link, .footer-ip__contact-line { min-height: 44px; padding-block: 0.5rem; }
  .footer-ip__social-link { width: 44px; height: 44px; }
}
.footer-ip__emec { display: flex; flex-direction: column; gap: 1rem; }
.footer-ip__emec-logo { max-width: 120px; height: auto; }
.footer-ip__qr { width: 140px; max-width: 100%; height: auto; }
.footer-ip__emec-text { display: block; margin: 0; color: var(--ip-neutral-700); font-family: var(--ip-font-din); font-size: 0.875rem; line-height: 1.4; }
a.footer-ip__emec-text { text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; }
a.footer-ip__emec-text:hover, a.footer-ip__emec-text:focus { color: var(--ip-stone-700); }
@media (pointer: coarse) { a.footer-ip__emec-text { min-height: 44px; padding-block: 0.5rem; } }
.footer-ip__bottom { margin-top: 3.5rem; text-align: center; }
.footer-ip__legal { width: 100%; padding-top: 2rem; border-top: 0.5px solid var(--color-border); }
.footer-ip__legal p { margin: 0; color: var(--ip-neutral-500); font-family: var(--ip-font-din); font-size: 0.9rem; }
@media (max-width: 991px) {
  .footer-ip__top { grid-template-columns: repeat(3, 1fr); }
  .footer-ip__brand, .footer-ip__emec { grid-column: 1 / -1; }
  .footer-ip__emec { align-items: center; text-align: center; }
}
@media (max-width: 767px) {
  .footer-ip { padding-block: 40px 32px; }
  .footer-ip__inner { padding-inline: var(--ip-section-pad-x-mobile); }
  .footer-ip__top { gap: 2.5rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
  .footer-ip__brand, .footer-ip__emec { grid-column: 1 / -1; }
  .footer-ip__bottom { margin-top: 3rem; }
}

/* =================== Trilha (hero escuro) =================== */
.ip-evento__crumbs, .ip-evl-hero__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-family: var(--ip-font-din); font-size: 14px; }
.ip-evento__sep, .ip-evl-hero__sep { color: var(--ip-stone-400); }
.ip-evento__crumb, .ip-evl-hero__crumb { color: var(--ip-stone-300); text-decoration: none; }
a.ip-evento__crumb:hover, a.ip-evl-hero__crumb:hover { color: var(--ip-white); }
.ip-evento__crumb--current, .ip-evl-hero__crumb--current { color: var(--ip-white); cursor: default; }

/* =================== Página do curso — hero =================== */
.ip-evento__hero { position: relative; overflow: hidden; background: var(--ip-neutral-900); }
.ip-evento__hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center 28%; }
.ip-evento__hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(26,26,27,.94) 0%, rgba(26,26,27,.86) 42%, color-mix(in srgb, var(--area) 62%, transparent) 100%); }
.ip-evento__hero-wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 48px) 56px; }
.ip-evento__head { max-width: 760px; margin-top: 32px; }
.ip-evento__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ip-evento__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--ip-radius-full); background: var(--area); color: var(--ip-white); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.ip-evento__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.ip-evento__format { display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid var(--ip-white); border-radius: var(--ip-radius-full); background: rgba(255, 255, 255, .08); color: var(--ip-white); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ip-evento__title { max-width: 20ch; margin: 0 0 18px; color: var(--ip-white); font-family: var(--ip-font-museo); font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; line-height: 1.07; }
.ip-evento__lead { max-width: 52ch; margin: 0 0 28px; color: var(--ip-stone-200); font-family: var(--ip-font-din); font-size: 19px; line-height: 1.55; }
.ip-evento__meta { display: flex; flex-wrap: wrap; gap: 28px; color: var(--ip-white); font-family: var(--ip-font-din); }
.ip-evento__meta-item { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; }
.ip-evento__meta-ic { display: inline-flex; color: var(--area); font-size: 20px; }
.ip-evento__profs { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; color: var(--ip-white); font-family: var(--ip-font-din); font-size: 15.5px; }
.ip-evento__hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
/* Só a nota ao lado do botão (filho direto): o texto DENTRO do botão do aluno logado também é um span. */
.ip-evento__hero-actions > span { color: var(--color-text-inverse-muted); font-size: .875rem; }
@media (max-width: 760px) {
  .ip-evento__meta { gap: 14px 22px; }
  .ip-evento__hero-actions .ip-btn { width: 100%; justify-content: center; }
}

/* =================== Página do curso — corpo (conteúdo + card lateral) =================== */
.ip-evento__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; max-width: 1240px; margin: 56px auto 0; padding: 0 clamp(20px, 4vw, 48px); }
.ip-evento__main { min-width: 0; }
.ip-evento__section { margin-bottom: 48px; }
.ip-evento__section:last-child { margin-bottom: 0; }
.ip-evento__sectitle { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--color-text); font-family: var(--ip-font-museo); font-size: clamp(23px, 2.4vw, 30px); font-weight: 700; }
.ip-evento__sectitle::before { content: ""; flex-shrink: 0; width: 4px; height: 26px; border-radius: 2px; background: var(--area); }
.ip-evento__about p { margin: 0 0 1em; color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 18px; line-height: 1.68; }
.ip-evento__about p:last-child { margin-bottom: 0; }

.ip-evento__learn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ip-evento__learn-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--ip-radius-lg); background: var(--ip-neutral-50); }
.ip-evento__learn-num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--area) 16%, var(--ip-white)); color: var(--area-text, var(--area)); font-family: var(--ip-font-din); font-size: 14px; font-weight: 700; }
.ip-evento__learn-text { color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 15.5px; line-height: 1.5; }

/* Aulas: a "Programação" do evento. Cada linha é um .lms-lesson (o JS
   estadosAulas marca concluída / em andamento). */
.ip-evento__agenda { overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--ip-radius-xl); list-style: none; }
.ip-evento__agenda li + li { border-top: 1px solid var(--color-border-subtle); }
.ip-evento__agenda-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: var(--ip-tap-min); padding: 18px 24px; color: var(--color-text); text-decoration: none; }
a.ip-evento__agenda-row:hover { background: var(--ip-neutral-50); }
.ip-evento__agenda-time { color: var(--area-text, var(--area)); font-family: var(--ip-font-din); font-size: 16px; font-weight: 700; }
.ip-evento__agenda-desc { color: var(--color-text); font-family: var(--ip-font-din); font-size: 16px; }
.ip-evento__agenda-side { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: .875rem; white-space: nowrap; }
.ip-evento__agenda-side .lms-lesson__icon { font-size: 20px; }
.ip-evento__agenda .lms-lesson[data-estado="done"] .lms-lesson__icon { color: var(--color-success); }
.ip-evento__agenda .lms-lesson[data-estado="progress"] .lms-lesson__icon { color: var(--area); }
/* Exercício como etapa e etapa bloqueada (só no LMS, D16). */
.ip-evento__agenda .lms-lesson--exercicio .ip-evento__agenda-time { color: var(--color-text-muted); font-weight: 400; }
.ip-evento__agenda .lms-lesson[data-estado="locked"] { cursor: not-allowed; opacity: .6; }
.ip-evento__agenda .lms-lesson[data-estado="locked"]:hover { background: transparent; }
/* Módulos (só no LMS): um bloco de programação por módulo, com título. */
.lms-modulos--agenda { gap: 28px; }
.lms-modulos--agenda .lms-modulo__titulo { gap: 4px 14px; margin-bottom: 12px; padding: 0; font-size: 18px; }
.lms-modulos--agenda .lms-modulo__num { font-size: 13px; }
.lms-modulos--agenda .lms-modulo__meta { margin-left: auto; font-size: .875rem; }

.ip-evento__speaker { display: flex; align-items: flex-start; gap: 20px; padding: 26px 28px; border-radius: var(--ip-radius-xl); background: var(--ip-neutral-50); }
.ip-evento__speaker-avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px color-mix(in srgb, var(--area) 45%, transparent); }
.ip-evento__speaker-avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--area); color: var(--ip-white); font-family: var(--ip-font-din); font-size: 24px; font-weight: 500; }
.ip-evento__speaker-name { display: block; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 19px; font-weight: 700; }
.ip-evento__speaker-role { display: block; margin-bottom: 8px; color: var(--area-text, var(--area)); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; }
.ip-evento__speaker-bio { margin: 0; color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 15px; line-height: 1.6; }

.ip-evento__next { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px; border-left: 4px solid var(--area); border-radius: var(--ip-radius-lg); background: color-mix(in srgb, var(--area) 8%, var(--ip-white)); }
.ip-evento__next p { margin: 0; color: var(--color-text-body); }

/* Card lateral (sticky) */
.ip-evento__card { position: sticky; top: 100px; overflow: hidden; border-radius: var(--ip-radius-2xl); background: var(--color-surface); box-shadow: var(--ip-shadow-xl); }
.ip-evento__card-head { padding: 20px 26px; background: var(--area); color: var(--ip-white); }
.ip-evento__card-price-label { font-family: var(--ip-font-din); font-size: 14px; opacity: .9; }
.ip-evento__card-price-row { display: flex; align-items: baseline; gap: 10px; }
.ip-evento__card-price { font-family: var(--ip-font-museo); font-size: 34px; font-weight: 700; }
.ip-evento__card-price-suffix { font-family: var(--ip-font-din); font-size: 14px; opacity: .9; }
.ip-evento__card-body { padding: 24px 26px; }
.ip-evento__card-rows { display: flex; flex-direction: column; gap: 16px; margin: 0 0 22px; }
.ip-evento__card-row { display: flex; align-items: center; gap: 12px; }
.ip-evento__card-ic { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--area); font-size: 20px; }
.ip-evento__card-rk { display: block; margin: 0 0 2px; color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; line-height: 1.3; }
.ip-evento__card-rv { display: block; margin: 0; color: var(--color-text); font-family: var(--ip-font-din); font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.ip-evento__card-spots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--ip-radius-md); background: color-mix(in srgb, var(--area) 10%, transparent); }
.ip-evento__card-spots[hidden] { display: none; }
.ip-evento__card-spots-row { display: flex; justify-content: space-between; gap: 12px; color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; }
.ip-evento__card-spots .lms-progress__fill { background: var(--area); }
.ip-evento__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--ip-tap-min); padding: 15px 22px; border: 0; border-radius: var(--ip-radius-full); background: var(--ip-neutral-900); color: var(--ip-white); font-family: var(--ip-font-din); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.ip-evento__cta:hover { background: var(--ip-neutral-800); color: var(--ip-white); }
.ip-evento__cta .ph { font-size: 20px; }
.ip-evento__card-note { margin: 12px 0 0; color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; text-align: center; }
.ip-evento__card-note strong { color: var(--color-text); font-weight: 500; }

@media (max-width: 980px) {
  .ip-evento__body { grid-template-columns: 1fr; gap: 40px; }
  .ip-evento__card { position: static; }
  .ip-evento__learn { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ip-evento__agenda-row { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 18px; }
  .ip-evento__agenda-side { grid-column: 2; }
}

/* =================== Página do curso — inscrição (formulário) =================== */
.ip-evento__signup { max-width: 1240px; margin: 72px auto 0; padding: 0 clamp(20px, 4vw, 48px); scroll-margin-top: 90px; }
.ip-evento__signup-wrap { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--color-border-subtle); border-top: 4px solid var(--area); border-radius: var(--ip-radius-2xl); background: var(--ip-neutral-50); }
.ip-evento__signup-head { margin-bottom: 24px; }
.ip-evento__signup-title { margin: 0 0 8px; color: var(--color-text); font-family: var(--ip-font-museo); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; }
.ip-evento__signup-sub { max-width: 52ch; margin: 0; color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 16px; line-height: 1.5; }
.ip-evento__signup-form { max-width: 620px; }
/* O formulário herda o estilo de .lms-auth__form (telas de acesso); aqui só o
   botão, na cor da área, como no site. */
.ip-evento__signup-form input[type="submit"],
.ip-evento__signup-form button[type="submit"],
.ip-evento__signup-form .hs-button { background: var(--area); box-shadow: none; color: var(--ip-white); }
.ip-evento__signup-foot { margin: 20px 0 0; color: var(--color-text-body); font-size: .9375rem; }

/* =================== Outros cursos =================== */
.ip-evento__related { max-width: 1240px; margin: 80px auto 0; padding: 0 clamp(20px, 4vw, 48px); }
.ip-evento__related-title { margin: 0 0 26px; color: var(--color-text); font-family: var(--ip-font-museo); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; }

/* =================== Catálogo (listagem) =================== */
.ip-eventos-listing { --evl-gap: 24px; --evl-card-min: 330px; --evl-top-gap: 40px; padding-bottom: clamp(48px, 6vw, 80px); }
.ip-eventos-listing .is-hidden, .ip-eventos-listing .is-paged-out { display: none !important; }
.ip-evl-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.ip-evl-hero { position: relative; display: flex; align-items: center; min-height: 340px; overflow: hidden; background: var(--ip-neutral-900); }
.ip-evl-hero__photo { position: absolute; inset: 0; background-position: center 30%; background-size: cover; opacity: .28; }
.ip-evl-hero__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(24,24,25,.96) 0%, rgba(24,24,25,.82) 52%, rgba(24,24,25,.62) 100%); }
.ip-evl-hero__halo { position: absolute; top: -40%; right: -8%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--ip-sage-600) 0%, transparent 62%); opacity: .3; pointer-events: none; }
.ip-evl-hero__wrap { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 48px) 52px; }
.ip-evl-hero__head { max-width: 720px; margin-top: 26px; }
.ip-evl-hero__kicker { display: inline-flex; align-items: center; gap: 11px; color: var(--ip-sage-300); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ip-evl-hero__kicker .ph { color: var(--ip-sage-400); font-size: 20px; }
.ip-evl-hero__title { max-width: 17ch; margin: 16px 0; color: var(--ip-white); font-family: var(--ip-font-museo); font-size: clamp(32px, 4vw, 52px); font-weight: 700; letter-spacing: -.01em; line-height: 1.06; }
.ip-evl-hero__sub { max-width: 50ch; margin: 0; color: var(--ip-stone-200); font-family: var(--ip-font-din); font-size: 18.5px; line-height: 1.5; }
.ip-evl-search { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; margin-top: 30px; padding: 12px 12px 12px 20px; border-radius: var(--ip-radius-full); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ip-evl-search > .ph { flex-shrink: 0; color: rgba(255,255,255,.7); font-size: 22px; }
.ip-evl-search input { flex: 1; min-width: 0; min-height: 36px; border: none; outline: none; background: transparent; color: var(--ip-white); font-family: var(--ip-font-din); font-size: 15px; }
.ip-evl-search input::placeholder { color: rgba(255,255,255,.6); }
.ip-evl-search:focus-within { box-shadow: inset 0 0 0 2px var(--focus-ring-on-dark); }

.ip-evl-filters { margin-top: 40px; }
.ip-evl-filters__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.ip-evl-filters__row[hidden] { display: none; }
.ip-evl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-evl-pill-tab { min-height: 40px; padding: 9px 18px; border: none; border-radius: var(--ip-radius-full); background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .14s, color .14s; }
.ip-evl-pill-tab.is-active { background: var(--ip-neutral-900); box-shadow: none; color: var(--ip-white); }
.ip-evl-chips { display: flex; gap: 9px; overflow-x: auto; padding: 18px 2px 4px; scrollbar-width: none; }
.ip-evl-chips::-webkit-scrollbar { display: none; }
.ip-evl-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border: none; border-radius: var(--ip-radius-full); background: var(--ip-white); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: box-shadow .14s, background .14s; }
.ip-evl-chip.is-active { background: color-mix(in srgb, var(--area) 14%, var(--ip-white)); box-shadow: inset 0 0 0 1.5px var(--area); color: var(--ip-neutral-900); }
.ip-evl-chip__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--area); }
.ip-evl-chip__dot--all { background: var(--ip-sage-600); }

.ip-evl-pill { align-self: flex-start; padding: 4px 11px; border-radius: var(--ip-radius-full); box-shadow: inset 0 0 0 1.5px var(--area); color: var(--area-text, var(--area)); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ip-evl-badge-format { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--ip-radius-full); background: rgba(255,255,255,.92); color: var(--ip-neutral-900); font-family: var(--ip-font-din); font-size: 14px; font-weight: 500; }
.ip-evl-badge-format .ph { font-size: 16px; }
.ip-evl-date { display: inline-flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--ip-radius-md); background: var(--ip-white); box-shadow: var(--ip-shadow-md); line-height: 1; }
.ip-evl-date--lg { width: 72px; height: 72px; }
.ip-evl-date__day { color: var(--ip-neutral-900); font-family: var(--ip-font-din); font-size: 24px; }
.ip-evl-date--lg .ip-evl-date__day { font-size: 27px; }
.ip-evl-date__mon { margin-top: 3px; color: var(--area-text, var(--area)); font-family: var(--ip-font-din); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.ip-evl-content { margin-top: var(--evl-top-gap); }
.ip-evl-featwrap { margin-bottom: calc(var(--evl-gap) + 8px); }
.ip-evl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--evl-card-min, 330px)), 1fr)); gap: var(--evl-gap, 24px); }
.ip-evl-empty { padding: 32px; color: var(--color-text-muted); font-family: var(--ip-font-din); text-align: center; }
.ip-evl-empty[hidden] { display: none; }

/* Card de destaque (o primeiro curso) */
.ip-evl-feat { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 380px; overflow: hidden; border-radius: var(--ip-radius-xl); background: var(--ip-white); box-shadow: var(--ip-shadow-md); }
.ip-evl-feat__media { position: relative; background: linear-gradient(150deg, var(--area), color-mix(in srgb, var(--area) 55%, var(--ip-white))); }
.ip-evl-feat__photo { position: absolute; inset: 0; background-position: center 34%; background-size: cover; }
.ip-evl-feat__tint { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--area) 5%, transparent) 0%, color-mix(in srgb, var(--area) 55%, transparent) 100%); }
.ip-evl-feat__fmt { position: absolute; top: 20px; left: 20px; }
.ip-evl-feat__flag { position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--ip-radius-full); background: rgba(0,0,0,.32); color: var(--ip-white); font-family: var(--ip-font-din); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ip-evl-feat__body { display: flex; flex-direction: column; justify-content: center; padding: 38px 40px; }
.ip-evl-feat__when { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ip-evl-feat__whenmeta { font-family: var(--ip-font-din); }
.ip-evl-feat__date { display: block; color: var(--ip-neutral-900); font-size: 15px; font-weight: 500; }
.ip-evl-feat__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--color-text-muted); font-size: 14px; }
.ip-evl-feat__body .ip-evl-pill { margin-bottom: 14px; padding: 5px 13px; }
.ip-evl-feat__title { max-width: 18ch; margin: 0 0 12px; color: var(--color-text); font-family: var(--ip-font-museo); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.12; }
.ip-evl-feat__lead { max-width: 46ch; margin: 0 0 24px; color: var(--color-text-body); font-family: var(--ip-font-din); font-size: 16px; line-height: 1.55; }
.ip-evl-feat__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ip-evl-feat__speaker { color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; }

/* Card de curso na grade (catálogo, Meus cursos e "Outros cursos") */
.ip-evl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ip-radius-xl); background: var(--ip-white); box-shadow: var(--ip-shadow-md); color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.ip-evl-card:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--ip-shadow-lg); }
.ip-evl-card[hidden] { display: none; }
.ip-evl-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--area), color-mix(in srgb, var(--area) 55%, var(--ip-white))); }
.ip-evl-card__photo { position: absolute; inset: 0; background-position: center 42%; background-size: cover; }
.ip-evl-card__tint { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--area) 6%, transparent) 0%, color-mix(in srgb, var(--area) 68%, transparent) 100%); }
.ip-evl-card__date { position: absolute; bottom: 14px; left: 14px; }
.ip-evl-card__tag { position: absolute; top: 14px; right: 14px; }
.ip-evl-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 18px 22px 22px; }
.ip-evl-card__title { flex: 1; margin: 0; color: var(--color-text); font-family: var(--ip-font-museo); font-size: 18.5px; font-weight: 700; line-height: 1.24; text-wrap: pretty; }
.ip-evl-card__speaker { color: var(--color-text-muted); font-family: var(--ip-font-din); font-size: 14px; }
.ip-evl-card__link { display: inline-flex; align-items: center; gap: 7px; color: var(--ip-neutral-900); font-family: var(--ip-font-din); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.ip-evl-card__link .ph { font-size: 18px; transition: transform .16s ease; }
.ip-evl-card:hover .ip-evl-card__link .ph { transform: translateX(3px); }
/* Estado do aluno (o JS LMS.cartao troca data-estado): progresso e conclusão. */
.ip-evl-card__progress { display: flex; flex-direction: column; gap: 6px; }
.ip-evl-card__progress[hidden] { display: none; }
.ip-evl-card__progress .lms-progress__fill { background: var(--area); }
.ip-evl-card__stats { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: .875rem; }
.ip-evl-card__done { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success); font-size: .875rem; font-weight: var(--ip-weight-medium); }
.ip-evl-card__done[hidden] { display: none; }
.ip-evl-card__done .ph-fill { font-size: 18px; }

.ip-evl-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.ip-evl-pager[hidden] { display: none; }
.ip-evl-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ip-tap-min); height: var(--ip-tap-min); padding: 0 12px; border: none; border-radius: var(--ip-radius-full); background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); font-family: var(--ip-font-din); font-size: 15px; cursor: pointer; }
.ip-evl-pager__btn.is-active { background: var(--ip-neutral-900); box-shadow: none; color: var(--ip-white); }
.ip-evl-pager__btn:disabled { opacity: .4; cursor: default; }
.ip-evl-pager__gap { padding: 0 4px; color: var(--ip-stone-400); }

@media (max-width: 860px) {
  .ip-evl-feat { grid-template-columns: 1fr; }
  .ip-evl-feat__media { min-height: 220px; }
  .ip-evl-feat__body { padding: 28px 26px; }
}
@media (max-width: 620px) {
  .ip-evl-filters__row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-evl-card, .ip-evl-card__link .ph { transition: none; }
  .ip-evl-card:hover { transform: none; }
}