@charset "UTF-8";
:root{
  --purple:#7e5a80;
  --purple-dark:#5e4060;
  --muted:#93a1b0;
  --card:#405b74;
  --bg:#f2f4f6;
  --accent:#324a5e;
}
/* Hero específicos por página de serviço */
body.service-page.estrategia-page .hero{background-image:url("../icons/HERO ESTRATÉGIA.png")}
body.service-page.privacidade-page .hero{background-image:url("../icons/HERO PRIVACIDADE.png")}
body.service-page.identidade-page .hero{background-image:url("../icons/Hero Gestão de IDS.png")}
body.service-page.ot-page .hero{background-image:url("../icons/Hero OT.png")}
body.service-page.inteligencia-page .hero{background-image:url("../icons/Hero Centro de Inteligencia Scardino.png")}

/* Alternating layout: reverse (image right, text left) */
.feature.reverse > .img-placeholder,
.dark-section .feature.reverse > .img-placeholder{grid-column:2}
.feature.reverse > *:not(.img-placeholder),
.dark-section .feature.reverse > *:not(.img-placeholder){grid-column:1;padding-right:16px;padding-left:0}
/* Reverse: swap order to image right, text left */
.feature.reverse,
.dark-section .feature.reverse{flex-direction:row-reverse}
.feature.reverse > div:not(.img-placeholder),
.dark-section .feature.reverse > div:not(.img-placeholder){padding-right:16px;padding-left:0}
.feature.reverse .img-placeholder,
.dark-section .feature.reverse .img-placeholder{height:460px;border-radius:18px 0 0 18px}
/* Escopo específico: alinhar à esquerda apenas na seção invertida marcada */
body.cyber-page .section-resiliencia-reverse > div:not(.img-placeholder){text-align:left;align-items:flex-start}
@media (max-width:900px){
  .feature.reverse > *:not(.img-placeholder){padding-right:0}
}
@media (max-width:520px){
  .feature.reverse .img-placeholder,
  .dark-section .feature.reverse .img-placeholder{height:320px;border-radius:12px}
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:'Lato', system-ui, Arial, sans-serif;line-height:1.45;color:#27343f;margin:0;background:var(--bg)}
/* Para que header, contato e footer fiquem exatamente como na Home (que usa Inter),
   forçamos a tipografia apenas nesses blocos. */
body.cyber-page .header,
body.cyber-page .contact,
body.cyber-page .site-footer{
  font-family: "Inter", system-ui, Arial, sans-serif;
}

/* HERO (escopado para a página de Cyber para não herdar o .hero do home.css) */
body.cyber-page .hero,
body.service-page .hero{
  background-image: url("../icons/fundo subpáginas.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:white;
  padding:70px 20px 90px;
  text-align:left;
  position:relative;
  overflow:hidden;
  min-height: auto; /* neutraliza min-height do home.css */
  display: block;   /* neutraliza display:flex do home.css */
  align-items: initial; /* neutraliza alinhamento do home.css */
}
body.cyber-page .hero::after,
body.service-page .hero::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:120px;background:linear-gradient(transparent, rgba(255,255,255,0.04));}
body.cyber-page .hero .container,
body.service-page .hero .container{max-width:1100px;margin:0 auto}
/* Offset responsivo apenas para a página de Cyber, para manter posicionamento visual do texto no HERO */
body.cyber-page .hero .container{padding-left:clamp(0px, 8vw, 320px);padding-right:clamp(20px, 6vw, 120px)}
/* Layout com ícone à esquerda e texto à direita no HERO da página Cyber */
body.cyber-page .hero .container{
  display:flex;
  align-items:center;
  gap:60px; /* <-- AUMENTEI O DISTANCIAMENTO ENTRE IMAGEM E TEXTO */
  position:relative;
}
body.cyber-page .hero .hero-text{
  display:flex;
  flex-direction:column;
  gap:16px; /* <-- Removido 500px e colocado gap normal */
}
/* Ícone absoluto para não empurrar o texto */
body.cyber-page .hero .hero-icon{
  position:absolute;
  top:-28px;
  left:clamp(0px, 3vw, 80px);
  width:300px;
  height:auto;
  flex:0 0 auto;
  pointer-events:none;
}
/* Afinar posicionamento do HERO para telas grandes (equivalente aos offsets inline originais) */
@media (min-width: 1200px){
  body.cyber-page .hero .container{padding-left:380px;padding-right:140px}
}
@media (min-width: 992px) and (max-width: 1199.98px){
  body.cyber-page .hero .container{padding-left:300px;padding-right:120px}
}
body.cyber-page .title,
body.service-page .title{font-family:'Lato', system-ui, Arial, sans-serif;font-size:45px;margin:0 0 10px}
body.cyber-page .subtitle,
body.service-page .subtitle{max-width:900px;margin:0 auto;color:rgba(255,255,255,0.9);font-size:18px}

/* Reforço: garantir que cada página de serviço use sua própria imagem de hero */
body.service-page.estrategia-page .hero{background-image:url("../icons/HERO ESTRATÉGIA.png") !important; background-size:contain; background-position:center}
body.service-page.privacidade-page .hero{background-image:url("../icons/HERO PRIVACIDADE.png") !important; background-size:cover; background-position:center}
body.service-page.identidade-page .hero{background-image:url("../icons/Hero Gestão de IDS.png") !important; background-size:cover; background-position:center}
body.service-page.ot-page .hero{background-image:url("../icons/Hero OT.png") !important; background-size:contain; background-position:center}
body.service-page.inteligencia-page .hero{background-image:url("../icons/Hero Centro de Inteligencia Scardino.png") !important; background-size:cover; background-position:center}

/* ... resto do código permanece inalterado ... */


/* Apenas para subpáginas (não afeta index.html) */
header.subpage-header .logo-wrap {
  margin-left: -65px; /* move a logo/header-icon um pouco para a esquerda */
}

header.subpage-header .nav {
  margin-right: -45px; /* move o menu um pouco para a direita */
}


/* Section wrapper */
.section{max-width:1800px;width:100%;margin:40px auto;padding:0 20px}

/* Services grid */
.services-title{text-align:center;color:var(--accent);font-size:26px;margin:10px 0 24px}
/* 3 cards on top row, 2 on bottom row (centered) */
.services-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;max-width:calc(3*240px + 2*24px);margin:0 auto}
.service-card{
  width:210px;height:170px;flex:0 0 210px;
  background-color:#53668A; /* cor de fundo base */
  color:white;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.12);position:relative;font-size:20px;line-height:1.35;z-index:0;
  overflow:hidden;
  isolation:isolate; /* garante contexto de empilhamento isolado */
}
/* Garantir que o texto fique acima do padrão */
.service-card > * { position: relative; z-index: 1; }
/* Padrão por cima na cor #3E4D63 usando mask para colorir o PNG */
.service-card::after{
  content:"";
  position:absolute;top:0;left:0;bottom:0;width:150px; /* largura ajustada */
  background-color:#3E4D63;
  -webkit-mask-image:url("../icons/ícones site-19.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:left center; /* encosta à esquerda */
  -webkit-mask-size:240px auto; /* menor */
  mask-image:url("../icons/ícones site-19.png");
  mask-repeat:no-repeat;
  mask-position:left center; /* encosta à esquerda */
  mask-size:240px auto; /* menor */
  transform: translateX(100px); /* desloca o padrão para a direita */
  pointer-events:none;
  z-index: -1; /* garante que fique atrás do conteúdo */
}

/* No special positioning needed with flex; rows auto-center */

/* Two-column feature (shared for light and dark) - FLEXBOX for robust alignment */
.feature,
.dark-section .feature{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:0;
  max-width:1100px;
  margin:48px auto;
  padding:0 20px;
}
/* Children: image (left) and text (right) share width equally */
.feature > .img-placeholder,
.dark-section .feature > .img-placeholder{flex:1 1 50%;height:460px;border-radius:0 18px 18px 0;background:#d8dee6;display:flex;align-items:center;justify-content:center;color:#8b98a6;overflow:hidden;
  /* Removido fundo padrão para evitar duplicação quando definimos inline por seção */
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Dark sections use the same spacing as white; no extra image margins */
.dark-section .feature > .img-placeholder{margin-top:0;margin-bottom:0}
.feature > div:not(.img-placeholder),
.dark-section .feature > div:not(.img-placeholder){flex:1 1 50%;padding-left:16px;display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:620px}
/* Deslocamento visual apenas do texto via position/left (mantém imagem fixa) */
.feature.text-indent > div:not(.img-placeholder){
  position: relative;
  left: 120px; /* padroniza com a seção de Crise */
}
/* Variante com menor deslocamento para a seção de Crise */
.feature.less-indent > div:not(.img-placeholder){
  left: 120px; /* deslocamento menor que o padrão para manter composição visual */
}
/* Seções azuis: também desloca para dentro (positivo) para evitar texto sair pela esquerda */
.feature.text-indent-left > div:not(.img-placeholder){
  position: relative;
  left: 120px;
}
/* Em layout reverse, espelhar o deslocamento SOMENTE na seção marcada */
body.cyber-page .section-resiliencia-reverse.text-indent-left > div:not(.img-placeholder){ left:auto; right:120px; }
body.cyber-page .section-resiliencia-reverse.less-indent > div:not(.img-placeholder){ left:auto; right:120px; }
/* Alinhar títulos e textos para a direita nas seções claras por padrão */
.section.feature:not(.dark-section) > div:not(.img-placeholder){
  text-align: right;
  align-items: flex-end;
}
/* Typography */
.feature h3,
.dark-section .feature h3{color:var(--accent);font-family:'Lato', system-ui, Arial, sans-serif;margin-top:0;margin-bottom:14px;font-size:32px}
.feature p,
.dark-section .feature p{color:#43545e;font-size:24px;line-height:1.50;overflow-wrap:anywhere}
/* Em seções escuras, títulos e textos devem ser claros para contraste */
.dark-section .feature h3{color:#ffffff}
.dark-section .feature p{color:rgba(255,255,255,0.9)}
.feature > div:not(.img-placeholder){display:flex;flex-direction:column;justify-content:center}

/* CTA banner (replicado do index) */
.cta{background:#768AAB;color:#fff;text-align:center}
.cta p{margin:0 0 18px 0;font-size:32px;font-weight:700}
/* Botão padrão (copiado da Home) */
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;transition:.25s all;line-height:1}
.btn.primary{background:#fff;color:#0f172a;border:1px solid #e5e7eb}
.btn.primary:hover{background:#f3f4f6}
/* Não sobrescrever tamanhos do botão no CTA, apenas remover sublinhado */
.cta .btn{text-decoration:none}

/* CTA full-bleed e espaçamento como na Home */
.cta.section{max-width:100%;width:100%;border-radius:0;padding:80px 0;margin:0}
.cta.section > *{max-width:1100px;margin:0 auto;padding:0 20px}

/* Contact full-bleed e espaçamento como na Home */
body.cyber-page .contact.section{max-width:100%;width:100%;border-radius:0;padding:80px 0;margin:0}

/* Alternate dark sections */
/* Dark section background wrapper with vertical padding */
.dark-section{background:#2f3f4b;color:white;padding:55px 0;border-radius:0;margin:0}
/* Make dark-section full-bleed like hero, with centered inner content */
.dark-section.section{max-width:100%;width:100%;border-radius:0;padding:55px 0;margin:0}
.dark-section .feature{max-width:1100px;margin:48px auto !important;padding:0 20px}
.dark-section .img-placeholder{background-color:#1f2a31}

/* Apenas cor de fundo azul, sem alterar espaçamento/alinhos do layout */
.blue-bg-only{position:relative;color:#fff}
.blue-bg-only .feature h3{color:#fff}
.blue-bg-only .feature p{color:rgba(255,255,255,0.9)}
/* Pintar apenas o fundo em full-bleed, sem alterar layout/spacing */
.blue-bg-only::before{
  content:"";
  position:absolute;z-index:-1;
  top:0;bottom:0;
  left:calc(-1*(50vw - 50%));
  right:calc(-1*(50vw - 50%));
  background:#2f3f4b;
}
/* Evitar colapso de margens do filho e preencher topo/baixo sem mudar posição visual */
.blue-bg-only{padding:48px 20px}
.blue-bg-only .feature{margin:0 auto !important}
/* Encostar CTA final: remove o espaçamento inferior desta seção */
.blue-bg-only.section{margin-bottom:0}

/* Responsive */
@media (max-width:900px){
  .feature{flex-direction:column;gap:16px}
  .feature > div:last-child{padding-left:0}
  .services-grid{max-width:none}
  /* Dois cards por linha */
  .service-card{flex:1 1 calc(50% - 24px);width:auto;height:200px;font-size:18px}
  /* Remover deslocamento no mobile/tablet para evitar overflow */
  .feature.text-indent > div:not(.img-placeholder){ left: 0; }
  .feature.text-indent-left > div:not(.img-placeholder){ left: 0; }
  .feature.less-indent > div:not(.img-placeholder){ left: 0; }
  body.cyber-page .section-resiliencia-reverse.text-indent-left > div:not(.img-placeholder){ right: 0; }
  body.cyber-page .section-resiliencia-reverse.less-indent > div:not(.img-placeholder){ right: 0; }

  /* Forçar pilha no mobile: texto primeiro, imagem depois (dentro do container) */
  .section.feature > div:not(.img-placeholder){
    order: 1 !important;
  }
  .section.feature > .img-placeholder,
  .dark-section.section .feature > .img-placeholder,
  .blue-bg-only.section .feature > .img-placeholder{
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 12px !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
  }
}
@media (max-width:900px){
  body.cyber-page .hero .hero-icon{width:180px;left:clamp(8px, 4vw, 60px);top:-16px}
}
@media (max-width:520px){
  /* Um card por linha */
  .service-card{flex:1 1 100%;width:100%;height:180px;font-size:18px}
  .hero{padding:40px 12px 60px}
  .title{font-size:28px}
  body.cyber-page .hero .hero-icon{width:110px;left:12px;top:-8px}
  .feature .img-placeholder{height:280px;border-radius:12px}
  .dark-section .feature .img-placeholder{height:280px;border-radius:12px}
  .dark-section .feature > .img-placeholder{margin-top:0;margin-bottom:0}
}

/* =====================
   Ajustes MOBILE gerais
   (subpáginas apenas)
   ===================== */
@media (max-width: 767.98px){
  /* Header: evitar corte da logo/menu nas subpáginas */
  header.subpage-header .logo-wrap { margin-left: 0 !important; }
  header.subpage-header .nav { margin-right: 0 !important; }

  /* HERO: ícone centralizado, título e texto abaixo */
  body.cyber-page .hero,
  body.service-page .hero{
    text-align: left;
    padding: 48px 16px 56px;
    position: relative;
  }
  /* Nas seções escuras (e azuis), reduzir a largura do box para 320px */
  .dark-section .feature > div:not(.img-placeholder),
  .blue-bg-only.feature > div:not(.img-placeholder),
  .blue-bg-only .feature > div:not(.img-placeholder){
    max-width: 320px;
  }
  body.cyber-page .hero .container,
  body.service-page .hero .container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
    /* reserva espaço para o ícone absoluto em tamanho maior */
    padding-top: 220px;
  }
  body.cyber-page .hero .hero-icon{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px; /* tamanho aumentado sem alterar o fluxo */
    height: auto;
    pointer-events: none;
    z-index: 0;
    margin: 0; /* não participa mais do fluxo */
  }
  body.cyber-page .hero .hero-text{ align-items: flex-start; text-align: left; position: relative; z-index: 1; }
  body.cyber-page .title,
  body.service-page .title{ font-size: 28px; }
  body.cyber-page .subtitle,
  body.service-page .subtitle{ font-size: 16px; max-width: 640px; }

  /* Serviços: grid 2x por linha no mobile; se sobrar 1, centralizar */
  .services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-content: center; width: 100% !important; margin: 0 auto; }
  .services-grid.top, .services-grid.bottom{ width: 100% !important; }
  .service-card{ width: 100% !important; height: 180px !important; flex: 1 1 auto !important; font-size: 18px; }
  /* Quando houver um item ímpar sobrando, centraliza-o ocupando a linha */
  .services-grid > .service-card:nth-last-child(1):nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    /* mesma largura de uma coluna (2 colunas, gap 12px => 6px por lado) */
    width: calc(50% - 6px) !important;
  }

  /* Seções: texto acima da imagem (empilhamento com flex) */

  /* Desktop: em grids de 3 colunas, centralizar última linha com 2 itens usando um placeholder */
  @media (min-width: 1024px){
    .services-grid.center-last{
      grid-template-columns: repeat(3, minmax(220px, 1fr));
      justify-content: center;
    }
    .services-grid.center-last::before{
      content: '';
      display: block; /* ocupa a primeira coluna da última linha */
    }
    /* Quando restarem 2 itens na última linha de um grid 3-colunas,
       move o primeiro desses dois para iniciar na coluna 2 (centralizando o par em colunas 2 e 3) */
    .services-grid > .service-card:nth-last-child(2):nth-child(3n+1){
      grid-column: 2;
    }
  }
  .feature,
  .dark-section .feature{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .feature > div:not(.img-placeholder),
  .dark-section .feature > div:not(.img-placeholder){
    order: 1;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 360px; /* largura do box no mobile */
    min-height: 319.891px; /* altura aproximada do box */
    /* Removida a margem inferior de 48px: agora 12px no topo e 0 embaixo */
    margin: 12px auto 0 auto;
    padding-left: 20px; /* padding lateral de 20px */
    padding-right: 20px;
    box-sizing: border-box;
  }
  /* Alinhamentos específicos por tema */
  /* Seções escuras: alinhado à esquerda (inclui .blue-bg-only) */
  .dark-section .feature > div:not(.img-placeholder),
  .blue-bg-only.feature > div:not(.img-placeholder),
  .blue-bg-only .feature > div:not(.img-placeholder){
    text-align: left !important;
    align-items: flex-start !important;
  }
  /* Seções claras (não dark e não .blue-bg-only): alinhado à direita */
  .section.feature:not(.dark-section):not(.blue-bg-only) > div:not(.img-placeholder){
    text-align: right !important;
    align-items: flex-end !important;
  }
  /* Evitar corte: sobrescrever larguras inline dos parágrafos/títulos nas seções */
  /* Tipografia: tamanhos e alinhamentos por tema */
  .feature h3, .dark-section .feature h3 { font-size: 22px; margin: 0 0 8px 0; }
  .feature p, .dark-section .feature p { font-size: 16px !important; width: auto !important; max-width: 100% !important; margin: 0 0 12px 0 !important; }
  /* Dark: à esquerda (inclui .blue-bg-only) */
  .dark-section .feature h3, .dark-section .feature p,
  .blue-bg-only.feature h3, .blue-bg-only.feature p,
  .blue-bg-only .feature h3, .blue-bg-only .feature p { text-align: left !important; }
  /* Light (não dark e não .blue-bg-only): à direita */
  .section.feature:not(.dark-section):not(.blue-bg-only) h3,
  .section.feature:not(.dark-section):not(.blue-bg-only) p { text-align: right !important; }
  .feature > .img-placeholder,
  .dark-section .feature > .img-placeholder{
    order: 2;
    /* IN-CONTAINER no mobile: ocupa apenas o container, sem bleed */
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    border-radius: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 12px !important;
  }

  /* Footer: garantir as 3 colunas visíveis empilhadas */
  .site-footer .grid{ display: grid !important; grid-template-columns: 1fr; gap: 16px; }
  .site-footer .grid > div{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-top: 0 !important; display: block !important; }
  .site-footer .grid > div:nth-child(2),
  .site-footer .grid > div:nth-child(3){ text-align: center; }
  .footer-block{ align-items: center; }
  .footer-block .line{ justify-content: center; }
  .site-footer .grid > div:first-child > .mapbox{ width: 100% !important; height: 280px; border-radius: 0; }

  /* Serviços: centralizar o ícone de fundo dentro do card */
  .service-card::after{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
    width: 200px !important;
    -webkit-mask-size: 200px auto !important;
    mask-size: 200px auto !important;
  }
}

/* Corrigir possíveis conflitos visuais do formulário de contato herdados do home.css */
body.cyber-page .contact{background:#334155;color:#fff}
body.cyber-page .contact .panel{background:#fff;color:#334155}

/* Forçar alinhamento à esquerda APENAS na seção "Resiliência Cibernética" (classe de escopo) */
body.cyber-page .section-resiliencia-reverse > div:not(.img-placeholder){
  text-align:left !important;
  align-items:flex-start !important;
}

/* Controlled left bleed for white feature sections */
.feature.bleed-left > .img-placeholder{position:relative;overflow:visible;border-radius:0 18px 18px 0;
  /* Faz o bloco da imagem “sangrar” até a lateral esquerda da viewport */
  width: 50vw; /* default */
  margin-left: calc(50% - 50vw);
}
.feature.bleed-left > .img-placeholder::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:calc(-1*(50vw - 50%));
  width:calc(50vw - 50%);
  /* Evita herdar o background e duplicar a imagem */
  background:none;
  border-radius:0;
}
@media (max-width:900px){
  .feature.bleed-left > .img-placeholder::before{display:none}
}

/* Controlled right bleed for white feature sections (for reverse layout) */
.feature.reverse.bleed-right > .img-placeholder{position:relative;overflow:visible;
  /* Faz o bloco da imagem “sangrar” até a lateral direita da viewport */
  width: 50vw; /* default */
  margin-right: calc(50% - 50vw);
}

/* Desktop: imagem deve ocupar do meio até a lateral da viewport (50vw) */
@media (min-width: 1024px){
  :root{ --image-inset-desktop: 0px; }
  .feature.bleed-left > .img-placeholder{
    width: 50vw;
    margin-left: calc(50% - 50vw);
    flex: 0 0 auto; /* impede flex de reduzir a largura calculada */
    align-self: stretch;
  }
  .feature.reverse.bleed-right > .img-placeholder{
    width: 50vw;
    margin-right: calc(50% - 50vw);
    flex: 0 0 auto; /* impede flex de reduzir a largura calculada */
    align-self: stretch;
  }
}
.feature.reverse.bleed-right > .img-placeholder::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  right:calc(-1*(50vw - 50%));
  width:calc(50vw - 50%);
  /* Evita herdar o background e duplicar a imagem */
  background:none;
  border-radius:0;
}
@media (max-width:900px){
  .feature.reverse.bleed-right > .img-placeholder::after{display:none}
}

/* Efeito de zoom ao passar o mouse nos cards de serviços */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: scale(1.05); /* aumenta 5% */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* sombra mais evidente */
  z-index: 10; /* garante destaque sobre outros cards */
}

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

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

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

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


/* Safety defaults: garantir que o box da imagem exista sempre */
.section.feature > .img-placeholder{
  display: block;
  min-height: 260px; /* não interfere no desktop (height:460px) */
}

/* ==========================
   Garantia extra (mobile):
   imagem abaixo do texto
   ========================== */
@media (max-width: 900px){
  body.cyber-page .section.feature{ display: flex !important; flex-direction: column !important; }
  body.cyber-page .section.feature > div:not(.img-placeholder){ order: 1 !important; width: 100% !important; }
  body.cyber-page .section.feature > .img-placeholder,
  body.cyber-page .dark-section .feature > .img-placeholder,
  body.cyber-page .blue-bg-only .feature > .img-placeholder{
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 360px !important; /* padroniza com sessões brancas */
    min-height: 260px !important;
    height: 260px !important;
    margin: 12px auto 0 auto !important; /* centraliza */
    border-radius: 12px !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
  }
}