/* =====================================================
   INTERA ENGENHARIA — Modern Design System
   Cores institucionais:
   --azul-claro:  #33BBED  (rgb 51,187,237)
   --azul-escuro: #006CB7  (rgb 0,108,183)
   ===================================================== */

:root{
  --azul-claro: #33BBED;
  --azul-escuro: #006CB7;
  --azul-deep: #004C82;
  --ink: #0A1929;
  --text: #2B3947;
  --text-secondary:rgba(107, 122, 140, 0.7);
  --muted: #6B7A8C;
  --line: #E5ECF3;
  --bg: #FFFFFF;
  --bg-soft: #F6FAFD;
  --grad-azul: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-escuro) 100%);
  --grad-azul-soft: linear-gradient(135deg, rgba(51,187,237,.08) 0%, rgba(0,108,183,.10) 100%);
  --shadow-sm: 0 2px 8px rgba(10,25,41,.04);
  --shadow-md: 0 10px 30px rgba(10,25,41,.08);
  --shadow-lg: 0 25px 60px rgba(0,76,130,.18);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter','Manrope','Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--azul-escuro); text-decoration:none; transition:.3s var(--ease)}
a:hover{color:var(--azul-claro)}

h1,h2,h3,h4,h5,h6{
  font-family:'Manrope','Inter',sans-serif;
  color:var(--ink); font-weight:700; letter-spacing:-.02em;
  margin:0 0 .6em; line-height:1.15;
}
h1{font-size:clamp(2.4rem,5vw,4.4rem); font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:700}
h3{font-size:clamp(1.3rem,1.15rem.1.15rem)}
h4{font-size:1.15rem; font-weight:600}
p{margin:0 0 1rem; color:var(--text)}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
section{padding:110px 0}

/* ===== Section title ===== */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--azul-escuro); margin-bottom:18px;
}
.section-eyebrow::before{
  content:""; width:28px; height:2px; background:var(--grad-azul); border-radius:2px;
}
.section-title{
  font-size:clamp(1.9rem,3vw,2.6rem); margin-bottom:18px;
}
.section-lead{color:var(--muted); font-size:1.05rem; max-width:920px}
.section-head{margin-bottom:64px}
.section-head.center{text-align:center}
.section-head.center .section-eyebrow,
.section-head.center .section-lead{margin-left:auto; margin-right:auto}
.section-head.center .section-lead{display:block}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem;
  letter-spacing:.01em; cursor:pointer;
  transition:.35s var(--ease); white-space:nowrap;
}
.btn i{transition:transform .35s var(--ease)}
.btn-primary{
  background:var(--grad-azul); color:#fff;
  box-shadow:0 12px 28px rgba(0,108,183,.28);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,108,183,.38); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:rgba(10,25,41,.15);}
.btn-ghost:hover{border-color:var(--azul-escuro); color:var(--azul-escuro)}
.btn-light{border-color: white;color: white;box-shadow:0 18px 38px rgba(0,108,183,.38);}
.btn-light:hover {transform:translateY(-2px);border-color: white;background: var(--dark-900);color: white;}

.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(10,25,41,.06);
  transition:.3s var(--ease);
}
.site-header.scrolled{box-shadow:0 8px 30px rgba(10,25,41,.06); background:rgba(255,255,255,.92)}
.nav-wrap{display:flex; padding: 14px 0; align-items:center; justify-content:space-between; padding:18px 0; gap:24px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.main-nav{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0;}
.main-nav a{
  color:var(--ink); font-weight:500; font-size:.94rem;
  padding:10px 14px; border-radius:8px; position:relative;
}
.main-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; background:var(--grad-azul); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.main-nav a:hover{color:var(--azul-escuro)}

.header-cta{display:flex; align-items:center; gap:14px}
.mobile-only-cta{ display:none; }
.nav-toggle{
  display:none; background:transparent; border:0; padding:8px; cursor:pointer; color:var(--ink); font-size:1.4rem;
}

/* Defina o tamanho da logo */
.brand .logo-light {
  width: auto;  /* Mantém a proporção exata da largura */
  display: block;
}

/* =====================================================
   HERO (Swiper full-screen)
   ===================================================== */
.hero{position:relative; height:100svh; min-height:640px; overflow:hidden; background:#fff;padding:0;}
.hero .swiper{height:100%}
.hero-slide{
  position:relative; height:100%;
  display:flex; align-items:center;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,25,41,.78) 0%, rgba(10,25,41,.45) 55%, rgba(10,25,41,.2) 100%),
    linear-gradient(180deg, rgba(0,76,130,.0) 40%, rgba(0,76,130,.6) 100%);
}
.hero-bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateY(0px) scale(1.08); /* estado padrão — JS assume o controle */
  transition:none;
}
/* .swiper-slide-active .hero-bg { transform: scale(1.08) } */

.hero-inner{position:relative; z-index:2; color:#fff; width:100%;padding-left: 50px;}
.hero-inner .container{max-width:1240px}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px; padding:8px 16px;
  border-radius:999px; background:rgba(255,255,255,.10); backdrop-filter:blur(10px);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:#fff; border:1px solid rgba(255,255,255,.18); margin-bottom:24px;
  opacity:0; transform:translateY(20px); transition:.8s var(--ease) .2s;
}
.hero-title{
  font-size:clamp(2.4rem,5.6vw,5rem); color:#fff; font-weight:800;
  max-width:880px; margin-bottom:22px; line-height:1.05;
  opacity:0; transform:translateY(30px); transition:.9s var(--ease) .35s;
}
.hero-title .accent{
  background:linear-gradient(120deg,var(--azul-claro),#9ce4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(1rem,1.3vw,1.18rem); color:rgba(255,255,255,100);
  max-width:580px; margin-bottom:36px;
  opacity:0; transform:translateY(30px); transition:.9s var(--ease) .5s;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(30px); transition:.9s var(--ease) .65s}
.swiper-slide-active .hero-eyebrow,
.swiper-slide-active .hero-title,
.swiper-slide-active .hero-sub,
.swiper-slide-active .hero-cta{opacity:1; transform:translateY(0)}

/* Hero controls */
.hero .swiper-pagination{bottom:36px !important}
.hero .swiper-pagination-bullet{
  width:36px; height:3px; border-radius:2px; background:rgba(255,255,255,.35); opacity:1; transition:.3s;
}
.hero .swiper-pagination-bullet-active{background:var(--azul-claro); width:54px}
.hero .swiper-button-next,.hero .swiper-button-prev{
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:.3s;
}
.hero .swiper-button-next:hover,.hero .swiper-button-prev:hover{background:var(--grad-azul); border-color:transparent}
.hero .swiper-button-next::after,.hero .swiper-button-prev::after{font-size:18px; font-weight:700}

/* =====================================================
   SERVICES
   ===================================================== */
/* =========================================================
   SERVIÇOS — NOVO DESIGN INTERA
   ========================================================= */

.services {
  position: relative;
  padding: 100px 0 105px;
  overflow: hidden;
}

/* detalhe decorativo discreto */
.services::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: 180px;
  border: 1px solid rgba(51, 187, 237, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.services .container {
  position: relative;
  z-index: 1;
}


/* ---------- CABEÇALHO ---------- */

.services .section-head {
  max-width: 900px;
  margin: 0 auto 58px;
}

.services .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #006cb7;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.services .section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #33bbed;
}

.services .section-title {
  color: #15364f;
  margin-bottom: 20px;
}

.services .section-lead {
  max-width: 820px;
  margin: 0 auto;
  color: #5d6b75;
  line-height: 1.75;
}


/* ---------- GRID ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}


/* ---------- CARD ---------- */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5edf1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 60, 90, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(51, 187, 237, 0.35);
  box-shadow: 0 18px 42px rgba(0, 60, 90, 0.12);
}


/* ---------- IMAGEM ---------- */

.service-thumb {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #dfeaf0;
}

.service-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 54, 91, 0) 45%,
    rgba(0, 54, 91, 0.18) 100%
  );
  pointer-events: none;
}

.service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.service-card:hover .service-thumb img {
  transform: scale(1.05);
}


/* ---------- CORPO ---------- */

.service-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 38px 27px 28px;
}


/* ---------- ÍCONE ---------- */

.service-icon {
  position: absolute;
  top: -25px;
  left: 27px;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #ffffff;

  color: #006cb7;
  font-size: 20px;

  box-shadow: 0 6px 18px rgba(0, 75, 110, 0.12);
  z-index: 2;
}


/* ---------- TÍTULO ---------- */

.service-body h3 {
  margin: 0 0 13px;
  color: #15364f;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
}


/* ---------- TEXTO ---------- */

.service-body p {
  margin: 0;
  color: #687781;
  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   OUTRAS ESPECIALIDADES
   ========================================================= */


.more-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  border-left: 1px solid #e2ebef;
  padding-top: 10px;
}

.mini-servico {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 42px;
  padding: 5px 15px;

  color: #536873;
  font-size: 13px;
  font-weight: 600;

  border-right: 1px solid #e2ebef;
  transition: color 0.25s ease;
}

.mini-servico:last-child {
  border-right: none;
}

.mini-servico i {
  color: #006cb7;
  font-size: 17px;
}

.mini-servico:hover {
  color: #006cb7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .services {
    padding: 85px 0 90px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .services-extra {
    display: block;
  }

  .services-extra-title {
    margin-bottom: 20px;
  }

  .more-services {
    border-left: none;
  }

  .hero .swiper-button-next, .hero .swiper-button-prev {
    width: 44px;
    height: 44px;
  }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 680px) {

  .services {
    padding: 70px 0 75px;
  }

  .services .section-head {
    margin-bottom: 42px;
  }

  .services .section-title {
    font-size: 30px;
  }

  .services .section-lead {
    font-size: 14px;
    line-height: 1.7;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .service-thumb {
    height: 220px;
  }

  .service-body {
    padding: 38px 24px 25px;
  }

  .service-icon {
    left: 24px;
  }

  .services-extra {
    margin-top: 35px;
    padding: 24px 20px;
  }

  .services-extra-title {
    text-align: center;
  }

  .more-services {
    grid-template-columns: 1fr;
  }

  .mini-servico {
    justify-content: flex-start;
    padding: 13px 5px;
    border-right: none;
    border-bottom: 1px solid #e2ebef;
  }

  .mini-servico:last-child {
    border-bottom: none;
  }

  .hero-eyebrow{
    font-size: .48rem;
  }

  .hero .swiper-button-next, .hero .swiper-button-prev {
    width: 44px;
    height: 44px;
  }

  .hero-inner {
    padding-left: 40px;
  }
}

/* =====================================================
   PROJECTS
   ===================================================== */
.recent-projects{background:var(--bg-soft); position:relative}
.projects-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; flex-wrap:wrap}
.isotope-filters{
  display:flex; gap:6px; list-style:none; padding:6px; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  flex-wrap:wrap; box-shadow:var(--shadow-sm);
}
.isotope-filters a{
  display:inline-block; padding:9px 18px; border-radius:999px;
  font-size:.85rem; font-weight:500; color:var(--text); cursor:pointer; transition:.3s;
}
.isotope-filters a:hover{color:var(--azul-escuro)}
.isotope-filters a.selected{background:var(--grad-azul); color:#fff; box-shadow:0 8px 18px rgba(0,108,183,.25)}

.projects-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.projects-grid .portfolio-item:nth-child(5n+1){grid-column:span 2; grid-row:span 2}
.portfolio-item{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; background:#000; isolation:isolate;
}
.portfolio-item img{width:100%; height:100%; transition:transform 1s var(--ease); opacity:.92}
.portfolio-item:hover img{transform:scale(1.08); opacity:1}
.portfolio-item .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:28px;
  background:linear-gradient(180deg, transparent 40%, rgba(10,25,41,.85) 100%);
  color:#fff; transition:.4s var(--ease);
}
.portfolio-item .overlay-content h4{color:#fff; margin:0 0 6px; font-size:1.1rem; font-weight:600}
.portfolio-item .overlay-content span{color:var(--azul-claro); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.portfolio-item .overlay-content{transform:translateY(8px); transition:.4s var(--ease)}
.portfolio-item:hover .overlay-content{transform:translateY(0)}
.portfolio-item.is-hidden{display:none}

/* =====================================================
   ABOUT US
   ===================================================== */
.about-us{background:#fff; position:relative; overflow:hidden}
.about-us::before{
  content:""; position:absolute; top:-200px; right:-200px; width:600px; height:600px;
  background:radial-gradient(circle, rgba(51,187,237,.12), transparent 70%);
  pointer-events:none;
}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.about-grid img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg)}
.about-features{display:grid; gap:14px; margin-top:28px}
.about-feature{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
  transition:.3s var(--ease);
}
.about-feature:hover{transform:translateX(6px); border-color:var(--azul-claro); background:#fff; box-shadow:var(--shadow-sm)}
.about-feature .icon{
  width:42px; height:42px; border-radius:10px; background:var(--grad-azul);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.about-feature h4{margin:0; font-size:.98rem; font-weight:600; color:var(--ink)}

.intera-image-montage {min-height: 500px;position: relative;padding: 0 34px 52px 0;}
.intera-image {overflow: hidden; border-radius: 22px; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.38);}
.intera-image img {display: block; width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s ease;}
.intera-image-main {height: 410px;width: 88%;margin-left: auto;}
.intera-image-main img {object-position: center;}
.intera-image-detail {position: absolute;left: 0;bottom: 0;width: 48%;height: 190px; border: 5px solid var(--bg-dark-2);}
.intera-image-detail img {object-position: center;}
.intera-image:hover img {transform: scale(1.06);}
.intera-image-caption {position: absolute;right: 0;bottom: 14px;display: flex;align-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;}
.caption-line {
    width: 28px;
    height: 2px;
    background: var(--grad-azul);
}
/* About 2 — Mission/Vision/Values */
.about-us-2{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
}
.about-us-2::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(51,187,237,.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,108,183,.25), transparent 45%);
  pointer-events:none;
}
.about-us-2 .container{position:relative; z-index:1}
.about-us-2 .section-eyebrow{color:var(--azul-claro)}
.about-us-2 .section-title{color:#fff}
.mvv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
.mvv-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); padding:36px 32px; transition:.4s var(--ease);
  backdrop-filter:blur(20px);
}
.mvv-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(51,187,237,.4)}
.mvv-card .box-icon{
  width:60px; height:60px; border-radius:16px; background:var(--grad-azul);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  font-size:1.4rem; margin-bottom:22px; box-shadow:0 10px 24px rgba(0,108,183,.4);
}
.mvv-card h4{color:#fff; font-size:1.35rem; margin-bottom:14px}
.mvv-card p{color:rgba(255,255,255,.75); font-size:.95rem; line-height:1.7; margin:0}
.mvv-card p b{color:var(--azul-claro); font-weight:600}

/* ===== Valores em grid de ícones (novo) ===== */
/* ===== Reverter o "esticar" forçado — não precisamos disso ===== */
.mvv-card p{
  flex:none;
}

/* =====================================================
   CLIENTS
   ===================================================== */
.clients{background:#fff; padding:90px 0}
.clients-track{
  overflow:hidden; position:relative; padding:24px 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track ul{
  display:flex; /*gap:64px;*/ list-style:none; padding:0; margin:0;
  width:max-content; animation:marquee 40s linear infinite;
}
.clients-track li{flex-shrink:0; display:flex; align-items:center; justify-content:center; height:60px}
.clients-track img{
  max-height:48px; width:auto; object-fit:contain;
  filter:grayscale(100%) opacity(.55); transition:.4s var(--ease);
}
.clients-track li:hover img{filter:grayscale(0) opacity(1); transform:scale(1.08)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}


/* =========================================
   CTA Section
   ========================================= */
.section-cta {padding: 80px 0; position: relative; overflow: hidden;}
.cta-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.cta-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/quemsomos3.jpg') center/cover no-repeat;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 108, 183, 0.9) 0%, rgba(51, 187, 237, 0.9) 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --primary: #33bbed;
    --primary-dark: #006cb7;
    /*background: var(--grad-azul);*/
}

.cta-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
    text-align: center !important;
}

.cta-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: auto;
}

.cta-content .btn-primary {
    background: white;
    color: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-content .btn-primary:hover {
    background: var(--dark-900);
    color: white;
}

.text-gradient2 {
    background: linear-gradient(180deg, rgba(51, 187, 237, 0.55) 0%, rgba(141, 223, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-us{background:var(--bg-soft)}
.contact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:48px; box-shadow:var(--shadow-sm);
}
.contato-form{display:grid; gap:16px}
.contato-form .row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contato-form input,.contato-form textarea{
  width:100%; padding:14px 18px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-family:inherit; font-size:.95rem; color:var(--ink);
  transition:.3s var(--ease); outline:none;
}
.contato-form input:focus,.contato-form textarea:focus{
  border-color:var(--azul-claro); box-shadow:0 0 0 4px rgba(51,187,237,.15);
}
.contato-form textarea{min-height:140px; resize:vertical}
.contato-form button{
  margin-top:6px; align-self:start;
  padding:16px 32px; border-radius:999px; border:0; cursor:pointer;
  background:var(--grad-azul); color:#fff; font-weight:600; font-size:.95rem;
  box-shadow:0 12px 28px rgba(0,108,183,.28); transition:.35s var(--ease);
}
.contato-form button:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,108,183,.38)}
.contact-info{padding:8px 0; min-width: 0;}
.contact-info h4{margin-bottom:8px; font-size:1.4rem}
.contact-info > p{color:var(--muted); margin-bottom:24px}
.contact-info ul{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.contact-info li a{
  display:flex; align-items:flex-start; gap:14px; padding:14px 18px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  color:var(--ink); transition:.3s var(--ease);
}
.contact-info li a:hover{border-color:var(--azul-claro); transform:translateX(4px); box-shadow:var(--shadow-sm)}
.contact-info li i{
  width:36px; height:36px; border-radius:10px; background:var(--grad-azul-soft);
  color:var(--azul-escuro); display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0;
  margin-top: 0; /* alinha com a primeira linha do texto */
}
.contact-info li a span{
  flex: 1;
  min-width: 0;
  word-break: break-word;
  padding-top: 8px; /* centraliza opticamente com o ícone de 36px */
}

.form-feedback { display: none; margin-top: 20px; padding: 16px 20px; border-radius: 8px; font-size: 15px; line-height: 1.5; } 
.form-feedback.sucesso { display: block; color: #17643a; background: #eaf7ef; border: 1px solid #b9e3c8; } 
.form-feedback.erro { display: block; color: #9b2c2c; background: #fff1f1; border: 1px solid #f0c2c2; }

/* =====================================================
   FOOTER
   ===================================================== */
footer{background:#fff; border-top:1px solid var(--line);font-family: 'Inter', 'Manrope', 'Helvetica Neue', Arial, sans-serif;}
.main-footer{padding:80px 0 0; color: var(--text-secondary);}
.footer-grid{display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:48px}
.footer-brand .brand{margin-bottom:18px}
.footer-brand p{color:var(--text-secondary); font-size:.92rem; max-width:640px;padding: 10px 0;}
.footer-widget ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.footer-widget p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.footer-social {display: flex; gap: 12px;}
.footer-social {display: flex; gap: 12px;}
.footer-social a {width: 40px; height: 40px;display: flex;align-items: center;justify-content: center;background: #f3f4f6; border: 1px solid var(--grad-azul); border-radius: 50%; color:var(--text-secondary); font-size: 16px;transition: 0.3s var(--ease);}
.footer-social a:hover {
    background: var(--grad-azul);
    border-color: transparent;
    color: white;
}
.footer-widget h4 {
    font-size: 18px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
    color: #6b7a8c;
    font-weight: 700;
}
.footer-widget h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--grad-azul);
}

.footer-links a {
    color:var(--text-secondary); 
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-links a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #33bbed;
    border-radius: 50%;
    opacity: 0;
    transition:  0.3s var(--ease);
}
.footer-links a:hover {
    color: var(--azul-claro);
    padding-left: 6px;
}
.footer-links a:hover::before {
    opacity: 1;
}

/* Footer Bottom */
.footer-bottom {
    padding: 12px 0;
}

.copyright {
    color: rgba(107, 122, 140, 0.5);
    font-size: 12px;
    margin: 0;
}

.footer-credits {
    color: rgba(107, 122, 140, 0.5);
    font-size: 14px;
    margin: 0;
}

.footer-credits i {
    color: #e74c3c;
}

.text-md-end {
        text-align: right !important;
      }

/* =========================================
   WhatsApp Float
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: transition:.3s var(--ease);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.5);
    color: white;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #25D366;
    border-radius: 50%;
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1024px){

  .projects-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid .portfolio-item:nth-child(5n+1){grid-column:span 2; grid-row:span 1}
  .about-grid{grid-template-columns:1fr; gap:40px}
  .processo-grid{grid-template-columns:repeat(2,1fr)}
  .mvv-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1.2fr 1fr; gap:40px}
}
@media (max-width:768px){
  section{padding:80px 0}
  .main-nav{
    position:fixed; top:94px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:24px;
    box-shadow:var(--shadow-md); transform:translateY(-120%); transition:.4s var(--ease);
    border-top:1px solid var(--line);visibility: hidden;}
  .main-nav.open{transform:translateY(0);visibility: visible;transition: transform .4s var(--ease);}
  .main-nav a{padding:14px 16px; border-radius:10px}
  .nav-toggle{display:inline-flex}
  .header-cta .btn{display:none;}
  .header-cta {padding-right:10px}
  .mobile-only-cta{ display:block; }
  .projects-grid{grid-template-columns:1fr 1fr; gap:14px}
  .projects-grid .portfolio-item:nth-child(5n+1){grid-column:span 2}
  .processo-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom {text-align: center;}
  .footer-bottom .text-md-end {text-align: center !important; margin-top: 10px;}
  .hero{min-height:560px}
  .quote-intro .container{flex-direction:column; align-items:flex-start}
  .contact-card{padding:32px 10px; min-width: 0;}
  .contact-info{padding:8px 0 0;}
  .contact-info li a{padding: 16px;gap: 12px;}
  .portfolio-item .overlay {padding: 18px;}
  .portfolio-item .overlay-content h4 {font-size:0.8rem; }
  .portfolio-item .overlay-content span {font-size: 0.5rem;text-wrap: nowrap;}
  .intera-image-caption {max-width: 50%}
}
/*
--azul-claro: #33BBED;
  --azul-escuro: #006CB7;
  --azul-deep: #004C82;
  --ink: #0A1929;
  --text: #2B3947;
  --muted: #6B7A8C;
  --line: #E5ECF3;
  --bg: #FFFFFF;
  --bg-soft: #F6FAFD;
  --grad-azul: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-escuro) 100%);
  --grad-azul-soft: linear-gradient(135deg, rgba(51,187,237,.08) 0%, rgba(0,108,183,.10) 100%);
  --shadow-sm: 0 2px 8px rgba(10,25,41,.04);
  --shadow-md: 0 10px 30px rgba(10,25,41,.08);
  --shadow-lg: 0 25px 60px rgba(0,76,130,.18);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1240px;
}*/
/* =========================================
   Processo Section
   ========================================= */
.section-processo {
    background: var(--bg-soft);
}

.processo-timeline {
    position: relative;
    margin-top: 60px;
}

.timeline-line {
    position: absolute;
    top: 80px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #eceef1;
}

.timeline-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--grad-azul);
}

.processo-step {
    text-align: center;
    position: relative;
    padding-top: 40px;
}

.step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.step-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 50%;
    margin: 0 auto 24px;
    font-size: 28px;
    color: var(--azul-claro);
    position: relative;
    z-index: 1;
    transition: 0.3s ease;
}

.processo-step:hover .step-icon {
    background: var(--grad-azul);
    border-color: transparent;
    color: white;
    transform: scale(1.1);
}

.processo-step h4 {
    font-size: 18px;
    margin-bottom: 12px;
}

.processo-step p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    max-width: 180px;
    margin: 0 auto;
}

.processo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:32px; text-align:center; position:relative; z-index:1}

/* ===== Processo: Tablet ===== */
@media (max-width:1024px){
  .processo-grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:56px;
  }
  .timeline-line{
    display:none; /* a linha só faz sentido numa fileira única */
  }
  .processo-step p{
    max-width:240px;
  }
}

/* ===== Processo: Mobile ===== */
@media (max-width:768px){
  .processo-grid{
    grid-template-columns:1fr;
    gap:44px;
    max-width:320px;
    margin:0 auto;
  }
  .processo-step{
    padding-top:34px;
  }
  .step-icon{
    width:68px;
    height:68px;
    font-size:24px;
    margin-bottom:18px;
  }
  .processo-step p{
    max-width:280px;
  }
  .processo-timeline{
    margin-top:44px;
  }
}

.form-lgpd{
  font-size:.7rem; line-height:1.4; color:#5B6B7A; margin:0
}