/* =====================================================================
   main-v2.css — v2 (passe "claro e ousado")
   Carregado DEPOIS de main.css em landing-page/layouts/master.blade.php.

   Direção: fundo claro, mas tipografia GRANDE, cor vibrante em blocos
   sólidos (não só bordinha fina), formas grandes (blobs/círculos),
   botões chunky em pílula, cards com cor sólida em vez de branco liso.

   Tudo ainda deriva de --text-primary / --title-color / --body-bg /
   --base-rgb / --title-color-rgb / --body-bg-rgb, que o painel admin
   já controla (ver layouts/css.blade.php). Nenhuma lógica Blade muda.
   ===================================================================== */

:root{
  --v2-radius-xl: 44px;
  --v2-radius-lg: 32px;
  --v2-radius-md: 20px;
  --v2-radius-sm: 14px;
  --v2-shadow: 0 40px 80px -30px rgba(var(--title-color-rgb), 0.32);
  --v2-shadow-sm: 0 18px 40px -18px rgba(var(--title-color-rgb), 0.24);
  --v2-border: 1px solid rgba(var(--title-color-rgb), 0.08);

  /* tintas derivadas da cor do admin, pra ter variedade sem sair da paleta.
     Usa rgba() sobre var(--base-rgb)/(--title-color-rgb) em vez de color-mix()
     porque tem suporte garantido em qualquer navegador (color-mix() falha
     silenciosamente em navegadores mais antigos e derruba a regra inteira). */
  --v2-tint-1: rgba(var(--base-rgb), 0.14);
  --v2-tint-2: rgba(var(--base-rgb), 0.08);
  --v2-tint-3: rgba(var(--title-color-rgb), 0.06);
  --v2-tint-dark: var(--title-color);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body{
  font-family: var(--body-fonts);
  overflow-x: clip;
}

.section-title{
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  font-size: clamp(30px, 4.2vw, 54px) !important;
}

.section-text{
  color: var(--body-clr);
  font-size: 18px;
  line-height: 1.6;
}

section{ position: relative; }

/* ---------------------------------------------------------------------
   Botões — pílula, chunky, com sombra colorida forte
   --------------------------------------------------------------------- */
.cmn--btn{
  padding: 20px 38px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 18px 36px -10px rgba(var(--base-rgb), 0.55);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, opacity .2s ease;
}
.cmn--btn:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 44px -10px rgba(var(--base-rgb), 0.65);
  opacity: 1;
}
.cmn--btn.btn-white{
  background: var(--white-clr);
  color: var(--title-color) !important;
  border: 2px solid rgba(var(--title-color-rgb), 0.14);
  box-shadow: none;
}
.cmn--btn.btn-white:hover{
  border-color: var(--text-primary);
  box-shadow: var(--v2-shadow-sm);
}
.cmn--btn.btn-black{
  background: var(--v2-tint-dark);
  border-color: var(--v2-tint-dark);
  box-shadow: 0 18px 36px -10px rgba(var(--title-color-rgb), 0.5);
}

/* ---------------------------------------------------------------------
   Header — maior, mais presença
   --------------------------------------------------------------------- */
header{
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--title-color-rgb), 0.06);
}
.navbar-bottom-wrapper{ padding-block: 6px; }
.navbar-bottom-wrapper .logo img{ max-height: 40px; }
.navbar-bottom-wrapper .menu li a{
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px !important;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.navbar-bottom-wrapper .menu li a:hover,
.navbar-bottom-wrapper .menu li a.active{
  background: var(--v2-tint-1);
  color: var(--text-primary) !important;
}
.navbar-bottom-wrapper .menu li a span::before{ display:none !important; }
.navbar-bottom-wrapper .cmn--btn{
  padding: 14px 30px !important;
  font-size: 15px !important;
}

/* ---------------------------------------------------------------------
   Hero — tipografia enorme, bloco de cor sólida, blob gigante
   --------------------------------------------------------------------- */
.banner-section{
  padding: 44px 0 20px;
}
.banner-wrapper{
  border-radius: var(--v2-radius-xl) !important;
  padding: 100px 64px !important;
  position: relative;
  overflow: hidden;
  align-items: center;
  background: linear-gradient(155deg, var(--v2-tint-2) 0%, var(--white-clr) 55%) !important;
  background-image: none !important; /* ignora a imagem de fundo antiga, o hero agora é 100% formas/cor */
}
.banner-wrapper::before{
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  top: -280px;
  right: -220px;
  background: radial-gradient(circle at 30% 30%, var(--text-primary), rgba(var(--base-rgb), 0.55) 60%, transparent 78%);
  opacity: .9;
  filter: blur(2px);
  z-index: 0;
}
.banner-wrapper::after{
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  bottom: -160px;
  left: -120px;
  background: var(--title-color);
  opacity: .08;
  z-index: 0;
}

.hero-eyebrow{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--title-color);
  color: var(--white-clr);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.hero-eyebrow .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 5px rgba(var(--base-rgb), 0.35);
}

.banner-content{
  position: relative;
  z-index: 1;
}
.banner-content .title{
  font-size: clamp(42px, 6vw, 80px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em;
  color: var(--title-color);
  max-width: 11ch;
}
.banner-content .txt{
  font-size: 19px;
  line-height: 1.6;
  max-width: 46ch;
  color: var(--body-clr);
  margin-top: 8px;
}
.banner-content .app--btns{ gap: 16px; margin-top: 34px !important; }

/* Cartão de rota — maior, mais bold, cor sólida no topo */
.hero-route-card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  border-radius: var(--v2-radius-lg);
  border: none;
  background: var(--white-clr);
  box-shadow: var(--v2-shadow);
  padding: 0 0 26px;
  overflow: hidden;
  transform: rotate(-1.4deg);
}
.hero-route-card .card-top{
  background: var(--text-primary);
  padding: 22px 26px 46px;
  border-radius: var(--v2-radius-lg) var(--v2-radius-lg) 40% 40% / var(--v2-radius-lg) var(--v2-radius-lg) 30px 30px;
}
.hero-route-card .badge-live{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.22);
  color: var(--white-clr);
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 999px;
}
.hero-route-card .badge-live .pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: v2pulse 1.8s infinite;
}
@keyframes v2pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.hero-route-card svg{ width: 100%; height: 130px; display:block; margin-top: 14px; }
.hero-route-card .route-points{
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-top: 6px;
}
.hero-route-card .fare-pill{
  margin: -26px 24px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white-clr);
  border-radius: var(--v2-radius-md);
  box-shadow: var(--v2-shadow-sm);
  padding: 18px 20px;
}
.hero-route-card .fare-pill .left{ display:flex; align-items:center; gap:14px; }
.hero-route-card .fare-icon{
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--v2-tint-1);
  color: var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 19px;
}
.hero-route-card .title-sm{ font-weight: 800; font-size: 15px; color: var(--title-color); }
.hero-route-card .sub-sm{ font-size: 12.5px; color: var(--body-clr); }
.hero-route-card .fare-price{ font-weight: 900; font-size: 20px; color: var(--text-primary); }

@media (max-width: 991px){
  .hero-route-card{ margin: 30px auto 0; transform:none; }
  .banner-wrapper{ padding: 64px 26px !important; }
}

/* ---------------------------------------------------------------------
   Estatísticas — cada item vira um chip de cor sólida
   --------------------------------------------------------------------- */
.basic-info-section{ margin-top: -50px; position: relative; z-index: 2; }
.basic-info-wrapper{
  border-radius: var(--v2-radius-lg) !important;
  border: none !important;
  background: var(--white-clr) !important;
  box-shadow: var(--v2-shadow) !important;
  padding: 20px !important;
  gap: 16px !important;
}
.basic-info-wrapper .basic-info-item{
  border-radius: var(--v2-radius-md);
  padding: 22px 22px !important;
  flex: 1 1 220px;
  background: var(--v2-tint-2);
  transition: transform .2s ease, background .2s ease;
}
.basic-info-wrapper .basic-info-item:nth-child(2){ background: var(--v2-tint-3); }
.basic-info-wrapper .basic-info-item:nth-child(3){ background: var(--v2-tint-1); }
.basic-info-wrapper .basic-info-item:nth-child(4){ background: var(--v2-tint-3); }
.basic-info-wrapper .basic-info-item:hover{ transform: translateY(-4px); }
.basic-info-wrapper .basic-info-item img{
  max-width: 46px;
  padding: 10px;
  border-radius: 14px;
  background: var(--white-clr);
}
.basic-info-wrapper .basic-info-item h2{
  font-size: 26px !important;
  font-weight: 900 !important;
}

/* ---------------------------------------------------------------------
   Soluções — cards grandes, ícone em chip colorido
   --------------------------------------------------------------------- */
.platform-section{ padding-top: 120px !important; padding-bottom: 40px !important; }
.platform-item{
  border-radius: var(--v2-radius-lg) !important;
  border: none !important;
  background: var(--v2-tint-2) !important;
  padding: 44px 36px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
}
.platform-item:hover{
  transform: translateY(-8px) rotate(-0.6deg);
  background: var(--white-clr) !important;
  box-shadow: var(--v2-shadow);
}
.platform-item img{
  border-radius: 18px;
  background: var(--white-clr);
  padding: 16px;
  box-shadow: var(--v2-shadow-sm);
}
.platform-item .title{
  font-weight: 800 !important;
  font-size: 21px !important;
  letter-spacing: -0.015em;
  margin-top: 20px !important;
}
.platform-item p{ font-size: 15.5px; }

/* ---------------------------------------------------------------------
   Ganhe com... — bloco de cor sólida, tipografia grande
   --------------------------------------------------------------------- */
.about-section{
  background: var(--title-color) !important;
  border-radius: var(--v2-radius-xl);
  margin: 40px 24px;
  padding-top: 90px !important;
  padding-bottom: 90px !important;
  overflow: hidden;
  position: relative;
}
.about-section::before{
  content:"";
  position:absolute;
  width: 460px; height: 460px; border-radius: 50%;
  right: -160px; top: -160px;
  background: rgba(var(--base-rgb), 0.35);
}
.about__wrapper-content .section-title{
  text-align: left;
  color: var(--white-clr) !important;
}
.about__wrapper-content .section-title .text--base{
  color: var(--text-primary) !important;
}
.about__wrapper-content p{
  color: rgba(255,255,255,0.78) !important;
  font-size: 17.5px;
}
.about__wrapper-thumb .main-img{
  border-radius: var(--v2-radius-lg);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------------- */
.testimonial-section{ padding-top: 110px !important; }
.testimonial-section .section-title{ text-align:center; }
.testimonial__item{
  border-radius: var(--v2-radius-lg) !important;
  border: none !important;
  background: var(--v2-tint-2) !important;
  box-shadow: none !important;
  padding: 34px !important;
}
.testimonial__item-img img{
  border: 4px solid var(--white-clr);
  box-shadow: var(--v2-shadow-sm);
}

/* ---------------------------------------------------------------------
   CTA download — cor sólida vibrante, forma grande
   --------------------------------------------------------------------- */
.cta-section{ padding-top: 40px !important; }
.cta--wrapper{
  border-radius: var(--v2-radius-xl) !important;
  background-image: none !important;
}
.cta--wrapper::before{
  border-radius: var(--v2-radius-xl) !important;
  background: linear-gradient(125deg, var(--text-primary) 0%, var(--title-color) 100%) !important;
}
.cta--wrapper .cta-inner{ padding: 60px 56px !important; }
.cta--wrapper .cta-inner .title{
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------
   Páginas internas
   --------------------------------------------------------------------- */
.page-header{
  border-radius: var(--v2-radius-lg) !important;
  padding: 80px 24px !important;
}
.page-header::before{
  border-radius: var(--v2-radius-lg) !important;
  background: linear-gradient(125deg, var(--text-primary), var(--title-color)) !important;
}
.page-header .title{ font-size: 40px !important; font-weight: 900 !important; }

.terms-section{ color: var(--body-clr); line-height: 1.8; font-size: 16.5px; }
.terms-section h1, .terms-section h2, .terms-section h3{
  color: var(--title-color); font-weight: 800; margin-top: 30px; margin-bottom: 14px;
}

.contact-info-wrapper .item{
  border-radius: var(--v2-radius-md);
  border: none;
  padding: 26px 24px;
  background: var(--v2-tint-2);
  transition: transform .2s ease, background .2s ease;
}
.contact-info-wrapper .item:hover{ transform: translateY(-4px); background: var(--white-clr); box-shadow: var(--v2-shadow-sm); }
.contact-info-wrapper .item .icon{
  background: var(--text-primary);
  color: var(--white-clr);
  width: 48px; height: 48px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center; font-size: 20px;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer{
  border-top-left-radius: var(--v2-radius-xl);
  border-top-right-radius: var(--v2-radius-xl);
  margin-top: 30px;
}
.footer__wrapper-widget .social-icons a{ border-radius: 12px; transition: transform .2s ease; }
.footer__wrapper-widget .social-icons a:hover{ transform: translateY(-4px) scale(1.08); }

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  .banner-wrapper{ padding: 56px 24px !important; }
  .basic-info-wrapper{ padding: 14px !important; }
  .about-section{ margin: 24px 12px; padding: 60px 0 !important; }
  .cta--wrapper .cta-inner{ padding: 40px 26px !important; }
}
@media (max-width: 400px){
  .cmn--btn{ white-space: normal; text-align: center; }
}