/* ===============================
   RESPONSIVIDADE GLOBAL
   =============================== */

/* ----------- LARGE DESKTOP (≤ 1440px) ----------- */
@media (max-width: 1440px) {
  .navbar {
    padding: 20px 60px;
  }

  .skill-grid {
    width: 110%;
    gap: 80px;
  }

  .skills-card {
    width: 110%;
  }
}

/* ----------- NOTEBOOK (≤ 1200px) ----------- */
@media (max-width: 1200px) {
  .navbar {
    padding: 18px 40px;
  }

  .ofcanvas-btn {
    display: block;
    top: 28%;
  }

  .links {
    display: none;
  }

  .nome {
    font-size: 52px;
  }

  .role {
    font-size: 2.1rem;
  }

  .skill-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 60px;
  }

  .skills-card {
    width: 100%;
  }

  .card {
    max-width: 700px;
  }
}

/* ----------- TABLET LANDSCAPE (≤ 992px) ----------- */
@media (max-width: 992px) {
  header {
    margin-bottom: 7rem;
  }

  .logo {
    font-size: 2.2rem;
  }

  .links {
    display: none;
  }

  .nome {
    font-size: 46px;
  }

  .subtext {
    font-size: 1rem;
    margin: 3rem 0;
  }

  .btn-primary {
    padding: 18px 36px;
    font-size: 1.1rem;
  }

  .skill-grid {
    gap: 50px;
  }

  .btn-download {
    width: 40%;
  }

  .arrow {
    margin-left: 0;
  }

  .contato-item {
    padding: 28px 20px;
  }

  .disp {
    margin: 0 30px;
  }
}

/* ----------- TABLET PORTRAIT (≤ 768px) ----------- */
@media (max-width: 768px) {
  .main-section {
    padding: 0 20px 60px 20px;
  }

  .navbar {
    padding: 16px 24px;
  }

  .logo {
    font-size: 2rem;
  }

  .ofcanvas-btn {
    top: 25%;
  }

  .nome {
    font-size: 40px;
    line-height: 1.15;
  }

  .role {
    height: auto;
    font-size: 2rem;
  }

  .btns-about {
    gap: 25px;

  }

  .text-intro {
    font-size: 2rem;
  }

  .card {
    padding: 32px;
    font-size: 1.15rem;
  }

  .skill-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .skills-card {
    padding: 30px;
  }

  .btn-download {
    width: 60%;
  }

  .contato-item {
    gap: 12px;
    padding: 24px 18px;
  }

  .icon-left {
    width: 40px;
    height: 40px;
  }

  .icon-left .wpp,
  .icon-left .email {
    font-size: 22px;
  }

  .contato-info a {
    font-size: 15px;
  }

  .arrow {
    font-size: 16px;
    opacity: 0.5;
  }

  .disponibilidade {
    padding: 16px;
    margin-top: 24px;
  }
}

/* ----------- MOBILE LARGE (≤ 576px) ----------- */
@media (max-width: 576px) {

  .logo {
    font-size: 1.8rem;
  }

  .badge,
  .badge-estatico {
    padding: 14px;
    font-size: 0.75rem;
  }

  .subtext,
  .subtext2 {
    font-size: 1rem;
  }

  .btn-primary {
    padding: 16px 30px;
    font-size: 1rem;
  }

  .skills-header h3 {
    font-size: 1.3rem;
  }

  .skills-icon {
    font-size: 1.7rem;
  }

  .social-links-hero {
    gap: 22px;
  }

  .social-links-hero i {
    font-size: 1.7rem;
  }

  hr {
    width: 70%;
  }

  .contato-item {
    flex-direction: row;
    align-items: center;
    padding: 20px 16px;
  }

  .contato-info {
    gap: 2px;
  }

  .label {
    font-size: 11px;
  }

  .contato-info a {
    font-size: 14px;
    word-break: break-word;
  }

  .arrow {
    display: none;
  }

  .disp {
    justify-content: center;
    margin: 10px;
  }

  .projeto-image img {
    height: 180px;
  }

}

/* ----------- MOBILE SMALL (≤ 400px) ----------- */
@media (max-width: 400px) {
  .navbar {
    padding: 14px 16px;
  }

  .nome {
    font-size: 40px;
  }

  .logo {
    font-size: 1.5rem;
  }

  .role {
    font-size: 1.8rem;
  }

  .text-intro {
    font-size: 1.7rem;
  }

  .card {
    padding: 26px;
  }

  .btn-download {
    width: auto;
  }

  .skill-header {
    gap: 10px;
  }

  .icon-left {
    width: 36px;
    height: 36px;
  }

  .icon-left .wpp,
  .icon-left .email {
    font-size: 20px;
  }

  .contato-item {
    padding: 18px 14px;
    width: 100%;
    margin-right: 70px;
  }

  .disponibilidade {
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding: 5px;
  }

  .txt-disp {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contato {
    padding-bottom: 26px;
  }

  .txt-azul {
    margin-right: 3px;
  }

  .projeto-image img {
    height: 160px;
  }

  .servico-card i {
    font-size: 2.4rem;
  }

  .servico-title {
    font-size: 1.3rem;
  }

  .servico-description {
    font-size: 0.95rem;
  }

  .itens-lista i {
    font-size: 0.9rem;
  }
}