body{
  margin: 0;
  background-color: powderblue;
}

h1,h2 {
color: rgb(255, 255, 255);
font-family: "Doto", sans-serif;
}

p, li {
color: rgb(255, 255, 255);
font-family: "Jersey 20", sans-serif;
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;
}

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

.links h2{
text-align: center;
}

.button-ui{
text-align:center;
transition:0.3s ease-in-out;
cursor:pointer;
background-color:transparent;
filter:url(#handDrawnNoise);
display:inline-flex;
align-items:center;
user-select:none;
font-family:"Courier New",monospace;
font-size:1.5rem;
font-weight:bold;
padding:1em;
border-width:0px;
border-radius:2rem;
box-shadow:#ede9e966 4px 4px 0 1px;
animation:idle 1s infinite ease-in-out;
}

.highlight{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
fill:rgba(255,225,0,0.5);
stroke:rgba(255,225,0,0.5);
stroke-width:10;
stroke-linecap:round;
pointer-events:none;
stroke-dasharray:1000;
stroke-dashoffset:1000;
transition:stroke-dashoffset 0.5s ease-in-out;
}

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

.button-cosm{
fill:#33333366;
transition:0.3s ease-out;
scale:1;
position:absolute;
translate:calc(-100% + 24px) 1.5rem;
}

.button-ui:hover{
rotate:-2.5deg;
animation:hover 2.5s infinite ease-in-out;
}

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

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

@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, .enlaces{
  text-align: center;
  max-width: 700px;
  margin: auto;
  padding: 60px 20px;
}

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

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

.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 */
  }
}