/* Página inicial pública do Asty. Tokens de docs/05-identidade-visual.md (claro e escuro pelo sistema). */

/* Fontes hospedadas no próprio site (SIL Open Font License): Marcellus e Inter. */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/marcellus-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/marcellus-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fontes/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fontes/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #FBF8F2; --bg-alt: #F4EDE1; --linha: #E8DCC6; --cartao: #FFFDF9; --duna: #B07C41;
  --tinta: #2E2820; --tinta-2: #5B4E3C; --tinta-3: #6F604B;
  --egeu: #103B5E; --egeu-hover: #0B2D49; --sobre-egeu: #FFFDF9; --terracota: #A35036;
  --ok: #4A5523; --ok-bg: #EEF0DF; --atencao: #7A5212; --atencao-bg: #F8EBD0;
  --critico: #8A3F28; --critico-bg: #F5E1DA; --info: #103B5E; --info-bg: #DDEBF0;
  --veu: rgba(251, 248, 242, 0.93);
  --mosaico: url(mosaico-claro.svg); --onda: url(onda-claro.svg);
  --f-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-texto: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1C1915; --bg-alt: #221E19; --linha: #3A342B; --cartao: #26221C; --duna: #9C7442;
    --tinta: #EFE7DA; --tinta-2: #CFC4B2; --tinta-3: #B3A894;
    --egeu: #8AB4D2; --egeu-hover: #A9C9E0; --sobre-egeu: #1C1915; --terracota: #E0937A;
    --ok: #D3DBA8; --ok-bg: #353B1E; --atencao: #EBC98A; --atencao-bg: #46351A;
    --critico: #F0B4A6; --critico-bg: #4A2219; --info: #CFE3EC; --info-bg: #1B3446;
    --veu: rgba(28, 25, 21, 0.92);
    --mosaico: url(mosaico-escuro.svg); --onda: url(onda-escuro.svg);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--tinta);
  font: 400 1rem/1.6 var(--f-texto); font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--egeu); }
a:focus-visible, .botao:focus-visible { outline: 3px solid var(--egeu); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--cartao); color: var(--egeu); z-index: 10; }
.pular:focus { left: 1rem; top: 1rem; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Gutter lateral comum a todas as faixas */
.topo-in, .abertura-in, .secao-in, .chamada-in, .rodape-in {
  max-width: var(--largura); margin: 0 auto;
  padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));
}

/* Topo */
.topo { background: var(--bg); position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--linha); }
.topo-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--tinta); text-decoration: none;
  font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .04em; }
.icone-marca { width: 2rem; height: 2rem; stroke: var(--egeu); }
.menu { display: flex; gap: 1.25rem; margin-left: auto; }
.menu a { color: var(--tinta-2); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--egeu); }

.friso { height: 40px; background: var(--onda) repeat-x left center / auto 40px; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem;
  padding: .55rem 1.1rem; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; transition: background-color .15s, border-color .15s; }
.botao-primario { background: var(--egeu); color: var(--sobre-egeu); }
.botao-primario:hover { background: var(--egeu-hover); }
.botao-secundario { background: var(--cartao); color: var(--egeu); border-color: var(--duna); }
.botao-secundario:hover { background: var(--bg-alt); }
.botao-grande { min-height: 3rem; padding: .75rem 1.4rem; font-size: 1.05rem; }

/* Abertura: campo de tesselas sob um véu liso (texto nunca direto sobre o mosaico) */
.abertura { background: var(--mosaico) repeat; background-size: 192px 192px; }
.abertura-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
  padding-top: 3.5rem; padding-bottom: 3.5rem; }
.abertura-texto { background: var(--veu); padding: 2rem; border-radius: 14px; border: 1px solid var(--linha); }
.sobretitulo { color: var(--tinta-3); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); color: var(--tinta); margin-bottom: 1rem; }
.lide { font-size: 1.15rem; color: var(--tinta-2); max-width: 38rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.painel { margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(46, 40, 32, .10); }
.painel figcaption { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.painel-titulo { font-family: var(--f-display); font-size: 1.2rem; }
.salas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.salas li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg); }
.sala { font-family: var(--f-display); font-size: 1.15rem; }
.quem { color: var(--tinta-2); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-rodape { margin-top: .9rem; color: var(--tinta-3); font-size: .85rem; }

.selo { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.selo-ok { color: var(--ok); background: var(--ok-bg); }
.selo-atencao { color: var(--atencao); background: var(--atencao-bg); }
.selo-critico { color: var(--critico); background: var(--critico-bg); }
.selo-info { color: var(--info); background: var(--info-bg); }
.selo-neutro { color: var(--tinta-3); background: var(--bg-alt); border: 1px solid var(--linha); }

/* Seções */
.secao { padding: 4.5rem 0; }
.secao-alt { background: var(--bg-alt); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: .75rem; }
h2::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .75rem;
  background: linear-gradient(90deg, var(--terracota) 0 50%, var(--duna) 50% 100%); border-radius: 2px; }
.secao-lide { color: var(--tinta-2); font-size: 1.08rem; max-width: 44rem; margin-bottom: 2rem; }

.cartoes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 1.4rem; }
.cartao h3 { font-size: 1.3rem; margin: .7rem 0 .45rem; }
.cartao p { color: var(--tinta-2); font-size: .97rem; }
.icone { width: 2rem; height: 2rem; fill: none; stroke: var(--egeu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.exemplo { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: center;
  background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid var(--duna); border-radius: 12px; padding: 1.75rem; }
.exemplo h3 { font-size: 1.45rem; margin-bottom: .6rem; }
.exemplo p { color: var(--tinta-2); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.tabela th { text-align: right; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 600;
  padding: .4rem .6rem; border-bottom: 1px solid var(--linha); }
.tabela td { text-align: right; padding: .5rem .6rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela td small { color: var(--info); background: var(--info-bg); border-radius: 999px; padding: .05rem .45rem; font-size: .72rem; font-weight: 600; margin-left: .35rem; }
.tabela tbody tr:nth-child(n+2):nth-child(-n+4) td:nth-child(3) { color: var(--terracota); }

.proximos, .garantias { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; }
.proximos li, .garantias li { position: relative; padding-left: 1.6rem; color: var(--tinta-2); }
.proximos li::before, .garantias li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .7rem; height: .7rem; border-radius: 2px;
  transform: rotate(45deg); background: var(--duna); }
.garantias li::before { background: var(--egeu); }
.proximos strong, .garantias strong { color: var(--tinta); font-weight: 600; }

.chamada { background: var(--mosaico) repeat; background-size: 192px 192px;
  padding: 3.5rem max(1rem, env(safe-area-inset-right)) 3.5rem max(1rem, env(safe-area-inset-left)); }
.chamada .chamada-in { max-width: 34rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem;
  padding: 2rem 1.5rem; background: var(--veu); border: 1px solid var(--linha); border-radius: 14px; }
.chamada h2::after { margin-left: auto; margin-right: auto; }
.chamada p { color: var(--tinta-2); margin-bottom: .5rem; }

.rodape { border-top: 1px solid var(--linha); }
.rodape-in { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; padding-bottom: 1.5rem; color: var(--tinta-3); font-size: .9rem; }
.marca-rodape { font-family: var(--f-display); font-size: 1.2rem; color: var(--tinta); }

/* Telas médias e celular */
@media (max-width: 960px) {
  .abertura-in { grid-template-columns: minmax(0, 1fr); }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exemplo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .menu { display: none; }
  .topo-in { justify-content: space-between; }
  .abertura-in { padding-top: 1.5rem; padding-bottom: 1.5rem; gap: 1.25rem; }
  .abertura-texto { padding: 1.4rem; }
  .acoes .botao { flex: 1 1 100%; }
  .cartoes, .proximos, .garantias { grid-template-columns: minmax(0, 1fr); }
  .secao { padding: 3rem 0; }
  .exemplo { padding: 1.25rem; }
  .tabela { font-size: .86rem; }
  .tabela th, .tabela td { padding: .45rem .3rem; }
  .tabela td small { display: block; width: fit-content; margin: .2rem 0 0; }
}
@media (max-width: 420px) {
  .tabela th:nth-child(2), .tabela td:nth-child(2) { display: none; }
}