/* ======= CORE / VARS ======= */
:root{
  --blue-900:#001C64;
  --blue-800:#0B1A4A;
  --blue-700:#2e49c8;
  --blue-500:#0070E0;
  --ink:#0D1635;
  --text:#0C1A3A;
  --muted:#5B6B88;
  --border:#E5EAF2;
  --alt:#F6FAFF;
  --yellow:#FFC439;
  --white:#ffffff;
  --footer-grad: linear-gradient(180deg, #07143f, #020827);
  --top-bg-img: url(img/background.jpg);  
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; color:var(--text);  }


a{color:var(--white); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px,92vw); margin-inline:auto}
img{max-width:100%; display:block}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; padding:.7rem 1.1rem; border-radius:999px; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--blue-700); color:#fff}
.btn-outline{border-color:var(--border); color:var(--ink); background:#fff}
.btn-dark{background:var(--white); color:var(--blue-700);}
.btn-ghost{border:1px solid var(--border); color:var(--text-branco); background:transparent}
.btn-pay{background:var(--yellow); color:#fff; border:none; border-radius:999px; padding:.8rem 1rem; font-weight:900}
.center{text-align:center}
.muted{color:var(--white);}

.top-bg{
  position: relative;
  background-image:
    /* mesmo gradiente que você já usa no hero */
    linear-gradient(180deg, rgba(5,12,32,.66), rgba(5,12,32,.35) 35%, rgba(5,12,32,.66)),
    var(--top-bg-img);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Header */
.site-header{background: transparent; position:sticky; top:0; z-index:30; }
.nav{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:1rem; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.6rem; margin-right:10px;}
.logo-img {
  width: 116px;   /* ajuste o tamanho conforme sua logo */
  height: auto;  /* mantém a proporção da imagem */
}

.menu ul{list-style:none; display:flex; gap:1.25rem; margin:0; padding:0}
.actions{display:flex; gap:.5rem; align-items:center}

.nav-toggle{display:none; width:40px; height:40px; border:1px solid var(--border); border-radius:10px; background:#fff}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); margin:6px auto}

/* Hero com fundo e brilho radiais */
.hero {
  position: relative;
  min-height: 72vh;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: left;
  background: none; 
}
@media (max-width: 900px){
  .hero{ min-height: 60vh; }
}


.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem; padding:3.5rem 0 2rem}
.eyebrow{color:#C6D4FF; letter-spacing:.04em; font-weight:400; font-size:15px; margin:0 0 .25rem; text-transform: uppercase;}
.hero h1{color:#fff; font-size:clamp(2rem,3.2vw + 1rem,3.2rem); line-height:1.1; margin:.25rem 0 1rem; font-weight:900}
.hero .lead{color:#E3ECFF; max-width:60ch}
.cta{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0}
.support{color:#C6D4FF; font-size:.95rem}

.hero-visual .device{width:min(420px, 90vw); margin-inline:auto; color:#fff; border-radius:34px; padding:14px; border:1px solid #111; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.device .screen{border-radius:24px; padding:16px; display:grid; gap:16px; color:#fff;}
.screen-row{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center}
.screen-row strong{color:var(--white)} .screen-row span{color:var(--white)}
.os-header{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border-bottom:1px solid var(--border); padding-bottom:10px}
.dots span{display:inline-block; width:6px; height:6px; border-radius:50%; background:#D1D7E3; margin-right:4px}
.os-header .title{font-weight:800; color:var(--ink)} .os-header .count{color:var(--muted); font-weight:600}
.item{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center}
.thumb{width:64px; height:64px; border-radius:12px; border:1px solid var(--border); background:#EEF3FF}
.t1{background:linear-gradient(135deg,#e8f0ff,#f3f7ff)} .t2{background:linear-gradient(135deg,#edf8ff,#f7fbff)}
.meta .name{font-weight:700; color:var(--text)} .meta .price{color:var(--muted); font-weight:700}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer}
.btn-card{background:#0C1A3A; color:#fff; border:none; border-radius:999px; padding:.8rem 1rem; font-weight:800}

/* Wave divisor */
.hero-wave{height:20px; background:#0A1333 margin-top:2rem}

/* Cards pequenos */
.feature-row{background:#0b1a4a; padding:1.5rem 0 2rem}
.cards-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem}
.mini-card{background:#fff; border-radius:16px; border:1px solid var(--border); padding:1rem; display:grid; gap:.35rem; position:relative}
.mini-card .pic{height:80px; border-radius:12px; background:linear-gradient(135deg,#eaf2ff,#f7fbff); border:1px solid var(--border)}
.mini-card .dot{position:absolute; right:10px; bottom:10px; color:#5B6B88}

/* Seção ajuda */
.help{background:#fff; padding:2.5rem 0}
.help-grid h2{text-align:center;  margin-bottom: 2rem; color:var(--ink); text-transform: uppercase;}
.help .cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.help-col{background:#fff; border:1px solid var(--border); border-radius:16px; padding:1rem}

/* Seção aprendizado */
.learn{padding:2.5rem 0}
.twin{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.box{border:1px solid var(--border); border-radius:16px; padding:1rem; background:#fff}
.device-shot{height:200px; border-radius:12px; background:linear-gradient(180deg,#fff,#eef3ff); border:1px solid var(--border); margin-bottom:.75rem}
.device-shot.code{background:linear-gradient(180deg,#fff,#e9f7ff)}

/* Faixa escura */
.dark-band{background:#08133a; color:#C6D4FF; padding:3rem 0}
.dark-band h2{color:#fff; text-align:center}
.band-lead{text-align:center; margin:.25rem 0 1.5rem}
.band-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.band-card{background:#0b1a4a; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem}
.band-pic{height:160px; border-radius:12px; background:linear-gradient(135deg, #243a9b, #153170)}
.chip{display:inline-block; margin-top:.5rem; border:1px solid rgba(255,255,255,.25); color:#E3ECFF; padding:.3rem .6rem; border-radius:999px}

/* Planos */
.section{padding:3rem 0}
.pricing{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-top:1rem}
.price-card{border:1px solid var(--border); border-radius:16px; padding:1.2rem; background:#fff; display:grid; gap:.6rem}
.price{font-size:2rem; font-weight:900; color:var(--ink)}
.price span{font-size:.6em; color:var(--muted)}
.price-card ul{margin:0; padding-left:1.15rem}
.price-card.featured{border-color:#c7d7ff; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.badge{display:inline-block; font-size:.75rem; background:#EEF3FF; color:#003087; padding:.25rem .5rem; border-radius:999px}

/* CTA Bottom */
.cta-bottom{padding:2.5rem 0; background:#fff}

/* Contato */

#contact {
    margin-top: 0;
    background: #2e49c8;
    padding: 96px 0;
}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form{display:grid; gap:.6rem; border:1px solid var(--border); border-radius:16px; padding:1rem; }
.contact-form label{display:grid; gap:.3rem; color:#fff;}
input, textarea{font:inherit; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; width:100%; }
.contact-form h3 { color:#fff; }
.contact-info{border:1px solid var(--border); border-radius:16px; padding:1rem; background:#fff; color:#545454;}

/* Footer */
/* ===== Footer (estilo premium, inspirado no print) ===== */
.site-footer{
  background: #050e28; /* base escura */
  color:#e7ecff;
  padding-top: 48px;
}
.site-footer a{ color:#e7ecff; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

.footer-top{
  display:grid;
  grid-template-columns: 1.4fr .9fr .9fr 1fr;
  gap: 2rem;
  align-items:start;
  padding-bottom: 30px;
}
.f-col h4{ margin:0 0 .5rem; color:#f7f9ff; }
.f-logo{ width:140px; height:auto; margin: 0 0 10px; filter: brightness(1.05) contrast(1.05); }

.f-list{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.45rem; }
.f-list a{ opacity:.95 }
.f-list a:hover{ opacity:1 }

.f-meta{ color:#b9c3e0; }
.f-meta a{ color:#b9c3e0 }

.f-badge{
  display:inline-block;
  background:#ea384c;
  color:#fff;
  font-weight:800;
  padding:.25rem .5rem;
  border-radius:8px;
  margin-bottom:.4rem;
  font-size:.8rem;
}

.f-cta h4{ margin:.2rem 0 .8rem }
.f-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#e7ecff; font-weight:800;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.f-btn:hover{ background:rgba(255,255,255,.08); transform: translateY(-1px); border-color:rgba(255,255,255,.4); }

.footer-divider{ height:1px; background:rgba(255,255,255,.1); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0 26px;
}
.copy{ color:#b9c3e0; font-size:.95rem; }

.social{ display:flex; align-items:center; gap:.6rem; }
.social span{ color:#b9c3e0; margin-right:.25rem; font-size:.95rem; }
.social a{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.06); color:#fff;
  transition: transform .15s ease, background .2s ease;
}
.social a:hover{ transform: translateY(-1px); background:rgba(255,255,255,.12); }

/* Responsivo */
@media (max-width: 960px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; gap:.8rem; text-align:center; }
}


/* Responsivo */
@media (max-width:1100px){
  .cards-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .band-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{grid-template-columns:auto auto 1fr}
  .menu{display:none}
  .nav-toggle{display:block}
  .hero-grid, .twin, .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pricing{grid-template-columns:1fr}
  .band-cards, .cards-4, .help .cols{grid-template-columns:1fr}
  .btn{width:100%}
}


/* ===== MÉTRICAS / INDICADORES ===== */
.metrics {
  background: #f0f6ff;
  padding: 3rem 0;
}

.metrics-title {
  text-align: center;
  color: var(--ink);
  margin-bottom: 2rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.metric-card {
  background: #eaf2ff;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--border);
}

.metric-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--blue-700);
  margin-bottom: .5rem;
  /* evita "pulos" de largura durante a contagem */
  font-variant-numeric: tabular-nums;
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.metric-card p {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}

/* Efeito sutil enquanto anima */
.metric-card.is-animating .metric-value{
  color: #0b1a4a;
  text-shadow: 0 0 0px rgba(0,48,135,0), 0 0 0px rgba(0,48,135,0);
  animation: metricPulse .9s ease-in-out infinite alternate;
}
@keyframes metricPulse {
  from { transform: translateY(0); }
  to   { transform: translateY(-1px); }
}

@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .metrics-grid { grid-template-columns: 1fr; }
}



/* ===== Processo de criação ===== */
.process{position:relative; padding:3.2rem 0; background:#fff}
.process-title{color:var(--ink); text-align:center; font-weight:900; margin:0 0 .4rem}
.process-subtitle{color:var(--muted); text-align:center; max-width:70ch; margin:.25rem auto 2.4rem}
.process-line{position:absolute; left:50%; transform:translateX(-50%); top:80px; width:min(1120px,92vw); height:220px; pointer-events:none}
.process-steps{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.4rem}
.process-step{display:grid; justify-items:center; text-align:center; gap:.6rem; padding:0 1rem}
.process-ico{width:84px; height:84px; border-radius:999px; display:grid; place-items:center;
  background:#2e49c8; box-shadow:0 8px 30px rgba(0,0,0,.06)}
.process-step-title{margin:.25rem 0 0; font-size:1.05rem; color:var(--ink)}
.process-step-desc{margin:0; color:#42506a}

@media (max-width:1100px){
  .process-line{display:none} /* simplifica no mobile */
  .process-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .process-steps{grid-template-columns:1fr}
  .process{padding:2.2rem 0}
}

/* =========================================================
   SEÇÃO: CARDS DE SERVIÇOS — CSS COMPLETO (alinhado à esquerda)
   ========================================================= */

/* Section & container */
.svc { padding: 3.2rem 0; background:#fff; }
.svc-container { width:min(1180px,92vw); margin:0 auto; }
.svc-title{
  margin:0 0 1.4rem;
  font-weight:800;
  color:#0f1c3f;
  font-size:clamp(1.15rem, 2.1vw, 1.45rem);
}

/* Grid */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;   /* mesma altura por linha */
  gap:24px;
}

/* Card base */
.svc-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(15,28,63,.08);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,28,63,.06);
  padding:20px 20px 16px;   /* mais compacto */
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:280px;
  isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease;
}
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,28,63,.10); }

/* Faixa colorida no topo */
.svc-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:8px;
  border-top-left-radius:16px; border-top-right-radius:16px;
  background:var(--svc-accent,#6c63ff);
}

/* Títulos (sem uppercase forçado) */
.svc-card h3{
  margin:10px 0 8px;
  color:#0f1c3f;
  font-weight:700;
  letter-spacing:0;
  word-break:normal;
  -webkit-hyphens:none; hyphens:none;
  font-size:clamp(0.98rem, 1.2vw, 1.08rem);
  line-height:1.22;
}

/* Corpo do texto — AGORA ALINHADO À ESQUERDA */
.svc-card p,
.svc-card li,
.svc-meta{
  font-size:.93rem;
  line-height:1.45;
  color:#3f4d6d;
  text-align:left;                  /* ← trocado de justify para left */
  text-justify:auto;
  -webkit-hyphens:none; hyphens:none; /* sem hifenização automática */
  word-spacing:normal; letter-spacing:normal;
  text-wrap:pretty;                  /* quebras mais “bonitas” (browsers modernos) */
}
.svc-card p{ margin:0 0 6px; }
.svc-card ul{ margin:0 0 8px 16px; padding:0; }
.svc-card li{ margin:.08rem 0; }

/* Badges (segmentos atendidos) */
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.badge{
  font-size:.72rem; padding:3px 7px; border-radius:999px;
  background:rgba(15,28,63,.05); color:#0f1c3f;
  border:1px solid rgba(15,28,63,.08);
}

/* Rodapé/meta do card */
.svc-meta{
  margin-top:auto;
  border-top:1px dashed rgba(15,28,63,.12);
  padding-top:10px;
}

/* 1ª fileira (os 4 primeiros cards — foco Delphi) um pouco mais compacta */
.svc-grid > .svc-card:nth-child(-n+4) h3{
  font-size:clamp(.95rem, 1.05vw, 1.02rem);
}
.svc-grid > .svc-card:nth-child(-n+4) p,
.svc-grid > .svc-card:nth-child(-n+4) li,
.svc-grid > .svc-card:nth-child(-n+4) .svc-meta{
  font-size:.90rem;
  line-height:1.42;
}

/* Responsivo */
@media (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px){
  .svc-grid{ grid-template-columns:1fr; }
}

/* Paleta de acentos (aplique no card: .accent-*) */
.accent-indigo{ --svc-accent:#6366f1; }
.accent-purple{ --svc-accent:#8b5cf6; }
.accent-teal  { --svc-accent:#2dd4bf; }
.accent-green { --svc-accent:#34d399; }
.accent-cyan  { --svc-accent:#22d3ee; }
.accent-blue  { --svc-accent:#60a5fa; }
.accent-lime  { --svc-accent:#84cc16; }
.accent-amber { --svc-accent:#f59e0b; }
.accent-sky   { --svc-accent:#38bdf8; }
.accent-rose  { --svc-accent:#fb7185; }
.accent-pink  { --svc-accent:#f472b6; }
.accent-orange{ --svc-accent:#fb923c; }

/* =========================================================
   OPCIONAL: “justify” só no desktop (com hifenização correta)
   - Para usar, DESCOMENTE este bloco e garanta que o <html> tenha lang="pt-BR"
   ========================================================= */
/*
@media (min-width:1101px){
  .svc-card p,
  .svc-card li,
  .svc-meta{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
*/

/* =========================================================
   CARROSSEIS — Tecnologias & Clientes
   - Marquee contínuo (CSS + pequeno JS)
   - Cartões .logo padronizados
   - Modo com legenda abaixo do ícone (data-caption="below")
   ========================================================= */

/* (Opcional) imagens com classe .tech-logo em qualquer lugar do site */
.carousel .tech-logo{
  height: 44px;            /* 40–52px funciona bem */
  width: auto;
  display: block;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.05);
}

/* ===== Marquees ===== */
.marquees{
  padding: 2.2rem 0;
  background: #fff;
}
.marquee-title{
  margin: .25rem 0 .6rem;
  font-weight: 900;
  color: var(--ink, #0f1c3f);                /* fallback se --ink não existir */
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.marquee{
  --gap: 28px;                                /* espaço entre cartões */
  --speed: 30s;                               /* velocidade padrão */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border, rgba(15,28,63,.12));
  border-radius: 16px;
  background: #fff;
  padding: .6rem 0;

  /* fade nas bordas (efeito máscara) */
  -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0), #000 8%, #000 92%, rgba(0,0,0,0));
          mask: linear-gradient(90deg, rgba(0,0,0,0), #000 8%, #000 92%, rgba(0,0,0,0));
}
.marquee + .marquee{ margin-top: 1rem; }

.marquee .marquee-content{
  display: flex;
  gap: var(--gap);
  align-items: center;
  width: max-content;                         /* considera a largura real */
  padding: 0;
  margin: 0;
  list-style: none;
}

.marquee .marquee-inner{
  display: flex;
  gap: var(--gap);
  align-items: center;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}
.marquee.reverse .marquee-inner{ animation-name: marquee-reverse; }

@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }        /* anda metade (lista duplicada no JS) */
}
@keyframes marquee-reverse{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* ===== Cartão da logo (tamanho consistente) ===== */
.logo{
  flex: 0 0 auto;
  width: 130px;
  height: 58px;                               /* altura padrão (sem legenda) */
  border: 1px solid var(--border, rgba(15,28,63,.12));
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(15,28,63,.05);
}
.logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}

/* Fallback de texto caso a imagem não exista */
.logo .txt{
  font-weight: 800;
  color: #0f1c3f;
  font-size: .82rem;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.1;
}

/* Pausar a animação ao passar o mouse/touch */
.marquee:hover .marquee-inner{ animation-play-state: paused; }

/* ===== Modo "legenda embaixo" (aplique no container: data-caption="below") ===== */
.marquee[data-caption="below"] .logo{
  flex-direction: column;                     /* ícone em cima + legenda embaixo */
  height: 78px;                               /* dá espaço para a legenda */
  padding: 6px 8px;
}
.marquee[data-caption="below"] .logo img{
  height: 40px;                               /* área do ícone */
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Estilo da legenda (inserida via JS a partir do ALT da imagem) */
.logo-cap{
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .2px;
  color: #4b5a7d;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Responsivo ===== */
@media (max-width: 720px){
  .logo{ width: 108px; height: 52px; }        /* padrão sem legenda */
  .marquee{ --gap: 22px; }

  .marquee[data-caption="below"] .logo{
    height: 72px;                              /* um pouco mais compacto no mobile */
  }
  .marquee[data-caption="below"] .logo img{
    height: 36px;
  }
}




/* ===== Header "scrolled" (ao rolar) ===== */
:root{
  /* Altere aqui se quiser preto:
     --hdr-link: #111;  --hdr-text: #111; */
  --hdr-bg: #fff;
  --hdr-link: #0b3da6;  /* azul dos links/ícones no header */
  --hdr-text: #0b3da6;  /* cor base do texto no header */
}

/* Estado padrão (no topo): seu header pode continuar transparente */
.site-header {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Estado ao rolar */
.site-header.is-scrolled{
  background: var(--hdr-bg);
  color: var(--hdr-text);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

/* Links do menu e botões de idioma dentro do header */
.site-header.is-scrolled .menu a,
.site-header.is-scrolled .actions .lang-btn{
  color: #545454;
}

/* Realce no hover (opcional) */
.site-header.is-scrolled .menu a:hover,
.site-header.is-scrolled .actions .lang-btn:hover{
  opacity: .75;
}

/* Ícone do menu hamburguer (tracinhos) */
.site-header.is-scrolled .nav-toggle span{
  background: #545454;
}

/* Caso você tenha algum link padrão forçando branco no topo,
   este reforço ajuda a manter os azuis/preto ao rolar */
.site-header.is-scrolled a{ color: var(--white); }




/* ===== Pricing (cores próximas ao print) ===== */
.pricing{
  --plans-bg: #2e49c8;       /* azul de fundo da seção */
  --card-glass: rgba(255,255,255,.08);
  --card-glass-strong: rgba(0,0,0,.28); /* card destacado mais escuro */
  --card-border: rgba(255,255,255,.25);
  --muted: rgba(255,255,255,.8);
  --white: #fff;
  --cyan: #6fd6ea;           /* badge e checados */
  --btn-outline: rgba(255,255,255,.35);

  background: var(--plans-bg);
  color: var(--white);
  padding: 96px 0;
}

/* Container da seção centralizado e com largura confortável */
.pricing .container{
  width: min(1120px, 92vw);
  margin-inline: auto;
}

.pricing .pricing-head{
  text-align:center;
  margin-bottom: 36px;
}
.pricing .pricing-head h2{
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  margin: 0 0 8px;
}
.pricing .pricing-head p{
  color: var(--muted);
  margin: 0 0 20px;
}

/* Segmented control (só visual) */
.pricing .segmented{
  display: inline-flex; gap: 8px; background: rgba(255,255,255,.08);
  border: 1px solid var(--card-border); border-radius: 999px; padding: 6px;
}
.pricing .segmented .seg-btn{
  background: transparent; color: var(--white); border: 0;
  padding: 8px 16px; border-radius: 999px; font-weight: 600; cursor: default;
}
.pricing .segmented .seg-btn.is-active{
  background: var(--card-glass); border: 1px solid var(--card-border);
}

/* ===== Grid de cards (centralizado) ===== */
.pricing .pricing-grid{
  display: grid;
  /* 3 colunas com largura fixa; ajuste 320px se quiser mais largo/estreito */
  grid-template-columns: repeat(3, 320px);
  gap: 22px;
  align-items: stretch;
  justify-content: center;    /* <-- centraliza o conjunto de cards */
  margin-top: 28px;
}

/* Responsivo: empilha mantendo centralizado */
@media (max-width: 960px){
  .pricing .pricing-grid{
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ===== Card base ===== */
/* ==== FIX PRICING: neutraliza a regra antiga e centraliza ==== */

/* 0) Zera a definição antiga que fazia o SECTION virar grid */
#plans.pricing {
  display: block;               /* era grid na regra antiga */
  margin-top: 0;                /* remove gap extra da regra antiga */
  background: #2e49c8;          /* mesma cor do print */
  color: #fff;
  padding: 96px 0;
}

/* 1) Container centralizado (usa sua .container padrão) */
#plans.pricing > .container {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* 2) Cabeçalho alinhado ao centro */
#plans.pricing .pricing-head { text-align: center; margin-bottom: 36px; }
#plans.pricing .pricing-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  margin: 0 0 8px;
}
#plans.pricing .pricing-head p { color: rgba(255,255,255,.8); margin: 0 0 20px; }

/* 3) Grid dos cards — 3 colunas fixas e CENTRALIZADO */
#plans.pricing .pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 340px);  /* ajuste 320–360px se quiser */
  gap: 22px;
  align-items: stretch;
  justify-content: center;                  /* <- centraliza o conjunto */
  margin-top: 28px;
}

/* 4) Responsivo: empilha mantendo centralizado */
@media (max-width: 1100px){
  #plans.pricing .pricing-grid{
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}
@media (max-width: 960px){
  #plans.pricing .pricing-grid{
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* 5) Estilos dos cards (mantém os seus atuais) */
#plans.pricing .pricing-card{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 22px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  transition: transform .08s ease, box-shadow .2s ease;
}
#plans.pricing .pricing-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 55px rgba(0,0,0,.28);
}
#plans.pricing .pricing-card .card-inner{ padding: 28px 22px; }
#plans.pricing .pricing-card .plan-eyebrow{
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: rgba(255,255,255,.85); margin: 0 0 6px;
}
#plans.pricing .pricing-card .plan-title{ font-size: 28px; margin: 0 0 4px; }
#plans.pricing .pricing-card .plan-price{ font-size: 34px; margin: 0 0 4px; font-weight: 800; }
#plans.pricing .pricing-card .plan-price span{ font-size: .6em; opacity: .9; margin-right: 2px; }
#plans.pricing .pricing-card .plan-price small{ font-size: .45em; font-weight: 600; opacity: .9; }
#plans.pricing .pricing-card .plan-sub{ color: rgba(255,255,255,.8); margin: 0 0 16px; }
#plans.pricing .pricing-card .plan-features{
  list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px;
}
#plans.pricing .pricing-card .plan-features li{
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px;
}
#plans.pricing .pricing-card .chk{
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-grid; place-items: center;
  color: #0a2f5a; background: #6fd6ea; border: 1px solid rgba(255,255,255,.55);
}
#plans.pricing .btn-ghost,
#plans.pricing .btn-solid{
  display: inline-flex; justify-content: center; align-items: center;
  height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700;
  text-decoration: none; transition: transform .08s ease, opacity .2s ease;
}
#plans.pricing .btn-ghost{
  color: #fff; border: 1px solid rgba(255,255,255,.35); background: transparent;
}
#plans.pricing .btn-ghost:hover{ opacity: .85; }
#plans.pricing .btn-solid{
  background: #fff; color: #0b2a8f; border: 1px solid rgba(255,255,255,.05);
}
#plans.pricing .btn-solid:hover{ transform: translateY(-1px); }

/* 6) Card em destaque */
#plans.pricing .pricing-card.is-featured{
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.35);
}
#plans.pricing .pricing-card.is-featured .badge{
  position: absolute; left: 18px; right: 18px; top: -12px;
  margin: auto; height: 32px; display: grid; place-items: center;
  background: #6fd6ea; color: #0a2f5a; font-weight: 800;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ===== Bandeirinhas nas opções de idioma ===== */
/* ===== Lang buttons: tirar fundo branco e estilizar ===== */
.actions .lang .lang-btn{
  appearance: none;
  background: transparent;   /* remove fundo branco */
  border: 0;                 /* remove borda nativa */
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
  font-weight: 700;
  color: #fff;               /* no topo (header transparente) */
  cursor: pointer;
}
.actions .lang .lang-btn:hover{
  background: rgba(255,255,255,.12);
}

/* Quando o header fica branco ao rolar, mude a cor do texto */
.site-header.is-scrolled .actions .lang .lang-btn{
  color: #545454;
  background: transparent;   /* garante que continue sem fundo */
}

/* opcional: estado ativo/selecionado */
.actions .lang .lang-btn.active{
  background: rgba(255,255,255,.18);
}

/* as bandeirinhas já estão definidas em ::before e seguem funcionando */


/* Bandeirinhas com SVG */
.lang-btn::before{
  content: "";
  width: 18px; 
  height: 12px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
  margin-right: .35rem;
  transform: translateY(1px);
}

.lang-btn[data-lang="en"]::before{ background-image: url("img/flags/us.svg"); }
.lang-btn[data-lang="pt"]::before{ background-image: url("img/flags/br.svg"); }
.lang-btn[data-lang="es"]::before{ background-image: url("img/flags/es.svg"); }



/* ===== Cookie Consent - Barra no rodapé ===== */
:root{
  --cc-accent: #CFEA5A;  /* verde-lima Aceitar */
  --cc-text: #1f2a44;
  --cc-muted: #6b7280;
  --cc-bg: #fff;
}

.cc-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: none;            /* aparece com .is-visible */
  pointer-events: none;     /* NÃO bloqueia cliques fora */
}
.cc-banner.is-visible{ display: block; }

.cc-card{
  position: relative;
  pointer-events: auto;     /* só o card recebe cliques */
  width: min(980px, 96vw);
  margin: 0 auto 18px;
  background: var(--cc-bg);
  color: var(--cc-text);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
}
@media (max-width: 720px){
  .cc-card{ grid-template-columns: 1fr; gap: 12px; }
}

.cc-text p{ margin: 6px 0; }
.cc-links{ color: var(--cc-muted); font-size: .95rem; }
.cc-links a{ color: var(--cc-text); text-decoration: underline; }
.cc-links span{ opacity: .5; margin: 0 8px; }

.cc-actions{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: center;
}
@media (max-width: 720px){
  .cc-actions{ grid-template-columns: 1fr 1fr; }
  .cc-actions .cc-btn-ghost{ grid-column: 1 / -1; }
}

.cc-btn{
  height: 44px; border-radius: 12px; font-weight: 700;
  border: 1px solid rgba(0,0,0,.1); background: #fff; color: var(--cc-text);
}
.cc-btn-ghost{ background: transparent; border-color: rgba(0,0,0,.15); }
.cc-btn-outline{ background: #fff; }
.cc-btn-accept{ background: var(--cc-accent); border: 1px solid rgba(0,0,0,.06); color: #24331a; }
.cc-btn:hover{ filter: brightness(.96); }

/* Dropup de preferências (aparece acima do card) */
.cc-dropup{
  position: absolute; right: 18px; bottom: calc(100% + 12px);
  width: min(520px, calc(96vw - 32px));
  background: #fff; color: var(--cc-text);
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 12px;
}
.cc-list{ list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.cc-item{ background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 10px; }
.cc-row{ display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.cc-col small{ display: block; color: var(--cc-muted); }

/* Switch */
.cc-switch{ position: relative; width: 44px; height: 26px; }
.cc-switch input{ position: absolute; inset: 0; opacity: 0; }
.cc-switch i{
  position: absolute; inset: 0; background: #e5e7eb; border-radius: 999px;
  transition: background .15s ease;
}
.cc-switch i::after{
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .15s ease;
}
.cc-switch input:checked + i{ background: var(--cc-accent); }
.cc-switch input:checked + i::after{ transform: translateX(18px); }

.cc-pref-actions{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}


.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;         /* verde WhatsApp */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  text-decoration: none;
  transition: transform .12s ease, filter .15s ease;
}
.whatsapp-fab:hover{ transform: translateY(-1px); filter: brightness(.98); }
.whatsapp-fab svg{ pointer-events: none; }



/* ===== FAB: Voltar ao topo ===== */
.to-top-fab{
  position: fixed;
  right: 86px;         /* fica à ESQUERDA do WhatsApp (que está em right:18px) */
  bottom: 18px;
  z-index: 9998;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #2e49c8;      /* azul do site */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  cursor: pointer;

  /* anim de aparecer/desaparecer */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, filter .15s ease;
}
.to-top-fab:hover{ filter: brightness(1.05); }
.to-top-fab svg{ pointer-events: none; }

/* aparece só depois de rolar */
.to-top-fab.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Preferir empilhar ACIMA do WhatsApp? Use isto no lugar de right/bottom acima: */
/*
.to-top-fab{
  right: 18px;
  bottom: 86px;   // fica acima do WhatsApp
}
*/
.lang .lang-btn.is-active{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
  filter: brightness(1.05);
}



/* styles.css */
.to-top-fab{
  z-index: 10000; /* um pouco acima do cookie/menus */
}

/* Alternativa: empilhar ACIMA do WhatsApp */
.to-top-fab{ right:18px; bottom:86px; }  /* ao invés de right:86px; bottom:18px; */