/* ===================================================
   CLASSIC PAINTING RESPONSIVE CSS (Bootstrap-based)
=================================================== */


/* ==========================
   DEFAULT (Desktop > 1200px)
========================== */

/* ===== Navbar ===== */
.header-title { display: none; }
.paint-nav .navbar-light .navbar-nav .nav-link {
    padding: 6px 12px;
    min-width: 80px;
    text-align: center;
}
.paint-nav .navbar-brand img { 
  height: 100px;
 }

/* 🎯 cambio: solo logoclassic visible en escritorio */
.logo {
  display: block !important;
  position: relative;
  top: 6px;
  padding-left: -150px;
}

/* 🎯 Ajuste de posición del logo rodillo (logoroll) */
.logoroll {
  display: block !important;
  position: relative;
  top: -110px;
  left: 0;
  padding-left: 200px;
}


.logotransparent {
  display: none !important;
}

/* ===== Hero Section ===== */
.hero-content h1 {
   width: 60%;
   font-size: 29px; 
   padding-top: 180px;
   }

.hero-content p {
   width: 60%;
   }

/* ===== About ===== */
.about h2 {
   width: 68%;
   }


/* ==========================
   LG (Laptop / Escritorio mediano ≥992px y <1200px)
========================== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .paint-nav .navbar-light .navbar-nav .nav-link {
        font-size: 11px;
        padding: 10px 10px;
    }
    .paint-nav .navbar-brand img { 
      height: 75px;
     }

    /* 🎯 cambio: sigue mostrando logoclassic */
    .logoclassic {
       display: block !important;
       padding-left: 240px;
       position: relative;
       top: -20px; 
      }
    /* .logo, .logotransparent { display: none !important; } */

    .hero-content h1 {
       font-size: 26px;
       width: 70%;
       padding-top: 
       140px; 
      }

    .hero-content p {
      width: 70%;
      }
    .about h2 { 
      width: 80%;
      font-size: 25px;
     }
}


/* ==========================
   MD (Tablet horizontal ≥768px y <992px)
========================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    header.header-area {
        position: inherit;
        background-color: #fec73c;
    }

    /* 🎯 cambio: muestra solo logotransparent */
    .logotransparent {
      display: block !important;
      height: 60px;
      position: relative;
      top: 0;
      left: 10px;
    }
    .logoclassic, .logo {
      display: none !important;
     }
    .paint-nav .navbar-brand img {
       height: 45px;
       left: -69%;

     }
    ul.navbar-nav.hp-1-nav.ml-auto.mt-2 {
        position: inherit;
        padding: 0;
        text-align: center;
    }
}


/* ==========================
   SM (Tablet vertical / Celular grande ≥576px y <768px)
========================== */
@media (min-width: 576px) and (max-width: 767.98px) {

    header.header-area {
        position: inherit;
        background-color: #fec73c;
    }

    /* 🎯 cambio: muestra solo logotransparent */
    .logotransparent {
      display: block !important;
      height: 55px;
      position: relative;
      top: 0;
      left: 10px;
    }
    .logoclassic, .logo {
      display: none !important;
     }

    .hero-content h1 {
        font-size: 18px;
        line-height: 25px;
        padding-top: 70px;
    }
    .hero-content p {
        font-size: 13px;
    }
}


/* ==========================
   XS (Celular pequeño <576px)
========================== */
@media (max-width: 575.98px) {

    header.header-area {
        position: inherit;
        background-color: #fec73c;
    }

    /* 🎯 cambio: solo logotransparent visible */
    .logotransparent {
      display: block !important;
      height: 50px;
      position: relative;
      top: 3px;
      left: 8px;
    }
    .logoclassic, .logo { display: none !important; }

    .hero-content h1 {
       font-size: 16px;
       }
    .hero-content p {
       font-size: 10px;
       line-height: 16px;
       }
}


/* ===== Menú hamburguesa ===== */
@media (max-width: 991.98px) {
  .paint-nav .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 85%;
    background-color: #fec73c;
    z-index: 999;
    border-radius: 0 0 8px 0;
    transition: all 0.3s ease;
  }

  .paint-nav .navbar-light .navbar-nav .nav-link {
    text-align: left;
    padding: 12px 20px;
  }
}