
:root{
  --blue:#0C6FB4;
  --blue-deep:#0753A6;
  --blue-dark:#061B35;
  --ink:#08111F;
  --muted:#667085;
  --line:#E6EAF0;
  --soft:#F5F8FC;
  --white:#fff;
  --radius:24px;
  --container:1180px;
  --shadow:0 24px 70px rgba(7,31,60,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 48px),var(--container));margin:auto}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(230,234,240,.7)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:155px;height:auto}
.main-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}
.main-nav>a{opacity:.7;transition:.2s}
.main-nav>a:hover,.main-nav>a.active{opacity:1;color:var(--blue)}
.main-nav .nav-cta{opacity:1;background:var(--ink);color:#fff;padding:12px 17px;border-radius:999px}
.nav-toggle{display:none;border:0;background:none}
.hero{padding-top:82px}
.hero-home{min-height:760px;background:radial-gradient(circle at 80% 30%,rgba(12,111,180,.16),transparent 34%),linear-gradient(135deg,#fff 0%,#f5f9fd 100%);overflow:hidden}
.hero-grid{width:min(calc(100% - 48px),var(--container));margin:auto;min-height:680px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:70px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--blue);text-transform:uppercase}
.hero h1,.page-hero h1,h2{font-family:"Manrope",sans-serif;letter-spacing:-.045em;line-height:1.03}
.hero h1{font-size:clamp(46px,5.3vw,78px);margin:22px 0}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-lead{max-width:600px;color:#536174;font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:14px 20px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 28px rgba(12,111,180,.2)}
.btn-ghost{border-color:var(--line);background:#fff}
.btn-light{background:#fff;color:var(--blue)}
.hero-note{display:flex;gap:9px;align-items:center;color:#667085;font-size:13px}
.dot{width:8px;height:8px;background:#18b67a;border-radius:50%;box-shadow:0 0 0 6px rgba(24,182,122,.1)}
.hero-visual{height:520px;position:relative;display:grid;place-items:center}
.visual-card{width:86%;height:430px;border-radius:36px;background:linear-gradient(145deg,#eaf4fb,#c9e3f5);box-shadow:var(--shadow);position:relative;overflow:hidden}
.visual-card:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#0b4fa2);right:-180px;top:-160px;opacity:.95}
.visual-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.45);right:60px;bottom:-100px}
.visual-label{position:absolute;left:34px;top:36px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#44617c}
.visual-lines{position:absolute;left:34px;bottom:55px;width:48%;display:grid;gap:12px}
.visual-lines span{height:7px;border-radius:10px;background:rgba(12,111,180,.18)}
.visual-lines span:nth-child(2){width:75%}.visual-lines span:nth-child(3){width:55%}
.visual-orb{position:absolute;right:95px;top:110px;width:150px;height:150px;border:1px solid rgba(255,255,255,.5);border-radius:50%}
.visual-corner{position:absolute;right:28px;bottom:25px;color:#fff;font-weight:800;letter-spacing:.15em;font-size:10px}
.floating-stat{position:absolute;left:0;bottom:30px;background:#fff;border-radius:20px;padding:17px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.floating-stat strong{font:800 28px "Manrope";color:var(--blue)}
.floating-stat span{font-size:12px;color:var(--muted)}
.proof-strip{background:var(--blue-dark);color:#fff}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 0}
.proof-grid>div{padding:0 28px;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}
.proof-grid>div:last-child{border:0}
.proof-grid strong{font:800 34px "Manrope"}.proof-grid span{color:#aebdcd;font-size:12px}
.section{padding:120px 0}
.split{display:grid;grid-template-columns:.35fr 1fr;gap:80px}
.section-content{max-width:780px}
.section h2{font-size:clamp(38px,4.5vw,62px);margin:12px 0 24px}
.section h2 span,.section-content h2 span{color:var(--blue)}
.section p{color:var(--muted);font-size:17px}
.text-link{display:inline-flex;gap:10px;color:var(--blue);font-weight:800;margin-top:28px}
.dark-section{background:var(--blue-dark);color:#fff}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:50px}
.section-head.light .section-kicker,.light-kicker{color:#9bd6f4}
.section-head.light h2{color:#fff}.section-head.light h2 span{color:#74c4ed}
.light-link{color:#fff}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service-card{padding:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:22px;min-height:210px;transition:.25s}
.service-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.service-card .icon{color:#77c9f2;font-size:25px}
.service-card h3{font:700 21px "Manrope";margin:26px 0 9px}
.service-card p{font-size:14px;color:#aebdcd}
.procurement-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.check-list{list-style:none;margin:30px 0}.check-list li{padding:13px 0;border-bottom:1px solid var(--line);font-weight:600}.check-list li:before{content:"✓";color:var(--blue);margin-right:12px}
.procurement-art{height:500px;background:linear-gradient(145deg,#edf6fc,#dcebf6);border-radius:36px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(12,111,180,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(12,111,180,.08) 1px,transparent 1px);background-size:38px 38px}
.procurement-art:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:var(--blue);top:55px;left:80px;opacity:.92}
.art-card{position:absolute;left:40px;right:40px;bottom:45px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);padding:20px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;color:#4d6175}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.category-card{min-height:180px;padding:25px;border:1px solid var(--line);border-radius:22px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
.category-card:hover{border-color:rgba(12,111,180,.35);box-shadow:0 18px 45px rgba(7,31,60,.08);transform:translateY(-3px)}
.category-card span{font-size:12px;color:var(--blue);font-weight:800}
.category-card h3{font:700 22px "Manrope";max-width:240px}
.future-section{padding-top:0}
.future-card{border-radius:32px;padding:55px;background:linear-gradient(135deg,var(--blue-dark),#0b4b8f);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px}
.future-card h2{max-width:700px}.future-card h2 span{color:#73c5ed}.future-card p{max-width:600px;color:#b9c8d8}
.contact-banner{padding-top:50px}.contact-banner-inner{border-top:1px solid var(--line);padding-top:50px;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-banner h2{font-size:clamp(35px,4vw,55px);max-width:700px}
.site-footer{background:#f6f8fb;padding:70px 0 20px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1.2fr;gap:45px}
.footer-logo{width:155px;margin-bottom:18px}.footer-desc{color:var(--muted)}
.footer-grid h3{font-size:13px;margin-bottom:16px}.footer-grid a,.footer-grid span{display:block;color:#697586;font-size:13px;margin:8px 0}.footer-grid a:hover{color:var(--blue)}
.footer-bottom{border-top:1px solid var(--line);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;color:#8994a4;font-size:11px}
.page-hero{padding:170px 0 100px;background:linear-gradient(135deg,#f5f9fd,#fff)}
.page-hero-blue{background:linear-gradient(135deg,var(--blue-dark),#0a4c91);color:#fff}
.page-hero-inner{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end}
.page-hero h1{font-size:clamp(50px,6vw,82px);margin-top:18px}
.page-hero h1 span{color:var(--blue)}
.page-hero-blue h1 span{color:#79c8ef}.page-hero p{font-size:18px;color:var(--muted)}.page-hero-blue p{color:#b7c7d8}
.about-split{align-items:start}
.blue-section{background:var(--blue);color:#fff}.blue-section h2{max-width:900px}.blue-section h2 span{color:#b9e4f8}
.mission-grid{display:grid;grid-template-columns:1fr 180px;gap:40px;align-items:center}.quote-mark{font:800 170px "Manrope";color:rgba(255,255,255,.16);line-height:.6}
.big-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.big-stats>div{padding:35px 25px;border-right:1px solid var(--line)}.big-stats>div:last-child{border:0}.big-stats strong{font:800 72px "Manrope";color:var(--blue);display:block}.big-stats span{color:var(--muted)}
.light-bg{background:var(--soft)}.future-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.process-grid>div{background:var(--blue-dark);padding:30px;min-height:240px}.process-grid b{color:#78c8ee}.process-grid h3{font:700 24px "Manrope";margin:35px 0 8px}.process-grid p{font-size:14px;color:#aebdcd}
.procurement-list{display:grid;grid-template-columns:1fr 1fr;margin-top:50px;border-top:1px solid var(--line)}
.procurement-list>div{padding:35px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:55px 1fr;gap:5px 20px}.procurement-list span{grid-row:span 2;color:var(--blue);font-weight:800}.procurement-list h3{font:700 23px "Manrope"}.procurement-list p{font-size:14px}
.cta-section{padding-top:0}.cta-card{background:var(--soft);border:1px solid var(--line);border-radius:28px;padding:45px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-card h2{font-size:clamp(35px,4vw,55px)}
.center-section{text-align:center}.center-section h2{max-width:900px;margin:20px auto 35px}
.service-grid-large .service-card{background:var(--soft);border-color:var(--line);min-height:250px}.service-grid-large .service-card:hover{background:#fff}.service-grid-large .service-card h3{color:var(--ink)}.service-grid-large .service-card p{color:var(--muted)}
.product-category-grid{grid-template-columns:repeat(3,1fr)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.contact-info h2{margin-top:15px}.contact-items{margin-top:45px}.contact-items>div{padding:17px 0;border-bottom:1px solid var(--line)}.contact-items small{display:block;color:var(--blue);font-size:10px;letter-spacing:.15em;font-weight:800;margin-bottom:4px}.contact-items a,.contact-items span{font-size:16px;color:#39475a}
.contact-form{background:var(--soft);border-radius:28px;padding:38px}.form-head span{font-size:10px;letter-spacing:.15em;color:var(--blue);font-weight:800}.form-head h3{font:700 32px "Manrope";margin:8px 0 25px}
.contact-form label{display:block;font-size:12px;font-weight:700;margin:16px 0}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;outline:0}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue)}.form-note{font-size:11px;color:#8994a4;margin-top:14px}
@media(max-width:900px){
  .main-nav{position:absolute;top:82px;left:24px;right:24px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:none;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}.nav-toggle{display:flex;flex-direction:column;gap:6px}.nav-toggle span{display:block;width:25px;height:2px;background:var(--ink)}
  .hero-grid,.procurement-grid,.page-hero-inner,.contact-grid{grid-template-columns:1fr;gap:45px}.hero-grid{padding-top:60px}.hero-visual{height:430px}.visual-card{height:350px}
  .proof-grid{grid-template-columns:repeat(2,1fr);gap:25px}.proof-grid>div:nth-child(2){border:0}.proof-grid>div{padding:0 15px}
  .split,.future-grid{grid-template-columns:1fr;gap:25px}.section{padding:85px 0}.service-grid,.category-grid,.product-category-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.mission-grid{grid-template-columns:1fr}.procurement-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{height:72px}.site-header{height:72px}.main-nav{top:72px;left:16px;right:16px}.brand img{width:135px}
  .hero{padding-top:72px}.hero-home{min-height:auto}.hero-grid{width:min(calc(100% - 32px),var(--container));min-height:auto;padding:70px 0}.hero h1{font-size:45px}.hero-lead{font-size:16px}.hero-visual{height:330px}.visual-card{width:100%;height:290px}.floating-stat{bottom:0}
  .proof-grid{grid-template-columns:1fr 1fr}.proof-grid strong{font-size:28px}.proof-grid span{font-size:11px}
  .section-head,.future-card,.contact-banner-inner,.cta-card{align-items:flex-start;flex-direction:column}.section h2{font-size:40px}
  .service-grid,.category-grid,.product-category-grid,.process-grid{grid-template-columns:1fr}.page-hero{padding:135px 0 75px}.page-hero h1{font-size:48px}.page-hero-inner{gap:25px}
  .big-stats{grid-template-columns:1fr}.big-stats>div{border-right:0;border-bottom:1px solid var(--line)}.big-stats>div:last-child{border-bottom:0}.big-stats strong{font-size:55px}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}
  .contact-form{padding:25px}.cta-card{padding:30px}
}


/* Assistente Framatech — integração discreta, sem alterar o layout existente. */
.chat-open{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border:0;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;box-shadow:0 16px 40px rgba(12,111,180,.3);cursor:pointer}
.chatbot{position:fixed;right:22px;bottom:90px;width:min(370px,calc(100% - 44px));background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);z-index:90;display:none;overflow:hidden}
.chatbot.show{display:block}
.chat-head{padding:17px 18px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center}
.chat-head strong{font:800 16px Manrope}
.chat-close{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.chat-body{padding:18px}
.chat-answer{background:var(--soft);padding:14px;border-radius:14px;font-size:13px;color:#536174;min-height:70px}
.chat-questions{display:grid;gap:8px;margin-top:12px}
.chat-question{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;text-align:left;font-size:12px;font-weight:800;cursor:pointer}
@media(max-width:600px){.chat-open{right:16px;bottom:16px}.chatbot{right:16px;bottom:84px;width:calc(100% - 32px)}}
/* =====================================================
   MICRO-ANIMAÇÕES — INTEGRAÇÃO SEM ALTERAR O LAYOUT
   ===================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Movimento muito discreto dos cards existentes */
.service-card,
.category-card {
  will-change: transform;
}

/* Entrada suave do conteúdo */
.hero h1,
.hero-lead,
.hero-actions,
.hero-note {
  animation: framatechFadeUp .8s ease both;
}

.hero-lead {
  animation-delay: .1s;
}

.hero-actions {
  animation-delay: .2s;
}

.hero-note {
  animation-delay: .3s;
}

@keyframes framatechFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pequeno movimento no visual principal */
.visual-card {
  animation: framatechFloat 7s ease-in-out infinite;
}

@keyframes framatechFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* Botões */
.btn {
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

/* Categorias */
.category-card {
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.category-card:hover {
  transform: translateY(-7px);
}

/* Serviços */
.service-card {
  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

/* Respeitar utilizadores que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   REDES SOCIAIS — INTEGRAÇÃO VISUAL FRAMATECH
   ===================================================== */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.social-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease;
  animation: socialReveal .65s ease both;
  will-change: transform;
}

.social-link:nth-child(1) { animation-delay: .05s; }
.social-link:nth-child(2) { animation-delay: .12s; }
.social-link:nth-child(3) { animation-delay: .19s; }

.social-link img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  display: block;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.social-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .10);
}

.social-link:hover img {
  transform: scale(1.12) rotate(-3deg);
}

.social-link:active {
  transform: translateY(-1px) scale(.96);
}

.social-link:focus-visible {
  outline: 3px solid rgba(20, 123, 255, .28);
  outline-offset: 4px;
}

@keyframes socialReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .footer-socials {
    gap: 12px;
    margin-top: 18px;
  }

  .social-link {
    width: 42px;
    height: 42px;
  }

  .social-link img {
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-link,
  .social-link img {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================
   REDES SOCIAIS — ÍCONES VECTORIAIS FRAMATECH
   Mantém a estrutura existente; apenas melhora a leitura visual.
   ===================================================== */
.footer-socials .social-link {
  width: 48px;
  height: 48px;
  padding: 9px;
  border-radius: 14px;
  color: var(--blue);
  background: rgba(12,111,180,.07);
  border: 1px solid rgba(12,111,180,.12);
  overflow: visible;
}

.footer-socials .social-link img {
  width: 30px;
  height: 30px;
  max-width: none;
  object-fit: contain;
  display: block;
}

.footer-socials .social-link:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 26px rgba(12,111,180,.22);
}

.footer-socials .social-link:hover img {
  transform: scale(1.08);
}

.footer-socials .social-link:active {
  transform: translateY(-1px) scale(.97);
}

@media (max-width: 700px) {
  .footer-socials .social-link {
    width: 46px;
    height: 46px;
    padding: 8px;
  }
  .footer-socials .social-link img {
    width: 29px;
    height: 29px;
  }
}

/* HOME — imagem de fornecimento corporativo integrada sem alterar a estrutura existente */
.hero-home{
  position:relative;
  isolation:isolate;
  background:#f5f9fd;
}
.hero-home::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-2;
  background-image:url("../assets/images/fornecimento-corporativo.jpg");
  background-size:cover;
  background-position:center center;
  filter:blur(9px);
  transform:scale(1.035);
  opacity:.72;
}
.hero-home::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 48%,rgba(245,249,253,.58) 100%);
}
.hero-home .hero-grid{position:relative;z-index:1}

/* Mesmo visual, agora com a fotografia original no cartão de Fornecimento Corporativo */
.visual-card.visual-card-main{
  background-image:url("../assets/images/fornecimento-corporativo.jpg");
  background-size:cover;
  background-position:center center;
  background-color:#dce8f0;
}
.visual-card.visual-card-main::before{
  inset:0;
  width:auto;
  height:auto;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(6,27,53,.08),rgba(6,27,53,.32));
  opacity:1;
}
.visual-card.visual-card-main::after{
  width:auto;
  height:auto;
  inset:0;
  border:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 48%);
}
.visual-card.visual-card-main .visual-label{
  z-index:2;
  color:#fff;
  background:rgba(6,27,53,.56);
  backdrop-filter:blur(7px);
  padding:8px 11px;
  border-radius:999px;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.visual-card.visual-card-main .visual-lines{z-index:2}
.visual-card.visual-card-main .visual-lines span{background:rgba(255,255,255,.62)}
.visual-card.visual-card-main .visual-orb{z-index:2;border-color:rgba(255,255,255,.62)}
.visual-card.visual-card-main .visual-corner{z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* CLIENTES E PARCEIROS */
.partners-card{display:block;overflow:hidden;padding:55px 0 0}
.partners-intro{padding:0 55px 38px}.partners-intro h2{margin:12px 0 18px}.partners-intro p{margin:0}
.partners-carousel{width:100%;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);padding:25px 0 32px;position:relative}
.partners-carousel:before,.partners-carousel:after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.partners-carousel:before{left:0;background:linear-gradient(90deg,#0b2e56,transparent)}.partners-carousel:after{right:0;background:linear-gradient(270deg,#0b4b8f,transparent)}
.partners-track{display:flex;align-items:center;width:max-content;animation:partners-scroll 36s linear infinite}
.partners-track:hover{animation-play-state:paused}
.partner-logo{width:220px;height:120px;margin:0 16px;padding:10px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.14);flex:none}
.partner-logo img{display:block;max-width:96%;max-height:96%;width:auto;height:auto;object-fit:contain;transform:scale(1.08)}
.partners-company-carousel{margin-top:34px}
.partners-company-copy{display:flex;align-items:end}.partners-company-copy p{margin:0;max-width:430px}
@keyframes partners-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:720px){.partners-card{padding-top:40px}.partners-intro{padding:0 28px 30px}.partner-logo{width:175px;height:98px;margin:0 10px;padding:8px}.partners-track{animation-duration:28s}.partners-carousel:before,.partners-carousel:after{width:35px}}
@media(prefers-reduced-motion:reduce){.partners-track{animation:none;overflow-x:auto;width:auto}}


/* =========================================================
   FUNDOS FOTOGRÁFICOS DAS PÁGINAS — INTEGRAÇÃO ADITIVA
   Mantém a estrutura existente e acrescenta profundidade,
   legibilidade e movimento subtil aos hero das páginas.
   ========================================================= */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent;
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:-2;
  background-image:var(--ft-hero-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.04);
  animation:ftHeroKenBurns 18s ease-in-out infinite alternate;
  will-change:transform,background-position;
}

/* Camada de leitura: não desfoca a fotografia; apenas reduz o contraste. */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--ft-hero-overlay);
  pointer-events:none;
}

.page-hero > *{
  position:relative;
  z-index:1;
}

.page-hero-company,
.page-hero-solutions{
  --ft-hero-overlay:linear-gradient(90deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.78) 46%,rgba(255,255,255,.60) 100%);
}

.page-hero-company{
  --ft-hero-image:url("../assets/backgrounds/Empresa.jpg");
}

.page-hero-solutions{
  --ft-hero-image:url("../assets/backgrounds/Solu%23U00e7%23U00f5es.jpg");
}

.page-hero-procurement,
.page-hero-products{
  --ft-hero-overlay:linear-gradient(90deg,rgba(4,27,52,.90) 0%,rgba(5,55,94,.78) 48%,rgba(6,76,125,.64) 100%);
}

.page-hero-procurement{
  --ft-hero-image:url("../assets/backgrounds/procurement.jpg");
}

.page-hero-products{
  --ft-hero-image:url("../assets/backgrounds/Produtos.jpg");
}

.page-hero-company .section-kicker,
.page-hero-solutions .section-kicker{
  text-shadow:0 1px 12px rgba(255,255,255,.45);
}

.page-hero-blue.page-hero-procurement,
.page-hero-blue.page-hero-products{
  background:transparent;
}

@keyframes ftHeroKenBurns{
  0%{transform:scale(1.04) translate3d(-.4%,0,0);background-position:48% 50%}
  100%{transform:scale(1.10) translate3d(.4%,-.6%,0);background-position:53% 47%}
}

@media (prefers-reduced-motion:reduce){
  .page-hero::before{animation:none;transform:scale(1.04)}
}

@media (max-width:700px){
  .page-hero::before{animation-duration:24s}
  .page-hero-company,
  .page-hero-solutions{
    --ft-hero-overlay:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.76));
  }
  .page-hero-procurement,
  .page-hero-products{
    --ft-hero-overlay:linear-gradient(90deg,rgba(4,27,52,.93),rgba(5,55,94,.76));
  }
}

/* =====================================================
   RESPONSIVIDADE PROFISSIONAL — CAMADA ADAPTATIVA
   Preserva o desktop e reorganiza componentes para tablet/touch.
   ===================================================== */
html, body { max-width:100%; overflow-x:clip; }

/* Ícones direcionais desenhados em CSS: consistentes em todos os browsers. */
.ui-arrow{
  position:relative;
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  vertical-align:middle;
  color:currentColor;
}
.ui-arrow::before{
  content:"";
  position:absolute;
  left:1px;
  top:6px;
  width:10px;
  height:1.8px;
  border-radius:2px;
  background:currentColor;
}
.ui-arrow::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;
  border-radius:1px;
  right:1px;
  top:3.8px;
  transform:rotate(45deg);
}
.ui-arrow-left{transform:rotate(180deg)}
.ui-arrow-right{transform:none}
.ui-arrow-forward{transform:none}
.ui-arrow-down{transform:rotate(90deg)}
.ui-close{
  position:relative;
  display:block;
  width:16px;
  height:16px;
  margin:auto;
}
.ui-close::before,.ui-close::after{
  content:"";
  position:absolute;
  left:7px;
  top:0;
  width:2px;
  height:16px;
  border-radius:2px;
  background:currentColor;
}
.ui-close::before{transform:rotate(45deg)}
.ui-close::after{transform:rotate(-45deg)}

.nav-toggle{width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;cursor:pointer}
.nav-toggle span{transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.btn,.category-link,.category-request,.portfolio-open,.portfolio-control,.chat-question,
.portfolio-close,.portfolio-arrow,.catalog-lightbox-close,.nav-toggle{touch-action:manipulation}

.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Tablet: reduz densidade sem transformar a interface em mobile. */
@media (min-width:901px) and (max-width:1180px){
  .container,.hero-grid{width:min(calc(100% - 40px),var(--container))}
  .main-nav{gap:18px;font-size:13px}
  .hero-grid{gap:45px}
  .split{gap:50px}
  .procurement-grid,.contact-grid{gap:55px}
  .future-grid{gap:55px}
  .page-hero-inner{gap:50px}
  .service-card,.category-card{padding:24px}
  .footer-grid{gap:28px}
}

@media (max-width:900px){
  body{min-width:0}
  .site-header{height:82px}
  .nav-wrap{min-height:82px}
  .main-nav{
    position:absolute;
    top:calc(100% + 8px);
    left:16px;
    right:16px;
    max-height:calc(100vh - 104px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:14px;
    gap:4px;
  }
  .main-nav>a{padding:13px 12px;min-height:44px;display:flex;align-items:center}
  .main-nav .nav-cta{justify-content:center;margin-top:6px}
  .hero-grid,.page-hero-inner,.procurement-grid,.contact-grid{min-width:0}
  .hero-copy,.section-content,.contact-info,.contact-form{min-width:0}
  .hero h1,.page-hero h1,.section h2{overflow-wrap:anywhere}
  .hero-lead,.section p,.page-hero p{overflow-wrap:anywhere}
  .visual-card{max-width:100%}
  .procurement-art{max-width:100%;}
  .future-card,.cta-card{width:100%}
  .portfolio-open,.category-link,.category-request{min-height:44px;align-items:center}
}

@media (max-width:600px){
  .container,.hero-grid{width:calc(100% - 32px)}
  .nav-wrap{height:72px;min-height:72px}
  .site-header{height:72px}
  .nav-toggle{width:44px;height:44px}
  .main-nav{top:calc(100% + 8px);max-height:calc(100vh - 88px)}
  .hero-grid{padding-top:48px;padding-bottom:55px;gap:32px}
  .hero h1{font-size:clamp(40px,11vw,48px);margin:18px 0}
  .hero-lead{font-size:16px;line-height:1.55}
  .hero-actions{margin:25px 0;gap:10px}
  .btn{min-height:48px;padding:13px 18px}
  .hero-visual{height:320px}
  .visual-card{height:275px;border-radius:26px}
  .visual-card:before{width:360px;height:360px;right:-150px;top:-115px}
  .visual-orb{right:48px;top:75px;width:105px;height:105px}
  .visual-label{left:20px;top:22px}
  .visual-lines{left:20px;bottom:35px;width:52%}
  .visual-corner{right:18px;bottom:18px}
  .floating-stat{left:8px;bottom:0;padding:13px 16px;border-radius:16px}
  .floating-stat strong{font-size:24px}
  .proof-grid{gap:18px;padding:22px 0}
  .proof-grid>div{padding:0 10px;min-width:0}
  .proof-grid strong{font-size:26px;overflow-wrap:anywhere}
  .section{padding:72px 0}
  .section-head{margin-bottom:32px}
  .section h2{font-size:clamp(34px,9.8vw,42px)}
  .section p{font-size:16px}
  .service-card,.category-card{min-height:0;padding:22px}
  .service-card h3{font-size:20px;margin-top:20px}
  .category-card h3{font-size:20px}
  .procurement-art{height:360px;border-radius:26px}
  .procurement-art:before{width:240px;height:240px;top:38px;left:50px}
  .art-card{left:18px;right:18px;bottom:20px;padding:15px;gap:15px}
  .future-card,.cta-card{padding:28px;border-radius:24px}
  .contact-form-row{grid-template-columns:1fr;gap:0}
  .contact-form{padding:22px}
  .page-hero{padding:120px 0 68px}
  .page-hero h1{font-size:clamp(42px,11vw,52px)}
  .page-hero-inner{gap:22px}
  .footer-grid{gap:30px}
  .footer-bottom{font-size:10px}
  .chat-open{width:52px;height:52px}
  .chatbot{max-height:calc(100vh - 108px);overflow:auto}
}

/* Touch devices still receive tactile feedback; hover is not required. */
@media (hover:none), (pointer:coarse){
  .btn:active,.category-card:active,.service-card:active,.portfolio-card:active,
  .portfolio-control:active,.portfolio-page-thumb:active,.chat-question:active,
  .social-link:active{transform:translateY(-2px) scale(.99)}
  .catalog-card:active{transform:translateY(-5px) scale(1.01)}
  .portfolio-card:focus-within .portfolio-media img,
  .catalog-card:focus-within img{transform:scale(1.035)}
  .main-nav>a:active{background:rgba(12,111,180,.07);border-radius:12px}
}

/* Nunca depende de hover para pausar/analisar o catálogo. */
.catalog-carousel{touch-action:pan-y}
.portfolio-viewer{touch-action:pan-y}

/* Fallback do painel do assistente: usa a cor institucional já definida. */
.chat-head{background:var(--blue-dark)}
