/* ---------- Variables ---------- */
:root{
  --azul: #004c70;
  --azul-medio: #1976A6;
  --azul-claro: #BFE2FF;
  --verde: #1f882e;
  --verde-agua: #4EBE8A;
  --fundo-mapa: #DDF7F0;
  --cinza-claro: #f7f7f7;
  --cinza: #dcdcdc;
  --bg: #ffffff;
  --max-width: 1100px;
  --container-pad: 20px;
  --radius: 22px; /* cards very rounded */
}

/* ---------- Reset / Base ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout Utilities ---------- */
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-pad); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }

/* ---------- Header ---------- */
.site-header{ position: sticky; top: 0; z-index: 1200; background: var(--bg); border-bottom: 1px solid #eee; }
.logo{ display:flex; align-items:center; gap:8px; }

.site-nav .nav-list{ display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; }
.site-nav a{ color:var(--azul); text-decoration:none; font-weight:600; transition: color .16s; }
.site-nav a:hover{ color:var(--verde); }

/* ---------- Mobile Nav / Hamburger ---------- */
.hamburger{ display:none; width:40px; height:32px; background:transparent; border:0; cursor:pointer; position:relative; }
.hamburger .bar{ display:block; height:3px; width:100%; background:var(--azul); border-radius:3px; position:absolute; left:0; transition:transform .28s, opacity .28s;}
.hamburger .bar:nth-child(1){ top:6px; } .hamburger .bar:nth-child(2){ top:15px; } .hamburger .bar:nth-child(3){ top:24px; }
.hamburger.active .bar:nth-child(1){ transform: translateY(9px) rotate(45deg); } .hamburger.active .bar:nth-child(2){ opacity:0; } .hamburger.active .bar:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-menu{ display:none; position:fixed; inset:0; top:64px; background: rgba(0,0,0,0.35); z-index:1100; }
.mobile-menu .panel{ background:var(--bg); width:100%; max-width:360px; height:100%; margin-left:auto; padding:24px; transform:translateX(100%); transition: transform .32s ease; box-shadow:-20px 0 40px rgba(0,0,0,0.08); }
.mobile-menu.open{ display:block; } .mobile-menu.open .panel{ transform:translateX(0); }
.mobile-nav{ list-style:none; padding:0; margin:10px 0 0 0; }
.mobile-nav li{ margin-bottom:12px; }
.mobile-nav a{ text-decoration:none; color:var(--azul); font-weight:700; }

/* ---------- Skip link ---------- */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:2000; border-radius:6px; }

/* ---------- Hero ---------- */
/* HERO REESTILIZADA SAAS */
.hero {
  position: relative;
  padding: 110px 20px 30px 60px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffffff 0%, #e6eff4 100%);
  opacity: 1;
  z-index: -1;
  margin-bottom: -100px;
}

/* Layout 2 colunas */
.hero-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  /* align-items: center; */
}

/* Texto da HERO */
.hero-text h1 {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 14px;
}

.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: #444;
  max-width: 520px;
  margin-bottom: 28px;
}

.hero-btn {
  font-size: 18px;
  padding: 16px 26px;
  border-radius: 12px;
}


.mockup-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Moldura do celular */
.mockup-frame {
  /* width: 260px;
  height: 520px; */
  width: 230px;
  height: 490px;
  background: #111;
  border-radius: 32px;
  border: 4px solid #333;
  padding: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Imagem da tela */
.mockup-screen {
    width: 110%;
    height: 100%;
    border-radius: 11px;
    object-fit: fill;
}

/* Notch superior */
.mockup-notch {
  width: 40px;
  height: 6px;
  background: #333;
  border-radius: 3px;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

/* Ajuste para não colar no final da section */
.hero-illustration {
  padding-bottom: 6%;
}

/* CTA button */
.btn{ display:inline-block; padding:12px 18px; background:var(--verde); color:#fff; border-radius:12px; text-decoration:none; font-weight:700; transition: transform .16s ease, box-shadow .16s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(31,136,46,0.12); }
.primary-cta{ background: linear-gradient(180deg, var(--verde), #178a33); }

/* ---------- Sections ---------- */
.section {
  padding-top: 65px;  
  padding-bottom: 80px;
  scroll-margin-top: 80px; 
}
.section.alt-bg{ background: #e6eff4; border-radius: 0; }

.section h2 {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--azul);
}

.section-lead {
  text-align: center;
  margin: 0 auto 42px;
  max-width: 760px;
  font-size: 18px;
  color: #444;
  line-height: 1.6;
}

/* ---------- Grids & Cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 24px;
  border-radius: 16px;
  /* background: #ffffff; */
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 240ms ease, box-shadow 260ms ease, border-color 200ms ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
}


/* Glow sutil no hover */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}


/* Título */
.card h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--azul);
}

/* Parágrafo */
.card p {
  margin-top: 12px;
  color: #444;
  line-height: 1.58;
  font-size: 15px;
}

/* Melhor espaçamento para cards com ícones SVG */
.card svg {
  margin: 12px 0 16px 0;
  display: block;
}

/* TOP STRIPE (blue) */
.card-topstripe { overflow: visible; }
.card-topstripe .card-stripe{
  content: "";
  position: absolute;
  top: -8px;
  left: 16px;
  right: 16px;
  height: 8px;
  border-top-left-radius: calc(var(--radius) - 6px);
  border-top-right-radius: calc(var(--radius) - 6px);
  background: linear-gradient(90deg, var(--azul), var(--azul-medio));
  box-shadow: 0 4px 10px rgba(0,76,112,0.06);
}

/* Tamanho padrão para todos os ícones da seção Solução */
#solucao .icon,
#solucao svg {
  width: 36px !important;
  height: 36px !important;
  opacity: 0.92;
}

/* Espaçamento melhor entre ícone e título */
.icon-card svg {
  margin-bottom: 12px;
}

/* Icon & spacing */
.icon-card .icon{ margin-bottom:12px; }
.card h3{ margin-top:8px; color:var(--azul); font-size:18px; }
.card p{ color:#444; line-height:1.6; }

/* --- Seção White Label --- */
.white-label-grid {
  margin-top: 40px;
}

.white-label-highlight {
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
  color: var(--azul);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  font-weight: 600;
}

/* Ajuste responsivo */
@media (max-width: 900px) {
  .white-label-highlight {
    font-size: 16px;
  }
}

/* CTA Grid (form) */
.cta-grid{ display:grid; gap:28px; grid-template-columns: 1fr 420px; align-items:center; }
@media (max-width: 980px){ .cta-grid { grid-template-columns: 1fr; } .hero-copy h1{ font-size:32px; } }

/* forms */
label{ display:block; font-size:14px; margin-bottom:8px; color:#333; }
input, textarea, select{ width:100%; padding:12px; border-radius:10px; border:1px solid #e1e1e1; font-size:15px; background:#fff; }
input:focus, textarea:focus { outline: none; box-shadow: 0 6px 18px rgba(25,118,210,0.06); border-color: var(--azul-medio); }

/* ---------- Footer ---------- */
.footer{ background:#f5f5f5; padding:48px 20px; border-top:1px solid #e5e5e5; }
.footer-container{ max-width:var(--max-width); margin:0 auto; display:flex; gap:30px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.footer-col{ flex:1; min-width:200px; }
.footer-slogan{ color:#555; margin-top:8px; font-size:14px; }
.footer-col h4{ color:var(--azul); margin-bottom:12px; font-size:18px; }
.footer-col a{ display:block; color:var(--verde); text-decoration:none; margin-bottom:8px; font-weight:500; }
.footer-copy{ text-align:center; margin-top:40px; color:#777; font-size:13px; }

/* ---------- Animations ---------- */
@keyframes parallaxFloat{ 0%{transform:translateY(-12%);} 50%{transform:translateY(-14%);} 100%{transform:translateY(-12%);} }
.hero-bg{ animation: parallaxFloat 10s ease-in-out infinite; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .header-inner{ padding:10px 0; }
}
@media (max-width: 820px){
  .site-nav{ display:none; }
  .hamburger{ display:block; }
  .hero-copy h1{ font-size:28px; }
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
}
@media (max-width: 420px){
  .hero-copy h1{ font-size:22px; }
  .lead{ font-size:15px; }
  .card { padding:18px; }
}

/* Responsivo */
@media (max-width: 900px) {
  .hero {
    padding: 30px 20px 30px 60px;
}
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 100px;
  }

  .hero-text h1 {
    font-size: 34px;
  }

  .hero-sub {
    font-size: 18px;
    margin: 0 auto 26px auto;
  }

  .hero-illustration {
    margin-top: 40px;
  }

  .mockup-3d {
    transform: none;
  }
}


form{
  display: flex;
  gap: 9px;
  flex-direction: column;
}

button{
  border-width: 0;
}

/* GRID da seção Solução */
.solution-grid {
  margin-top: 40px;
}

/* CARD personalizado para Solução */
.solution-card {
  padding: 28px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: all .25s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.12);
}

/* Linha ícone + título */
.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Ícones pequenos com cores originais */
.title-row .title-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  opacity: 1;
}

/* Títulos */
.solution-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--azul);
}

/* Texto */
.solution-card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}