@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');

html {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding-top: 60px;
    /* Evitar que el contenido quede oculto debajo del navbar */

    box-sizing: border-box;
    background-color: #000000;
    /* Fondo negro */
    color: #ffffff;
    /* Texto en blanco por defecto */
}

h1,
h2,
h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

h2 {
    font-size: 48px;
    color: #ffd700;
    margin-bottom: 10px;

    text-shadow: 5px 4px 0px #000000, 5px 4px 0px #000000;
    /* Sombra negra más intensa */
    border: none;
    /* Elimina el borde alrededor del contenedor */
    display: inline;
    text-align: center;
}

a{
    color: #ff0;
}

p{
    font-size: 18px;
}

li{
    font-size: 18px;

}

/* common classes */
.btnBlack {
    display: inline-block;
    background: #000000;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 5px 4px 0px #000000, 5px 4px 0px #000000;
}

.info_container{
    padding: 10px 10px;
    text-align: center;
    background: url('../img/versionbackground3.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;

}


.section_block{
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid #000;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(37,37,37,1) 100%);
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 11px 10px 19px 3px rgba(0,0,0,1);
-moz-box-shadow: 11px 10px 19px 3px rgba(0,0,0,1);
box-shadow: 11px 10px 19px 3px rgba(0,0,0,1);
}

.section_block p{
    text-align: left;
}

.section_block li{
    text-align: left;
}

.ul-payments{
    list-style: none;
    padding: 5px;
}
.ul-payments li{
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ol-payments li{
    font-size: 18px;
    font-weight: normal;
    margin: none;
}

/* Barra de navegación */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(37,37,37,1) 100%);
    padding: 10px 20px;
    border-bottom: 1px solid #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;

}

/* Logo */
.logo img {
    width: 180px;
}

/* Estilos del menú */
.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

/* Items del menú */
.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #151515;
    min-width: 150px;
    top: 100%;
    left: 0;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content li {
    display: block;
}

.dropdown-content a {
    padding: 10px;
    display: block;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* 🔹 Botón de menú para móviles */
.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}


/* dialog */

/* Oscurece el fondo cuando el diálogo está abierto */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    /* Negro semi-transparente */
}

/* Estilos para el diálogo */
dialog {
    border: solid 3px #fff;
    border-radius: 8px;
    padding: 15px;
    background: #000;
    color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

dialog div {
    text-align: center;
}

#dialogError {
    border: solid 3px #f00;
}

#dialogLoading {
    text-align: center;
    border: none;
}

#dialogLoading img{
    width:100px;
}

/*******************************/

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.hero {
    color: white;
    text-align: center;
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    border-bottom: 5px solid #000;
}

.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

.hero .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 2rem;
    text-align: center;
    z-index: 1;
}

.hero .content h1 {
    font-size: 4em;
    margin-bottom: 10px;
    color: white;
    text-shadow: 5px 4px 0px #000000, 5px 4px 0px #000000;
    /* Sombra negra más intensa */
    border: none;
    /* Elimina el borde alrededor del contenedor */
    display: inline;
}

.hero p {
    font-size: 20px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px #000000, 2px 2px 0px #000000;
    /* Sombra negra más intensa */
    border: none;
    /* Elimina el borde alrededor del contenedor */
}

.menu a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000, 2px 2px 0px #000000;
    /* Sombra negra más intensa */
    border: none;
    /* Elimina el borde alrededor del contenedor */

}

.menu a:hover {
    color: #ffffff;
}

/* sección video del sistema */
.video{
    padding: 50px 5px;
    text-align: center;
    background: url('../img/sectionbackground2.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}

.video-wrapper {
    width: 95%;
    margin: 0 auto;
    padding:30px 10px 30px 10px;
    background-color: #000;
}

.responsive-video {
    width: 100%;
    aspect-ratio: 16 / 9;
  }


/* sección imágenes del sistema */
.images {
    padding: 50px 20px;
    text-align: center;

}


/* sección versiones */
.versiones {
    background: url('../img/versionbackground3.jpg') no-repeat center center;
    background-attachment: fixed;

    padding: 50px 20px;
    border-radius: 10px;
    text-align: center;
}

.packages {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 50px;
    flex-wrap: wrap;
}

.package {
    background: #252525;
    padding: 20px;
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 10px 10px 5px #000000, 2px 2px 0px #000000;
    width: 350px;
    text-align: left;
    transition: transform 0.3s ease;
    color: #ddd;
}

.package h2 {
    margin-bottom: 10px;
    color: #fff;
    text-shadow: none;
}

.package:hover {
    transform: translateY(-10px);
}

.price {
    font-size: 24px;
    color: #ffbb02;
    font-weight: bold;
}

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

.package ul li {
    margin: 10px 0;
    font-size: 16px;
}

.packages .btn {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.packages .btn:hover {
    background: #0056b3;
}

.package div{
    text-align: center;
}

/* sección contacto */
.contacto {
    background: #111;
    background-attachment: fixed;
    padding: 20px 20px;
    border-radius: 10px;
    text-align: center;
    border-top: solid 5px #000;
}



.contacto form {
    max-width: 600px;
    margin: 0 auto;
}

.contacto input,
.contacto textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    background: #000000;
    color: #ffffff;
    box-shadow: 4px 4px 10px #000000, 5px 4px 6px #000000;
    border: 1px solid #aaa;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.contacto textarea{
    resize: none;
    height: 100px;
}

.contacto input::placeholder,
.contacto textarea::placeholder {
    color: #cccccc;

}

.contacto button {
    background: #ffd700;
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 5px 4px 0px #000000, 5px 4px 0px #000000;
    /* Sombra negra más intensa */
    border: none;
    /* Elimina el borde alrededor del contenedor */

}

.contacto button:hover {
    background: #333333;
    color: #ffffff;
}

/* seccion de pago en linea */
.pay-container{
    padding: 30px 10px;
    text-align: center;
    background: url('../img/gym2.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}

#payment-form {
    background: white;
    padding: 20px;
    max-width: 400px;
    margin: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#payment-form button {
    background-color: #6772e5;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
}

#payment-form button:hover {
    background-color: #5469d4;
}

#payment-form input[type="text"], #payment-form input[type="email"], #payment-form select {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.custom-border {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

/* footer */
footer {
    text-align: center;
    padding: 20px;
    background: #000000;
    color: #ffd700;
    /* Texto en amarillo */
    border-top: 1px solid #333333;
}


/* Slider */
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
    overflow: hidden;
    width: 90%;
    margin: auto;
}

/* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
.carousel-wrapper * {
    box-sizing: border-box;
}

/* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
.carousel {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
.carousel__photo {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    margin: auto;
    padding: 1rem 4rem;
    z-index: 100;
    transition: transform .5s, opacity .5s, z-index .5s;
}

/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
.carousel__photo.initial,
.carousel__photo.active {
    opacity: 1;
    position: relative;
    z-index: 900;
}

/* Set 'z-index' to sit behind our '.active' item. */
.carousel__photo.prev,
.carousel__photo.next {
    z-index: 800;
}

/* Translate previous item to the left */
.carousel__photo.prev {
    transform: translateX(-100%);
}

/* Translate next item to the right */
.carousel__photo.next {
    transform: translateX(100%);
}

/* Style navigation buttons to sit in the middle, either side of the carousel. */
.carousel__button--prev,
.carousel__button--next {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    background-color: #FFF;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    /* Sit on top of everything */
    border: 1px solid black;
    /*  opacity: 0;  Hide buttons until carousel is initialised
    transition:opacity 1s;*/
}

.carousel__button--prev {
    left: 0;
}

.carousel__button--next {
    right: 0;
}

/* Use pseudo elements to insert arrows inside of navigation buttons */
.carousel__button--prev::after,
.carousel__button--next::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 54%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: translate(-50%, -50%) rotate(135deg);
}

.carousel__button--next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-45deg);
}



/* Diseño responsivo */
@media (max-width: 768px) {
    /*slider */
    .carousel__photo {
        padding: 0px;
    }
    /****/

    /* clases comunes */
    .section_block{
        padding: 15px;

    }

    /* secciones */
    .hero .content h1 {
        font-size: 3em;
    }

    .packages {
        padding: 10px;
    }

    .package {
        width: 90%;

    }

    .menu-toggle {
        display: block;
        /* Hacer visible el botón hamburguesa */
    }

    .nav-links {
        display: none;
        /* Ocultar menú por defecto en móviles */
        flex-direction: column;
        width: 100%;
        background-color: #151515;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 100;
    }

    .nav-links.active {
        display: flex;
        /* Mostrar menú cuando se active */
    }

    .nav-links li {
        text-align: center;
        width: 100%;
    }

    .dropdown-content {
        position: relative;
        width: 100%;
        box-shadow: none;
    }
}