/* Shared foundation. Load after page styles; page-specific layouts stay local. */
/* Fonte do site, servida daqui (só o alfabeto latino, com acentos). */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #f5f6f8;
  --panel: #ffffff;
  --ink: #101828;
  --muted: #667085;
  --line: #e2e6ed;
  --blue: #2864d8;
  --font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 12px;
  --control-radius: 8px;
  --hero-radius: 14px;
  --card-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
  --status-normal: #23814b;
  --status-issue: #b42318;
  --status-closed: #667085;
  --detail-card-radius: var(--card-radius);
  --detail-card-border: var(--line);
  --detail-card-shadow: var(--card-shadow);
  --shadow: var(--card-shadow);
  --shell-gutter: 17px;
}

[hidden] { display: none !important; }
/* <span> com o peso de <strong>/<b>: negrito visual sem marcar o texto como ênfase. */
.u-strong, .u-b { font-weight: bolder; }
body { font-family: var(--font-family); color: var(--ink); background: var(--paper); }
button, input, select, textarea { font-family: inherit; }
button:not(:disabled), summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(40, 100, 216, .45); outline-offset: 3px; }

.app-header, .detail-topbar, .privacy-header { background: var(--panel); border-color: var(--line); }
.station-topbar { --detail-color: var(--panel); }
.icon-button, .privacy-back { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--control-radius); color: var(--ink); background: #f2f4f7; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.menu-button { background: transparent; }
.icon-button:hover { background: #eaf1ff; color: #1f55b5; }

.home-shell .line-card, .blog-card, .related-posts, .article-unavailable, .line-directory-card {
  border-radius: var(--card-radius);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
.home-shell .search-box { border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.home-shell .line-status { color: var(--status-normal); }
.home-shell .has-issue .line-status { color: var(--status-issue); }
.home-shell .is-closed .line-status { color: var(--status-closed); }
.home-shell .line-status i { background: currentColor; box-shadow: none; }
.blog-pagination a, .article-unavailable > a, .article-sources a { border-radius: var(--control-radius); }

/* The same drawer on every public page, including offline pages. */
.nav-drawer { width: min(86vw, 340px); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--panel); box-shadow: 22px 0 60px rgba(16,24,40,.18); }
.nav-drawer::backdrop { background: rgba(16,24,40,.48); backdrop-filter: blur(2px); }
.drawer-shell { display: grid; min-height: 100%; grid-template-rows: auto 1fr auto; }
.drawer-header { display: flex; min-height: 77px; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 17px 14px; border-bottom: 1px solid var(--line); }
.drawer-header img { display: block; width: 150px; height: auto; }
.drawer-close { background: #f2f4f7; }
.drawer-content { min-width: 0; padding: 24px 17px; }
.drawer-label { margin: 0 0 9px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.drawer-nav { display: grid; gap: 5px; }
.drawer-link { display: grid; width: 100%; min-height: 48px; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border: 0; border-radius: var(--control-radius); color: #1d2939; background: transparent; font: inherit; font-weight: 720; text-align: left; text-decoration: none; }
.drawer-link[aria-current="page"], .drawer-link:hover { color: #1f55b5; background: #eaf1ff; }
.drawer-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.drawer-link.drawer-install-button { margin-top: 10px; color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(40,100,216,.24); }
.drawer-link.drawer-install-button:hover, .drawer-link.drawer-install-button:focus-visible { color: #fff; background: #1f55b5; }
.drawer-install-button[hidden] { display: none; }
.drawer-section + .drawer-section { margin-top: 28px; }
.drawer-socials { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.social-link { display: grid; min-width: 0; min-height: 60px; place-items: center; align-content: center; gap: 4px; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--control-radius); color: #344054; background: var(--panel); font-size: .76rem; font-weight: 700; text-align: center; text-decoration: none; }
.social-link:hover { border-color: #a9c3f8; color: #1f55b5; background: #f5f8ff; }
.social-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.drawer-footer { padding: 18px 17px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

.site-footer { position: relative; display: grid; gap: 12px; margin-top: 36px; padding: 24px 0 max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.site-footer::before { content: none; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; }
.site-footer a { color: #344054; font-weight: 720; text-decoration: none; }
.site-footer a:hover { color: #1f55b5; text-decoration: underline; }
.site-footer p { margin: 0; line-height: 1.5; }

/* Informational and editorial heroes share the line/station visual treatment. */
.blog-hero, .privacy-intro, .station-directory-hero { position: relative; isolation: isolate; overflow: hidden; padding: 24px 22px; border: 1px solid #dce5f4; border-radius: var(--hero-radius); background: linear-gradient(115deg, rgba(255,255,255,.98), rgba(238,244,255,.9)), repeating-linear-gradient(90deg, transparent 0 31px, rgba(40,100,216,.06) 31px 32px); box-shadow: var(--card-shadow); }
.blog-hero::after, .privacy-intro::after, .station-directory-hero::after { position: absolute; z-index: -1; top: -38px; right: -46px; width: 150px; height: 150px; border: 22px solid rgba(40,100,216,.06); border-radius: 50%; background: none; opacity: 1; transform: none; content: ""; }
.blog-hero h1, .privacy-intro h1, .station-directory-hero h1 { font-size: clamp(1.55rem,6vw,2rem); line-height: 1.1; letter-spacing: -.04em; }
.privacy-eyebrow, .blog-eyebrow { color: #375d9c; font-size: .74rem; font-weight: 780; letter-spacing: .14em; }
.privacy-main { width: min(100%,620px); margin: 0 auto; padding: 28px var(--shell-gutter) 44px; }
.privacy-header__inner { width: min(100%,620px); padding-right: var(--shell-gutter); padding-left: var(--shell-gutter); }
.privacy-main .site-breadcrumbs { margin: 0 0 20px; }
.site-breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .75rem; }
.site-breadcrumbs a { color: #475467; text-decoration: none; }
.site-breadcrumbs [aria-current] { color: var(--ink); font-weight: 720; }
.visual-breadcrumbs li + li::before { content: '>'; }

@media (min-width:720px) { :root { --shell-gutter:24px; } }
@media (min-width:960px) {
  :root { --shell-gutter:28px; }
  .privacy-main, .privacy-header__inner { width: min(100%,800px); }
  .nav-drawer { width: min(86vw,420px); }
  .drawer-header, .drawer-footer { padding-right: 26px; padding-left: 26px; }
  .drawer-content { padding: 30px 26px; }
  .drawer-header img { width: 166px; }
  .drawer-link { min-height: 54px; }
  .social-link { min-height: 64px; }
}
@media (max-width:430px) { .blog-hero, .privacy-intro, .station-directory-hero { padding: 22px 16px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .site-footer, .nav-drawer, .privacy-header { display: none; } }

/* Resposta direta "está funcionando agora?" no topo das páginas de estação. */
.station-answer { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #cfe7d8; border-radius: 10px; color: #14532d; background: #ecf7f0; font-size: 1rem; font-weight: 750; line-height: 1.4; }
.station-answer--issue { border-color: #f4c7c3; color: #8f1d14; background: #fdf0ee; }
.station-answer--closed { border-color: #e2e6ed; color: #344054; background: #f2f4f7; }
.station-answer--planned { border-color: #f1d9ad; color: #6b3f00; background: #fdf3e2; }

/* Faixas de ponta a ponta usam 100vw, que inclui a barra de rolagem: corta o excesso sem rolagem lateral. */
html, body { overflow-x: clip; }

/* Expresso Aeroporto na página da Linha 13. */

/* ---------- Páginas de linha e estação ----------
   A cor oficial da linha identifica a página (como na sinalização); o estado
   da operação é dado por cor de borda e fundo, não por ícones decorativos. */
.line-hero, .station-hero {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
  box-shadow: none;
}
.line-hero::before, .station-hero::before,
.line-hero::after, .station-hero::after { display: none; }
.line-hero { padding-top: 28px; }
.station-hero { padding-top: 28px; }
.line-hero .large-badge { width: 64px; height: 64px; font-size: 1.5rem; box-shadow: none; }
.line-hero { grid-template-columns: 70px minmax(0, 1fr); }
.line-hero .detail-kicker, .station-hero .detail-kicker { color: var(--muted); letter-spacing: .02em; text-transform: none; font-size: .82rem; }

.detail-status { box-shadow: none; }
.detail-status.is-normal { border-color: #cfe7d8; background: #f3faf6; }
.detail-status.has-issue { border-color: #f4c7c3; background: #fdf3f2; }
.detail-status.is-closed { background: #f7f8fa; }

.favorite-wide { display: grid; gap: 2px; padding: 10px 16px; place-items: center; text-align: center; box-shadow: none; }
.favorite-wide :is(strong, .u-strong) { font-size: 1rem; }
.favorite-wide small { color: var(--muted); font-size: .82rem; font-weight: 600; }
.favorite-wide:not(.is-favorite) { border-color: #0b55c6; color: #ffffff; background: #0b55c6; }
.favorite-wide:not(.is-favorite) small { color: #d7e3f7; }
.favorite-wide.is-favorite { border-color: #cfe7d8; color: #14532d; background: #f3faf6; }
.report-wide { box-shadow: none; }

.station-line-card { box-shadow: none; }
.station-line-card[data-state="issue"] { border-color: #f4c7c3; background: #fdf3f2; }
.station-line-card[data-state="closed"] { background: #f7f8fa; }
.station-info-card, .incident-history, .line-faq, .line-context, .station-neighbor-route { box-shadow: none; }
.report-wide { color: #0b55c6; background: #ffffff; border-color: #c3ccd7; }
.report-wide:hover:not(:disabled) { border-color: #0b55c6; }

/* Aviso de estação em implantação: sem faixa lateral. */
.station-notice { border: 1px solid #f1d9ad; border-left-width: 1px; border-radius: 10px; }

/* Guia editorial das páginas de linha. */
.line-guide h3 { margin: 18px 0 6px; font-size: 1rem; }
.line-guide ul { margin: 6px 0 0; padding-left: 20px; color: #344054; line-height: 1.6; }
.line-guide li + li { margin-top: 6px; }

/* ==========================================================================
   Desktop (a partir de 1100px): cabeçalho com links, conteúdo mais largo e
   coluna lateral fixa nas páginas principais. Abaixo disso, nada muda.
   ========================================================================== */
.desktop-nav { display: none; }

@media (min-width: 1100px) {
  :root { --desktop-width: 1240px; --desktop-aside: 380px; }

  /* Cabeçalho: logo, links principais e a ação da página; o menu lateral
     continua disponível só no celular. */
  .desktop-nav { display: flex; gap: 4px; margin-left: auto; }
  .desktop-nav a { white-space: nowrap; padding: 10px 14px; border-radius: var(--control-radius); color: #344054; font-size: .95rem; font-weight: 650; text-decoration: none; }
  .desktop-nav a:hover { color: #1f55b5; background: #eaf1ff; }
  .desktop-nav .desktop-nav__cta { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; color: #fff; background: var(--blue); }
  .desktop-nav .desktop-nav__cta:hover { color: #fff; background: #1f55b5; }
  .desktop-nav__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .app-header, .detail-topbar, .privacy-header .privacy-header__inner { display: flex; align-items: center; gap: 24px; }
  .app-header .menu-button, .detail-topbar .menu-button, .privacy-header .menu-button { display: none; }
  .app-header .brand-copy, .detail-topbar .detail-brand, .privacy-header .privacy-brand { order: -1; flex-shrink: 0; }
  .detail-topbar .detail-brand img, .app-header .brand-logo { width: 172px; height: auto; }
  .privacy-header .privacy-brand { place-items: center start; }
  .privacy-header .privacy-logo { width: 172px; height: auto; }

  /* Larguras */
  .app-shell, .detail-shell { width: min(100%, var(--desktop-width)); }
  .home-shell .app-header,
  .detail-topbar {
    padding-right: max(var(--shell-gutter), calc((100vw - var(--desktop-width)) / 2 + var(--shell-gutter)));
    padding-left: max(var(--shell-gutter), calc((100vw - var(--desktop-width)) / 2 + var(--shell-gutter)));
  }
  .visual-breadcrumbs ol { max-width: calc(var(--desktop-width) - var(--shell-gutter) - var(--shell-gutter)); }
  /* Mesma largura em todas as páginas; nos textos longos, linhas de leitura confortável. */
  .privacy-main, .privacy-header .privacy-header__inner { width: min(100%, var(--desktop-width)); margin-right: auto; margin-left: auto; }
  .privacy-main :is(p, li, .source-list) { max-width: 80ch; }
  .privacy-main details p { max-width: none; }
  main.map-page-shell, main.blog-shell { width: min(100%, var(--desktop-width)); padding-inline: var(--shell-gutter); }
  main.map-page-shell > .detail-topbar,
  main.blog-shell > .detail-topbar {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: max(var(--shell-gutter), calc((100vw - var(--desktop-width)) / 2 + var(--shell-gutter)));
    padding-left: max(var(--shell-gutter), calc((100vw - var(--desktop-width)) / 2 + var(--shell-gutter)));
  }
  main.blog-shell .visual-breadcrumbs ol { max-width: calc(var(--desktop-width) - var(--shell-gutter) - var(--shell-gutter)); }
  main.article-shell article { max-width: 860px; }

  /* Home: status e linhas à esquerda; alertas, estações e "como funciona" à direita. */
  .home-shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--desktop-aside); column-gap: 32px; align-items: start; }
  .home-shell > * { grid-column: 1; }
  .home-shell > .app-header, .home-shell > .home-intro, .home-shell > .site-footer { grid-column: 1 / -1; }
  .home-shell > .home-aside { grid-column: 2; grid-row: 3 / span 8; align-self: stretch; margin-top: 18px; }
  .page-aside__sticky { position: sticky; top: 24px; }
  .home-aside .alert-cta { grid-template-columns: 1fr; }

  /* Linha: status, histórico, guia e estações à esquerda; dados da linha à direita. */
  .detail-shell:has(> .line-hero),
  .detail-shell:has(> .station-hero) { display: grid; grid-template-columns: minmax(0, 1fr) var(--desktop-aside); column-gap: 32px; align-items: start; }
  .detail-shell:has(> .line-hero) > *,
  .detail-shell:has(> .station-hero) > * { grid-column: 1; }
  .detail-shell:has(> .line-hero) > :is(.detail-topbar, .visual-breadcrumbs, .site-footer),
  .detail-shell:has(> .station-hero) > :is(.detail-topbar, .visual-breadcrumbs, .site-footer) { grid-column: 1 / -1; }
  .detail-shell > .page-aside { grid-column: 2; grid-row: 3 / span 12; align-self: stretch; }
  .page-aside .line-context, .page-aside .station-information { margin-top: 0; }
  .page-aside .line-context[aria-labelledby="lineContextTitle"] { padding: 22px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--card-radius); background: var(--panel); box-shadow: var(--card-shadow); }
  .station-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-context[aria-labelledby="lineContextTitle"] .line-facts-grid,
  .station-information .station-info-grid { grid-template-columns: 1fr; }

  /* Índices: mais colunas aproveitando a largura. */
  .line-directory-group ul, .line-directory-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .station-directory { display: block; columns: 3; column-gap: 48px; }
  .station-directory-group { break-inside: avoid; margin-bottom: 28px; }
  .station-directory-group h2 { position: static; }
}

/* Entre 1100 e 1280px os links ficam mais justos para caber o botão da extensão. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .desktop-nav { gap: 0; }
  .desktop-nav a { padding: 10px; font-size: .9rem; }
  .desktop-nav .desktop-nav__cta { margin-left: 6px; }
}

/* Notícias recentes na página da linha. */
.line-news__list { display: grid; margin: 0; padding: 0; list-style: none; }
.line-news__list li + li { border-top: 1px solid var(--line); }
.line-news__list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 12px 2px; color: var(--ink); text-decoration: none; }
.line-news__list a:hover .line-news__title { color: var(--blue); text-decoration: underline; }
.line-news__title { grid-column: 2; font-weight: 700; line-height: 1.35; }
.line-news__list small { grid-column: 2; color: var(--muted); font-size: .82rem; }
.line-news__live { grid-row: 1; align-self: center; padding: 2px 8px; border-radius: 999px; color: #fff; background: #b42318; font-size: .72rem; font-weight: 800; }
.line-news__list a:not(:has(.line-news__live)) { grid-template-columns: minmax(0, 1fr); }
.line-news__list a:not(:has(.line-news__live)) > * { grid-column: 1; }