/*
 * Aura Pro — Hero Editorial Alignment Fix
 *
 * Objetivo:
 * - alinhar o conteúdo textual do Hero do produto com a mesma coluna
 *   editorial usada na Seção 03 (Como Funciona);
 * - aplicar o mesmo comportamento em telas grandes e intermediárias;
 * - preservar o ajuste mobile já existente;
 * - não alterar vídeo, enquadramento, tipografia, botões ou outras seções.
 *
 * A Seção 03 usa .product-section-container com max-width: 1140px e
 * padding lateral de 32px. O Hero deve seguir exatamente essa referência.
 */

/* Desktop / telas grandes: mesma coluna editorial da Seção 03. */
.product-hero .product-hero-container {
  width: 100% !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/*
 * Tablet: mantém o comportamento responsivo original, evitando que a
 * largura máxima editorial crie um recuo excessivo em telas menores.
 */
@media (max-width: 1024px) {
  .product-hero .product-hero-container {
    max-width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/*
 * Mobile: preserva o recuo já calibrado anteriormente para aparelhos
 * pequenos, sem deixar esta correção desktop sobrescrevê-lo.
 */
@media (max-width: 768px) {
  .product-hero .product-hero-container {
    max-width: 100% !important;
    padding-left: clamp(24px, 7vw, 32px) !important;
    padding-right: clamp(24px, 7vw, 32px) !important;
  }
}