html {
    font-size: 16px; /* 1 rem = 16px por defecto */
}

body {
    border: 5px solid black;
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F4F4F4; /* White Smoke */
    color: #242021; /* Raisin Black */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

header {
    background-color: #242021; /* Raisin Black */
    color: #D0C7C0; /* Timberwolf */
    padding: 0.625rem 2rem 0.625rem 1rem ; /* 10px */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
}

.header-content {
    display: flex;
    justify-content: left; /* Cambia justify-content para centrar los elementos */
    align-items: center;
    width: 100%;
    max-width: 90rem; /* 1440px */
    margin: 0 auto;
    padding: 0 1rem;
    position: relative; /* Añade position relative para usar posicionamiento absoluto */
}

.header-logo {
    /* margin-left: 12rem; */
    width: 15rem; /* 200px */
    text-align: center;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute; /* Coloca el nav a la derecha */
    right: 1rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav ul li {
    margin-left: 1.25rem; /* 20px */
}

nav ul li a {
    color: #D0C7C0; /* Timberwolf */
    text-decoration: none;
    font-size: 1.5rem; /* Aumenta el tamaño de la letra */
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #F4F4F4; /* White Smoke */
}

.header-button {
    margin-left: 1.25rem; /* 20px */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: #7F8269; /* Reseda Green */
    color: #F4F4F4; /* White Smoke */
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px */
}

.hero {
    position: relative;
    width: 100%;
    height: calc(100vh);
    overflow: hidden;
}

.carousel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-text {
    position: absolute;
    font-size: 2rem;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-align: right;
    max-width: 40%;
}

.carousel-controls {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.carousel-controls .prev, .carousel-controls .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
}

/* Workouts Section */
.workouts-section {
    width: 100%;
    max-width: 1440px;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

.workouts-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    color: #7F8269; /* Reseda Green */
}

.workouts-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* Columna izquierda más ancha */
    gap: 2rem;
    align-items: stretch; /* Cambiado de 'start' a 'stretch' */
}

.workouts-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.workout-item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}

.workout-item:last-child {
    border-bottom: none;
}

.workout-item h3 {
    /* --- Tipografía 1: Título --- */
    font-family: 'Arial Black', Gadget, sans-serif;
    color: #7F8269; /* Reseda Green */
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.workout-item p {
    /* --- Tipografía 2: Descripción --- */
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0 0 0.75rem 0;
    color: #555;
    line-height: 1.6;
}

.workout-item .workout-meta {
    /* --- Tipografía 3: Tiempo y Precio --- */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: italic;
    color: #242021; /* Raisin Black */
    font-weight: 600;
}

.workouts-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Bootcamp Section - slight variation */
#bootcamp {
    background-color: #FFFFFF; /* Fondo blanco para diferenciarla */
}

/* Invertir columnas para la sección bootcamp */
#bootcamp .workouts-grid {
    grid-template-columns: 2fr 3fr; /* Columna izquierda más estrecha */
}

.menu-button {
    align-self: center;
    margin-top: 1rem;
    width: 50%;
    text-align: center;
}

.informative-section {
    padding: 2rem;
    text-align: center;
}

.informative-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    gap: 1rem;
    justify-items: center;
    align-items: center;
}

.informative-content > *:nth-child(1) {
    grid-column: 1 / span 1;
    grid-row: 1;
    align-self: start;
}

.informative-content > *:nth-child(2) {
    grid-column: 2 / span 1;
    grid-row: 2;
    align-self: center;
}

.informative-content > *:nth-child(3) {
    grid-column: 3 / span 1;
    grid-row: 3;
    align-self: end;
}

.informative-content img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.informative-content p {
    padding: 0 1rem 1rem;
}

.more-info-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    background-color: #7F8269;
    color: #F4F4F4;
    text-decoration: none;
    border-radius: 0.3125rem;
}

.informative-section {
    background-image: url(assets/img/face.png);
    background-repeat: no-repeat;
    background-size: cover;
    
}

#about h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    color: #7F8269; /* Reseda Green */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 0;
    align-items: center;
    justify-items: center;
    position: relative;
}

.about-card {
    background-color: #FFFFFF; /* Fondo blanco */
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 0.5rem; /* Bordes redondeados */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; /* Alinea los textos en el centro */
    height: 100%;
    max-width: 20rem;
}

.about-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem; /* Bordes redondeados */
    margin-bottom: 1rem; /* Espacio debajo de la imagen */
}

.about-card p {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Alinea los textos horizontalmente en el centro */
    padding: 0 1rem;
}

.about-card .button {
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    background-color: #7F8269; /* Reseda Green */
    color: #F4F4F4; /* White Smoke */
    border-radius: 0.3125rem; /* Bordes redondeados */
    text-decoration: none;
}

.about-card:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 3;
}

.about-card:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    z-index: 2;
}

.about-card:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    z-index: 1;
}

.more-info-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: #7F8269; /* Reseda Green */
    color: #F4F4F4; /* White Smoke */
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px */
    text-align: center;
}

.informative-section {
    padding: 2rem;
    text-align: center;
}


.contact, .book {
    max-width: 56.25rem; /* 900px */
    width: 100%;
    text-align: center;
    padding: 1.25rem; /* 20px */
}

.contact p, .book p {
    margin: 0.625rem 0; /* 10px */
}

.button {
    display: inline-block;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    background-color: #7F8269; /* Reseda Green */
    color: #F4F4F4; /* White Smoke */
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px */
}

footer {
    background-color: #242021; /* Raisin Black */
    color: #D0C7C0; /* Timberwolf */
    padding: 2rem;
    text-align: center;
    position: relative;
    width: 100%;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-image: linear-gradient(rgba(36, 32, 33, 0.8), rgba(36, 32, 33, 0.8)), url('assets/img/5.jpg');
    background-size: 100% auto;
    background-position: center;
    border-radius: 8px;
}

.footer-content h2 {
    margin: 0 0 1rem;
    font-size: 2rem; /* 32px */
}

.footer-content p {
    margin: 0 0 1rem;
}

.footer-content a {
    color: #D0C7C0; /* Timberwolf */
    text-decoration: none;
}

.footer-content a:hover {
    color: #F4F4F4; /* White Smoke */
}


.locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.location {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.location h3 {
    color: #242021; /* Raisin Black - mismo color oscuro usado en el body */
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.location p {
    color: #242021;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.location iframe {
    width: 100%;
    height: 350px;
    border-radius: 4px;
}

.footer-credits {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(127, 130, 105, 0.2);
    text-align: center;
    font-size: 0.9rem;
}


/* Estilos responsivos */
@media (max-width: 1024px) {
    .header-content {
        flex-direction: column;
        justify-content: center;
        padding: 20px 0 20px 0;
    }

    .header-content h1 {
        display: none; /* Oculta el h1 en pantallas pequeñas */
    }

    nav {
        flex-direction: column;
        position: static; /* Quita el posicionamiento absoluto */
        width: 100%;
    }

    nav ul {
        /* flex-direction: column; */
        align-items: center;
        width: 100%;
        padding: 0;
    }

    nav ul li {
        margin-left: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .header-button {
        margin-left: 0;
        margin-top: 10px;
        width: 80%;
        text-align: center;
    }

    .header-logo {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .carousel {
        padding: 263px 0 0 0;
    }

    .carousel-text {
        font-size: 1rem; /* Reduce el tamaño del texto en pantallas pequeñas */
        right: 0.5rem; /* Ajusta el espaciado */
        text-align: center; /* Centra el texto horizontalmente */
        left: 0; /* Alinea el texto al borde izquierdo */
        width: 100%; /* Ancho completo para centrar el texto */
        padding: 1rem; /* Ajusta el padding según sea necesario */
        transform: translateY(-100%); /*Mantiene la alineación vertical centrada */
    }

    .carousel-slide img {
        height: 50vh; /* Cambia la altura de las imágenes en pantallas pequeñas */
    }

    .workouts-grid {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }

    .workouts-image {
        order: -1; /* Mueve la imagen arriba del menú */
        margin-bottom: 2rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .about-grid .about-card:nth-child(1),
    .about-grid .about-card:nth-child(2),
    .about-grid .about-card:nth-child(3) {
        grid-column: 1 / -1;
        transform: none;
        z-index: 1;
    }    

    footer {
        padding: 1rem;
    }

    .footer-content h2 {
        font-size: 1.5rem; /* 24px */
    }

    .footer-content p, h3 {
        font-size: 1rem; /* 16px */
    }

    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .location {
        margin-bottom: 1rem;
    }

}


@media (max-width: 768px) {
    
}

@media (max-width: 480px) {
    .carousel-text {
        font-size: 0.875rem; /* Aún más pequeño en pantallas muy pequeñas */
        right: 0.25rem; /* Ajusta el espaciado para pantallas muy pequeñas */
    }

    .carousel-slide img {
        height: 50vh; /* Cambia la altura de las imágenes en pantallas muy pequeñas */
    }

    .service {
        width: 100%; /* 1 por fila en pantallas muy pequeñas */
    }
}