@charset "UTF-8";

/* Camada responsiva compartilhada pelas páginas v3.
   Mantém o desktop intacto e consolida as correções para toque e telas estreitas. */

/* Os 48px de área mínima moraram aqui, fora de qualquer media query, valendo em
   qualquer largura e em qualquer ponteiro. Como esta folha carrega depois de
   `estilos.css`, ela vencia por cascata TODOS os tamanhos do design v3 — o
   "Acessar curso" desenhado com 32px chegava na tela com 48px, e o `.btn` de
   44px também virava 48px. O bloco `(pointer: coarse)` mais abaixo já tentava
   devolver o mini-cta ao tamanho de projeto, mas era inócuo: esta regra o
   alcançava primeiro.

   O piso de 48px é do dedo, não do mouse. Ele foi para `(pointer: coarse)`
   junto com os outros controles. Fora do toque vale o desenho do v3, sempre
   acima do piso da WCAG 2.2 SC 2.5.8 (24px, AA). */

html {
  overflow-x: clip;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-wrap: break-word;
}

main,
section,
.wrap,
.site-wrap {
  min-width: 0;
}

button,
a,
input,
select,
summary {
  touch-action: manipulation;
}

.menu-toggle { min-height: 48px; }

/* O CTA duplicado dentro do nav so existe no painel do celular (ver @860).
   Fora da media query ele fica oculto para nao entrar no menu do desktop. */
.main-nav .nav-cta {
  display: none;
}

/* O seletor de idioma permanece com os 32px compactos definidos em estilos.css,
   como na pagina de licenca. A area de toque e ampliada de forma invisivel no
   proprio componente compartilhado, sem aumentar visualmente o controle. */

/* Onde o ponteiro é o dedo, todo controle acionável sobe para os 48px de área
   de toque — o "Acessar curso", os botões, os chips e as pills. É a regra de
   aceite do projeto, aplicada no contexto em que ela existe para valer. */
@media (pointer: coarse) {
  button,
  .btn,
  .mini-cta,
  .chip,
  .pill {
    min-height: 48px;
    min-block-size: 48px;
  }
}

.catalog-filter-toggle {
  display: none;
}

@media (hover: none) {
  .course-card:hover,
  .summary-box:hover {
    transform: none;
  }
}

@media (max-width: 1060px) {
  /* A trava de rolagem fica no elemento raiz, nao no body. Em `body` ela nao
     travava nada (o `overflow-x: clip` do html impede a propagacao do overflow
     do body para o viewport) e ainda transformava o body em contentor de
     rolagem, o que quebrava o `position: sticky` do header: o header saia da
     tela e sobrava um vao de `--header-h` acima do painel. */
  html.menu-open {
    overflow: hidden;
  }

  /* `.site` e sticky com z-index 40, ou seja, cria contexto de empilhamento
     proprio: o z-index 80 do painel so vale DENTRO dele. Sem subir o header
     acima do veu (70), o veu escurecia o proprio menu. */
  body.menu-open .site {
    z-index: 90;
  }

  /* Veu: escurece a pagina atras do painel e da alvo de fechar em qualquer
     ponto (o clique fora ja e tratado em mobile.js). Comeca abaixo do header
     para o botao de fechar continuar legivel. */
  body.menu-open::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 70;
    background: rgba(0, 30, 30, .5);
    animation: nav-scrim-in .2s ease;
  }

  .main-nav.open {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    z-index: 80;

    /* Tres resets da regra base de estilos.css. Sem eles o painel abria com
       ~220px colado a direita (justify-self: end, que o navegador aplica ao
       item de grid mesmo posicionado) e cada link virava uma faixa de ~190px
       de altura (height: 100% esticando as linhas do grid). */
    justify-self: stretch;
    display: block;
    height: auto;

    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--teal-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 18px 38px rgba(0, 40, 40, .32);
    animation: nav-panel-in .2s ease;
  }

  .main-nav.open a {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 12px;
    border-radius: var(--radius);
    color: #fff;
    font-size: 1rem;
    line-height: 1.3;
    white-space: normal;
  }

  /* Separador entre itens, sem sobrar um traco solto no ultimo. */
  .main-nav.open a + a {
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  /* Pagina atual: no painel a diferenca so de cor/peso nao aparecia. */
  .main-nav.open a[aria-current="page"] {
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 3px 0 0 var(--gold);
    font-weight: 700;
  }

  .main-nav.open a:active {
    background: rgba(255, 255, 255, .16);
  }

  /* Entre 861px e 1060px o CTA ainda cabe no header, entao aqui ele continua
     oculto (a regra precisa vencer o `display: flex` de `.main-nav.open a`
     acima) e so reaparece no @860, quando o header o esconde. */
  .main-nav.open a.nav-cta {
    display: none;
    margin-top: 12px;
    min-height: 48px;
    justify-content: center;
    border-top: 0;
    color: var(--teal-dark);
    background: #fff;
    font-weight: 700;
  }

  @keyframes nav-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes nav-scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  .menu-toggle[aria-expanded="true"] .menu-bars {
    background: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .menu-bars,
  .menu-bars::before,
  .menu-bars::after {
    transition: transform .2s ease, top .2s ease, background .2s ease;
  }

  /* No catálogo, as facetas viram divulgação progressiva em vez de uma parede
     de opções antes dos resultados. Sem JS, o aside continua visível. */
  .catalog-filter-toggle {
    width: 100%;
    min-height: 50px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 16px;
    color: var(--teal-deep);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    font-weight: 700;
    cursor: pointer;
  }

  body.mobile-ready .catalog-filter-toggle {
    display: flex;
  }

  .catalog-layout {
    gap: 16px;
  }

  .catalog-filter-toggle > [data-filter-label] {
    flex: 1 1 auto;
    text-align: left;
  }

  /* Com o painel fechado, o contador é o único sinal de que há filtro ativo. */
  .catalog-filter-toggle .filter-toggle-badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 0 6px;
    color: var(--on-teal);
    background: var(--teal);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .catalog-filter-toggle .filter-toggle-badge[hidden] {
    display: none;
  }

  .catalog-filter-toggle::after {
    content: "+";
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1;
  }

  .catalog-filter-toggle[aria-expanded="true"]::after {
    content: "−";
  }

  .filters .filter-legend,
  .filters .filter-more-toggle,
  .filters .filters-clear {
    min-height: 44px;
  }

  body.mobile-ready .catalog-layout > .filters:not(.is-open) {
    display: none;
  }

  .catalog-layout > .filters.is-open {
    display: grid;
    margin-bottom: 8px;
  }

  .filters .filter-option,
  .filters .filter-option label {
    min-height: 44px;
  }

  .filters .filter-option input {
    width: 20px;
    height: 20px;
  }

  .filters input[type="search"],
  .filters select,
  .toolbar select,
  .projeto-busca input[type="search"] {
    font-size: 16px;
  }
}

@media (max-width: 860px) {
  /* Par da regra `.site .btn-primary { display: none }` de estilos.css: o CTA
     nao cabe mais ao lado do seletor de idioma, entao ele reaparece como
     ultimo item do painel em vez de sumir da pagina no celular. */
  .main-nav.open a.nav-cta {
    display: inline-flex;
  }

  /* O seletor de idioma sai do header compacto, junto com o CTA. Hoje ele nao
     oferece escolha nenhuma — PT e o unico ativo e EN/FR/ES aparecem como "em
     breve" — e ocupava justamente o espaco de que o nome da marca precisa.
     Quando os outros idiomas existirem, ele deve voltar como item do painel do
     menu, nao como botao solto no topo. */
  .lang-switch {
    display: none;
  }

  .site-wrap {
    column-gap: 10px;
  }

  .site-actions {
    gap: 8px;
  }

  footer .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-gutter: 16px;
    /* O header encolhe aqui; o painel e o veu leem a mesma variavel. */
    --header-h: 64px;
  }

  html {
    scroll-padding-top: 76px;
  }

  .wrap,
  .site-wrap,
  .hero-content {
    width: calc(100% - (var(--mobile-gutter) * 2));
  }

  .brand-logo {
    width: clamp(108px, 31vw, 124px);
  }

  /* O nome "Cursos Abertos" ficava oculto abaixo de 640px porque cruzava o
     seletor de idioma. Com o seletor fora do header compacto (@860 acima) ele
     volta: em vez de sumir, encolhe. Precisa ficar nesta folha — `estilos.css`
     redefine `.brand` sem media query mais abaixo no arquivo e venceria. */
  .brand {
    gap: 10px;
    font-size: clamp(.88rem, 3.4vw, 1.06rem);
  }

  .brand-divider {
    height: 26px;
  }

  .site-actions {
    gap: 6px;
  }

  .a11y-bar {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .vlibras-widget {
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  section {
    padding-block: clamp(42px, 12vw, 56px);
  }

  .section-head,
  .sec-head,
  .colecoes-subhead {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
  }

  .section-head h2,
  .sec-head h2 {
    text-wrap: balance;
  }

  .text-link,
  .sec-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .hero-content {
    margin-top: 0;
    padding-top: 40px;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(0, 45, 45, .96) 0%, rgba(0, 50, 50, .9) 64%, rgba(0, 45, 45, .97) 100%),
      linear-gradient(to top, rgba(0, 40, 40, .9), transparent 46%);
  }

  .hero-bg img {
    object-position: 66% center;
  }

  .hero h1 {
    max-width: 13ch;
    font-size: clamp(2rem, 10.5vw, 2.55rem);
    line-height: 1.08;
    text-wrap: balance;
  }

  .hero .lead {
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.58;
  }

  .hero-search {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px 8px;
    margin-top: 22px;
    padding: 8px;
    border-radius: 14px;
  }

  .hero-search-icon {
    justify-content: center;
  }

  .hero-search input {
    width: 100%;
    min-height: 48px;
    padding: 10px 2px;
    font-size: 16px;
  }

  .hero-search .btn {
    grid-column: 1 / -1;
    min-height: 48px;
    border-radius: 9px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: none;
  }

  /* Alvo de toque: no celular o botão do passo 01 sobe de 40 para 48px. */
  .passos .passo-cta {
    min-height: 48px;
    font-size: .875rem;
  }

  /* A faixa de indicadores é um `<section>`: ela vinha recebendo os ~47px de
     `padding-block` da regra genérica acima em cima E embaixo, somados à
     margem própria e ao `min-height` de cada célula. Dava ~95px de vazio
     fechando o hero, sem nada dentro. Aqui o espaçamento é só o do bloco. */
  .stats {
    margin-top: 22px;
    margin-bottom: 0;
    padding-block: 0;
  }

  .stats .wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-width: none;
    padding-block: 16px 20px;
  }

  /* Sem altura fixa: a célula tem número e rótulo, e é isso que define a linha. */
  .stat {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 12px;
  }

  /* "15 áreas de conhecimento" sai do celular (ver index.html). Com dois
     indicadores não existe mais o caso do ímpar em linha inteira. */
  .stat.is-mobile-hidden {
    display: none;
  }

  .stat strong {
    font-size: 1.5rem;
  }

  /* Com duas colunas em vez de três sobra largura: o rótulo volta aos 11px do
     desktop, em vez dos 10,4px de antes. */
  .stat-body span {
    margin-top: 5px;
    font-size: .6875rem;
  }

  .course-track {
    gap: 14px;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 4px var(--mobile-gutter) 14px;
    scroll-padding-inline: var(--mobile-gutter);
  }

  #destaques .course-carousel,
  #recentes .course-carousel,
  #mais-cursados .course-carousel {
    --vis: 1.08;
  }

  .course-track > .course-card {
    flex-basis: calc((100% - 14px * .08) / 1.08);
  }

  .course-body {
    padding: 15px 16px 17px;
  }

  .mini-cta {
    padding-inline: 14px;
  }

  .catalog-hero,
  .projeto-hero {
    padding-block: 30px 34px;
  }

  .catalog-hero .wrap {
    gap: 24px;
  }

  .catalog-hero h1,
  .projeto-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.3rem);
    text-wrap: balance;
  }

  .catalog-hero p,
  .projeto-lead {
    margin-top: 13px;
    font-size: .96rem;
    line-height: 1.55;
  }

  .catalog-summary {
    gap: 10px;
  }

  .summary-box {
    min-width: 0;
    padding: 15px 14px;
    border-radius: 12px;
  }

  .summary-icon {
    width: 36px;
    height: 36px;
  }

  .summary-box strong {
    font-size: 1.75rem;
  }

  .summary-label {
    font-size: .67rem;
    line-height: 1.35;
  }

  #lista,
  #cursos {
    padding-top: 32px;
  }

  .filters {
    padding: 16px;
  }

  .filters input[type="search"],
  .filters select,
  .toolbar select,
  .projeto-busca input[type="search"] {
    min-height: 48px;
    font-size: 16px;
  }

  .toolbar {
    width: 100%;
    gap: 12px;
  }

  .toolbar h2 {
    text-wrap: balance;
  }

  .sorter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .active-chips {
    gap: 7px;
  }

  .chip {
    padding: 8px 12px;
    text-align: left;
  }

  .projeto-brand {
    width: 100%;
    max-width: none;
  }

  .projeto-brand .projeto-logo {
    height: 112px;
  }

  .projeto-brand .projeto-logo img {
    max-height: 84px;
  }

  .crumbs {
    gap: 6px;
    margin-bottom: 14px;
    font-size: .72rem;
  }

  .projeto-meta {
    line-height: 1.55;
  }

  /* No desktop as linhas são display:contents (fluem juntas). No toque cada
     uma volta a ser uma faixa própria que rola na horizontal, sangrando até a
     borda da tela. */
  .pill-row {
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: 2px var(--mobile-gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .pill-row .pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Cada linha tem sua própria faixa: o recuo do desktop desalinharia a
     primeira pill da linha de acessibilidade. */
  #pills-extra .pill {
    margin-left: 0;
  }

  footer .wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 40px;
  }

  /* O respiro no fim e do tamanho do botao flutuante de acessibilidade, que e
     fixo no canto inferior direito: sem ele, o botao cobria a ultima linha do
     rodape — que agora leva os idiomas. */
  .foot-base .wrap {
    gap: 10px;
    padding-block: 16px calc(64px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 14px;
  }

  /* Nos 320px (o menor aparelho em uso) a marca inteira nao cabe ao lado do
     hamburguer: a logo perde 16px e o espacamento fecha, em vez de o nome
     voltar a sumir. */
  .brand-logo {
    width: 92px;
  }

  .brand {
    gap: 8px;
  }

  .catalog-summary {
    grid-template-columns: 1fr;
  }

  .summary-box {
    display: grid;
    grid-template-columns: 36px auto;
    align-items: center;
    column-gap: 12px;
  }

  .summary-icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-bars,
  .menu-bars::before,
  .menu-bars::after {
    transition: none;
  }

  .main-nav.open,
  body.menu-open::after {
    animation: none;
  }
}