/* ===== BASE ===== */
body {
    font-family: "Trebuchet MS", sans-serif;
    background: #412025;
    margin: 0;
    padding: 20px;
}

/* ===== LAYOUT ===== */
.layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

/* ===== NAVBAR ===== */
.navbar {
    display: flex;
    flex-direction: column;
    gap: 20px;

    width: 200px;
    padding: 15px;

    background-color: #2f1519;
    border-radius: 12px;

    flex-shrink: 0;
}

.navbar img {
    width: 100%;
    transition: transform 0.2s;
}

.navbar img:hover {
    transform: scale(1.1);
}

/* ===== CONTENT ===== */
.content {
    width: 100%;
    max-width: 900px;
}

/* ===== BANNER ===== */
.banner {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.banner img {
    width: 100%;
    max-width: 900px;
}

/* ===== PROFILE ===== */
.profile {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.profile img {
    width: 100%;
    max-width: 900px;
}

/* ===== BLINKIES ===== */
.blinkiesWrapper {
    margin: 20px auto;
    max-width: 900px;
}

.blinkiesBar {
    height: 80px;
    padding: 0 20px;

    background-image: url("img/blinkiesBar.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
}

.blinkiesMask {
    width: 100%;
    margin: 0 30px; 
    overflow: hidden;
}

.blinkieTrack {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: scroll-left 30s linear infinite;
}

.blinkieTrack img {
    height: 27px;
}

/* ===== ANIMATION ===== */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.shark{
    z-index: 999999;
    pointer-events: none;

    position: fixed;
  bottom: 40px;
  right: 30px;

  width: 150px;
  height: auto;


}

.star-wrapper {
    position: relative;

}

.star {
    position: absolute;
  top: 350px;
  left: 65%;

  transform: translateX(-50%) rotate(-6deg);
  transition: transform 0.8s ease;

  width: 115px;
  height: auto;

  z-index: 50;
  pointer-events: auto;

  cursor: pointer;
}

.star:hover {
    transform: translatex(-50%) rotate(360deg) scale(1.5)
}

.cbox-container {
    border: 2px solid #c98b3a;
    background: linear-gradient(180deg,#4a2a2a, #2a1418);
    border-radius: 18px;
    box-shadow: 0 0 15px rgba(201,139,58,0.35);
    font-family: 'Verdana', sans-serif;
    overflow: hidden;

}

.cbox-header {
    background: #6b3f32;
    color: #e2b98b;
    text-align: center;
    padding:10px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
} 

.cbox-body {
    padding: 8px;
    background: #2a1418;

}

.cbox-body iframe {
    border-radius: 12px;
}

.cbox-footer {
  background: #3a1d22;
  color: #e2b98b;
  text-align: center;
  font-size: 11px;
  padding: 6px;
}



.owl-player {
  position: relative;         
  margin: 20px 0;          
  width: 260px;
}

.owlbg {
  width: 100%;
  display: block;
}

.owl-controls {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.btn {
  width: 28px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: scale(1.15) rotate(-3deg);
}

.volume-control {
    display: flex;
    align-items: center;
    gap:8px;
    margin-top: 8px;
    font-size: 12px;
    color:#e2b98b;

}

/* ===== VOLUME SLIDER CUTE ===== */

.volume-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;

  width: 90px;
  height: 6px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    #c98b3a,
    #e2b98b
  );

  outline: none;
  cursor: pointer;
}

/* barra en Chrome / Edge */
.volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
}

/* botón (thumb) */
.volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;

  width: 14px;
  height: 14px;
  border-radius: 50%;

  background: #6b3f32;
  border: 2px solid #e2b98b;

  margin-top: -4px;
  cursor: pointer;
}

/* Firefox */
.volume-control input[type="range"]::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, #c98b3a, #c89b67);
  border-radius: 999px;
}

.volume-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6b3f32;
  border: 2px solid #e2b98b;
}

body {
  cursor: url('img/cursor.png') 16 16, auto;
}

a,
button,
input,
textarea,
 [onclick] {
  cursor: url(img/pointer.png) 16 16, pointer !important;
}