body {
scroll-behavior: smooth;
font-family: 'Segoe UI', sans-serif;
}

/* NAVBAR */
.navbar {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(10px);
}

/* HERO */
.hero {
height: 100vh;
background:
linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('../img/001.jpg');
background-size: cover;
background-position: center;
}

/* GALERIA */
.gallery-img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}

.gallery-img:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* STAFF */
.staff {
width: 200px;
height: 200px;
object-fit: cover;
}

/* WHATSAPP */
.whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
background: #25D366;
color: white;
font-size: 24px;
padding: 15px;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 999;
}

.whatsapp:hover {
background: #1ebe5d;
}
/* HERO CONTENEDOR */
.hero {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

/* VIDEO */
.video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

/* CAPA OSCURA */
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.55);
z-index: 1;
}

/* CONTENIDO */
.contenido-hero {
position: relative;
z-index: 2;
}
.contenido-hero h1 {
text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}

.contenido-hero p {
text-shadow: 1px 1px 8px rgba(0,0,0,0.7);
}
/* BOTON WHATSAPP */
.btn-wsp{
    position:fixed;
    width:60px;
    height:60px;
    line-height: 60px;
    bottom:30px;
    right:30px;
    background:#25d366;
    color:#FFFfff;
    border-radius:50px;
    text-align:center;
    font-size: 35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
}
.btn-wsp:hover{
    text-decoration: none;
    background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
	}
}


/* BOTON RESERVAR FIJO */
.btn-reservar {
position: fixed;
bottom: 30px;
left: 30px;
background: #ff3b3b;
color: white;
padding: 12px 20px;
border-radius: 50px;
font-weight: bold;
text-decoration: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 999;
transition: all 0.3s ease;
}

.btn-reservar:hover {
background: #e60000;
transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 768px) {
.btn-reservar {
bottom: 20px;
left: 20px;
padding: 10px 16px;
font-size: 14px;
}
}
/* LIGHTBOX */
.lightbox {
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
text-align: center;
}

.lightbox-content {
max-width: 90%;
max-height: 80%;
margin-top: 40px;
border-radius: 10px;
animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
from {transform: scale(0.8); opacity: 0;}
to {transform: scale(1); opacity: 1;}
}

.cerrar {
position: absolute;
top: 20px;
right: 40px;
color: white;
font-size: 40px;
cursor: pointer;
}

.gallery-img {
cursor: pointer;
transition: 0.3s;
}

.gallery-img:hover {
transform: scale(1.05);
}
/* FLECHAS */
.flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: white;
cursor: pointer;
padding: 10px;
user-select: none;
}

.izquierda {
left: 20px;
}

.derecha {
right: 20px;
}

.flecha:hover {
color: #ccc;
}

/* ANIMACION */
.lightbox-content {
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
/* BOTON CON ONDAS */
.btn-pulse {
position: relative;
display: inline-block;
background: #ff3b3b;
color: white;
border-radius: 50px;
padding: 12px 25px;
font-weight: bold;
text-decoration: none;
z-index: 1;
overflow: visible;
}

.btn-pulse::before,
.btn-pulse::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: rgba(255, 59, 59, 0.5);
border-radius: 50px;
transform: translate(-50%, -50%) scale(1);
animation: pulse 2s infinite;
z-index: -1;
}

.btn-pulse::after {
animation-delay: 1s;
}

@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.7;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* TESTIMONIOS */
.testimonio {
transition: 0.3s;
}

.testimonio:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
/* EFECTO EXTRA BOTON */
.btn-reservar {
position: fixed;
bottom: 30px;
left: 30px;
width: 70px;
height: 70px;
background: #ff3b3b;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
text-decoration: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 999;
transition: all 0.3s ease;
}
/* BOTON CURSO HERO */
.btn-cta-curso {
background: #ffc107;
color: #000;
padding: 14px 28px;
font-size: 18px;
font-weight: bold;
border-radius: 50px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* HOVER */
.btn-cta-curso:hover {
background: #ffb300;
color: #000;
transform: scale(1.08);
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}