/* =====================================================================
   INDEX — RESPONSIVO (v2.1)  |  Carregar DEPOIS de main.css
   Alterações nesta versão:
   1) CTA “nossas-solucoes” visível <650px
   2) Logos “quem-confia” menores e fluídas
   3) CTA do HERO 100% do card (não “atravessa”)
   4) Paddings alinhados com educacao.responsive.css
   ===================================================================== */

/* Proteções globais */

/* =====================================================================
   PADRÃO DE PADDING POR SECTION  (mesmo do educacao.responsive.css)
   ===================================================================== */
.stats, .nossas-solucoes, .quem-confia, .segmentos,
.tecnologias, .nova-sessao, .servicos, .video-section,
.tecnologias-section, .whatsapp-comercial, .fale-conosco{
  padding: 40px 100px;
}
@media (min-width:1920px){
  .stats, .nossas-solucoes, .quem-confia, .segmentos,
  .tecnologias, .nova-sessao, .servicos, .video-section,
  .tecnologias-section, .whatsapp-comercial, .fale-conosco{
    padding: 60px 300px;
  }
}
@media (max-width:768px){
  .stats, .nossas-solucoes, .quem-confia, .segmentos,
  .tecnologias, .nova-sessao, .servicos, .video-section,
  .tecnologias-section, .whatsapp-comercial, .fale-conosco{
    padding: 32px 20px;
  }
}
@media (max-width:500px){
  .stats, .nossas-solucoes, .quem-confia, .segmentos,
  .tecnologias, .nova-sessao, .servicos, .video-section,
  .tecnologias-section, .whatsapp-comercial, .fale-conosco{
    padding: 26px 16px;
  }
}
@media (max-width:360px){
  .stats, .nossas-solucoes, .quem-confia, .segmentos,
  .tecnologias, .nova-sessao, .servicos, .video-section,
  .tecnologias-section, .whatsapp-comercial, .fale-conosco{
    padding: 20px 12px;
  }
}

/* =====================================================================
   HERO — imagem 100% largura / CTA 100% do card
   ===================================================================== */
:root{
  --hero-maxw: 640px;
}

.hero{
  position:relative; display:flex; align-items:center;
  min-height: clamp(480px, 64vh, 720px);
  overflow:hidden;
}
.hero-background{ position:absolute; inset:0; width:100%; height:100%; }
.hero-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease;
}
.hero-image.active{ opacity:1; visibility:visible; }
.hero-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.7); }
.hero-content{ position:relative; z-index:2; width:100%; padding: 40px 100px; }
@media (min-width:1920px){ .hero-content{ padding:60px 300px; } }
@media (max-width:768px){ .hero-content{ padding:32px 20px; } }
@media (max-width:500px){ .hero-content{ padding:26px 16px; } }
@media (max-width:360px){ .hero-content{ padding:20px 12px; } }

.hero-text{
  background:#25BACF; color:#fff; border-radius:16px;
  padding: clamp(16px, 2.6vw, 28px);
  max-width: var(--hero-maxw);
  box-shadow:0 14px 36px rgba(0,0,0,.18);
  display:grid; gap:14px;    /* garante respiro interno e layout do CTA */
}
.hero-title{ font:900 clamp(26px,4vw,52px)/1.1 "Poppins",system-ui; margin:0; }
.hero-description{ margin:0; color:#fff; }

/* CTA do HERO — 100% do cartão SEM exceder bordas */
.hero-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:100%;    /* remove limite que gerava “atravessar” */
  min-height:52px; padding:0 18px; border-radius:12px;
  background:#2E3F5B; color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.2); }
@media (max-width:600px){ .hero-title{ font-size:clamp(22px,7.5vw,30px); } }

/* =====================================================================
   STATS
   ===================================================================== */
.stat-divider{ display:none; }
.stats-grid{ grid-template-columns:1fr; row-gap:22px; }
@media (min-width:768px){
  .stat-divider{ display:block; }
  .stats-grid{ grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; }
}

/* =====================================================================
   NOSSAS SOLUÇÕES
   ===================================================================== */
.solucoes-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
.solucoes-grid-app{ grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:1200px){ .solucoes-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .solucoes-grid, .solucoes-grid-app{ grid-template-columns:1fr; gap:16px; }
  .solucao-cta{ width:100%; justify-content:center; }
}

/* (1) Forçar CTA visível em <650px — sobrepõe regra global que escondia */
@media (max-width:992px){
  .nossas-solucoes .solucao-cta,
  .nossas-solucoes .cta-comprar{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100%;
    justify-content:center;
  }
}

/* =====================================================================
   QUEM CONFIA — logos menores e fluídas
   ===================================================================== */

.quem-confia .carousel-track{ display:flex; gap:28px; align-items:center; }

/* (2) Tamanho das logos por viewport */
.quem-confia .carousel-item img{
  height: clamp(120px, 12.6vw, 200px);   /* reduz e torna fluído */
  width: auto;
  object-fit: contain;
  filter: none;
}
.quem-confia .carousel-track{ gap:100px; }


/* =====================================================================
   SEGMENTOS
   ===================================================================== */
.segmentos .carousel-content{ overflow:hidden; }
.segmentos .segmento-item{ display:grid; }
.segmentos .segmento-image img{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
}
.segmento-titulo{ position:relative; padding-left:14px; margin:0 0 6px; }
.cta-verifique-sections{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:768px){ .cta-verifique-sections{ width:100%; justify-content:center; } }

/* =====================================================================
   TECNOLOGIAS
   ===================================================================== */
.tecnologias-content{ grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:1024px){ .tecnologias-content{ grid-template-columns:1fr; } }

/* =====================================================================
   PARCEIROS / PROJETOS
   ===================================================================== */
.parceiros-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:1200px){ .parceiros-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   SERVIÇOS
   ===================================================================== */
.servicos-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:1200px){ .servicos-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .servicos-grid{ grid-template-columns:1fr; gap:16px; }
  .servico-cta, .servico-cta-servicos{ width:100%; justify-content:center; }
}

/* =====================================================================
   VÍDEO
   ===================================================================== */
.video-container{ max-width:1100px; margin-inline:auto; }

/* =====================================================================
   WHATSAPP COMERCIAL
   ===================================================================== */
.whatsapp-comercial{ display:flex; gap:20px; align-items:center; }
@media (max-width:768px){
  .whatsapp-comercial{ flex-direction:column; align-items:stretch; }
  .whatsapp-comercial-content{ grid-template-columns:1fr; gap:16px; }
  .whatsapp-comercial-button{ width:100%; }
}

/* =====================================================================
   FALE CONOSCO
   ===================================================================== */
.fale-conosco-content{ grid-template-columns:1.5fr 1fr; gap:30px; }
@media (max-width:1024px){ .fale-conosco-content{ grid-template-columns:1fr; } }
.form-button{ width:100%; }

/* =====================================================================
   BOTÕES — regra comum p/ telas pequenas
   ===================================================================== */
@media (max-width:480px){
  .cta-comprar, .solucao-cta, .segmento-cta, .cta-verifique-sections,
  .acesso-cta, .servico-cta, .servico-cta-servicos, .tecnologia-cta{
    inline-size:100%;
    justify-content:center;
  }
}

/* ================== STATS — layout melhor em telas pequenas ================== */

/* 2 colunas no mobile, com itens centralizados e sem os divisores */
@media (max-width: 768px){
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 14px 16px;              /* espaçamento entre cards */
    align-items: center;
    justify-items: center;
  }

  /* esconde qualquer divisor vertical/horizontal */
  .stat-divider{ display: none !important; }

  /* cada item de estatística centralizado e com respiro */
  .stats-grid > *:not(.stat-divider){
    text-align: center;
    padding: 10px 8px;
  }

  /* valor: forte, fluido e sem quebra (“+2 Milhões” numa linha) */
  .stats-grid .stat-value,
  .stats-grid strong,
  .stats-grid h3{
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    white-space: nowrap;      /* evita quebrar o número/símbolo + */
  }

  .stat-number {font-size: 3rem !important;}

  /* rótulo: menor e com leve transparência */
  .stats-grid .stat-label,
  .stats-grid p,
  .stats-grid span{
    font-size: 1.2rem;
    line-height: 1.25;
    margin-top: 4px;
    opacity: .85;
  }
}

/* telas muito estreitas mantêm 2 colunas, com gaps menores */
@media (max-width: 360px){
  .stats-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
}

/* 2 colunas no mobile, com itens centralizados e sem os divisores */
@media (max-width: 590px){
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 14px 16px;              /* espaçamento entre cards */
    align-items: center;
    justify-items: center;
  }

  /* esconde qualquer divisor vertical/horizontal */
  .stat-divider{ display: none !important; }

  /* cada item de estatística centralizado e com respiro */
  .stats-grid > *:not(.stat-divider){
    text-align: center;
    padding: 10px 8px;
  }

  /* valor: forte, fluido e sem quebra (“+2 Milhões” numa linha) */
  .stats-grid .stat-value,
  .stats-grid strong,
  .stats-grid h3{
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    white-space: nowrap;      /* evita quebrar o número/símbolo + */
  }

  .stat-number {font-size: 2rem !important;}

  /* rótulo: menor e com leve transparência */
  .stats-grid .stat-label,
  .stats-grid p,
  .stats-grid span{
    font-size: 1.2rem;
    line-height: 1.25;
    margin-top: 4px;
    opacity: .85;
  }
}

/* 2 colunas no mobile, com itens centralizados e sem os divisores */
@media (max-width: 428px){
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    gap: 14px 16px;              /* espaçamento entre cards */
    align-items: center;
    justify-items: center;
  }

  /* esconde qualquer divisor vertical/horizontal */
  .stat-divider{ display: none !important; }

  /* cada item de estatística centralizado e com respiro */
  .stats-grid > *:not(.stat-divider){
    text-align: center;
    padding: 10px 8px;
  }

  /* valor: forte, fluido e sem quebra (“+2 Milhões” numa linha) */
  .stats-grid .stat-value,
  .stats-grid strong,
  .stats-grid h3{
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    white-space: nowrap;      /* evita quebrar o número/símbolo + */
  }

  .stat-number {font-size: 2.2rem !important;}

  /* rótulo: menor e com leve transparência */
  .stats-grid .stat-label,
  .stats-grid p,
  .stats-grid span{
    font-size: 1rem;
    line-height: 1.25;
    margin-top: 4px;
    opacity: .85;
  }
}

@media (max-width: 600px){
    .quem-confia .carousel-item img{
    height: 70px;   /* reduz e torna fluído */
    width: auto;
    object-fit: contain;
    filter: none;
  }
  .quem-confia .carousel-track{ display:flex; gap:28px; align-items:center; }
}

@media (max-width: 500px){.servicos-header h2{ font-size: clamp(1.3rem, 6vw, 1.6rem); line-height:1.25; margin-bottom:10px; } .servicos-header p{ font-size:.96rem; line-height:1.5; margin:6px auto 0; max-width:60ch; } }