/**
 * site.css — estilos específicos do site institucional público
 * (header, footer, hero, seções da home). Depende de variables.css,
 * base.css e components.css.
 *
 * Este arquivo será expandido na Etapa 2 (Site Institucional). Por
 * enquanto contém apenas a base estrutural do header/footer para que a
 * Etapa 1 já demonstre o Design System funcionando de ponta a ponta.
 */

/* =====================================================================
 * RC2 — .btn-accent é um componente COMPARTILHADO (components.css),
 * pintado com --accent-color (verde-tecnológico antigo, #00D3AB) — não
 * pode ser alterado ali sem mudar também o Admin. Conferido: 0 usos em
 * Admin/Professor/Aluno (só nos CTAs de destaque do site público), então
 * recolorir aqui (site.css, carregado depois de components.css, mesma
 * especificidade) é seguro e não toca nenhuma tela do painel.
 * ===================================================================== */
.btn-accent {
    background-color: var(--pub-primary);
    color: #fff;
}
.btn-accent:hover {
    background-color: var(--pub-primary-dark);
    color: #fff;
}

/* =====================================================================
 * SKIP LINK — Fase 2 §45 (acessibilidade, WCAG 2.4.1 Bypass Blocks)
 * ---------------------------------------------------------------------
 * Primeiro elemento focável de includes/partials/header.php. Fica fora
 * da tela até receber foco de teclado (Tab), quando aparece sobre o
 * header para permitir pular a navegação e ir direto para #main-content.
 * ===================================================================== */
.pub-skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-3);
    z-index: 1000;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top 0.15s ease;
}
.pub-skip-link:focus {
    top: var(--space-3);
}

/* =====================================================================
 * HEADER — Etapa 11 (redesign) / RC2: paleta clara baseada na logo
 * ---------------------------------------------------------------------
 * Header sempre translúcido + blur, agora em tom claro (off-white) para
 * combinar com o novo Hero claro (funciona tanto sobre o hero quanto
 * sobre o conteúdo das demais páginas). Ganha um pouco mais de opacidade/
 * sombra ao rolar via classe .is-scrolled (alternada por assets/js/main.js
 * a partir de window.scrollY).
 * ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--pub-header-height);
    background-color: rgba(246, 248, 251, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pub-border-light);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
    background-color: rgba(246, 248, 251, 0.96);
    box-shadow: 0 12px 32px -16px rgba(5, 43, 70, 0.18);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.site-header__logo { display: inline-flex; align-items: center; }
/* RC2 §5-14: logo do cabeçalho ampliada de forma responsiva. A logo real
   (crest + "E2A REPAIR" + "CENTRO DE CAPACITAÇÃO") tem proporção quase
   quadrada (~1.2:1), então mesmo em alturas maiores ocupa pouca largura
   horizontal — não compete com o menu. clamp() cresce suavemente entre
   os breakpoints; width:auto + max-height preserva a proporção original
   (nunca distorce/estica). */
.site-header__logo img {
    height: clamp(58px, 4.4vw, 80px);
    width: auto;
    max-height: 80px;
}

.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a {
    font-family: var(--pub-font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}
.site-nav a:hover { color: var(--text-color); }
.site-nav a.is-active { color: var(--pub-primary); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

.site-nav__student-link {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--pub-border-strong);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.site-nav__student-link:hover { border-color: var(--pub-primary); color: var(--text-color); }

.site-header__cta { flex-shrink: 0; }

.site-header__menu-toggle {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

@media (max-width: 1080px) {
    :root { --pub-header-height: 84px; }
    .site-nav { display: none; }
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__logo img { height: clamp(52px, 8vw, 64px); }
}

@media (max-width: 480px) {
    /* RC2 §5-14: preferimos antecipar o breakpoint do drawer (acima,
       1080px) a encolher a logo até ficar ilegível — mesmo assim, em
       telas bem estreitas, um teto um pouco mais contido evita que a
       logo (mais alta que a versão anterior) aperte o botão de menu. */
    :root { --pub-header-height: 72px; }
    .site-header__logo img { height: 46px; }
    .site-header__inner { gap: var(--space-3); }
    .site-header__cta { display: none; }
}

/* ---------------------------------------------------------------------
 * Menu mobile — painel deslizante (drawer) com backdrop, ESC e clique
 * fora fecham (lógica em assets/js/main.js). Trava o scroll do body
 * enquanto aberto via classe .has-drawer-open no <html>.
 * --------------------------------------------------------------------- */
.mobile-nav { position: fixed; inset: 0; z-index: var(--z-modal); }
.mobile-nav[hidden] { display: none; }

.mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(5, 43, 70, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mobile-nav__panel {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    height: 100%;
    width: min(360px, 88vw);
    background-color: var(--pub-bg-soft);
    /* Opaco de propósito (sem depender só de background-color, para não
       haver nenhuma chance de conteúdo de trás "vazar" por trás do menu
       em navegadores com suporte parcial a backdrop-filter): */
    box-shadow: -40px 0 60px -30px rgba(0,0,0,0.6);
    border-left: 1px solid var(--pub-border-dark);
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}
.mobile-nav__head img { height: 42px; width: auto; }

.mobile-nav__close {
    background: none;
    border: 1px solid var(--pub-border-dark-strong);
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-text);
    cursor: pointer;
}

.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--pub-border-dark);
    font-family: var(--pub-font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--pub-text);
}
.mobile-nav__links a.is-active { color: var(--pub-accent); }
.mobile-nav__links a:last-of-type { border-bottom: none; }

.mobile-nav__cta { margin-top: var(--space-5); }

@media (min-width: 1081px) {
    .mobile-nav { display: none !important; }
}

html.has-drawer-open { overflow: hidden; }

/* Hero */
.hero {
    background-color: var(--secondary-color);
    color: var(--text-on-dark);
    padding-block: var(--space-8);
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-6);
    align-items: center;
}
.hero__title { color: var(--text-on-dark); font-size: var(--text-4xl); }
.hero__subtitle { color: rgba(245,247,250,0.75); font-size: var(--text-lg); max-width: 520px; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.hero__media {
    background-color: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245,247,250,0.5);
    font-size: var(--text-sm);
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero__title { font-size: var(--text-2xl); }
    .hero { padding-block: var(--space-6); }
}

/* Footer — Etapa 11 (grid ampliado para 5 colunas: Marca, Navegação,
   Acessos, Contato, Legal) */
.site-footer {
    background-color: var(--pub-bg);
    color: var(--pub-text-dim);
    padding-block: var(--space-8) var(--space-5);
    border-top: 1px solid var(--pub-border-dark);
}
.site-footer a,
.site-footer p { color: var(--pub-text-dim); font-size: var(--text-sm); }
.site-footer a:hover { color: var(--pub-accent); }
.site-footer h6 {
    color: var(--pub-text);
    font-family: var(--pub-font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--space-6);
}
.site-footer__logo { display: block; height: 64px; width: auto; margin-bottom: var(--space-3); }
.site-footer__brand p { color: var(--pub-text-faint); }
.site-footer__bottom {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--pub-border-dark);
    font-size: var(--text-xs);
    color: var(--pub-text-faint);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 992px) {
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* Banner de cookies (LGPD) */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    z-index: var(--z-toast);
    display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* =====================================================================
 * ETAPA 2 — Site Institucional
 * (regras de header/menu mobile substituídas na Etapa 11 — ver bloco
 * "HEADER — Etapa 11" no início deste arquivo; as classes .site-header*,
 * .site-nav*, .mobile-nav* de lá são as únicas em vigor agora, para não
 * haver duas definições conflitantes da mesma classe no arquivo)
 * ===================================================================== */

/* Botão flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    width: 58px;
    height: 58px;
    border-radius: var(--radius-full);
    background-color: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    transition: transform var(--transition-fast);
}
.whatsapp-float:hover { transform: scale(1.06); color: #fff; }

@media (max-width: 640px) {
    .whatsapp-float { right: var(--space-4); bottom: var(--space-4); width: 52px; height: 52px; }
    /* Evita que o botão flutuante sobreponha o banner de cookies no mobile */
    .cookie-banner.is-visible ~ .whatsapp-float,
    .whatsapp-float { bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}

.site-footer__social { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Seções institucionais reutilizáveis */
.section-alt { background-color: var(--surface-color); }

.badge-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-primary);
    margin-bottom: var(--space-2);
}

/* CTA final */
.cta-section {
    background-color: var(--secondary-color);
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    text-align: center;
}
.cta-section h2 { color: var(--text-on-dark); }
.cta-section p { color: rgba(245,247,250,0.75); max-width: 560px; margin-inline: auto; }
.cta-section__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }

/* Grid de professores */
.teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .teacher-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .teacher-grid { grid-template-columns: 1fr; } }

/* Barra de filtros (cursos e turmas) */
.filter-bar {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.filter-bar form {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
}
.filter-bar .form-group { margin-bottom: 0; }
@media (max-width: 992px) {
    .filter-bar form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .filter-bar form { grid-template-columns: 1fr; }
}

/* Hero da página de curso individual — FASE 2: migrada para os tokens
   --pub-* (fundo/texto escuros do Design System), mesma estrutura HTML
   de antes (breadcrumb + badges + título + descrição + CTA + imagem). */
.course-hero {
    position: relative;
    background-color: var(--pub-background);
    color: var(--text-color);
    padding-block: var(--space-8);
    overflow: hidden;
    border-bottom: 1px solid var(--pub-border-light);
}
.course-hero .breadcrumb a,
.course-hero .breadcrumb li { color: var(--pub-text-soft); }
.course-hero .breadcrumb a:hover { color: var(--text-color); }
.course-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; }
/* Fase 2 — itens de grid têm min-width:auto por padrão (= min-content),
   então um título de curso com uma palavra longa ("Microssoldagem")
   podia forçar a coluna a ficar mais larga que a tela em viewports bem
   estreitos (320-360px), mesmo com a grid já colapsada para 1 coluna.
   min-width:0 permite que o conteúdo (título/descrição/badges) quebre
   normalmente em vez de alargar a coluna. */
.course-hero__grid > div { min-width: 0; }
.course-hero__cover {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--pub-surface-alt);
    border: 1px solid var(--pub-border-light);
}
.course-hero__title { color: var(--text-color); font-family: var(--pub-font-display); overflow-wrap: break-word; }
.course-hero__desc { color: var(--text-muted); font-size: var(--text-lg); }
.course-hero__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
@media (max-width: 900px) { .course-hero__grid { grid-template-columns: 1fr; } }

/* Layout de conteúdo do curso (duas colunas: conteúdo + sidebar de turma) */
.course-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 992px) {
    .course-layout { grid-template-columns: 1fr; }
    /* Fase 2 (§19): no mobile o card de "próxima turma" entra no fluxo
       normal — nunca fica sticky/flutuando sobre outro conteúdo. */
    .course-sidebar { position: static !important; top: auto !important; }
}
.course-content section { margin-bottom: var(--space-7); }
.course-content h2 { font-size: var(--text-2xl); font-family: var(--pub-font-display); }
.course-content ul { color: var(--text-color); }
.course-sidebar { position: sticky; top: calc(var(--pub-header-height) + var(--space-4)); }
.course-sidebar .card { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* Fase 2 — .btn tem white-space:nowrap em components.css (compartilhada
   com o admin, não editável aqui). Alguns rótulos de CTA da sidebar são
   longos ("Quero ser avisado da próxima turma") e, com nowrap, forçavam
   o card (e a coluna inteira do grid .course-layout) a alargar além da
   tela em viewports estreitos. Como os botões aqui já são .btn-block
   (100% de largura), permitir quebra de linha é seguro e resolve o
   overflow sem tocar components.css. */
.course-sidebar .btn { white-space: normal; }
.class-info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: var(--text-sm);
}
.class-info-row:last-of-type { border-bottom: none; }
.class-info-row dt { color: var(--text-muted); }
.class-info-row dd { margin: 0; font-weight: var(--font-weight-medium); text-align: right; }

/* Formulários de página inteira (contato, interesse, login) */
.form-page {
    max-width: 640px;
    margin-inline: auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* Página de login (shell visual — autenticação real na Etapa 3) */
.auth-card { max-width: 420px; margin-inline: auto; }

/* Páginas legais (política de privacidade, termos, LGPD, cookies) */
.legal-content { max-width: 760px; margin-inline: auto; }
.legal-content h2 { margin-top: var(--space-7); font-size: var(--text-xl); }
.legal-content p, .legal-content li { color: var(--text-color); line-height: var(--line-height-relaxed); }

/* Mapa (contato) */
.map-embed {
    width: 100%;
    aspect-ratio: 16/9;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-alt-color);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* =========================================================================
 * ETAPA 11 — REDESIGN DA HOME ("dark tech premium")
 * -------------------------------------------------------------------------
 * Bloco novo, com classes prefixadas ".pub-" para não colidir com nenhuma
 * classe usada por outras páginas públicas ainda não redesenhadas (Cursos,
 * Turmas, Curso individual, Sobre, Professores, Galeria, Contato, Login,
 * páginas legais, páginas de erro) — todas continuam usando as classes
 * antigas (.hero, .badge-eyebrow, .cta-section, .teacher-grid, .card,
 * .feature-card etc.), definidas acima e inalteradas nesta etapa.
 *
 * Usa só os tokens ADITIVOS de variables.css (prefixo --pub-) mais os
 * tokens originais do Design System (--space-*, --radius-*, --text-*
 * etc.) — nenhuma cor "solta" fora do sistema de variáveis.
 * ========================================================================= */

/* Título/rótulo pequeno acima de cada heading de seção */
.pub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--pub-font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-primary);
    margin-bottom: var(--space-3);
}
.pub-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--pub-accent);
    flex-shrink: 0;
}
.pub-eyebrow--dark { color: var(--pub-primary-light); }
.pub-eyebrow--dark::before { background-color: var(--pub-accent); box-shadow: 0 0 12px var(--pub-accent-glow); }

/* Botão outline para uso sobre fundo escuro (hero, CTA final, experiência
   prática) — variante visual só de aparência, mesma semântica de .btn */
.pub-btn-ghost-dark {
    background-color: transparent;
    border: 1px solid var(--pub-border-dark-strong);
    color: var(--pub-text);
}
.pub-btn-ghost-dark:hover { border-color: var(--pub-primary-light); color: var(--pub-text); background-color: rgba(255,255,255,0.04); }

/* -------------------------------------------------------------------
 * HERO
 * ------------------------------------------------------------------- */
.pub-hero {
    position: relative;
    background: var(--pub-gradient-hero);
    color: var(--text-color);
    padding-block: calc(var(--space-8) + var(--space-5)) var(--space-8);
    overflow: hidden;
}
/* RC2 — modificador para o único hero que permanece na zona navy
   aprovada: o hero (compacto) de /plataforma.php. Reaproveita o
   gradiente/tokens escuros que o .pub-hero usava por padrão antes da
   rc2, agora isolados nesta classe explícita em vez de serem o padrão
   de todo hero do site. */
.pub-hero--dark {
    background: var(--pub-gradient-navy);
    color: var(--pub-text);
}
.pub-hero--dark .pub-hero__title { color: var(--pub-text); }
.pub-hero--dark .pub-hero__subtitle { color: var(--pub-text-dim); }
.pub-hero--dark .pub-hero__note { color: var(--pub-text-dim); }
.pub-hero--dark .pub-hero__media img,
.pub-hero--dark .pub-hero__media-frame { border-color: var(--pub-border-dark-strong); }
.pub-hero__texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--pub-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pub-grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
    pointer-events: none;
}
.pub-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: center;
}
.pub-hero__title {
    font-family: var(--pub-font-display);
    color: var(--text-color);
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-5);
}
.pub-hero__subtitle {
    color: var(--text-muted);
    font-size: var(--text-lg);
    max-width: 520px;
    line-height: var(--line-height-relaxed);
}
.pub-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

.pub-hero__media { position: relative; }
.pub-hero__media-glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(closest-side, var(--pub-primary-glow), transparent 70%);
    filter: blur(10px);
    z-index: 0;
}
.pub-hero__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--pub-border-strong);
}
.pub-hero__media-frame {
    position: absolute;
    z-index: 2;
    top: var(--space-4);
    left: var(--space-4);
    right: -var(--space-4);
    bottom: -var(--space-4);
    border: 1px solid var(--pub-border-strong);
    border-radius: var(--radius-lg);
    pointer-events: none;
    display: none;
}

@media (min-width: 640px) {
    .pub-hero__media-frame { display: block; }
}

@media (max-width: 900px) {
    .pub-hero__inner { grid-template-columns: 1fr; }
    .pub-hero__media { order: -1; max-width: 420px; margin-inline: auto; }
}

@media (max-width: 480px) {
    .pub-hero { padding-block: var(--space-7) var(--space-6); }
    .pub-hero__subtitle { font-size: var(--text-base); }
}

/* -------------------------------------------------------------------
 * INDICADORES E2A (substitui a antiga "Prova de autoridade" — agora
 * são 4 números REAIS, calculados por PublicStatsRepository, nunca
 * hardcoded. O valor final já vem pronto no HTML pelo servidor; a
 * contagem animada (assets/js/main.js) é só um efeito visual por cima
 * dele, sempre terminando exatamente nesse mesmo número, e é pulada
 * inteiramente quando o visitante prefere menos movimento.
 * ------------------------------------------------------------------- */
.pub-stats {
    background-color: var(--pub-background);
    border-top: 1px solid var(--pub-border-light);
    border-bottom: 1px solid var(--pub-border-light);
    padding-block: var(--space-7);
}
.pub-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.pub-stats__item {
    text-align: center;
    padding-inline: var(--space-3);
    border-right: 1px solid var(--pub-border-light);
}
.pub-stats__item:last-child { border-right: none; }
.pub-stats__value {
    display: block;
    font-family: var(--pub-font-display);
    font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    background: linear-gradient(135deg, var(--pub-primary), var(--pub-primary-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pub-stats__label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .pub-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
    .pub-stats__item:nth-child(2n) { border-right: none; }
    .pub-stats__item:nth-child(n+3) { border-top: 1px solid var(--pub-border-light); padding-top: var(--space-5); }
}
@media (max-width: 480px) {
    .pub-stats__value { font-size: 1.85rem; }
}

/* -------------------------------------------------------------------
 * SEÇÕES GENÉRICAS (claro / claro-alternado / escuro)
 * ------------------------------------------------------------------- */
.pub-section { padding-block: var(--space-8); }
.pub-section--light { background-color: var(--pub-surface-light); }
.pub-section--tint { background-color: var(--pub-surface-light-alt); }
.pub-section--dark {
    background-color: var(--pub-bg);
    color: var(--pub-text);
}
.pub-section--dark h2,
.pub-section--dark h3 { color: var(--pub-text); }
.pub-section--dark p { color: var(--pub-text-dim); }

.pub-section__header { max-width: 640px; margin-bottom: var(--space-6); }
.pub-section__header--center { margin-inline: auto; text-align: center; }
.pub-section__lead { color: var(--text-muted); font-size: var(--text-base); }
.pub-section--dark .pub-section__lead { color: var(--pub-text-dim); }

/* Cards de curso/turma/professor dentro de uma seção da Home ganham um
   toque a mais de elevação no hover — reaproveita .course-card/.teacher-card
   de components.css sem alterar esse arquivo (seletor mais específico,
   escopado só dentro de .pub-card-grid). */
.pub-card-grid .card--elevated:hover,
.pub-card-grid .card.card--elevated:hover {
    transform: translateY(-4px);
    box-shadow: var(--pub-shadow-card);
}

/* Fase 2 (§17): pequenos complementos visuais do course-card/class-card
   (categoria em destaque, "próxima turma") — não altera components.css,
   só adiciona classes novas usadas dentro do partial. */
.pub-course-card__category {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pub-primary);
}
.pub-course-card__next { color: var(--text-muted); }

/* Fase 2 (§21): destaca visualmente turmas com inscrições abertas/
   últimas vagas — só um contorno de destaque, não altera o badge nem a
   lógica de status. :has() com fallback silencioso em navegadores sem
   suporte (o card continua normal, sem nenhum funcionamento quebrado). */
.pub-card-grid .course-card:has(.badge-success),
.pub-card-grid .course-card:has(.badge-warning) {
    border-color: var(--pub-primary);
}

/* -------------------------------------------------------------------
 * FEATURE CARDS ("Por que estudar na E2A Repair")
 * ------------------------------------------------------------------- */
.pub-feature-card {
    background-color: var(--pub-surface-light);
    border: 1px solid var(--pub-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.pub-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--pub-primary-light);
}
.pub-feature-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--pub-primary-soft);
    color: var(--pub-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.pub-feature-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.pub-feature-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* -------------------------------------------------------------------
 * SEÇÕES EM DUAS COLUNAS (Experiência prática / Estrutura / Sobre)
 * ------------------------------------------------------------------- */
.pub-split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-7);
    align-items: center;
}
.pub-split--reverse { grid-template-columns: 1.05fr 0.95fr; }
.pub-split--reverse .pub-split__content { order: 1; }
.pub-split--reverse .pub-split__media { order: 2; }

.pub-split__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.pub-split__lead { font-size: var(--text-base); line-height: var(--line-height-relaxed); margin-bottom: var(--space-5); }
.pub-section--light .pub-split__lead,
.pub-section--tint .pub-split__lead { color: var(--text-muted); }

.pub-split__media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.pub-section--dark .pub-split__media img { border: 1px solid var(--pub-border-dark-strong); }

.pub-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.pub-checklist li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.pub-section--dark .pub-checklist li { color: var(--pub-text-dim); }
.pub-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background-color: var(--pub-accent-soft);
    border: 1px solid var(--pub-accent);
}
.pub-checklist li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.55em;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid var(--pub-accent);
    border-bottom: 1.5px solid var(--pub-accent);
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .pub-split,
    .pub-split--reverse { grid-template-columns: 1fr; }
    .pub-split--reverse .pub-split__content,
    .pub-split--reverse .pub-split__media { order: initial; }
    .pub-split__media { max-width: 480px; margin-inline: auto; }
}

/* Grade pequena de fotos (seção Estrutura) */
.pub-structure-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-3);
}
.pub-structure-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    aspect-ratio: 1/1;
}
.pub-structure-grid img:first-child {
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.pub-structure-placeholder {
    aspect-ratio: 4/3;
    border: 1px dashed var(--pub-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--pub-surface-light-alt);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

@media (max-width: 560px) {
    .pub-structure-grid { grid-template-columns: 1fr 1fr; }
    .pub-structure-grid img:first-child { grid-row: auto; aspect-ratio: 1/1; }
}

/* -------------------------------------------------------------------
 * CERTIFICAÇÃO
 * ------------------------------------------------------------------- */
.pub-cert {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
.pub-cert__icon {
    width: 72px;
    height: 72px;
    margin-inline: auto;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-full);
    background-color: var(--pub-primary-soft);
    border: 1px solid var(--pub-primary-light);
    color: var(--pub-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pub-cert__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.pub-cert__lead { color: var(--text-muted); margin-bottom: var(--space-6); }

/* -------------------------------------------------------------------
 * GALERIA (prévia na Home — grid editorial simples, sem lightbox)
 * ------------------------------------------------------------------- */
.pub-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.pub-gallery-grid__item {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1/1;
}
.pub-gallery-grid__item:first-child,
.pub-gallery-grid__item:nth-child(4) { grid-row: span 2; aspect-ratio: 1/2.06; }
.pub-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.pub-gallery-grid__item:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
    .pub-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .pub-gallery-grid__item:first-child,
    .pub-gallery-grid__item:nth-child(4) { grid-row: span 1; aspect-ratio: 1/1; }
}
@media (max-width: 480px) {
    .pub-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------
 * GALERIA COMPLETA (/galeria — Fase 2 §26): grid editorial em colunas
 * CSS (masonry simples, sem JS) + lightbox opcional via <dialog>.
 * ------------------------------------------------------------------- */
.pub-gallery-masonry {
    columns: 4;
    column-gap: var(--space-3);
}
.pub-gallery-masonry__item {
    display: block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0;
    padding: 0;
    background: none;
    cursor: zoom-in;
}
.pub-gallery-masonry__item img {
    width: 100%;
    display: block;
    transition: transform var(--transition-base);
}
.pub-gallery-masonry__item:hover img,
.pub-gallery-masonry__item:focus-visible img { transform: scale(1.03); }
.pub-gallery-masonry__item:focus-visible { outline: 2px solid var(--pub-primary); outline-offset: 2px; }

@media (max-width: 992px) { .pub-gallery-masonry { columns: 3; } }
@media (max-width: 640px) { .pub-gallery-masonry { columns: 2; } }

.pub-lightbox {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: min(90vw, 1000px);
    max-height: 90vh;
    background-color: var(--pub-bg);
    box-shadow: var(--pub-shadow-card);
}
.pub-lightbox::backdrop { background-color: rgba(5, 43, 70, 0.80); }
.pub-lightbox__image {
    display: block;
    max-width: min(90vw, 1000px);
    max-height: 78vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.pub-lightbox__caption {
    color: var(--pub-text-dim);
    font-size: var(--text-sm);
    text-align: center;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
}
.pub-lightbox__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--pub-border-dark-strong);
    background-color: var(--pub-surface-dark);
    color: var(--pub-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.pub-lightbox__close:hover { background-color: rgba(255, 255, 255, 0.1); }
.pub-lightbox:focus-visible,
.pub-lightbox__close:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }

/* -------------------------------------------------------------------
 * CONTATO (/contato — Fase 2 §27): lista de canais diretos
 * ------------------------------------------------------------------- */
.pub-contact-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pub-contact-list li {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
.pub-contact-list li:last-child { border-bottom: none; }
.pub-contact-list__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.pub-contact-list li a,
.pub-contact-list li > span:not(.pub-contact-list__label) {
    font-size: var(--text-base);
    color: var(--text-color);
}
.pub-contact-list li a:hover { color: var(--pub-primary); }

/* -------------------------------------------------------------------
 * VALIDAR CERTIFICADO (Fase 2 §28): 3 estados visuais bem distintos —
 * só cor/ícone de apresentação, nenhuma mudança na lógica de validação.
 * ------------------------------------------------------------------- */
.pub-cert-result { border-left-width: 4px; border-left-style: solid; }
.pub-cert-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}
.pub-cert-result--valido { border-left-color: var(--success-color); }
.pub-cert-result--valido .pub-cert-result__icon { background-color: var(--success-bg); color: var(--success-color); }
.pub-cert-result--cancelado { border-left-color: var(--danger-color); }
.pub-cert-result--cancelado .pub-cert-result__icon { background-color: var(--danger-bg); color: var(--danger-color); }
.pub-cert-result--substituido { border-left-color: var(--text-muted); }
.pub-cert-result--substituido .pub-cert-result__icon { background-color: var(--surface-alt-color); color: var(--text-muted); }
.pub-cert-result--nao-encontrado { border-left-color: var(--warning-color); }
.pub-cert-result--nao-encontrado .pub-cert-result__icon { background-color: var(--warning-bg); color: var(--warning-color); }

/* -------------------------------------------------------------------
 * AUTENTICAÇÃO (login / esqueci-senha / redefinir-senha — Fase 2
 * §29-30): tela dividida — painel institucional (só decorativo) +
 * formulário. Reaproveitada pelas 3 páginas de autenticação para manter
 * o mesmo Design System. No mobile, o painel institucional é escondido
 * (form-first, pedido explícito do cliente).
 * ------------------------------------------------------------------- */
.pub-auth { min-height: calc(100vh - var(--pub-header-height)); display: flex; }
.pub-auth__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.pub-auth__intro {
    background-color: var(--pub-bg);
    color: var(--pub-text);
    display: flex;
    align-items: center;
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
}
.pub-auth__intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, var(--pub-accent-glow), transparent 60%);
    opacity: 0.35;
    pointer-events: none;
}
.pub-auth__intro-inner { position: relative; max-width: 420px; }
.pub-auth__intro-inner h2 {
    color: var(--pub-text);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    margin: var(--space-3) 0 var(--space-4);
}
.pub-auth__intro-inner p { color: var(--pub-text-dim); margin-bottom: var(--space-5); }
.pub-auth__intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pub-auth__intro-list li {
    color: var(--pub-text-dim);
    font-size: var(--text-sm);
    padding-left: var(--space-5);
    position: relative;
}
.pub-auth__intro-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--pub-accent);
}
.pub-auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-5);
    background-color: var(--pub-surface-light);
}
.pub-auth__form-inner { width: 100%; max-width: 420px; }
.pub-auth__title { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-2); }
.pub-auth__form-inner form { margin-top: var(--space-5); }
/* Fase 2 — mesmo caso do .course-sidebar: .btn tem white-space:nowrap em
   components.css. Rótulos longos ("Enviar link de recuperação") forçavam
   .pub-auth__form (item do grid .pub-auth__grid) a um min-content maior
   que a viewport em telas bem estreitas (320-360px). Os botões aqui já
   são .btn-block — permitir quebra é seguro. */
.pub-auth__form-inner .btn { white-space: normal; }

@media (max-width: 900px) {
    .pub-auth__grid { grid-template-columns: 1fr; }
    .pub-auth__intro { display: none; }
    .pub-auth__form { padding-block: var(--space-6); }
}

/* -------------------------------------------------------------------
 * PÁGINAS DE ERRO (403/404/419/500 — Fase 2 §32): visual único,
 * nunca expõe detalhe técnico (isso é regra do PHP, não deste CSS) e
 * sempre traz um CTA claro de volta para a Home.
 * ------------------------------------------------------------------- */
.pub-error {
    min-height: calc(100vh - var(--pub-header-height));
    display: flex;
    align-items: center;
    background-color: var(--pub-bg);
    position: relative;
    overflow: hidden;
}
.pub-error::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--pub-accent-glow), transparent 60%);
    opacity: 0.3;
    pointer-events: none;
}
.pub-error__inner {
    position: relative;
    max-width: 560px;
    text-align: center;
    margin-inline: auto;
}
.pub-error__code {
    display: block;
    font-family: var(--pub-font-display);
    font-weight: var(--font-weight-bold);
    font-size: clamp(3.5rem, 3rem + 4vw, 6rem);
    line-height: 1;
    color: var(--pub-text);
    opacity: 0.18;
    margin-bottom: var(--space-2);
}
.pub-error__title { color: var(--pub-text); font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.pub-error__text { color: var(--pub-text-dim); margin-bottom: var(--space-6); }
.pub-error__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------
 * FAQ (accordion nativo <details>/<summary>, sem JS)
 * ------------------------------------------------------------------- */
.pub-faq { max-width: 760px; margin-inline: auto; }
.pub-faq__list { display: grid; gap: var(--space-3); }
.pub-faq__item {
    background-color: var(--pub-surface-light);
    border: 1px solid var(--pub-border-light);
    border-radius: var(--radius-md);
    padding: 0 var(--space-5);
}
.pub-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    cursor: pointer;
    list-style: none;
}
.pub-faq__question::-webkit-details-marker { display: none; }
.pub-faq__chevron { color: var(--text-muted); flex-shrink: 0; transition: transform var(--transition-fast); }
.pub-faq__item[open] .pub-faq__chevron { transform: rotate(180deg); color: var(--pub-primary); }
.pub-faq__answer { padding-bottom: var(--space-4); }
.pub-faq__answer p { color: var(--text-muted); margin: 0; font-size: var(--text-sm); line-height: var(--line-height-relaxed); }

/* -------------------------------------------------------------------
 * CTA FINAL
 * ------------------------------------------------------------------- */
.pub-cta { max-width: 680px; margin-inline: auto; text-align: center; }
/* Fase 2 — títulos de CTA às vezes interpolam nome de curso (ex.: "...
   Microssoldagem Avançada em Placas?"), que pode conter uma palavra
   longa sem quebra natural. Sem overflow-wrap, essa palavra "vaza" da
   caixa (ink overflow) e alarga o scrollWidth da página inteira em
   viewports bem estreitos (320px), mesmo sem nenhuma caixa de layout
   realmente exceder a tela — por isso não aparecia em auditorias que só
   olham getBoundingClientRect(). */
.pub-cta__title { font-size: var(--text-3xl); color: var(--pub-text); margin-bottom: var(--space-4); overflow-wrap: break-word; }
.pub-cta__lead { color: var(--pub-text-dim); font-size: var(--text-lg); margin-bottom: var(--space-6); }
.pub-cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------
 * PLATAFORMA E2A — elementos reaproveitados na seção "Plataforma E2A"
 * da Home e na landing institucional /plataforma.php (ver ATUALIZAÇÃO
 * DE ESCOPO da Etapa 11). Nenhuma assinatura/acesso real existe ainda
 * — estes estilos só comunicam visualmente "em preparação".
 * ------------------------------------------------------------------- */

/* Hero mais compacto (sem grid de duas colunas/imagem) — usado quando
   a seção é só texto + badge, como em /plataforma.php. */
.pub-hero--compact {
    padding-block: calc(var(--space-8) + var(--space-3)) var(--space-7);
}
.pub-hero--compact .pub-platform-badge { margin-top: var(--space-2); }
.pub-hero--compact .pub-eyebrow { margin-top: var(--space-3); }
@media (max-width: 480px) {
    .pub-hero--compact { padding-block: var(--space-7) var(--space-6); }
}

/* Selo "Em breve" — reforça, em qualquer lugar que apareça, que a
   Plataforma E2A ainda não está disponível para assinatura/acesso.
   Trocar o texto do selo (não a cor/formato) é o suficiente quando o
   estágio mudar (ex.: "Em breve" -> "Novo"). */
.pub-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--pub-accent-soft);
    border: 1px solid var(--pub-accent);
    color: var(--pub-accent);
    font-family: var(--pub-font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.pub-platform-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--pub-accent);
    box-shadow: 0 0 8px var(--pub-accent-glow);
    flex-shrink: 0;
}
.pub-platform-badge--inline {
    margin: 0 0 0 var(--space-2);
    vertical-align: middle;
    font-size: 0.65rem;
    padding: 2px var(--space-2);
}

/* Feature cards em fundo escuro (seção "O que vai ter" / "Plataforma
   E2A") — mesma estrutura de .pub-feature-card, só invertendo cores
   para funcionar dentro de .pub-section--dark. */
.pub-feature-card--dark {
    background-color: var(--pub-surface-dark);
    border-color: var(--pub-border-dark);
}
.pub-feature-card--dark:hover {
    border-color: var(--pub-primary-light);
    box-shadow: var(--pub-shadow-card);
}
.pub-feature-card--dark .pub-feature-card__icon {
    background-color: rgba(0, 229, 199, 0.12);
    color: var(--pub-accent);
}
.pub-feature-card--dark h3 { color: var(--pub-text); }
.pub-feature-card--dark p { color: var(--pub-text-dim); }

/* Card "silenciado" — usado só no item "Assinatura mensal (em
   breve)", para deixar claro que ainda não é um recurso disponível
   como os demais cards ao lado. */
.pub-feature-card--muted {
    background-color: transparent;
    border-style: dashed;
    border-color: var(--pub-border-dark-strong);
}
.pub-feature-card--muted:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--pub-border-dark-strong);
}
.pub-feature-card--muted .pub-feature-card__icon {
    background-color: transparent;
    border: 1px solid var(--pub-border-dark-strong);
    color: var(--pub-text-faint);
}
.pub-feature-card--muted h3 { color: var(--pub-text-dim); }
.pub-feature-card--muted p { color: var(--pub-text-faint); }

/* CTA horizontal (texto à esquerda + botão à direita) — usado na
   seção "Quer ser avisado" de /plataforma.php. */
.pub-cta-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.pub-cta-inline > a { flex-shrink: 0; }
@media (max-width: 640px) {
    .pub-cta-inline { text-align: center; justify-content: center; }
    .pub-cta-inline > a { width: 100%; }
}

/* -------------------------------------------------------------------
 * SEÇÃO "PLATAFORMA E2A" (Home) — tratamento visual distinto/premium,
 * com um mockup estático de fórum só para composição (ver comentário
 * em index.php: nada ali é lido/gravado do banco). Prepara a
 * linguagem visual de um futuro fórum (Etapa 12) sem construir nada
 * funcional agora — só CSS/HTML decorativo.
 * ------------------------------------------------------------------- */
.pub-platform {
    position: relative;
    border-top: 1px solid var(--pub-border-dark);
    overflow: hidden;
}
.pub-platform__glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 55%;
    aspect-ratio: 1/1;
    background: radial-gradient(closest-side, var(--pub-accent-glow), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    /* Fase 2: reduzido mais uma vez (pedido do cliente: menos "gamer",
       mais comercial/premium) — era 100% opaco antes. */
    opacity: 0.45;
}
.pub-platform__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
    align-items: center;
}
/* Evita o "blowout" clássico do Grid: sem min-width:0, um item de grid
   não encolhe abaixo do tamanho intrínseco do próprio conteúdo, então
   em telas estreitas o conteúdo/mockup passavam da coluna e ficavam
   cortados (a seção tem overflow:hidden por causa do glow decorativo,
   então o corte não gerava scroll horizontal na página — só sumia
   texto, silenciosamente). */
.pub-platform__content,
.pub-platform__mockup {
    min-width: 0;
}
.pub-platform__title {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    margin-bottom: var(--space-4);
}
.pub-platform__lead {
    color: var(--pub-text-dim);
    font-size: var(--text-base);
    max-width: 540px;
    margin-bottom: var(--space-6);
}
.pub-platform__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.pub-platform__features .pub-feature-card { padding: var(--space-4); }
.pub-platform__features .pub-feature-card__icon { width: 40px; height: 40px; margin-bottom: var(--space-3); }
.pub-platform__features .pub-feature-card h3 { font-size: var(--text-base); }
.pub-platform__features .pub-feature-card p { font-size: var(--text-xs); }

/* "Janela" do mockup — só decorativa (aria-hidden no HTML) */
.pub-platform-window {
    display: grid;
    grid-template-columns: 168px 1fr;
    background-color: var(--pub-surface-dark);
    border: 1px solid var(--pub-border-dark-strong);
    border-radius: var(--radius-lg);
    /* Fase 2: sombra de brilho trocada por uma sombra de cartão comum —
       o box-shadow glow anterior (var(--pub-shadow-glow-primary)) ficava
       forte demais no conjunto com o glow decorativo da seção. */
    box-shadow: var(--pub-shadow-card);
    overflow: hidden;
}
.pub-platform-window__sidebar {
    background-color: var(--pub-bg);
    border-right: 1px solid var(--pub-border-dark);
    padding: var(--space-4) var(--space-3);
    /* mesmo motivo do min-width:0 acima: sem isso, a lista de nav (que
       vira uma fila horizontal com scroll em telas estreitas) empurra
       esta coluna do grid para muito além da largura disponível. */
    min-width: 0;
}
.pub-platform-window__brand {
    display: block;
    font-family: var(--pub-font-display);
    font-weight: var(--font-weight-bold);
    color: var(--pub-text);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}
.pub-platform-window__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.pub-platform-window__nav span {
    font-size: var(--text-xs);
    color: var(--pub-text-faint);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
}
.pub-platform-window__nav span.is-active {
    color: var(--pub-text);
    background-color: rgba(255, 255, 255, 0.06);
    font-weight: var(--font-weight-medium);
}
.pub-platform-window__main { padding: var(--space-4); min-width: 0; overflow: hidden; }
.pub-platform-window__header {
    font-size: var(--text-xs);
    color: var(--pub-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--pub-border-dark);
}
.pub-platform-thread {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--pub-border-dark);
}
.pub-platform-thread:last-child { border-bottom: none; }
.pub-platform-thread__title {
    color: var(--pub-text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    margin: var(--space-2) 0 var(--space-1);
}
.pub-platform-thread__meta { color: var(--pub-text-faint); font-size: var(--text-xs); margin: 0; }

/* Badges de papel — mesma linguagem visual prevista para o futuro
   fórum (PROFESSOR / ESPECIALISTA / ALUNO / ADMINISTRADOR); nenhuma
   dessas telas existe ainda, isto é só o vocabulário visual. */
.pub-platform-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}
.pub-platform-role--prof { background-color: rgba(79, 147, 240, 0.20); color: var(--pub-primary-light); }
.pub-platform-role--esp { background-color: rgba(42, 167, 255, 0.20); color: #7CC4FF; }
.pub-platform-role--aluno { background-color: rgba(255, 255, 255, 0.08); color: var(--pub-text-dim); }
.pub-platform-role--admin { background-color: rgba(255, 176, 32, 0.16); color: #FFB020; }

/* Prévia "Métodos Exclusivos" consolidada dentro da seção Plataforma
   (Fase 2 — antes era uma seção .pub-section--tint solta). */
.pub-platform__methods {
    position: relative;
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--pub-border-dark);
}
.pub-platform__methods-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}
.pub-platform__methods-header h3 {
    color: var(--pub-text);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    margin: var(--space-2) 0 0;
}
.pub-method-card.pub-method-card--dark {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--pub-border-dark);
}
.pub-method-card.pub-method-card--dark .pub-method-card__category { color: var(--pub-text); }
.pub-method-card.pub-method-card--dark .pub-method-card__meta {
    color: var(--pub-text-dim);
    border-bottom-color: var(--pub-border-dark);
}
.pub-method-card.pub-method-card--dark .pub-method-card__footer { color: var(--pub-text-faint); }

@media (max-width: 960px) {
    .pub-platform__grid { grid-template-columns: 1fr; }
    .pub-platform__mockup { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 700px) {
    .pub-platform__methods .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pub-platform__features { grid-template-columns: 1fr; }
    .pub-platform-window { grid-template-columns: 1fr; }
    .pub-platform-window__sidebar {
        border-right: none;
        border-bottom: 1px solid var(--pub-border-dark);
        padding: var(--space-3);
    }
    .pub-platform-window__nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-2);
    }
    .pub-platform-window__nav span { white-space: nowrap; }
    .pub-platform-window__brand { margin-bottom: var(--space-2); }
}

/* =========================================================================
 * ATUALIZAÇÃO DE REFERÊNCIA VISUAL — rodada seguinte da Etapa 11
 * -------------------------------------------------------------------------
 * Três Pilares, Métodos Exclusivos (preview) e Comunidade/Fórum (mockup).
 * Mesma disciplina de sempre: só tokens --pub-*/--space-*/etc. já
 * existentes, classes novas prefixadas ".pub-" para não colidir com nada.
 * ========================================================================= */

/* Nota de turmas/vagas no Hero (dado real, só aparece quando há turma) */
.pub-hero__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.pub-hero__note-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--pub-accent);
    box-shadow: 0 0 8px var(--pub-accent-glow);
    flex-shrink: 0;
}

/* Hero um pouco menos decorativo (pedido do cliente: menos elementos
   tecnológicos competindo com a mensagem principal) */
.pub-hero__texture { opacity: 0.55; }
.pub-hero__media-glow { opacity: 0.7; }

/* -------------------------------------------------------------------
 * ECOSSISTEMA E2A / TRÊS PILARES — RC2: seção passou de fundo escuro
 * para clara (".pub-pillars" agora usa ".pub-section--tint"). Os 3
 * cards diferenciam a identidade de cada frente do ecossistema:
 * Cursos (padrão, azul primário), Plataforma E2A (".--navy", único
 * card que mantém tratamento escuro — é a área aprovada para navy) e
 * Comunidade (".--highlight", azul secundário/accent sobre card claro).
 * ------------------------------------------------------------------- */
.pub-pillar-card {
    position: relative;
    background-color: var(--pub-surface-light);
    border: 1px solid var(--pub-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pub-pillar-card__index {
    font-family: var(--pub-font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--pub-primary);
    letter-spacing: 0.05em;
}
.pub-pillar-card h3 { color: var(--text-color); font-size: var(--text-xl); margin: var(--space-1) 0 var(--space-2); }
.pub-pillar-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); flex-grow: 1; }
.pub-pillar-card__badge { margin: 0 0 var(--space-1) !important; align-self: flex-start; }
.pub-pillar-card .btn { align-self: flex-start; }

/* Comunidade — card claro com destaque em azul secundário (accent) */
.pub-pillar-card--highlight { border-color: var(--pub-accent); }
.pub-pillar-card--highlight .pub-pillar-card__index { color: var(--pub-accent); }

/* Plataforma E2A — único pilar que permanece na zona navy aprovada */
.pub-pillar-card--navy {
    background-color: var(--pub-navy);
    border-color: var(--pub-navy-light);
}
.pub-pillar-card--navy .pub-pillar-card__index { color: var(--pub-text-faint); }
.pub-pillar-card--navy h3 { color: var(--pub-text); }
.pub-pillar-card--navy p { color: var(--pub-text-dim); }

/* -------------------------------------------------------------------
 * MÉTODOS EXCLUSIVOS E2A (preview — nenhum dado real ainda)
 * ------------------------------------------------------------------- */
.pub-method-card {
    background-color: var(--pub-surface-light);
    border: 1px dashed var(--pub-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.pub-method-card__badge { margin: 0 0 var(--space-3) !important; }
.pub-method-card__category {
    display: block;
    font-family: var(--pub-font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}
.pub-method-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--pub-border-light);
}
.pub-method-card__footer { display: flex; gap: var(--space-3); color: var(--text-muted); }

/* -------------------------------------------------------------------
 * COMUNIDADE / FÓRUM
 * ------------------------------------------------------------------- */
.pub-community-step { text-align: center; padding: 0 var(--space-2); }
.pub-community-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--pub-primary-soft);
    color: var(--pub-primary);
    font-family: var(--pub-font-display);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}
.pub-community-step h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.pub-community-step p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

.pub-forum-mockup {
    margin-top: var(--space-7);
    background-color: var(--pub-bg);
    border: 1px solid var(--pub-border-dark-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--pub-shadow-card);
}
.pub-forum-mockup__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--pub-border-dark);
}
.pub-forum-mockup__categories span {
    font-size: var(--text-xs);
    color: var(--pub-text-dim);
    background-color: var(--pub-surface-dark);
    border: 1px solid var(--pub-border-dark);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
}
.pub-forum-mockup__list { display: grid; gap: var(--space-3); }
.pub-forum-card {
    background-color: var(--pub-surface-dark);
    border: 1px solid var(--pub-border-dark);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.pub-forum-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.pub-forum-card__title { color: var(--pub-text); font-size: var(--text-sm); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-1); }
.pub-forum-card__meta { color: var(--pub-text-faint); font-size: var(--text-xs); margin: 0; }
.pub-forum-card__status {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.pub-forum-card__status--open { background-color: rgba(110, 155, 255, 0.16); color: #8FC1FF; } /* RC2 auditoria WCAG: var(--pub-primary-light) dava 2.94:1 aqui (reprovado); #8FC1FF = 4.89:1 (AA) sobre este badge */
.pub-forum-card__status--answered { background-color: rgba(255, 176, 32, 0.16); color: #FFB020; }
/* "Resolvida" é um dos casos explicitamente permitidos para manter o
   verde semântico (RC2 §2/§46) — usa os tokens de --success-color
   (compartilhados, intocados) em vez do --pub-accent decorativo, que
   deixou de ser ciano/verde nesta versão. */
.pub-forum-card__status--resolved { background-color: rgba(18, 183, 106, 0.18); color: #4ADE80; }

@media (min-width: 640px) {
    .pub-forum-mockup__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .pub-community-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
}

/* -------------------------------------------------------------------
 * JORNADA DO ALUNO (Fase 2 — nova, linha do tempo curta e estática,
 * sem JS/animação: Curso → Prática → Certificação → Plataforma →
 * Comunidade → Evolução contínua. Vira sequência vertical no mobile.
 * ------------------------------------------------------------------- */
.pub-journey__list {
    display: flex;
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
}
.pub-journey__step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--space-2);
}
.pub-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 27px);
    right: calc(-50% + 27px);
    height: 2px;
    background-color: var(--border-color);
}
.pub-journey__index {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background-color: var(--pub-primary);
    color: #fff;
    font-family: var(--pub-font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.pub-journey__step--final .pub-journey__index { background-color: var(--pub-accent); }
.pub-journey__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
}
@media (max-width: 720px) {
    .pub-journey__list { flex-direction: column; align-items: stretch; gap: var(--space-5); }
    .pub-journey__step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 0;
    }
    .pub-journey__step:not(:last-child)::after {
        top: 34px;
        left: 17px;
        right: auto;
        bottom: -20px;
        width: 2px;
        height: auto;
    }
    .pub-journey__index { margin-bottom: 0; margin-right: var(--space-3); flex-shrink: 0; }
}

/* -------------------------------------------------------------------
 * Acessibilidade — respeita preferência por menos movimento
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pub-gallery-grid__item img,
    .pub-feature-card,
    .pub-feature-card--dark,
    .site-header,
    .mobile-nav__panel,
    .mobile-nav__backdrop {
        transition: none !important;
    }
}