/* ==========================================================================
   6 Instalação de Wallbox  — landing page. Estilos próprios da página.
   Usa as variáveis de marca já definidas em /assets/css/style.css (carregado
   antes deste arquivo pelo header.php) em vez de redefini-las. Os seletores
   genéricos (h2 centralizado, p, img, a, section) ficam escopados dentro de
   .wallbox-landing pra não vazar pro header.php/footer.php padrão do site.
   ========================================================================== */


:root{
  /* Essa página usa cantos mais arredondados e um container um pouco mais
     largo que o padrão do site — sobrescreve só isso; o resto (cores, fontes)
     vem do CSS comum. */
  --radius:10px;
  --container:1180px;
  --btn-radius:9px;
}

html{ scroll-padding-top:var(--topbar-h); }

.wallbox-landing .wrap{max-width:var(--container);margin:0 auto;padding:0 1.25em}
.wallbox-landing section{padding:3.5em 0}
.wallbox-landing h2{font-size:clamp(1.5rem,3.2vw,2rem);text-align:center}
.wallbox-landing p{margin:0 0 1em;color:var(--ink-soft)}
.wallbox-landing img{max-width:100%;display:block}
.wallbox-landing a{color:inherit}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* seções vizinhas com o mesmo fundo claro (galeria -> cards) ficam mais próximas, sem vão parecendo vazio */
#instalacoes{padding-top:1em;padding-bottom:1.6em}
#instalacoes .wrap{border-top:1px solid var(--line);padding-top:1.8em}
#incluso{padding-top:1.2em}
#incluso .wrap{border-top:1px solid var(--line);padding-top:1.8em}

/* ---------- Botões (a página usa um estilo de CTA maior/com sombra, diferente do .btn padrão do site) ---------- */
.wallbox-landing .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--brand);color:var(--brand-ink-on-brand);font-weight:700;
  padding:.95em 1.8em;border-radius:var(--btn-radius);border:none;cursor:pointer;
  font-family:var(--font-body);font-size:1rem;text-decoration:none;
  box-shadow:0 8px 20px rgba(255,153,0,.3);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wallbox-landing .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,153,0,.4);background:var(--brand-dark);color:#fff}
.wallbox-landing .btn-wpp{background:#25D366;color:#0d3a22;box-shadow:0 8px 20px rgba(37,211,102,.32)}
.wallbox-landing .btn-wpp:hover{background:#1ebe5d;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,.4)}
.wallbox-landing .btn svg{width:1.1em;height:1.1em}

/* ---------- Dupla de CTAs (WhatsApp + Formulário) lado a lado, largura total ---------- */
.cta-duo{padding:.8em 0}
.cta-duo-row{display:flex;gap:1em}
.cta-duo-row .btn{flex:1 1 0;width:auto}
@media (max-width:560px){
  .cta-duo-row{flex-direction:column}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;padding:3.2em 0 2.6em;
  background:radial-gradient(circle at 15% 20%, #232733 0%, var(--surface-dark) 55%);
  color:var(--on-dark);
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,153,0,.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,153,0,.10) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 20% 10%, black, transparent 70%);
}
.hero-inner{position:relative;max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
@media (min-width:900px){
  .hero{padding:2.8em 0 2.2em}
  .hero p.lead{font-size:1.2rem;max-width:52ch}
}
.eyebrow{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.9em;display:flex;align-items:center;gap:.5em;justify-content:center}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(255,153,0,.25);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 4px rgba(255,153,0,.25)}50%{box-shadow:0 0 0 8px rgba(255,153,0,.08)}}
.hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.4em}
.hero h1 span{color:var(--brand)}
.hero p.lead{color:var(--on-dark-soft);font-size:1.1rem;max-width:46ch;margin-left:auto;margin-right:auto;margin-bottom:0}

/* ---------- Stats: chips estilo disjuntor deitado ---------- */
.stats{background:var(--surface-soft);padding:1.7em 0 .9em}
.stats-grid{display:flex;flex-wrap:wrap;gap:.8em}
.stat{
  flex:1 1 calc((100% - 3*.8rem) / 4);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:flex-start;gap:.6em;
  background:#20242C;border:1px solid rgba(255,255,255,.08);border-radius:7px;
  padding:.6em .95em;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
}
@media (max-width:900px){ .stat{flex-basis:calc((100% - .8rem) / 2)} }
@media (max-width:560px){ .stat{flex-basis:100%} }
.stat:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 22px rgba(0,0,0,.18)}
.stat .toggle{
  position:relative;flex-shrink:0;width:11px;height:30px;border-radius:3px;
  background:#14171C;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 1px 2px rgba(0,0,0,.5);
}
.stat .toggle::after{
  content:"";position:absolute;top:3px;left:1px;right:1px;height:11px;border-radius:2px;
  background:linear-gradient(180deg,#FFB03D,var(--brand-dark));
  background-image:linear-gradient(180deg,#FFB03D,var(--brand-dark)),
    repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px);
  opacity:.35;
  transition:top .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.stat:hover .toggle::after{
  top:16px;opacity:1;box-shadow:0 0 6px rgba(255,153,0,.6);
}
.stat-led{
  position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;
  background:#2ecc71;box-shadow:0 0 5px rgba(46,204,113,.7);
  transition:background .25s ease, box-shadow .25s ease;
}
.stat:hover .stat-led{background:#e74c3c;box-shadow:0 0 6px rgba(231,76,60,.8)}
.stat-text{display:flex;flex-direction:column;line-height:1.15}
.stat strong{font-family:var(--font-mono);font-size:1.25rem;color:#fff;font-weight:700}
.stat span{font-family:var(--font-mono);font-size:.66rem;color:var(--on-dark-soft);text-transform:uppercase;letter-spacing:.05em}

/* ---------- Cards de serviço ---------- */
.cards-grid{display:flex;flex-wrap:wrap;gap:1.3em;margin-top:1.6em}
.cards-grid .card{
  flex:1 1 calc((100% - 3*1.3em) / 4);
  min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8em 1.5em;box-sizing:border-box;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.cards-grid .card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.08);border-color:var(--brand)}
@media (max-width:1100px){ .cards-grid .card{flex:1 1 calc((100% - 2*1.3em) / 3)} }
@media (max-width:850px){ .cards-grid .card{flex:1 1 calc((100% - 1.3em) / 2)} }
@media (max-width:560px){ .cards-grid .card{flex:1 1 100%} }
.cards-grid .card .icon-circle{width:52px;height:52px;border-radius:50%;background:rgba(255,153,0,.13);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.8em}
.cards-grid .card h3{font-size:1.05rem;margin-bottom:.4em}
.cards-grid .card p{font-size:.92rem;margin:0}

/* ---------- Simulador de preço ---------- */
.price-section{background:var(--surface-dark);color:var(--on-dark)}
.price-section h2{color:#fff;margin-bottom:1.1em}
.price-card{
  max-width:var(--container);margin:0 auto;background:#22252E;border:1px solid #33363F;
  border-radius:16px;padding:2.4em;
}
.wallbox-landing .price-card .price-intro,
.wallbox-landing p.price-intro,
.price-intro{
  text-align:left;font-size:1.05rem;color:#FFFFFF !important;line-height:1.6;font-weight:400;
  padding-bottom:1.2em;margin-bottom:1.5em;border-bottom:1px solid #383D4A;
}
.wallbox-landing .price-card p{color:#FFFFFF}
.price-card label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:.6em;color:#FFFFFF}
.price-card label strong{color:var(--brand);font-family:var(--font-mono)}
.price-value{
  font-family:var(--font-mono);font-size:3rem;font-weight:700;color:var(--brand);
  display:block;text-align:center;margin:.9em 0 .3em;
}
.price-action{
  display:flex;justify-content:center;margin-top:1.3em;
}
.price-action .btn{
  width:auto;min-width:280px;max-width:100%;font-size:1.02rem;
  white-space:nowrap;
}
@media (max-width:480px){
  .price-action .btn{
    width:100%;min-width:0;font-size:.95rem;padding:.85em 1.2em;
    white-space:normal;text-align:center;
  }
}

/* ---------- Slider com cara de régua ---------- */
.price-card input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:46px;
  background:transparent;cursor:pointer;margin:0;display:block;
  touch-action:pan-y;
}
.price-card input[type="range"]::-webkit-slider-runnable-track{
  height:12px;border-radius:6px;background:#151820;
  border:1px solid rgba(255,153,0,.45);
  box-shadow:0 2px 5px rgba(0,0,0,.6) inset;
}
.price-card input[type="range"]::-moz-range-track{
  height:12px;border-radius:6px;background:#151820;
  border:1px solid rgba(255,153,0,.45);
  box-shadow:0 2px 5px rgba(0,0,0,.6) inset;
}
.price-card input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:32px;height:44px;margin-top:-16px;
  border-radius:8px;
  background:linear-gradient(180deg, #2D3340 0%, #171A22 100%);
  border:2px solid #2FE070;
  box-shadow:0 0 14px rgba(47,224,112,.5), 0 4px 12px rgba(0,0,0,.7);
  cursor:grab;position:relative;
  background-image:repeating-linear-gradient(90deg, #2FE070 0 2px, transparent 2px 5px);
  background-size:14px 16px;background-position:center center;background-repeat:no-repeat;
  transition:transform .1s ease, box-shadow .1s ease;
}
.price-card input[type="range"]::-moz-range-thumb{
  width:32px;height:44px;border-radius:8px;
  background:linear-gradient(180deg, #2D3340 0%, #171A22 100%);
  border:2px solid #2FE070;
  box-shadow:0 0 14px rgba(47,224,112,.5), 0 4px 12px rgba(0,0,0,.7);
  cursor:grab;
  background-image:repeating-linear-gradient(90deg, #2FE070 0 2px, transparent 2px 5px);
  background-size:14px 16px;background-position:center center;background-repeat:no-repeat;
  transition:transform .1s ease, box-shadow .1s ease;
}
.price-card input[type="range"]:active::-webkit-slider-thumb{
  cursor:grabbing;transform:scale(1.08);
  box-shadow:0 0 20px rgba(47,224,112,.8), 0 6px 16px rgba(0,0,0,.85);
}
.price-card input[type="range"]:active::-moz-range-thumb{
  cursor:grabbing;transform:scale(1.08);
  box-shadow:0 0 20px rgba(47,224,112,.8), 0 6px 16px rgba(0,0,0,.85);
}

/* ---------- Setinha indicadora superior (alinhada ao centro do seletor) ---------- */
.ruler-wrap{position:relative;padding-top:14px}
.ruler-arrow{
  position:absolute;left:calc(16px + (1/37)*(100% - 32px));top:0px;
  width:0;height:0;pointer-events:none;z-index:2;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:11px solid #2FE070;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  animation:arrow-blink 1.1s ease-in-out infinite;
  transition:left .04s linear;
}
.price-card input[type="range"]:active ~ .ruler-arrow{
  transform:translateX(-50%) scale(1.15);animation:none;
}
@keyframes arrow-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
.ruler-ticks{
  position:relative;height:32px;margin-top:.45em;padding:0;
}
.ruler-ticks .tick{
  position:absolute;left:calc(16px + var(--pos) * (100% - 32px));
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.ruler-ticks .tick-mark{
  width:1px;background:rgba(255,198,112,.45);margin-bottom:3px;
}
.ruler-ticks .tick-minor .tick-mark{
  height:4px;background:rgba(255,255,255,.35);
}
.ruler-ticks .tick-major .tick-mark{
  height:8px;width:1.5px;background:#FFC670;
}
.ruler-ticks .tick-lbl{
  font-family:var(--font-mono);font-size:.74rem;color:#E6EAF2;line-height:1;font-weight:600;
}
.wallbox-landing .price-card .ruler-hint,
.wallbox-landing p.ruler-hint,
.ruler-hint{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-size:.92rem;color:#FFFFFF !important;font-weight:700;
  margin:1.1em auto 0;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:.45em 1.2em;border-radius:24px;
  width:fit-content;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.wallbox-landing .ruler-hint-arrow,
.ruler-hint-arrow{
  color:#2FE070 !important;font-size:1.15rem;font-weight:800;line-height:1;
}
.price-terms{
  max-width:var(--container);margin:1em auto 0;background:rgba(255,153,0,.05);
  border:1px solid #33363F;border-radius:16px;padding:1.5em 2.2em;
}
.price-terms ul{list-style:none;margin:0;padding:0;display:grid;gap:.85em}
.price-terms li{display:flex;align-items:flex-start;gap:.7em;color:#DCE2ED;font-size:.92rem;line-height:1.55}
.price-terms li .ic{flex-shrink:0;width:22px;height:22px;margin-top:.1em;border-radius:50%;background:rgba(255,153,0,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:.72rem}

/* ---------- Galeria: carrossel em uma linha ---------- */
.carousel{position:relative;margin-top:2em}
.carousel-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius);
}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-track{display:flex;gap:.8em}
.gallery-item{
  position:relative;border-radius:var(--radius);overflow:hidden;
  flex:0 0 220px;aspect-ratio:1/1;scroll-snap-align:start;cursor:zoom-in;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:.7em .8em .6em;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:#fff;font-size:.76rem;font-weight:600;opacity:0;transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.gallery-item:hover .cap{opacity:1;transform:none}
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
#galPrev{left:.5em}
#galNext{right:.5em}
.car-arrow:hover{border-color:var(--brand);color:var(--brand-dark);transform:translateY(-50%) scale(1.08)}
@media (max-width:560px){ .gallery-item{flex-basis:150px} .car-arrow{width:36px;height:36px;font-size:1rem} }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(10,10,15,.94);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:2.5em 1.5em;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox-close{
  position:absolute;top:1.2em;right:1.2em;background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.3);width:44px;height:44px;border-radius:50%;
  font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.3);width:48px;height:48px;border-radius:50%;
  font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-prev{left:1em}
.lightbox-next{right:1em}
@media (max-width:680px){
  .lightbox-nav{width:40px;height:40px;font-size:1.4rem}
  .lightbox-prev{left:.4em} .lightbox-next{right:.4em}
}

/* ---------- FAQ ---------- */
.faq{max-width:var(--container);margin:2.2em auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item button{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.2em 0;display:flex;justify-content:space-between;align-items:center;gap:1em;
  font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--ink);
}
.faq-item button::after{content:"+";font-size:1.4rem;color:var(--brand-dark);transition:transform .2s ease;flex-shrink:0}
.faq-item.open button::after{transform:rotate(45deg)}
.faq-item .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .a{max-height:200px}
.faq-item .a p{padding-bottom:1.2em;margin:0}

/* ---------- CTA final ---------- */
.final-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1A1D23,#2A1400);color:#fff;text-align:center;
}
.final-cta::before{
  content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,153,0,.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,153,0,.10) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 75%);
}
.final-cta .wrap{position:relative;max-width:var(--container)}
.final-cta h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem)}
.final-cta p{color:var(--on-dark-soft);font-size:1.05rem;margin:0 auto 1.8em}
.final-cta .final-note{
  font-size:.88rem;color:var(--on-dark-soft);opacity:.75;
  margin:1.4em auto 0;padding-top:1.2em;border-top:1px solid rgba(255,255,255,.12);
}

/* ---------- Cards compactos de ferramentas (antes do FAQ) ---------- */
.tools-compact-section{
  padding:3em 0 2.2em;
  background:var(--surface-soft);
  border-top:1px solid var(--line);
}
.tools-compact-section h2{
  margin-bottom:.3em;
}
.tools-compact-section .section-sub{
  text-align:center;
  max-width:680px;
  margin:0 auto 2em;
  font-size:.98rem;
  color:var(--ink-soft);
}
.tools-compact-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.9em;
  width:100%;
}
.tool-compact-card{
  flex:1 1 calc((100% - 1.8em) / 3);
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.2em 1em;
  text-decoration:none;
  color:var(--ink);
  box-sizing:border-box;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-compact-card:hover{
  transform:translateY(-3px);
  border-color:var(--brand);
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}
.tool-compact-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.7em;
}
.tool-compact-icon{
  font-size:1.5rem;
  width:42px;
  height:42px;
  border-radius:8px;
  background:rgba(255,153,0,.13);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  flex-shrink:0;
}
.tool-compact-arrow{
  font-size:1.1rem;
  color:var(--brand-dark);
  font-weight:700;
  transition:transform .15s ease, color .15s ease;
}
.tool-compact-card:hover .tool-compact-arrow{
  transform:translateX(4px);
  color:var(--brand);
}
.tool-compact-body{
  text-align:left;
}
.tool-compact-body h3{
  font-family:var(--font-display);
  font-size:.95rem;
  margin:0 0 .35em;
  color:var(--ink);
  font-weight:700;
  text-align:left;
}
.tool-compact-body p{
  font-size:.84rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.45;
  text-align:left;
}
@media (max-width:850px){
  .tools-compact-grid{
    gap:.8em;
  }
  .tools-compact-grid .tool-compact-card{
    flex:1 1 calc((100% - .9em) / 2);
    min-width:0;
    padding:1.1em 1em;
  }
}
@media (max-width:560px){
  .tools-compact-grid .tool-compact-card{
    flex:1 1 100%;
  }
}

/* ---------- Navegação rápida (antes do rodapé padrão do site) ---------- */
.landing-quicknav{padding:0 0 2.5em;}
.landing-quicknav .service-nav{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:.5em;
  margin:0;
  width:100%;
}
.landing-quicknav .service-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:6px;
  padding:.75em .4em;
  font-size:.83rem;
  box-sizing:border-box;
  min-width:0;
}
@media (max-width:900px){
  .landing-quicknav .service-nav{
    grid-template-columns:1fr 1fr;
    gap:.6em;
  }
  .landing-quicknav .service-nav a{
    font-size:.88rem;
    padding:.85em .6em;
  }
  .landing-quicknav .service-nav a:last-child{
    grid-column:1 / -1;
  }
}
@media (max-width:500px){
  .landing-quicknav .service-nav{
    grid-template-columns:1fr;
    gap:.5em;
  }
  .landing-quicknav .service-nav a:last-child{
    grid-column:auto;
  }
}

/* ---------- Barra flutuante mobile ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--surface);border-top:1px solid var(--line);
  padding:.7em 1em;display:none;
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
}
.mobile-cta .btn{width:100%}
@media (max-width:680px){
  .mobile-cta{display:block}
  body{padding-bottom:70px}
  .wallbox-landing section{padding:2.4em 0}
}

/* Acessibilidade: anel de foco visível para navegação por teclado */
.wallbox-landing button:focus-visible,
.wallbox-landing a:focus-visible,
.wallbox-landing input:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
}
#faq .wrap {
  border-top: 1px solid var(--line);
  padding-top: 2.5em;
}

/* ==========================================================================
   Ajustes Responsivos de Grids (Cards de O Que Está Incluso, Simuladores e Atalhos)
   ========================================================================== */

/* 1. O que está incluso (8 cards): 4 no desktop -> 3x3x2 no médio -> 2 por linha no tablet -> 1 por linha no mobile */
.cards-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.3em !important;
}
.cards-grid .card {
  flex: 1 1 calc((100% - 3*1.3em) / 4) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 1100px) {
  .cards-grid .card {
    flex: 1 1 calc((100% - 2*1.3em) / 3) !important;
  }
}
@media (max-width: 850px) {
  .cards-grid .card {
    flex: 1 1 calc((100% - 1.3em) / 2) !important;
  }
}
@media (max-width: 560px) {
  .cards-grid .card {
    flex: 1 1 100% !important;
  }
}

/* 2. Simuladores e Ferramentas (5 cards): 3 no topo + 2 embaixo no desktop -> 2+2+1 no tablet -> 1 por linha no mobile */
.tools-compact-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .9em !important;
  width: 100% !important;
}
.tools-compact-grid .tool-compact-card {
  flex: 1 1 calc((100% - 1.8em) / 3) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 850px) {
  .tools-compact-grid .tool-compact-card {
    flex: 1 1 calc((100% - .9em) / 2) !important;
  }
}
@media (max-width: 560px) {
  .tools-compact-grid .tool-compact-card {
    flex: 1 1 100% !important;
  }
}

/* 3. Botões de atalho antes do rodapé (5 botões): 5 no desktop -> 2+2+1 no tablet -> 1 por linha no mobile */
.landing-quicknav .service-nav {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: .5em !important;
  width: 100% !important;
  margin: 0 !important;
}
.landing-quicknav .service-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 6px !important;
  padding: .75em .4em !important;
  font-size: .83rem !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
}
@media (max-width: 900px) {
  .landing-quicknav .service-nav {
    grid-template-columns: 1fr 1fr !important;
    gap: .6em !important;
  }
  .landing-quicknav .service-nav a {
    font-size: .88rem !important;
    padding: .85em .6em !important;
  }
  .landing-quicknav .service-nav a:last-child {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 500px) {
  .landing-quicknav .service-nav {
    grid-template-columns: 1fr !important;
    gap: .5em !important;
  }
  .landing-quicknav .service-nav a:last-child {
    grid-column: auto !important;
  }
}