/* =============================================================================
 * plataforma.css — landing "Conheça a plataforma" (/plataforma)
 *
 * Direção: EDITORIAL PREMIUM (o padrão desta casa — docs/design.md §10).
 * Antes: gradiente teal chapado, tudo Tailwind inline, tipografia fixa, zero
 * hierarquia. Era o retrato dos 3 erros do design.md §1.
 *
 * A vitrine de CURSOS não é estilizada aqui — ela já estava pronta e fica intacta.
 * Este arquivo cuida das seções de INFORMAÇÃO: hero, produtos, categorias,
 * vantagens e CTA.
 *
 * Prefixo obrigatório .plt-* (a página divide DOM com menu lateral e footer).
 * ========================================================================== */

/* --- acentos: cada cor significa uma coisa (design.md §3.2) ---------------- */

.plt {
    --plt-ink:    #071a18;  /* tinta — base do hero e do CTA escuro */
    --plt-ink-2:  #0d2b27;
    --plt-teal:   #14b8a6;  /* a marca */
    --plt-mint:   #5eead4;  /* a marca sobre fundo escuro */
    --plt-amber:  #f59e0b;  /* certificado / conquista */
    --plt-violet: #8b5cf6;  /* gente, comunidade, instrutor */
    --plt-sky:    #38bdf8;  /* acesso, alcance, disponibilidade */
}

/* --- base ------------------------------------------------------------------ */

/* O preset 'public' tem menu lateral: a largura útil NÃO é a viewport (design.md §7) */
.plt-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

.plt-sec { padding-block: 5rem; }

@media (max-width: 768px) {
    .plt-sec { padding-block: 3.5rem; }
}

.plt-eyebrow {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plt-teal);
    margin-bottom: .625rem;
}

[data-theme="dark"] .plt-eyebrow { color: var(--plt-mint); }

.plt-h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--text);
    text-wrap: balance;
    margin: 0 0 .75rem;
}

.plt-lead {
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    line-height: 1.65;
    color: var(--muted);
    max-width: 42rem;
    text-wrap: pretty;
    margin: 0;
}

.plt-head-center { text-align: center; margin-bottom: 3rem; }
.plt-head-center .plt-lead { margin-inline: auto; }

/* --- hero ------------------------------------------------------------------ */

.plt-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    /* 3 camadas: dois halos + base. Gradiente sozinho fica chapado (design.md §3.3) */
    background:
        radial-gradient(58rem 38rem at 84% 6%, rgba(139, 92, 246, .26), transparent 60%),
        radial-gradient(46rem 32rem at 6% 94%, rgba(20, 184, 166, .32), transparent 62%),
        linear-gradient(160deg, var(--plt-ink-2), var(--plt-ink) 55%, #04110f);
}

/* granulado: tira o "plástico" do gradiente */
.plt-hero::before,
.plt-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.plt-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    padding-block: 5.5rem;
}

@media (min-width: 1024px) {
    .plt-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

@media (max-width: 768px) {
    .plt-hero-grid { padding-block: 3.5rem; gap: 2.5rem; }
}

.plt-selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .875rem;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 1.5rem;
}

.plt-selo svg { width: 1rem; height: 1rem; stroke: var(--plt-mint); }

.plt-h1 {
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 700;
    text-wrap: balance;
    margin: 0 0 1.25rem;
}

.plt-h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--plt-mint), var(--plt-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.plt-hero-lead {
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 34rem;
    text-wrap: pretty;
    margin: 0 0 2rem;
}

/* busca */
.plt-busca { max-width: 34rem; margin-bottom: 1.5rem; }

.plt-busca-caixa {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem;
    border-radius: .875rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(10px);
    transition: border-color .2s ease, background .2s ease;
}

.plt-busca-caixa:focus-within {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .19);
}

.plt-busca-ic { flex-shrink: 0; padding-left: .5rem; color: rgba(255, 255, 255, .7); }
.plt-busca-ic svg { width: 1.25rem; height: 1.25rem; }

.plt-busca-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    padding: .5625rem .25rem;
    font-size: 1rem;
    font-family: inherit;
}

.plt-busca-input::placeholder { color: rgba(255, 255, 255, .6); }

/* botões */
.plt-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

.plt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .8125rem 1.5rem;
    border-radius: .75rem;
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.plt-btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.plt-btn--claro { background: #fff; color: #0f766e; }
.plt-btn--claro:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }

.plt-btn--fantasma {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
}

.plt-btn--fantasma:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }

/* Mobile: CTA principal de largura total (design.md §8) */
@media (max-width: 560px) {
    .plt-btns { flex-direction: column; }
    .plt-btns .plt-btn { width: 100%; }
}

/* O botao da busca usa .plt-btn mas NAO e' CTA: ele divide a caixa com o input.
   Sem isto, a regra de largura total do mobile o fazia comer metade da caixa. */
.plt-busca-caixa .plt-btn {
    width: auto;
    flex: 0 0 auto;
    min-height: 2.75rem;   /* alvo de toque de 44px */
    padding: .625rem 1.125rem;
}

/* números do hero */
.plt-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.plt-num__n {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #fff;
}

.plt-num__r {
    display: block;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .66);
    margin-top: .125rem;
}

/* --- o palco: a "janela do curso" (mostra o produto, design.md §6) --------- */

.plt-palco { position: relative; }

.plt-janela {
    position: relative;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(12px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .42);
    overflow: hidden;
    animation: pltFlutua 7s ease-in-out infinite;
}

@keyframes pltFlutua {
    50% { transform: translateY(-14px); }
}

.plt-janela__barra {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .75rem .875rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.plt-janela__ponto {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
}

.plt-janela__corpo { padding: 1rem; }

/* "vídeo" tocando */
.plt-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: .625rem;
    background: linear-gradient(140deg, rgba(20, 184, 166, .34), rgba(139, 92, 246, .3));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .875rem;
}

.plt-play {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
}

.plt-play::after {
    content: "";
    border-style: solid;
    border-width: .5rem 0 .5rem .8125rem;
    border-color: transparent transparent transparent #0f766e;
    margin-left: .1875rem;
}

/* anel pulsando em volta do play */
.plt-play-anel {
    position: absolute;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .5);
    animation: pltPulso 2.6s ease-out infinite;
}

@keyframes pltPulso {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* progresso */
.plt-prog {
    height: .375rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
    margin-bottom: .875rem;
}

.plt-prog__b {
    height: 100%;
    width: 68%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--plt-teal), var(--plt-mint));
}

/* lista de módulos */
.plt-mods { display: grid; gap: .5rem; }

.plt-mod {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .06);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .82);
}

.plt-mod__c {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(94, 234, 212, .22);
    color: var(--plt-mint);
}

.plt-mod__c svg { width: .75rem; height: .75rem; stroke-width: 3; }

.plt-mod--vazio .plt-mod__c { background: rgba(255, 255, 255, .12); }

/* selo de certificado pendurado na janela */
.plt-cert {
    position: absolute;
    right: -.75rem;
    bottom: -1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-radius: .75rem;
    background: var(--plt-ink-2);
    border: 1px solid color-mix(in srgb, var(--plt-amber) 42%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    font-size: .8125rem;
    font-weight: 600;
    color: #fff;
}

.plt-cert svg { width: 1.125rem; height: 1.125rem; stroke: var(--plt-amber); flex-shrink: 0; }

@media (max-width: 1023px) {
    .plt-palco { display: none; }  /* o palco não cabe em coluna estreita sem virar ruído */
}

/* --- o palco com vídeo de verdade ------------------------------------------
 * Quando a equipe sobe um vídeo com a tag institucional, ele ocupa a janela no
 * lugar da cena em CSS. Proporção vertical (9:16) porque é o formato que a casa
 * já produz — ver /do-livro-ao-curso. */

.plt-janela--video {
    aspect-ratio: 9 / 16;
    max-height: 32rem;
    margin-inline: auto;
    padding: 0;
    animation: none;   /* vídeo flutuando embrulha o estômago */
}

.plt-janela--video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- os dois lados (quem aprende × quem ensina) ---------------------------- */

.plt-lados {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 860px) {
    .plt-lados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plt-lado {
    padding: 1.75rem;
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
    /* a borda de cima carrega o acento do lado: azul = aprende, âmbar = ensina */
    border: 1px solid var(--border);
    border-top: 3px solid var(--c, var(--plt-teal));
}

.plt-lado__tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c, var(--plt-teal));
    margin-bottom: 1rem;
}

.plt-passos {
    list-style: none;
    counter-reset: passo;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .875rem;
}

.plt-passos li {
    position: relative;
    counter-increment: passo;
    padding-left: 2.25rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}

.plt-passos li strong { color: var(--text); font-weight: 600; }

.plt-passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -.0625rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--c, var(--plt-teal));
    background: color-mix(in srgb, var(--c, var(--plt-teal)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--plt-teal)) 28%, transparent);
}

/* --- cartões de informação (categorias e vantagens) ----------------------- */

/* auto-FILL, nao auto-fit: com poucos itens (categoria unica publicada, p.ex.) o auto-fit
   colapsa as trilhas vazias e estica o card solitario pra largura inteira da seção. */
.plt-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

.plt-card {
    display: block;
    padding: 1.5rem;
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

a.plt-card:hover,
a.plt-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c, var(--plt-teal)) 55%, var(--border));
    box-shadow: var(--shadow-md, 0 12px 28px rgba(0, 0, 0, .1));
}

a.plt-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Um card = UM acento, passado por --c no HTML (design.md §3.2) */
.plt-card__ic {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    margin-bottom: 1rem;
    color: var(--c, var(--plt-teal));
    background: color-mix(in srgb, var(--c, var(--plt-teal)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--plt-teal)) 28%, transparent);
}

.plt-card__ic svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plt-card__t {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 .375rem;
}

.plt-card__d {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

.plt-card__link {
    display: inline-block;
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--primary);
}

/* --- CTA final ------------------------------------------------------------- */

.plt-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(44rem 30rem at 18% 12%, rgba(20, 184, 166, .34), transparent 62%),
        radial-gradient(40rem 28rem at 84% 88%, rgba(139, 92, 246, .28), transparent 60%),
        linear-gradient(150deg, var(--plt-ink-2), var(--plt-ink));
}

.plt-cta__in { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }

.plt-cta h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 700;
    text-wrap: balance;
    margin: 0 0 1rem;
}

.plt-cta p {
    font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
    max-width: 36rem;
    margin: 0 auto 2rem;
    text-wrap: pretty;
}

.plt-cta .plt-btns { justify-content: center; }

/* --- revelação no scroll (só esconde se o JS estiver vivo — design.md §5) -- */

.plt-js .plt-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--rv-delay, 0s),
                transform .7s cubic-bezier(.16, 1, .3, 1) var(--rv-delay, 0s);
}

.plt-js .plt-rv.is-in { opacity: 1; transform: none; }

/* --- movimento morre pra quem pediu --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .plt-janela { animation: none; }
    .plt-play-anel { animation: none; opacity: .4; transform: scale(1.25); }
    .plt-js .plt-rv { opacity: 1; transform: none; transition: none; }
    .plt-btn:hover,
    a.plt-card:hover { transform: none; }
}