*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}



body
{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    background-color: black;
}

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


.header
{
   background-image: url(/imagenes/yo.PNG); 
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    margin-top: 80px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-attachment: scroll;
    
}  

.header-contacto

{
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 30%;
    margin: auto;
    margin-top: 10%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}




.menu
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    background-color: #040404;
    border-bottom: 1px solid #ffffff29 ;
}

.logo
{
width: 300px ;

margin-left: 200px;  

}

.menu .navbar ul li 
{
    position: relative;
    float: left;
}

.menu .navbar ul li a
{
    font-size: 18px;
    padding: 20px;
    color: white;
    display: block;
}

.menu .navbar ul li a:hover 
{
    color: #e06d0f;
}


#menu 
{
    display: none;
}

.menu-icono
{
    width: 25px;
}

.menu label 
{
    display: none;
    cursor: pointer;
}

.header-info h1 
{
    color: #e06d0f;
    /* text-transform: uppercase; */
    font-size: 70px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.header-info p 
{
    color: white;
    font-size: 22px;
     /* text-transform: capitalize;  */
    margin-bottom: 35px;
}

p 
{
    color: #818181;
}
.btn-1 
{
    display: inline-block;
    padding: 10px 35px;
    border-radius: 10px;
    background-color: #e06d0f;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
}

.btn-1:hover
{
    background-color: #e06d0f;
}

.gym
{
    padding: 100px 0;
    display: flex;
    align-items: center;
}

.gym-1
{
    width: 50%;
    padding-right: 150px;
}

.gym-1 h2 
{
    font-size: 40px;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 35px;
}

.gym-1 p
{
    font-size: 16px;
    color: #818181;
    margin-bottom: 35px;
}

.gym-1 span 
{
    color: #e06d0f;
}

.btn-2

{
    display: inline-block;
    padding: 8px 45px;
    border-radius: 20px;
    background-color: #e06d0f;
    font-size: 18px;
    color: white;
    text-transform: uppercase;
}

.btn-2:hover
{
    background-color: #e06d0f;
}



.img-1, .img-2
{
    width: 250px;
    margin-right: 20px;
}


.footer
{
    border-top: 1px solid #ffffff29;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    background-color: #040404;
}


.footer h3
{
    color: #e06d0f;
    font-size: 25px;
    font-weight: 800;
}

.links a:hover
{
 color: #e06d0f;
}

.links ul 
{
    display: flex;
}

.links ul li 
{
    margin-right: 35px;
}

.links ul li a 
{
    color: #818181;
}

@media (max-width:991px)  
{

    .header {
        /* En celu le damos más protagonismo a la imagen */
        background-size: 80%; 
        background-position: center center;
        min-height: 50vh;
        margin-top: 100px;
    }

    .header-info h1 {
        /* Bajamos el tamaño para que no tape tu foto */
        font-size: 35px;
        margin-top: 20px;
    }


    .menu
    {
        padding: 20px;
    }


    .menu label
    {
        display: initial;
    }

    .menu .navbar
    {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #303030;
        display: none;
    }

    .menu .navbar ul li 
    {
        width: 100%;
    }

   #menu:checked ~ .navbar {
    display: initial; 
}

.header-content
{
    padding: 30px;
}

.header-info h1 
{
    font-size: 50px;
    margin-bottom: 5px;
}

.gym
{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
}
.gym-1
{
    width: 100%;
    padding: 0;
    order: 1;
}

.gym-1 h2 
{
    margin-bottom: 15px;
}

.btn-2 
{
    margin-bottom: 35px;
}

.gym-2
{
    order: 2;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.img-1, .img-2 
{
    margin: 0 0 20px 0;
}

.footer 
{
    flex-direction: column;
    align-items:center ;
}

.footer h3
{
    margin-bottom: 15px;
}

.links ul li 
{
    margin: 0 10px;
}


}

@media (max-width: 768px) {
    /* Forzamos al footer a ser un bloque centrado */
    .footer  {
        display: block !important; /* Desactivamos flexbox para evitar conflictos */
        text-align: center !important; /* Esto centra elementos 'inline' como imágenes */
        width: 100% !important;
        padding: 30px 0 !important;
    }

    .logofooter, .logo{
        /* Eliminamos cualquier rastro de posicionamiento de PC */
        display: inline-block !important; /* Para que responda al text-align: center del padre */
        float: none !important;
        margin: 0 auto 20px auto !important; 
        
        /* Ajuste de tamaño */
        width: 180px !important; /* Ajustá este valor según qué tan grande quieras el logo */
        max-width: 80% !important;
        height: auto !important;
        
        /* Reset de transformaciones */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Centramos los links */
    .links ul {
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
    }

    .links ul li {
        margin: 10px 0 !important;
        display: block !important;
    }


}

.logofooter 
{
    width: 200px;
    height: 100px ;
    margin-left: 150px;  
    
}

.quiensoy
{
    color: #ebdede;
}


.icono-social {
    width: 100px;   /* Aquí controlas el ancho */
    height: 100px;  /* Aquí el alto (asegúrate que sean iguales para que no se deformen) */
    
    /* object-fit: contain; Esto evita que la imagen se estire feo */
    margin: 30px;        /* Les da un poco de aire entre ellos */
    transition: transform 0.19s; /* Para que al tocarlos se sientan "vivos" */
}

/* Efecto opcional: que se agranden apenas un poquito al pasar el mouse */
.icono-social:hover {
    transform: scale(1.1);
}


.mapa-contenedor {
    width: 100%;
    max-width: 800px; /* Ancho máximo para que no sea gigante en PC */
    margin: 40px auto; /* Lo centra y le da espacio arriba y abajo */
    padding: 0 20px;   /* Un poquito de aire a los costados */
}

.mapa-contenedor iframe {
    width: 100%;       /* Hace que el mapa se adapte al ancho del div */
    height: 350px;     /* Altura fija para el mapa */
    border-radius: 15px; /* Bordes redondeados para que combine con tu diseño */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Una sombra suave */
}