/* ═══════════════════════════════════════════════════════════════════
   HELLYTUR · LANDING PAGE — lp.css
   Gerado a partir do modelo "Landing Page HellyTur.dc.html" + tokens do
   HellyTur Design System (hellytur-design-system-68e50308).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens de cor do Design System ── */
:root {
  --brand-midnight: #070B38;
  --brand-estrada: #3961D5;
  --brand-asfalto: #000000;
  --brand-farol: #E08B16;
  --brand-branco: #FFFFFF;

  --midnight-900: #03051C;
  --midnight-800: #070B38;
  --midnight-700: #0D1450;
  --midnight-600: #141E6B;
  --midnight-500: #1C2A8A;

  --estrada-700: #23409A;
  --estrada-600: #2C4FBA;
  --estrada-500: #3961D5;
  --estrada-400: #5E81E2;
  --estrada-300: #8CA6EC;

  --farol-700: #9C5F0B;
  --farol-600: #BC7410;
  --farol-500: #E08B16;
  --farol-400: #EDA648;
  --farol-300: #F5C583;

  --whats-600: #16A34A;
  --whats-500: #22C55E;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
}

/* ── Variáveis do tema da landing page (idênticas ao modelo) ── */
:root {
  /* cores — base escura */
  --lp-bg: #03051C;
  --lp-bg-soft: #070B38;
  --lp-surface: rgba(255, 255, 255, .045);
  --lp-surface-2: rgba(255, 255, 255, .075);
  --lp-line: rgba(255, 255, 255, .10);
  --lp-line-strong: rgba(255, 255, 255, .22);
  /* cores — tinta */
  --lp-ink: #FFFFFF;
  --lp-ink-soft: rgba(255, 255, 255, .72);
  --lp-ink-muted: rgba(255, 255, 255, .48);
  /* cores — marca */
  --lp-navy: #070B38;
  --lp-blue: #3961D5;
  --lp-blue-400: #5E81E2;
  --lp-gold: #E08B16;
  --lp-gold-300: #F5C583;
  --lp-green: #22C55E;
  --lp-green-600: #16A34A;
  /* brilhos */
  --lp-glow-blue: rgba(57, 97, 213, .30);
  --lp-glow-gold: rgba(224, 139, 22, .24);
  --lp-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  /* tipografia */
  --lp-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --lp-font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  /* espaçamento */
  --lp-s1: 8px; --lp-s2: 14px; --lp-s3: 22px; --lp-s4: 34px; --lp-s5: 52px; --lp-s6: 80px;
  --lp-section: clamp(64px, 8vw, 112px);
  --lp-container: 1200px;
  --lp-gutter: 24px;
  /* raios */
  --lp-r-s: 8px; --lp-r-m: 14px; --lp-r-l: 20px; --lp-r-xl: 28px; --lp-r-pill: 999px;
  --lp-ease: cubic-bezier(.2, .6, .3, 1);
}

/* ── Base (idêntica ao modelo) ── */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lp-gold); text-decoration: none; }
a:hover { color: var(--lp-gold-300); }
p { text-wrap: pretty; }
input, select, textarea, button { font-family: var(--lp-font-body); }
input::placeholder { color: rgba(255, 255, 255, .34); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] summary i.fa-plus { transform: rotate(45deg); }

/* ═══ Portão de captura ═══
   O portão (#captura) cobre a tela até o visitante deixar nome e telefone.
   Quem já preencheu (cookie hellytur_lead) recebe html.hlp-ok e nunca vê
   o portão de novo. Enquanto o portão está visível, o scroll fica travado. */
html:not(.hlp-ok) body { overflow: hidden; }
html.hlp-ok #captura { display: none; }
/* fallback sem JavaScript: âncora #lp esconde o portão (mesma regra do modelo) */
#lp:target ~ #captura, #lp:target ~ * #captura { display: none; }
@media (scripting: none) {
  html:not(.hlp-ok) body { overflow: auto; }
}

/* ═══ Estados hover / focus (equivalentes aos style-hover do modelo) ═══
   !important é necessário porque os estilos base estão inline no HTML. */

/* Botão WhatsApp (verde) */
.hv-whats:hover {
  background: var(--lp-green-600) !important;
  transform: translateY(-1px) !important;
  color: #03051C !important;
}
/* Botão dourado (CTA principal da campanha Nova Era).
   O verde do design system é reservado exclusivamente ao WhatsApp; como o
   WhatsApp saiu do site, o CTA principal passa a usar o farol #E08B16. */
.hv-gold:hover {
  background: var(--farol-600) !important;
  transform: translateY(-1px) !important;
  color: #03051C !important;
}
.hv-fab-gold:hover {
  background: var(--farol-600) !important;
  transform: translateY(-2px) !important;
  color: #03051C !important;
}
/* Botão contorno → dourado */
.hv-outline-gold:hover {
  border-color: var(--lp-gold) !important;
  color: var(--lp-gold) !important;
}
/* Botão azul (fretamento) */
.hv-blue:hover {
  background: #2C4FBA !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
/* Cartões padrão */
.hv-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(224, 139, 22, .45) !important;
  background: var(--lp-surface-2) !important;
}
/* Cartão de destaque dourado (passo 04) */
.hv-card-gold:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(224, 139, 22, .7) !important;
  box-shadow: 0 0 60px rgba(224, 139, 22, .2) !important;
}
/* Cartão azul da frota (CTA) */
.hv-card-blue:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(224, 139, 22, .5) !important;
  box-shadow: 0 0 70px rgba(57, 97, 213, .22) !important;
}
/* Botão verde dentro do cartão da frota (sem lift) */
.hv-whats-flat:hover {
  background: var(--lp-green-600) !important;
  color: #03051C !important;
}
/* Ícones sociais do rodapé */
.hv-social:hover {
  border-color: var(--lp-gold) !important;
  color: var(--lp-gold) !important;
}
.hv-social-whats:hover {
  border-color: var(--lp-green) !important;
  color: var(--lp-green) !important;
}
/* Links do rodapé */
.hv-link-green:hover { color: var(--lp-green) !important; }
.hv-link-gold:hover { color: var(--lp-gold) !important; }
/* FAB WhatsApp */
.hv-fab:hover {
  background: var(--lp-green-600) !important;
  transform: translateY(-2px) !important;
  color: #03051C !important;
}
/* Campos do formulário */
.hv-input:focus {
  border-color: var(--lp-gold) !important;
  box-shadow: 0 0 0 3px rgba(224, 139, 22, .18) !important;
}

/* Botão de envio do portão (elemento <button> real) */
.lp-gate-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 18px 26px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-gold);
  color: #03051C;
  font: 700 15px/1 var(--lp-font-display);
  box-shadow: 0 0 0 1px rgba(224, 139, 22, .4), 0 16px 40px rgba(224, 139, 22, .3);
  transition: all .16s var(--lp-ease);
}
.lp-gate-submit:hover {
  background: var(--farol-600);
  transform: translateY(-1px);
}
.lp-gate-submit[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}
.lp-gate-error {
  display: none;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #F5C583;
  text-align: center;
}
.lp-gate-error.is-on { display: block; }

/* Honeypot: escondido de humanos */
.lp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ═══ Correção de contraste (herdada do modelo) ═══
   No arquivo original do zip os títulos dos cards ficaram em estrada #3961D5
   sobre fundo escuro: 3,16:1, abaixo do mínimo AA (4,5:1) — o título ficava
   MENOS legível que o próprio parágrafo. O design system define, na escala
   escura (.ht-inverse), texto forte claro. Usamos estrada-400 #5E81E2 (cor já
   presente na paleta ativa): mantém o azul da marca e sobe o contraste para
   4,7:1, dentro do mínimo AA.
   Para voltar ao original, basta apagar este bloco. */
#lp h3[style*="--brand-estrada"] { color: var(--estrada-400) !important; }

/* ═══ Seção "Nossa frota": foto dos ônibus como marca d'água ═══
   Mesmo tratamento da marca no hero: a foto entra pela direita, dissolvida
   na borda por uma máscara radial, com um véu de gradiente por cima para o
   texto continuar legível. */
.lp-frota-fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(120% 110% at 78% 52%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 110% at 78% 52%, #000 30%, transparent 76%);
}
.lp-frota-fundo img {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(74%, 940px);
  height: auto;
  opacity: .30;
  filter: saturate(.85) contrast(1.05);
}
.lp-frota-fundo-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #03051C 12%, rgba(3,5,28,.82) 38%, rgba(3,5,28,0) 68%),
    radial-gradient(closest-side at 84% 42%, rgba(57,97,213,.20), rgba(57,97,213,0)),
    radial-gradient(closest-side at 70% 82%, rgba(224,139,22,.16), rgba(224,139,22,0));
}
/* No celular a foto passa para trás do texto, bem mais discreta */
@media (max-width: 860px) {
  .lp-frota-fundo img {
    right: -18%;
    width: 150%;
    opacity: .16;
  }
  .lp-frota-fundo-veu {
    background: linear-gradient(180deg, rgba(3,5,28,.86), rgba(3,5,28,.62));
  }
}

/* ═══ Seção "32 anos de estrada": ônibus como marca d'água à esquerda ═══
   Mesmo tratamento da seção da frota, espelhado: a foto entra pela esquerda,
   dissolvida na borda por uma máscara radial, com um véu por cima para o
   texto continuar legível. */
.lp-anos-fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(115% 105% at 22% 50%, #000 30%, transparent 74%);
  -webkit-mask-image: radial-gradient(115% 105% at 22% 50%, #000 30%, transparent 74%);
}
.lp-anos-fundo img {
  position: absolute;
  left: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(58%, 720px);
  height: auto;
  opacity: .15;
  filter: saturate(.8) contrast(1.05);
}
.lp-anos-fundo-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, #03051C 6%, rgba(3,5,28,.86) 26%, rgba(3,5,28,.55) 46%, rgba(3,5,28,0) 70%),
    radial-gradient(closest-side at 18% 44%, rgba(57,97,213,.20), rgba(57,97,213,0)),
    radial-gradient(closest-side at 30% 84%, rgba(224,139,22,.14), rgba(224,139,22,0));
}
/* No celular a foto vai para trás do texto, bem discreta */
@media (max-width: 900px) {
  .lp-anos-fundo img {
    left: -22%;
    width: 150%;
    opacity: .13;
  }
  .lp-anos-fundo-veu {
    background: linear-gradient(180deg, rgba(3,5,28,.88), rgba(3,5,28,.66));
  }
}

/* Acessibilidade: foco visível */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--estrada-400);
  outline-offset: 2px;
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* === Destinos: foto aerea da cidade ao passar o mouse ou tocar ===
   A foto vive dentro do proprio card, em camada absoluta com inset negativo:
   ela cobre o card e avanca alem da borda dele, sem tomar a tela. Fora do
   estado de hover/toque, a camada tem opacidade 0 e visibility hidden, entao
   o card continua identico ao design atual. Se a foto da cidade ainda nao
   estiver enviada, o PHP nem imprime a camada. */
.lp-dest{position:relative;z-index:1;}
.lp-dest > *:not(.lp-dest-foto){position:relative;z-index:2;}
.lp-dest:hover,.lp-dest:focus-within,.lp-dest.is-aberto{z-index:9;}

.lp-dest-foto{
  position:absolute;inset:-16px;margin:0;z-index:1;
  border-radius:calc(var(--lp-r-m) + 8px);overflow:hidden;
  opacity:0;visibility:hidden;transform:scale(.94);pointer-events:none;
  box-shadow:0 0 0 1px rgba(224,139,22,.45),0 26px 60px rgba(3,5,28,.66);
  transition:opacity .26s var(--lp-ease),transform .34s var(--lp-ease),visibility 0s .34s;
}
.lp-dest-foto img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform .9s var(--lp-ease);}
.lp-dest-foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(3,5,28,.40) 0%,rgba(3,5,28,.60) 44%,rgba(3,5,28,.88) 100%);}

.lp-dest:hover .lp-dest-foto,
.lp-dest:focus-within .lp-dest-foto,
.lp-dest.is-aberto .lp-dest-foto{
  opacity:1;visibility:visible;transform:scale(1);transition-delay:0s;}
.lp-dest:hover .lp-dest-foto img,
.lp-dest:focus-within .lp-dest-foto img,
.lp-dest.is-aberto .lp-dest-foto img{transform:scale(1.16);}

/* Legibilidade do texto sobre a foto (so quando existe foto no card) */
.lp-dest:has(.lp-dest-foto):hover > *,
.lp-dest:has(.lp-dest-foto).is-aberto > *{text-shadow:0 1px 12px rgba(3,5,28,.9);}
.lp-dest:has(.lp-dest-foto):hover > p:last-of-type,
.lp-dest:has(.lp-dest-foto).is-aberto > p:last-of-type{color:rgba(255,255,255,.86)!important;}

@media (max-width:640px){
  .lp-dest-foto{inset:-10px;border-radius:calc(var(--lp-r-m) + 4px);}
}
@media (prefers-reduced-motion: reduce){
  .lp-dest-foto,.lp-dest-foto img{transform:none!important;}
}

/* === Destinos: grade maior, mais respiro entre os cards === */
.lp-dest-grid{grid-template-columns:repeat(3,1fr)!important;gap:26px!important;}
.lp-dest{padding:30px 26px 28px!important;min-height:142px;}
.lp-dest h3{font-size:21px!important;margin-bottom:5px!important;}
.lp-dest > p:last-of-type{font-size:13.5px!important;}
@media (max-width:980px){.lp-dest-grid{grid-template-columns:repeat(2,1fr)!important;gap:20px!important;}}
@media (max-width:560px){.lp-dest-grid{grid-template-columns:1fr!important;gap:14px!important;}.lp-dest{min-height:0;padding:24px 22px!important;}}


/* === Portao de captura: caber na largura do celular ===
   A grade externa (place-items:center) dimensionava a coluna pelo conteudo
   (max-content), o que mantinha as duas colunas lado a lado no celular e
   obrigava a arrastar para o lado. minmax(0,1fr) prende a coluna a largura
   disponivel, e a grade interna passa a poder encolher abaixo de 300px.
   Nada muda no computador: la ja havia espaco de sobra. */
#captura > div { grid-template-columns: minmax(0, 1fr); }
#captura > div > div { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
#captura img { max-width: 100%; }

/* Os brilhos decorativos tem largura fixa (900px/1000px) e sangram para fora
   em telas estreitas. clip corta a sangria sem criar barra de rolagem nem
   afetar o efeito das fotos dos destinos. */
main { overflow-x: clip; }