/*Imports*/
/*Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* Libre Baskerville */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/*Oswald */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

/* ---------------- CLASES GLOBALES ---------------- */

/* <-- Background --> */
body {
  background-repeat: no-repeat;
  background-position: absolute;
  background-attachment: fixed;
  background-size: cover;
}
#body-home {
  background-image: url("img/bg-home.webp");
}
#body-news {
  background-image: url("img/bg-news.webp");
}
#body-about {
  background-image: url("img/bg-about.webp");
}
#body-contact {
  background-image: url("img/bg-contact.webp");
}
#body-form {
  background-image: url("img/bg-form.webp");
}
#body-form-complete {
  background-image: url("img/bg-form-complete.webp");
}

/* <-- NavBar --> */
.nav {
  margin-top: 2%;
}
.nav-link {
  color: rgb(255, 255, 255) !important; /* Sobreescribir lo de Boostrap */
  font-family: "Roboto", sans-serif;
  text-decoration: none;
}

/* Hamburguesa */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler{
  border: white 1px solid !important;
}
/* Animacion 1 */
.navbar-nav .nav-link {
  position: relative;
}
.navbar-nav .nav-link::after {
  content: ""; /* Para que sea visible la animación, incluso si está vacío */
  position: absolute;
  left: 0;
  bottom: -2px; /* Alinea la línea justo debajo del texto */
  width: 0%;
  height: 2px;
  background-color: white;
  transition: width 0.3s ease; /* Animación de la anchura */
}

.navbar-nav .nav-link:hover::after {
  width: 100%; /* Expande la línea al 100% del ancho del texto */
}

/* <-- Titulos y Subtitulos / Title & Subtitle --> */
.title {
  font-family: "Roboto", sans-serif;
  text-shadow: rgba(0, 0, 0, 0.4) 1px 3px 2px;
  font-weight: bolder;
  font-size: 350%;
  color: white;
}
.title-secondary {
  font-family: "Roboto", sans-serif;
  text-align: center;
  margin-top: -1%;
  font-weight: bolder;
  color: aliceblue;
}
.subtitle {
  font-family: "Oswald", sans-serif;
  font-size: 230%;
  text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
  color: rgb(67, 175, 94);
}
.subtitle-secondary {
  margin-top: 2%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: 130%;
  color: #97a483;
}

/* <-- Cartas / Cards --> */
.card {
  border-radius: 100%;
  box-shadow: white;
  transition: all 400ms ease;
  background-color: rgba(255, 255, 255, 0.6) !important;
}
.card .card-img-top {
  flex-shrink: 0; /* Evitar que la imagen encoja con la tarjeta */
  height: 200px; /* Altura fija para la imagen, ajusta según tus necesidades */
  object-fit: cover; /* Ajustar imagen dentro de su contenedor */
}
/* Animacion 2 */
.noticias .card:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  transform: translateY(-3%);
}

/* <-- Botones / Btn --> */
.btn-success {
  display: flex !important;
  justify-content: center !important;
  font-weight: 600 !important;
}

/* <-- Footer --> */
footer {
  border-top: white 0.1px solid;
  background-color: #272727;
  padding: 2%;
  margin-top: 20%;
  display: flex !important;
  justify-content: center !important;
  align-items: end !important;
}

footer p {
  font-family: "Roboto", sans-serif;
  margin-top: -3%;
  color: rgb(67, 175, 94);
  text-align: center;
}
.title-footer {
  margin-top: 3%;
  font-size: 140%;
  font-family: "Roboto", sans-serif;
  color: white;
}
footer iframe {
  box-shadow: white 0px 0px 5px;
  width: 100%;
}

/* ---------------- SECCIONES / Sections ---------------- */

/* <-- Home / Index -->*/
.container-home h2 {
  margin-top: 12%;
}
/* Animacion 3 */
.container-home img {
  filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(80deg)
    brightness(200%) contrast(100%);
  transition: transform 0.5s ease;
  width: 75px; /* 6% */
}
.container-home img:hover {
  transform: scale(1.1);
}
#parrafo-home {
  text-shadow: 2px 2px 4px #000000;
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: 120%;
  font-style: italic;
  color: white !important;
}

/*<-- Noticias / News -->*/
.noticias {
  padding: 2% 2% 2% 2% !important;
}
#body-news article {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 3%;
  animation: slideInTop 1s;
}

/* Cartas / Cards */
.card-title, #modal-titulo {
  font-family: "Oswald", sans-serif;
  font-size: 150%;
  text-align: center;
}
.card-text, #modal-text {
  font-family: "Roboto", sans-serif;
  font-size: 99%;
  text-align: center;
}

/* <-- Sobre Nosotros / About -->*/
.container-about {
  text-align: center;
}
.introduccion-about {
  margin-top: 4%;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 4%;
}
.introduccion-about img {
  filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(80deg)
    brightness(200%) contrast(100%);
  transition: transform 0.5s ease;
  width: 40%;
}
/* Animacion 4 */
.introduccion-about img:hover {
  transform: scale(1.3);
}

.container-about h3 {
  color: white;
  text-align: start;
  margin: 5% 10% 1% 10%;
  font-family: "Oswald", sans-serif;
}
.introduccion-about h4 {
  margin-top: 8% !important;
  font-family: "Roboto", sans-serif;
  font-size: 120%;
  color: white;
}
#parragraph-about {
  font-family: "Roboto", sans-serif;
  font-size: small; /* small */
  color: beige;
  margin: 2% 0% 0% 0%;
}
#carouselExampleCaptions {
  margin: 0% 10% 3% 10% !important;
  box-shadow: 3px 1px 17px rgba(255, 255, 255, 0.05);
}

/* <-- Formulario / Form -->*/
.container-formulario {
  background-color: rgba(255, 255, 255, 0.338);
  box-shadow: 3px 1px 17px rgba(0, 0, 0, 0.4);
  margin-top: 2%;
  padding: 1.3% 2% 0.7% 2% !important;
}

.input {
  margin-bottom: 3%;
}
.container-formulario label {
  font-family: "Roboto", sans-serif;
  font-size: smaller;
  font-weight: bolder;
}
#subtitle-form {
  font-family: "Oswald", sans-serif;
  margin-bottom: 1.7%;
  font-weight: 500;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2%;
}
#enviar_form {
  display: flex;
  justify-content: center;
}
input[type="checkbox"]:checked {
  background-color: green !important;
  border-color: green !important;
}

/* Animacion 7 */
/* Animación de error (shake) */
@keyframes shakeError {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

/* Estilo cuando hay errores */
.error {
  background-color: red !important;
  animation: shakeError 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/*<-- Contacto / Contact -->*/
.contact-card .col-xl{
  margin: 3% 0 3% 0;
  display: flex;
  justify-content: center;
}
.contact-card img {
  padding: 6%;
  max-width: 100% !important;
  object-fit: contain !important; /* Contenido debería ajustarse dentro de su contenedor */
}
.contact-card a {
  display: flex;
  justify-content: center;
}
.contact-card p {
  font-family: "Roboto", sans-serif;
  font-size: 120%;
  font-weight: bolder;
  text-align: center;
}

.contact-card .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Animación 8 Rotación */
.contact-card .card:hover {
  transform: rotate(3deg); /* Rotación ligera al pasar el mouse */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
  background-color: #ffc107 !important; /* Cambia a un color amarillo brillante */
}


/* <-- Formulario enviado / Form_complete --> */
#body-form-complete .title-secondary {
  margin-top: 3%;
}

#body-form-complete .subtitle-secondary {
  margin-top: -0.3%;
}

#card-form-complete {
  margin: 2% 6% 0% 6%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(160, 156, 156, 0.411) !important;
}
#card-form-complete:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0);
  transform: translateY(0%);
}

#card-form-complete p {
  padding: 5% 5% 5% 5%;
  font-family: "Roboto", sans-serif;
  color: white;
  font-size: 200%;
  font-weight: 900;
  font-weight: bolder;
  text-align: center;
  margin: 0% -5% 0% -5%;
  background-color: rgba(0, 0, 0, 0.096);
}

#body-form-complete img {
  padding: 2% 0% 0% 2%;
  width: 50%;
  height: auto;
  object-fit: contain;
}

/* <-- Animaciones con Keyframes -->*/
/* Animacion 5 FadeIn */
.fadeIn {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animacion 6 SlideInTop */
@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}  

/* Animación de 9 jello - Gelatina */
@keyframes jello {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75) rotate(-10deg);
  }
  40% {
    transform: scale(0.75, 1.25) rotate(10deg);
  }
  50% {
    transform: scale(1.15, 0.85) rotate(-8deg);
  }
  65% {
    transform: scale(0.95, 1.05) rotate(5deg);
  }
  75% {
    transform: scale(1.05, 0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

.jello {
  animation: jello 0.8s both;
}

/* Animación 10 bounceInUp */
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  60% {
    opacity: 1;
    transform: translateY(-30%);
  }
  80% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}

.bounceInUp {
  animation: bounceInUp 0.8s ease-out;
}



/* ---------------- MEDIA QUERIES ---------------- */
@media (max-width: 800px) {
  .container-formulario .row {
    margin-top: 8%;
  }  
}  
@media (max-width: 1000px) {
  footer {
    margin-top: 100%;
  }  
}