/* FaithRO / Prontera. Identidade e composicao sobre os componentes funcionais. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/nunitosans-latin.woff2") format("woff2");
}

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root { --hero-papel: #fffdf8; --hero-vidro: #fffdf8ed; --hero-nevoa: #fffdf8bb; }
  :root[data-tema="escuro"] { --hero-papel: #111e2b; --hero-vidro: #111e2bf5; --hero-nevoa: #111e2b99; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) { --hero-papel: #111e2b; --hero-vidro: #111e2bf5; --hero-nevoa: #111e2b99; }
  }
}

@layer base {
  body { letter-spacing: 0.005em; }
  h1, h2, h3 { letter-spacing: -0.025em; font-weight: 600; overflow-wrap: anywhere; }
  h1 { font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }
  :where(select, textarea) { font: inherit; }
  :where(summary, button, a) { -webkit-tap-highlight-color: transparent; }
}

@layer layout {
  .limite { padding-inline: clamp(1.125rem, 3vw, 2.5rem); }
  main { padding-block: 3rem 5rem; gap: 1.75rem; }
  .topo { position: relative; z-index: 5; }
  .topo-interno { min-block-size: 6rem; flex-wrap: nowrap; gap: 1.5rem; }
  .navegacao-desktop { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex: 1; }
  .navegacao-mobile { display: none; }
  .pagina-inicial > main { max-inline-size: none; padding: 0; display: block; }
  .inicio-conteudo { padding-block-end: 5rem; }
  .inicio-conteudo > .secao-inicio, .convite-jornada { margin-block-start: 5rem; }
  .estrutura-equipe { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; gap: 2.5rem; }
  .lateral-equipe { position: sticky; inset-block-start: 1.5rem; }
  .conteudo-equipe { min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .rodape { background: var(--superficie); }
  .rodape-interno { padding-block: 2.5rem; gap: 1.75rem 2rem; }
  .rodape-marca { flex-basis: 100%; display: flex; align-items: center; gap: 1.5rem; }
  .rodape-marca p { font-family: var(--fonte-titulo); font-size: 1rem; }
  .rodape-interno > p:last-child { flex-basis: 100%; max-inline-size: none; padding-block-start: 1.5rem; border-block-start: 1px solid var(--linha); }
}

@layer components {
  .aviso-previa { padding: 0.4rem 1rem; background: var(--fundo); color: var(--texto-suave); border-block-end: 1px solid var(--linha); text-align: center; font-size: 0.75rem; }
  .aviso-previa a { display: inline-block; padding: 0.35rem; }
  .acesso-legenda { text-align: center; }
  /* Brasao e navegacao. Os menus nativos funcionam tambem sem JavaScript. */
  .marca { gap: 0.7rem; font-size: 1.9rem; letter-spacing: -0.05em; }
  .marca-icone { inline-size: 2.6rem; block-size: 3.2rem; }
  .marca-nome { line-height: 1.1; }
  .marca-legenda { display: block; margin-block-start: 0.45rem; font: 700 0.48rem/1.2 var(--fonte-texto); letter-spacing: 0.12em; color: var(--texto-suave); }
  .marca-ro { color: var(--destaque); }
  .menu { flex-wrap: nowrap; gap: 0.15rem; font-size: 0.9rem; }
  .menu a { padding-inline: 0.7rem; }
  .menu-informacoes { position: relative; }
  .menu-informacoes > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-block-size: var(--alvo-toque); padding-inline: 0.7rem; color: var(--texto-suave); cursor: pointer; list-style: none; border-radius: var(--raio-pequeno); font-weight: 500; }
  .menu-informacoes > summary::-webkit-details-marker { display: none; }
  .menu-informacoes[open] > summary, .menu-informacoes[data-atual] > summary { color: var(--texto); background: var(--fundo); }
  .submenu { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; min-inline-size: 14rem; max-inline-size: calc(100vw - 3rem); display: grid; padding: 0.5rem; list-style: none; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); z-index: 6; }
  .submenu a { inline-size: 100%; }
  .menu .botao { padding-inline: 1.1rem; }
  .navegacao-mobile > summary, .equipe-mobile > summary { min-block-size: var(--alvo-toque); display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 0.8rem; border: 1px solid var(--borda-campo); border-radius: var(--raio-pequeno); cursor: pointer; font-weight: 700; list-style: none; }
  .navegacao-mobile > summary::-webkit-details-marker, .equipe-mobile > summary::-webkit-details-marker { display: none; }
  .navegacao-mobile[open] > summary, .equipe-mobile[open] > summary { background: var(--fundo); }
  .botao { box-sizing: border-box; min-block-size: 3rem; padding: 0.6rem 1.4rem; font-size: 0.95rem; border-width: 1px; border-radius: 0.3rem; letter-spacing: 0.01em; }
  .botao-secundario { background: var(--superficie); }
  .botao-pequeno { min-block-size: 2.75rem; font-size: 0.875rem; }
  .sobretitulo { font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 800; }
  .link-seta { display: inline-flex; gap: 0.6rem; align-items: center; min-block-size: 2.75rem; font-size: 0.875rem; font-weight: 750; text-decoration: none; }
  .link-seta:hover { text-decoration: underline; }

  /* Abertura ilustrada: todo o texto continua em HTML. */
  .hero { position: relative; isolation: isolate; background: var(--hero-papel); overflow: hidden; }
  .hero-cenario { position: absolute; z-index: -2; inset: 0; }
  .hero-cenario img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 58%; }
  .hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--hero-papel) 2%, var(--hero-vidro) 27%, var(--hero-nevoa) 44%, transparent 72%), linear-gradient(0deg, var(--hero-papel), transparent 24%); }
  .hero-interno { min-block-size: 39rem; display: flex; align-items: center; padding-block: 4rem 6rem; }
  .hero-texto { max-inline-size: 35rem; display: grid; gap: 1.5rem; }
  .hero h1 { font-size: clamp(2.7rem, 2rem + 2.4vw, 4.4rem); line-height: 1.13; color: var(--texto); font-weight: 500; }
  .hero h1 em { font-style: normal; color: var(--marca-forte); }
  .hero .sobretitulo { display: flex; gap: 0.65rem; align-items: center; }
  .hero .sobretitulo span { font-size: 1.1rem; }
  .hero .chamada { max-inline-size: 43ch; color: var(--texto-suave); font-size: 1.05rem; line-height: 1.75; }
  .hero-nota { color: var(--texto); font-size: 0.8rem; }
  .status-faixa { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 2rem; margin-block-start: -2rem; padding: 1rem 1.5rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
  .status-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.5rem; }
  .status-faixa .status-geral { font: 750 0.875rem/1.5 var(--fonte-texto); letter-spacing: 0; }
  .status-faixa .jogadores { font-size: 0.875rem; }
  .status-faixa .status-detalhe { min-inline-size: 8rem; }
  .status-faixa .status-detalhe[open] { flex-basis: 100%; order: 3; }
  .status-faixa .status-lista { max-inline-size: 30rem; }
  .status-faixa .status-detalhe > summary { font-size: 0.825rem; }
  .inicio-numeros { padding-block: 2.75rem 0; }
  .inicio-numeros .numeros { gap: 0; }
  .inicio-numeros .numeros > div { border: 0; border-inline-end: 1px solid var(--linha); background: none; text-align: center; border-radius: 0; padding: 0.5rem 1rem; gap: 0.5rem; }
  .inicio-numeros .numeros > div:last-child { border: 0; }
  .inicio-numeros .numeros dd { color: var(--marca-forte); font-weight: 500; font-size: 2.6rem; }
  .inicio-numeros .numeros dt { font-size: 0.8rem; }
  .titulo-secao { display: grid; gap: 0.8rem; text-align: center; justify-items: center; }
  .titulo-secao h2, .cabecalho-secao h2 { font-size: clamp(1.65rem, 1.4rem + 1vw, 2.25rem); line-height: 1.3; }
  .titulo-secao > p:last-child { color: var(--texto-suave); max-inline-size: 58ch; }
  .diferenciais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 2.5rem; gap: 3rem; }
  .diferenciais article { display: grid; gap: 0.8rem; align-content: start; text-align: center; }
  .diferenciais p { color: var(--texto-suave); font-size: 0.95rem; line-height: 1.75; }
  .icone-editorial { font-size: 2.4rem; line-height: 1.3; color: var(--destaque); }
  .convite-jornada { display: grid; justify-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--superficie); border-block: 1px solid var(--linha); position: relative; }
  .convite-jornada::before { content: "✦"; position: absolute; inset-block-start: -0.8rem; inset-inline-start: calc(50% - 1rem); inline-size: 2rem; text-align: center; color: var(--destaque); background: var(--fundo); }
  .convite-jornada .passos-resumo { inline-size: 100%; gap: 2rem; }
  .convite-jornada .passos-resumo li { background: none; padding: 0; text-align: center; gap: 0.6rem; }
  .convite-jornada .passos-resumo li::before { font-size: 1.5rem; font-weight: 400; }
  .convite-jornada .passos-resumo li strong { font-family: var(--fonte-titulo); font-weight: 600; }
  .convite-jornada .passos-resumo li span { font-size: 0.875rem; }
  .cabecalho-secao { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-block-end: 1.75rem; }
  .cabecalho-secao > div { display: grid; gap: 0.65rem; }
  .noticias-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; }
  .noticias-inicio .noticia { padding: 1.5rem 0; border-block-start: 1px solid var(--linha); display: grid; gap: 0.8rem; align-content: start; }
  .noticias-inicio .noticia h3 { font-size: 1.25rem; line-height: 1.5; }
  .noticias-inicio .noticia h3 a { color: var(--texto); text-decoration: none; }
  .noticias-inicio .noticia h3 a:hover { color: var(--marca); text-decoration: underline; }
  .noticias-inicio .noticia > p:not(.nota) { max-inline-size: 65ch; color: var(--texto-suave); font-size: 0.95rem; }
  .informacoes-inicio .cartao { box-shadow: none; }
  .informacoes-inicio .lista-curta { font-size: 0.875rem; }
  .informacoes-inicio .pares { font-size: 0.9rem; }
  .pagina-inicial .mensagens { max-inline-size: var(--largura-max); padding: 1rem 2rem; margin-inline: auto; }

  /* Formularios e consultas: uma linguagem unica, com foco na tarefa. */
  .cabecalho-pagina { padding-block-end: 1.5rem; border-block-end: 1px solid var(--linha); gap: 0.75rem; }
  .cabecalho-pagina .intro { max-inline-size: 65ch; }
  .pagina-acesso { background: var(--fundo); }
  .pagina-acesso main { position: relative; isolation: isolate; }
  .pagina-acesso main::before { content: ""; position: absolute; z-index: -1; inset: 3rem 0 auto auto; inline-size: 35%; block-size: 32rem; background: linear-gradient(0deg, var(--fundo), transparent 65%), url("images/prontera-768.webp") center/cover; border-radius: var(--raio); opacity: 0.4; }
  .pagina-acesso .painel-form { max-inline-size: 35rem; }
  .pagina-acesso .painel-form > h1 { text-align: center; }
  .pagina-acesso .painel-form > :is(.intro, .nota) { text-align: center; }
  .painel-form .formulario { border-block-start: 3px solid var(--enfeite); }
  .painel-form, .campo { min-inline-size: 0; }
  .formulario { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
  .pares dd { min-inline-size: 0; overflow-wrap: anywhere; text-align: end; }
  .campo :is(input, select, textarea) { min-inline-size: 0; }
  .painel-form > .aviso { text-align: start; }
  .busca { background: var(--superficie); border: 1px solid var(--linha); padding: 1.25rem; border-radius: var(--raio); }
  .busca > input { min-inline-size: 0; max-inline-size: 100%; }
  .campo-busca { min-inline-size: 0; }
  .campo-busca :is(input, select) { inline-size: 100%; min-inline-size: 0; }
  .tabela-rolagem { max-inline-size: 100%; scrollbar-gutter: stable; }
  .tabela thead { background: var(--fundo); }
  .tabela thead th { padding-block: 0.85rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .tabela td { padding-block: 0.8rem; font-size: 0.9rem; }
  .tabela tbody td:first-child { font-weight: 650; }
  .tabela-compacta td { padding-block: 0.5rem; font-size: 0.85rem; }
  .abas { max-inline-size: 100%; }
  .abas a { font-size: 0.875rem; }
  .abas ul { row-gap: 0.5rem; }
  .paginacao { padding-block: 0.75rem; border-block-start: 1px solid var(--linha); font-size: 0.9rem; }
  .guia { gap: 1.25rem; }
  .guia > li { padding: clamp(1.25rem, 3vw, 2rem); }
  .guia > li > p { max-inline-size: 70ch; }
  .guia > li h2 { font-size: 1.3rem; }
  .configuracoes-avancadas { display: grid; gap: 1rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--linha); }
  details.opcional { display: block; }
  .opcional[open] > :not(summary) { margin-block-start: 1rem; }
  .opcional summary { font-family: var(--fonte-texto); font-size: 1rem; }
  .cartao-personagem { position: relative; border-block-start: 3px solid var(--enfeite); padding-block-start: 1.5rem; }
  .cartao-personagem::before { content: "✧"; color: var(--destaque); font-size: 1.8rem; }
  .cartao-personagem h3 { font-size: 1.25rem; }
  .conta-atalhos { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .vazio { padding: 1.5rem; background: var(--superficie); border: 1px dashed var(--borda-campo); border-radius: var(--raio); }

  /* Ferramentas da equipe: densidade e acoes sempre explicitas. */
  .equipe-identidade { display: grid; gap: 0.4rem; padding: 0 0.5rem 1.5rem; border-block-end: 1px solid var(--linha); margin-block-end: 1rem; }
  .equipe-identidade strong { font-family: var(--fonte-titulo); font-size: 1.2rem; }
  .equipe-identidade span { font-size: 0.75rem; color: var(--texto-suave); overflow-wrap: anywhere; }
  .equipe-mobile { display: none; }
  .equipe-links ul { display: grid; gap: 0.2rem; padding: 0; list-style: none; }
  .equipe-links a { display: flex; align-items: center; min-block-size: 2.75rem; padding: 0.6rem 0.85rem; border-radius: var(--raio-pequeno); color: var(--texto-suave); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
  .equipe-links a:hover { color: var(--texto); background: var(--superficie); }
  .equipe-links a[aria-current="page"] { background: var(--superficie); color: var(--marca-forte); box-shadow: inset 3px 0 var(--enfeite); }
  .equipe-grupo { color: var(--texto-suave); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.13em; margin: 1.25rem 0.85rem 0.5rem; }
  .pagina-equipe .cabecalho-pagina h1 { font-size: 2rem; }
  .pagina-equipe .numeros { gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  .pagina-equipe .numeros > div { padding: 1rem; border-inline-start-width: 2px; }
  .pagina-equipe .numeros dd { font-size: 1.75rem; }
  .pagina-equipe .cartao { box-shadow: none; }
  .pagina-equipe .formulario-inline { padding: 1rem; border: 1px solid var(--linha); border-radius: var(--raio); }
  .pagina-equipe section:has(> #titulo-acoes) { border-block-start: 3px solid var(--erro); }
  .pagina-equipe .botao-perigo { min-block-size: 3rem; }
}

@media (width >= 86rem) {
  @layer layout { .pagina-equipe .limite { max-inline-size: 90rem; } }
}
@media (width < 75rem) {
  @layer components { .marca-legenda { display: none; } .menu { font-size: 0.85rem; } .menu a, .menu-informacoes > summary { padding-inline: 0.55rem; } }
  @layer layout { .topo-interno { gap: 1rem; } .navegacao-desktop { gap: 0.5rem; } }
}
@media (width < 65rem) {
  @layer layout {
    .topo-interno { min-block-size: 4.75rem; }
    .navegacao-desktop { display: none; }
    .navegacao-mobile { display: block; margin-inline-start: auto; }
    .estrutura-equipe { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .lateral-equipe { position: static; }
  }
  @layer components {
    .marca { font-size: 1.7rem; }
    .marca-icone { inline-size: 2.2rem; block-size: 2.75rem; }
    .navegacao-mobile-conteudo { position: absolute; inset: 100% 0 auto; background: var(--superficie); border-block-end: 1px solid var(--linha); box-shadow: var(--sombra); padding: 1rem clamp(1.125rem, 3vw, 2.5rem); max-block-size: calc(100dvh - 5rem); overflow-y: auto; }
    .navegacao-mobile .menu { display: grid; gap: 0.25rem; font-size: 1rem; }
    .navegacao-mobile .menu a { inline-size: 100%; }
    .navegacao-mobile .menu-conta { margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--linha); }
    .navegacao-mobile .submenu { position: static; box-shadow: none; margin-block: 0.25rem; min-inline-size: 0; max-inline-size: none; border: 0; padding-inline-start: 1rem; }
    .navegacao-mobile .menu-informacoes > summary { padding-inline: 0.7rem; }
    .equipe-desktop { display: none; }
    .equipe-mobile { display: block; }
    .equipe-mobile > summary { justify-content: space-between; background: var(--superficie); }
    .equipe-mobile .equipe-links { margin-block-start: 0.75rem; }
    .equipe-identidade { display: none; }
    .hero-interno { min-block-size: 36rem; }
    .hero-texto { max-inline-size: 31rem; }
  }
}
@media (width < 44rem) {
  @layer layout {
    main { padding-block: 2rem 3rem; gap: 1.5rem; }
    .inicio-conteudo { padding-block-end: 3rem; }
    .inicio-conteudo > .secao-inicio, .convite-jornada { margin-block-start: 3.25rem; }
    .rodape-marca { display: grid; gap: 0.5rem; }
  }
  @layer components {
    .hero-interno { min-block-size: 43rem; align-items: start; padding-block: 2.75rem 14rem; }
    .hero-texto { gap: 1.2rem; max-inline-size: 100%; }
    .hero h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); max-inline-size: 15ch; }
    .hero .chamada { font-size: 1rem; line-height: 1.65; max-inline-size: 40ch; }
    .hero::before { background: linear-gradient(180deg, var(--hero-papel) 1%, var(--hero-vidro) 40%, var(--hero-nevoa) 58%, transparent 80%, var(--hero-papel) 100%); }
    .hero-cenario img { object-position: 72% bottom; }
    .hero .sobretitulo { font-size: 0.64rem; letter-spacing: 0.1em; }
    .hero .botao { padding-inline: 1rem; font-size: 0.875rem; }
    .hero-nota { font-size: 0.75rem; }
    .status-faixa { margin-block-start: -1.5rem; padding: 1rem; gap: 0.25rem 0.75rem; }
    .status-resumo { flex-basis: 100%; gap: 0.25rem 1rem; }
    .status-faixa .status-detalhe { flex: 1; }
    .status-faixa .status-detalhe[open] { order: 3; flex-basis: 100%; }
    .inicio-numeros { padding-block-start: 1.5rem; }
    .inicio-numeros .numeros { gap: 1.5rem 0; }
    .inicio-numeros .numeros > div:nth-child(2) { border: 0; }
    .inicio-numeros .numeros dd { font-size: 2.15rem; }
    .inicio-numeros .numeros dt { font-size: 0.72rem; }
    .diferenciais { grid-template-columns: 1fr; gap: 2rem; margin-block-start: 2rem; }
    .diferenciais article { max-inline-size: 36ch; margin-inline: auto; }
    .convite-jornada { padding-inline: 1rem; }
    .convite-jornada .passos-resumo { grid-template-columns: 1fr; gap: 1.75rem; }
    .convite-jornada .passos-resumo li { max-inline-size: 32ch; margin-inline: auto; }
    .pagina-acesso main::before { display: none; }
    .pagina-equipe .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .busca { padding: 1rem; }
    .tabela th, .tabela td { padding-inline: 0.65rem; }
    .tabela td { font-size: 0.85rem; }
    .tabela-rolagem::after { content: "Deslize a tabela para ver todas as colunas, se necessário."; display: block; padding: 0.65rem; font-size: 0.75rem; color: var(--texto-suave); border-block-start: 1px solid var(--linha); }
    .cabecalho-pagina { padding-block-end: 1rem; }
    .pagina-equipe .grade-cartoes { grid-template-columns: minmax(0, 1fr); }
  }
}
@media (forced-colors: active) {
  @layer components { .hero-cenario { display: none; } .status-faixa { border-color: CanvasText; } .equipe-links a[aria-current] { outline: 1px solid Highlight; } }
}
@media (prefers-reduced-motion: reduce) {
  @layer components { :is(.status-detalhe, .opcional) > summary::before { transition: none; } }
}