/*!
 * educacao.responsive.css — Inova Tecnologia (educacao.html)
 * Padrão consolidado:
 * - Header sticky >1024px; mobile off-canvas (dropdowns expandidos)
 * - Esconde CTA <650px (regra global)
 * - Banner com título legível em mobile
 * - Grids/containers responsivos (introdução, acessos, parceria, parceiros, integração, diferenciais)
 * - Vídeo 16:9 responsivo
 * - Footer padronizado com gutters pequenos e logo maior em telas pequenas
 * - Overflow lateral protegido
 */

/* ===== Barragens globais ===== */

/* ===== Sessão Introdução ===== */
.introducao-educacao{ padding: 40px 100px; }
.introducao-header{ max-width: 960px; margin: 0 auto 12px; text-align: center; }
.introducao-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 18px;
}
.introducao-card{ height:100%; display:flex; flex-direction:column; gap: 10px; padding: 18px; }
.introducao-card .card-icon{ width:64px; height:64px; }
.introducao-card .card-title{ margin: 6px 0; }
.introducao-card .card-text{ margin: 0; }
.introducao-card .cta-container{ margin-top:auto; }
@media (min-width: 1920px){ .introducao-educacao{ padding: 60px 300px; }}
@media (max-width: 1200px){ .introducao-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } }
@media (max-width: 768px){ .introducao-educacao{ padding: 32px 20px; } .introducao-grid{ grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 500px){
  .introducao-educacao{ padding: 26px 16px; }
  .introducao-header h2{ font-size: clamp(1.3rem, 6vw, 1.6rem); line-height:1.25; margin-bottom:10px; }
  .introducao-header h3{ font-size:.96rem; line-height:1.5; margin:6px auto 0; max-width:60ch; }
}
@media (max-width: 360px){ .introducao-educacao{ padding: 20px 12px; } }

/* ===== Sessão Acessos ===== */
.acessos{ padding: 40px 100px; }
.acessos-header{ max-width: 960px; margin: 0 auto 12px; text-align:center; }
.acessos-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top:18px;
}
.acesso-card{ height:100%; display:flex; flex-direction:column; gap: 10px; padding: 18px; }
.acesso-icon{ width:64px; height:64px; }
.acesso-title{ margin: 6px 0; }
.acesso-text{ margin: 0; }
.servico-lista{ margin: 6px 0 0 16px; }
.acesso-cta{ display:inline-block; margin-top: 16px; }
@media (min-width: 1920px){ .acessos{ padding: 60px 300px; }}
@media (max-width: 1200px){ .acessos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } }
@media (max-width: 768px){ .acessos{ padding: 32px 20px; } .acessos-grid{ grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 500px){ .acessos{ padding: 26px 16px; } }
@media (max-width: 360px){ .acessos{ padding: 20px 12px; } }

/* ===== Sessão Parceria Exclusiva ===== */
.parceria-exclusiva{ padding: 40px 100px; }
.parceria-header{ max-width: 960px; margin: 0 auto 12px; text-align:center; }
.parceria-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; }
.parceria-texto{ display:flex; flex-direction: column; gap: 14px; }
.beneficios-title{ margin: 10px 0 0; }
.beneficios-lista{ margin: 8px 0 0 16px; display:grid; gap: 8px; }
.parceria-card{ position:relative; }
.floating-square{ position:absolute; width: 48px; height: 48px; border-radius: 12px; background: rgba(0,0,0,.06); }
.square-1{ top:8%; left:8%; }
.square-2{ bottom:10%; right:10%; }
.parceria-img{ width:100%; max-width: 560px; margin-left:auto; border-radius: 16px; }
.parceria-cta{ margin-top: 10px; }
.btn-parceria{ display:inline-flex; align-items:center; gap:8px; padding: 12px 16px; border-radius: 10px; }
.btn-arrow{ flex: 0 0 auto; }

@media (min-width: 1920px){ .parceria-exclusiva{ padding: 60px 300px; } }
@media (max-width: 1024px){ .parceria-grid{ grid-template-columns: 1fr; } .parceria-img{ margin: 0 auto; } }
@media (max-width: 768px){ .parceria-exclusiva{ padding: 32px 20px; } }
@media (max-width: 500px){ .parceria-exclusiva{ padding: 26px 16px; } }
@media (max-width: 360px){ .parceria-exclusiva{ padding: 20px 12px; } }

/* ===== Sessão Projetos/Parceiros ===== */
.nova-sessao{ padding: 40px 100px; }
.nova-sessao-container{ margin-inline:auto; }
.nova-sessao-header{ max-width: 960px; margin: 0 auto 12px; text-align:center; }
.parceiros-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 18px; }
.parceiro-card{ display:flex; flex-direction:column; gap: 12px; padding: 18px; }
.parceiro-header{ display:flex; gap: 12px; align-items:center; }
.parceiro-logo{ width: 120px; }
.parceiro-info h3{ margin: 0 0 4px; }
.info-section{ display:flex; flex-direction:column; gap: 6px; }
.info-title{ margin: 10px 0 0; }
.tecnologias-tags{ display:flex; gap: 8px; flex-wrap: wrap; }
.resultados-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.resultado-item{ display:flex; flex-direction:column; gap: 4px; align-items:center; text-align:center; }

@media (min-width: 1920px){
  .nova-sessao{ padding: 60px 300px; }
}

@media (max-width: 1200px){
  .parceiros-grid{ grid-template-columns: 1fr; }
  .resultados-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .nova-sessao{ padding: 32px 20px; }
}
@media (max-width: 500px){
  .nova-sessao{ padding: 26px 16px; }
  .parceiro-logo{ width: 100px; }
}
@media (max-width: 360px){
  .nova-sessao{ padding: 20px 12px; }
  .resultados-grid{ grid-template-columns: 1fr; }
}

/* ===== Sessão Integração ===== */
.integracao-section{ padding: 40px 100px; }
.integracao-header{ text-align:center; }
.header-badge{ display:inline-block; padding: 10px 14px; border-radius: 12px; }
.main-connector{ width: 90px; height: 4px; margin: 12px auto 0; border-radius: 3px; }
.integracao-diagram{ margin-top: 18px; position: relative; }
.horizontal-connector{ height: 4px; width: 100%; border-radius: 3px; }
.apps-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.app-card{ display:flex; flex-direction:column; gap: 10px; padding: 16px; position:relative; }
.card-connector{ position:absolute; top:-10px; left:50%; transform: translateX(-50%); width: 2px; height: 10px; border-radius: 2px; }
.app-icon{ width: 60px; height: 60px; }
.app-title{ margin: 6px 0; }
.app-description{ margin: 0; }

@media (min-width: 1920px){ .integracao-section{ padding: 60px 300px; } }
@media (max-width: 1200px){ .apps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px){ .integracao-section{ padding: 32px 20px; } .apps-grid{ grid-template-columns: 1fr; } }
@media (max-width: 500px){ .integracao-section{ padding: 26px 16px; } }
@media (max-width: 360px){ .integracao-section{ padding: 20px 12px; } }

/* ===== Sessão Diferenciais ===== */
.porque-escolher-educacao{ padding: 40px 100px; }
.porque-escolher-content{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items:center; }
.float-wrapper{ display:flex; justify-content:center; }
.phone{ width: 280px; position: relative; }
.phone-img{ width: 100%; border-radius: 20px; }
.notch{ position:absolute; top:6px; left:50%; transform: translateX(-50%); width: 40%; height: 10px; border-radius: 10px; }

.porque-escolher-text{ display:flex; flex-direction:column; gap: 12px; }
.diferenciais-list{ display:flex; flex-direction:column; gap: 14px; }
.diferencial-item{ display:grid; grid-template-columns: 40px 1fr; gap: 10px; align-items:flex-start; }
.diferencial-icon-space img{ width: 32px; height: auto; }
.diferencial-title{ margin: 0 0 4px; }
.diferencial-text p{ margin: 0; }

@media (min-width: 1920px){ .porque-escolher-educacao{ padding: 60px 300px; } }
@media (max-width: 1024px){ .porque-escolher-content{ grid-template-columns: 1fr; } .float-wrapper{ order: -1; } }
@media (max-width: 768px){ .porque-escolher-educacao{ padding: 32px 20px; } }
@media (max-width: 500px){ .porque-escolher-educacao{ padding: 26px 16px; } }
@media (max-width: 360px){ .porque-escolher-educacao{ padding: 20px 12px; } }

/* ===== Sessão Vídeo ===== */
.video-section{ padding: 40px 100px; }
.video-container{ max-width: 960px; margin-inline:auto; }
.video-header{ text-align:center; }
.video-wrapper{ margin-top: 18px; }
.video-frame{ position: relative; width:100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }
.video-cta{ margin-top: 14px; text-align:center; }
.video-cta .cta-comprar{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 10px; }

@media (max-width: 768px){ .video-section{ padding: 32px 20px; } }
@media (max-width: 500px){ .video-section{ padding: 26px 16px; } }
@media (max-width: 360px){ .video-section{ padding: 20px 12px; } }