/* =======================
   RESET Y CONFIGURACIÓN BASE
   ======================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#F0EEEC;width:100%;height:100%;font-family:'Roboto',Arial,sans-serif;color:#333}
.container{position:relative;display:flex;flex-direction:column;min-height:100vh}
a{
  text-decoration: none;
  color: inherit;
}

a:visited{
  color: inherit;
}
/* =======================
   HEADER Y LOGO
   ======================= */
header.logo {
  position: relative;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
 
}

.logo-img {
  position: relative;
  width: 120px;
  height: 60px;
}

.logo-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out;
}

.logo-img .logo-hover {
  opacity: 0;
  pointer-events: none;
}

.logo-img:hover .logo-hover {
  opacity: 1;
}

.logo-img:hover .logo-default {
  opacity: 0;
}


/* =======================
   CONTENIDO PRINCIPAL
   ======================= */
.main-content{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:5rem;padding:2rem;gap:1rem}
#productTitle{font-size:1.5rem;color:#525151;text-align:center;margin-bottom:1rem}


.image-container{width:100%;max-width:1100px}
.image-container img{width:100%;height:auto;transition:opacity .5s,transform .2s ease}

/* =======================
   SECCIÓN DE TEXTO (descripción)
   ======================= */
.toggle-section{display:flex;flex-direction:column;align-items:center;width:100%}


.arrow-down{background:none;border:none;font-size:2rem;cursor:pointer;color:#525151;margin:1rem 0;transition:transform .3s ease}
.arrow-down:hover{transform:scale(1.2)}


#textContainer{width:100%;box-sizing:border-box;  }
#textContainer.show{max-height:none;padding:1.5rem 1rem;overflow:visible}


.text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0 auto;width:70%}
.text p{width:100%;margin:0 auto;font-size:1rem;line-height:1.6;color:#444}
#productDescription{white-space:pre-line;line-height:1.6;text-align:justify;text-justify:inter-word; color: #767371 !important;}


#textContainer .text{margin-bottom:30px}

/* =======================
   GALERÍA
   ======================= */
.gallery {
  display: flex;           
  flex-direction: column;
  align-items: center;
  gap: 12px;               
  margin-top: 2rem;
  width: 100%;
}


.gallery-item {
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;               
  transition: transform .3s ease, box-shadow .3s ease;
}.gallery-item:last-child{margin-bottom:0}
.gallery-item img{width:100%;height:auto;object-fit:cover;display:block}

/* =======================
   NAVEGACIÓN
   ======================= */
.navigation{width:100%;padding:0 6rem;display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;}
.navigation button{background:none;border:none;cursor:pointer;margin:0;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.navigation button img{width:1.5rem;height:1.5rem;transition:none!important}
.navigation button:hover img{transform:none!important}

/* =======================
   MENÚ
   ======================= */
.menu{display:none;position:absolute;top:calc(100% + 2px);left:0;width:100%;z-index:10;text-align:center;}
.menu ul{list-style:none;padding:0}
.menu ul li{margin:5px 0;font-size:.9rem}
.menu a,.menu a:visited{text-decoration:none;}
.menu a:hover{transform:scale(1.05)}
.menu a:visited,
.menu a:active,
.menu a:focus {
  color: inherit !important;
  background: transparent !important;
  outline: none !important;
  text-decoration: none !important;
}

/* =======================
   FOOTER
   ======================= */

.footer{color:#B9B6B3; padding-top: 30px; padding-bottom: 30px; text-align:center;font-family:"Segoe UI",sans-serif}
.footer p{color:#B9B6B3;margin-bottom:15px;font-size:14px}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.footer-links a{color:#B9B6B3;text-decoration:none;font-size:14px;transition:color .3s ease}
.footer-links a:hover{color:#B9B6B3}

/* ===========
   RESPONSIVE 
   ============*/

/* MÓVIL <768px */
@media (max-width:767px){
  #productTitle{font-size:1.2rem}

  .navigation{width:90%;padding:0 .5rem;margin-top:3.8rem;justify-content:space-between;gap:1rem}
  .navigation button{padding:10px}
  .navigation button img{width:1rem!important;height:1rem!important}

 
  .image-container{position:relative;top:auto;margin:0 auto;z-index:5;max-width:700px}
  .image-container img{display:block;width:100%;max-width:900px;transform:translateY(-60px) scale(1.18);transform-origin:center top}

  .image-container{margin-bottom:-20px}

  
  #textContainer{padding:0}
  #textContainer .text{width:100%;text-align:justify}
  #textContainer .text p{padding:2%;max-width:100%;text-align:justify}


  .gallery-item{ margin: 0 0 12px 0;}
  .gallery-item:last-child{margin-bottom:0}

 
  .logo-img{width:130px;height:70px}
  .menu ul li{font-size:.8rem}
}

/* TABLETS 768px-928px */
@media (min-width:768px) and (max-width:928px){
  #productTitle{font-size:1.3rem}
  .text{font-size:1.1rem}
  #textContainer .text{width:85%;margin:0 auto;text-align:justify}
  .gallery{width:85%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:2rem auto;}
  .gallery-item{margin:0 auto;width:100%;max-width:900px}
  .gallery-item img{width:100%;height:auto;display:block}
  .image-container{max-width:800px}
  .logo-img{width:140px;height:75px}
  .menu ul li{font-size:.9rem}
}

/* DESKTOP 929px+ */
@media (min-width:929px){
  .text{font-size:1rem}
  #textContainer .text{width:80%}
  .image-container{max-width:700px}
  .logo-img{width:150px;height:80px}
  .menu ul li{font-size:.9rem}
  .navigation{width:70%}
  .navigation button img{width:1.2rem;height:1.2rem}
  .gallery-item{margin:0}
  .gallery{gap:12px}
  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;  
    text-align: center;
  }

  .footer-links {
    display: flex;
    flex-direction: row;
    gap: 40px;
  }

  .footer p {
    margin: 0;
  }
}

/* PANTALLAS GRANDES 1200px+ */
@media (min-width:1200px){
  .text{font-size:1rem;width:80%;margin:0 auto;text-align:center}
  .image-container{max-width:800px;margin-bottom:0}
  header.logo{padding-bottom:0}
  #productTitle{margin:0 0 1rem 0}
  .logo-img{width:110px;height:60px;margin:.4rem 0 1rem 0}
  .navigation{width:70%;margin-top:0}
  .navigation button img{width:1.2rem;height:1.2rem}
  .main-content{margin-top:.2rem;padding:1rem 0}
  #textContainer .text{width:70%}
  .gallery {
  width: 70%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;          
  margin: 2rem auto 0;
}.gallery-item{width:100%;height:100%;margin:0}
  .gallery-item img{width:100%;height:100%;object-fit:cover}
  .gallery-item:nth-child(1){grid-column:1;grid-row:1/3}
  .gallery-item:nth-child(2){grid-column:2;grid-row:1}
  .gallery-item:nth-child(3){grid-column:2;grid-row:2}
  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;  
    text-align: center;
  }

  .footer-links {
    display: flex;
    flex-direction: row;
    gap: 40px;
  }

  .footer p {
    margin: 0;
  }
}

/* PANTALLAS MUY GRANDES 1600px+ */
@media (min-width:1600px){
  .main-content{max-width:1400px;margin:0 auto;padding:2rem 3rem;gap:2rem}
  .image-container{max-width:1100px;width:100%}
  #textContainer .text{width:80%}
  .text{width:80%;font-size:1.2rem;text-align:center;margin:0 auto}
  .gallery{width:80%}
  .navigation{width:50%;margin:0 auto 2rem}
  .navigation button img{width:1.5rem;height:1.5rem}
  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;  
    text-align: center;
  }

  .footer-links {
    display: flex;
    flex-direction: row;
    gap: 40px;
  }

  .footer p {
    margin: 0;
  }
}