@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}


.font {
  font-family: "Red Hat Display", sans-serif;
}

.text-white-navbar {
  color: rgba(248, 250, 254, 1);
}

.title-h1-font {
  font-style: normal;
  letter-spacing: 0.48px;
}

.title-h1-font span {
  font-family: "Red Hat Display", sans-serif;
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 0.88px;
}

.text-hero-list {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.28px;
}

.title-section-two {
  text-align: center;

  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.32px;
}

.title-section-two span {
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.44px;
}

.title-card-section-two {
  font-size: 1rem;
}

.shadow-card {
  box-shadow: 5px 5px 10px 0px rgba(191, 193, 195, 0.5);
}
.shadow-card-beneficios {
  box-shadow: 5px 5px 10px 0px rgba(191, 193, 195, 0.5);
}
.border-radius-bg {
  border-radius: 20px;
}

.card-title-hover {
  color: #19ba58;
}

.card-text-hover {
  color: #525766;
}

/* hover cards */
.block:hover .card-text-hover {
  background-color: #387ede;
  /* Cambia el color de fondo al que desees en hover */
  color: #fefefe!important;
  /* Cambia el color del texto al que desees en hover */
}

.block {
  position: relative;
}
.shadow-card:hover p{
  color: white;
}
.block .card-title {
  color: #19ba58;
  /* Color verde en estado predeterminado */
}

.block:hover .card-title {
  color: #fefefe;
  /* Cambia el color del texto al que desees en hover */
}

.block:hover .card-text-hover {
  background-color: #387ede;
  /* Cambia el color de fondo al que desees en hover */
}

.block .relative {
  margin-bottom: 0;
  /* Elimina cualquier margen inferior en la imagen */
}

.block .rounded-t-2xl {
  margin-bottom: -1px;
  /* Ajusta el margen inferior de la imagen para superponerlo ligeramente con el contenedor de abajo */
}

.img1 {
  grid-area: img1;
}

.img2 {
  grid-area: img2;
}

.img3 {
  grid-area: img3;
}

.img4 {
  grid-area: img4;
}

.img5 {
  grid-area: img5;
}

.img6 {
  grid-area: img6;
}

.img7 {
  grid-area: img7;
}

.img8 {
  grid-area: img8;
}

.img9 {
  grid-area: img9;
}

.img10 {
  grid-area: img10;
}

.img11 {
  grid-area: img11;
}

.img12 {
  grid-area: img12;
}

.img13 {
  grid-area: img13;
}

.img14 {
  grid-area: img14;
}

.img15 {
  grid-area: img15;
}

.img16 {
  grid-area: img16;
}

.img17 {
  grid-area: img17;
}

.img18 {
  grid-area: img18;
}

/* marcas */
/* Estilos para pantallas de 320px de ancho */
@media (min-width: 320px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 16px;
    grid-template-areas:
      "img1 img2"
      " img3 img4"
      "img6 img5"
      "img7 img8"
      " img9 img10"
      "img11 img12"
      "img13 img14"
      " img16  img15"
      "img17 img18 ";
  }
}

/* Estilos para pantallas de 768px de ancho */
@media (min-width: 768px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 16px;
    grid-template-areas:
      "img1 img2 img3 img4 img5"
      "img6 img7 img8 img9 img10"
      "img11 img12 img13 img14 img15"
      ". img16 img17 img18 .";
  }

  .image {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
    grid-template-areas:
      "img1 img2 img3 img4 img5 img6 "
      "img7 img8 img9 img10 img11 img12"
      "img13 img14 img15 img16 img17 img18";
  }
}

@media (min-width: 1024px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
    grid-template-areas:
      "img1 img2 img3 img4 img5 img6 "
      "img7 img8 img9 img10 img11 img12"
      "img13 img14 img15 img16 img17 img18";
  }
}

input::placeholder {
  color: var(--gris-400, #a4aeba);
  font-family: "Red Hat Display";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.28px;
}

textarea::placeholder {
  color: var(--gris-400, #a4aeba);
  font-family: "Red Hat Display";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.28px;
}
/* modal */
@media (min-width:768px){
  .verVideoXs{
  display: none
  }
  .verVideoMd{
    display: flex;
  }
}
@media (max-width:768px){
  .verVideoMd{
  display: none
  }
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}


.modal-open {
  overflow: hidden;
}
.modal-content {
  background-color: #fff;
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

.webkit-center-modal{
  text-align: -webkit-center;
}
/* enlazado de botones */
#scrollButton {
  cursor: pointer;
}
#menuMobile{
  display: none;
}
.elemento-flotante {
  animation: flotar 2s ease-in-out infinite;
}


@keyframes flotar {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}




/* Define un keyframes para la animación */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplica la animación a los elementos que deseas que aparezcan en orden */
/* Clase para animar el segundo div */
.animate-fade-in-2 {
  animation: fadeIn 1s ease-in-out 0s both;
}

/* Clase para animar el tercer div */
.animate-fade-in-3 {
  animation: fadeIn 1s ease-in-out 0.3s both;
}

/* Clase para animar el cuarto div */
.animate-fade-in-4 {
  animation: fadeIn 1s ease-in-out 0.8s both;
}
/* Aplica la animación a los elementos que deseas que aparezcan en orden */
/* Clase para animar el segundo div */
.animate-fade-in-5 {
  animation: fadeIn 1s ease-in-out 0s both;
}

/* Clase para animar el tercer div */
.animate-fade-in-6 {
  animation: fadeIn 1s ease-in-out 0.3s both;
}

/* Clase para animar el cuarto div */
.animate-fade-in-7 {
  animation: fadeIn 1s ease-in-out 0.8s both;
}
.hoverButtonActive{
  background-color: grey!important;
}
.hoverButtonActive:hover{
  background-color: grey!important;
}
.hoverButton{

background-color: #387EDE!important;
}
.hoverButton:hover{

  background-color: #124995!important;
  }
  @media (min-width:768px){
    .margin-modal{
      margin-top: 100px!important;
    }
  }

  @media (min-width:1024px){
    .margin-modal{
      margin-top: 200px!important;
    }
  }
  @media (min-width:1920px){
    .margin-modal{
      margin-top: 175px!important;
    }
  }
  .menuVisible {
    display: block !important; /* Usa !important para asegurarte de que estas reglas se apliquen */
  }
  
  .menuHidden {
    display: none !important;
  }