body{
  margin: 0;
  background-color: powderblue;
  font-family: "Share Tech Mono", "Courier New", monospace;
}

h1,h2 {
color: rgb(255, 255, 255);
font-family: "VT323", "Share Tech Mono", monospace;
font-weight: 400;
letter-spacing: 0;
text-shadow:
0 0 10px rgba(113, 255, 221, 0.35),
0 2px 0 rgba(0, 0, 0, 0.55);
}

p, li {
color: rgb(255, 255, 255);
font-family: "Share Tech Mono", "Courier New", monospace;
font-weight: 500;
}

.doto-500-regular {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}

.jersey-20-regular {
  font-family: "Jersey 20", sans-serif;
  font-weight: 500;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

.video-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
rgba(0,0,0,0.15),
rgba(0,0,0,0.45)
);
z-index:-1;
}

#navbar{
backdrop-filter: blur(10px);
background: rgba(0,0,0,0.65) !important;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
  z-index: 1000;
position:fixed;
bottom:20px;
left:0;
right:0;
width:90%;
margin:0 auto;
border-radius:15px;
z-index:1000;
transition:transform 0.5s ease;
}

#navbar.scroll-top{
transform:translateY(-85vh);
}

.navbar .nav-link{
color:white !important;
font-weight:500;
font-family: "Share Tech Mono", "Courier New", monospace;
}

.navbar-brand{
font-family:"VT323", "Share Tech Mono", monospace;
font-size:1.7rem !important;
letter-spacing:0;
text-transform:uppercase;
}

.navbar .nav-link:hover{
color:#facc15 !important;
}

.links h2{
text-align: center;
}

.button-ui{
text-align:center;
transition:transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
cursor:pointer;
position:relative;
background:
linear-gradient(180deg, #f7f2df 0%, #d8cfb6 68%, #b9ad91 100%);
color:#181712;
display:inline-flex;
align-items:center;
justify-content:center;
user-select:none;
font-family:"VT323", "Share Tech Mono", monospace;
font-size:2rem;
font-weight:400;
line-height:1;
text-transform:uppercase;
letter-spacing:0;
padding:0.62em 1.15em 0.72em;
border:2px solid #2b261e;
border-radius:9px;
box-shadow:
0 9px 0 #5f5644,
0 13px 18px rgba(0,0,0,0.42),
inset 0 2px 0 rgba(255,255,255,0.8),
inset 0 -4px 0 rgba(93,82,64,0.45);
text-decoration:none !important;
text-shadow:0 1px 0 rgba(255,255,255,0.65);
animation:none;
}

.highlight{
display:none;
}

@keyframes idle{
0%{filter:url(#handDrawnNoise);}
50%{rotate:2.5deg;filter:url(#handDrawnNoise2);}
100%{filter:url(#handDrawnNoise);}
}

.button-cosm{
display:none;
}

.button-ui:hover{
color:#181712;
background:
linear-gradient(180deg, #fff7dc 0%, #e4d7b8 68%, #bdae8d 100%);
transform:translateY(2px);
box-shadow:
0 7px 0 #5f5644,
0 11px 16px rgba(0,0,0,0.42),
inset 0 2px 0 rgba(255,255,255,0.82),
inset 0 -4px 0 rgba(93,82,64,0.45);
animation:none;
}

.button-ui:hover .highlight{
stroke-dashoffset:0;
}

.button-ui:active .highlight{
stroke-dashoffset:1000;
animation:
highlight 5s infinite,
col 0.5s forwards;
stroke:#bc4e2666;
}

.button-ui:active{
transform:translateY(7px);
box-shadow:
0 2px 0 #5f5644,
0 6px 12px rgba(0,0,0,0.38),
inset 0 2px 4px rgba(70,58,43,0.45);
}

@keyframes col{
0%{stroke:rgba(255,225,0,0.5);}
100%{stroke:#1c98eb66;}
}

@keyframes highlight{
0%{stroke-dashoffset:0;}
25%{stroke-dashoffset:1000;}
50%{stroke-dashoffset:1000;}
100%{stroke-dashoffset:0;}
}

@keyframes hover{
0%{
rotate:0deg;
filter:url(#handDrawnNoise);
translate:0 0px;
}

25%{
rotate:-1deg;
filter:url(#handDrawnNoise2);
translate:0 -2px;
}

50%{
rotate:0deg;
filter:url(#handDrawnNoise);
translate:0 2px;
}

75%{
rotate:-1deg;
filter:url(#handDrawnNoise2);
translate:0 -2px;
}

100%{
rotate:0deg;
filter:url(#handDrawnNoise);
translate:0 0px;
}
}

.suscripcion, .trabajos, .enlaces{
  text-align: center;
  max-width: 700px;
  margin: auto;
  padding: 60px 20px;
}

.suscripcion h2, .trabajos h2, .enlaces h2{
  font-weight: 600;
  margin-bottom: 20px;
}

.suscripcion p, .trabajos p{
  font-size: 18px;
  opacity: 0.9;
}

.section-kicker{
  color:#8fffe0;
  font-family:"Share Tech Mono", "Courier New", monospace;
  font-size:0.82rem !important;
  margin-bottom:10px;
  opacity:0.92;
}

.spotify-frame{
  overflow:hidden;
  margin:26px auto 26px;
  border:1px solid rgba(143,255,224,0.24);
  border-radius:8px;
  background:rgba(0,0,0,0.48);
  box-shadow:0 20px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
}

.spotify-frame iframe{
  display:block;
}

.trabajos-button{
  margin:0 auto;
}

.suscripcion ul{
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.suscripcion li{
  margin: 8px 0;
  font-size: 16px;
}

/* Estilos para el banner de cookies */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 15px;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  font-family: "Poppins", sans-serif;
}

.cookie-banner p {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.cookie-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cookie-buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}

#accept-cookies {
  background-color: #28a745;
  color: white;
}

#reject-cookies {
  background-color: #dc3545;
  color: white;
}

.cookie-buttons button:hover {
  opacity: 0.8;
}

.cookie-banner{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #111;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}

.cookie-buttons button{
  margin-left: 10px;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#accept-cookies{
  background: #45B649;
  color: white;
}

#reject-cookies{
  background: #444;
  color: white;
}

/* --- FIX: CONFLICTO BOOTSTRAP VS TAILWIND --- */
.navbar-collapse {
  visibility: visible !important; /* Evita que Tailwind vuelva invisible el menú */
}

/* --- FIX: MENÚ MÓVIL HACIA ARRIBA --- */
/* Como tu navbar está abajo, hacemos que el menú colapsable flote hacia arriba */
@media (max-width: 767px) {
  #navbarNav {
    position: absolute;
    bottom: 100%; /* Empuja el menú justo por encima del navbar */
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px; /* Separación entre el menú y la barra */
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.4); /* Sombra hacia arriba */
  }
}

.service-page{
  min-height:100vh;
  background:#070706;
}

.service-main{
  width:min(1040px, 92vw);
  margin:0 auto;
  padding:88px 0 140px;
}

.service-hero{
  max-width:780px;
  padding:30px 0 22px;
}

.service-kicker,
.service-tag{
  color:#8fffe0;
  font-family:"Share Tech Mono", "Courier New", monospace;
  font-size:0.82rem;
  margin-bottom:10px;
  opacity:0.92;
}

.service-hero h1{
  font-size:clamp(3.2rem, 8vw, 6.5rem);
  line-height:0.88;
  margin-bottom:22px;
}

.service-hero p{
  max-width:680px;
  font-size:1rem;
  line-height:1.7;
  color:rgba(255,255,255,0.9);
}

.service-contact-note{
  display:inline-block;
  margin:4px 0 22px;
  padding:10px 12px;
  border:1px solid rgba(143,255,224,0.2);
  background:rgba(0,0,0,0.38);
  color:rgba(255,255,255,0.86);
  font-size:0.9rem;
}

.service-contact-note a{
  color:#8fffe0;
  text-decoration:none;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:22px;
}

.service-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:22px;
  border:1px solid rgba(143,255,224,0.24);
  background:linear-gradient(180deg, rgba(8,12,13,0.88), rgba(3,3,3,0.72));
  box-shadow:0 20px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}

.service-card h2{
  font-size:2.2rem;
  line-height:0.95;
  margin-bottom:14px;
}

.service-card p{
  line-height:1.6;
  color:rgba(255,255,255,0.82);
}

.service-card-locked{
  border-color:rgba(255,255,255,0.16);
  filter:saturate(0.8);
}

.key-button{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0.54em 1em 0.65em;
  border:2px solid #2b261e;
  border-radius:8px;
  background:linear-gradient(180deg, #f7f2df 0%, #d8cfb6 68%, #b9ad91 100%);
  color:#181712;
  font-family:"VT323", "Share Tech Mono", monospace;
  font-size:1.55rem;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none !important;
  box-shadow:0 7px 0 #5f5644, 0 11px 16px rgba(0,0,0,0.36), inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -4px 0 rgba(93,82,64,0.45);
  transition:transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.key-button:hover{
  color:#181712;
  transform:translateY(2px);
  box-shadow:0 5px 0 #5f5644, 0 9px 14px rgba(0,0,0,0.36), inset 0 2px 0 rgba(255,255,255,0.82), inset 0 -4px 0 rgba(93,82,64,0.45);
}

.key-button:active{
  transform:translateY(6px);
  box-shadow:0 1px 0 #5f5644, 0 5px 10px rgba(0,0,0,0.32), inset 0 2px 4px rgba(70,58,43,0.45);
}

.key-button-disabled,
.key-button-disabled:hover{
  cursor:not-allowed;
  color:#3b382f;
  background:linear-gradient(180deg, #bcb6a3 0%, #9d9582 68%, #7d7465 100%);
  opacity:0.78;
  transform:none;
  box-shadow:0 4px 0 #4a4438, 0 8px 14px rgba(0,0,0,0.32), inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -4px 0 rgba(65,58,48,0.45);
}

@media (max-width: 767px) {
  .service-main{
    width:min(92vw, 560px);
    padding:52px 0 130px;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:230px;
  }
}