/* ============================================================================
   DRIVE7 · HOME DA PRAÇA + COMPONENTE DE CONVITE + CONTEXTO — plaza.css
   ----------------------------------------------------------------------------
   Cobre o conteúdo montado por `cidade.js` (home da praça), o componente
   reusável de convite (`invite-code.js`) e o breadcrumb de contexto das personas
   (`plaza-persona.js`). Carrega SOBRE `site.css` (base/reset/tipografia/tokens de
   espaçamento/botões/cards/estados) — aqui só os blocos exclusivos da praça.

   REGRA DE OURO: nenhum arquivo de layout conhece cor da marca. Zero cor literal
   — tudo por var(--d7-*)/var(--accent)/var(--fg)/var(--bg) de brand-tokens.css.
   Verde é PROIBIDO. Tokens de espaçamento/raio vêm de site.css (--s*, --radius).
   ============================================================================ */

:root{ --prose-narrow:420px }

/* ---- envelope da home da praça -------------------------------------------- */
.plaza{padding-block:var(--s6) var(--s8)}
.plaza-block{padding-block:var(--s5)}

/* ---- hero da praça -------------------------------------------------------- */
.plaza-hero{padding-block:var(--s7) var(--s5)}
.plaza-hero .kicker,.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--d7-muted);
  margin-bottom:var(--s4)}
.plaza-hero h1{margin-top:var(--s2)}
/* <em> vermelho SEM itálico — realce de marca, não ênfase tipográfica */
.plaza-hero h1 em{font-style:normal;color:var(--accent)}
.plaza-hero .plaza-regional{margin-top:var(--s3);font-weight:700}
.plaza-hero .lead{margin-top:var(--s4);max-width:var(--prose-narrow)}

/* ---- banner --------------------------------------------------------------- */
.plaza-banner{margin:0 0 var(--s5)}
.plaza-banner-img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--d7-line)}

/* ---- oferta comercial (tarifas "a partir de") ----------------------------- */
.fares{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:var(--prose-narrow)}
.fare{background:var(--d7-surface);border:1px solid var(--d7-line);
  border-radius:var(--radius);padding:var(--s4) var(--s4) var(--s5)}
.fare-top{display:flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:var(--s3)}
.fare-top .mode-icon{width:38px;height:auto;flex:0 0 auto}
.fare-top span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.fare-label{font-size:12px;color:var(--d7-muted);margin-bottom:2px}
.fare-value{font-family:var(--d7-font-display);font-size:clamp(26px,7.4vw,40px);line-height:1;color:var(--fg)}

/* ---- campanha ------------------------------------------------------------- */
.plaza-campaign{max-width:var(--prose-narrow)}
.plaza-campaign-state{margin-top:var(--s3);font-weight:700}
.plaza-campaign-metric{margin-top:var(--s2);color:var(--d7-muted)}
.plaza-campaign-period{margin-top:var(--s1);font-size:13.5px}

/* ---- componente de convite (invite-code.js) ------------------------------- */
.invite{background:var(--d7-surface);border:1px solid var(--d7-line);
  border-radius:var(--radius);padding:var(--s5);max-width:var(--prose-narrow)}
.invite .btn{margin-top:var(--s3)}
.invite-title{margin-top:var(--s1)}
.invite-code{margin-top:var(--s5)}
.invite-code-label{font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--d7-muted);margin-bottom:var(--s2)}
.invite-code-row{display:flex;align-items:stretch;gap:var(--s3);flex-wrap:wrap}
.invite-code-value{font-family:var(--d7-font-display);font-size:clamp(24px,6.4vw,32px);
  line-height:1;letter-spacing:.14em;color:var(--accent);
  background:var(--bg);border:1px dashed var(--accent);border-radius:var(--radius-sm);
  padding:12px 18px;display:inline-flex;align-items:center;
  /* o código nunca deve quebrar de forma feia; segura numa linha e rola se preciso */
  white-space:nowrap;overflow-x:auto}
.invite-copy{min-height:52px;flex:0 0 auto}
/* feedback visual transitório de cópia (flashCopied) — glifo + rótulo, nunca cor só */
.invite-copy[data-copied]{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--fg)}
.invite-copy[data-copied]::before{content:"\2713";font-weight:800;color:var(--accent);
  margin-inline-end:6px}
.invite-fallback{margin-top:var(--s4);font-size:13.5px;line-height:1.5}

/* ---- breadcrumb de contexto da praça (plaza-persona.js) -------------------- */
.plaza-context{display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-block:var(--s4);padding:8px 14px;
  background:var(--d7-surface);border:1px solid var(--d7-line);border-radius:var(--radius-pill)}
.plaza-context-pin{flex:0 0 auto}
.plaza-context-label{font-size:14px;font-weight:600;color:var(--fg)}
.plaza-context-link{font-size:14px;font-weight:700;color:var(--accent);text-decoration:none}
.plaza-context-link:hover{text-decoration:underline;text-underline-offset:3px}