/* ==========================================
   SECCIÓN COCINA: PARTE 1 (UX | UI)
   ========================================== */

#room-detail-cocina {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;

  /* Color de fondo base rosa mientras carga el patrón */
  background-color: #F8C3C8;

  /* Carga del patrón de fondo */
  background-image: url('../img/Mobile/7Cocina/Background_4.png');
  background-repeat: repeat;
  background-position: top center;
  background-size: auto;
  box-sizing: border-box;
}

/* Evita que los contenedores hijos usen posición absoluta fuera de su caja */
.cocina-top-section {
  position: relative;
  width: 100%;
  padding: 0 20px 20px;
  box-sizing: border-box;
}

/* Lámpara Superior */
.lamp-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -10px;
}

.lamp-img {
  width: 140px;
  height: auto;
  display: block;
}

/* Encabezado Textos */
.cocina-header-text {
  text-align: left;
  margin-top: 15px;
  margin-bottom: 20px;
}

.cocina-title {
  color: #000000;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.cocina-subtitle {
  color: #1A1A1A;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
  overflow-wrap: break-word;
}

/* Contenedor Alacena */
.cupboard-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.cupboard-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hotspot (Punto Rojo) sobre la Alacena */
.hp-cupboard {
  position: absolute;
  top: 31%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background-color: #C0182D;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 2;
}

.hp-cupboard:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background-color: #E60023;
}



/* ==========================================
   SECCIÓN COCINA: PARTE 2 (WEB DESIGN)
   ========================================== */

.cocina-stove-section {
  position: relative;
  width: 100%;
  padding: 30px 10px 0;
  box-sizing: border-box;
}

/* Textos de la sección WEB DESIGN */
.stove-header-text {
  text-align: center;
  margin-bottom: 25px;
}

.stove-title {
  color: #000000;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.stove-subtitle {
  color: #1A1A1A;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 15px 0;
  font-weight: 500;
  overflow-wrap: break-word;
}

.stove-links-label {
  color: #1A1A1A;
  font-size: 0.875rem;
  margin: 0;
  font-weight: 400;
}

/* Contenedor Estufa */
.stove-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.stove-img {
  display: block;
  width: 111%;
  height: 100%;
}

/* Hotspot (Punto Rojo) sobre el Horno de la Estufa */
.hp-stove {
  position: absolute;
  top: 52%;
  /* Posicionado en la puerta del horno */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background-color: #C0182D;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 2;
}

.hp-stove:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background-color: #E60023;
}

/* ==========================================
   SECCIÓN FOOTER ESTUDIO (CARRITO)
   ========================================== */

.estudio-footer-section {
  width: 117%;
  margin-top: 100px;
  /* Pega el carrito justo a la base del escritorio */
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  /* Alinea el carrito a la derecha */
  background: transparent;
  overflow: hidden;
}

.cart-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  /* Escala ajustada para vista mobile */
}

.cart-img {
  display: block;
  width: 100%;
  height: auto;
}