/* ==================== body config ==================== */
body{
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto auto 1fr 1fr auto;
    grid-template-columns: 1fr;
    min-height: 100vh;
}
.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  /* font-weight: 400; */
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;
}

.sets, .fotografia{
    padding: 1.5rem; /* Espaciado deneral de los elementos */
}

h2{
    text-align: center; /* Centrado del texto de los titulos */
    padding: 5vh 0 5vh 0; /* Espaciado inferior de los titulos */
}
.nav-item{
    transition: transform 0.2s ease-in-out;
}
.nav-item:hover{
    transform: scale(1.08);
}

/* ==================== Configuración de la sección acerca de ==================== */
.acerca-de {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color:rgb(227, 226, 226);
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover;
    background-position: center;
}
.overlay p {
    padding: 0 5vw 5vh 5vw !important;
    width: 70vw;
    margin: 0;
    font-size: large;
}
.acerca-de .overlay {
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  border-radius: 5px;
}

/* ==================== Configuración de la sección de sets ==================== */
.card-set-div{
    max-width: 48vw; /* Espacio horizontal que abarca el ancho de las cards */
    justify-content: center; /* Centrado de las cards */
}

.sets-div{
    /* Configuración de div que contiene las cards y el texto */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 3vw 0 3vw;
}
.sets-div p{
    font-size: large; /* Tamaño del texto de la descripción */
}

.card-set-title{
    text-align: left; /* Titulo de la card a la izquierda */
    font-size: 1.2rem; /* Tamaño del titulo de la card */
}

.btn-card, .btn-modal{
    font-size: 0.8rem !important;/* Tamaño de fuente del botón de la card */
    transition: background-color 0.5s ease !important; /* Animación del con un hover */
}

.btn-card:hover, .btn-modal:hover{
    background-color: #970002 !important;
}

#btnForm{
    background-color: #C0B592 !important;
    color: #191919;
    transition: background-color 0.3s ease;
}

#btnForm:hover{
    background-color: #970002 !important;
    color: whitesmoke;
}

/* ==================== Configuración de la sección de fotografía ==================== */
.fotografia{
    padding: 0 10vw 10vh 10vw;
}
.fotografia-card{
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Animación de la card con un hover */
}
.fotografia-card:hover{
    /* box-shadow: 0 10px 34px rgba(0, 0, 0, 0.50); Sombreado */
    box-shadow: -8px 6px 10px rgba(151, 0, 2, 0.50);
    border-color: rgba(151, 0, 2, 0.50);
    transform: scale(1.05);
}
/* ==================== Configuración de la sección de contrataciones ==================== */
.contrataciones {
  overflow: hidden;
}
.contrataciones-form {
    color: white !important;
    /* background-color: rgba(193, 180, 146, 0.5); */
    background-color: rgba(38, 38, 38, 0.75);
    padding: 3vw;
    border-radius: 8px;
    width: 50vw;
}
.contrataciones input{
    font-size:medium !important;
}

/* ==================== Configuración del footer ==================== */
.footer{
    color: white; /* Color de letra */
    /* Color de fondo */
    /* background-color: #2B3035;  */
    background-color: #191919;
    height: 26vh !important; /* Altura */
    /* Display settings */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}
footer span{
    font-size: smaller; /* Espacio entre elementos del footer */
}
/* Tamaño de imagen del footer */
footer img{
    height: 140px;
    width: auto;
}
/* Configuración del contenido de redes del footer (texto + iconos) */
.antharious-info{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Configuración del div de redes sociales */
.social-media{
    display: flex;
    justify-content: center;
    gap: 15px;
}
/* Tamaño de iconos del footer */
.social-media img{
    height: 2.3rem;
    width: auto;
}
.social-media-logo {
    /* blanco inicial, con funciones equivalentes */
    filter: invert(100%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
    transition: filter 0.1s ease;
}

.social-media-logo:hover {
    filter: invert(12%) sepia(100%) saturate(6200%) brightness(70%) contrast(110%);
}

/* ==================== Responsive Design ==================== */

@media(max-width: 1024px){
    .sets-div p{
        font-size: small;
    }
    .contrataciones-form{
        width: 60vw !important;
    }
    form input, form label, form button, form textarea{
        font-size: small !important;
    }
    #nav-logo{
        height: 100px;
        width: auto;
    }
}

@media(max-width:768px) {
    /* ======================== Estilos del Formulario =================== */
    /* Ancho que ocupa el formulario */
    .contrataciones-form{
        width: 80vw !important;
    }

    /* ======================== Estilos del Formulario =================== */
    /* Cambio en el acomo de los elementos del set (texto + cards) */
    .sets-div{
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Tamaño del párrafo en sets */
    .sets-div p, .overlay p{
        font-size: medium !important;
    }
    /* Ancho del div de las cards */
    .card-set-div{
        max-width: 90%;
    }

    /* ======================== Estilos del Footer para =================== */
    footer span{
        font-size: x-small; /* Tamaño de fuente */
    }
     #antharious-logo{
        display: none;
    }
    .fotografia{
        padding-bottom: 3vh;
    }
    #nav-logo{
        height: 80px;
        width: auto;
    }
}

@media(max-width:425px){
    .sets-div p{
        max-width: 100%;
        font-size: medium !important;
    }
    /* Tamaño horizontal del div que contiene las redes sosciales */
    .antharious-info{
        width: 45vw;
    }
    /* Espacio entre elementos del footer (imagen y redes) */
    .footer{
        gap: 1rem;
    }

    /* Texto centrado para el span de copyright */
    footer span{
        text-align: center;
    }
}

@media(max-height:600px){
    #antharious-logo{
        display: none !important;
    }
}

/* Espacio entre tablet y portátil */
@media(min-width:769px) and (max-width:1023px){
    .card-set-title{
        text-align: center;
        font-size: medium;
    }
    .card-set-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .btn-card{
        font-size: 0.56rem !important;
    }
} 

/* Relaciones entre pantalla de teléfono y tablet */
@media(min-width:426px) and (max-width:767px){
    /* Espacio que ocupa el card set */
    .card-set-div{
        max-width: 75% !important;
    }
    /* Espacio entre las filas de las cards */
    .card-set{
        padding-bottom: 3vh !important;
    }
    #antharious-logo{
        display: none !important;
    }
}

@media(min-width:992px){
    /* Estilo de la navbar cuando no está contraída */
    .container-fluid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media (min-width:768px) {
    .sets-div{
        gap: 2vw;
    }
}

@media(min-width:426px){
    .card-set{
        margin: 0 !important;
    }
}