body {

  margin: 0;
  background: black;
  font-family: Arial, sans-serif;
  color: white;

}




/* HERO */
.hero-video {

  margin-bottom: 80px;
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  overflow: hidden;

}




/* VIDEO */
.video-container {
  
  width: 85%;
  height: 100%;

}




.video-container video {

  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;

}




/* LATERAL LUXURY */
.luxury-side {

  width: 14%;
  background: #f5f1eb;

}




/* OVERLAY */

.overlay {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 40px;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.02),
);
}



/* LOGO */
.logo {

  width: 260px;
  height: auto;
  position: relative;
  top: -25px;   
  cursor: pointer;

}




/* HEADER ACTIONS */

.header-actions {

  position: absolute;

  top: 35px;

  right: 45px;

  display: flex;

  align-items: center;

  gap: 18px;

  z-index: 999;

}




/* NAVIGATION */
nav a[data-key="inicio"]{

  display: inline-block;
  letter-spacing: 3px;
  transition: box-shadow all 0.3s ease;
  text-decoration: none;
  color: inherit;
  padding: 5px 10px;

}




nav a[data-key="inicio"]:hover {
  
  filter: drop-shadow(15px 10px 8px rgba(229, 255, 0, 0.8));

}




/* 1.BASKET ICON */
.basket-link {

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  color: white;

  font-size: 18px;

  border: 1px solid rgba(255,255,255,0.35);

  background: rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);

  transition: all 0.35s ease;

  cursor: pointer;

}

.basket-link:hover {

  background: white;

  color: black;

  border-color: white;

  transform: translateY(-2px);

}




/* 1.1 CART BADGE */


#cartBadge {

    position:absolute;

    top:-6px;

    right:-6px;


    min-width:18px;

    height:18px;

    padding: 0 4px;

    border-radius:50%;


    background: #ffffff;

    color: #000;

    display: none;

    align-items:center;

    justify-content:center;


    font-size:10px;

    font-weight:600;

    line-height: 18px;

    text-decoration: none;
}


.basket-link{

    position:relative;

}




/* 2.NEWSLETTER/LOGIN */
.newsletter-link {

  height: 42px;

  padding: 0 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  color: white;

  font-size: 11px;

  letter-spacing: 3px;

  text-transform: uppercase;

  border: 1px solid rgba(255,255,255,0.35);

  background: rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);

  transition: all 0.35s ease;

  cursor: pointer;

}

.newsletter-link:hover {

  background: white;

  color: black;

  border-color: white;

  transform: translateY(-2px);

}



/* 2.1.NEWSLETTER SUCCESS */
.newsletter-success {
  text-align: center;
  padding: 20px 10px;
}

.newsletter-success h2 {
  margin-bottom: 15px;
}

.newsletter-success p {
  margin-bottom: 25px;
  line-height: 1.6;
}

.newsletter-success-button {
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  background: #000;
  color: #fff;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.newsletter-success-button:hover {
  opacity: 0.8;
}



/* 2.2.NEWSLETTER BUTTON */
#newsletterButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* 3.LANGUAGE */
.language-selector {

  height: 42px;

  padding: 0 16px;

  border: 1px solid rgba(255,255,255,0.35);

  background: rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);

  color: white;

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  outline: none;

  transition: all 0.35s ease;

  cursor: pointer;

}

.language-selector:hover {

  background: white;

  color: black;

  border-color: white;

}

.language-selector option {

  background: black;

  color: white;

}

/* NEWSLETTER POPUP */
.newsletter-popup {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;

}





/* BOX */ 
.newsletter-box {

  background: white;
  color: black;
  width: 400px;
  padding: 40px;
  position: relative;
  text-align: center;

}




/* CLOSE */
.close-popup {

  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 24px;

}




/* INPUT */
.newsletter-box input {

  width: 100%;
  padding: 14px;
  margin-top: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;

}




/* BUTTON */
.newsletter-box button {

  margin-top: 20px;
  width: 100%;
  background: black;
  color: white;
  padding: 14px;

}



/* HERO TEXT */
.hero-text {

  position: absolute;
  bottom: -20px;
  left: 60px;

}




.hero-text h1 {

  font-size: 60px;
  margin: 0;

}




.hero-text p {

  font-size: 22px;

}




/* NAVIGATION */
nav {

  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  background: black;

}




nav a {

  color: white;
  text-decoration: none;
  font-size: 18px;

}



/* PALAWAN TITLE */

.palawan-title {

  width: 100%;

  padding: 0 0 30px 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background: black;

}

.palawan-title h2 {

  font-size: 42px;

  font-weight: 300;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: white;

  transition: all 0.4s ease;

  cursor: pointer;

}

.palawan-title h2:hover {

  letter-spacing: 10px;

}



/* PALAWAN SECTION */

.palawan-section {

  width: 100%;

  height: 90vh;

  display: flex;

  gap: 30px;

  padding: 0 20px 0px 0px;

  box-sizing: border-box;

  background: black;

}

.palawan-link {

  text-decoration: none;
  color:#d4d4d4;
}

/* LEFT */

.palawan-left {

  width: 65%;

  overflow: hidden;

  background: burlywood;

  cursor: pointer;

  box-shadow: burlywood;


}

.palawan-left img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  transition: transform 0.7s ease;

}

.palawan-left:hover img {

  transform: scale(1.03);

}

/* CENTER */

.palawan-center {

  width: 12.5%;

  overflow: hidden;

}

.palawan-center img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* FAR RIGHT */

.palawan-far-right {

  width: 12.5%;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.palawan-far-right img {

  width: 100%;

  height: calc(50% - 4px);

  object-fit: cover;

}



/* BUTTONS */
button {

  padding: 12px 24px;
  border: none;
  background: rgba(246, 255, 0, 0.578);
  cursor: pointer;

}




/* COOKIES */
.cookie-popup {

  position:fixed ; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: 90%;
  background: white;
  color: black;
  padding: 50px;
  box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
  z-index: 9999;

}




.cookie-content h3 {

  margin-top: 0;
  font-size: 25px;

}




.cookie-buttons {

  display: flex;
  padding: 5px;
  gap: 20px;
  margin-top: 50px;
  margin-right: 120px;

}




.cookie-buttons button {

  background: black;
  color: white;
  padding: 17px 17px;
  cursor: pointer;
  flex: 1;

}




.btn-accept {

  background-color: gold;
  color: #111;

}




.btn-accept:hover {

  background:rgb(246, 255, 0);

}


.btn-decline:hover {

  background: #d4d4d4;

}


.cookie-banner {

  position: fixed;
  bottom: 0px;
  left: 0px;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
  z-index: 999;

}


/* LUXURY FOOTER */

.luxury-footer {

  background: #f5f1eb;

  padding: 80px 60px;

  margin-top: 120px;

}

.footer-container {

  display: flex;

  justify-content: space-between;

  gap: 60px;

  flex-wrap: wrap;

}

.footer-column {

  display: flex;

  flex-direction: column;

  gap: 14px;

  min-width: 180px;

}

.footer-column h3 {

  color: black;

  font-size: 15px;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 10px;

}

.footer-column a {

  color: #333;

  text-decoration: none;

  font-size: 14px;

  transition: opacity 0.3s ease;

}

.footer-column a:hover {

  opacity: 0.5;

}

/* SOCIAL ICONS */

.social-icons {

  display: flex;

  gap: 14px;

  margin-top: 10px;

}

.social-icons a {

  width: 34px;

  height: 34px;

  border: 1px solid black;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: black;

  font-size: 14px;

  transition: all 0.3s ease;

}

.social-icons a:hover {

  background: black;

  color: white;

}