/* ******** Custom Properties ******** */
:root {
    --first-color: rgb(46, 61, 111);
    --first-alpha-color: rgba(46, 61, 111, 0.75);
    --second-color: rgb(20, 25, 45);
    --second-alpha-color: rgba(20, 25, 45, 0.75);
    --third-color: rgb(80, 20, 100);
    --third-alpha-color: rgba(80, 20, 100, 0.75);
    --bg-hdr-color: rgba(46, 61, 111, 0.95);

    --link-color: rgb(255, 255, 255);
    --link-color-hover: rgb(1, 135, 230);
    --link-alpha-color: rgba(80, 158, 227, 0.75); /* BORRAR */
    --link-color-whatsapp: rgb(105, 208, 114);

    --bg-color: rgb(253, 253, 251);
    --bg-alpha-color: rgba(253, 253, 251, 0.65);
    --bg-second-color:rgb(1, 135, 230);
    --bg-second-color-dark: rgb(1, 82, 166);
    --bg-third-color: rgb(46, 61, 111);
    --bg-third-color-dark: rgb(28, 37, 67);
    --bg-fourth-color: rgb(0, 183, 227);
    --bg-fourth-color-dark: rgb(0, 115, 161);
    --bg-fifth-color: rgb(0, 96, 166);
    --bg-fifth-color-dark: rgb(0, 58, 103);
}

/* ******** Reset Styles ******** */
body {
    font-family: "Lato", serif;
    color: var(--first-color);
}

a {
  color: var(--link-color);
  transition: all 0.3s ease-out;
}

a:hover {
  color: var(--link-color-hover);
}

/* ******** Bootstrap Styles ******** */

.bg-dark {
  background-color: var( --bg-hdr-color) !important;
}

/* Estilos adicionales para el carrusel preguntados a CHATGPT */
.carousel-item {
  height: 100vh; /* Ocupa toda la altura del viewport */
}

.carousel-item img {
  height: 100%; /* Asegura que la imagen ocupe toda la altura del contenedor */
  width: 100%; /* Asegura que la imagen ocupe toda la anchura del contenedor */
  object-fit: cover; /* La imagen cubre el contenedor manteniendo su proporción */
  object-position: center; /* Centra la imagen horizontal y verticalmente */
}

.carousel-nico img {
  object-position: center right; /* Aplica solamente para la imagen del 1er slide porque era requerida la justificación horizontal hacia la derecha */
}
/* Fin de Estilos adicionales para el carrusel preguntados a CHATGPT */

.carousel-caption {
  text-align: left;
  top: 45%;
}

.navbar-brand img {
  width: auto;
  height: 3rem;
}

.navbar-dark .navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: all 0.3s ease-out;
}

.navbar-dark .navbar-toggler:hover {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2885, 129, 193, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  opacity: 1;
}

.nav-item {
  transition: all 0.3s ease-out;
}

.nav-item:hover {
  background-color: var(--first-alpha-color);
}

.nav-link {
  padding-left: 0.5rem;
  color: var(--bs-white);
  font-size: 1.0rem;
  font-weight:normal;
}

.nav-link:hover {
  color: var(--bg-fourth-color);
}

/* ******** My Styles ******** */
.link-whatsapp a {
  color: var(--link-color-whatsapp);
  transition: all 0.3s ease-out;
}

.link-whatsapp a:hover {
  color: var(--link-color-hover);
}

.bg-alpha-color {
  background-color: var(--bg-alpha-color);
}

.bg-hero-image {
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

.bg-actividades {
  background-color: var(--bg-third-color);
  background-image: var(--bg-nc);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center right;
}

.bg-ftr-nc {
  color: white;
  background-image: url(../img/bg-ftr-nc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-second-color {
  background-color: var(--bg-second-color);
}

.bg-second-color-dark {
  background-color: var(--bg-second-color-dark);
}

.bg-third-color {
  background-color: var(--bg-third-color);
}

.bg-third-color-dark {
  background-color: var(--bg-third-color-dark);
}

.bg-fourth-color {
  background-color: var(--bg-fourth-color);
}

.bg-fourth-color-dark {
  background-color: var(--bg-fourth-color-dark);
}

.bg-fifth-color {
  background-color: var(--bg-fifth-color);
}

.bg-fifth-color-dark {
  background-color: var(--bg-fifth-color-dark);
}

.blockquote {
  font-size: 1.5rem;
  border-left: 5px solid var(--bg-fourth-color);
  font-style: italic;
  padding-left: 1rem;
  min-height: 74px;
}

.box-pic-actividades {
  border: none;
}

.card-nc {
  border: var(--bs-card-border-width) none;
}

.clip-path {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.flip-card-1 {
  position: relative;
  width: 100%;
  min-height: 320px;
  perspective: 1000px; /* Añade perspectiva para el efecto 3D */
}

.flip-card-1 div {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: end; /*para que el icono se justifique a la derecha*/
  justify-content: space-between;
  backface-visibility: hidden; /* Oculta la cara trasera cuando está girada */
  transition: transform 1s; /* Transición suave */
  padding: 3rem 2rem 0rem 2rem;
}

.flip-card-1 img {
  width: 7rem;
  justify-self: end;
  padding: 1rem 1rem 0 0;
}

.flip-card-1 .front {
  color: white;
  transform: rotateY(0deg); /* Estado inicial */
}

.front h3 {
  min-height: 5.5rem;
}

.flip-card-1 .back {
  color: white;
  padding: 2rem 1rem 0rem 1rem; /* Necesarios para los márgenes internos traseros */
  transform: rotateY(180deg); /* Oculta la parte trasera inicialmente */
}

.flip-card-1.flipped .front {
  transform: rotateY(-180deg); /* Gira la parte frontal */
}

.flip-card-1.flipped .back {
  transform: rotateY(0deg); /* Muestra la parte trasera */
}

.form-input-uno {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  color: var(--second-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg-color);
  background-clip: padding-box;
  border: none;
  border-radius: 0;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  color: var(--second-color);
  /*color: var(--bs-body-color);*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg-color);
  /*background-color: var(--bs-body-bg);*/
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  /*border-radius: var(--bs-border-radius);*/
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tarjeta-consultoria {
  color: white;
  font-size: 0.8rem;
  padding: 2rem;
  background-image: url("../img/bg-luz-diagonal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  cursor: pointer;
}

.tarjeta-consultoria h5 {
  font-size: 1.3rem;
}

.tarjeta-consultoria.uno:hover {
  background-color: var(--bg-third-color-dark);
}

.tarjeta-consultoria.dos:hover {
  background-color: var(--bg-second-color-dark);
}

.bg-consultoria {
  width: 100%;
  height: 100vh;
  min-height: 260px;
  background-image: url(../img/bg-consultoria.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: start;
  border-top: white solid 4rem;
}

.box-consultoria {
  background-color: white;
  height: 37px;
  width: 100%;
}

.error-input {
  border: 2px solid red;
  background-color: #ffe6e6;
  outline: none;
  animation: pulsate 1s infinite;
}

@keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.error-input:focus {
  background-color: #ffd1d1;
}

/*
.error-input {
  border: 2px solid red;
  background-color: #ffe6e6;
  transition: all 0.3s ease-in-out;
  animation: pulsate 1s infinite;
}

@keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
*/




/* //SM - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  
  .box-pic-actividades img {
    transform: translateY(5rem);
  }
  
  .flip-card-1 {
    width: 100%;
  }

  .flip-card-1 div {
    padding: 2rem 1rem 0rem 1rem;
  }

  .front h3 {
    font-size: 1.3rem;
  }

  .flip-card-1 img {
    width: 7rem;
  }

  .flip-card-1 .back {
    padding: 2rem 1rem 2rem 1rem; /* Necesarios para los márgenes internos traseros */
  }

  .back p {
    font-size: small;
  }

  .back h4 {
    font-size: 1rem;
  }

  .tarjeta-consultoria {
    padding: 1rem;
  }

  .tarjeta-consultoria h5 {
    font-size: 1.1rem;
  }

}

/* MD - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .bg-consultoria {
    height:auto;
  }

  .carousel-caption h5 {
    font-size: 3.5rem; /* Referencia en bs-doc display-font-sizes para display-4 */
  }
  
  .flip-card-1 {
    width: 90%;
  }

  .front h3 {
    font-size: 1.6rem;
  }

  .back p {
    font-size: 0.9rem;
  }

  .back h4 {
    font-size: 1.2rem;
  }

  .tarjeta-consultoria {
    padding: 1rem;
  }

  .tarjeta-consultoria h5 {
    font-size: 1.1rem;
  }

}

/* //Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .carousel-caption h5 {
    font-size: 4rem; /* Referencia en bs-doc display-font-sizes para display-3 */
  }
  
  .flip-card-1 {
    width: 80%;
  }
  
  .front h3 {
    font-size: 1.6rem;
    min-height: 6.5rem;
  }

  .back p {
    font-size: 1rem;
  }

  .back h4 {
    font-size: 1.4rem;
  }

  .nav-item:hover {
    background-color: transparent;
  }
  
  .tarjeta-consultoria {
    padding: 2rem;
  }

  .tarjeta-consultoria h5 {
    font-size: 1.2rem;
  }

}

/* //X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  
  .carousel-caption h5 {
    font-size: 4.5rem; /* Referencia en bs-doc display-font-sizes para display-2 */
  }

  .flip-card-1 {
    width: 70%;
  }

  .flip-card-1 div {
    padding: 2rem 3rem 0rem 3rem;
  }

  .tarjeta-consultoria h5 {
    font-size: 1.3rem;
  }

}

/* //XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
  .carousel-caption {
    width: 40%;
  }

  .carousel-caption h5 {
    font-size: 5rem; /* Referencia en bs-doc display-font-sizes para display-1 */
  }
  
  .tarjeta-consultoria h5 {
    font-size: 1.4rem;
  }

}

  

.lato-light {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: normal;
}

.lato-regular-italic {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: italic;
}