/*
Theme Name: Lift Road Show
Theme URI: https://www.liftroadshow.com
Author: Cardoso Almeida Eventos
Description: Tema one-page para a Lift Road Show — evento itinerante de transporte vertical. Visual claro com acento vermelho, editável pelo Personalizar (Customizer).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: liftroadshow
*/

:root {
  --bg: #FBFAF8;
  --bg2: #F4F1EC;
  --surface: #FFFFFF;
  --text: #1E1D1B;
  --muted: #6B675F;
  --line: rgba(30, 29, 27, 0.09);
  --line2: rgba(30, 29, 27, 0.16);
  --red: #EC3238;
  --red-dark: #C9232A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.mono { font-family: 'JetBrains Mono', monospace; }
.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 20px;
}
h1, h2, h3 { font-family: 'Sora', sans-serif; letter-spacing: -.025em; }
.accent-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--red);
  letter-spacing: 0;
}

/* ---------- header pílula ---------- */
.lrs-header {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
}
.lrs-pill {
  pointer-events: auto;
  width: min(1020px, 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 11px 12px 11px 24px;
  border-radius: 999px;
  background: rgba(251, 250, 248, 0.78);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(30, 29, 27, 0.1);
  box-shadow: 0 12px 40px rgba(30, 29, 27, 0.1);
}
.lrs-pill .logo img { height: 30px; width: auto; display: block; }
.lrs-nav { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.lrs-nav a { color: var(--muted); text-decoration: none; padding: 9px 15px; border-radius: 999px; transition: all .2s; }
.lrs-nav a:hover { color: var(--text); background: rgba(30, 29, 27, 0.05); }
.lrs-nav a.is-home { color: var(--text); background: rgba(236, 50, 56, 0.1); }
.lrs-nav a.is-cta { color: #fff; background: var(--red); font-weight: 700; padding: 9px 18px; }
.lrs-nav a.is-cta:hover { background: var(--red-dark); }

/* botão do menu — escondido no desktop, onde a navegação já fica visível */
.lrs-burger {
  display: none;
  width: 44px; height: 44px; flex: none; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line2); border-radius: 999px; background: #fff;
  cursor: pointer;
}
.lrs-burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .25s cubic-bezier(.2,.6,.2,1), opacity .18s;
}
.lrs-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lrs-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lrs-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.lrs-hero {
  position: relative; overflow: hidden; min-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 95% at 50% 0%, #F5F1EA 0%, var(--bg) 62%);
}
.lrs-hero::after {
  content: ""; position: absolute; left: 50%; bottom: -32%;
  width: 900px; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(236, 50, 56, 0.1), transparent 62%);
  filter: blur(30px); transform: translateX(-50%);
}
.lrs-hero-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 170px 40px 100px; text-align: center; }
.lrs-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(236, 50, 56, 0.45); background: rgba(236, 50, 56, 0.06);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .18em;
  margin-bottom: 36px;
}
.lrs-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(236, 50, 56, 0.8); }
/* logo da edição (mais compacta que a genérica): altura maior para manter presença */
.lrs-hero-logo { height: clamp(88px, 12.5vw, 152px); width: auto; display: block; margin: 0 auto 34px; }
.lrs-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(36px, 5vw, 66px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 26px; }
.lrs-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--red); letter-spacing: 0; }
.lrs-hero-sub { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.85; letter-spacing: .02em; color: var(--muted); margin: 0 0 34px; }
.lrs-hero-ctas { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; }

/* ---------- animações do hero ---------- */
@keyframes lrs-rise { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes lrs-fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: block; transform: translateY(112%); animation: lrs-rise .95s cubic-bezier(.16, .84, .24, 1) forwards; }
.hero-anim-2 { opacity: 0; animation: lrs-fadeup .8s ease forwards; }
.word-rotator { display: inline-block; margin-left: .34em; vertical-align: bottom; height: 1.1em; overflow: hidden; position: relative; text-align: left; }
.word-rotator .word-inner { display: block; transition: transform .6s cubic-bezier(.5, 0, .1, 1); }
.word-rotator .word { display: block; height: 1.1em; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--red); letter-spacing: 0; }
.lrs-countdown { display: flex; justify-content: center; gap: 10px; margin: 0 0 38px; }
.lrs-countdown .unit { width: 78px; text-align: center; }
.lrs-countdown .box { background: #fff; border: 1px solid var(--line2); border-radius: 14px; padding: 14px 0; box-shadow: 0 8px 20px rgba(30, 29, 27, 0.06); }
.lrs-countdown .num { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.lrs-countdown .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; color: var(--muted); margin-top: 9px; }

.btn { display: inline-flex; align-items: center; gap: 9px; font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 700; text-decoration: none; padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer; transition: all .2s; }
.btn-red { color: #fff; background: var(--red); }
.btn-red:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-outline { color: var(--text); background: #fff; border: 1px solid var(--line2); font-weight: 600; }
.btn-outline:hover { border-color: rgba(30, 29, 27, 0.4); }
/* CTAs do hero em caixa alta */
.lrs-hero-ctas .btn { text-transform: uppercase; letter-spacing: .06em; }
.btn-soon {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .14em;
  color: var(--red); border: 1.5px dashed rgba(236, 50, 56, 0.55);
  background: #fff; padding: 15px 26px; border-radius: 999px;
}

/* ---------- stats ---------- */
.lrs-stats-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.lrs-stats { max-width: 1160px; margin: 0 auto; padding: 52px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.lrs-stats .num { font-family: 'Sora', sans-serif; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.lrs-stats .num.red { color: var(--red); }
.lrs-stats .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--muted); margin-top: 8px; }

/* ---------- seções ---------- */
.lrs-sec { padding: 100px 40px; }
.lrs-wrap { max-width: 1160px; margin: 0 auto; }
.lrs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* centralizado: a folga que sobra em relação ao texto fica dividida em cima e
   embaixo, em vez de acumular embaixo da moldura. */
.lrs-2col.evento { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
.lrs-sec h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; margin: 0 0 28px; }
.lrs-sec p.body { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }

.poster-frame { position: relative; }
.poster-frame::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--red); border-radius: 24px; opacity: .9; }
/* logo horizontal da edição: padding vertical maior mantém a moldura equilibrada
   com a coluna de texto ao lado. */
/* logo vertical (empilhada): padding menor, senão a moldura estica muito além do texto */
.poster-inner { position: relative; background: #fff; border: 1px solid var(--line2); border-radius: 24px; box-shadow: 0 24px 60px rgba(30, 29, 27, 0.18); padding: 52px 40px; display: flex; align-items: center; justify-content: center; }
.poster-inner img { width: 100%; max-width: 330px; height: auto; display: block; }

.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-card { background: var(--surface); border: 1px solid var(--line); padding: 26px; border-radius: 20px; }
.info-card .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--red); margin-bottom: 12px; }
.info-card .val { font-size: 15px; line-height: 1.55; }
.info-card .val span { color: var(--muted); }

.contact-row { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: var(--text); }
.contact-row .ico { width: 40px; height: 40px; flex: none; border: 1px solid var(--line2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 16px; }
.contact-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.contact-row .val { font-size: 15px; line-height: 1.6; }

.map-frame { border-radius: 24px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(30, 29, 27, 0.12); aspect-ratio: 4/3; background: var(--bg2); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---------- localização: cartão sobreposto à foto ----------
   Em vez de duas colunas afastadas, o cartão de informação AVANÇA sobre a
   foto (2 colunas da grade de 12). Resolve o vão do desktop e dá o mesmo
   gesto no mobile, onde o cartão sobe sobre a base da imagem. */
.local-hero { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.local-foto {
  grid-area: 1 / 4 / 2 / 13; margin: 0;
  aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(30, 29, 27, 0.12);
  background: var(--bg2);
}
.local-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- carrossel do hotel ----------
   As fotos ficam empilhadas no MESMO espaço e trocam por opacidade — o
   bloco não muda de tamanho nem empurra o cartão ao lado. */
.local-foto { position: relative; }
.carr-foto {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
.carr-foto.is-ativa { opacity: 1; }
.carr-pontos {
  position: absolute; right: 16px; bottom: 14px; z-index: 3;
  display: flex; gap: 8px;
}
.carr-pontos button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 2px 8px rgba(30, 29, 27, .35);
  transition: background .3s, transform .3s;
}
.carr-pontos button.is-ativa { background: #fff; transform: scale(1.25); }
/* alvo de toque de 44px sem engordar o ponto visível */
.carr-pontos button::before { content: ""; position: absolute; width: 44px; height: 44px; transform: translate(-17px, -17px); }
.carr-pontos button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.local-card {
  /* position: relative é OBRIGATÓRIO: sem ele, no mobile (display:block) a
     imagem da figura pinta por cima do fundo branco do cartão — conteúdo
     substituído fica acima de fundo de bloco não-posicionado. */
  grid-area: 1 / 1 / 2 / 6; position: relative; z-index: 2;
  background: #fff; border: 1px solid var(--line2); border-radius: 24px;
  padding: 40px 38px;
  box-shadow: 0 30px 70px rgba(30, 29, 27, 0.14);
}

/* ---------- expositores ---------- */
.sec-expositores { background: var(--bg2); border-top: 1px solid var(--line); }
.sec-head-center { text-align: center; margin-bottom: 52px; }
.sec-head-center p { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 640px; margin: 0 auto; text-wrap: pretty; }
.expo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Cartão sozinho na última linha vai para o meio, em vez de ficar encostado
   à esquerda. A regra se desliga sozinha quando o número volta a fechar a linha. */
.expo-grid > .expo-card:last-child:nth-child(3n+1) { grid-column: 2; }
/* Dois cartões sobrando na última linha (ex.: 20 expositoras): o par vai para o
   meio. Meia coluna + meio gap = translateX(50% + 7px) — 50% é metade do próprio
   cartão, que ocupa a coluna inteira. Só no desktop, onde a grade tem 3 colunas;
   e desliga sozinha quando o número volta a fechar a linha. */
@media (min-width: 901px) {
  .expo-grid > .expo-card:last-child:nth-child(3n+2),
  .expo-grid > .expo-card:nth-last-child(2):nth-child(3n+1) { transform: translateX(calc(50% + 7px)); }
  /* o hover reescreve transform inteiro — sem esta linha o par pularia para a esquerda */
  .expo-grid > .expo-card:last-child:nth-child(3n+2):hover,
  .expo-grid > .expo-card:nth-last-child(2):nth-child(3n+1):hover { transform: translateX(calc(50% + 7px)) translateY(-3px); }
}
.expo-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  height: 170px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1), box-shadow .35s;
}
.expo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30, 29, 27, 0.1); }
/* Logos já vêm recortados sem margem branca, por isso preenchem o card. */
.expo-card img { max-height: 134px; max-width: 100%; width: auto; object-fit: contain; display: block; }

/* ---------- edição anterior ---------- */
.sec-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; }
.sec-head-split h2 { margin: 0; }
.sec-head-split p { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 340px; margin: 0; }
.fotos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.foto-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1/1; background: var(--bg2); }
.foto-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.foto-card:hover img { transform: scale(1.04); }

/* ---------- contato ---------- */
.sec-contato { border-top: 1px solid var(--line); background: #fff; }
.form-card { border: 1px solid var(--line2); border-radius: 24px; padding: 38px; background: var(--bg); }
.form-card label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--muted); display: block; margin-bottom: 8px; }
.form-card input, .form-card textarea {
  width: 100%; background: #fff; border: 1px solid var(--line2); border-radius: 12px;
  padding: 14px 16px; color: var(--text); font-family: 'Manrope', sans-serif; font-size: 15px;
}
.form-card textarea { resize: vertical; }
.form-card .field { margin-bottom: 16px; }
.form-success { text-align: center; padding: 40px 10px; }
.form-success .check { font-size: 36px; color: var(--red); margin-bottom: 14px; }

/* ---------- histórico / timeline ---------- */
/* overflow-y: hidden é obrigatório — declarar só overflow-x faz o navegador
   forçar overflow-y: auto, e a animação de entrada (translateY 28px) transborda
   por instantes, desenhando uma barra de rolagem vertical durante o carregamento. */
.timeline-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
/* padding-bottom acomoda o translateY(28px) da animação de entrada, para o selo
   da última parada não ser cortado no meio do movimento. */
/* --n = nº de paradas (ATUALIZAR ao incluir/remover edição); ficava no HTML
   como style="--n:9", que a CSP bloqueia. min-width acompanha: ~104px por parada. */
.timeline { --n: 10; position: relative; min-width: 1040px; padding: 8px 0 32px; }
.timeline-track, .timeline-progress {
  position: absolute; top: 15px; height: 2px;
  /* fallback: sem --n a linha ainda fica correta, só um pouco mais longa */
  left: calc(100% / (var(--n, 9) * 2)); right: calc(100% / (var(--n, 9) * 2));
}
.timeline-track { background: var(--line2); }
.timeline-progress { background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 2s cubic-bezier(.2, .6, .2, 1) .3s; }
.timeline-progress.in { transform: scaleX(1); }
/* colunas criadas pelo próprio nº de paradas: não depende de --n, que se falhar
   colapsaria a linha do tempo em uma única coluna vertical. */
.timeline-stops { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.timeline-stop { display: flex; flex-direction: column; align-items: center; text-align: center; }
.timeline-stop .dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line2); box-sizing: border-box; }
.timeline-stop .ano { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; }
.timeline-stop .cidade { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.timeline-stop.is-last .dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px rgba(236, 50, 56, 0.14); }
.timeline-stop.is-last .ano { color: var(--red); }
.timeline-stop .badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: #fff; background: var(--red); border-radius: 999px; padding: 5px 12px; margin-top: 10px; }
/* 20px + os 28px de padding da .timeline = o mesmo respiro de antes (48px) */
.timeline-note { display: flex; justify-content: center; margin-top: 20px; }
.timeline-note > div { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; border: 1px solid var(--line2); border-radius: 999px; padding: 16px 30px; font-size: 15.5px; color: var(--muted); }
.timeline-note strong { color: var(--text); font-weight: 700; }

/* ---------- footer ---------- */
.lrs-footer { border-top: 1px solid var(--line2); padding: 52px 40px 32px; background: var(--bg); }
.lrs-footer .top { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lrs-footer .logos { display: flex; align-items: center; gap: 24px; }
.lrs-footer .logos .sep { width: 1px; height: 34px; background: var(--line2); }
.lrs-footer .desc { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 380px; margin: 0; }
.lrs-footer .bottom {
  max-width: 1160px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--muted);
}

/* ---------- utilitárias ----------
   Estas classes substituem os antigos atributos style= no HTML. Sem elas, a
   Content Security Policy precisaria liberar 'unsafe-inline' em style-src. */
.oculto { display: none !important; }
.mb-12 { margin-bottom: 12px; }
.mb-28 { margin-bottom: 28px; }
.mb-36 { margin-bottom: 36px; }
.negrito-600 { font-weight: 600; }
.cor-acento { color: var(--red); }
.ico-whatsapp { color: #25D366; }
.col-empilhada { display: flex; flex-direction: column; gap: 18px; }
.col-empilhada.com-margem { margin-bottom: 32px; }
.sec-linha-topo { border-top: 1px solid var(--line); }
.sec-branca { background: #fff; border-top: 1px solid var(--line); }
.sec-compacta { padding-top: 76px; padding-bottom: 76px; }
.texto-contato { max-width: 460px; margin-bottom: 40px; }
.btn-bloco { width: 100%; justify-content: center; margin-top: 6px; }
.logo-rodape-lrs { height: 34px; width: auto; }
.logo-rodape-org { height: 44px; width: auto; }
.form-ok-titulo { font-size: 21px; margin: 0 0 10px; }
.form-ok-texto { color: var(--muted); font-size: 15px; margin: 0; }
.form-erro { color: var(--red); font-size: 14px; margin: 0 0 12px; }
/* atrasos das animações do hero */
.atraso-12 { animation-delay: .12s; }
.atraso-50 { animation-delay: .5s; }
.atraso-65 { animation-delay: .65s; }
.atraso-80 { animation-delay: .8s; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .6, .2, 1), transform .9s cubic-bezier(.2, .6, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  /* ---- menu do celular ----
     A navegação vira um painel que desce da pílula ao tocar no botão.
     Antes ela era simplesmente escondida e não havia como navegar. */
  .lrs-burger { display: inline-flex; }
  .lrs-pill { padding: 10px 10px 10px 18px; position: relative; }
  .lrs-nav {
    display: none;
    position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px;
    /* fundo sólido de propósito: translúcido deixa o conteúdo da página
       transparecer atrás dos itens e atrapalha a leitura do menu. */
    background: #fff;
    border: 1px solid rgba(30, 29, 27, 0.1);
    border-radius: 22px;
    box-shadow: 0 16px 44px rgba(30, 29, 27, 0.16);
  }
  .lrs-nav.aberto { display: flex; }
  .lrs-nav a { padding: 13px 16px; border-radius: 14px; font-size: 15px; }
  .lrs-nav a.is-cta { text-align: center; }
  .lrs-hero-inner { padding: 150px 20px 80px; }
  .lrs-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .lrs-sec { padding: 64px 20px; }
  .lrs-2col, .lrs-2col.evento { grid-template-columns: 1fr; gap: 40px; }
  .expo-grid { grid-template-columns: repeat(2, 1fr); }
  .expo-grid > .expo-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  /* empilhado, a moldura não precisa acompanhar a altura do texto.
     A faixa vermelha do ::before avança 16px à direita e encostava na borda da
     tela — no celular ela avança menos, e a logo é menor. */
  .poster-frame::before { inset: 12px -8px -8px 12px; }
  .poster-inner { padding: 40px 36px; }
  .poster-inner img { max-width: 178px; }
  /* cartão sobe sobre a base da foto */
  .local-hero { display: block; }
  .local-foto { aspect-ratio: 4 / 3; }
  .local-card { margin: -56px 14px 0; padding: 26px 20px; }
  .expo-card { height: 150px; padding: 14px 12px; }
  .expo-card img { max-height: 118px; }
  .fotos-grid { grid-template-columns: repeat(2, 1fr); }
  .lrs-footer { padding: 44px 20px 28px; }

  /* ---- linha do tempo vira VERTICAL no celular ----
     Em tela estreita a versão horizontal (min-width 940px) só cabia rolando de
     lado, e a última parada — a edição atual — nascia fora da vista. Empilhada,
     tudo aparece sem arrastar nada. */
  .timeline-scroll { overflow: visible; padding-bottom: 0; }
  .timeline { min-width: 0; padding: 4px 0 0; }
  .timeline-track, .timeline-progress {
    top: 8px; bottom: 8px; left: 7px; right: auto;
    width: 2px; height: auto;
  }
  .timeline-progress { transform: scaleY(0); transform-origin: center top; }
  .timeline-progress.in { transform: scaleY(1); }
  .timeline-stops { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
  .timeline-stop { flex-direction: row; align-items: center; text-align: left; gap: 16px; }
  .timeline-stop .dot { flex: none; }
  .timeline-stop .ano { margin-top: 0; font-size: 20px; min-width: 58px; }
  .timeline-stop .cidade { margin-top: 0; flex: 1; }
  .timeline-stop .badge { margin-top: 0; margin-left: auto; flex: none; }
  .timeline-note { margin-top: 34px; }
  .timeline-note > div { padding: 14px 22px; font-size: 14.5px; }
}

/* ============================================================
   REFINAMENTO VISUAL (aprovado 07/08) — micro-interações de
   hover/focus e profundidade. Só transition/transform/box-shadow:
   nada roda fora de interação, custo de performance zero.
   ============================================================ */
/* 1. HERO — profundidade sutil ao rolar e brilho vivo atrás da logo */
.lrs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 12%, rgba(236,50,56,.09), transparent 70%),
    radial-gradient(38% 30% at 12% 88%, rgba(236,50,56,.05), transparent 70%);
}
.lrs-hero-logo { filter: drop-shadow(0 18px 34px rgba(30,29,27,.16)); }

/* 2. SELO DO TOPO — ponto com pulso, em vez de estático */

/* 3. CONTAGEM REGRESSIVA — caixas com relevo e realce no número */
.lrs-countdown .box {
  background: linear-gradient(180deg,#fff,#fbfaf8);
  box-shadow: 0 10px 26px rgba(30,29,27,.09), inset 0 1px 0 #fff;
  transition: transform .3s cubic-bezier(.2,.6,.2,1);
}
.lrs-countdown .unit:hover .box { transform: translateY(-3px); }

/* 4. BOTÕES — brilho que atravessa ao passar o mouse */
.btn-red:hover { box-shadow: 0 12px 28px rgba(236,50,56,.32); }

/* 5. NÚMEROS DA FAIXA — leve destaque ao passar */
.lrs-stats > div > div:first-child { transition: transform .3s cubic-bezier(.2,.6,.2,1); }
.lrs-stats > div:hover > div:first-child { transform: translateY(-2px); }

/* 6. CARTAZ DO EVENTO — inclinação sutil que se endireita ao aproximar */
.poster-frame { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.poster-frame:hover { transform: rotate(-.6deg) translateY(-4px); }
.poster-inner { transition: box-shadow .6s; }
.poster-frame:hover .poster-inner { box-shadow: 0 34px 74px rgba(30,29,27,.24); }

/* 7. CARDS DE EXPOSITOR — logo ganha cor e o card se levanta */
.expo-card img { filter: saturate(.85); transition: filter .35s, transform .35s cubic-bezier(.2,.6,.2,1); }
.expo-card:hover img { filter: saturate(1.1); transform: scale(1.05); }
.expo-card { position: relative; overflow: hidden; }
.expo-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(236,50,56,0); transition: box-shadow .35s;
}
.expo-card:hover::after { box-shadow: inset 0 0 0 1.5px rgba(236,50,56,.5); }
.expo-card:hover { box-shadow: 0 18px 40px rgba(30,29,27,.13); }

/* 8. FOTOS — leve aproximação e clareamento */
.foto-card { position: relative; }
.foto-card img { filter: saturate(.92) contrast(1.02); transition: transform .6s cubic-bezier(.2,.6,.2,1), filter .45s; }
.foto-card:hover img { transform: scale(1.07); filter: saturate(1.06) contrast(1.05); }
.foto-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(30,29,27,.22));
  opacity: 0; transition: opacity .45s;
}
.foto-card:hover::after { opacity: 1; }

/* 9. LINHA DO TEMPO — a parada atual respira */
.timeline-stop { transition: transform .3s cubic-bezier(.2,.6,.2,1); }
.timeline-stop:hover { transform: translateY(-3px); }

/* 10. FOTO DO HOTEL E MOLDURAS — profundidade maior */
.local-foto { transition: transform .6s cubic-bezier(.2,.6,.2,1), box-shadow .6s; }
.local-foto:hover { transform: translateY(-5px); box-shadow: 0 34px 70px rgba(30,29,27,.2); }

/* 11. FORMULÁRIO — campo acende ao focar */
.form-card input, .form-card textarea { transition: border-color .25s, box-shadow .25s, background .25s; }
.form-card input:focus, .form-card textarea:focus {
  outline: none; border-color: rgba(236,50,56,.55); background: #fff;
  box-shadow: 0 0 0 4px rgba(236,50,56,.1);
}

/* 12. TÍTULOS EM SERIF — leve gradiente no acento */

/* 13. LINKS DE CONTATO — ícone reage */
.contact-row .ico { transition: transform .3s cubic-bezier(.2,.6,.2,1), border-color .3s, background .3s; }
.contact-row:hover .ico { transform: translateY(-2px) scale(1.06); border-color: rgba(236,50,56,.45); background: rgba(236,50,56,.05); }

/* 14. quem prefere menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}