/* ======================================================================
   DATACORE | PARÂMETROS DE PERSONALIZAÇÃO — EDITE APENAS ESTE BLOCO
   Altere os valores abaixo e atualize a página com Ctrl + F5.
   Raios: informe px (ex.: 0px, 5px, 12px, 24px).
   Cores: informe #HEX ou uma cor CSS válida.
   Fontes: mantenha as aspas em nomes compostos e as vírgulas.
   Inter e Poppins já são carregadas pelo index.html.
   A topbar e o rodapé conservam o azul-marinho institucional.
   ====================================================================== */
:root {
  /* 1) ARREDONDAMENTO */
  --raio-secao: 8px;                      /* Seções e cartões de conteúdo */
  --raio-botao: 8px;                     /* Demais botões */
  --tamanho-whatsapp-flutuante: 58px;    /* Diâmetro do WhatsApp */
  /* POSIÇÃO DO WHATSAPP: alinhado com a borda das seções no desktop */
  --largura-maxima-conteudo: 1200px;      /* Mesma largura máxima do .container */
  --recuo-whatsapp-secao: 0px;            /* 0px = alinhado; 12px = mais para dentro */
  --distancia-whatsapp-rodape-tela: 20px; /* Distância da parte inferior da janela */

  /* 1A) SETAS: galeria, equipe e serviços */
  --raio-setas: 10px;                    /* Arredondamento das setas */
  --cor-fundo-setas: transparent;            /* Fundo das setas */
  --cor-icone-setas: #0B1B3A;            /* COR DA FONTE: todas as setas ← → ‹ › */
  --cor-borda-setas: transparent;            /* Borda das setas */
  --cor-icone-setas-modal: #FFFFFF;         /* Setas claras na galeria ampliada */

  /* 1B) TELA CHEIA: ícone de janelas sobrepostas na imagem */
  --raio-tela-cheia: 10px;               /* Arredondamento */
  --cor-fundo-tela-cheia: #FFFFFF;       /* Fundo do botão */
  --cor-icone-tela-cheia: #000000;       /* Cor do ícone (texto) */
  --cor-borda-tela-cheia: #DBE5F0;       /* Borda do botão */

  /* 2) CORES DOS FUNDOS */
  --cor-fundo-geral: #FFFFFF;           /* Fundo da página */
  --cor-fundo-secao: #FFFFFF;           /* Seções e cartões */
  --cor-fundo-botao: #2B9CE7;           /* Botões principais */
  --cor-fundo-botao-secundario: #EAF6FF;/* Botões secundários */
  --cor-whatsapp-flutuante: #25D366;    /* Atalho fixo de contato */

  /* 3) CORES DE TEXTO */
  --cor-texto: #0B1B3A;                 /* Texto principal */
  --cor-texto-secundario: #4B607A;      /* Descrições */
  --cor-titulo: #0B1B3A;                /* Títulos */
  --cor-destaque: #167EC5;              /* Palavras azuis nos títulos */
  --cor-texto-botao: #ffffff;          /* Texto dos botões principais */
  --cor-texto-botao-secundario: #3c4f75;/* Texto dos botões secundários */

  /* 4) FAMÍLIAS TIPOGRÁFICAS */
  --fonte-texto: 'Inter', Arial, sans-serif;
  --fonte-titulo: 'Poppins', 'Inter', Arial, sans-serif;
  --fonte-botao: 'Poppins', 'Inter', Arial, sans-serif;
  --fonte-setas: var(--fonte-botao);      /* Fonte usada pelas setas */
}

/* Paleta DataCore extraída da capa Vendas e Estoque:
   azul-marinho #0A1A38, azul #1D86CD, ciano #12B9D6 e branco #FFFFFF. */
:root{
  --bg:#091934;
  --bg-2:#0A1A38;
  --surface:#10294E;
  --surface-2:#143861;
  --card:#FFFFFF;
  --line:#244A77;
  --line-soft:#356C9D;
  --text:#FFFFFF;
  --muted:#BDD1E8;
  --accent:#14BEDB;
  --accent-2:#258FE3;
  --white:#FFFFFF;
  --dark:#0A1A38;
  --dark-2:#12518D;
  --shadow:0 18px 50px rgba(0,8,27,.32);
  --radius:18px;
}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
    body{margin:0;overflow-x:clip;background:radial-gradient(ellipse at 0% 2%,rgba(17,170,206,.18) 0%,transparent 25%),radial-gradient(ellipse at 100% 35%,rgba(22,114,210,.12) 0%,transparent 30%),linear-gradient(180deg,#08172F 0%,#0A1A38 55%,#07152D 100%);color:var(--text);font:14px/1.6 Inter,system-ui,sans-serif}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,a{font:inherit}
    button{cursor:pointer}
    button:focus-visible,a:focus-visible{outline:3px solid #6ADFF6;outline-offset:3px}
    .container{width:min(1140px,calc(100% - 24px));margin-inline:auto}
    .topbar{position:sticky;top:0;z-index:50;background:rgba(8,24,51,.96);border-bottom:1px solid rgba(77,169,235,.20);backdrop-filter:blur(16px)}
    .topinner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:10px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0}
    .logo-wrap{width:48px;height:48px;border-radius:14px;padding:5px;background:linear-gradient(135deg,#174B85,#0A1A38);border:1px solid rgba(69,171,240,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
    .logo{width:100%;height:100%;object-fit:contain;border-radius:10px}
    .brand-text{min-width:0}
    .brand-text strong{display:block;font-size:20px;line-height:1;font-weight:900;letter-spacing:-.04em}
    .brand-text small{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;color:#79CFFA;margin-top:5px}
    .nav{display:flex;align-items:center;gap:10px}
    .nav a{font-size:12px;font-weight:700;color:#E5F2FF}
    .nav .cta{background:#1D86CD;color:#FFFFFF;padding:11px 14px;border-radius:12px;white-space:nowrap;font-weight:800}

    .hero{padding:34px 0 24px}
    .hero-card{background:linear-gradient(122deg,rgba(17,48,92,.97) 0%,rgba(10,28,58,.98) 55%,rgba(7,21,44,.99) 100%);border:1px solid rgba(68,145,213,.24);border-radius:24px;padding:24px 18px;box-shadow:var(--shadow);overflow:hidden;position:relative}
    .hero-card::after{content:"";position:absolute;right:-85px;top:-95px;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(18,185,214,.16) 0%,rgba(18,185,214,0) 70%);pointer-events:none}
    .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:800;margin-bottom:10px}
    h1,h2,h3,p{margin:0}
    .hero h1{font-size:clamp(30px,8vw,58px);line-height:1.05;letter-spacing:-.06em;max-width:740px}
    .hero h1 span{color:#3CAAF4}
    .hero p{margin-top:15px;color:var(--muted);max-width:620px}
    .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;padding:12px 18px;font-size:13px;font-weight:800;border:1px solid transparent;transition:transform .15s ease,background .15s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(105deg,#1489D3,#198FE4);color:#FFFFFF}
    .btn-secondary{background:rgba(18,46,86,.85);color:#FFFFFF;border-color:rgba(88,163,221,.38)}
    .more-box{margin-top:16px;padding:16px;border-radius:16px;background:rgba(9,28,59,.82);border:1px solid rgba(71,153,222,.25)}
    .more-box[hidden]{display:none}
    .more-box p{color:var(--muted)}

    .section{padding:26px 0}
    .section-title{margin-bottom:16px}
    .section-title h2{font-size:clamp(24px,6.5vw,40px);line-height:1.08;letter-spacing:-.05em}
    .section-title h2 span{color:#3CAAF4}
    .section-title p{margin-top:10px;color:var(--muted)}

    .solutions{display:grid;gap:12px}
    .solution{background:linear-gradient(180deg,#112A50,#0A1C3A);border:1px solid rgba(58,132,205,.30);border-radius:18px;padding:18px}
    .solution-tag{display:inline-flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--accent);margin-bottom:8px}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
    .solution h3{font-size:17px;line-height:1.32;margin-bottom:8px}
    .solution p{font-size:13px;color:var(--muted)}
    .solution .result{margin-top:12px;padding-top:12px;border-top:1px solid rgba(88,163,221,.30);font-weight:700;color:#E7F6FF;font-size:13px}
    .more-action{margin-top:14px}

    .panel-section{padding:30px 0}
    .panel-shell{background:linear-gradient(180deg,#112A50,#091B3A);border:1px solid rgba(70,153,225,.28);border-radius:24px;padding:16px;box-shadow:var(--shadow)}
    .panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
    .panel-header h2{font-size:clamp(24px,6.2vw,38px);line-height:1.1;letter-spacing:-.05em}
    .panel-header p{margin-top:8px;color:var(--muted);max-width:620px}
    .panel-actions{display:grid;gap:8px;width:100%}
    .preview{background:var(--card);color:var(--dark);border-radius:22px;overflow:hidden;border:1px solid #d8e3ef}
    .preview-top{padding:14px 14px 12px;background:linear-gradient(180deg,#ffffff,#f5f9fd);border-bottom:1px solid #dce5ef;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .preview-brand{display:flex;align-items:center;gap:10px;min-width:0}
    .preview-logo-box{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#edf6ff,#ffffff);display:grid;place-items:center;border:1px solid #d7e4f0;padding:4px}
    .preview-logo-box img{width:100%;height:100%;object-fit:contain}
    .preview-brand strong{display:block;font-size:15px;line-height:1.15;color:#0d2d4e}
    .preview-brand small{display:block;color:#61768e;font-size:10px;margin-top:3px}
    .preview-date{text-align:right;color:#153c68;font-size:10px;font-weight:800}
    .preview-body{padding:14px}
    .filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .filter-box{background:#fff;border:1px solid #d9e4ef;border-radius:14px;padding:10px 12px;min-width:0}
    .filter-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6b7f94;font-weight:800}
    .filter-box strong{display:block;font-size:14px;color:#173e67;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
    .chip{background:#fff;border:1px solid #d9e4ef;color:#244a73;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800}
    .chip[aria-pressed="true"]{background:#173f71;color:#fff;border-color:#173f71}
    .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
    .metric{background:#fff;border:1px solid #dce6f0;border-radius:16px;padding:12px}
    .metric-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .metric small{display:block;font-size:10px;color:#687d93;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
    .metric strong{display:block;margin-top:7px;font-size:clamp(17px,4.5vw,25px);line-height:1.05;color:#0f2f51;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
    .pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}
    .pill.good{background:#e7f8f2;color:#14835d}
    .pill.info{background:#ebf4ff;color:#215a95}
    .chart-grid{display:grid;gap:10px;margin-top:12px}
    .chart-card,.table-card{background:#fff;border:1px solid #dce6f0;border-radius:18px;padding:14px}
    .chart-card h3,.table-card h3{font-size:14px;color:#173c68}
    .chart-card p,.table-card p{font-size:10px;color:#71859a;margin-top:4px}
    .bars{height:180px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:7px;border-bottom:1px solid #cad7e4;padding-top:12px}
    .bar-col{text-align:center;min-width:0}
    .bar-wrap{height:145px;display:flex;align-items:flex-end;justify-content:center}
    .bar{width:min(100%,30px);min-height:4px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#5ac9ff,#21499a)}
    .bar-col small{display:block;font-size:10px;color:#5f758d;margin-top:6px}
    .bar-col span{display:block;font-size:9px;color:#8294a8;margin-bottom:4px}
    .mini-table{width:100%;border-collapse:collapse;margin-top:10px}
    .mini-table th,.mini-table td{padding:9px 0;border-bottom:1px solid #e6edf5;text-align:left;font-size:11px}
    .mini-table th{color:#6e839a;font-weight:800}
    .mini-table td:last-child,.mini-table th:last-child{text-align:right}
    .legend-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:#eef4fa;color:#667f97;font-size:10px}
    .panel-cta{display:grid;gap:8px;margin-top:14px}

    .full-panel{margin-top:14px;border:1px solid rgba(63,143,217,.30);background:#08172F;border-radius:18px;overflow:hidden}
    .full-panel[hidden]{display:none}
    .full-toolbar{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
    .full-toolbar span{font-weight:800;font-size:12px}
    .full-buttons{display:flex;gap:8px;flex-wrap:wrap}
    .full-panel iframe{display:block;width:100%;height:720px;border:0;background:#fff}
    .full-panel:fullscreen{width:100vw;height:100dvh;border:none;border-radius:0;display:flex;flex-direction:column}
    .full-panel:fullscreen iframe{height:auto;flex:1;min-height:0}

    .contact{padding:30px 0 52px}
    .contact-card{background:linear-gradient(132deg,#123869,#0B2145 58%,#081A35);border:1px solid rgba(70,153,225,.28);border-radius:24px;padding:24px 18px;text-align:center;box-shadow:var(--shadow)}
    .contact-card h2{font-size:clamp(24px,6.5vw,40px);line-height:1.1;letter-spacing:-.05em}
    .contact-card h2 span{color:#3CAAF4}
    .contact-card p{margin:12px auto 0;color:var(--muted);max-width:680px}
    .contact-actions{display:grid;gap:10px;justify-content:center;margin-top:20px}
    .hint{font-size:11px;color:var(--muted);margin-top:10px}
    .footer{padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:var(--muted);font-size:11px}

    .team-wrap{margin-top:18px}
    .team-grid{display:grid;gap:12px;margin-top:14px}
    .team-card{display:flex;gap:12px;align-items:center;background:rgba(18,53,99,.62);border:1px solid rgba(77,158,225,.26);border-radius:18px;padding:12px}
    .team-photo{width:76px;height:76px;border-radius:18px;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
    .team-info h4{font-size:16px;line-height:1.2;margin:0 0 6px;font-weight:800;color:#fff}
    .team-role{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#4DCDFA;margin-bottom:6px}
    .team-info p{font-size:12px;color:var(--muted);margin:0}

    @media (max-width:390px){
      .brand-text strong{font-size:18px}
      .nav{gap:8px}
      .nav a{font-size:10px}
      .nav .cta{padding:10px 12px}
      .hero-card,.contact-card{padding:22px 16px}
      .panel-shell{padding:14px}
      .preview-body{padding:12px}
      .bars{height:160px}
      .bar-wrap{height:128px}
      .full-panel iframe{height:620px}
    }
    @media (min-width:760px){
      .container{width:min(var(--largura-maxima-conteudo),calc(100% - 40px))}
      .nav{gap:24px}
      .nav a{font-size:13px}
      .hero{padding:56px 0 34px}
      .hero-card{padding:42px}
      .section{padding:42px 0}
      .solutions{grid-template-columns:repeat(3,minmax(0,1fr))}
      .panel-header{align-items:end}
      .panel-actions{width:auto;grid-template-columns:repeat(2,auto)}
      .preview-body{padding:18px}
      .filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
      .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
      .chart-grid{grid-template-columns:1.2fr .8fr}
      .bars{height:210px;gap:12px}
      .bar-wrap{height:166px}
      .panel-cta{grid-template-columns:1fr 1fr}
      .contact-card{padding:42px}
      .contact-actions{grid-template-columns:repeat(2,auto)}
      .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .team-card{display:block;padding:14px}
      .team-photo{width:100%;height:220px;border-radius:16px;margin-bottom:12px}
      .full-panel iframe{height:850px}
    }
    @media (min-width:1150px){
      .full-panel iframe{height:920px}
    }
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

    /* Serviços comerciais: três perfis de clientes, sem exibição de preços */
    .service-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:23px;margin-top:28px}
    .service-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:440px;background:linear-gradient(180deg,#0C2448,#081A36);border:1px solid #2B5281;border-radius:20px;padding:30px 22px 20px;color:#FFFFFF}
    .service-card.featured{border-color:#2CAAEF;background:linear-gradient(180deg,#123667,#0A2347);box-shadow:0 0 0 1px rgba(27,142,218,.18),0 16px 40px rgba(0,8,27,.26)}
    .service-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 16px;border-radius:999px;font-size:10px;line-height:1.4;font-weight:900;letter-spacing:.11em;color:#FFFFFF;font-family:Inter,Arial,sans-serif}
    .service-tag.blue{background:#1D86CD;box-shadow:0 4px 22px rgba(29,134,205,.35)}.service-tag.cyan{background:#12B9D6;color:#06203E;box-shadow:0 4px 22px rgba(18,185,214,.36)}
    .service-card h3{font-size:20px;letter-spacing:-.04em;line-height:1.2;margin:0 0 11px}
    .service-desc{color:#C2D6EC;font-size:12px;line-height:1.65;min-height:70px}
    .service-fit{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:94px;margin:18px 0 20px;padding:15px 15px;border:1px solid rgba(43,147,222,.35);border-radius:12px;background:linear-gradient(120deg,rgba(30,124,208,.17),rgba(18,185,214,.08))}
    .service-fit span{color:#57D8F0;font-size:10px;font-weight:900;letter-spacing:.12em}
    .service-fit strong{color:#F6FBFF;font-size:13px;line-height:1.45;font-weight:800}
    .service-features{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:13px;flex:1}
    .service-features li{display:flex;gap:11px;align-items:flex-start;font-size:12px;line-height:1.5;color:#E8F2FF}
    .service-features li::before{content:'✓';width:17px;height:17px;flex:none;border:1px solid #208CE1;border-radius:50%;background:#102D57;color:#64DDF6;font-size:11px;font-weight:900;display:grid;place-items:center;margin-top:1px}
    .service-button{display:flex;align-items:center;justify-content:center;min-height:51px;text-align:center;background:#12345F;border:1px solid #3C76B0;border-radius:12px;font-weight:800;font-size:13px;padding:13px;color:#FFFFFF;transition:transform .15s ease,background .15s ease}
    .service-button:hover{transform:translateY(-2px);background:#19508C}.service-button.featured-button{background:linear-gradient(105deg,#137BC6,#1D99E6);border-color:#42B1F3;box-shadow:0 9px 25px rgba(20,119,208,.33)}.service-button.featured-button:hover{background:#289AEE}
    .service-foot{font-family:Inter,Arial,sans-serif;font-size:11px;line-height:1.45;letter-spacing:.055em;color:#BBD4F0;margin:15px 0 0;text-align:center;min-height:18px}
    @media(min-width:760px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-card{padding:33px 20px 22px;min-height:515px}}
    @media(min-width:1100px){.service-grid{gap:20px}.service-card{padding:35px 28px 24px}.service-card h3{font-size:22px}.service-features li{font-size:13px}}

    /* Soluções e Empresa: mesma largura, borda, cor de fundo e padding */
    .solutions-section{padding:24px 0}
    .solutions-shell{width:100%;padding:24px 18px;overflow:visible}
    .solutions-shell::after{pointer-events:none}
    .solutions-shell .section-title{position:relative;z-index:1}
    .solutions-shell .service-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1fr);gap:24px}
    .solutions-shell .service-card{width:100%;min-width:0;min-height:0;padding:28px 18px 20px}
    @media(min-width:760px){
      .solutions-shell{padding:42px}
      .solutions-shell .service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
      .solutions-shell .service-card{padding:32px 14px 20px;min-height:545px}
      .solutions-shell .service-card h3{font-size:clamp(16px,1.5vw,21px)}
    }
    @media(min-width:1150px){.solutions-shell .service-grid{gap:18px}.solutions-shell .service-card{padding:34px 22px 22px}}
    @media(max-width:430px){
      .topinner{gap:5px}.brand{gap:6px}.logo-wrap{width:38px;height:38px;padding:4px}.brand-text strong{font-size:15px}.brand-text small{font-size:8px;margin-top:3px}
      .nav{gap:7px}.nav a{font-size:9px}.nav .cta{padding:8px 9px}
      .solutions-shell{padding:24px 15px}
    }

/* ---------------------------------------------------------------------------
   PORTFÓLIO | Carrossel com imagem central, laterais e zoom em tela cheia.
   As fotos continuam em galeria/NomeDaCategoria/1.png, 2.png, etc.
   --------------------------------------------------------------------------- */
.gallery-shell{padding:22px 18px;overflow:hidden}
.gallery-shell h2{font-size:clamp(27px,6.5vw,42px);line-height:1.1;letter-spacing:-.05em}
.gallery-shell h2 span{color:#3CAAF4}
.gallery-intro{margin:12px 0 18px;color:var(--muted);max-width:740px}
.gallery-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.gallery-tab{border:1px solid #396EAB;background:#102B54;color:#E7F5FF;border-radius:999px;padding:10px 17px;font-weight:800;white-space:nowrap}
.gallery-tab[aria-selected="true"]{background:#1D86CD;border-color:#39A9F0;color:#FFFFFF}
.gallery-tab:focus-visible,.gallery-arrow:focus-visible,.gallery-slide:focus-visible,.gallery-expand:focus-visible{outline:3px solid #65DBF4;outline-offset:4px}
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 4px}
.gallery-head h3{font-size:18px}
.gallery-head p,.gallery-head span{color:var(--muted);font-size:11px}
.gallery-carousel{position:relative;margin:4px -18px 0;isolation:isolate}
.gallery-carousel[hidden]{display:none!important}
.gallery-stage{position:relative;height:clamp(255px,38vw,450px);overflow:hidden;perspective:1200px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain}
.gallery-stage:active{cursor:grabbing}
.gallery-stage::before{content:"";position:absolute;inset:8% 15% 5%;background:radial-gradient(ellipse at center,rgba(34,151,226,.16),transparent 66%);pointer-events:none}
.gallery-slide{position:absolute;top:49%;left:50%;width:min(62%,660px);aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(228,246,255,.24);border-radius:16px;padding:0;background:#e8eef5;cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.40);transform:translate(-50%,-50%) translateX(calc(var(--shift)*70%)) rotateY(calc(var(--shift)*-7deg)) scale(var(--scale));transition:transform .48s cubic-bezier(.22,.68,0,1),opacity .3s ease,filter .42s ease,box-shadow .42s ease;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}
.gallery-slide img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.gallery-slide[data-position="center"]{border:2px solid rgba(111,210,248,.95);box-shadow:0 24px 65px rgba(0,0,0,.55),0 0 0 5px rgba(30,145,228,.15);filter:brightness(1)}
.gallery-slide[data-distance="1"]{filter:brightness(.72)}
.gallery-slide[data-distance="2"]{filter:brightness(.46)}
.gallery-slide:hover[data-distance="1"],.gallery-slide:hover[data-distance="2"]{filter:brightness(.88)}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:13px;min-height:54px;padding:0 14px 5px}
.gallery-arrow{width:41px;height:41px;border-radius:50%;border:1px solid rgba(112,182,234,.65);background:#113563;color:#FFFFFF;display:grid;place-items:center;font-size:21px;cursor:pointer;transition:background .18s,transform .18s}
.gallery-arrow:hover:not(:disabled){background:#1E70B4;transform:translateY(-2px)}
.gallery-position{font-size:12px;font-weight:800;color:#D8ECFF;min-width:47px;text-align:center;font-variant-numeric:tabular-nums}
.gallery-expand{margin-left:10px;border:1px solid #417EB8;background:#123961;color:#EAF7FF;border-radius:12px;min-height:39px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer}
.gallery-expand:hover:not(:disabled){background:#1C629B}
.gallery-arrow:disabled,.gallery-expand:disabled{opacity:.35;cursor:not-allowed}
.gallery-help{font-size:11px;color:var(--muted);text-align:center;margin:7px 0 0}
.gallery-empty{padding:30px 12px;border:1px dashed #3973B0;border-radius:12px;color:var(--muted);text-align:center;font-size:13px}
.gallery-empty[hidden]{display:none!important}
.gallery-footer{display:grid;gap:8px;margin-top:20px}
.gallery-footer a{text-align:center}

/* Tela cheia: ocupa a janela, mantém proporção sem cortar a imagem. */
body.gallery-lightbox-open{overflow:hidden}
.gallery-lightbox{position:fixed;inset:0;z-index:500;background:rgba(4,14,34,.97);padding:8px;display:flex;flex-direction:column}
.gallery-lightbox[hidden]{display:none!important}
.gallery-lightbox-bar{display:flex;justify-content:space-between;align-items:center;color:white;padding:10px;gap:10px;font-weight:800}
.gallery-lightbox-bar button{background:#12345F;color:#FFFFFF;border:1px solid #4688C5;border-radius:9px;padding:10px;cursor:pointer}
.gallery-lightbox-body{flex:1;min-height:0;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:5px}
.gallery-lightbox-body img{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain;margin:auto;display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gallery-lightbox-body button{background:#164273;color:#FFFFFF;border:0;border-radius:8px;font-size:29px;height:60px;cursor:pointer}
.gallery-lightbox-body button:disabled{opacity:.35;cursor:not-allowed}
.gallery-lightbox-counter{text-align:center;color:#D4E9FF;padding:10px}

@media(min-width:760px){
  .gallery-shell{padding:42px}
  .gallery-carousel{margin-right:-42px;margin-left:-42px}
  .gallery-footer{grid-template-columns:auto auto;justify-content:start}
}
@media(max-width:600px){
  .gallery-carousel{margin-right:-18px;margin-left:-18px}
  .gallery-stage{height:clamp(230px,72vw,345px)}
  .gallery-slide{width:84%;border-radius:11px;transform:translate(-50%,-50%) translateX(calc(var(--shift)*71%)) rotateY(calc(var(--shift)*-5deg)) scale(var(--scale))}
  .gallery-slide[data-distance="2"]{opacity:0!important;pointer-events:none!important}
  .gallery-controls{gap:10px}
  .gallery-arrow{width:38px;height:38px}
  .gallery-expand{margin-left:4px;padding:8px 11px}
  .gallery-head{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.gallery-slide,.gallery-arrow{transition:none!important}}

/* Wordmark na mesma combinação visual da capa: Data (branco) + Core (azul). */
.brand-text .brand-data{color:#FFFFFF}
.brand-text .brand-core{color:#259EED}
.nav a:hover:not(.cta){color:#75D8FF}
.nav .cta:hover,.btn-primary:hover{background:#219CEB}
@media (prefers-contrast:more){
  :root{--muted:#E3EFFB}
  .service-card,.gallery-tab,.hero-card{border-color:#70B7EF}
}


/* ===========================================================================
   DATACORE | Identidade da capa: branco + azul-marinho + azul-claro
   Referência: capa Vendas e Estoque.
   Topbar #0B1B3A e textos brancos; fundo da página #FFFFFF;
   botões #2B9CE7 com texto azul-marinho para contraste.
   Mantém comportamento das galerias, serviços e visualização em tela cheia.
   =========================================================================== */
:root {
  --bg: #FFFFFF;
  --bg-2: #F5FAFF;
  --surface: #FFFFFF;
  --surface-2: #EFF7FF;
  --card: #FFFFFF;
  --line: #D5E5F4;
  --line-soft: #ACD0EC;
  --text: #0B1B3A;
  --muted: #4B607A;
  --accent: #1887CE;
  --accent-2: #12B9D6;
  --white: #FFFFFF;
  --dark: #0B1B3A;
  --dark-2: #155487;
  --shadow: 0 14px 38px rgba(11,27,58,.08);
  --brand-navy: #0B1B3A;
  --brand-blue: #2B9CE7;
  --brand-cyan: #12B9D6;
}
html { background: #FFFFFF; }
body { background: #FFFFFF; color: var(--brand-navy); }

/* Barra superior: cor escura e tipografia branca da capa. */
.topbar { background: #0B1B3A; border-bottom: 1px solid #25436D; }
.nav a { color: #FFFFFF; }
.nav a:hover:not(.cta) { color: #99D9FF; }
.brand-text .brand-data { color: #FFFFFF; }
.brand-text .brand-core { color: #299DEA; }
.brand-text small { color: #E3F3FF; }
.logo-wrap { background: #132F59; border-color: #375B83; }
.nav .cta,
.nav .cta:hover { background: var(--brand-blue); color: var(--brand-navy); }
.nav .cta:hover { background: #60C3F4; }

/* Superfícies claras sobre o fundo branco; tipografia escura. */
.hero-card,
.panel-shell { 
  background: linear-gradient(125deg, #FFFFFF 0%, #F7FBFF 100%);
  border: 1px solid #D5E5F4;
  box-shadow: var(--shadow);
  color: var(--brand-navy);
}
.hero-card::after {
  background: radial-gradient(circle, rgba(43,156,231,.09) 0%, rgba(43,156,231,0) 70%);
}
.hero h1,
.section-title h2,
.panel-header h2,
.gallery-shell h2,
.gallery-head h3 { color: var(--brand-navy); }
.hero h1 span,
.section-title h2 span,
.gallery-shell h2 span { color: #167CC4; }
.eyebrow { color: #1772B4; }
.hero p,
.section-title p,
.panel-header p,
.gallery-intro,
.gallery-head p,
.gallery-head span,
.gallery-help { color: var(--muted); }
.more-box { background: #F2F8FE; border: 1px solid #D6E7F5; }
.more-box p { color: var(--muted); }

/* Todos os botões visíveis utilizam a cor azul-clara da capa. */
.btn-primary,
.service-button,
.service-button.featured-button,
.nav .cta,
.gallery-arrow,
.gallery-tab[aria-selected="true"],
.gallery-expand {
  background: #2B9CE7;
  border-color: #2B9CE7;
  color: #0B1B3A;
  box-shadow: none;
}
.btn-primary:hover,
.service-button:hover,
.service-button.featured-button:hover,
.gallery-arrow:hover:not(:disabled),
.gallery-expand:hover:not(:disabled),
.gallery-tab[aria-selected="true"]:hover { background: #63C7F1; border-color: #63C7F1; color: #0B1B3A; }
.btn-secondary { background: #EAF6FF; color: #0B1B3A; border-color: #B8DEF7; }
.btn-secondary:hover { background: #D7EDFF; }

/* Equipe, áreas explicativas e cartões de serviço. */
.team-card { background: #FFFFFF; border-color: #D9E7F5; box-shadow: 0 4px 16px rgba(11,27,58,.04); }
.team-info h4 { color: var(--brand-navy); }
.team-role { color: #1376B7; }
.team-info p { color: var(--muted); }
.team-photo { border-color: #D5E5F4; }
.solution { background: #FFFFFF; border: 1px solid #D5E5F4; }
.solution p, .solution .result { color: var(--muted); }
.solution-tag { color: #167DBF; }
.service-card { background: #FFFFFF; color: var(--brand-navy); border-color: #D0E1F1; box-shadow: 0 6px 20px rgba(11,27,58,.06); }
.service-card.featured { background: #F1F8FF; border-color: #58A7E6; box-shadow: 0 7px 24px rgba(11,27,58,.09); }
.service-desc { color: #415774; }
.service-fit { background: #EDF7FF; border-color: #C8E3F6; }
.service-fit span { color: #166EAD; }
.service-fit strong { color: var(--brand-navy); }
.service-features li { color: #253A55; }
.service-features li::before { background: #DDF3FF; color: #135E96; border-color: #7EC5EC; }
.service-foot { color: #526981; }
.service-tag.blue { background: #2B9CE7; color: #0B1B3A; box-shadow: 0 5px 20px rgba(43,156,231,.20); }
.service-tag.cyan { background: #12B9D6; color: #0B1B3A; box-shadow: 0 5px 20px rgba(18,185,214,.20); }

/* Galeria: mantém o carrossel e destaca a imagem sobre o branco. */
.gallery-tab { background: #F1F8FE; color: #0B1B3A; border-color: #BDD9EE; }
.gallery-stage::before { background: radial-gradient(ellipse at center,rgba(43,156,231,.12),transparent 68%); }
.gallery-slide { border-color: #B9D6EB; box-shadow: 0 16px 42px rgba(11,27,58,.18); }
.gallery-slide[data-position="center"] {
  border-color: #2B9CE7;
  box-shadow: 0 20px 45px rgba(11,27,58,.23), 0 0 0 4px rgba(43,156,231,.13);
}
.gallery-position { color: var(--brand-navy); }
.gallery-expand { margin-left: 10px; }
.gallery-empty { color: var(--muted); border-color: #A8CBE6; }

/* Área de contato: cartão azul-marinho sobre o fundo geral branco. */
.contact-card { background: #0B1B3A; border-color: #203D65; color: #FFFFFF; }
.contact-card h2 { color: #FFFFFF; }
.contact-card h2 span { color: #66C3F4; }
.contact-card p, .contact-card .hint { color: #D6E9FA; }
.contact-card .eyebrow { color: #66C3F4; }
.contact-card .btn-secondary { background: #EAF6FF; color: #0B1B3A; border-color: #CBE7F8; }
.footer { color: #4B607A; border-top: 1px solid #DBE7F3; }

/* Toolbar interna do painel e modal preservam fundo escuro, com texto branco. */
.full-panel, .full-panel .full-toolbar { color: #FFFFFF; }
.gallery-lightbox { color: #FFFFFF; }
.gallery-lightbox-bar button,
.gallery-lightbox-body button { background: #2B9CE7; color: #0B1B3A; border-color: #2B9CE7; }
@media (prefers-contrast: more) {
  :root { --muted: #2A435E; }
  .service-card, .gallery-tab, .hero-card { border-color: #6CA6D5; }
}


/* =============================================================
   DATACORE | Serviços profissionais B2B – 10/11/2026
   Três serviços com escopo, proposta de valor e CTA específicos.
   Layout limpo, responsivo e consistente com a paleta da capa.
   ============================================================= */
/* Ajuste solicitado anteriormente: logotipo circular branco na topbar */
.topbar .logo-wrap {
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:50%;padding:4px;background:#FFFFFF;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 3px 12px rgba(0,0,0,.16);
  overflow:hidden;
}
.topbar .logo-wrap .logo{width:118%;height:118%;object-fit:contain;border-radius:0;transform:scale(1.08);transform-origin:center;}
@media(max-width:430px){.topbar .logo-wrap{width:43px;height:43px;padding:3px;}}

.solutions-section .solutions-shell{
  padding:clamp(22px,4vw,48px);
  border:1px solid #D5E4F0;background:#FFFFFF;
  box-shadow:0 14px 40px rgba(11,27,58,.045);
}
.solutions-section .solutions-heading{margin-bottom:28px;max-width:880px;}
.solutions-section .solutions-heading .eyebrow{letter-spacing:.15em;font-size:11px;margin-bottom:12px;}
.solutions-section .solutions-heading h2{font-size:clamp(28px,3.6vw,43px);line-height:1.12;letter-spacing:-.052em;color:#0B1B3A;}
.solutions-section .solutions-heading h2 span{color:#1684C9;}
.solutions-section .solutions-heading p{max-width:740px;font-size:14px;line-height:1.75;color:#506681;margin-top:14px;}

.solutions-shell .service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:0;}
.solutions-shell .service-card,
.solutions-shell .service-card.featured{
  position:relative;display:flex;flex-direction:column;min-width:0;
  padding:28px 23px 23px;min-height:590px;
  background:#FFFFFF;color:#0B1B3A;
  border:1px solid #DBE5EF;border-radius:17px;
  box-shadow:0 5px 24px rgba(12,33,70,.045);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.solutions-shell .service-card::before{
  content:'';position:absolute;top:-1px;left:24px;right:24px;height:3px;
  border-radius:0 0 4px 4px;background:#2999E4;
}
.solutions-shell .service-card.featured::before{background:#12B9D6;}
.solutions-shell .service-card.featured{border-color:#A9D9F4;background:#FBFDFF;}
@media(hover:hover){.solutions-shell .service-card:hover{transform:translateY(-4px);box-shadow:0 17px 38px rgba(10,31,65,.11);border-color:#9DCBEA;}}
.service-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:33px;}
.service-number{font-size:10px;font-weight:800;letter-spacing:.06em;color:#6C87A3;white-space:nowrap;}
.service-audience{font-size:10px;font-weight:800;line-height:1.3;padding:7px 10px;border-radius:6px;white-space:nowrap;background:#EAF5FF;color:#1A6EA8;}
.solutions-shell .service-card.featured .service-audience{background:#E6F8FC;color:#126E85;}
.solutions-shell .service-card h3{
  font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.05em;line-height:1.18;
  margin:28px 0 14px;min-height:58px;color:#0B1B3A;
}
.solutions-shell .service-card h3 span{color:#137FC3;}
.solutions-shell .service-card .service-desc{font-size:12.6px;line-height:1.78;min-height:107px;margin:0;color:#4B617B;}
.solutions-shell .service-list-title{
  padding-top:19px;margin:18px 0 2px;border-top:1px solid #E5EDF5;
  font-size:10px;letter-spacing:.12em;font-weight:850;color:#186DAD;
}
.solutions-shell .service-features{flex:0 0 auto;display:block;list-style:none;margin:7px 0 22px;padding:0;}
.solutions-shell .service-features li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:12.2px;font-weight:500;line-height:1.55;color:#233951;
  padding:11px 0;border-bottom:1px solid #EDF2F7;
}
.solutions-shell .service-features li:last-child{border:0;}
.solutions-shell .service-features li::before{
  content:'';display:block;width:6px;height:6px;flex:0 0 6px;
  border:0;border-radius:2px;margin-top:6px;background:#2B9CE7;
}
.solutions-shell .service-bottom{display:flex;flex-direction:column;gap:0;margin-top:auto;}
.service-outcome{padding:12px 13px;background:#F1F8FE;border:1px solid #DCEAF5;border-radius:9px;min-height:83px;}
.service-outcome span{font-size:9px;font-weight:850;letter-spacing:.10em;color:#176AA9;}
.service-outcome p{font-size:12.2px;line-height:1.55;margin-top:4px;font-weight:700;color:#1C3552;}
.solutions-shell .service-card .service-button,
.solutions-shell .service-card.featured .service-button{
  margin-top:15px;display:flex;justify-content:space-between;gap:10px;
  padding:13px 17px;min-height:48px;border:1px solid #2B9CE7;border-radius:9px;
  background:#2B9CE7;box-shadow:none;color:#0B1B3A;
  font-size:12.5px;font-weight:800;text-align:left;
}
.solutions-shell .service-card .service-button span{font-size:18px;line-height:1;}
.solutions-shell .service-card .service-button:hover{background:#66C4F1;border-color:#66C4F1;transform:translateY(-1px);}
@media(max-width:1050px) and (min-width:760px){
  .solutions-shell .service-grid{gap:12px;}
  .solutions-shell .service-card,.solutions-shell .service-card.featured{padding:24px 16px 18px;min-height:625px;}
  .service-card-top{align-items:flex-start;flex-direction:column;gap:8px;}
  .solutions-shell .service-card h3{font-size:20px;margin-top:18px;min-height:70px;}
  .solutions-shell .service-card .service-desc{min-height:120px;}
}
@media(max-width:759px){
  .solutions-shell .service-grid{grid-template-columns:1fr;gap:16px;}
  .solutions-shell .service-card,.solutions-shell .service-card.featured{padding:23px 20px 20px;min-height:0;}
  .solutions-shell .service-card h3{min-height:0;margin-top:22px;font-size:24px;}
  .solutions-shell .service-card .service-desc{min-height:0;font-size:13px;}
  .solutions-shell .service-list-title{margin-top:22px;}
  .solutions-shell .service-features{margin-bottom:18px;}
  .service-outcome{min-height:0;}
}
@media(max-width:370px){
  .service-card-top{flex-direction:column;align-items:flex-start;gap:7px;}
  .solutions-shell .service-card h3{font-size:22px;}
}


/* ============================================================
   DATACORE | Rodapé institucional simplificado
   Apenas marca, soluções, empresa e contato.
   ============================================================ */
.footer {
  margin-top: 44px;
  padding: 56px 0 64px;
  background: #0B1B3A;
  color: #D5E5F7;
  border: 0;
  text-align: left;
  font-size: 13px;
}
.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) minmax(220px, 1.25fr) minmax(125px, .7fr) minmax(155px, .85fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  padding: 0;
  border: 0;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #FFFFFF;
  text-decoration: none;
}
.footer-logo-wrap {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  padding: 5px;
  border-radius: 50%;
  background: #FFFFFF;
}
.footer-logo-wrap img { width: 118%; height: 118%; object-fit: contain; transform: scale(1.08); transform-origin: center; }
.footer-brand-title { display: flex; flex-direction: column; line-height: 1; }
.footer-brand-title strong { font-size: 26px; font-weight: 900; letter-spacing: -.065em; }
.footer-data { color: #FFFFFF; }
.footer-core { color: #329FEB; }
.footer-brand-title small {
  margin-top: 7px;
  font-size: 10px;
  font-weight: 800;
  color: #B9D8F1;
  letter-spacing: .2em;
}
.footer-company p {
  margin: 18px 0 0;
  max-width: 340px;
  color: #C4D8EE;
  font-size: 13px;
  line-height: 1.8;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-col h3 {
  margin: 9px 0 7px;
  color: #81CFF8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.footer-col a {
  color: #E0ECF9;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: color .18s ease;
}
.footer-col a:hover, .footer-col a:focus-visible { color: #70D9FC; }
.footer-col a:focus-visible { outline: 2px solid #70D9FC; outline-offset: 4px; }
#quem-somos, #equipe, #servico-paineis, #servico-automacao, #servico-sistemas { scroll-margin-top: 100px; }
@media (max-width: 990px) {
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
  .footer-company { grid-column: 1 / -1; }
  .footer-company p { max-width: 520px; }
}
@media (max-width: 620px) {
  .footer { margin-top: 28px; padding: 42px 0 52px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-company { grid-column: 1 / -1; }
  .footer-contact { grid-column: auto; }
  .footer-col h3 { margin-top: 0; }
}
@media (max-width: 375px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-company, .footer-contact { grid-column: auto; }
  .footer-brand-title strong { font-size: 24px; }
}


/* DataCore | Ícones de WhatsApp e Instagram no rodapé */
.footer-social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.footer-contact .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  padding: 10px;
  color: #FFFFFF;
  background: rgba(43, 156, 231, 0.16);
  border: 1px solid rgba(129, 207, 248, 0.36);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.footer-contact .footer-social-link:hover {
  background: #2B9CE7;
  color: #0B1B3A;
  border-color: #2B9CE7;
  transform: translateY(-2px);
}
.footer-contact .footer-social-link:focus-visible {
  outline: 2px solid #70D9FC;
  outline-offset: 4px;
}
.footer-social-link .social-icon {
  display: block;
  width: 23px;
  height: 23px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-contact .footer-social-link { transition: none; }
  .footer-contact .footer-social-link:hover { transform: none; }
}

/* Faixa de direitos reservados ao final do rodapé */
.footer-copyright {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid rgba(196, 216, 238, .22);
  color: #B8C9DE;
  font-size: 12px;
  line-height: 1.6;
}
.footer-copyright strong {
  color: #FFFFFF;
  font-weight: 700;
}
@media (max-width: 620px) {
  .footer-copyright { margin-top: 34px; padding-top: 18px; font-size: 11px; }
}


/* =============================================================
   DataCore | Mobile: equipe e serviços na mesma linha, com
   rolagem horizontal por toque, sem comprimir ou sobrepor textos.
   A navegação se divide em duas linhas para não colidir com a marca.
   ============================================================= */
.mobile-swipe-hint { display: none; }

@media (max-width: 899px) {
  .mobile-swipe-hint {
    display: block;
    margin: 9px 0 10px;
    color: #376B9B;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
  }
  .mobile-swipe-hint span { color: #147FBF; font-size: 17px; vertical-align: middle; }

  /* Evita cartões comprimidos em três colunas na tela estreita. */
  .team-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(330px, 88%);
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 3px 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 3px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9BC8E8 transparent;
  }
  .team-grid .team-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 13px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .team-grid .team-photo {
    display: block;
    width: 100%;
    height: 174px;
    flex: none;
    object-fit: cover;
    border-radius: 13px;
    margin: 0 0 12px;
  }
  .team-info { min-width: 0; }
  .team-info h4,
  .team-info p { max-width: 100%; overflow-wrap: break-word; }
  .team-info h4 { font-size: 15px; line-height: 1.3; }
  .team-info p { font-size: 12px; line-height: 1.55; }

  .solutions-shell .service-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(365px, 90%);
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9BC8E8 transparent;
  }
  .solutions-shell .service-grid > .service-card,
  .solutions-shell .service-grid > .service-card.featured {
    min-width: 0;
    width: auto;
    min-height: 0;
    height: 100%;
    padding: 23px 19px 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .service-card-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-height: 0;
  }
  .service-number { white-space: normal; overflow-wrap: break-word; }
  .service-audience { white-space: normal; max-width: 100%; }
  .solutions-shell .service-card h3 {
    font-size: clamp(19px, 5.3vw, 23px);
    line-height: 1.25;
    overflow-wrap: break-word;
    min-height: 0;
    margin: 18px 0 13px;
  }
  .solutions-shell .service-card .service-desc {
    font-size: 12.5px;
    min-height: 0;
    line-height: 1.7;
  }
  .solutions-shell .service-features li { overflow-wrap: break-word; }
  .solutions-shell .service-card .service-button {
    gap: 8px;
    overflow-wrap: break-word;
    line-height: 1.4;
  }
  .solutions-shell .service-card .service-button span { flex: none; }
}

@media (max-width: 700px) {
  .topinner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 9px;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 9px;
    align-items: center;
  }
  .topinner .brand { min-width: 0; gap: 9px; }
  .topbar .logo-wrap { width: 43px; height: 43px; padding: 3px; }
  .topinner .brand-text strong { font-size: 19px; }
  .topinner .brand-text small { font-size: 9px; margin-top: 4px; }
  .topinner .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 5px;
    width: 100%;
    min-width: 0;
  }
  .topinner .nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    padding: 7px 2px;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .topinner .nav .cta {
    padding: 7px 3px;
    border-radius: 9px;
    white-space: normal;
  }
  html { scroll-padding-top: 128px; }
  #quem-somos, #equipe, #servico-paineis, #servico-automacao, #servico-sistemas { scroll-margin-top: 132px; }
  .hero { padding-top: 18px; }
  .hero h1 { overflow-wrap: break-word; }
}
@media (max-width: 350px) {
  .topinner .nav { gap: 2px; }
  .topinner .nav a { font-size: 9px; }
  .solutions-shell .service-grid { grid-auto-columns: 95%; }
  .team-grid { grid-auto-columns: 94%; }
  .team-grid .team-photo { height: 150px; }
}


/* Mobile enhancement: hero actions inline and visible swipe indicators */
@media (max-width: 899px) {
  .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 12px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    font-size: 12.5px;
    min-height: 54px;
  }

  .team-wrap,
  .solutions-shell {
    position: relative;
  }

  .team-wrap::after,
  .solutions-shell::after {
    content: "";
    position: absolute;
    right: 0;
    top: 88px;
    bottom: 54px;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(244,248,252,0) 0%, rgba(244,248,252,0.92) 100%);
    border-radius: 0 18px 18px 0;
  }

  .solutions-shell::after {
    top: 146px;
    bottom: 60px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 100%);
  }

  .mobile-carousel-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
    color: #376B9B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  .mobile-carousel-indicator .indicator-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
  }
  .mobile-carousel-indicator .indicator-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9CC7E8;
  }
  .mobile-carousel-indicator .indicator-dots i:nth-child(1) {
    background: #2B9CE7;
    box-shadow: 0 0 0 4px rgba(43,156,231,.14);
  }
  .mobile-carousel-indicator .indicator-arrow {
    color: #1489D3;
    font-size: 16px;
    line-height: 1;
    flex: none;
  }
  .mobile-carousel-indicator .indicator-text {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 900px) {
  .mobile-carousel-indicator {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .btn {
    font-size: 11.5px;
    padding: 10px 10px;
    min-height: 52px;
  }
  .mobile-carousel-indicator {
    gap: 7px;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .hero-actions .btn {
    font-size: 10.5px;
    padding: 9px 8px;
  }
  .team-wrap::after,
  .solutions-shell::after {
    width: 22px;
  }
}


/* DataCore: controles minimalistas da galeria – novembro/2026. */
.gallery-controls .gallery-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.gallery-controls .gallery-window-icon {
  display: block;
  flex: 0 0 18px;
}
/* X discreto, sem caixa azul chamativa. Mantém área de toque acessível. */
.gallery-lightbox .gallery-lightbox-bar #lightbox-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(222, 238, 255, .17);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(235, 244, 255, .77);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.gallery-lightbox .gallery-lightbox-bar #lightbox-close svg {
  width: 19px;
  height: 19px;
  display: block;
  pointer-events: none;
}
.gallery-lightbox .gallery-lightbox-bar #lightbox-close:hover {
  color: #FFFFFF;
  border-color: rgba(235, 244, 255, .43);
  background: rgba(255, 255, 255, .11);
}
.gallery-lightbox .gallery-lightbox-bar #lightbox-close:focus-visible {
  outline: 2px solid rgba(172, 212, 249, .7);
  outline-offset: 3px;
}
@media (max-width: 430px) {
  .gallery-lightbox .gallery-lightbox-bar #lightbox-close {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .gallery-controls .gallery-expand { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox .gallery-lightbox-bar #lightbox-close { transition: none; }
}


/* ================================================================
   DATACORE | Ajustes finais – mobile, rodapé e controles da galeria
   ================================================================ */
/* A seta é o único indicador de rolagem em Equipe e Serviços. */
.mobile-swipe-hint, .mobile-carousel-indicator { display: none !important; }
.team-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.service-carousel-heading { display: none; }
.mobile-carousel-controls { display: none; align-items: center; justify-content: flex-end; gap: 8px; }
.mobile-slide-arrow { display: none; }

/* A imagem central ocupa o mesmo quadro na galeria e na sobreposição.
   O botão está em uma camada independente, sem botão aninhado. */
.gallery-stage-shell { position: relative; }
.gallery-image-overlay {
  position: absolute;
  width: min(62%, 660px);
  aspect-ratio: 16 / 9;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  z-index: 22;
  pointer-events: none;
}
.gallery-image-overlay .gallery-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 39px;
  height: 39px;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 10px;
  background: rgba(9,26,56,.86);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(8,20,42,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gallery-image-overlay .gallery-expand:hover:not(:disabled) { background: #2B9CE7; color: #0B1B3A; }
.gallery-image-overlay .gallery-window-icon { display: block; width: 19px; height: 19px; }
.gallery-controls { justify-content: center; gap: 22px; margin-top: 2px; }
.gallery-help { display: none !important; }
.gallery-footer { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.gallery-footer .btn { flex: 0 1 auto; min-width: 0; }
.gallery-head { margin-bottom: 0; }

@media (max-width: 899px) {
  .mobile-carousel-controls { display: flex; flex-wrap: nowrap; gap: 8px; }
  .mobile-slide-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid #B7D9EF;
    background: #E9F5FE;
    color: #137FC5;
    border-radius: 50%;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(20,83,135,.09);
  }
  .mobile-slide-arrow:active { background: #CDEBFC; }
  .team-heading { margin-top: 14px; margin-bottom: 4px; }
  .service-carousel-heading { display: flex; justify-content: flex-end; margin: -12px 1px 7px; }
  .team-grid, .solutions-shell .service-grid { margin-top: 0; }

  /* Os dois CTAs de portfólio acompanham os botões do hero. */
  .gallery-footer { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .gallery-footer .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 10px 8px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .gallery-image-overlay { width: 84%; }
  .gallery-image-overlay .gallery-expand {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .gallery-image-overlay .gallery-window-icon { width: 18px; height: 18px; }
}

/* Rodapé: marca em cima; Soluções, Empresa e Contato lado a lado. */
@media (max-width: 700px) {
  .footer-main { grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr) minmax(0,.8fr); column-gap: clamp(8px,3vw,18px); row-gap: 30px; }
  .footer-company { grid-column: 1 / -1; }
  .footer-contact { grid-column: auto; }
  .footer-col { min-width: 0; gap: 12px; }
  .footer-col h3 { font-size: 10px; letter-spacing: .1em; margin: 0 0 3px; }
  .footer-col a { font-size: clamp(9px,2.5vw,12px); overflow-wrap: break-word; line-height: 1.5; }
  .footer-social-links { gap: 6px; }
  .footer-contact .footer-social-link { width: 34px; height: 34px; padding: 7px; }
  .footer-social-link .social-icon { width: 19px; height: 19px; }
}
@media (max-width: 375px) {
  .footer-main { grid-template-columns: minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.76fr); column-gap: 8px; }
  .footer-col h3 { font-size: 9px; }
  .footer-col a { font-size: 9px; }
  .footer-contact .footer-social-link { width: 31px; height: 31px; padding: 6px; }
  .gallery-footer .btn { font-size: 10px; padding: 9px 6px; }
}


/* ============================================================
   DataCore | Visual institucional - 12/11/2026
   Referências: título geométrico estilo Hashtag; botões fortes.
   Blocos brancos, bordas suaves e raio uniforme de 5px.
   Sem alterar carrossel, menu, rodapé nem comportamento dos CTAs.
   ============================================================ */
:root {
  --dc-section-radius: var(--raio-secao);
  --dc-section-border: #DCE6F0;
  --dc-display-font: var(--fonte-titulo);
}

/* Seções principais: superfícies totalmente brancas, sem gradiente. */
.hero .hero-card,
.gallery-section .gallery-shell,
.solutions-section .solutions-shell {
  background: #FFFFFF;
  border: 1px solid var(--dc-section-border);
  border-radius: var(--dc-section-radius);
  box-shadow: 0 4px 18px rgba(11, 27, 58, .045);
}
.hero .hero-card::after,
.gallery-section .gallery-shell::after,
.solutions-section .solutions-shell::after {
  display: none;
}

/* Coerência visual nos blocos internos de cada seção. */
.hero .more-box,
.team-grid .team-card,
.solutions-shell .service-card,
.solutions-shell .service-card.featured,
.solutions-shell .service-outcome {
  border-radius: var(--dc-section-radius);
}
.hero .more-box { background: #FFFFFF; border-color: var(--dc-section-border); }
.solutions-section .solutions-shell .service-card.featured { background: #FFFFFF; }

/* Títulos com construção geométrica inspirada na referência. */
.hero h1,
.gallery-shell h2,
.solutions-heading h2,
.solutions-shell .service-card h3,
.more-box h3,
.team-info h4,
.gallery-head h3 {
  font-family: var(--dc-display-font);
  font-weight: 700;
  letter-spacing: -.048em;
  color: #0B1B3A;
}
.hero h1 {
  font-size: clamp(30px, 4.3vw, 54px);
  line-height: 1.16;
  max-width: 1050px;
  overflow-wrap: normal;
  text-wrap: balance;
}
.hero h1 span,
.gallery-shell h2 span,
.solutions-section .solutions-heading h2 span,
.solutions-shell .service-card h3 span {
  color: #167EC5;
}
.gallery-shell h2,
.solutions-section .solutions-heading h2 {
  line-height: 1.18;
  letter-spacing: -.048em;
}

/* Botões: Poppins extra-negrito como a referência Matricule-se. */
.btn,
.topbar .nav .cta,
.solutions-shell .service-button,
.gallery-tab {
  font-family: var(--dc-display-font);
  font-weight: 800;
  letter-spacing: -.025em;
}

/* Legibilidade e prevenção de colisões no celular. */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(27px, 7.7vw, 36px); line-height: 1.17; letter-spacing: -.05em; }
  .hero .hero-card, .gallery-section .gallery-shell, .solutions-section .solutions-shell {
    border-radius: var(--dc-section-radius);
  }
  .hero-actions .btn, .gallery-footer .btn {
    min-width: 0;
    overflow-wrap: break-word;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.3;
  }
  .solutions-section .solutions-heading h2 { font-size: clamp(25px, 6.5vw, 35px); }
}
@media (max-width: 350px) {
  .hero h1 { font-size: 26px; }
  .hero-actions .btn, .gallery-footer .btn { font-size: 10px; }
}


/* ======================================================================
   APLICAÇÃO DOS PARÂMETROS ACIMA — NÃO É NECESSÁRIO EDITAR AQUI
   Regras no fim do arquivo para prevalecer sobre estilos históricos.
   Os componentes com formato intencionalmente circular (logo e redes)
   permanecem circulares; os botões seguem --raio-botao.
   ====================================================================== */
html,
body {
  background: var(--cor-fundo-geral);
}
body {
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
}

/* Seções e cartões */
.hero .hero-card,
.gallery-section .gallery-shell,
.solutions-section .solutions-shell,
.hero .more-box,
.team-grid .team-card,
.solutions-shell .service-card,
.solutions-shell .service-card.featured,
.solutions-shell .service-outcome,
.gallery-empty,
.panel-shell,
.preview,
.solution {
  background: var(--cor-fundo-secao);
  border-radius: var(--raio-secao);
}
.hero .hero-card,
.gallery-section .gallery-shell,
.solutions-section .solutions-shell,
.hero .more-box,
.team-grid .team-card,
.solutions-shell .service-card,
.solutions-shell .service-card.featured {
  border-color: var(--dc-section-border);
}
/* Elementos retangulares internos acompanham o raio das seções. */
.team-grid .team-photo,
.gallery-slide,
.service-outcome,
.service-fit {
  border-radius: var(--raio-secao);
}

/* Hierarquia tipográfica do conteúdo */
main {
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
}
main h1,
main h2,
main h3,
main h4,
main .team-info h4,
main .solutions-shell .service-card h3 {
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo);
}
main .hero h1 span,
main .gallery-shell h2 span,
main .solutions-section .solutions-heading h2 span,
main .solutions-shell .service-card h3 span {
  color: var(--cor-destaque);
}
main .hero p,
main .hero .more-box p,
main .section-title p,
main .gallery-intro,
main .gallery-head p,
main .team-info p,
main .solutions-shell .service-card .service-desc,
main .solutions-shell .service-features li,
main .solutions-shell .service-outcome p,
main .service-foot {
  color: var(--cor-texto-secundario);
}
main .solutions-shell .service-outcome p,
main .team-info h4 { color: var(--cor-texto); }

/* A mesma família tipográfica vale para CTAs e controles. */
.btn,
.topbar .nav .cta,
.solutions-shell .service-button,
.gallery-tab,
.gallery-arrow,
.gallery-expand,
.gallery-image-overlay .gallery-expand,
.gallery-lightbox-bar button,
.gallery-lightbox-body button,
.mobile-slide-arrow {
  font-family: var(--fonte-botao);
  border-radius: var(--raio-botao);
}

/* Botões principais — um único parâmetro define sua cor de fundo. */
.btn-primary,
.topbar .nav .cta,
.solutions-shell .service-card .service-button,
.solutions-shell .service-card.featured .service-button,
.gallery-tab[aria-selected="true"],
.gallery-arrow,
.gallery-expand,
.gallery-image-overlay .gallery-expand,
.gallery-lightbox-bar button,
.gallery-lightbox-body button,
.mobile-slide-arrow {
  background: var(--cor-fundo-botao);
  border-color: var(--cor-fundo-botao);
  color: var(--cor-texto-botao);
}

/* Botões secundários têm variável própria, preservando a hierarquia. */
.btn-secondary,
.gallery-tab:not([aria-selected="true"]) {
  background: var(--cor-fundo-botao-secundario);
  border-color: var(--cor-fundo-botao-secundario);
  color: var(--cor-texto-botao-secundario);
}

/* Hover acompanha a cor configurada, sem fixar outros tons de azul. */
.btn-primary:hover,
.topbar .nav .cta:hover,
.solutions-shell .service-card .service-button:hover,
.solutions-shell .service-card.featured .service-button:hover,
.gallery-tab[aria-selected="true"]:hover,
.gallery-arrow:hover:not(:disabled),
.gallery-expand:hover:not(:disabled),
.gallery-image-overlay .gallery-expand:hover:not(:disabled),
.gallery-lightbox-bar button:hover,
.gallery-lightbox-body button:hover:not(:disabled),
.mobile-slide-arrow:hover {
  background: color-mix(in srgb, var(--cor-fundo-botao) 85%, white);
  border-color: color-mix(in srgb, var(--cor-fundo-botao) 85%, white);
  color: var(--cor-texto-botao);
}
.btn-secondary:hover,
.gallery-tab:not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--cor-fundo-botao-secundario) 90%, #DCEEFF);
  border-color: var(--cor-fundo-botao-secundario);
  color: var(--cor-texto-botao-secundario);
}

/* Componentes que estão fora de <main> mantêm o contraste institucional.
   A topbar e o rodapé são azuis; suas fontes seguem claras. */

/* Especificidade reforçada: garante que os parâmetros substituam regras antigas. */
main .hero h1,
main .gallery-shell h2,
main .gallery-head h3,
main .solutions-section .solutions-heading h2,
main .hero .more-box h3,
main .team-grid .team-info h4,
main .solutions-shell .service-card h3 {
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo);
}
.topbar .nav .cta,
.hero-actions .btn,
.gallery-footer .btn,
.solutions-shell .service-card .service-button,
.solutions-shell .service-card.featured .service-button,
.gallery-image-overlay .gallery-expand,
.gallery-controls .gallery-arrow,
.gallery-tabs .gallery-tab,
.gallery-lightbox-bar button,
.gallery-lightbox-body button,
.team-heading .mobile-slide-arrow,
.service-carousel-heading .mobile-slide-arrow {
  border-radius: var(--raio-botao);
}


/* ============================================================
   DATACORE | Ajustes: CTA flutuante e espaçamento da galeria
   ============================================================ */
/* Ritmo vertical equivalente ao usado nos demais títulos e CTAs. */
.gallery-section .gallery-shell h2 + .gallery-tabs {
  margin-top: 24px;
  margin-bottom: 12px;
}

/* WhatsApp fixo na janela, com a cor e o tamanho editáveis no :root. */
.floating-whatsapp {
  position: fixed;
  /* Mesma margem direita do conteúdo centralizado da página (desktop). */
  right: max(20px, calc((100vw - var(--largura-maxima-conteudo)) / 2 + var(--recuo-whatsapp-secao)));
  bottom: calc(var(--distancia-whatsapp-rodape-tela) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--tamanho-whatsapp-flutuante);
  height: var(--tamanho-whatsapp-flutuante);
  padding: 13px;
  color: #FFFFFF;
  background: var(--cor-whatsapp-flutuante);
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 7px 22px rgba(11, 27, 58, .25), 0 0 0 2px rgba(255, 255, 255, .82);
  text-decoration: none;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.floating-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(11, 27, 58, .3), 0 0 0 2px rgba(255, 255, 255, .85);
}
.floating-whatsapp:focus-visible {
  outline: 3px solid #0B1B3A;
  outline-offset: 4px;
}
.floating-whatsapp-icon {
  display: block;
  width: 100%;
  height: 100%;
}
/* O botão não deve cobrir a imagem durante a visualização ampliada. */
body.gallery-lightbox-open .floating-whatsapp {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  .gallery-section .gallery-shell h2 + .gallery-tabs { margin-top: 20px; }
  .floating-whatsapp {
    /* No celular, mantém margem confortável e respeita a área segura. */
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--distancia-whatsapp-rodape-tela) + env(safe-area-inset-bottom, 0px));
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp { transition: none; }
}


/* DataCore | Serviços em linguagem clara — ajustes de leitura.
   Usa as variáveis de cores, fontes e raios já configuradas no topo. */
.solutions-shell .service-card .service-desc { overflow-wrap: break-word; }
.solutions-shell .service-card .service-button { align-items: center; overflow-wrap: break-word; line-height: 1.45; }
.solutions-shell .service-card .service-button span { flex: 0 0 auto; }
@media (max-width: 899px) {
  .solutions-shell .service-card .service-desc { min-height: 0; }
}


/* ==============================================================
   DATACORE | Dica de rotação na galeria ampliada
   Visível somente em telas estreitas na orientação retrato.
   Ao girar o celular, o CSS a oculta sem precisar de JavaScript.
   ============================================================== */
.gallery-lightbox .gallery-rotate-hint {
  display: none;
}

@media (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox:not([hidden]) .gallery-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 10px;
    max-width: calc(100% - 20px);
    padding: 9px 13px;
    margin: 6px auto 0;
    border: 1px solid rgba(92, 179, 235, .30);
    border-radius: 12px;
    background: rgba(31, 93, 149, .24);
    color: #E8F5FF;
    font-family: var(--fonte-texto, Arial, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }
  .gallery-lightbox .gallery-rotate-icon {
    display: block;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    color: #6BC7FC;
  }
}

/* ====================================================================
   DATACORE | SETAS DE NAVEGAÇÃO — UMA ÚNICA CONFIGURAÇÃO
   Para alterar TODAS as setas, edite apenas no PRIMEIRO :root:
       --cor-fundo-setas;  --cor-icone-setas;  --cor-borda-setas;
       --raio-setas;       --fonte-setas.
   Inclui: Equipe, Serviços, Galeria e visualização ampliada.
   A regra final usa prioridade específica para vencer estilos antigos,
   também nos estados hover, active, focus e na versão mobile.
   ==================================================================== */
:is(
  #gallery-prev,
  #gallery-next,
  #lightbox-prev,
  #lightbox-next,
  .mobile-slide-arrow
) {
  background: var(--cor-fundo-setas) !important;
  color: var(--cor-icone-setas) !important;
  border: 1px solid var(--cor-borda-setas) !important;
  border-radius: var(--raio-setas) !important;
  font-family: var(--fonte-setas) !important;
  box-shadow: 0 2px 8px rgba(11,27,58,.10);
}
:is(
  #gallery-prev,
  #gallery-next,
  #lightbox-prev,
  #lightbox-next,
  .mobile-slide-arrow
):is(:hover, :active, :focus-visible) {
  background: var(--cor-fundo-setas) !important;
  color: var(--cor-icone-setas) !important;
  border-color: var(--cor-borda-setas) !important;
}

/* Tela cheia permanece com os parâmetros próprios 1B. */
.gallery-image-overlay #gallery-fullscreen {
  border-radius: var(--raio-tela-cheia);
  background: var(--cor-fundo-tela-cheia);
  color: var(--cor-icone-tela-cheia);
  border: 1px solid var(--cor-borda-tela-cheia);
  box-shadow: 0 2px 8px rgba(11,27,58,.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gallery-image-overlay #gallery-fullscreen:is(:hover, :active, :focus-visible) {
  background: var(--cor-fundo-tela-cheia);
  color: var(--cor-icone-tela-cheia);
  border-color: var(--cor-borda-tela-cheia);
}


/* ====================================================================
   DATACORE | Ações na galeria ampliada e setas sem preenchimento
   Altere as cores no primeiro :root do arquivo.
   ==================================================================== */
:is(#gallery-prev, #gallery-next, #lightbox-prev, #lightbox-next, .mobile-slide-arrow) {
  background: var(--cor-fundo-setas) !important;
  border-color: var(--cor-borda-setas) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(#gallery-prev, #gallery-next, #lightbox-prev, #lightbox-next, .mobile-slide-arrow):is(:hover, :active, :focus-visible) {
  background: var(--cor-fundo-setas) !important;
  border-color: var(--cor-borda-setas) !important;
  box-shadow: none !important;
}
:is(#lightbox-prev, #lightbox-next) {
  color: var(--cor-icone-setas-modal) !important;
  position: relative;
  z-index: 2;
}
:is(#lightbox-prev, #lightbox-next):is(:hover, :active, :focus-visible) {
  color: var(--cor-icone-setas-modal) !important;
}
:is(#gallery-prev, #gallery-next, #lightbox-prev, #lightbox-next, .mobile-slide-arrow):focus-visible {
  outline: 2px solid #50B7FF;
  outline-offset: 1px;
}

/* O aviso de orientação agora é um botão com ação real. */
.gallery-lightbox .gallery-rotate-hint {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(92, 179, 235, .30);
  cursor: pointer;
  font: 600 12px/1.35 var(--fonte-texto);
  transition: background .2s ease;
}
.gallery-lightbox .gallery-rotate-hint:focus-visible {
  outline: 2px solid #7AD8FF;
  outline-offset: 3px;
}
.gallery-lightbox .gallery-rotate-hint:hover {
  background: rgba(31,93,149,.38);
}
.gallery-lightbox-body { position: relative; }
.gallery-lightbox-body.imagem-girada #lightbox-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--largura-imagem-girada, 420px);
  height: var(--altura-imagem-girada, 236px);
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  touch-action: pan-y;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-lightbox-body #lightbox-img { transition: transform .22s ease; }
}
@media (min-width: 768px), (orientation: landscape) {
  .gallery-lightbox .gallery-rotate-hint { display: none !important; }
}