/* ============================================================
   D-Net Soluciones — Responsive Styles
   ============================================================ */


/* ============================================================
   1. NAV
   ============================================================ */
nav { z-index: 99999 !important; }

@media (max-width: 1440px) { nav { padding: 10px 200px; } }
@media (max-width: 1280px) { nav { padding: 10px 80px; } }
@media (max-width: 1024px) {
  nav { padding: 10px 40px; }
  .nav2 { gap: 24px; }
  .nav2 h4 { font-size: 14px; }
}
@media (max-width: 768px) {
  nav { padding: 10px 20px; height: 52px; }
  .nav2 { gap: 16px; padding: 6px; }
  .nav2 h4 { font-size: 12px; margin-bottom: 36px; }
  #nav-bottom { top: 52px; }
}
@media (max-width: 480px) {
  nav { padding: 8px 12px; height: 48px; }
  .nav2 { gap: 10px; }
  .nav2 h4 { font-size: 10px; white-space: nowrap; }
  #nav-bottom { top: 48px; }
}


/* ============================================================
   2. INTRO
   ============================================================ */
@media (max-width: 768px) { .logo { font-size: 56px; } }
@media (max-width: 480px) { .logo { font-size: 40px; } }


/* ============================================================
   3. HERO
   ============================================================ */
@media (max-width: 1024px) {
  .hero {
    background-position: center 20%;
    padding: 100px 24px 140px;
  }
  .hero::after {
    height: 460px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,.04) 15%,
      rgba(255,255,255,.10) 28%,
      rgba(255,255,255,.20) 40%,
      rgba(255,255,255,.35) 52%,
      rgba(255,255,255,.52) 63%,
      rgba(255,255,255,.68) 74%,
      rgba(255,255,255,.82) 84%,
      rgba(255,255,255,.93) 92%,
      #fff                  100%
    );
  }
}

@media (max-width: 768px) {
  #main  { padding-top: 0 !important; margin-top: 0 !important; }
  #page1 { height: auto; min-height: 72vh; margin-bottom: 0 !important; }

  .hero {
    min-height: 72vh;
    padding: 72px 20px 56px;
    background-position: center center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .hero__content {
    position: relative; z-index: 2;
    max-width: 100%; margin-left: 0;
  }
  .hero__actions {
    position: relative; z-index: 2;
    flex-direction: column; gap: 10px; max-width: 300px;
  }
  .btn { width: 100%; justify-content: center; }
  .hero::after {
    bottom: 0 !important;
    height: 340px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,.04) 15%,
      rgba(255,255,255,.10) 28%,
      rgba(255,255,255,.20) 40%,
      rgba(255,255,255,.35) 52%,
      rgba(255,255,255,.52) 63%,
      rgba(255,255,255,.68) 74%,
      rgba(255,255,255,.82) 84%,
      rgba(255,255,255,.93) 92%,
      #fff                  100%
    );
  }
  .hero__title    { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .hero__subtitle { font-size: 0.97rem; }
  .hero__badge    { font-size: 0.82rem; padding: 8px 12px; }
}

@media (max-width: 480px) {
  .hero { min-height: 65vh; padding: 68px 16px 48px; }
  .hero::after { height: 280px; }
  .hero__title    { font-size: 1.5rem; }
  .hero__subtitle { font-size: 0.9rem; }
}


/* ============================================================
   4. TESTIMONIOS
   ============================================================ */
@media (max-width: 1024px) {
  .testimonial-section { top: -150px; padding: 20px 0; }
  .testimonials-text   { padding: 50px 30px; }
}
@media (max-width: 768px) {
  #page2 {
    position: relative;
    height: auto !important; min-height: 0 !important;
    margin-top: -80px !important;
    background: transparent !important;
    z-index: 2;
  }
  .testimonial-section {
    top: 0 !important;
    height: auto !important;
    padding: 20px 16px 40px;
    background: transparent !important;
    margin-top: 0 !important;
  }
  .testimonials-text      { padding: 36px 20px; }
  .testimonials-text p    { font-size: 13px; }
  .testimonials-avatar h3 { font-size: 15px; }
  .listing-carousel-button { width: 50px; height: 40px; }
}
@media (max-width: 480px) {
  #page2 { margin-top: -60px !important; }
  .testimonials-text { padding: 28px 14px; }
  .listing-carousel-button { display: none; }
}


/* ============================================================
   5. ABOUT
   ============================================================ */
@media (max-width: 1280px) {
  #page3 { height: auto; min-height: 60vh; padding: 60px 0; align-items: center; }
  .about-content { gap: 2rem; padding: 0 32px; }
  .about-text h1 { font-size: 1.7rem; }
}
@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
    text-align: center; max-width: 680px; padding: 0 24px;
  }
  .about-image { order: -1; display: flex; justify-content: center; }
  .infrastructure-image { max-width: 480px; width: 100%; }
  .about-text h1 { font-size: 1.5rem; }
}
@media (max-width: 768px) {
  #page3 { padding: 50px 0; }
  .about-content { padding: 0 20px; }
  .about-text h1 { font-size: 1.3rem; line-height: 1.5; }
}
@media (max-width: 480px) { .about-text h1 { font-size: 1.1rem; } }


/* ============================================================
   6. LOGOS / CLIENTES
   ============================================================ */
@media (max-width: 1280px) {
  #page5 { height: auto; padding-bottom: 50px; }
  .brands { gap: 48px; }
}
@media (max-width: 1024px) {
  #page5 { padding-bottom: 60px; }
  #page5 h1 { font-size: 1.5rem; top: 2.5rem; left: 1.5rem; }
  .brands { gap: 44px; margin-top: 100px; min-height: unset; }
  .brand-group img { height: clamp(50px, 7vw, 80px); }
}
@media (max-width: 768px) {
  #page5 { height: auto; display: flex; flex-direction: column; padding: 0; }
  #page5 h1 { position: static; padding: 52px 16px 0; font-size: 1.3rem; flex-shrink: 0; }
  .brands {
    flex: 1; margin-top: 0; padding: 48px 0 52px;
    gap: 44px; min-height: unset; align-content: center;
  }
  .brand-marquee { width: 100%; }
  .brand-group img { height: clamp(48px, 10vw, 72px); }
  .brand-group { padding-right: 60px; }
}
@media (max-width: 480px) {
  #page5 h1 { font-size: 1.1rem; padding: 44px 12px 0; }
  .brands { padding: 40px 0 44px; gap: 36px; }
  .brand-group img { height: clamp(40px, 11vw, 60px); }
  .brand-group { padding-right: 40px; }
}


/* ============================================================
   7. CONTACTO
   ============================================================ */
@media (max-width: 1440px) {
  .form { width: min(1200px, 92vw); height: auto; min-height: 75vh; }
}
@media (max-width: 1024px) {
  #page6 { height: auto; padding: 40px 0; }
  .form { width: min(720px, 96vw); grid-template-columns: 1fr; height: auto; }
  .contact-form:before { top: -13px; left: initial; right: 70px; transform: rotate(-45deg); }
  .big-circle, .square { display: none; }
  .title { font-size: 2rem; }
}
@media (max-width: 768px) {
  .container { padding: 1.5rem; }
  .form { width: 100%; border-radius: 8px; }
  .title { font-size: 1.7rem; margin-bottom: 1.5rem; }
  .text, .information, .information a { font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .contact-info, form { padding: 1.5rem 1.2rem; }
  .title { font-size: 1.4rem; }
  .input { font-size: 0.9rem; padding: 0.5rem 1rem; }
  textarea.input { min-height: 180px; }
  .input-container { margin: 1.5rem 0; }
  .contact-info:before { display: none; }
}


/* ============================================================
   8. FOOTER
   ============================================================ */
.volver {
  position: static;
  bottom: auto; text-align: center;
  width: 100%; padding: 40px 0;
  margin: 0 auto; display: block;
}
#footer { display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  #footer { height: 20vh; }
  .volver { font-size: 16px; padding: 0; }
}
@media (max-width: 480px) { .volver { font-size: 14px; } }


/* ============================================================
   9. SCROLL MÓVIL
   ============================================================ */
@media (max-width: 768px) {
  html { overflow: auto !important; scroll-behavior: smooth; }
  body { overflow: auto !important; }
  #main { height: auto !important; transform: none !important; }
}


/* ============================================================
   10. 2K / 4K
   ============================================================ */
@media (min-width: 1921px) {
  nav { padding: 10px max(600px, calc(50% - 460px)); }
  .hero__content { max-width: 800px; }
  .about-content { max-width: 1400px; }
  .form { width: min(1600px, 86vw); }
  .brand-group img { height: clamp(90px, 7vw, 130px); }
  .brands { gap: 80px; }
  .brand-group { padding-right: 160px; }
  #page5 h1 { font-size: 2.2rem; }
}