/* ==========================================================================
   TIPOGRAFIA OFICIAL — Effra
   Arquivos licenciados fornecidos pela FUTURO Corp, convertidos de TTF para
   WOFF 1.0 e servidos localmente (mesma origem). Nunca hotlinkar nem
   redistribuir. Ver public/assets/fonts/FONT_NOTICE.md.

   A Effra nao possui corte SemiBold: os pesos reais sao Light 300,
   Regular 400, Medium 500, Bold 700 e Heavy 800. Declaramos apenas os
   cortes que a interface usa; nao declare 600, para o navegador nao
   sintetizar nem escolher Bold onde a intencao e enfase media.
   ========================================================================== */

@font-face {
  font-family: Effra;
  src: url("/assets/fonts/effra-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Effra;
  src: url("/assets/fonts/effra-400-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Effra;
  src: url("/assets/fonts/effra-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Effra;
  src: url("/assets/fonts/effra-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. TOKENS GLOBAIS — FUTURO Default Theme
   Fonte de verdade unica. Nao redeclarar estes tokens em outros blocos.
   Cores oficiais do Manual: laranja #FF6408, azul prussiano #132343,
   ardosia palida #AFB8BE, platina #EDF0F4.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --orange: #ff6408;
  --orange-dark: #d94700;
  /* Laranja para TEXTO pequeno. #FF6408 alcanca so 2,97:1 e #D94700 so 4,33:1
     sobre branco: ambos reprovam WCAG AA para texto normal. #C23E00 e o tom
     mais raso que passa 4,5:1 sobre branco, fundo, laranja-soft, azul-pale e
     platina. Use --orange/--orange-dark apenas em SUPERFICIE (CTA, hover). */
  --orange-text: #c23e00;
  --orange-soft: #fff0e7;
  --blue: #132343;
  --blue-soft: #263a61;
  --blue-pale: #eaf0f9;
  --slate: #afb8be;
  --platinum: #edf0f4;

  /* --- Texto e estrutura --- */
  --ink: #172033;
  --muted: #5c6779;
  --line: #d8dee7;
  --line-strong: #bdc6d2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --background: #f7f9fc;
  --soft: #edf0f4;

  /* --- Semanticas --- */
  --success: #137354;
  --success-soft: #e8f7f1;
  --warning: #8b5604;
  --warning-soft: #fff6dc;
  --danger: #b42335;
  --danger-soft: #fff0f2;

  /* --- Escala de espacamento (4/8/12/16/24/32/48/64/80) --- */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-80: 5rem;

  /* --- Radius: small / medium / large / pill --- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Sombras: subtle / card / floating --- */
  --shadow-subtle: 0 1px 2px rgb(19 35 67 / 6%), 0 2px 8px rgb(19 35 67 / 4%);
  --shadow-card: 0 2px 4px rgb(19 35 67 / 4%), 0 10px 28px rgb(19 35 67 / 7%);
  --shadow-float: 0 8px 20px rgb(19 35 67 / 8%), 0 24px 56px rgb(19 35 67 / 12%);
  /* Aliases historicos mantidos para nao quebrar regras existentes. */
  --shadow-sm: var(--shadow-subtle);
  --shadow: var(--shadow-card);

  /* --- Estrutura --- */
  --container: 1240px;
  --header-height: 68px;
  --sticky-offset: calc(var(--header-height) + var(--sp-24));

  /* --- Movimento --- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  font-family: Effra, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
  color-scheme: light;
}

/* ==========================================================================
   2. EVENT THEME SYSTEM — herança FUTURO → série → evento
   Componentes NUNCA usam cor de evento hardcoded: sempre var(--event-*).
   Cada token cai no valor FUTURO quando o nivel mais especifico nao define.
   Os overrides por serie/evento sao injetados em partials/event-theme.ejs.
   ========================================================================== */

:root {
  --event-primary: var(--blue);
  --event-primary-contrast: #ffffff;
  --event-secondary: var(--blue-soft);
  --event-accent: var(--orange);
  /* Acento em SUPERFICIE usa --event-accent; em TEXTO usa --event-accent-text,
     que o resolvedor garante em >= 4,5:1 contra o fundo do evento. */
  --event-accent-text: var(--orange-text);
  --event-cta: var(--orange);
  /* Azul sobre laranja = 5,25:1 (AA). Branco sobre laranja = 2,97:1 (reprova). */
  --event-cta-contrast: var(--blue);
  --event-cta-hover: var(--orange-dark);
  --event-background: var(--background);
  --event-surface: var(--surface);
  --event-text: var(--ink);
  --event-muted-text: var(--muted);
  --event-border: var(--line);
  --event-radius: var(--radius);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--background);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font: inherit;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--blue-soft);
  text-underline-offset: 3px;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--blue);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* Hierarquia: display / h1 / h2 / h3 / body / small / metadata / badge.
   Titulos contidos para nao empurrar conteudo abaixo da dobra sem necessidade. */
.display {
  font-size: clamp(2.4rem, 5.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 {
  margin-bottom: var(--sp-16);
  font-size: clamp(1.95rem, 4vw, 2.85rem);
}

h2 {
  margin-bottom: var(--sp-12);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

h3 {
  margin-bottom: var(--sp-8);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}

small,
.text-small {
  font-size: 0.85rem;
}

.text-metadata {
  color: var(--event-muted-text);
  font-size: 0.85rem;
  line-height: 1.45;
}

:focus-visible {
  outline: 3px solid rgb(255 100 8 / 45%);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--blue-soft);
}

[hidden] {
  display: none !important;
}

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(var(--sp-32), 4.5vw, var(--sp-64));
}

.section--soft {
  background: var(--soft);
}

.section--topless {
  padding-top: var(--sp-24);
}

.section--tight {
  padding-block: clamp(var(--sp-24), 3vw, var(--sp-32));
}

.section-action {
  margin-top: var(--sp-24);
  text-align: center;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--blue);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow {
  margin-bottom: 0.6rem;
  color: var(--event-accent-text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.08rem, 2.5vw, 1.3rem);
  line-height: 1.6;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

/* CTA: o contraste de branco sobre laranja e 2,97:1 e reprova WCAG AA.
   docs/BRAND.md determina texto azul sobre laranja (5,25:1). O token
   --event-cta-contrast e recalculado por evento no tema white-label. */
.button--primary {
  color: var(--event-cta-contrast);
  background: var(--event-cta);
  box-shadow: 0 6px 16px rgb(217 71 0 / 20%);
}

.button--primary:hover {
  background: var(--event-cta-hover);
  box-shadow: 0 10px 24px rgb(217 71 0 / 28%);
}

.button--primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgb(217 71 0 / 24%);
}

.button--outline {
  color: var(--blue);
  background: transparent;
  border-color: var(--line-strong);
}

.button--outline:hover {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.button--light {
  color: var(--blue);
  background: #fff;
}

.button--quiet {
  color: var(--blue);
  background: transparent;
}

.button--large {
  min-height: 54px;
  padding-inline: 1.5rem;
}

.button--full {
  width: 100%;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.button-row,
.form-actions,
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.stack-actions {
  flex-direction: column;
  align-items: stretch;
}

.text-link,
.link-button,
.back-link {
  color: var(--blue-soft);
  font-weight: 700;
  text-decoration-color: rgb(38 58 97 / 35%);
  text-decoration-thickness: 1px;
}

.text-link:hover,
.link-button:hover,
.back-link:hover {
  color: var(--orange-text);
}

.text-link--large {
  font-size: 1.1rem;
}

.text-link--center {
  text-align: center;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}

.back-link {
  display: inline-flex;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.pill,
.status-badge,
.privacy-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  color: var(--blue-soft);
  background: var(--blue-pale);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.pill--accent {
  color: var(--orange-text);
  background: var(--orange-soft);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.status-badge--confirmed,
.status-badge--checked_in {
  color: var(--success);
  background: var(--success-soft);
}

.status-badge--waitlist {
  color: var(--warning);
  background: var(--warning-soft);
}

.status-badge--cancelled {
  color: var(--danger);
  background: var(--danger-soft);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgb(255 255 255 / 94%);
  border-bottom: 1px solid rgb(216 222 231 / 82%);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blue);
  text-decoration: none;
}

.brand img {
  width: 150px;
  height: auto;
}

.brand__product {
  padding-left: 0.6rem;
  border-left: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 700;
}

.nav-toggle {
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  width: 18px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-last-child(3) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-last-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  display: none;
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.site-nav[data-open="true"] {
  display: grid;
  gap: 0.35rem;
}

.site-nav > a:not(.button) {
  min-height: 44px;
  padding: 0.65rem;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-nav > a:not(.button):hover {
  background: var(--blue-pale);
}

.nav-logout {
  display: flex;
}

.nav-logout .button {
  width: 100%;
}

/* Superficies de autoridade (area do participante) seguem escuras: o ingresso
   e a confirmacao sao momentos de credencial, nao de descoberta. */
.account-hero,
.ticket-hero,
.confirmation-hero {
  overflow: hidden;
  color: #fff;
  background: var(--blue);
}

/* Paginas publicas de descoberta usam base clara (Manual: 60-70% claro). */
.home-hero,
.event-hero,
.series-hero,
.page-intro {
  overflow: hidden;
  color: var(--event-text);
  background: var(--event-background);
}

.home-hero__grid,
.event-hero__grid,
.series-hero__grid {
  display: grid;
  gap: var(--sp-32);
  padding-block: clamp(var(--sp-32), 5vw, var(--sp-64));
}

.home-hero h1,
.event-hero h1,
.series-hero h1,
.page-intro h1 {
  color: var(--event-primary);
}

.account-hero h1,
.ticket-hero h1,
.confirmation-hero h1 {
  color: #fff;
}

.home-hero .lead,
.event-hero .lead,
.series-hero .lead,
.page-intro .lead {
  color: var(--event-muted-text);
}

.account-hero p,
.confirmation-hero .lead {
  color: rgb(255 255 255 / 82%);
}

.home-hero .eyebrow,
.event-hero .eyebrow,
.series-hero .eyebrow,
.page-intro .eyebrow {
  color: var(--orange-text);
}

.account-hero .eyebrow,
.ticket-hero .eyebrow,
.confirmation-hero .eyebrow {
  color: #ffb287;
}

.home-hero__visual {
  position: relative;
  min-height: 280px;
  border: 1px solid var(--event-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--blue-pale), var(--platinum));
}

.orbit {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
}

.orbit--one {
  inset: 10% 12%;
}

.orbit--two {
  inset: 24% 25%;
}

.signal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 190px;
  gap: 0.15rem;
  padding: 1.2rem;
  color: var(--blue);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.signal-card span {
  color: var(--orange-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.signal-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--orange);
  border: 4px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  background-clip: padding-box;
}

.signal-dot--one {
  top: 18%;
  right: 22%;
}

.signal-dot--two {
  bottom: 18%;
  left: 17%;
}

.section-heading {
  max-width: 760px;
  margin-bottom: var(--sp-24);
}

.section-heading h2 {
  margin-bottom: var(--sp-4);
}

.section-heading .eyebrow {
  margin-bottom: var(--sp-4);
}

.section-heading > p:last-child {
  color: var(--muted);
}

.section-heading--actions,
.card-heading,
.ticket-section-heading,
.ticket-hero__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.carousel-controls {
  display: none;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.icon-button {
  width: 46px;
  height: 46px;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.event-carousel {
  display: grid;
  grid-auto-columns: min(86vw, 360px);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.3rem 0 1.2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.event-carousel .event-card {
  scroll-snap-align: start;
}

.event-grid,
.series-grid,
.speaker-grid,
.insight-grid,
.ticket-list {
  display: grid;
  gap: 1.2rem;
}

.event-card,
.series-card,
.ticket-card,
.surface-card,
.registration-panel,
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.event-card,
.series-card,
.ticket-card {
  overflow: hidden;
}

.event-card__media,
.series-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--blue);
}

/* O SLOT SEGUE A PROPORCAO DA ARTE — e por isso `cover` volta a ser correto.
   A tentativa anterior trocou `cover` por `contain` para nao cortar a base do
   material (onde ficam data e horario). Funcionou contra o corte e criou outro
   problema: arte quadrada num slot 16/9 aparecia com METADE da largura do card
   em azul.

   Agora o servidor classifica a arte (`formatoDaArte`, em
   src/modules/public/service.js) e a classe muda a proporcao do slot. Com slot
   e arte na mesma proporcao, `cover` nao tem o que cortar nem o que sobrar. */
.event-card__picture,
.series-card__picture,
.event-card__picture img,
.series-card__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O SLOT DE ARTE E SEMPRE UMA FAIXA — EM TODA LISTAGEM, NOS DOIS TAMANHOS.

   Houve uma tentativa de dar ao slot a proporcao da propria arte, para nunca
   recortar. Ela resolvia o recorte e criava um problema maior: a proporcao
   passava a depender do arquivo que cada administrador subiu, e o layout
   perdia o controle da propria altura.

   O que isso produzia, medido no navegador:

    - CELULAR, uma coluna: card com arte quadrada media 432px contra 283px dos
      vizinhos. Na pratica, UM CARD POR TELA — a listagem deixava de ser
      navegavel, que e a unica coisa que ela precisa ser.
    - DESKTOP, tres colunas: a fileira ficava desalinhada. A grade estica todos
      os cards ate o mais alto, entao um ladrilho quadrado de 401px forcava
      cards de 492px em que os vizinhos tinham 225px de arte e 267px de espaco
      vazio no corpo.
    - CARTAO DE SERIE, meia largura: 610px de arte e 870px de card, com a grade
      passando de 2000px.

   Numa listagem nao ha como controlar a arte de cada evento, entao a proporcao
   nao pode vir dela. `cover` recorta, e o recorte custa pouco aqui: titulo,
   data e formato aparecem em TEXTO no corpo do card. A imagem serve para
   reconhecer, nao para informar.

   Quadrado continua fazendo sentido onde o LAYOUT escolhe a forma e todas as
   pecas seguem a mesma — e ai e uma decisao de tela, nao consequencia do
   arquivo que subiram. As classes `arte-desktop--*` e `arte-mobile--*`
   continuam no HTML justamente para tornar isso possivel sem adivinhacao. */

/* `:has()` nao existe em navegador antigo. Sem ele a regra e ignorada e o slot
   continua 16/9 — o comportamento de antes, que corta mas nao quebra. */

/* O CARTAO DE SERIE E SEMPRE UMA FAIXA.

   Ele e um CARTAO DE ENTRADA, nao a pagina da serie: existe para a pessoa
   reconhecer e clicar. Uma arte quadrada numa coluna de 612px produzia um slot
   de 612px de altura e um card de 870px — mais alto que a viewport, com a grade
   passando de 2000px.

   `cover` recorta o excedente, e recortar aqui e aceitavel: nome e descricao
   aparecem em texto logo abaixo do cartao. */
.series-card__media {
  max-height: 320px;
  aspect-ratio: 16 / 9;
}

.event-card__picture img,
.series-card__picture img {
  transition: transform 300ms ease;
}

.event-card:hover .event-card__picture img,
.series-card:hover .series-card__picture img {
  transform: scale(1.025);
}

/* O BLOCO DE RESERVA PRECISA CABER NO SLOT.

   `min-height: 190px` era imposta de fora para dentro: dentro de um
   `.event-card__media` de 168px (16/9 numa coluna de 298px), o bloco media 190px
   e vazava 22px para fora do card. Medido no site publicado, e visivel em todo
   evento sem arte — que hoje sao quase todos.

   `height: 100%` faz o bloco obedecer ao slot; a altura minima so vale quando
   nao ha slot com proporcao definida. */
.event-card__media .event-visual-fallback,
.series-card__media .event-visual-fallback {
  height: 100%;
  min-height: 0;
}

.event-visual-fallback {
  display: grid;
  min-height: 190px;
  place-items: center;
  color: rgb(255 255 255 / 70%);
  background:
    radial-gradient(circle at 80% 20%, rgb(255 100 8 / 50%), transparent 8rem),
    var(--blue);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.event-card__body,
.series-card__body,
.ticket-card__body {
  padding: 1.25rem;
}

.event-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.date-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--event-accent-text);
}

.date-badge strong {
  font-size: 1.4rem;
}

.date-badge span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.event-card__series,
.event-card__meta {
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.event-card__series {
  color: var(--blue-soft);
  font-weight: 700;
}

.event-card h3 a,
.series-card h3 a {
  color: inherit;
  text-decoration: none;
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.status-dot::before {
  width: 8px;
  height: 8px;
  background: var(--line-strong);
  border-radius: 50%;
  content: "";
}

.status-dot--open::before {
  background: var(--success);
}

.status-dot--waitlist::before {
  background: var(--warning);
}

.series-card__body > p:not(.eyebrow) {
  color: var(--muted);
}

.page-intro__inner {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-intro__inner > :last-child {
  margin-bottom: 0;
}

.event-filters {
  display: grid;
  gap: 0.9rem;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.event-filters__clear {
  align-self: center;
  text-align: center;
}

.results-heading {
  margin-block: 1.5rem;
  color: var(--muted);
}

.empty-state {
  padding: clamp(2rem, 7vw, 4rem);
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}

.empty-state--compact {
  padding: 2rem 1rem;
}

.event-hero__picture,
.series-hero__picture {
  overflow: hidden;
  border: 1px solid var(--event-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.event-hero__picture img,
.series-hero__picture img {
  width: 100%;
  height: auto;
}

/* Bloco compacto de fatos essenciais (data/horario/formato/organizacao).
   Linha unica escaneavel, sem card em volta de cada dado. */
.event-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-8) var(--sp-24);
  margin: var(--sp-24) 0;
  padding-block: var(--sp-16);
  border-top: 1px solid var(--event-border);
  border-bottom: 1px solid var(--event-border);
}

.event-facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.event-facts dt {
  color: var(--event-muted-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-facts dd {
  margin: 0;
  color: var(--event-text);
  font-weight: 700;
}

.event-layout {
  display: grid;
  gap: 2rem;
}

.event-story {
  min-width: 0;
}

.story-section,
.prose-block,
.audience-callout {
  margin-bottom: clamp(var(--sp-32), 4vw, var(--sp-48));
}

.story-section--soft,
.audience-callout {
  padding: clamp(var(--sp-16), 3vw, var(--sp-32));
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
}

.audience-callout {
  color: var(--blue-soft);
  border-left: 5px solid var(--orange);
}

.insight-card,
.speaker-card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.insight-card > span {
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 1rem;
  background: var(--orange);
  border-radius: 4px;
}

.insight-card p,
.speaker-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.check-list,
.number-list,
.feature-list,
.steps-list,
.action-list {
  padding: 0;
  list-style: none;
}

.check-list {
  display: grid;
  gap: 0.75rem;
}

.check-list li,
.feature-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.check-list li span,
.feature-list li span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: var(--success);
  border-radius: 50%;
  font-size: 0.75rem;
}

.number-list {
  display: grid;
  gap: 0.8rem;
  counter-reset: item;
}

.number-list li {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.number-list li > span {
  color: var(--orange-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.speaker-card {
  display: flex;
  gap: 1rem;
}

.speaker-card img,
.speaker-card__monogram {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border-radius: 50%;
  object-fit: cover;
}

.speaker-card__monogram {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--blue);
  font-weight: 700;
}

.speaker-card__title {
  color: var(--orange-text) !important;
  font-weight: 700;
}

.details-list {
  margin-bottom: 0;
  border-top: 1px solid var(--line);
}

.details-list div {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.details-list dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.details-list dd {
  margin: 0;
}

.details-list--compact div {
  padding-block: 0.65rem;
}

.registration-panel {
  align-self: start;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.registration-panel__intro,
.registration-state p {
  color: var(--muted);
}

.registration-state > span:first-child,
.success-panel > span:first-child {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  place-items: center;
  color: #fff;
  background: var(--success);
  border-radius: 50%;
  font-size: 1.3rem;
}

.form-grid,
.stack-form,
.registration-form,
.consent-group {
  display: grid;
  gap: 1rem;
}

.form-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-field label,
.form-field legend {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea,
.copy-field input {
  width: 100%;
  min-height: 48px;
  padding: 0.72rem 0.8rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.copy-field input:focus {
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 3px rgb(38 58 97 / 12%);
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea,
.check-row--error {
  border-color: var(--danger);
}

.field-help,
.field-error,
.form-security,
.copy-feedback {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.field-help,
.form-security {
  color: var(--muted);
}

.field-error {
  color: var(--danger);
  font-weight: 700;
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.label-row a {
  font-size: 0.8rem;
}

.password-input {
  position: relative;
}

.password-input input {
  padding-right: 5.2rem;
}

.password-input button {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  min-height: 36px;
  padding: 0.35rem 0.6rem;
  color: var(--blue-soft);
  background: transparent;
  border: 0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-meter {
  height: 4px;
  margin-top: 0.5rem;
  overflow: hidden;
  background: var(--line);
  border-radius: 4px;
}

.password-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--danger);
  transition: width 150ms ease, background-color 150ms ease;
}

.password-meter[data-score="2"] span {
  width: 50%;
  background: var(--warning);
}

.password-meter[data-score="3"] span {
  width: 75%;
  background: #46815f;
}

.password-meter[data-score="4"] span {
  width: 100%;
  background: var(--success);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.choice {
  position: relative;
  margin: 0 !important;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice span {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
}

.choice input:checked + span {
  color: var(--blue);
  background: var(--blue-pale);
  border-color: var(--blue-soft);
  box-shadow: inset 0 0 0 1px var(--blue-soft);
}

.choice input:focus-visible + span {
  outline: 3px solid rgb(255 100 8 / 45%);
  outline-offset: 2px;
}

.conditional-field {
  margin-top: 0.8rem;
}

.check-row {
  display: flex !important;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0.8rem;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 400 !important;
  cursor: pointer;
}

.check-row input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--orange);
}

.alert {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
}

.alert p {
  margin-bottom: 0;
}

.alert--error {
  color: #7f1423;
  background: var(--danger-soft);
  border-color: #f2b9c0;
}

.alert--success {
  color: #0b563d;
  background: var(--success-soft);
  border-color: #a7ddc8;
}

/* Informativo, nao corretivo: usado quando o formulario pede o passo seguinte
   (criar a senha) em vez de apontar um erro de quem preencheu.
   #14395c sobre #eaf1f8 da 8,3:1, folgado para AA. */
.alert--info {
  color: #14395c;
  background: #eaf1f8;
  border-color: #b6cfe4;
}

/* Bloco da senha, segundo tempo do cadastro. */
.password-step {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.password-step legend {
  padding: 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.password-step__hint {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.mobile-sticky-cta {
  position: fixed;
  z-index: 80;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 95%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgb(19 35 67 / 10%);
}

.auth-main {
  min-height: calc(100vh - 72px);
  padding-block: clamp(2rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 10% 10%, rgb(255 100 8 / 12%), transparent 24rem),
    var(--background);
}

.auth-layout {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.auth-copy {
  max-width: 620px;
}

.auth-copy h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.feature-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.auth-card {
  width: 100%;
  padding: clamp(1.3rem, 5vw, 2.3rem);
}

.auth-card h1,
.auth-card h2 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.auth-card__note {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-main--single {
  display: grid;
  place-items: center;
}

.auth-card--single {
  max-width: 540px;
  margin-inline: auto;
}

.success-panel {
  color: var(--muted);
}

.auth-back-link {
  display: inline-block;
  margin-top: 1.3rem;
}

.account-hero__inner {
  display: grid;
  gap: 1rem;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.account-hero h1 {
  margin-bottom: 0.4rem;
  font-size: clamp(2.1rem, 7vw, 3.7rem);
}

.participant-section {
  background:
    radial-gradient(circle at 95% 0, rgb(255 100 8 / 7%), transparent 22rem),
    var(--background);
}

.account-grid,
.confirmation-grid,
.ticket-detail-grid {
  display: grid;
  gap: 1.2rem;
}

.account-main,
.account-aside,
.confirmation-main,
.confirmation-aside,
.ticket-actions {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.surface-card {
  padding: clamp(1.2rem, 4vw, 2rem);
}

.surface-card > :last-child {
  margin-bottom: 0;
}

.card-heading {
  margin-bottom: 1.3rem;
}

.card-heading h2,
.ticket-section-heading h2,
.surface-card h2 {
  font-size: clamp(1.35rem, 4vw, 1.8rem);
}

.privacy-chip {
  flex: 0 0 auto;
  color: var(--success);
  background: var(--success-soft);
}

.referral-card {
  background:
    radial-gradient(circle at 90% 10%, rgb(255 100 8 / 24%), transparent 10rem),
    var(--blue);
  border-color: var(--blue);
}

.referral-card h2,
.referral-card p,
.referral-card .eyebrow {
  color: #fff;
}

.referral-card > p:not(.eyebrow) {
  color: rgb(255 255 255 / 74%);
}

/* Mesma regra dos botoes: branco sobre laranja alcanca so 2,97:1. Estes
   glifos sao decorativos (aria-hidden), mas ilegivel continua ilegivel. */
.referral-card__icon,
.room-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--event-cta-contrast);
  background: var(--orange);
  border-radius: 50%;
  font-size: 1.2rem;
}

.copy-field {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.copy-field input {
  min-width: 0;
  color: var(--ink);
}

.copy-feedback {
  min-height: 1.25em;
  color: rgb(255 255 255 / 82%);
}

.support-card p {
  color: var(--muted);
}

.ticket-section-heading {
  margin-bottom: 1.5rem;
}

.ticket-section-heading--spaced {
  margin-top: 3.5rem;
}

.ticket-card {
  display: grid;
}

/* A imagem do ingresso tambem segue a arte.
   Aqui o erro anterior era outro: no layout de duas colunas a altura vinha do
   CORPO do cartao (~281px para uma coluna de ~259px, quase um quadrado), entao
   arte panoramica ficava com tarja enorme em cima e embaixo.

   Com a proporcao vinda da arte, a coluna passa a ter a altura certa e nao
   sobra nada. `align-self: start` impede o estica-para-preencher que ditava a
   altura antes. */
/* A IMAGEM DO INGRESSO NAO TEM PROPORCAO IMPOSTA: ela e a propria arte.
   `width: 100%` + `height: auto` dao exatamente a proporcao do arquivo, entao
   nao ha o que cortar nem tarja para preencher — para qualquer arte, hoje e
   depois, sem depender de a classe existir.

   `height: auto` e obrigatorio: os atributos `width`/`height` do <img> entram
   como dica de apresentacao com altura EXPLICITA (1080px), e com largura e
   altura definidas o navegador ignora `aspect-ratio`. Sem esta linha a imagem
   saia com 259x1080.

   Aqui cabe porque a lista de ingressos e vertical: cartoes de alturas
   diferentes ficam um sob o outro e nada desalinha. */
.ticket-card > img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  background: var(--blue);
}

/* O bloco de reserva (sem imagem) nao tem arte para seguir: mantem 16/9. */
.ticket-card__visual {
  width: 100%;
  min-height: 170px;
  aspect-ratio: 16 / 9;
  background: var(--blue);
}

.ticket-card__visual {
  display: grid;
  place-items: center;
  color: rgb(255 255 255 / 70%);
  background: var(--blue);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ticket-card__body > p {
  margin-bottom: 0.4rem;
  color: var(--muted);
}

.ticket-card__body .button {
  margin-top: 0.8rem;
}

.ticket-hero {
  padding-block: 2.5rem 3.5rem;
}

.ticket-hero h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
}

.ticket-hero .back-link {
  color: rgb(255 255 255 / 80%);
}

.ticket-hero__heading .status-badge {
  flex: 0 0 auto;
}

.digital-ticket {
  position: relative;
  overflow: hidden;
  align-self: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.digital-ticket__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: rgb(255 255 255 / 76%);
  background: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
}

.digital-ticket__brand img {
  width: 150px;
  height: auto;
}

.digital-ticket__body {
  padding: clamp(1.3rem, 5vw, 2.4rem);
}

.digital-ticket__body > h2 {
  margin-bottom: 2rem;
}

.digital-ticket__event {
  padding-top: 1.3rem;
  border-top: 1px dashed var(--line-strong);
}

.ticket-facts {
  display: grid;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
}

.ticket-facts div {
  padding: 0.8rem;
  background: var(--background);
  border-radius: var(--radius-sm);
}

.ticket-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ticket-facts dd {
  margin: 0;
  font-weight: 700;
}

.qr-block {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line-strong);
}

.qr-block img {
  width: min(100%, 260px);
  margin-inline: auto;
}

.qr-block p,
.ticket-waiting p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.ticket-waiting {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem;
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
}

.digital-ticket__code {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--blue-pale);
  border-top: 1px dashed var(--line-strong);
}

.digital-ticket__code::before,
.digital-ticket__code::after {
  position: absolute;
  top: -14px;
  width: 28px;
  height: 28px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
}

.digital-ticket__code::before {
  left: -15px;
}

.digital-ticket__code::after {
  right: -15px;
}

.digital-ticket__code span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.digital-ticket__code strong {
  color: var(--blue);
  letter-spacing: 0.08em;
}

.room-card--open {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.room-card--open h2,
.room-card--open .eyebrow {
  color: #fff;
}

.room-card--open p:not(.eyebrow) {
  color: rgb(255 255 255 / 74%);
}

.action-list {
  margin-bottom: 0;
}

.action-list a,
.action-list__notice {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-block: 0.85rem;
  color: var(--blue);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.action-list a:last-child,
.action-list__notice:last-child {
  border-bottom: 0;
}

.action-list a > span:first-child,
.action-list__notice > span:first-child {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  color: var(--orange-text);
  background: var(--orange-soft);
  border-radius: 50%;
}

.action-list small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}

.confirmation-hero {
  background:
    radial-gradient(circle at 50% -10%, rgb(255 100 8 / 40%), transparent 22rem),
    var(--blue);
  text-align: center;
}

.confirmation-hero__inner {
  max-width: 800px;
  padding-block: clamp(3rem, 9vw, 6rem);
}

.confirmation-mark {
  display: grid;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.4rem;
  place-items: center;
  color: #fff;
  background: var(--success);
  border: 8px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  background-clip: padding-box;
  font-size: 1.8rem;
}

.confirmation-event {
  overflow: hidden;
  padding: 0;
}

/* `height: auto` e obrigatorio aqui pelo MESMO motivo ja documentado no cartao
   de ingresso, algumas centenas de linhas acima: a tag traz `width`/`height` do
   arquivo (1200x675, 2400x800...), e com largura E altura definidas o navegador
   trata a altura como valor explicito e IGNORA o `aspect-ratio`. A arte saia
   esticada na altura real do arquivo — foi o "banner quebrado" relatado na
   pagina de confirmacao.

   A armadilha e sorrateira porque a regra parece completa sem a linha. Ver o
   comentario longo em `.ticket-card > img`. */
.confirmation-event > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.confirmation-event > div {
  padding: clamp(1.2rem, 4vw, 2rem);
}

.completion-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--success);
  background: var(--success-soft);
  border-color: #a7ddc8;
}

.completion-card > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: #fff;
  background: var(--success);
  border-radius: 50%;
}

.steps-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
}

.steps-list li {
  display: flex;
  gap: 0.8rem;
}

.steps-list li > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: #fff;
  background: var(--blue-soft);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.steps-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.error-main {
  display: grid;
  min-height: 70vh;
  place-items: center;
  padding-block: 4rem;
  background:
    radial-gradient(circle at 80% 10%, rgb(255 100 8 / 10%), transparent 20rem),
    var(--background);
}

.error-panel {
  max-width: 760px;
  text-align: center;
}

.error-panel .button-row {
  justify-content: center;
}

.error-code {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--orange-text);
  font-size: clamp(3rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
}

.request-id {
  display: inline-block;
  padding: 0.6rem 0.8rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.site-footer {
  padding-block: 3.5rem 1.5rem;
  color: rgb(255 255 255 / 70%);
  background: #0e192e;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
}

.site-footer__logo {
  width: 160px;
  height: auto;
  margin-bottom: 1rem;
}

.site-footer h2 {
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer a,
.site-footer .link-button {
  display: block;
  width: fit-content;
  margin-bottom: 0.45rem;
  color: rgb(255 255 255 / 76%);
}

.site-footer p {
  max-width: 340px;
  font-size: 0.9rem;
}

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.cookie-banner {
  position: fixed;
  z-index: 200;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  gap: 1rem;
  max-width: 920px;
  margin-inline: auto;
  padding: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 80px rgb(0 0 0 / 25%);
}

.cookie-banner p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.cookie-banner__actions {
  display: grid;
  gap: 0.5rem;
}

.participant-bottom-nav {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.35rem max(0.5rem, env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  background: rgb(255 255 255 / 97%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -7px 24px rgb(19 35 67 / 10%);
}

.participant-bottom-nav a {
  display: grid;
  min-height: 54px;
  place-items: center;
  align-content: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
}

.participant-bottom-nav a span {
  color: var(--blue);
  font-size: 1.1rem;
}

.participant-page .site-footer {
  padding-bottom: 6rem;
}

.has-participant-nav .site-footer {
  padding-bottom: 6rem;
}

.has-participant-nav .mobile-sticky-cta {
  bottom: 62px;
}

.has-participant-nav .cookie-banner {
  bottom: 4.75rem;
}

@media (min-width: 540px) {
  .form-grid--two,
  .insight-grid,
  .speaker-grid,
  .ticket-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .copy-field {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .details-list div {
    grid-template-columns: 130px 1fr;
    gap: 1rem;
  }

  .qr-block {
    grid-template-columns: minmax(180px, 260px) 1fr;
  }
}

@media (min-width: 720px) {
  .container {
    width: min(calc(100% - 3rem), var(--container));
  }

  .carousel-controls {
    display: flex;
  }

  .event-grid,
  .series-grid,
  .ticket-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-grid--compact,
  .ticket-list--past {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .event-filters {
    grid-template-columns: 2fr repeat(3, 1fr);
    align-items: end;
  }

  .event-filters__submit {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .event-filters__clear {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .ticket-card {
    grid-template-columns: minmax(180px, 0.85fr) 1.15fr;
  }

  /* `aspect-ratio: auto` fazia a imagem herdar a altura da linha do grid — ou
     seja, a altura do CORPO do cartao — e a arte era recortada ou tarjada para
     caber numa proporcao que ninguem escolheu. Mantendo a proporcao da arte e
     alinhando ao topo, a imagem tem o tamanho dela e o cartao acomoda. */
  .ticket-card > img,
  .ticket-card__visual {
    align-self: start;
  }

  .confirmation-event {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) 1.15fr;
  }

  /* A ALTURA DA ARTE NAO ACOMPANHA A COLUNA DE TEXTO.

     Havia `height: 100%; aspect-ratio: auto` aqui: a imagem esticava ate a
     altura do bloco ao lado, que cresce com a quantidade de texto. Junto do
     `object-fit: cover` da regra base, isso recortava a arte numa proporcao
     imprevisivel — mais texto, recorte maior. A mesma arte aparecia diferente
     em cada evento, sem que ninguem tivesse mexido nela.

     Mantendo a proporcao 16/9 da regra base, o recorte deixa de existir: a
     arte de card ja e 16/9, e o slot passou a ser exatamente o tamanho dela.

     `align-self: start` impede que a grade estique a imagem para igualar a
     altura da coluna vizinha, que e o comportamento padrao de grid. */
  .confirmation-event > img {
    align-self: start;
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }

  .cookie-banner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .cookie-banner__actions {
    display: flex;
  }
}

@media (min-width: 920px) {
  .nav-toggle {
    display: none;
  }

  /* Alvo de toque dos itens do menu principal no desktop. */
  .site-nav > a:not(.button) {
    min-height: 40px;
    padding-inline: var(--sp-8);
  }

  .site-nav,
  .site-nav[data-open="true"] {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-nav > a:not(.button) {
    display: inline-flex;
    align-items: center;
  }

  .nav-logout .button {
    width: auto;
  }

  .home-hero__grid,
  .event-hero__grid,
  .series-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.95fr);
    align-items: center;
  }

  .home-hero__visual {
    min-height: 430px;
  }

  .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .registration-panel {
    position: sticky;
    top: 96px;
  }

  .mobile-sticky-cta {
    display: none;
  }

  .auth-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: clamp(3rem, 8vw, 7rem);
  }

  .account-hero__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .account-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
  }

  .ticket-detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 2rem;
  }

  .confirmation-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.65fr);
    gap: 2rem;
  }

  .participant-bottom-nav {
    display: none;
  }

  .participant-page .site-footer {
    padding-bottom: 1.5rem;
  }

  .has-participant-nav .site-footer {
    padding-bottom: 1.5rem;
  }

  .has-participant-nav .cookie-banner {
    bottom: 1rem;
  }
}

@media (min-width: 1120px) {
  .event-filters {
    grid-template-columns: 2fr repeat(3, minmax(130px, 1fr)) auto auto;
  }

  .event-filters__submit,
  .event-filters__clear {
    grid-column: auto;
    grid-row: auto;
  }

  .event-filters__clear {
    justify-self: center;
  }

  .ticket-list--account {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .participant-bottom-nav,
  .ticket-actions,
  .ticket-hero .back-link,
  .cookie-banner,
  .mobile-sticky-cta {
    display: none !important;
  }

  body,
  .participant-section {
    background: #fff;
  }

  .ticket-hero {
    padding: 1rem 0;
    color: var(--ink);
    background: #fff;
  }

  .ticket-hero h1 {
    color: var(--blue);
  }

  .ticket-detail-grid {
    display: block;
  }

  .digital-ticket {
    max-width: 700px;
    margin-inline: auto;
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ==========================================================================
   COMPONENTES DE OVERLAY E FEEDBACK
   Estes componentes existiam na marcacao e no JS, mas nunca tiveram CSS.
   Contrato de estado (definido por public/js/site.js):
     fechado -> aria-hidden="true"   aberto -> atributo data-open presente
   ========================================================================== */

/* --- Drawer de navegacao mobile ------------------------------------------ */
.site-drawer {
  position: fixed;
  z-index: 300;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-drawer[data-open] {
  visibility: visible;
  pointer-events: auto;
}

.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(19 35 67 / 45%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.site-drawer[data-open] .site-drawer__backdrop {
  opacity: 1;
}

.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(86vw, 340px);
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-16);
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}

.site-drawer[data-open] .site-drawer__panel {
  transform: translateX(0);
}

.site-drawer__close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--line);
}

.site-drawer__close .brand img {
  width: 130px;
}

.site-drawer__nav {
  display: grid;
  gap: var(--sp-4);
}

.site-drawer__nav > a:not(.button) {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: var(--sp-12);
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-drawer__nav > a:not(.button):hover,
.site-drawer__nav > a:not(.button):focus-visible {
  background: var(--blue-pale);
}

/* Acima de 920px a navegacao e inline: o drawer nunca deve ser alcancavel. */
@media (min-width: 920px) {
  .site-drawer {
    display: none;
  }
}

/* --- Share dialog (desktop) / bottom sheet (mobile) --------------------- */
.share-dialog {
  position: fixed;
  z-index: 320;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  visibility: hidden;
  background: rgb(19 35 67 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.share-dialog[data-open] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.share-dialog__panel {
  width: min(100%, 460px);
  padding: var(--sp-24);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-float);
  transform: translateY(16px);
  transition: transform var(--dur-slow) var(--ease);
}

.share-dialog[data-open] .share-dialog__panel {
  transform: translateY(0);
}

.share-dialog__title {
  margin: 0;
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 700;
}

.share-options {
  display: grid;
  gap: var(--sp-8);
}

.share-option {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  color: var(--blue);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.share-option:hover,
.share-option:focus-visible {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.share-option__icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--blue-soft);
  background: var(--blue-pale);
  border-radius: 50%;
}

@media (min-width: 720px) {
  .share-dialog {
    align-items: center;
  }

  .share-dialog__panel {
    border-radius: var(--radius-lg);
  }
}

.share-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.share-btn:hover,
.share-btn:focus-visible {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

/* --- Toasts ------------------------------------------------------------- */
.toast-region {
  position: fixed;
  z-index: 340;
  right: var(--sp-16);
  bottom: var(--sp-16);
  left: var(--sp-16);
  display: grid;
  gap: var(--sp-8);
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  width: min(100%, 420px);
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  border-left-color: var(--success);
}

.toast--error {
  border-left-color: var(--danger);
}

.toast--warning {
  border-left-color: var(--warning);
}

.toast--info {
  border-left-color: var(--blue-soft);
}

.toast__close {
  margin-left: auto;
  padding: 0 var(--sp-4);
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 720px) {
  .toast-region {
    left: auto;
    justify-items: end;
  }
}

/* --- Skeleton ----------------------------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--soft);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 65%), transparent);
  animation: skeleton-sweep 1.25s infinite;
  content: "";
}

.skeleton--text {
  height: 0.85rem;
  margin-bottom: var(--sp-8);
}

.skeleton--title {
  height: 1.3rem;
  width: 70%;
  margin-bottom: var(--sp-12);
}

.skeleton--media {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

@keyframes skeleton-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

.toast__icon {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info .toast__icon { color: var(--blue-soft); }

/* ==========================================================================
   HEADER COMPACTO
   ========================================================================== */
.site-header__inner {
  min-height: var(--header-height);
}

.site-header {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header--scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--shadow-subtle);
}

/* A pagina do evento usa header discreto para nao competir com a conversao. */
.page-event .brand__product {
  display: none;
}

/* ==========================================================================
   INSCRICAO NO MOBILE — bottom sheet
   Base (sem JS): o painel fica no fluxo e e sempre alcancavel.
   Com JS (.js-enhanced) abaixo de 920px: vira bottom sheet acessivel.
   Nunca usar display:none no painel — isso removeria o unico caminho
   de inscricao em telas pequenas.
   ========================================================================== */
.registration-sheet-backdrop {
  position: fixed;
  z-index: 240;
  inset: 0;
  background: rgb(19 35 67 / 45%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

@media (max-width: 919px) {
  .js-enhanced .registration-panel[data-sheet] {
    position: fixed;
    z-index: 250;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 90dvh;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    box-shadow: var(--shadow-float);
    padding-bottom: max(var(--sp-24), env(safe-area-inset-bottom));
    /* SEM PADDING NO TOPO, e o cabecalho do sheet encosta no topo do scroll.

       Com padding aqui, o `position: sticky; top: 0` do cabecalho gruda no topo
       do SCROLLPORT — que comeca DEPOIS do padding. Sobrava uma fresta de 21px
       (20 de padding + 1 de borda) por onde o conteudo rolava a vista, acima de
       um cabecalho que deveria tapa-lo: medido no site, com o painel rolado.

       Era isso o "quebrado no Inscrição" relatado no celular. O espacamento
       superior passa a vir do proprio cabecalho, que ja tem padding. */
    padding-top: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
  }

  .js-enhanced .registration-panel[data-sheet][data-sheet-open] {
    transform: translateY(0);
    visibility: visible;
  }

  .js-enhanced .registration-sheet-backdrop[data-sheet-open] {
    opacity: 1;
    visibility: visible;
  }

  /* Alca visual + botao de fechar do sheet */
  .registration-sheet__handle {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    /* Margem negativa so nas LATERAIS, para o cabecalho sangrar ate as bordas
       do sheet. No topo ela deslocava o ponto de grudagem e abria a fresta. */
    margin: 0 calc(var(--sp-16) * -1) var(--sp-16);
    padding: var(--sp-12) var(--sp-16);
    background: var(--event-surface);
    border-bottom: 1px solid var(--event-border);
  }
}

@media (min-width: 920px) {
  .registration-sheet__handle,
  .registration-sheet-backdrop {
    display: none;
  }
}

.registration-sheet__handle p {
  margin: 0;
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Barra inferior persistente de CTA (mobile) */
.mobile-sticky-cta {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}

.mobile-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}

.mobile-sticky-cta__price {
  display: block;
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-sticky-cta__meta {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.mobile-sticky-cta .button {
  flex: 0 0 auto;
  min-height: 48px;
}

/* ==========================================================================
   PAGINA DO EVENTO
   ========================================================================== */
/* Banner de ponta a ponta: ocupa toda a largura da viewport, sem container e
   sem cantos arredondados, mantendo a mesma altura de antes. A arte do evento
   passa a ser a primeira coisa da pagina, sem moldura. */
.event-banner {
  padding-top: 0;
  background: var(--event-background);
}

.event-banner__inner {
  width: 100%;
}

.event-banner__picture,
.event-banner .event-visual-fallback {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 400px);
  overflow: hidden;
  background: var(--blue-pale);
  border-radius: 0;
}

/* A regra base do banner precisa vir ANTES da media query do celular.

   Media query nao acrescenta especificidade: entre dois seletores iguais quem
   vence e o que aparece por ultimo no arquivo. Com esta regra depois do bloco
   `@media`, o `object-fit: cover` daqui derrubava o `contain` de la em
   silencio — medido no navegador: a regra do celular existia, e o valor
   computado continuava `cover`. */
.event-banner__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NO CELULAR O BANNER NAO RECORTA.
   No desktop a faixa panoramica de altura fixa e proposital: o banner e um
   elemento de topo e nao deve empurrar o titulo para fora da tela.

   No celular a mesma regra destruia a arte. `clamp(200px, 30vw, 400px)` resolve
   em 200px num aparelho de 390px de largura (30vw = 117px, o minimo ganha), e
   com `object-fit: cover` uma arte 1080x1080 entrava com 390px de altura e
   perdia METADE — data e horario, que ficam na base do material, sumiam.

   Aqui a altura passa a sair da propria proporcao da imagem, declarada nas
   dimensoes da <source>. Arte quadrada aparece quadrada; arte panoramica
   aparece como faixa. `max-height` existe so para o caso patologico de uma arte
   muito vertical tomar a tela inteira. */
@media (max-width: 719px) {
  /* NO CELULAR TODO SLOT E FAIXA — INCLUSIVE PARA ARTE QUADRADA.

     Com uma coluna so, um slot quadrado ocupa a largura inteira: num aparelho
     de 375px, 341px de arte mais o texto davam UM CARD POR TELA. Percorrer a
     lista de eventos virava rolagem longa sem conseguir comparar nada, que e o
     oposto do que uma listagem serve.

     A faixa 16/9 recorta a arte quadrada, e aqui o recorte custa pouco: o card
     traz titulo, data e formato em TEXTO logo abaixo. A imagem no card e
     reconhecimento, nao a informacao.

     A regra vale para as tres proporcoes de propósito — nenhuma excecao, senao
     volta a haver arte que estica a lista. */
  .event-card__media,
  .series-card__media {
    max-height: none;
    aspect-ratio: 16 / 9;
  }


  .event-banner__picture {
    height: auto;
  }

  .event-banner__picture img {
    height: auto;
    /* 34vh, e nao 48vh.

       Medido no site publicado, num aparelho de 375x812: a arte quadrada de
       1080x1080 entrava com 375px de altura e o banner ocupava 46% da PRIMEIRA
       TELA. Sobrava pouco para o titulo, e a data e o botao de inscricao
       ficavam abaixo da dobra — num aparelho onde a pagina existe justamente
       para converter inscricao.

       34vh sao 276px nesse aparelho: a arte continua sendo a abertura, e
       titulo, data e chamada cabem sem rolagem.

       O banner tambem e FAIXA no celular, e nao caixa quadrada.

       Duas tentativas ficaram pelo caminho, e vale registrar por que:

        - `cover` a 48vh mostrava a arte quadrada quase inteira, mas o banner
          comia 46% da primeira tela e empurrava titulo, data e botao de
          inscricao para baixo da dobra — numa pagina que existe para converter
          inscricao;
        - `contain` a 34vh preservava a arte inteira, mas o resultado na tela
          era um quadrado com tarja dos dois lados: continua parecendo quadrado,
          e continua tomando espaco de leitura.

       A faixa recorta topo e base da arte quadrada, e esse e o custo aceito
       CONSCIENTEMENTE aqui: a pagina do evento repete data, horario e local em
       TEXTO logo abaixo do banner. Cortar a arte nao esconde informacao nenhuma
       desta pagina.

       Para a arte aparecer inteira, o caminho e o material certo: um banner de
       celular em formato de faixa (1200x630, por exemplo), e nao um quadrado de
       feed reaproveitado. */
    aspect-ratio: 16 / 9;
    max-height: 34vh;
    object-fit: cover;
  }

  /* O bloco de reserva nao tem proporcao para respeitar: mantem a faixa. */
  .event-banner .event-visual-fallback {
    height: 200px;
  }
}

/* Transicao suave do banner para o fundo da pagina. */
.event-banner::after {
  display: block;
  height: 1px;
  background: var(--event-border);
  content: "";
}

/* Bloco de identificacao no topo da coluna de conteudo */
.event-headline {
  margin-bottom: clamp(var(--sp-24), 3vw, var(--sp-32));
}

.event-headline h1 {
  margin-bottom: var(--sp-12);
  color: var(--event-primary);
}

.event-headline .lead {
  margin-bottom: var(--sp-16);
  color: var(--event-muted-text);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
}

.event-headline__series {
  margin-bottom: var(--sp-8);
}

.event-headline__series a {
  color: inherit;
  text-decoration: none;
}

.event-headline__series a:hover {
  text-decoration: underline;
}

.event-headline .tag-row {
  margin-bottom: 0;
}

.event-content-section {
  background: var(--event-background);
}

/* Prose */
.prose-block h2,
.prose-block h3 {
  color: var(--event-primary);
}

.prose-block p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   CARD DE INSCRICAO
   ========================================================================== */
.registration-panel {
  background: var(--event-surface);
  border-color: var(--event-border);
  border-radius: var(--event-radius);
  box-shadow: var(--shadow-card);
}

.registration-panel h2 {
  color: var(--event-primary);
}

.reg-summary {
  display: grid;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--event-border);
}

/* AVISO DE EVENTO PAGO, acima do formulario.

   Fica ANTES dos campos de proposito: a pessoa precisa saber que a vaga so vale
   depois do pagamento antes de investir o esforco de preencher. Descobrir
   depois de enviar e o que gera reclamacao — e com razao.

   Usa as cores do tema do evento (`--event-*`), como o resto do painel de
   inscricao, para nao parecer um alerta de erro do sistema: nao e problema, e
   informacao. */
.reg-notice {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border-left: 3px solid var(--event-primary, var(--orange));
  border-radius: 8px;
  background: var(--event-surface, var(--blue-pale));
  font-size: 0.9rem;
  line-height: 1.5;
}

.reg-notice p {
  margin: 0;
}

.reg-notice__title {
  color: var(--event-primary, var(--blue));
  font-weight: 700;
}

.reg-summary__price {
  margin: 0;
  color: var(--event-primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

/* Duas colunas: a coluna direita e estreita e "15 de setembro de 2026" nao
   cabe em tres colunas sem quebrar em varias linhas. */
.reg-summary__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12) var(--sp-16);
  margin: 0;
}

.reg-summary__facts div:first-child {
  grid-column: 1 / -1;
}

.reg-summary__facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reg-summary__facts dt {
  color: var(--event-muted-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reg-summary__facts dd {
  margin: 0;
  color: var(--event-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.reg-summary__status {
  margin: 0;
}

.registration-panel .button--large {
  width: 100%;
  min-height: 52px;
  font-size: 1.02rem;
}

/* Sinais de confianca — fatos do fluxo, sem numero inventado */
.trust-list {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-16) 0 0;
  padding: 0;
  color: var(--event-muted-text);
  font-size: 0.82rem;
  list-style: none;
}

.trust-list li {
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
}

.trust-list li::before {
  flex: 0 0 auto;
  color: var(--success);
  font-weight: 700;
  content: "✓";
}

/* Botao de icone compacto (fechar de sheet e dialog) */
.icon-button--small {
  width: 36px;
  height: 36px;
}

.share-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
}

.mobile-sticky-cta__confirmed {
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ==========================================================================
   CARD DE EVENTO — area de clique total com um unico link
   ========================================================================== */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-color: var(--event-border);
  border-radius: var(--event-radius);
  background: var(--event-surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.event-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

/* O ::after do titulo cobre o card inteiro: um link, area de clique total. */
.event-card__title a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.event-card__title a {
  color: inherit;
  text-decoration: none;
}

.event-card:focus-within {
  border-color: var(--blue-soft);
}

.event-card__title a:focus-visible {
  outline: none;
}

.event-card:focus-within {
  outline: 3px solid rgb(255 100 8 / 45%);
  outline-offset: 3px;
}

.event-card__media {
  position: relative;
}

.event-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-16);
}

.event-card__eyebrow {
  margin-bottom: var(--sp-8);
}

.event-card__title {
  /* Limite visual de duas linhas para os cards manterem a mesma altura. */
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: var(--sp-8);
  color: var(--event-primary);
  font-size: 1.05rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-card__series {
  margin-bottom: var(--sp-4);
  font-size: 0.82rem;
}

.event-card__meta {
  margin-bottom: 0;
  color: var(--event-muted-text);
  font-size: 0.85rem;
}

.event-card__footer {
  margin-top: auto;
  padding-top: var(--sp-12);
  border-top: 0;
}

.event-card__ribbon {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  padding: var(--sp-4) var(--sp-8);
  color: var(--blue);
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgb(19 35 67 / 20%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Eventos anteriores em nivel visual secundario, sem competir com os futuros. */
.event-card--past {
  box-shadow: none;
}

.event-card--past .event-card__picture img {
  filter: saturate(0.55);
}

.event-card--past .date-badge {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .event-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   BUSCA NO HEADER
   ========================================================================== */
.header-search {
  position: relative;
  display: none;
  flex: 1 1 auto;
  max-width: 380px;
  margin-inline: var(--sp-24);
}

.header-search__input {
  width: 100%;
  min-height: 40px;
  padding: var(--sp-8) 2.5rem var(--sp-8) var(--sp-16);
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
}

.header-search__input:focus {
  border-color: var(--blue-soft);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgb(38 58 97 / 10%);
  outline: none;
}

.header-search__button {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--blue-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
  .header-search {
    display: block;
  }
}

.button--compact {
  min-height: 38px;
  padding: var(--sp-8) var(--sp-16);
  font-size: 0.85rem;
}

.site-drawer__footer {
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   HOME
   ========================================================================== */
.home-hero {
  border-bottom: 1px solid var(--line);
}

.home-hero__grid {
  align-items: center;
  padding-block: clamp(var(--sp-32), 4.5vw, var(--sp-64));
}

.home-hero__copy > :last-child {
  margin-bottom: 0;
}

.home-hero h1 {
  max-width: 18ch;
}

.home-hero .lead {
  max-width: 52ch;
}

/* Busca da Home */
.home-search {
  position: relative;
  max-width: 520px;
  margin-top: var(--sp-24);
}

.home-search__input {
  width: 100%;
  min-height: 52px;
  padding: 0 3.25rem 0 var(--sp-16);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-subtle);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.home-search__input:focus {
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 4px rgb(38 58 97 / 12%);
  outline: none;
}

.home-search__button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--event-cta-contrast);
  background: var(--event-cta);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.home-search__button:hover {
  background: var(--event-cta-hover);
}

.home-search__dropdown {
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--sp-8));
  right: 0;
  left: 0;
  display: none;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

.home-search__dropdown[data-open] {
  display: block;
}

.home-search__result {
  display: flex;
  gap: var(--sp-12);
  align-items: baseline;
  padding: var(--sp-12) var(--sp-16);
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.home-search__result:last-child {
  border-bottom: 0;
}

.home-search__result:hover,
.home-search__result:focus-visible {
  background: var(--blue-pale);
}

.home-search__result-date {
  flex: 0 0 auto;
  color: var(--orange-text);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-search__empty {
  padding: var(--sp-12) var(--sp-16);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Chips de coleções */
.collection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
}

.collection-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 38px;
  padding: var(--sp-8) var(--sp-16);
  color: var(--blue);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.collection-chip:hover,
.collection-chip:focus-visible {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.collection-chip span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Card de destaque do hero */
.featured-card {
  display: grid;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.featured-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--blue-pale);
}

.featured-card__picture,
.featured-card__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-card__body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-16);
}

.featured-card__label {
  color: var(--orange-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured-card__title {
  color: var(--blue);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.featured-card__meta {
  color: var(--muted);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .featured-card:hover {
    transform: none;
  }
}

/* Grid de eventos.
   Contagem FIXA de colunas por breakpoint em vez de `auto-fit` com `1fr`:
   com poucos eventos o `1fr` esticava o card para a largura inteira do
   container e a imagem 16:9 virava um bloco de ~700 px de altura. Colunas
   fixas mantem o card no mesmo tamanho, com 1 ou com 12 eventos. */
.event-grid--auto {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .event-grid--auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 920px) {
  .event-grid--auto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .event-grid--auto {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.series-card__title a {
  color: inherit;
  text-decoration: none;
}

.series-card__title a:hover {
  text-decoration: underline;
}

.series-card__next {
  margin-bottom: 0;
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.series-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--blue-pale);
}

@media (min-width: 920px) {
  /* Hero: coluna de texto + destaque, sem ocupar a tela inteira */
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  }

  .home-hero__grid--single {
    grid-template-columns: minmax(0, 760px);
  }
}

/* Uma serie sozinha nao deve esticar por toda a largura */
.series-grid--single {
  max-width: 620px;
}

/* ==========================================================================
   PAGINA DA SERIE
   ========================================================================== */
.series-hero__intro {
  max-width: 720px;
  padding-block: clamp(var(--sp-24), 3.5vw, var(--sp-48));
}

.series-hero__intro > :last-child {
  margin-bottom: 0;
}

.series-hero__count {
  margin-top: var(--sp-16);
  color: var(--event-muted-text);
  font-size: 0.9rem;
}

.series-hero__count strong {
  color: var(--event-primary);
}

.next-edition {
  display: grid;
  overflow: hidden;
  background: var(--event-surface);
  border: 1px solid var(--event-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.next-edition__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--blue-pale);
}

.next-edition__picture,
.next-edition__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next-edition__body {
  padding: clamp(var(--sp-16), 3vw, var(--sp-32));
}

.next-edition__title {
  margin-bottom: var(--sp-8);
  color: var(--event-primary);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
}

.next-edition .event-facts {
  margin-top: var(--sp-16);
}

@media (min-width: 920px) {
  .next-edition {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  .next-edition__media {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   EMPILHAMENTO DAS BARRAS FIXAS
   Ordem no mobile, de baixo para cima: CTA de inscricao -> banner de cookies.
   O CTA e a acao principal da pagina e nao pode ficar coberto.
   ========================================================================== */
@media (max-width: 919px) {
  .has-mobile-cta .cookie-banner {
    bottom: calc(72px + var(--sp-16) + env(safe-area-inset-bottom));
  }

  .has-participant-nav.has-mobile-cta .cookie-banner {
    bottom: calc(140px + var(--sp-16) + env(safe-area-inset-bottom));
  }

  /* Enquanto o bottom sheet esta aberto, o banner nao deve disputar espaco. */
  .registration-panel[data-sheet-open] ~ .cookie-banner,
  body:has(.registration-panel[data-sheet-open]) .cookie-banner {
    display: none;
  }
}

/* O CTA fica acima do banner de cookies na ordem de pintura. */
.mobile-sticky-cta {
  z-index: 210;
}

/* Folga para o conteudo nao terminar embaixo da barra fixa de CTA no mobile. */
@media (max-width: 919px) {
  .has-mobile-cta .site-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .has-participant-nav.has-mobile-cta .site-footer {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   ALVOS DE TOQUE — WCAG 2.2 (2.5.8)
   Links autonomos (fora de frase corrida) recebem area de toque adequada.
   ========================================================================== */
.text-link--large,
.event-headline__series a,
.section-action .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: var(--sp-4);
}

.section-action .text-link--large {
  min-height: 44px;
  padding-inline: var(--sp-16);
}

.event-headline__series a {
  padding-inline: 2px;
  margin-inline: -2px;
}

.event-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-12);
}

/* Cabecalho de resultados da listagem */
.results-heading {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  align-items: baseline;
  justify-content: space-between;
  margin-block: var(--sp-24) var(--sp-16);
}

.results-heading h2 {
  margin: 0;
  color: var(--event-primary);
  font-weight: 700;
}

.results-heading h2 strong {
  font-weight: 700;
}

.results-heading__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
}

/* ==========================================================================
   AREA DE CLIQUE DOS CARDS DE SERIE E DA EDICAO EM DESTAQUE
   Mesmo padrao do card de evento: um unico link cobrindo o card inteiro,
   para o alvo de toque nao ser apenas a linha de texto do titulo.
   ========================================================================== */
.series-card,
.next-edition {
  position: relative;
}

.series-card__title a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.series-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.series-card:focus-within {
  outline: 3px solid rgb(255 100 8 / 45%);
  outline-offset: 3px;
}

/* O CTA da edicao em destaque fica acima do link esticado do card. */
.next-edition__body .button {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   ALVOS DE TOQUE DOS LINKS DE NAVEGACAO — WCAG 2.2 (2.5.8)
   Links autonomos ("Voltar para o login", "Alterar minha senha", "Ver todos")
   ficavam com 15 a 21 px de altura. A excecao "inline" da 2.5.8 vale para link
   dentro de frase corrida, nao para link autonomo.

   `inline-flex` mantem o alinhamento na linha de base quando o link aparece no
   meio de um texto, e o min-height de 24px so cresce a area de toque.
   ========================================================================== */
.text-link,
.back-link,
.auth-back-link,
.link-button,
.label-row a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* Links autonomos em contexto de acao merecem alvo confortavel de 44px. */
.form-actions .text-link,
.stack-actions .text-link,
.card-heading .text-link,
.support-card .text-link,
.auth-card > .text-link,
.auth-back-link,
.back-link {
  min-height: 44px;
}

/* O botao de voltar tem margem propria: evita dobrar o espaco vertical. */
.back-link {
  align-items: flex-start;
}

/* ==========================================================================
   MENUS DO HEADER — Experiencias, conta e entrar
   Abrem no hover (apenas onde existe mouse) e no clique/teclado.
   O gatilho e um link real, entao sem JavaScript o item continua navegavel.
   ========================================================================== */
.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* Altura minima de 40px: o gatilho e um alvo de navegacao autonomo e a caixa
   de texto sozinha ficava em 19px, abaixo do minimo da WCAG 2.2 (2.5.8). */
.nav-menu__trigger {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--sp-8);
}

.nav-menu__chevron {
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform var(--dur-fast) var(--ease);
}

.nav-menu[data-open] .nav-menu__chevron {
  transform: rotate(180deg);
}

.nav-menu__panel {
  position: absolute;
  z-index: 220;
  top: calc(100% + var(--sp-8));
  right: 0;
  width: min(92vw, 380px);
  padding: var(--sp-16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}

.nav-menu[data-open] .nav-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ponte invisivel entre gatilho e painel: o ponteiro atravessa o vao sem
   disparar mouseleave e fechar o menu na cara do usuario. */
.nav-menu__panel::before {
  position: absolute;
  top: calc(var(--sp-8) * -1);
  right: 0;
  left: 0;
  height: var(--sp-8);
  content: "";
}

.nav-menu__title {
  margin: 0 0 var(--sp-12);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-menu__list {
  display: grid;
  gap: var(--sp-4);
}

.nav-menu__item {
  display: grid;
  gap: 2px;
  padding: var(--sp-12);
  color: var(--blue);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-menu__item:hover,
.nav-menu__item:focus-visible {
  background: var(--blue-pale);
}

.nav-menu__item-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.nav-menu__item-desc {
  /* Duas linhas no maximo: a descricao da serie pode ser longa. */
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nav-menu__item-meta {
  color: var(--orange-text);
  font-size: 0.72rem;
  font-weight: 700;
}

.nav-menu__all {
  display: block;
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
  color: var(--blue-soft);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.nav-menu__all:hover {
  color: var(--orange-text);
}

.nav-menu__panel--compact {
  width: min(92vw, 240px);
  padding: var(--sp-8);
}

.nav-menu__panel--login {
  width: min(92vw, 320px);
}

.nav-menu__logout {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

/* Gatilho de conta / entrar */
.account-trigger {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.account-trigger:hover,
.account-trigger:focus-visible,
.nav-menu[data-open] .account-trigger {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.account-trigger__avatar {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
}

.account-trigger__name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Formulario de login dentro do painel */
.login-mini {
  display: grid;
  gap: var(--sp-12);
}

.login-mini .form-field label {
  font-size: 0.82rem;
}

.login-mini .form-field input {
  min-height: 44px;
}

.login-mini__links {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

/* Subitens de Experiencias no drawer mobile */
.site-drawer__label {
  margin: var(--sp-12) 0 var(--sp-4);
  padding-inline: var(--sp-12);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-drawer__nav > a.site-drawer__sub {
  min-height: 44px;
  padding-left: var(--sp-24);
  font-size: 0.92rem;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu__panel {
    transition: none;
  }

  .nav-menu__chevron {
    transition: none;
  }
}

/* ==========================================================================
   DENSIDADE DOS CARDS
   O card estava grande demais porque a imagem crescia junto com a coluna.
   Limitar a altura da media mantem a proporcao sem transformar o card em
   painel, inclusive quando existe um unico evento publicado.
   ========================================================================== */
.event-card__media {
  max-height: 210px;
}

/* Nao ha mais excecao por formato de arte aqui.

   Existiam duas regras soltando o teto para arte quadrada e retrato, de quando
   o slot seguia a proporcao do arquivo. Agora o slot e sempre 16/9, entao a
   altura ja nasce dentro do teto e a excecao so podia confundir quem lesse
   depois. */

.event-card__body {
  padding: var(--sp-12) var(--sp-16) var(--sp-16);
}

.event-card__title {
  font-size: 1rem;
}

.event-card__eyebrow {
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.event-card .date-badge strong {
  font-size: 1.15rem;
}

.event-card .pill {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
}

.event-card__footer {
  padding-top: var(--sp-8);
}

.event-card__footer .status-dot {
  font-size: 0.74rem;
}

/* Grid compacto (edicoes anteriores) fica um degrau menor ainda. */
.event-grid--compact .event-card__media {
  max-height: 150px;
}

/* Carrossel: largura menor por card para caber mais na dobra. */
.event-carousel {
  grid-auto-columns: min(82vw, 300px);
}

@media (min-width: 920px) {
  .event-grid,
  .series-grid,
  .ticket-list {
    gap: var(--sp-16);
  }
}

/* ==========================================================================
   GRID ADAPTATIVO A QUANTIDADE (briefing secao 15)

   Com 4 colunas fixas, um unico evento deixava 3 colunas vazias. O atributo
   data-count vem do template, que sabe quantos eventos existem, e estreita o
   grid para a linha parecer intencional em vez de incompleta.

   A CONTAGEM DE COLUNAS ANDA JUNTO DO max-width, E ESSA E A CORRECAO.

   Antes so o max-width era ajustado. As colunas continuavam quatro, entao o
   unico card era espremido na PRIMEIRA de quatro colunas dentro de uma caixa
   de 320px. Medido no navegador, com o CSS publicado: coluna de 68px, texto
   quebrando uma palavra por linha, card com a altura de uma coluna de jornal.

   Nao era so o caso de um card. Com dois, quatro colunas de 152px; com tres,
   quatro de 236px. So o caso de quatro estava certo — que e justamente o unico
   em que os dois numeros coincidem, e por isso o defeito passou despercebido.

   REGRA, para quem mexer aqui depois: mudou o max-width, muda tambem
   grid-template-columns. Os dois descrevem a mesma linha, e sozinho nenhum dos
   dois esta completo. test/unit/grid-adaptativo.test.js confere o par.
   ========================================================================== */
@media (min-width: 1200px) {
  .event-grid--auto[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
  }

  .event-grid--auto[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 656px;
  }

  .event-grid--auto[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 992px;
  }
}

@media (min-width: 920px) and (max-width: 1199px) {
  .event-grid--auto[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
  }

  .event-grid--auto[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 696px;
  }
}

@media (min-width: 560px) and (max-width: 919px) {
  .event-grid--auto[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
  }
}

/* Selo de data com intervalo: "15–17" ou "30 set / – 02 out" precisa de mais
   largura que um dia unico, sem virar um bloco desalinhado no card. */
.date-badge--range {
  flex-wrap: wrap;
  row-gap: 0;
}

.date-badge--range strong {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.date-badge--range span {
  font-size: 0.7rem;
}

/* ==========================================================================
   Inscricao recebida sem sessao
   Confirmacao para quem se inscreveu com uma conta que ja existia e nao esta
   autenticado. Cartao unico e estreito: a pagina tem uma unica leitura, que e
   "deu certo, o acesso foi para o seu WhatsApp".
   ========================================================================== */

.receipt-card {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.receipt-card__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  color: var(--event-cta-contrast, var(--blue));
  background: var(--event-cta, var(--orange));
  border-radius: var(--radius-pill);
}

.receipt-card h1 {
  margin-bottom: 0.5rem;
}

.receipt-card .lead {
  margin-bottom: 1.5rem;
}

.receipt-card__notice {
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.receipt-card__notice p {
  margin: 0;
  font-size: 0.95rem;
}

.receipt-card__notice p + p {
  margin-top: 0.6rem;
}

.receipt-card__steps {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0 0 1.75rem;
  text-align: left;
  list-style: none;
}

.receipt-card__steps li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Numeracao propria para manter o contador visivel com list-style: none. */
.receipt-card__steps {
  counter-reset: receipt-step;
}

.receipt-card__steps li::before {
  position: absolute;
  top: 0.05rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  content: counter(receipt-step);
  counter-increment: receipt-step;
  background: var(--line);
  border-radius: var(--radius-pill);
}

.receipt-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.receipt-card__help {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 40rem) {
  .receipt-card__actions {
    flex-direction: column;
  }

  .receipt-card__actions .button {
    width: 100%;
  }
}

/* Aviso de conta existente no topo do formulario de inscricao. Tom informativo,
   nao de erro: a pessoa nao errou nada, so precisa saber que nao ha passo extra. */
.registration-panel__account-hint {
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--event-cta, var(--orange));
  border-radius: var(--radius-sm);
}

.registration-panel__account-hint strong {
  color: var(--ink);
}

.registration-panel__account-hint .text-link {
  display: inline-block;
  margin-top: 0.3rem;
}

/* Separador discreto entre dois caminhos na mesma tela de autenticacao. */
.soft-divider {
  height: 1px;
  margin: 1.25rem 0;
  background: var(--line);
  border: 0;
}

/* ==========================================================================
   ACESSO RESTRITO — evento interno visto por quem nao tem acesso

   Tres pecas: o selo no card da agenda, o bloco em fluxo na pagina do evento e
   o overlay que o site.js abre por cima. O overlay e enfeite: o bloco em fluxo
   ja carrega a explicacao inteira e funciona sem JavaScript.

   A paleta e a institucional (azul prussiano sobre platina). Laranja e cor de
   acao e fica reservado ao botao de entrar: pintar o aviso de laranja daria a
   um estado neutro o peso de alerta.
   ========================================================================== */

.pill--restricted {
  color: var(--blue);
  background: var(--platinum);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.event-card--restricted .event-card__title a {
  color: var(--blue);
}

.event-card--restricted .event-visual-fallback {
  background: linear-gradient(160deg, var(--platinum), var(--blue-pale));
}

.event-card__ribbon--restricted {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--blue);
  background: #fff;
}

.status-dot--restricted::before {
  background: var(--slate);
}

/* --- Bloco em fluxo, na coluna de conteudo da pagina do evento --- */

.restricted-panel {
  display: grid;
  justify-items: start;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  padding: var(--sp-24);
  background: var(--soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.restricted-panel__mark {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.restricted-panel h2,
.restricted-dialog h2 {
  margin: 0;
  color: var(--blue);
}

.restricted-panel p,
.restricted-dialog p {
  margin: 0;
  color: var(--muted);
}

.restricted-panel__audience,
.restricted-dialog__audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.restricted-panel__audience > span:first-child,
.restricted-dialog__audience > span:first-child {
  color: var(--muted);
  font-size: 0.85rem;
}

.restricted-panel__hint,
.restricted-dialog__hint {
  font-size: 0.88rem;
}

.registration-panel--restricted {
  align-self: start;
}

/* --- Overlay --- */

.restricted-dialog {
  position: fixed;
  z-index: 320;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
  background: rgb(19 35 67 / 55%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.restricted-dialog[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.restricted-dialog__panel {
  display: grid;
  width: min(100%, 460px);
  justify-items: start;
  gap: var(--sp-12);
  padding: var(--sp-24);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-float);
  transform: translateY(16px);
  transition: transform var(--dur-slow) var(--ease);
}

.restricted-dialog[data-open] .restricted-dialog__panel {
  transform: translateY(0);
}

.restricted-dialog__panel .button {
  margin-top: var(--sp-4);
}

@media (min-width: 720px) {
  .restricted-dialog {
    align-items: center;
    padding: var(--sp-24);
  }

  .restricted-dialog__panel {
    border-radius: var(--radius-lg);
  }
}

/* Quem prefere menos movimento recebe o dialogo ja posicionado. */
@media (prefers-reduced-motion: reduce) {
  .restricted-dialog,
  .restricted-dialog__panel {
    transition: none;
  }

  .restricted-dialog__panel {
    transform: none;
  }
}

/* ==========================================================================
   Check-in do participante e avisos da area logada
   ========================================================================== */

.participant-notice {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--orange);
}

.participant-notice p {
  margin: 0;
}

.checkin-result {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px;
  text-align: center;
}

.checkin-result__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  color: #0f7a5a;
  background: #edf9f5;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 700;
}

.checkin-result__mark--alerta {
  color: var(--orange-text);
  background: var(--orange-soft);
}

.checkin-result__code {
  color: var(--muted, #5a6478);
  font-size: 0.9rem;
}

/* O codigo e digitado a mao, muitas vezes no celular e com o evento rolando:
   campo largo, fonte grande e monoespacada para conferir caractere a caractere. */
.checkin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 18px;
}

/* 500 (Medium), nao 600: a Effra nao tem corte SemiBold e o navegador
   sintetizaria o peso. Ver o bloco de tipografia no topo do arquivo. */
.checkin-form label {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 500;
}

.checkin-form input {
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* Preferência de comunicação na área da conta. */
.account-aviso {
  padding: 10px 14px;
  color: #0f7a5a;
  background: #edf9f5;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.account-nota {
  color: var(--muted);
  font-size: 0.86rem;
}


/* ── Seletor de convite ───────────────────────────────────────────
   Cartões de escolha no formulário público, um por convite disponível.

   DUAS REGRAS GLOBAIS BRIGAM COM ESTE BLOCO, e os seletores abaixo são assim
   por causa delas:

     .form-field label  { display: block }                 → matava o layout
     .form-field input  { width: 100%; min-height: 48px }  → esticava o rádio

   O cartão é um <label> e o rádio um <input>, os dois dentro do
   <fieldset class="form-field"> — herdavam as duas. Daí `.ticket-options` na
   frente de cada seletor: sem isso `.form-field label` (0,2,0) vence.

   Laranja só na borda e no acento do selecionado, nunca como superfície
   dominante: é cor de ação no manual da marca. */
.ticket-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.ticket-options .ticket-option {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  /* Anula o peso de `.form-field label`: o rótulo do cartão não é o rótulo do
     campo, e negrito em tudo apaga a hierarquia entre nome e descrição. */
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

/* O RÁDIO SAI DA TELA, MAS NÃO DA PÁGINA.

   `display: none` o tiraria da ordem de tabulação e do leitor de tela — o
   formulário viraria inoperante por teclado. Esta é a técnica do `.sr-only`
   que o projeto já usa: invisível, focalizável, anunciado.

   Também desfaz `.form-field input`, que o pintava como caixa de texto. */
.ticket-options .ticket-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ticket-option__name {
  grid-column: 1;
  font-weight: 700;
  color: var(--blue);
}

.ticket-option__price {
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--blue);
}

.ticket-option__meta {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
}

.ticket-option__left {
  color: var(--orange-text);
  font-weight: 700;
}

.ticket-options .ticket-option:hover {
  border-color: var(--line-strong);
}

/* O estado escolhido precisa ser legível sem depender só da cor: a barra
   lateral dá um segundo sinal para quem não distingue o laranja do cinza. */
.ticket-options .ticket-option:has(input:checked) {
  border-color: var(--orange-text);
  background: var(--orange-soft);
  box-shadow: inset 3px 0 0 var(--orange-text);
}

.ticket-options .ticket-option:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Alvo de toque confortável no celular, conforme a meta de WCAG 2.2 AA. */
@media (max-width: 719px) {
  .ticket-options .ticket-option {
    padding: 1rem;
  }
}

/* Retorno da prévia do cupom, logo abaixo do campo. */
.coupon-feedback {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--orange-text);
}

.coupon-feedback--ok {
  color: #18794e;
}

/* O preço com desconto precisa de um segundo sinal além da cor, para quem não
   distingue verde de azul-escuro. */
.ticket-option--com-desconto .ticket-option__price {
  color: #18794e;
}

.ticket-option--com-desconto .ticket-option__price::before {
  content: "com cupom ";
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}