/* =================================================================== */
/* ARQUIVO DE ESTILOS RESPONSIVOS              */
/* =================================================================== */

@media (max-width: 1024px) {
  .container-form {
    width: 80%;
  }

  .textoPortifolio {
    text-align: center;
  }
}

/* Regras aplicadas em telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {
  /* --- SEÇÃO HERO --- */

  .hero-section {
    /* Em vez de uma altura fixa, usamos padding para mais flexibilidade */
    padding: 140px 0 80px 0;
    min-height: auto;
    text-align: center;
  }

  .hero-content {
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero-content h1 {
    font-size: 2.5rem;
    line-height: 1.3;
  }

  .hero-content p {
    font-size: 1.1rem;
    margin-bottom: 5.5rem;
    max-width: 90%;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-button {
    padding: 1rem 1.7rem;
    font-size: 1rem;
  }

  .hero-background-shapes {
    display: none;
  }

  /* ================================================= */
  /* PORTFOLIO SECTION - RESPONSIVO (VERSÃO CORRIGIDA) */
  /* ================================================= */

  .portfolio-section {
    padding: 3rem 0;
  }

  .portifolio-sec {
    width: 90%;
    max-width: 500px;
    margin: 0 auto 3rem auto;
    border-radius: 15px;
    background-color: rgb(241, 235, 235);
    box-shadow: 0px 15px 40px -15px rgba(189, 172, 142, 0.4);
    padding: 2.5rem 0;
    overflow: hidden;
  }

  .portifolio-sec:hover {
    transform: none;
    box-shadow: none;
  }

  .textoPortifolio h4 {
    font-size: 1rem;
  }

  .section-title2 {
    font-size: 2rem;
    margin: 0 1rem 2.5rem 1rem;
    text-align: center;
  }

  #portfolio .flickity-viewport {
    overflow: visible;
  }

  #portfolio .portfolio-item {
    width: 75%;
    max-width: 380px;
    margin: 0 15px;

    transform: scale(1);
    filter: brightness(1);
  }

  #portfolio .portfolio-overlay {
    opacity: 1;
  }

  #portfolio .portfolio-overlay h3 {
    font-size: 1.2rem;
  }

  /* ================================================= */
  /* CONTATO SECTION (FOOTER) - RESPONSIVO             */
  /* ================================================= */

  .container-form {
    width: 70%;
  }

  .footer-section {
    padding-top: 3rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 3rem;
  }

  .footer-text {
    text-align: center;
  }

  .footer-text h2 {
    font-size: 2.2rem;
  }

  .footer-form {
    padding: 2rem 1.5rem;
  }

  .form-group-inline {
    flex-direction: column;
    gap: 0;
  }
}

/* FIM DO @media (max-width: 768px) */

/* =================================================================== */
/* AJUSTES FINOS PARA TELAS MUITO PEQUENAS         */
/* =================================================================== */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
    /* Título ainda menor para telas bem estreitas */
  }

  .hero-content p {
    font-size: 1rem;
  }

  .cta-button {
    padding: 1.2rem;
  }

  .cta-button-centered {
    font-size: 0.9rem;
    padding: 1.2rem;
  }
  /* ================================================= */
  /* CONTATO SECTION (FOOTER) - RESPONSIVO             */
  /* ================================================= */

  .container-form {
    width: 95%;
  }

  .footer-bottom {
    width: 80%;
    text-align: center;
    padding: 1.5rem 0rem;
    border-top: 1px solid #334155;
  }

  .footer-bottom p {
    font-size: 0.8rem;
  }
}

/* FIM DO @media (max-width: 480px) */

/* ================================================= */
/* DIFERENCIAIS SECTION - RESPONSIVO */
/* ================================================= */
/* Para telas de até 1024px (tablets em modo retrato e celulares) */
@media (max-width: 950px) {
  .features-grid {
    flex-direction: column;
    /* Altera a direção do flex para coluna */
    align-items: center;
    /* Centraliza os cards na coluna */
    gap: 2rem;
    /* Ajusta o espaçamento entre os cards */
  }

  .feature-card {
    width: 100%;
    /* Faz o card ocupar a largura máxima disponível */
    max-width: 500px;
    /* Define uma largura máxima para não ficar muito largo */
  }

  .section-title1 {
    font-size: 2.8rem;
    /* Ajusta o tamanho do título para telas menores */
  }
}

/* Para telas de até 480px (celulares menores) */
@media (max-width: 480px) {
  #diferenciais {
    padding: 4rem 1rem;
    /* Diminui o padding da seção */
  }

  .section-title1 {
    font-size: 2.2rem;
    /* Diminui ainda mais o título */
  }

  .feature-card {
    padding: 2rem 1.5rem;
    /* Diminui o padding interno dos cards */
  }

  .feature-card h3 {
    font-size: 1.4rem;
  }
}

/* ======================================= */
/* CSS PARA RESPONSIVIDADE        */
/* ======================================= */

/* Para telas de tablet e desktops menores (até 1024px) */
@media (max-width: 1024px) {
  #sobre {
    padding: 6rem 2rem; /* Reduz o preenchimento vertical */
  }

  .about-content {
    width: 90%; /* Aumenta a largura para usar melhor o espaço */
    gap: 4rem; /* Diminui o espaço entre o texto e a imagem */
  }

  .empresaMerce {
    font-size: 3rem; /* Diminui um pouco a fonte do título */
  }
}

/* Para telas de celular (até 768px) */
@media (max-width: 1310px) {
  #sobre {
    padding: 5rem 1.5rem; /* Reduz ainda mais o preenchimento */
  }

  .about-content {
    flex-direction: column; /* MUITO IMPORTANTE: Empilha os itens verticalmente */
    gap: 3rem; /* Espaço vertical entre a imagem e o texto */
    width: 95%;
    text-align: center; /* Centraliza o texto */
  }

  .about-text {
    width: 100%; /* O texto agora pode ocupar toda a largura disponível */
    /* Coloca o texto antes da imagem, se desejar. Caso contrário, remova a linha abaixo. */
    order: 2;
  }

  .about-image {
    width: 100%;
    margin-bottom: 2rem; /* Adiciona uma margem abaixo da imagem */
    order: 1; /* Coloca a imagem antes do texto */
  }

  .about-image img {
    width: 90%; /* A imagem ocupa mais espaço no container */
    max-width: 400px; /* Evita que a imagem fique gigante em telas de celular largas */
    margin: 0 auto; /* Garante que a imagem fique centralizada */
  }

  .empresaMerce {
    font-size: 2.2rem; /* Fonte do título bem menor e adequada para mobile */
  }

  .noMundo {
    font-size: 1.1rem; /* Ajusta o texto do parágrafo */
  }

  .cta-button-secondary {
    /* O botão já está com um bom tamanho, mas você poderia ajustar o padding se quisesse */
    padding: 0.7rem 1.8rem;
  }
}