/* ==============================

   ESTILOS BASE

============================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  height: 100vh;

  background: url("images/mexico/Inicio-sesion-Blend-Fondo.jpg") no-repeat left center;

  background-size: cover;

  font-family: "Arial", sans-serif;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



/* ==============================

   SECCIÓN PRINCIPAL

============================== */

.main-content {

  flex: 1;

  display: flex;

  justify-content: flex-end; /* formulario a la derecha */

  align-items: center;

  padding-right: 5%;

}



/* Cuadro de login */

.login {

  background: linear-gradient(45deg, #c5c4bbb5, #ece3fcb0);

  border-radius: 20px;

  border: 1px solid #fffbf5;

  padding: 2.5rem 2rem;

  width: 380px;

  max-width: 90%;

  color: #000;

  text-align: center;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  position: relative;

  left: 60%;

}



/* Logo encima del formulario */

.logo-amigos-prime {

    display: flex;

    margin-bottom: 1.5rem;

    margin-top: 1.5rem;

    justify-content: flex-end;

    padding-right: 22%;

}



.btn-primary {

    background: #c1c1c1 !important;

    color: #000 !important;

    border: 1px solid #000 !important;

    border-radius: 20px !important;

    padding: 0.6rem 1.5rem;

    width: 100%;

    font-weight: 600;

    transition: all 0.3s;

}



a {

    color: #ffffff ;

    text-decoration: none;

}



.logo-amigos-prime img {

  width: 220px;

  height: auto;

}



/* Formularios */

label {

  display: block;

  text-align: left;

  margin-bottom: 0.3rem;

  color: #000;

  font-weight: 600;

}



.form-control {

  width: 100%;

  border: 1px solid #000;

  border-radius: 20px;

  padding: 0.6rem;

  margin-bottom: 1rem;

  text-align: center;

  transition: all 0.3s ease;

}



.form-control:hover,

.form-control:focus {

  background: #a27f53;

  color: #fff;

  border-color: #000;

  outline: none;

}



/* Botones */

.btn-primary {

  background: #ad824b !important;

  color: #000 !important;

  border: 1px solid #000 !important;

  border-radius: 20px !important;

  padding: 0.6rem 1.5rem;

  width: 100%;

  font-weight: 600;

  transition: all 0.3s;

}



.btn-primary:hover {

  background: #4b4b4b !important;

  color: #fff !important;

  border-color: #c5bfbf !important;

}



.btn-secundary {

  background: #000 !important;

  color: #fff !important;

  border: 1px solid #fff !important;

  border-radius: 20px !important;

  padding: 0.6rem 1.5rem;

  width: 100%;

  margin-top: 0.8rem;

  transition: all 0.3s;

}



.btn-secundary:hover {

  background: #4b4b4b !important;

}



/* Botón flotante de contacto */

.btn-contacto {

    background: #c1c1c1;

    color: #000000;

    border-radius: 30px;

    font-weight: 600;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

    padding: 10px 22px;

    border: solid 1px #000;

    transition: background 0.2s;

    text-decoration: none;

    width: 97%;

    height: 34px;

    margin-top: 1%;

}



.btn-contacto:hover, .btn-contacto:active {

  background: #a4a29f;

  color: #ffffff;

}



/* ==============================

   FOOTER

============================== */

/* Footer fijo abajo y con íconos alineados */

/* Footer mejorado para íconos grandes y alineados */



.footer-mexico {

    position: fixed ;

    left: 0;

    bottom: 0;

    width: 100%;

    background: #000 !important;

    color: #fff;

    z-index: 100;

    padding: 0;

    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);

    height: 10%; /* Altura reducida */

    display: flex;

    align-items: center;

}



.footer-politica {

    margin-top: 18px;

    font-size: 1.1em;

}



.footer-icons {

    /* display: flex; */

    justify-content: center;

    align-items: center;

    gap: 48px; /* Más separación entre íconos */

    width: 100%;

    height: 100%;

}



.footer-icon{

    height: 99px;

    width: auto;

    object-fit: contain;

    margin: -12px 23px !important;

    transition: transform 0.2s;

    margin-top: -1% !important;

}



.footer-icon:hover {

    transform: scale(1.08);

}



.footer-icons a {

    color: #fff;

    font-size: 1em;

    margin-right: 0%;

    margin-left: 18%;

    text-decoration: none;

    align-self: center;

}



/* Responsive para móviles */

@media (max-width: 768px) {

    .footer-mexico {

        height: 30%;            

        padding: 5px 12px;

        box-shadow: 0 -2px 6px rgba(0,0,0,0.06);

    }



    .footer-icons {

        display: flex;

        justify-content: center;

        align-items: flex-start;

        gap: 0px 17px;

        width: 100%;

        overflow: hidden;

        flex-wrap: wrap;

    }



    .footer-icon {

        height: 100px !important; /* mayor tamaño en móvil */

        width: auto !important;

        max-width: 120px;

        object-fit: contain;

        margin: 0;

        padding: 0;

        display: inline-block;

        vertical-align: middle;

        transition: transform .15s;

    }



    .footer-icon:hover {

        transform: scale(1.05);

    }

}



/* Ajuste para pantallas muy pequeñas */

@media (max-width: 420px) {

  .footer-mexico {

        height: 28%;            

        padding: 3px 0px;

        box-shadow: 0 -2px 6px rgba(0,0,0,0.06);

    }



    .footer-icons {

        display: flex;

        justify-content: center;

        align-items: flex-start;

        gap: 0px 25px; 

        width: 100%;

        overflow: hidden;

        flex-wrap: wrap;

    }



    .footer-icon {

        height: 100px !important; /* mayor tamaño en móvil */

        width: auto !important;

        max-width: 120px;

        object-fit: contain;

        margin: 0;

        padding: 0;

        display: inline-block;

        vertical-align: middle;

        transition: transform .15s;

    }



    .footer-icon:hover {

        transform: scale(1.05);

    }

}



/* Evita scroll horizontal por imágenes con width inline */

.footer-mexico img[style],

.footer-mexico img[width] {

  max-width: 28% ;

  height: auto !important;

  /* width: auto !important; */

  margin: 0px;

}



/* Ajusta el contenido para no tapar el footer */

body {

  min-height: 100vh;

  padding-bottom: 60px; /* igual al alto del footer */

}



/* ==============================

   RESPONSIVE DESIGN

============================== */



/* Tablets y pantallas medianas */

@media (max-width: 1024px) {

  .main-content {

    justify-content: center;

    padding-right: 0;

  }



  .login {

    width: 70%;

  }



  .logo-amigos-prime img {

    width: 160px;

  }

}



/* Móviles grandes */

@media (max-width: 768px) {

  body {

    background: #000;

    background-size: cover;

  }



  .main-content {

    justify-content: center;

  }



  .login {

    width: 90%;

    padding: 1.5rem;

  }



  .logo-amigos-prime img {

    width: 130px;

  }



  footer img {

    height: 25px;

  }

}



/* Móviles pequeños */

@media (max-width: 480px) {

  .login {

    width: 95%;

    padding: 1rem;

    left: 6%;

  }



  .logo-amigos-prime{

      display: flex;

      margin-bottom: 1.5rem;

      margin-top: 24%;

      justify-content: flex-end;

      padding-right: 24%;

  }



  .logo-amigos-prime img {

    width: 81%;

  }



  label {

    font-size: 0.9rem;

  }



  input,

  button {

    font-size: 0.9rem;

  }



  footer {

    font-size: 0.8rem;

  }

}