/* ======================================================== */
/* 1. RESET GLOBAL Y BOX-SIZING (¡Clave para Flexbox!) */
/* ======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box; /* Esto hace que el width incluya padding y border */
}

body {
    margin: 0px;
    font-family: sans-serif;
    /* Fondo para todo el cuerpo, creando un contraste dramático */
    background-color: #0C0C0C; 
    color: #FFFFFF;
}

/* ======================================================== */
/* 2. HEADER Y NAVEGACIÓN (Púrpura) */
/* ======================================================== */
header {
    background-color: #7F00FF; /* Púrpura Brillante */
    color: white;
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0; /* Solución para que no haya margen superior */
}

a {
    color: white;
    text-decoration: none;
    margin-left: 14px; /* Cambiado a margin-left para separar los enlaces */
}

/* ======================================================== */
/* 3. SECCIÓN HERO (Negro Carbón) */
/* ======================================================== */
.hero {
    margin-top: 0; 
    padding-top: 0;
    
    background-image: url('images/gimnasio-fondo.jpg'); /* Cargar tu imagen */
    background-size: cover; 
    background-position: center;
    min-height: 500px; /* Altura generosa */
    
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-contenido {
    /* Superposición semitransparente sobre la imagen para leer el texto */
    background-color: rgba(0, 0, 0, 0.6);
    padding: 80px 20px;
    width: 100%;
}

.hero-contenido h1 {
    margin-top: 0; /* Solución al espacio blanco */
    font-size: 45px;
    font-weight: 300;
}

.hero-contenido p {
    font-size: 20px;
}

.destacado-texto {
    color: #ffbf00; /* Amarillo/Naranja brillante para destacar la oferta */
    font-weight: 700;
}

/* ======================================================== */
/* 4. BOTONES (El Color que Vende) */
/* ======================================================== */
.boton-principal {
    background: #ffbf00; /* Amarillo/Naranja */
    color: #0C0C0C; /* Texto oscuro para contraste */
    padding: 16px 25px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 20px;
    font-weight: 700;
    transition: background 0.3s;
}

.boton-principal:hover {
    background: #FFD24C; /* Aclarar al pasar el ratón */
}

.boton-caja {
    background-color: #7F00FF; /* Púrpura Brillante */
    padding: 10px 20px;
    display: inline-block;
    border-radius: 4px;
    margin-top: 15px;
}

/* ======================================================== */
/* 5. SECCIÓN PLANES (Flexbox) */
/* ======================================================== */
.seccion-planes {
    padding: 50px 20px;
    background-color: #f4f4f4; /* Fondo claro para contraste con el negro del body */
    color: #0C0C0C;
    text-align: center;
}

.seccion-planes h2 {
    font-size: 30px;
    margin-bottom: 40px;
}

.contenedor-cajas {
    max-width: 1100px;
    margin: 0 auto;
    
    /* PROPIEDADES MÁGICAS DE FLEXBOX: */
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; /* Esto hace que todas las cajas tengan la misma altura */
}

.caja-plan {
    width: 31%; 
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    background-color: white; 
    border: 1px solid #e0e0e0;
    margin: 0 10px; /* Separación entre cajas */
}

/* Estilo para la caja central destacada */
.caja-plan.destacado {
    border: 4px solid #7F00FF; /* Borde Púrpura para resaltar */
    box-shadow: 0 8px 15px rgba(127, 0, 255, 0.3); 
    transform: scale(1.05); /* Que sea un poquito más grande */
}

.caja-plan ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.caja-plan li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.precio {
    font-size: 28px;
    font-weight: bold;
    color: #7F00FF;
}

/* ======================================================== */
/* 6. SECCIÓN CONTACTO Y FOOTER */
/* ======================================================== */
.seccion-contacto {
    padding: 50px 20px;
    text-align: center;
}

.contenedor-contacto-form {
    max-width: 1000px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
}

.contenedor-contacto-form form,
.contenedor-contacto-form .info-wrapper {
    flex: 1; /* Para que ocupen el mismo espacio en escritorio */
    text-align: left;
}

.contenedor-contacto-form label {
    display: block;
    margin-top: 15px;
    font-weight: 600;
}

.contenedor-contacto-form input,
.contenedor-contacto-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: none;
    border-radius: 4px;
}

.info-wrapper h2, .seccion-contacto h2 {
    color: #7F00FF; /* Púrpura en los encabezados */
}

footer {
    background-color: #0C0C0C;
    padding: 20px;
    text-align: center;
    color: #AAAAAA;
    border-top: 1px solid #1a1a1a;
}

/* ======================================================== */
/* 7. MEDIA QUERIES (Responsive para Móviles) */
/* ======================================================== */
@media (max-width: 768px) {
    /* Header: apila el logo y la navegación */
    header {
        flex-direction: column;
        text-align: center;
    }
    
    /* Planes: apila las tarjetas de precios */
    .contenedor-cajas {
        flex-direction: column; /* Apila las 3 tarjetas en vertical */
        align-items: center; 
    }
    
    .caja-plan {
        width: 90%; /* Ocupa casi todo el ancho del móvil */
        margin: 20px auto; 
    }

    /* Contacto: apila el formulario y el mapa */
    .contenedor-contacto-form {
        flex-direction: column;
        gap: 20px;
    }
    
    .hero-contenido h1 {
        font-size: 30px;
    }
    
    .hero-contenido p {
        font-size: 16px;
    }
}