/* =========================================================================
   Ribeiro Cavalcante Advocacia — Leito de UTI (urgência / emergência)
   Camada de urgência sobre o design system de styles.css.
   Acrescenta: barra de emergência fixa, selo/pulso de urgência,
   faixa de plantão 24h e cartões de "contra quem" (plano x SUS).
   Vermelho de urgência derivado em oklch, harmônico com a paleta.
   ========================================================================= */

:root {
  --emerg-h: 44px;
  --urgent:        oklch(0.55 0.17 27);   /* vermelho sério, não berrante */
  --urgent-2:      oklch(0.46 0.16 27);
  --urgent-tint:   oklch(0.93 0.045 27);
  --urgent-bright: oklch(0.7 0.16 27);    /* sobre fundos escuros */
}

/* ---------- Barra de emergência (topo, fixa) ---------- */
.emerg-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 95; height: var(--emerg-h);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 0 16px;
  background: var(--urgent-2); color: #fff;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 2px 14px rgba(0,0,0,.22);
}
.emerg-bar__msg { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.emerg-bar__pulse { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; }
.emerg-bar a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 999px; font-weight: 700; white-space: nowrap;
  background: #fff; color: var(--urgent-2); transition: transform .2s var(--ease), background .2s;
}
.emerg-bar a svg { width: 15px; height: 15px; }
.emerg-bar a:hover { transform: translateY(-1px); background: #fff; }
.emerg-bar__sep { opacity: .55; }

/* empurra o header para baixo da barra */
.site-header { top: var(--emerg-h); }

/* pulso */
@keyframes rc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.emerg-bar__pulse { animation: rc-pulse 1.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .emerg-bar__pulse { animation: none; } }

/* ---------- Selo de urgência no hero ---------- */
.hero { padding-top: calc(128px + var(--emerg-h)); }
.hero__alert.is-urgent {
  background: var(--urgent-tint); border-color: color-mix(in srgb, var(--urgent) 28%, transparent);
  color: var(--urgent-2);
}
.hero__alert.is-urgent .dot {
  background: var(--urgent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgent) 55%, transparent);
  animation: rc-dot 1.8s var(--ease) infinite;
}
@keyframes rc-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--urgent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .hero__alert.is-urgent .dot { animation: none; } }

.hero h1 em.urgent { color: var(--urgent-2); }

/* botão WhatsApp continua verde; adiciono variação de urgência opcional */
.btn--urgent { background: var(--urgent); color: #fff; box-shadow: 0 8px 22px -8px var(--urgent-2); }
.btn--urgent:hover { background: var(--urgent-2); transform: translateY(-2px); }

/* ---------- Faixa "cada hora conta" / plantão 24h ---------- */
.timestrip {
  background: #050d25; color: var(--on-dark);
  border-block: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
}
.timestrip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: color-mix(in srgb, var(--on-dark) 12%, transparent); border-radius: 0;
  padding-inline: var(--gutter); }
.timestrip__cell {
  background: #050d25; padding: 30px 22px; display: flex; flex-direction: column; gap: 6px;
}
.timestrip__k {
  font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2.15rem); font-weight: 600;
  color: var(--on-dark); line-height: 1;
}
.timestrip__k .u { color: var(--urgent-bright); }
.timestrip__v { font-size: 13.5px; color: var(--on-dark-mut); line-height: 1.45; }

/* ---------- Cartões "contra quem agimos" (plano x SUS) ---------- */
.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.path {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-s);
  border-top: 3px solid var(--accent); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.path.path--sus { border-top-color: var(--urgent); }
.path__tag {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px;
}
.path--sus .path__tag { color: var(--urgent-2); }
.path__tag svg { width: 18px; height: 18px; }
.path h3 { font-size: 1.45rem; margin-bottom: 10px; }
.path > p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px; }
.path ul { display: flex; flex-direction: column; gap: 10px; }
.path li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.path li svg { flex: none; width: 18px; height: 18px; color: var(--accent-2); margin-top: 3px; }
.path--sus li svg { color: var(--urgent-2); }

/* ---------- Faixa CTA de urgência (band-dark já existe; reforço) ---------- */
.urgent-cta { text-align: center; }
.urgent-cta .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

/* destaque vermelho em "decisões" pill de urgência */
.dcard__top .pill.pill--urgent { background: var(--urgent-tint); color: var(--urgent-2); }

/* aviso de urgência no formulário */
.urgent-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--urgent-tint); border: 1px solid color-mix(in srgb, var(--urgent) 26%, transparent);
  border-left: 3px solid var(--urgent); border-radius: var(--radius-s);
  padding: 15px 17px; font-size: 14px; color: var(--urgent-2); font-weight: 500; line-height: 1.5;
  margin-bottom: 20px;
}
.urgent-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px){
  .timestrip .wrap { grid-template-columns: repeat(2, 1fr); }
  .paths { grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  :root { --emerg-h: auto; }
  .emerg-bar { position: static; flex-wrap: wrap; gap: 10px 16px; padding: 9px 14px; height: auto; }
  .site-header { top: 0; position: sticky; }
  .hero { padding-top: 32px; }
  .timestrip .wrap { grid-template-columns: 1fr 1fr; }
  .emerg-bar__sep { display: none; }
}
@media (max-width: 420px){
  .timestrip .wrap { grid-template-columns: 1fr; }
}

/* =========================================================================
   Acessibilidade (WCAG) + slot de conteúdo gerado por IA
   ========================================================================= */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 10px; font-weight: 600; letter-spacing: .01em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; }

/* ---------- Foco visível em elementos interativos ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
/* chips de rádio têm input escondido — mostro o foco no rótulo */
.radio-chips label:has(input:focus-visible) {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.emerg-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- fieldset usado como grupo de rádio ---------- */
fieldset.field--group { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field--group legend {
  display: block; padding: 0; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}

/* ---------- Conteúdo gerado por IA (por cidade) ---------- */
.llm-prose { display: flex; flex-direction: column; gap: 16px; }
.llm-prose p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.llm-prose[data-llm-state="placeholder"] {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 22px 24px; background: var(--surface);
}
.llm-prose[data-llm-state="placeholder"]::before {
  content: "⌁ slot de conteúdo IA — gerar e revisar por cidade";
  display: block; margin-bottom: 12px;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2);
}
.llm-prose[data-llm-state="placeholder"] p { color: var(--muted); }

/* ---------- Alvos de toque no mobile (WCAG 2.5.x) ---------- */
@media (max-width: 760px){
  .footer a { padding: 10px 0; }
  .emerg-bar a { min-height: 40px; }
  .nav__links a { min-height: 44px; display: flex; align-items: center; }
}

/* =========================================================================
   Correção de contraste em FUNDOS ESCUROS (WCAG 1.4.3)
   O accent escuro (sobretudo no tema Cobalto) ficava ilegível sobre as
   faixas .band-dark. Variante clara do accent, legível no escuro, por paleta.
   ========================================================================= */
:root { --accent-bright: #e9a620; } /* gold claro — legível sobre navy */

.band-dark .eyebrow,
.band-dark .eyebrow--ondark            { color: var(--accent-bright); }
.band-dark .eyebrow::before,
.band-dark .eyebrow--center::after     { background: var(--accent-bright); }
.band-dark .icon-badge                 { color: var(--accent-bright); }
.band-dark .bio__cred .k               { color: var(--accent-bright); }
.band-dark .bio__list li svg           { color: var(--accent-bright); }
.band-dark .deny__cell.real .deny__tag { color: var(--accent-bright); }
.band-dark .tag svg                    { color: var(--accent-bright); }
.band-dark .notice                     { border-left-color: var(--accent-bright); }

/* Rodapé (#050d25) — mesmos azul-sobre-azul corrigidos */
.footer__brand .brand__mark { border-color: var(--accent-bright); color: var(--accent-bright); }
.footer a:hover             { color: var(--accent-bright); }
.footer__social a:hover     { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--dark); }