/* 
   Selah - Custom CSS
   This file contains custom styling for the Selah landing page
*/

/* ===== GENERAL STYLES ===== */
:root {
   --selah_blue: #051731;
   --selah_red: #ed6458;
   --lightblue: #574cec;
}

body {
   font-family: "DM Sans", sans-serif;
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
}

a {
   text-decoration: none !important;
   color: inherit !important;
   transition: .3s ease;
}

button {
   color: white;
   border: 0;
   font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: 400 !important;
}

h6 {
   font-size: 1.07rem !important;
}

small {
   font-weight: 500 !important;
}

.text-justify {
   text-align: justify;
}

.logo-academy {
   height: 35px;
   width: 165px !important;
}

.logo-ota {
   height: 35px;
   width: 150px !important;
}


/* Navbar  */

.navbar {
   border-radius: 20rem;
   margin-top: 3rem;
   transition: padding 0.35s ease, width 0.5s ease, border-radius 0.8s ease;
   padding-top: .4rem !important;
   padding-bottom: .4rem !important;
   background-color: transparent;
   color: white;
}

.navbar img {
   width: 130px
}

.navbar-scrolled {
   margin-top: 0 !important;
   padding-top: 0.2rem !important;
   padding-bottom: 0.2rem !important;
   transition: padding 0.3s ease, width 0.5s ease, border-radius 0.75s ease;
   width: 100vw !important;
   border-radius: 0;
}

.navbar-scrolled.blue {
   background-color: var(--selah_blue);
}

.navbar-scrolled.white {
   background-color: #fff;
   box-shadow: 0px 0px 20px 20px #9e9e9e41;
}

.dropdown-menu {
   border-radius: 1.2rem !important;
   border: 0 !important;
   padding: 1rem !important;
}

.dropdown-menu li {
   font-size: 0.85rem !important;
}

.dropdown-menu li a {
   color: #051731 !important;
   font-weight: 600 !important;
}

.dropdown-menu.blue {
   background-color: var(--selah_blue) !important;
   color: white;
}

.dropdown-menu.blue li a {
   color: white !important;
}

.dropdown-item:hover, .dropdown-menu.blue li a:hover {
   color: var(--selah_red) !important;
   background-color: transparent !important;
}

.nav-link {
   font-weight: 500;
   font-size: 1.07rem;
}

.navbar.white-nav .nav-link {
   color: var(--selah_blue) !important;
}

.nav-link.active, .navbar.white-nav .nav-link.active{
   color: var(--selah_red) !important;
}

.navbar.white-nav .nav-link:hover, .navbar .nav-link:hover {
   color: #d65c51 !important;
}



/* Footer  */
footer {
   background-color: var(--selah_blue);
}

footer button {
   background-color: var(--selah_red);
   border: 0;
   transition: 0.4s ease;
}

footer button:hover {
   background-color: black;
}

footer a {
   transition: 0.4s ease;
}

footer a:hover {
   color: var(--selah_red) !important;
}


.hero-section {
   background-image: url("../img/home/Banner-principal-1.jpeg");
   background-size: cover;
   background-position: top;
   height: 97vh;
}


/* ===== Imagenes de fondo ===== */
.service-cards img {
  transition: transform 0.4s ease-in-out;
}

.service-cards:hover {
   cursor: pointer;
}

.service-cards:hover img {
   transform: scale(1.03);
}

.service-cards:hover #logo-academy {
   transform: scale(1);
}

/* Colores fondo */
.bg-selah_blue {
   background-color: var(--selah_blue);
}

.bg-selah_dark {
   background-color: #030e1f;
}

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

.bg-selah_red-soft {
   background-color: #ed64581c;
}

.bg-selah_blue-soft {
   background-color: #1667d860;
}

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


/* Colores texto */
.text-red {
   color: var(--selah_red) !important;
}

.text-blue {
   color: var(--selah_blue) !important;
}


/* Botones  */
.selahBtn {
   border: 0;
   border-radius: 0.35rem;
   padding-block: .7rem;
   font-size: 1.25rem;
   transition: background-color 0.4s ease;
}

.selahBtn.bg-selah_red {
   color: var(--selah_blue);
}

.selahBtn.bg-selah_red:hover {
   background-color: #d65c51;
}

.selahBtn.lightblue {
   background-color: var(--lightblue);
}

.selahBtn.lightblue:hover {
   background-color: #433ac4;
}

.selahBtn.bg-selah_blue:hover {
   background-color: #092957;
}

/* Textos */
.title-text {
   font-size: 3rem;
   font-weight: 600 !important;
}

.ota-size {
   font-size: 4rem;
}

/* Otros */

.mt-nav {
   margin-top: 200px;
}

.mt-nav-small {
   margin-top: 150px;
}

.margin-bottom-sections {
   margin-bottom: 5rem;
}

.blog-section-img {
   height: 250px;
}

.tools-blue-section {
   height: 650px;
}

.cronograma-scroll-height {
   height: 470px;
}


/* Extender bootstrap */
.rounded-4 {
   border-radius: 1rem;
}

.rounded-4-on-top {
   border-radius: 1rem 1rem 0 0;
}

.padding-hero {
   padding-block: 5rem;
}

.border-start-red {
   border-left: 1px solid #000 !important;
}

.fw-500 {
   font-weight: 500 !important;
}

/* Imagenes */
.image-wrapper {
   overflow: hidden;
   position: relative;
}

.image-wrapper.custom-height {
   height: 450px;
}

.image-wrapper.people {
   height: 370px;
}

.object-cover {
   width: 100% !important;
   height: 100%;
   object-fit: cover;
   display: block;
}


/* ===== Tarjetas de turismo ===== */
.tourism-card {
   position: relative;
   height: 600px;
   width: 100%;
   border-radius: 1rem;
   background-color: rgb(255, 255, 255);
   overflow: hidden;
   cursor: pointer;
}

/* Agregado pseudo-elemento para el efecto de deslizamiento */
.tourism-card::before {
   content: "";
   position: absolute;
   top: -100%; /* Inicia completamente abajo */
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--selah_blue);
   transition: top 0.7s ease-out;
   z-index: 1;
   border-radius: 1rem;
}

.tourism-card .image-wrapper,
.tourism-card .tourism-card-info {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 600px;
   transition: opacity 0.4s ease-in, height 0.45s ease-in;
}

/* Estado inicial */
.tourism-card .image-wrapper {
   opacity: 1;
   border-radius: 1rem;
   height: 70%;
   z-index: 2; /* Agregado z-index para estar sobre el pseudo-elemento */
}

.tourism-card .image-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 1rem;
}

.tourism-card .tourism-card-info {
   opacity: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   padding: 1.5rem 2.5rem;
   height: 100%;
   z-index: 3;
   color: white;
}

.tourism-card .tourism-card-info h5 {
   margin-bottom: 1rem;
   font-weight: 500 !important;
}

/* Hover */
.tourism-card:hover {
   color: white;
}

/* El pseudo-elemento se desliza hacia arriba en hover */
.tourism-card:hover::before {
  top: 0; /* Se desliza hasta cubrir completamente la tarjeta */
}

.tourism-card:hover .image-wrapper {
   height: 60%;
   opacity: 0;
}

.tourism-card:hover .tourism-card-info {
   opacity: 1;
}


.featured-post-card {
   box-shadow: 1px 1px 20px 20px #ebebeb;
   padding: 2.5rem;
}

/* Tarjetas de Pasos */
.pasos-card-flip {
   margin: 1rem auto;
   perspective: 1000px;
   cursor: pointer;
}

.pasos-card-flip.pasos-h {
   height: 400px;
}

.pasos-card-flip.beneficios-h {
   height: 300px;
}

.card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   transition: transform 1s;
   transform-style: preserve-3d;
}

.pasos-card-flip:hover .card-inner {
   transform: rotateY(180deg);
}

.card-front,
.card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
}

.card-front {
   background: var(--lightblue);
}

.card-front.image-1, .card-back.image-1 {
   background-image: url("../img/home/paso-1.jpg");
   background-size: cover;
}

.card-front.image-2, .card-back.image-2 {
   background-image: url("../img/home/paso-2.jpg");
   background-size: cover;
}

.card-front.image-3, .card-back.image-3 {
   background-image: url("../img/home/Paso-3.jpg");
   background-size: cover;
}

.card-front.image-4, .card-back.image-4 {
   background-image: url("../img/home/Paso-4.jpg");
   background-size: cover;
}

.card-back {
   transform: rotateY(180deg);
}

.card-back.image-1 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/home/paso-1.jpg");
}

.card-back.image-2 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/home/paso-2.jpg");
}

.card-back.image-3 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/home/paso-3.jpg");
}

.card-back.image-4 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/home/paso-4.jpg");
}

.card-front.benef-image-1, .card-back.benef-image-1 {
   background-image: url("../img/Iconos_Beneficio/Icon-1.jpg");
   background-size: cover;
   background-position: center;
}

.card-back.benef-image-1 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/Icon-1.jpg");
}

.card-front.benef-image-2, .card-back.benef-image-2 {
   background-image: url("../img/Iconos_Beneficio/icon-2.jpg");
   background-size: cover;
   background-position: center;
}

.card-back.benef-image-2 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/icon-2.jpg");
}

.card-front.benef-image-3, .card-back.benef-image-3 {
   background-image: url("../img/Iconos_Beneficio/icon-3.jpg");
   background-size: cover;
   background-position: top;
}

.card-back.benef-image-3 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/icon-3.jpg");
}

.card-front.benef-image-4, .card-back.benef-image-4 {
   background-image: url("../img/Iconos_Beneficio/icon-4.jpg");
   background-size: cover;
   background-position: top;
}

.card-back.benef-image-4 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/Icon-4.jpg");
}

.card-front.benef-image-5, .card-back.benef-image-5 {
   background-image: url("../img/Iconos_Beneficio/icon-5.jpg");
   background-size: cover;
   background-position: center;
}

.card-back.benef-image-5 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/Icon-5.jpg");
}

.card-front.benef-image-6, .card-back.benef-image-6 {
   background-image: url("../img/Iconos_Beneficio/icon-6.jpg");
   background-size: cover;
   background-position: top;
}

.card-back.benef-image-6 {
   background-image: 
      linear-gradient(rgba(0,0,0,0.45), rgba(0, 0, 0, 0.788)),
      url("../img/Iconos_Beneficio/Icon-6.jpg");
}


/* Tarjetas de Beneficios */
.beneficios-card-flip {
   height: 300px;
   margin: 1rem auto;
   perspective: 1000px;
   cursor: pointer;
}


/* ===== PREGUNTAS FRECUENTES ===== */
.div-preguntas {
   transition: 0.5s ease-in;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   background-color: white;
   padding-block: 3.5vh;
   border-radius: 3rem;
}

.div-preguntas:hover {
   cursor: pointer;
}

.div-preguntas .info {
   max-height: 0;
   overflow: hidden;
   transition: 0.4s ease-out;
}

.div-preguntas.expanded .info {
   max-height: 14vh; /* Ajusta según el contenido */
}


.circle {
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   line-height: 40px;
   border-radius: 50%;
   font-size: 20px;
   color: #fff;
   text-align: center;
}

.cronograma-div {
   height: 100px;
   display: flex;
   align-items:center;
}


/* ===== FORMACION (BLOG) ===== */
.hero-formacion {
   height: 80vh;
   background-color: var(--selah_blue);
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: end;
}

.hero-formacion-content {
   z-index: 3;
}

.hero-single-post {
   background-color: var(--selah_blue);
   height: 40vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: end;
}

.desktop-display {
   display: block;
}

.mobile-display {
   display: none;
}

.gradient-blur {
   z-index: 2;
   position: absolute;
   bottom: 0;
   top: 0;
   width: 100%;
   height: 100%;
   /* background: linear-gradient(to bottom, rgba(58, 58, 58, 0.95), rgba(58, 58, 58,0.6), rgba(58, 58, 58,0)); */
   background: #0517317e;
}

@media only screen and (max-width: 1400px) {
   h1 {
      font-size: 2.2rem !important;
   }

   .tourism-card {
      height: 570px;
   }

   .padding-hero {
      padding-block: 4rem;
   }

   .title-text {
      font-size: 2.4rem !important;
   }

   .image-wrapper.people {
      height: 370px;
   }

   .tools-blue-section {
      height: 550px;
   }
}

@media only screen and (max-width: 1281px) {
   .tools-blue-section {
      height: 500px;
   }

   .hero-section {
      height: 96vh;
   }
}


@media only screen and (max-width: 950px) {
   h6 {
      font-size: 1.15rem !important;
   }

   .hero-section {
      height: 92vh;
      background-image: url("../img/home/Banner-Versión-Movil.png");
   }

   .padding-hero {
      padding-block: 2rem;
   }

   .image-wrapper.custom-height {
      height: 300px;
   }

   .tourism-card .tourism-card-info {
      padding: 1rem 1.5rem;
   }

   .mt-nav {
      margin-top: 150px;
   }

   .margin-bottom-sections {
      margin-bottom: 4rem;
   }

   .image-wrapper.people {
      height: 300px;
   }

   .div-preguntas {
      padding-block: 2.25vh;
   }

   .navbar-scrolled {
      width: inherit;
   }

   .hero-formacion {
      height: 60vh;
   }

   .rounded-4.not-rounded {
      border-radius: 0rem;
   }
}


@media only screen and (max-width: 600px) {
   h1 {
      font-size: 1.8rem !important;
   }

   h6 {
      font-size: 1.02rem !important;
   }

   .desktop-display {
      display: none;
   }

   .mobile-display {
      display: block;
   }

   h5 {
      font-size: 1rem !important;
   }

   .navbar {
      margin-top: 0;
      padding-top: .3rem !important;
      padding-bottom: .3rem !important;
      border-radius: 0;
   }

   .navbar img {
      width: 110px
   }

   .selahBtn {
      padding-block: .45rem;
      font-size: 1rem;
   }

   .hero-section {
      border-radius: 0 !important;
      background-size: cover;
      background-position: bottom;
   }

   .padding-hero {
      padding-block: 0;
      padding-top: 7rem;
   }

   .title-text {
      font-size: 2.25rem !important;
   }

   .mt-nav {
      margin-top: 4.5rem;
   }

   .image-wrapper.custom-height {
      height: 200px;
   }

   .tourism-card {
      height: 400px;
   }

   .tourism-card .image-wrapper {
      height: 65%;
   }

   .featured-post-card {
      padding: 1.5rem 1.25rem;
   }

   .blog-section-img {
      height: 150px;
   }

   .pasos-card-flip.pasos-h {
      height: 350px;
   }

   .margin-bottom-sections {
      margin-bottom: 3rem;
   }

   .image-wrapper.people {
      height: 250px;
   }

   .dropdown-menu {
      border: 0px solid var(--selah_blue) !important;
   }

   .dropdown-divider {
      color: var(--selah_red);
   }

   .dropdown-item:focus, .dropdown-item:hover {
      background-color: #F44336 !important;
   }

   .cronograma-scroll-height {
      height: 320px;
   }

   .hero-formacion {
      height: 90vh;
   }

   .logo-academy {
      height: 28px;
      width: 130px !important;
   }

   .mt-nav-small {
      margin-top: 4rem;
   }

   .tools-blue-section {
      height: 750px;
   }

   .top-50.mobile {
      top: 28% !important;
   }

   .pasos-card-flip.beneficios-h {
      height: 250px;
      margin-bottom: 0 !important;
   }

   .pasos-card-flip.beneficios-h h2 {
      font-size: 1.4rem !important;
   }

   .div-preguntas {
      padding-block: 3vh;
   }
}

.swiper-pagination {
   display: flex;
   justify-content: flex-end;
}

.swiper-pagination-bullet {
   width: 32px;
   height: 32px;
   text-align: center;
   line-height: 32px; /* Center the number vertically */
   font-size: 16px;
   color: #B2B5BE;
   opacity: 1;
   background: transparent;
   display: flex;
   cursor: pointer;
   justify-content: center;
   align-items: center;
}

.swiper-pagination-bullet-active {
   background-color: #ed64581c;
   color: #ed6458;
   font-weight: 900;
}