@charset "UTF-8";

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Thin.woff2') format('woff2'),
       url('../fonts/Inter-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 767.98px) {
  .hero-grid {
    padding-bottom: 48px;
  }
}


/* No mobile, ao abrir o menu, manter o botão visível no topo direito */
@media (max-width: 1023.98px){
  .header.menu-open .menu-toggle{
    position: fixed;
    top: 12px;
    right: 16px;
  }
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Light.woff2') format('woff2'),
       url('../fonts/Inter-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2'),
       url('../fonts/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
       url('../fonts/Inter-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2'),
       url('../fonts/Inter-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Lato (normal e itálico)
   ========================= */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Light.woff2') format('woff2'),
       url('../fonts/Lato-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.woff2') format('woff2'),
       url('../fonts/Lato-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.woff2') format('woff2'),
       url('../fonts/Lato-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-LightItalic.woff2') format('woff2'),
       url('../fonts/Lato-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Italic.woff2') format('woff2'),
       url('../fonts/Lato-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BoldItalic.woff2') format('woff2'),
       url('../fonts/Lato-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Lexend Deca */
@font-face {
  font-family: 'Lexend Deca';
  src: url('../fonts/LexendDeca-Light.woff2') format('woff2'),
       url('../fonts/LexendDeca-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend Deca';
  src: url('../fonts/LexendDeca-Medium.woff2') format('woff2'),
       url('../fonts/LexendDeca-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Base */
:root{
  --bg-dark-1:#0f172a;
  --bg-dark-2:#1f2937;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1f2937;
  --slate-900:#0f172a;
  --white:#ffffff;
  --muted:#6b7280;
  --accent:#768AAB;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: "Inter", system-ui, Arial, sans-serif; color:#111827; background:#ffffff;}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.center{text-align:center}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;transition:.25s all}
.btn.primary{background:#fff;color:#0f172a;border:1px solid #e5e7eb}
.btn.primary:hover{background:#f3f4f6}
.btn.outline{background:transparent;border:2px solid #fff;color:#fff !important}
.btn.outline:hover{background:rgba(255,255,255,.08);color:#fff !important}

/* Header */
.header{position:relative;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);z-index:4000}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-balls{position:relative;width:40px;height:40px}
.logo-balls .b1,.logo-balls .b2,.logo-balls .b3{position:absolute;border-radius:50%}
.logo-balls .b1{inset:0;background:linear-gradient(135deg,#fb923c,#ec4899,#8b5cf6);opacity:.8}
.logo-balls .b2{inset:4px;background:linear-gradient(135deg,#34d399,#60a5fa,#8b5cf6);opacity:.6}
.logo-balls .b3{inset:8px;background:linear-gradient(135deg,#f59e0b,#f97316,#ef4444);opacity:.4}
.nav{display:flex;align-items:center;gap:32px}
.header .nav a{color:#000;text-decoration:none;font-weight:600}
.header .nav{display:flex;gap:24px;align-items:center;position:relative;z-index:1200}
.nav-dropdown{position:relative}
.nav-dropdown > .nav-link{display:inline-block;padding:8px 0}
.dropdown-menu{display:none;position:absolute;top:100%;left:auto;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.12);padding:8px 0;min-width:220px;max-width:280px;z-index:2000;overflow-wrap:anywhere}
.dropdown-menu a{display:block;padding:10px 14px;color:#111827;text-decoration:none;white-space:normal;word-break:break-word}
.dropdown-menu a:hover{background:#f3f4f6}
.nav-dropdown:hover .dropdown-menu{display:block}
.nav a:hover{color:#111827}

/* Hero */
.hero{position:relative;overflow:hidden;background-image:url("../icons/FUNDO HERO.webp");background-size:cover;background-position:center;min-height:90vh;display:flex;align-items:center}
/* Remover elementos decorativos (círculos) da hero para deixar apenas a imagem de fundo */
.hero .bg-decor{display:none}
body:not(.service-page) .hero h1{color:#fff;font-weight:800;line-height:1.1;margin:0 0 18px;font-size:44px;opacity:0;transform:translateY(20px);animation:fadeUp .7s ease-out .15s forwards}
body:not(.service-page) .hero p{color:rgba(255,255,255,.9);font-size:18px;line-height:1.7;max-width:720px;margin:0 0 24px;opacity:0;transform:translateY(20px);animation:fadeUp .7s ease-out .35s forwards}
body:not(.service-page) .hero .btn{opacity:0;transform:translateY(20px);animation:fadeUp .7s ease-out .55s forwards}
/* Exibir o círculo grande de conteúdo na hero */
.hero .circle{width:360px;height:360px;border-radius:50%;background:#fff;box-shadow:0 25px 50px rgba(0,0,0,.3)}
.hero-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1fr; justify-items: center;}
  .hero h1{font-size:45px;}
  .hero-grid > div{ max-width: 860px; width: 100%; }
}

/* Animações */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Services */
.services{position:relative;overflow:hidden;background-image:url("../icons/FUNDO SERVIÇOS.webp");background-size:contain;background-position:center}
.services .pattern{position:absolute;inset:0;opacity:.08}
.services .title{color:#fff;font-size:32px;font-weight:800;margin:0 0 28px}
.cards{display:grid;gap:24px}
@media (min-width:768px){.cards{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}}
.card {
  background:#fff;
  border-radius:16px;
  padding:15px;
  border:4px solid #e5e7eb;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
  height:100%;
  width:362px;
  box-sizing:border-box;
}



.cards .card {
  position: relative; /* garante que não ficam absolutos */
  z-index: 1;         /* base */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  pointer-events: auto; /* garante clique/hover */
}

.cards .card:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.18);
  z-index: 10;
}


/* Cards da seção Services */
/* Cards da seção Services */
.services .cards .card {
  background: #fff;
  border-radius: 16px;
  padding: 15px;
  border: 4px solid #e5e7eb;
  box-shadow: 0 15px 35px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 362px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover: sobe e aumenta o card */
.services .cards .card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0,0,0,.18);
  z-index: 10;
}

/* Para não quebrar a animação de reveal */
.services .cards .card.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* Mantém a transição suave mesmo com hover após reveal */
.services .cards .card.reveal.in-view:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0,0,0,.18);
  z-index: 10;
}




.card .icon-wrap{border-radius:12px;margin:-30px -8px -32px -8px;position:relative;overflow:hidden;width:calc(100% + 16px)}
.card .icon-wrap::after{content:"";position:absolute;inset:0;opacity:.2;background:linear-gradient(135deg,transparent,rgba(255,255,255,.25),transparent);transform:rotate(35deg)}
.card .icon-wrap img{display:block;margin:0 auto;transform:scale(.80);transform-origin:center}
.card h3{font-size:20px;margin:0 0 8px;text-align:center;color:#1f2937;white-space:nowrap;padding:0 8px}
.card p{font-size:17px;line-height:1.6;color:#4b5563;text-align:center; display: flex; align-items: center; justify-content: center;}
.card .btn-area{display:flex;justify-content:center;padding-top:16px;margin-top:auto}
.card .btn-area .btn{width:auto;color:#fff;padding:8px 16px;min-width:120px;text-align:center}
/* Ajustes apenas para os cards da seção Serviços (reduzir caixa da imagem e altura do card, mantendo o tamanho da imagem) */
.services .card{padding:12px}
.services .card .icon-wrap{
  margin:-12px -8px 0 -8px;
  height:150px; /* aumentar mais um pouco a imagem */
  display:flex;align-items:center;justify-content:center;
}
.services .card .icon-wrap img{
  transform:scale(1.08); /* aumenta só a imagem dentro da caixa */
  max-height:100%;
  width:auto;
}
.services .card p{min-height:100px}
/* Scroll reveal (Home - Especialidades) */
body:not(.service-page) .cards .card.reveal{opacity:0;transform:translateY(22px)}
body:not(.service-page) .cards .card.reveal.in-view{opacity:1;transform:translateY(0);transition:opacity .6s ease-out, transform .6s ease-out}
/* service colors */
.s-purple{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.s-red{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.s-amber{background:linear-gradient(135deg,#d97706,#92400e)}
.s-teal{background:linear-gradient(135deg,#0f766e,#115e59)}
.s-slate{background:linear-gradient(135deg,#334155,#1f2937)}
.s-gray{background:linear-gradient(135deg,#374151,#111827)}
.s-b1{border-color:#A97CAE}
.s-b1 h3{color:#A97CAE}
.s-b2{border-color:#E96C7C}
.s-b2 h3{color:#E96C7C}
.s-b3{border-color:#F9C26C}
.s-b3 h3{color:#F9C26C}
.s-b4{border-color:#6CBFB2}
.s-b4 h3{color:#6CBFB2}
.s-b5{border-color:#53668A}
.s-b5 h3{color:#53668A}
.s-b6{border-color:#1A202B}
.s-b6 h3{color:#1A202B}
.s-btn-1{background:#A97CAE; border-color: #A97CAE}
.s-btn-2{background:#E96C7C; border-color: #E96C7C}
.s-btn-3{background:#F9C26C; border-color: #F9C26C}
.s-btn-4{background:#6CBFB2; border-color: #6CBFB2}
.s-btn-5{background:#53668A; border-color: #53668A}
.s-btn-6{background:#1A202B; border-color: #1A202B}

/* Call to Action */
.cta{background:#768AAB;color:#fff}
.cta h2{font-size:32px;margin:0 0 18px}

/* Why Choose */
.why{background-image:url("../icons/FUNDO DIFERENCIAIS.webp");background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#95B1CC}

.reasons {
  display: grid;
  gap: 24px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
}
@media (min-width:768px) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width:1024px) {
  .reasons {
    grid-template-columns: repeat(4, 1fr);
  }
}
.reason {
  background: #334155;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #fff;
  transition: .2s background;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reason:hover { background: #475569; }
.reason h3 {
  font-size: 20px;
  margin: 12px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.reason p {
  color: #cbd5e1;
  font-size: 17px;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.reason img {
  margin: -25px auto 4px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}

/* Why Choose (Por que escolher) - animação de cartas saindo de trás da primeira */
.why .reasons{position:relative}
.why .reason{position:relative; transition: transform .25s ease, box-shadow .25s ease}
.why .reason.reveal-stack{opacity:0;transform:none}
.why .reason.reveal-stack.in-view{opacity:1;transform:none;transition:opacity .9s ease, left .9s ease, top .9s ease}
.why .reasons .reason.reveal-stack:not(:first-child){margin-left:-12px}
.why .reasons .reason.reveal-stack.in-view{margin-left:0}
/* Hover: levantar levemente os cards */
.why .reason:hover{transform: translateY(-6px); box-shadow: 0 14px 24px rgba(0,0,0,.12)}

/* Products */
.products{background:linear-gradient(135deg,#64748b,#475569,#334155);color:#fff}
.products h2{font-style:italic;font-weight:300;margin:0 0 12px}
.products p{color:rgba(255,255,255,.9)}
.product-grid{margin-top:48px;display:grid;gap:24px}
@media (min-width:768px){.product-grid{grid-template-columns:repeat(3,1fr)}}
.product-card{text-align:center}
.product-card .logo{width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px}
.product-card .desc{background:#fff;color:#374151;border-radius:10px;padding:18px;height:190px}

/* What Moves Us */
.moves{
  background-image: url("../icons/ícones site-19.png"), url("../icons/FUNDO O QUE NOS MOVE.webp");
  background-size: 180px auto, cover; /* ícone central ~180px; fundo cobre */
  background-position: center 40px, center; /* ícone central, um pouco abaixo do topo; fundo centralizado */
  background-repeat: no-repeat, no-repeat;
  position:relative;overflow:hidden;font-family:'Lato', sans-serif;
}
/* Ajuste do ícone central para mobile: sobe um pouco e reduz levemente o tamanho */
@media (max-width: 767.98px){
  .moves{
    background-position: center 0px, center;
    background-size: 160px auto, cover;
  }
}
.moves .grid{display:grid;gap:32px}
@media (min-width:1024px){.moves .grid{grid-template-columns:1.5fr 1fr;align-items:start}}
.moves h2{font-size:36px;font-weight:700;color:#6b7280;font-style:italic;margin:0 0 24px}
.moves .card{background:#E3E7EA;border-radius:12px;padding:10px;position:relative;margin-bottom:10px}
.moves .card{padding-bottom:0 !important}
/* Reduzir ainda mais apenas a altura dos cards: menos padding vertical */
.moves .card{padding:0 10px}
.moves .card:last-child{margin-bottom:0}
.moves .text p{margin:0 0 16px 0;line-height:1.6;font-family:'Lato', sans-serif;font-size:20px;}
.moves .text p:last-child{margin-bottom:0}
.moves .card h3,
.moves .card p {
  font-family: 'Lato', sans-serif;
}
.moves .card h3{color:#374151;font-weight:700;margin:0 0 2px; text-align: left; padding-top: 10px; padding-left: 0; padding-right: 0}
.moves .card p{font-size:17px;color:#374151;line-height:1.6; text-align: left; justify-content: flex-start}

/* Estilos para os cards com ícones */
.purpose-card,
.mission-card,
.vision-card,
.values-card {
  position: relative;
  overflow: visible;
  margin-top: 40px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 640px; /* Revertido: não reduzir largura, apenas altura */
  margin-left: auto;
  margin-right: auto;
}

/* Ajustes específicos para o card de Valores */
.values-card {
  height: 130px; /* Ajuste solicitado: apenas o card de Valores */
}
.values-card h3 {
  margin-bottom: 14px; /* aumenta mais o espaço entre título e texto no card de Valores */
}
.values-card p {
  /* Aplicar apenas ao parágrafo do card de Valores */
  font-size: 17px;
  line-height: 1.6;
  color: #4b5563;
  text-align: left;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px !important;
}

.purpose-card:first-child,
.mission-card:first-child,
.vision-card:first-child,
.values-card:first-child {
  margin-top: 0;
}

.purpose-icon,
.mission-icon,
.vision-icon,
.values-icon {
  position: absolute;
  top: -50px;
  right: -8px;
  width: 100px; /* Revertido */
  height: 85px; /* Revertido */
  object-fit: contain;
  z-index: 1;
}

.purpose-card h3,
.mission-card h3,
.vision-card h3,
.values-card h3{
  font-size: 20px; /* Revertido */
  margin: 0 0 8px;
}
.moves .card p{font-size:17px;line-height:1.6;margin-top:4px} /* Mantém os demais cards */

/* Animação de surgimento direita->esquerda dos cards (O que nos move) */
.moves .card.reveal-x{opacity:0;transform:translateX(26px)}
.moves .card.reveal-x.in-view{opacity:1;transform:translateX(0);transition:opacity .95s ease-out, transform .95s ease-out}

/* Efeito de digitação no título da seção (O que nos move) */
.moves h2 .caret{display:inline-block;width:1ch;border-right:2px solid #6b7280;animation:caretBlink 0.9s step-end infinite;vertical-align:bottom}
@keyframes caretBlink{50%{border-color:transparent}}

/* Reveal suave para o parágrafo introdutório da seção */
.moves .text p.reveal{opacity:0;transform:translateY(16px)}
.moves .text p.reveal.in-view{opacity:1;transform:translateY(0);transition:opacity .6s ease-out, transform .6s ease-out}

/* Reveal da esquerda para a direita (título e texto juntos) */
.moves h2.reveal-left,.moves .text p.reveal-left{opacity:0;transform:translateX(-26px)}
.moves h2.reveal-left.in-view,.moves .text p.reveal-left.in-view{opacity:1;transform:translateX(0);transition:opacity .95s ease-out, transform .95s ease-out}

/* FadeUp igual à hero para título e parágrafos da seção 'O que nos move' */
.moves h2.fadeup,.moves .text p.fadeup{opacity:0;transform:translateY(20px)}
.moves h2.fadeup.in-view{animation:fadeUp .7s ease-out .15s forwards}
.moves .text p.fadeup.in-view{animation:fadeUp 1s ease-out var(--delay, .35s) forwards}


.purpose-card p,
.mission-card p,
.vision-card p,
.values-card p {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

/* Contact */
.contact{background-image:url("../icons/FUNDO FORMS.webp");background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;position:relative;overflow:hidden}
.contact .panel{background:#fff;color:#334155;border-radius:12px;padding:32px;max-width:900px;margin:0 auto}
.contact label{display:block;font-size:12px;color:#475569;margin:0 0 6px}
.contact input,.contact textarea{width:100%;background:#e5e7eb;border:0;border-radius:8px;padding:12px;outline:none}
.contact textarea{resize:none}
.contact .disclaimer{font-size:12px;color:#6b7280;line-height:1.6}
.contact .checkbox{display:flex;gap:8px;align-items:flex-start}
.contact .submit{display:flex;justify-content:flex-end}
.contact .submit .btn{background:#334155;color:#fff}

/* Footer */
.footer{padding:28px 12px;text-align:center;color:#6b7280}

/* Footer (from React Footer.tsx) */
.site-footer{background:#1e293b;color:#fff}
.site-footer .inner{max-width:1200px;margin:0 auto;padding:32px 16px}
.site-footer .grid{display:grid;gap:24px}
@media(min-width:1024px){.site-footer .grid{grid-template-columns:repeat(3,1fr)}}
.mapbox{background:#dcfce7;height:256px;border-radius:12px;position:relative;overflow:hidden}
.mapbox .grad{position:absolute;inset:0;background:linear-gradient(135deg,#bbf7d0,#dcfce7,#dbeafe)}
.mapbox .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 6px rgba(239,68,68,.25)}
.mapbox .dot{position:absolute;border-radius:50%}
.mapbox .dot.d1{top:16px;left:16px;width:8px;height:8px;background:#60a5fa}
.mapbox .dot.d2{bottom:32px;right:32px;width:12px;height:12px;background:#22c55e}
.mapbox .dot.d3{top:33%;right:25%;width:8px;height:8px;background:#a78bfa}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.addr{
    margin: 12px auto 0;
    font-size: 16px !important;
    color: #e2e8f0;
    text-align: center;
    max-width: 720px;
}
.addr p{
    margin: 4px 0;
    line-height: 1.4;
}
.footer-block h3{font-weight:600;margin:0 0 12px;font-size:18px}
/* Footer line styles */
.footer-block .line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}
/* Hover: listas ao lado do mapa ficam em negrito */
.footer-block .line:hover {
    font-weight: 700;
}
/* Hover: endereço clicável também fica em negrito */
.addr .line:hover {
    font-weight: 700;
}

/* Phone icon styles */
.footer-block .footer-icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    /* Mantém os ícones claros sobre fundos escuros/variáveis */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(110%) contrast(100%) !important;
}

/* CTA gradient text effect (ensure it overrides h2 color) */
.cta h2 .letras{
  display: inline-block;
  /* Sweep contínuo e sem "parada": padrão repetitivo com faixa azul fina */
  /* Aumentar a largura da faixa azul e manter predominância do branco */
  /* Faixa azul com cauda em degradê (azul -> branco) */
  background-image: repeating-linear-gradient(90deg,
    /* branco inicial amplo */
    rgba(255,255,255,1) 0 43%,
    /* head (branco -> azul) mais pronunciado */
    rgba(118,138,171,0.0) 43%,
    rgba(118,138,171,0.25) 46%,
    rgba(118,138,171,0.60) 49%,
    /* núcleo azul */
    rgba(118,138,171,0.60) 51%,
    /* tail (azul -> branco) simétrico ao head */
    rgba(118,138,171,0.25) 54%,
    rgba(118,138,171,0.0) 57%,
    /* retorno ao branco */
    rgba(255,255,255,1) 60% 100%
  );
  background-repeat: repeat;
  background-size: 300% 100%; /* aumenta o percurso da animação */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 900;
  /* Garantir legibilidade sobre fundo branco: contorno/shadow sutil */
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.12);
  text-shadow: 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.06);
  will-change: background-position;
  animation: AnimateTextGradient 12s linear infinite; /* esquerda → direita, mais longa */
}

@keyframes AnimateTextGradient {
  0% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.footer-block .whatsapp-icon,
.footer-block .envelope-icon { /* aliases for clarity */
    width: 20px !important;
    height: 20px !important;
}
.footer-block .phone-icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    /* Deixa o SVG branco mesmo sendo carregado via <img> */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(110%) contrast(100%) !important;
}

/* Footer heading styles */
.footer-block h3 {
    text-decoration: underline !important;
    text-underline-offset: 6px !important; /* distância do sublinhado */
    text-decoration-thickness: 1px !important; /* espessura do sublinhado */
    font-size: 18px !important;
}
.newsletter{background:#334155;padding:16px;border-radius:8px}
.newsletter input{width:100%;padding:10px 12px;border:0;border-radius:6px;background:#475569;color:#fff}
.newsletter input::placeholder{color:#cbd5e1}
.copyright{border-top:1px solid #334155;padding:16px 0;text-align:center}
.site-footer .mapbox{border-radius:0 0 12px 0 !important}
.brand-box{width:48px;height:32px;background:linear-gradient(90deg,#fb923c,#ef4444);border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.brand-box span{color:#fff;font-weight:700;font-size:12px}

.site-footer .grid {
  display: flex;
  flex-wrap: nowrap; /* nunca quebra para baixo */
  justify-content: space-between;
  align-items: flex-start; /* alinha topo dos blocos */
  gap: 24px;
}

/* Mapa */
.site-footer .grid > div:nth-child(1) {
  flex: 0 0 720px; /* largura fixa */
  max-width: 720px;
}

/* Contato + Redes sociais */
.site-footer .grid > div:nth-child(2) {
  flex: 0 0 250px; /* largura fixa */
  max-width: 250px;
}

/* Especialidades */
.site-footer .grid > div:nth-child(3) {
  flex: 0 0 300px; /* largura fixa */
  max-width: 300px;
}

/* ================================
   Responsividade (mobile-first)
   ================================ */
/* Ajustes base */
img, iframe, video { max-width: 100%; height: auto; }
.section { padding: 56px 0; }
.container { padding-left: 16px; padding-right: 16px; }

/* Tipografia fluida essencial */
h1 { font-size: clamp(24px, 6vw, 44px); }
h2 { font-size: clamp(20px, 4.5vw, 32px); }
h3 { font-size: clamp(18px, 3.8vw, 20px); }
body { font-size: clamp(15px, 3.9vw, 17px); }

/* Header: menu hambúrguer (mobile) */
.menu-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  position: relative;
  z-index: 5600; /* acima do nav (5000) */
}
.menu-toggle .bar {
  width: 22px;
  height: 2px;
  background: #0f172a;
  position: relative;
  display: block;
  transition: background .2s ease;
}
.menu-toggle .bar::before,
.menu-toggle .bar::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #0f172a;
  transition: transform .25s ease, top .25s ease;
}
.menu-toggle .bar::before{ top: -7px; }
.menu-toggle .bar::after{ top: 7px; }

/* Transformar hambúrguer em X quando aberto */
.header.menu-open .menu-toggle .bar { background: transparent; }
.header.menu-open .menu-toggle .bar::before { top: 0; transform: rotate(45deg); }
.header.menu-open .menu-toggle .bar::after { top: 0; transform: rotate(-45deg); }

/* Nav off-canvas no mobile */
.header .nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: 80%;
  max-width: 320px;
  background: #ffffff;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 72px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5000;
}
.header .nav.is-open { transform: translateX(0); }

/* Overlay de fundo ao abrir o menu */
.header::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 4500;
}
.header.menu-open::after{ opacity: 1; pointer-events: auto; }

/* Dropdown dentro do off-canvas (apenas no mobile) */
@media (max-width: 1023.98px){
  /* Esconde o rótulo "Serviços" e mostra apenas os sublinks */
  .header .nav .nav-dropdown > .nav-link{ display: none; }

  /* Centraliza todos os links do menu no mobile */
  .header .nav a{ display: block; text-align: center; }

  /* Remove a "box" do dropdown e exibe os sublinks como itens normais */
  .header .nav .dropdown-menu{
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    z-index: 5100; /* garante que fique acima do conteúdo */
    display: block; /* sempre mostrar os sublinks no mobile */
  }
  .header .nav .dropdown-menu a{
    padding: 12px 0;
    color: inherit;
  }
  .header .nav .nav-dropdown.open .dropdown-menu{ display: block; }
}

/* Esconder botão no desktop e resetar nav */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .header .nav {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    background: transparent;
    transform: none !important;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    gap: 24px;
  }
  .header.menu-open::after{ display: none; }
}

/* Hero mobile: reduzir altura e esconder círculo visual no mobile */
@media (max-width: 767.98px){
  .hero { min-height: 70vh; }
  /* Padding superior no título da hero para mobile */
  .hero h1 { padding-top: 48px; }
  /* Reexibir a bola branca no mobile e ajustar tamanho */
  .hero .circle { display: block; width: 220px; height: 220px; margin: 24px auto 0; }
}

/* Cards: evitar overflow no mobile */
@media (max-width: 767.98px){
  .cards { grid-template-columns: 1fr; }
  .cards .card, .services .cards .card { width: 100%; }
  .card h3 { white-space: normal; }
}

/* "Por que escolher" tipografia no mobile */
@media (max-width: 767.98px){
  .reason h3{ min-height: auto; }
  .reason img{ width: 96px; height: 96px; }
}

/* "O que nos move" ajustes tipográficos */
@media (max-width: 767.98px){
  .moves .text p { font-size: 16px; }
  .moves h2 { font-size: 28px; margin-top: 28px; }
  .moves .text { margin-top: 8px; }
}

/* O que nos move: garantir boa apresentação dos cards no mobile */
@media (max-width: 767.98px){
  /* Cards ocupam toda a largura, com espaçamento adequado */
  .moves .card{ padding: 12px; padding-bottom: 12px !important; margin: 12px 0; display: block !important; }
  /* Altura natural para todos os cards dessa seção */
  .moves .card{ height: auto !important; overflow: visible; }
  .moves .card p{ min-height: 0 !important; height: auto !important; }
  .purpose-card,
  .mission-card,
  .vision-card,
  .values-card { max-width: 100%; margin-left: 0; margin-right: 0; }

  /* Remover paddings inline do layout colunar no mobile para não empurrar altura */
  .moves .grid > div { padding-top: 0 !important; }
  /* Ícones não ficam absolutos no mobile para evitar sobreposição/corte */
  .purpose-icon,
  .mission-icon,
  .vision-icon,
  .values-icon {
    position: static;
    width: 64px;
    height: 64px;
    margin: 4px 0 8px 0;
  }

  /* Remove altura fixa do card de Valores no mobile */
  .values-card { height: auto !important; }
  .values-card p { min-height: 0 !important; height: auto !important; padding-bottom: 0 !important; margin-top: 6px !important; }
}

/* Footer: empilhar colunas no mobile e neutralizar larguras inline */
@media (max-width: 1023.98px){
  .site-footer .grid{ display: grid; grid-template-columns: 1fr; }
  .site-footer .grid > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
  .mapbox { height: 320px; }
}

/* Força o bloco do mapa a ocupar 100% da largura em telas pequenas, ignorando inline width */
@media (max-width: 767.98px){
  .site-footer .grid > div:first-child { width: 100% !important; max-width: 100% !important; }
  .site-footer .grid > div:first-child > .mapbox { width: 100% !important; height: 280px; }
  /* Remover bordas arredondadas do mapa no mobile */
  .mapbox { border-radius: 0 !important; }
  .site-footer .mapbox { border-radius: 0 !important; }

  /* Centralizar os blocos de texto/links no mobile */
  .site-footer .grid > div:nth-child(2),
  .site-footer .grid > div:nth-child(3) { text-align: center !important; }
  .footer-block { align-items: center; }
  .footer-block .line { justify-content: center !important; }

  /* Remover padding da direita do footer no mobile */
  .site-footer .inner { padding-right: 0 !important; }
  /* Remover margem superior da coluna 'Nossas especialidades' no mobile */
  .site-footer .grid > div:nth-child(3) { margin-top: 0 !important; }
}

/* Garante que o iframe do mapa ocupe toda a altura do container no desktop e mobile */
.mapbox iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Reduz motion para acessibilidade */
  @media (prefers-reduced-motion: reduce){
    * { animation: none !important; transition: none !important; }
  }

/* Cookie Banner */
#cookie-banner{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 6000; display: none; }
#cookie-banner .cookie-inner{ max-width: 1200px; margin: 0 auto 16px; background: rgba(255,255,255,0.98); color: #111827; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; gap: 16px; align-items: center; justify-content: space-between; }
#cookie-banner .cookie-text{ margin: 0; font-size: 14px; line-height: 1.5; }
#cookie-banner .cookie-link{ color: #111827; font-weight: 700; text-decoration: underline; }
#cookie-banner .cookie-actions{ display: flex; gap: 10px; }
#cookie-banner .cookie-actions .btn{ background: #111827; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
#cookie-banner .cookie-actions .cookie-decline{ background: transparent; color: #111827; border: 1px solid #111827; }
@media (max-width: 767.98px){
  #cookie-banner .cookie-inner{ margin: 0 12px 12px; flex-direction: column; align-items: stretch; }
  #cookie-banner .cookie-actions{ justify-content: flex-end; }
}