/* ======= CORE / VARS ======= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
: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);   
  --media: rgba(255, 255, 255, .8);
  --bg-card1:#2f3ab8;
  --bg-card2:#2632a3;
  --button:#6dd0ff;
  --button-text:#091652;
  --radius:26px;
  --shadow:0 30px 60px rgba(20,25,75,.35);  
  --padding-top-bottom: 6rem;
  --padding-left-right: 0;   
}
*{box-sizing:border-box}
html, body { height: 100% }
body {
    margin: 0; 
    font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; 
    color: var(--text);  
	    font-weight: 500;
		font-size: .920rem;
    line-height: 1.25rem;
}


/* ===== CLASSE REUTILIZÁVEL PARA TÍTULOS ===== */
.title-block {
  text-align: center;
  margin-bottom: 40px;
}

/* tamanho pequeno de title 
.title-block .title {
  margin: 0 0 8px;
  line-height: 1.1;  
  font-size: 1.875rem;   
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));    
}
*/


.title-block .title {
  margin: 0 0 8px;
  line-height: 1.1;  
  font-weight: 900;
  color: var(--text, #000); 
  font-size: clamp(27px, 4vw, 40px);  
}



.title-block .subtitle {
  margin: 0 0 20px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--muted, #666); /* usa a variável do site */
}

/* A classe .dark só deve ser usada em fundos ESCUROS */
.title-block.dark .title {
  color: #fff;
}

.title-block.dark .subtitle {
  color: rgba(255, 255, 255, 0.8);
}

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:
    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;
}
  */

.top-bg{
  position: relative;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);

  /* fundo com imagem + gradiente para leitura do texto */
  background-image:
    linear-gradient(135deg, rgba(5, 12, 32, 0.90), rgba(5, 12, 32, 0.60)),
    url("img/hero-webdesign.jpg"); /* troque pela imagem que você quiser */
  background-size: cover;
  background-position: center;
  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: 70vh;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: left;
  background: transparent;
}

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  align-items:center;
  gap:3rem;
  padding:3.5rem 0 2.5rem;
}

@media (max-width: 900px){
  .hero{ min-height: 60vh; }
  .hero-grid{ grid-template-columns:1fr; }
}

.eyebrow{
  color:#C6D4FF;
  letter-spacing:.12em;
  font-weight:500;
  font-size: .8rem;
  margin:0 0 .4rem;
  text-transform: uppercase;
}

.hero h1{
  color:#fff;
  font-size: clamp(1.9rem, 2.7vw + 0.8rem, 2.7rem);
  line-height:1.15;
  margin:.25rem 0 1rem;
  font-weight:900;
}

.hero .lead{
  color:#E3ECFF;
  max-width: 44rem;
  font-size: .98rem;
  line-height:1.6;
}

/* lista de destaques abaixo do parágrafo */
.hero-highlights{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .35rem;
  color:#E3ECFF;
  font-size: .9rem;
}
.hero-highlights li::before{
  content: "✔";
  margin-right: .45rem;
  color: #a5ff69;
}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.2rem 0 0.4rem;
}

.support{
  color:#C6D4FF;
  font-size:.95rem;
}

/* HERO VISUAL (bloco da direita) */

.hero-visual{
  display:flex;
  justify-content:center;
}

.device.device--web{
  width:min(440px, 90vw);
  color:#fff;
  border-radius:28px;
  padding:18px 18px 20px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(145deg, rgba(15,23,42,.85), rgba(30,64,175,.85));
  box-shadow:0 26px 60px rgba(15,23,42,.65);
  position:relative;
  overflow:hidden;
}

/* badge superior */
.device-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.6);
  font-size:.8rem;
  margin-bottom:1rem;
}
.device-badge span{ font-size:1.1rem; }

/* área com textos de benefício */
.device-screen{
  border-radius:18px;
  padding:14px 14px 12px;
  background: radial-gradient(circle at top left, rgba(96,165,250,.35), transparent 40%),
              radial-gradient(circle at bottom right, rgba(167,139,250,.35), transparent 45%),
              rgba(15,23,42,.9);
  display:grid;
  gap:12px;
}

.device-row{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:10px;
  align-items:flex-start;
}

.device-tag{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(191,219,254,.18);
  border:1px solid rgba(191,219,254,.5);
  white-space:nowrap;
}
.device-tag--green{
  background:rgba(187,247,208,.15);
  border-color:rgba(74,222,128,.6);
}
.device-tag--purple{
  background:rgba(221,214,254,.15);
  border-color:rgba(167,139,250,.7);
}

.device-row strong{
  font-size:.9rem;
  color:#E5E7EB;
}
.device-row span{
  display:block;
  font-size:.8rem;
  color:#cbd5f5;
  line-height:1.45;
}

/* mini “devices” no rodapé do card */
.device-devices{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:18px;
}
.device-laptop,
.device-tablet,
.device-phone{
  border-radius:10px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(148,163,184,.6);
}
.device-laptop{
  flex:1;
  height:40px;
}
.device-tablet{
  width:54px;
  height:50px;
}
.device-phone{
  width:34px;
  height:46px;
  border-radius:12px;
}

/* wave (só consertando o ; que faltava) */
.hero-wave{
  height:20px;
  background:#0A1333;
  margin-top:2rem;
}





.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: #fff;
    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:#545454;}
input, textarea{font:inherit; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; width:100%; }
.contact-form h3 { color:#545454; }
.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: var(--padding-top-bottom) var(--padding-left-right);
}

.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{ 
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    background: #ffffff;
    padding: var(--padding-top-bottom) var(--padding-left-right);
    margin-top: -35px;
    position: relative;
    z-index: 1;
   
}
.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:150px; 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: var(--padding-top-bottom) var(--padding-left-right); 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: var(--padding-top-bottom) var(--padding-left-right);
  background: #fff;
}
.marquee-title{
  margin: .25rem 0 .6rem;
  font-weight: 900;
  color: var(--ink, #0f1c3f);               
  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-radius: 16px;
  background: #fff;
  padding: .6rem 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: var(--padding-top-bottom) var(--padding-left-right);   
}

/* 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; */






/* Container principal */
.contato-global{
  background:linear-gradient(140deg,var(--bg-card1),var(--bg-card2));
  box-shadow:var(--shadow);
}

.contato-global-card{	
  display:grid;
  grid-template-columns:1.05fr 1.25fr;
  overflow:hidden;
  color:var(--text);
 
  min-height:560px;
}

/* Lado esquerdo */
.contato-global-hero{
  position:relative;
  padding:60px;
  display:flex;
  align-items:center;
}
.contato-global-hero-inner h1{
  font-size:40px;
  margin:0 0 16px;
  line-height: 40px;
}
.contato-global-hero-inner p{
  color:var(--text);
  line-height:1.6;
  margin:0;
  font-size:15px;
}
.contato-global-hero::after{
  content:"";
  position:absolute;
  top:18%; 
  left:10%;
  width:70%; 
  height:18%;
  background:repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.15) 0 6px,
      transparent 6px 16px);
  transform:skewX(-8deg);
  opacity:.5;
  border-radius:10title-block px;
}

/* Formulário */
.contato-global-form{
  background:#050e28;
  padding:50px 40px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contato-global-row{
  display:flex;
  gap:16px;
}

.contato-global-group{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contato-global-group label{
  font-size:13px;
  font-weight:500;
  color: #fff;
}

.contato-global-group input,
.contato-global-group textarea{
  padding:12px 14px;
  border:none;
  border-radius:8px;
  font-size:14px;
  outline:none;
}

.contato-global-group textarea{
  min-height:110px;
  resize:none;
}

.contato-global-check{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:11px;
  color:var(--muted);
}

.contato-global-btn{
  width:180px;
  align-self:flex-end;
  padding:14px 18px;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  color:var(--button-text);
  background:var(--button);
  cursor:pointer;
}

.contato-global-btn:hover{
  opacity:.85;
}

/* Responsividade */
@media(max-width:900px){
  .contato-global-card{
    grid-template-columns:1fr;
  }
  .contato-global-btn{
    align-self:center;
    width:100%;
  }
}





/* ===== Portfolio section (usa o mesmo visual da .pricing azul) ===== */
/* ===== Portfolio section (usa o mesmo visual da .pricing azul) ===== */
#portfolio.portfolio-section{
  background:#2e49c8; color:#fff; padding:96px 0;
}
#portfolio .portfolio-head{ text-align:center; margin-bottom:36px; }
#portfolio .portfolio-head h2{ font-size:clamp(28px,4vw,42px); margin:0 0 8px; line-height:1.1; }
#portfolio .portfolio-head p{ color:rgba(255,255,255,.8); margin:0 0 20px; }

/* ===== Scroller (marquee horizontal) ===== */
.portfolio-scroller{
  --gap:28px;
  --speed:58s; /* pode ser sobrescrito pelo data-speed via JS */
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:.8rem 0;
  background:transparent;
}
.portfolio-scroller .marquee-content{
  display:flex; flex-wrap:nowrap; gap:var(--gap); align-items:center;
  width:max-content; padding:0; margin:0; list-style:none; white-space:nowrap;
}
.portfolio-scroller .marquee-inner{
  display:flex; flex-wrap:nowrap; gap:var(--gap); align-items:center;
  width:max-content; white-space:nowrap;
  animation: marquee var(--speed) linear infinite;
}
.portfolio-scroller:hover .marquee-inner{ animation-play-state: paused; }

/* ===== Cartões ===== */
.pf-logo{
  flex:0 0 auto; width:150px; height:72px;
  border:1px solid var(--border,rgba(15,28,63,.12));
  border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:10px; box-shadow:0 6px 18px rgba(15,28,63,.05);
  transition: box-shadow .2s ease, transform .15s ease;
}
.pf-logo:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(15,28,63,.10); }

.pf-img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  /* cinza por padrão */
  filter: grayscale(100%) saturate(0.7) contrast(0.95) opacity(0.9);
  transition: filter .25s ease, transform .18s ease;
  will-change: filter, transform;
}

/* >>> FOCO DO CENTRO: só o item .is-focus fica colorido */
.pf-logo.is-focus .pf-img{ filter:none; transform: translateY(-1px); }

/* neutraliza hover colorido para os demais (mantém cinza) */
.pf-logo:not(.is-focus):hover .pf-img,
.pf-logo:not(.is-focus):focus-within .pf-img{
  filter: grayscale(100%) saturate(0.7) contrast(0.95) opacity(0.9);
  transform:none;
}

/* Modo legenda abaixo (compatível com data-caption="below") */
.portfolio-scroller[data-caption="below"] .pf-logo{
  flex-direction:column; height:92px; padding:8px 10px;
}
.portfolio-scroller[data-caption="below"] .pf-img{
  height:54px; width:auto; flex:0 0 auto;
}
.logo-cap{
  margin-top:8px; 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){
  .portfolio-scroller{ --gap:24px; }
  .pf-logo{ width:126px; height:60px; padding:8px; }
  .portfolio-scroller[data-caption="below"] .pf-logo{ height:80px; }
  .portfolio-scroller[data-caption="below"] .pf-img{ height:44px; }
}

/* Keyframes */
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marquee-reverse{ from{transform:translateX(-50%)} to{transform:translateX(0)} }


/* SYNC hover for .logo img (marquee genérico) para combinar com o portfolio */
.logo img{
  filter: grayscale(100%) saturate(0.7) contrast(0.95) opacity(0.9);
  transition: filter .25s ease, transform .18s ease;
  will-change: filter, transform;
}
.logo:hover img,
.logo:focus-within img{
  filter: none;
  transform: translateY(-1px);
}


/* === Tech marquee: grayscale by default; color on hover/focus === */
.marquee .logo img{
  filter: grayscale(100%) saturate(0.7) contrast(0.95) opacity(0.9);
  transition: filter .25s ease, transform .18s ease;
  will-change: filter, transform;
}
.marquee .logo:hover img,
.marquee .logo:focus-within img{
  filter: none;
  transform: translateY(-1px);
}



/* === Override: Technology marquee logos should always be colored === */
#tecnology .logo img,
#tecnology .tech-logo {
  filter: none !important;
}















/* ===== Tech Grid (Tecnologias sem carrossel) ===== */
.tech-section{
  padding: var(--padding-top-bottom) var(--padding-left-right);
  background: #ffffff; /* se quiser fundo azul, troque para #2e49c8 e use .title-block.dark */
}

#tecnology-grid .title-block .title,
#tecnology-grid .title-block .subtitle{
  /* se usar fundo azul na seção, ative o .dark no HTML e pode remover isso */
}

.tech-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 22px;
  justify-items:center;
}

/* Card base */
.tech-card{
  width:100%;
  max-width:160px;
  height:82px;
  border-radius:12px;
  border:1px solid var(--border, #E5EAF2);
  background:#ffffff;
  box-shadow:0 6px 18px rgba(15,28,63,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.tech-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(15,28,63,.10);
  border-color: rgba(46,73,200,.35);
  background:#f7f9ff;
}

/* Logo dentro do card */
.tech-card .tech-logo{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  /* levemente neutro + volta cor no hover */

}

.tech-card:hover .tech-logo{
  filter:none;
  transform: translateY(-1px);
}

/* Responsivo */
@media (max-width:720px){
  .tech-card{
    max-width:140px;
    height:72px;
    padding:8px;
  }
}




/* Ajuste: 4 blocos por linha no celular para o Tech Grid */
@media (max-width: 720px){
  #tecnology-grid .tech-grid{
    grid-template-columns: repeat(4, 1fr); /* força 4 colunas */
    gap: 10px;                             /* espaço menor pra caber bem */
    justify-items: stretch;                /* cards ocupam a coluna inteira */
  }

  #tecnology-grid .tech-card{
    max-width: none;       /* deixa o grid controlar a largura */
    width: 100%;
    height: 64px;          /* um pouco mais baixo pra não ficar gigante */
    padding: 6px;
    box-shadow: 0 3px 10px rgba(15,28,63,.06);
  }

  #tecnology-grid .tech-card .tech-logo{
    max-height: 34px;      /* reduz a logo pra encaixar bem */
    margin: 0 auto;
  }
}





/* Contact Form Styles */
/* === ADICIONE APENAS ESTAS LINHAS AO SEU CSS EXISTENTE === */

/* Estilos para validação positiva */
.contato-global-form input.valid,
.contato-global-form textarea.valid {
    border-color: #27ae60;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.3);
}

/* Garantir que a mensagem fique oculta inicialmente */
.form-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 15px 0;
    font-weight: 500;
    display: none; /* ← ADICIONE ESTA LINHA */
}

/* Seu CSS existente permanece IGUAL abaixo */
.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contato-global-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state */
.contato-global-btn.sending {
    position: relative;
    color: transparent;
}

.contato-global-btn.sending::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.contato-global-form input.error,
.contato-global-form textarea.error {
    border-color: #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}





/* ===== CONTAINER GERAL ===== */

.testimonials {
  position: relative;
  padding: 4rem 1rem 5rem;
  color: #f9fafb;
  background: radial-gradient(circle at top, #1d4ed8 0, #020617 55%, #020617 100%);
  overflow: visible; /* não corta nada que sai dos cards */
}

.testimonials__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: url("https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&w=1600");
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  z-index: -1;
}

.testimonials__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ===== HEADER ===== */

.testimonials__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.testimonials__header h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.5rem;
}

.testimonials__header p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e5e7eb;
}

/* ===== CARROSSEL ===== */

.testimonials__carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonials__track-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;          /* avatar pode “sair” pra cima */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* esconder scrollbar em alguns browsers */
.testimonials__track-wrapper::-webkit-scrollbar {
  display: none;
}
.testimonials__track-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.testimonials__track {
  display: flex;
  gap: 1.5rem;
  padding: 2.5rem 0.25rem 0.5rem 0.25rem;
  overflow: visible;            /* só pra garantir nada seja cortado aqui */
}

/* setas do carrossel */

.testimonials__arrow {
  border: none;
  background: rgba(15, 23, 42, 0.85);
  color: #f9fafb;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.testimonials__arrow:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.4);
}

/* ===== CARD ===== */

.testimonial-card {
  position: relative;
  z-index: 1;                    /* cria contexto pro avatar ficar acima */
  background: #ffffff;
  color: #111827;
  border-radius: 1.25rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  padding: 3rem 1.8rem 1.4rem;
  min-width: min(340px, 80vw);
  scroll-snap-align: center;
  overflow: visible;             /* NÃO pode esconder o avatar */
}

/* Avatar flutuando em cima do card */

.testimonial-card__avatar-wrapper {
  position: absolute;
  inset-inline: 0;
  top: -2.4rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;                    /* fica acima do card */
}

.testimonial-card__avatar {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #9333ea);
  border: 3px solid #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* foto, se tiver */
.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* avatar só com iniciais */
.testimonial-card__avatar--initials span:first-child {
  font-weight: 700;
  color: #ffffff;
}

/* ícone Google redondinho no canto inferior do avatar */
.testimonial-card__google-badge {
  position: absolute;
  bottom: -0.10rem;
  right: -0.01rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4285f4;
}

/* conteúdo do card */

.testimonial-card__content {
  text-align: center;
}

.testimonial-card__name {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.testimonial-card__date {
  font-size: 0.78rem;
  color: #6b7280;
}

/* estrelas + verificado */

.testimonial-card__rating {
  margin: 0.5rem 0 0.3rem;
  color: #facc15;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* bolinha azul com check (verificado) */
.testimonial-card__verified {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #ffffff;
}

/* se quiser usar um ✔ de texto */
.testimonial-card__verified::before {
  content: "✔";
}

/* texto + botão */

.testimonial-card__text {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0.4rem 0 0.7rem;
  min-height: 3.6rem;
}

.testimonial-card__more {
  border: none;
  background: none;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 768px) {
  .testimonials {
    padding-inline: 0.5rem;
    padding-top: 3rem;
  }

  .testimonials__carousel {
    gap: 0.25rem;
  }

  .testimonials__arrow {
    display: none; /* em mobile, deixa só o scroll com o dedo */
  }

  .testimonial-card {
    min-width: 85vw;
  }
}

@media (min-width: 1024px) {
  .testimonial-card {
    min-width: 340px;
  }
}




/* ===== CONTAINER GERAL ===== */

.faq {
  background: #f5f7fb;
  padding: 4rem 1rem 4.5rem;
  color: #111827;
}

.faq__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== HEADER ===== */

.faq__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq__icon-arrows {
  color: #c4ff35;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 0.25rem;
}

.faq__header h2 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0 0 0.4rem;
  color: #020617;
}

.faq__header p {
  max-width: 580px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: #6b7280;
}

/* ===== GRID ===== */

.faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
}

@media (max-width: 768px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ITEM ===== */

.faq-item {
  background: #ffffff;
  border-radius: 0.6rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

/* cabeçalho clicável */

.faq-item__header {
  width: 100%;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #111827;
}

.faq-item__header span:first-child {
  text-align: left;
}

/* ícone seta */

.faq-item__icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #e4ff7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.faq-item__icon::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid #1f2937;
  border-bottom: 2px solid #1f2937;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item--open .faq-item__icon::before {
  transform: rotate(-135deg); /* seta virada pra cima */
}

/* corpo (resposta) */

.faq-item__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.1rem;
  transition: max-height 0.25s ease, padding-bottom 0.25s ease;
}

.faq-item--open .faq-item__body {
  padding-bottom: 0.9rem;
  max-height: 200px; /* ajuste se tiver textos maiores */
}

.faq-item__body p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}

/* ===== CTA ===== */

.faq__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.faq__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2.3rem;
  border-radius: 999px;
  border: none;
  background: #d9ff54;
  color: #020617;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(163, 230, 53, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.faq__cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(163, 230, 53, 0.55);
}

.faq__cta-icon {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #020617;
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}








/* ===== SEÇÃO GERAL ===== */

.benefits {
  background: #f3f4f6;         /* cinza suave */
  padding: 4rem 1rem 4.5rem;
  color: #111827;
}

.benefits__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== HEADER ===== */

.benefits__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.benefits__header h2 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0 0 0.4rem;
  color: #020617;
}

.benefits__header p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: #4b5563;
}

/* ===== GRID ===== */

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
}

@media (max-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .benefits__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CARD ===== */

.benefit-card {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.6rem 1.4rem;
  text-align: center;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  opacity: 0;
  transform: translateY(18px);
}

/* animação quando aparece na tela */
.benefit-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* hover */

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border-color: #6366f1;
}

/* ícone */

.benefit-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 1.55rem;
}

/* título e texto */

.benefit-card__title {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

.benefit-card__text {
  margin: 0;
  font-size: 0.88rem;
  color: #4b5563;
  line-height: 1.5;
}





/* ========= SEÇÃO GERAL ========= */

.site-benefits {
  position: relative;
  background: #051838;            /* azul escuro */
  color: #f9fafb;
  padding: 4.5rem 1rem 5rem;
  overflow: hidden;
}

.site-benefits__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

/* ========= HEADER ========= */

.site-benefits__header {
  max-width: 840px;
  margin: 0 auto 3rem;
}

.site-benefits__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 0.35rem;
}

.site-benefits__header h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.3;
}

.site-benefits__header p {
  margin: 0;
  font-size: 0.98rem;
  color: #d1d5db;
}

/* ========= ÍCONE CENTRAL + LINHA VERTICAL ========= */

.site-benefits__icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  margin-bottom: 4.25rem;
}

.site-benefits__icon-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 70px;
  border-left: 2px dashed rgba(168, 85, 247, 0.8);
}

.site-benefits__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: radial-gradient(circle at top, #8b5cf6, #4f46e5);
  border: 4px solid #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

.site-benefits__icon span {
  font-size: 2rem;
}

/* ========= CARDS + LINHA HORIZONTAL ========= */

.site-benefits__cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.5rem;
}

.site-benefits__cards::before {
  /* linha horizontal ligando as bolinhas */
  content: "";
  position: absolute;
  top: -32px;
  left: 5%;
  right: 5%;
  border-top: 2px dashed rgba(168, 85, 247, 0.65);
}

/* ========= CARD ========= */

.site-benefits__card {
  position: relative;
  background: #ffffff;
  color: #111827;
  border-radius: 1.25rem;
  padding: 2.6rem 1.7rem 1.8rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  text-align: left;
  max-width: 280px;
  flex: 1;
  overflow: hidden;
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}

/* bolinha e linha pontilhada de cada card */
.site-benefits__card-dot {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #7c3aed;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(76, 29, 149, 0.6);
}

.site-benefits__card-dot::before {
  content: "";
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 46px;
  border-left: 2px dashed rgba(168, 85, 247, 0.8);
}

/* animação quando aparece */
.site-benefits__card.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* hover */
.site-benefits__card:hover {
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.55);
}

/* texto do card */

.site-benefits__card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.site-benefits__card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.6;
}

/* ========= RESPONSIVO ========= */

@media (max-width: 1024px) {
  .site-benefits__cards {
    gap: 1rem;
  }

  .site-benefits__card {
    padding-inline: 1.3rem;
  }
}

@media (max-width: 768px) {
  .site-benefits {
    padding-inline: 0.75rem;
  }

  .site-benefits__icon-wrapper::after {
    height: 50px;
  }

  .site-benefits__cards {
    flex-direction: column;
    align-items: center;
  }

  .site-benefits__cards::before {
    display: none; /* no mobile não precisa da linha horizontal */
  }

  .site-benefits__card {
    max-width: 100%;
  }

  .site-benefits__card-dot::before {
    display: none; /* simplifica no mobile */
  }
}



/* ============================
   HERO COMMERCE
============================ */
/* =================================================
   TOP BG – VERSÃO COMMERCE (AZUL)
================================================= */
.top-bg--commerce {
  background:
    radial-gradient(circle at 15% 20%, rgba(110,160,255,.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(80,120,255,.25), transparent 45%),
    linear-gradient(180deg, #0b1a4a 0%, #020827 100%);
  color: #fff;
}

/* Mantém header transparente no topo */
.top-bg--commerce .site-header {
  background: transparent;
}

/* =================================================
   HERO COMMERCE
================================================= */
.hero-commerce {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
}

.hero-commerce__container {
  width: min(1180px, 92vw);
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

/* TEXTO */
.hero-commerce__badge {
  display: inline-block;
  padding: .45rem 1rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .12em;
  margin-bottom: 1.3rem;
  opacity: .9;
}

.hero-commerce__title {
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  font-weight: 900;
  margin: 0 0 1.6rem;
}

.hero-commerce__description {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  opacity: .9;
}

.hero-commerce__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.hero-commerce__note {
  display: block;
  margin-top: 1rem;
  font-size: .8rem;
  opacity: .75;
}

/* VISUAL */
.hero-commerce__visual {
  display: flex;
  justify-content: center;
}

.hero-commerce__mockup {
  background: #fff;
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 35px 80px rgba(0,0,0,.55);
}

.hero-commerce__mockup img {
  width: 100%;
  max-width: 430px;
  border-radius: 18px;
}

/* Linhas decorativas (iguais ao print) */
.hero-commerce__line {
  position: absolute;
  border: 2px solid #6dff6d;
  opacity: .7;
}

.hero-commerce__line--1 {
  width: 220px;
  height: 160px;
  right: 6%;
  top: 24%;
  transform: rotate(12deg);
}

.hero-commerce__line--2 {
  width: 180px;
  height: 120px;
  right: 14%;
  bottom: 18%;
  transform: rotate(-18deg);
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .hero-commerce__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-commerce__description {
    margin-inline: auto;
  }

  .hero-commerce__actions {
    justify-content: center;
  }
}