/* ========== PALETA / BASE ========== */
:root{
    --nav-h: 72px;
    --container: 1280px;
  
    --ink:#0f172a;
    --muted:#55607a;
  
    --accent:#44c4ff;
    --accent-600:#007bbd;
    --blue:#0b1e4b;
  
    /* superfícies para blocos alternados */
    --surface-gray:#f7f8fa; /* cinza claro */
    --surface-white:#ffffff;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    overflow-x:hidden;
    font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    color:var(--ink);
    background:#fff;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
  
  /* ========== NAVBAR ========== */
  .navbar{
    position:sticky; top:0; z-index:20;
    height:var(--nav-h);
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
  .navbar .container{
    height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
  .brand-icon{width:32px; height:32px}
  .brand-name{color:#1e40af}
  .brand-role{color:#1a1b1b; margin-left:.2rem}
  
  /* MENU: underline elegante + botão Login azul */
  .menu{ display:flex; align-items:center; gap:1.6rem; }
  
  .menu a:not(.btn-login){
    position:relative;
    display:inline-flex; align-items:center;
    font-weight:600; font-size:.98rem;
    padding:.25rem 0 .5rem;
    color:#333; letter-spacing:.5px;
    transition: color .2s ease, background-size .25s ease;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 2px;
  }
  .menu a:not(.btn-login):hover,
  .menu a:not(.btn-login):focus-visible{
    color:var(--accent);
    background-size:100% 2px;
    outline:none;
  }
  
  .menu .btn-login{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 14px;
    border-radius:6px;
    font-weight:600;
    color:#fff !important;
    background:var(--accent);
    box-shadow:0 6px 16px rgba(68,196,255,.35);
    transition:background .3s ease, transform .2s ease, box-shadow .25s ease;
    text-decoration:none;
    background-image:none;
  }
  .menu .btn-login:hover,
  .menu .btn-login:focus-visible{
    background:var(--accent-600);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,123,189,.35);
    outline:none;
  }
  
  /* ========== SEÇÕES ALTERNADAS (CINZA E BRANCO) ========== */
  .section-gray{ background: var(--surface-gray); }
  .section-white{ background: var(--surface-white); }
  
  .section-gray,
  .section-white{ padding:72px 0; }
  
  /* ========== HERO ========== */
  .hero{
    position:relative; isolation:isolate;
    min-height:72vh; display:flex; align-items:center;
    color:#fff;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-1;
    background: var(--hero) center/cover no-repeat;
    filter: brightness(0.55);
    transition: transform .8s ease, filter .8s ease;
  }
  /* leve tinta escura por cima da imagem para uniformizar cores */
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: linear-gradient(180deg, rgba(17,24,39,.35) 0%, rgba(17,24,39,.55) 100%);
  }
  .hero:hover .hero-bg{ transform: scale(1.05); filter: brightness(0.45); }
  
  .hero-inner{ text-align:center; padding: clamp(40px, 6vw, 80px) 0; }
  .hero h1{
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
    margin:0 0 .4rem; font-weight:800; letter-spacing:.3px; color:#fff;
  }
  .hero h2{margin:0 0 .6rem; font-weight:700; color:#e9f0f6}
  .hero p{margin:0 0 1.2rem; font-size: clamp(1.05rem, .9rem + .5vw, 1.25rem); color:#e5e7eb}
  
  /* Botões hero */
  .btn-primary{
    display:inline-block; background:var(--accent); color:#fff;
    font-weight:600; padding:.85rem 1.6rem; border-radius:8px; text-decoration:none;
    box-shadow:0 4px 15px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
  }
  .btn-primary:hover{ background:var(--accent-600); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25) }
  
  .btn-outline{
    display:inline-block; border:2px solid var(--accent); color:var(--accent);
    border-radius:8px; padding:.65rem 1.2rem; font-weight:600;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .25s ease;
  }
  .btn-outline:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12) }
  
  /* ========== SOBRE (imagem metade direita) ========== */
  .sobre{ position:relative; padding:0; margin:0; min-height: clamp(600px, 88vh, 980px) }
  .sobre .container.about-grid{ position:static; display:block; padding:0; }
  .about-text{ position:relative; z-index:2; max-width:640px; padding: clamp(56px, 7vw, 96px) clamp(24px, 3.5vw, 56px) }
  .about-text h2{ font-size: clamp(1.8rem, 1.3rem + 1vw, 2.4rem); margin:0 0 .6rem; color:#0f0f0f }
  .about-text p{ color:var(--muted); margin:0 0 1rem }
  .about-text h3{ margin:1.2rem 0 .4rem }
  .formacao{ margin:.2rem 0 1.2rem; padding-left:1.1rem; color:#334155 }
  .formacao li{ margin:.35rem 0 }
  
  .about-photo{ position:absolute; z-index:1; top:0; right:0; bottom:0; left:50%; overflow:hidden }
  .about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40% }
  
  /* ========== SERVIÇOS ========== */
  .servicos h2{
    font-size: clamp(1.9rem, 1.3rem + 1.1vw, 2.4rem);
    text-align:center; margin:0 0 24px; color:#44c4ff;;
  }
  .services-grid{
    display:grid; grid-template-columns: repeat(4,1fr);
    gap:24px; padding:0 16px;
  }
  .service-card{
    background:#fff; border:1.5px solid #e9eefb; border-radius:16px;
    padding:18px 20px; text-align:center;
    box-shadow:0 10px 24px rgba(13,55,104,.08);
    transition: transform .12s ease, box-shadow .25s ease, border-color .2s ease;
  }
  .service-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(13, 55, 104, .12);
    border-color: #cfdcff;
  }
  
  /* ========== DEPOIMENTOS (BRANCO) ========== */
  .depoimentos-blocos h2{
    color:#44c4ff; text-align:center;
    font-size: clamp(1.9rem, 1.3rem + 1.1vw, 2.4rem);
    margin:0 0 22px;
  }
  .quote-card{
    background:#fff; border:1.5px solid #e6efff; border-radius:16px;
    padding:20px 24px; box-shadow:0 12px 28px rgba(13,55,104,.10);
    max-width:1100px; margin:0 auto; position:relative;
  }
  .quote-card::before{
    content:"“"; position:absolute; left:16px; top:6px;
    font-size:34px; line-height:1; color:#9cc0ff; opacity:.9;
  }
  .quote-card p{margin:0; padding-left:26px; color:#0d1b2a}
  .quote-card strong{font-weight:800}
  
  /* ========== FOOTER & WhatsApp ========== */
  .footer{ padding:34px 0; border-top:1px solid #e5e7eb; text-align:center; color:#64748b }
  .whats{
    position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%;
    display:grid; place-items:center; background:#25D366; box-shadow:0 8px 22px rgba(0,0,0,.18)
  }
  .whats img{ width:28px; height:28px; filter:brightness(0) invert(1) }
  
  /* ========== RESPONSIVO ========== */
  @media (max-width:1100px){
    .services-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width:960px){
    .sobre{ min-height:auto; }
    .about-photo{ position:static; height: clamp(340px, 60vw, 520px); }
  }
  @media (max-width:620px){
    .services-grid{ grid-template-columns: 1fr; }
  }
  
  /* ===== SERVIÇOS – realce azul claro e hover com destaque ===== */
  .servicos h2{
    color:#44c4ff; /* já combina com o azul dos botões/título */
  }
  
  .service-card{
    --card-accent: #44c4ff;
  
    position: relative;
    background:#fff;
    border:1.5px solid #dbeeff;              /* azul clarinho de base */
    border-radius:16px;
    box-shadow: 0 10px 24px rgba(68,196,255,.08);  /* sombra com leve tom azul */
    transition:
      transform .18s ease,
      box-shadow .25s ease,
      border-color .20s ease,
      background-color .20s ease,
      color .20s ease;
  }
  
  .service-card h4{
    color:#0f172a;
    transition: color .2s ease;
  }
  
  /* Efeito de destaque ao passar o mouse */
  .service-card:hover{
    transform: translateY(-6px);
    border-color: var(--card-accent);                     /* borda azul mais forte */
  
    box-shadow:
      0 18px 40px rgba(68,196,255,.28),                   /* glow azul */
      0 6px 16px rgba(0,0,0,.06);
  }
  
  
  
  /* opcional: um “anel” sutil ao redor no hover */
  .service-card::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    box-shadow: 0 0 0 0 rgba(68,196,255,0);
    transition: box-shadow .25s ease;
    pointer-events:none;
  }
  .service-card:hover::after{
    box-shadow: 0 0 0 3px rgba(68,196,255,.35);
  }
  
  /* ===== Mobile tweaks (≤ 768px) – só adições ===== */
  @media (max-width: 768px) {
    /* respiro geral */
    .container{ width:min(100% - 1.25rem, var(--container)); }
  
    /* navbar empilha brand + menu, sem precisar de HTML novo */
    .navbar{ height:auto; padding:.45rem 0; }
    .navbar .container{ flex-direction:column; align-items:stretch; gap:.25rem; }
    .brand{ gap:.5rem; }
  
    .menu{
      display:flex; flex-wrap:wrap; gap:.75rem;
      justify-content:center; /* centraliza os links */
    }
    .menu a{ font-size:.95rem; padding:.35rem 0; }
    .menu .btn-login{ padding:.45rem .9rem; border-radius:8px; }
  
    /* hero mais compacto */
    .hero{ min-height:56vh; }
    .hero-inner{ padding: clamp(28px, 7vw, 52px) 0; }
    .hero p{ font-size: clamp(.98rem, .9rem + .2vw, 1.05rem); }
    .btn-primary{ padding:.8rem 1.25rem; }
  
    /* seções com menos padding no mobile */
    .section-gray, .section-white{ padding:48px 0; }
  
    /* SOBRE: foto vem abaixo do texto e ganha altura fixa responsiva */
    .about-text{ padding: clamp(28px, 7vw, 52px) clamp(16px, 5vw, 28px); }
    .about-photo{ position:static; height: clamp(240px, 48vw, 420px); }
  
    /* SERVIÇOS: 1 coluna, cards com menos padding */
    .services-grid{ grid-template-columns:1fr; gap:16px; padding:0; }
    .service-card{ padding:16px; border-radius:14px; }
    .service-card h4{ font-size:1.05rem; }
  
    /* DEPOIMENTOS e footer com respiro */
    .quote-card{ padding:16px; }
    .footer .container{ padding:0 1rem; }
  }
  
  /* ajustes extras para telas bem pequenas */
  @media (max-width: 420px){
    .brand-name{ font-size:1.05rem; }
    .brand-role{ font-size:.8rem; }
    .menu{ gap:.5rem; }
    .menu a{ font-size:.9rem; }
    .hero h1{ font-size: clamp(1.8rem, 1.2rem + 4.2vw, 2.2rem); }
  }
  
  /* acessibilidade: menos animação para quem prefere */
  @media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto !important; }
    .service-card,
    .hero:hover .hero-bg{ transition:none; transform:none; }
  }
  
  /* ====== FIX: Sobre no mobile (empilhar e remover posicionamento absoluto) ====== */
  @media (max-width: 992px){
    /* garante fluxo vertical */
    .sobre{ min-height:auto; }
    .sobre .container.about-grid{
      display:flex; 
      flex-direction:column; 
      padding:0;                   /* já tem padding dentro dos filhos */
    }
  
    /* texto primeiro, com respiro */
    .about-text{
      order:1;
      z-index:auto;
      padding: clamp(24px, 6vw, 40px) clamp(16px, 5vw, 28px);
    }
  
    /* imagem depois, sem absoluto e com recorte cover */
    .about-photo{
      order:2;
      position:relative;           /* remove absolute herdado */
      top:auto; right:auto; bottom:auto; left:auto;
      z-index:auto;
      width:100%;
      height: clamp(240px, 52vw, 420px);
      margin: 8px 0 0;
      border-radius: 16px;
      overflow:hidden;             /* canto arredondado + recorte */
    }
    .about-photo img{
      position:absolute; inset:0;  /* preenche o container */
      width:100%; height:100%;
      object-fit:cover;
      object-position:50% 40%;
    }
  }
  
  /* Garante que o botão fique sempre por cima */
  .whats{
    z-index: 9999;
  }
  
  /* Se o seu ícone já é branco/verde/colorido, NÃO use filtro */
  .whats img{
    width: 28px;
    height: 28px;
    display: block;
    filter: none !important;   /* <- remove a inversão que estraga as cores */
    object-fit: contain;
  }