@font-face {
  font-family: "Lexend";
  src: url("../../fonts/Lexend-Regular.ttf");
}

@font-face {
  font-family: "Fraunces";
  src: url("../../fonts/Fraunces.ttf");
}

:root {
  --verdeLight: #fcfbf8;
  --verde: #155638;
  --verde2: #179e56;
  --text: #1f2937;
  --muted: #5b6672;
  --orange: #f78b03; /* tono naranja de porcentajes */
  --rule: #223b30;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fraunces";
  color: black;
}

h1 {
  font-size: 3rem;
  font-weight: 600;
}
h2 {
  font-size: 2.5rem;
  font-weight: 600;
}
h3 {
  font-size: 1.9rem;
  font-weight: 600;
}
h4 {
  font-size: 1.4rem;
  font-weight: 600;
}

.sub1 {
  font-family: "Lexend";
  font-size: 1.8rem;
  color: black;
}
.sub2 {
  font-family: "Lexend";
  font-size: 1.4rem;
  color: black;
}
.sub3 {
  font-family: "Lexend";
  font-size: 1.1rem;
  color: black;
}

.sub4 {
  font-family: "Lexend";
  font-size: 0.9rem;
  font-weight: 100;
  color: black;
}

.bold {
  font-weight: bold;
}

.bg-azul {
  background-color: #1a76cc;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas del mismo tamaño */
  grid-template-rows: auto auto; /* 2 renglones */
  gap: 12px; /* Espacio entre los elementos */
}

.grid-item {
  text-align: center;
  font-family: "Lexend";
  font-size: 0.9rem;
  color: black;
}

.grid-item img {
  width: 100px; /* Ajusta el tamaño de las imágenes */
  height: auto;
}

section {
  margin-bottom: 100px; /* Espacio entre secciones */
}

.nav-principal {
  background-color: #fffefb !important;
}

.navbar-light .nav-item {
  background-color: #fffefb !important;
}

.footer {
  background-color: #fff2d6 !important;
}

.titulo {
  font-size: xx-large;
  font-weight: bold;
  font-family: "Fraunces" !important;
}

.titulo {
  font-size: xx-large;
  font-weight: bold;
  font-family: "Fraunces" !important;
}
.subtitulo {
  color: rgb(21, 86, 56) !important;
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
}
.subtitulo-orange {
  color: #fa522e !important;
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
}
.subtitulo-neutro {
  color: #555 !important;
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
}

.subtitulo2 {
  color: #555 !important;
  font-size: 14px;
  padding-top: 10px;
}

.info {
  font-size: 13px;
  align-content: center;
  text-align: center;
}

img.img-select {
  height: 20px;
  width: auto;
}

.error {
  color: #fa522e !important;
  font-size: 16px;
  font-weight: bold;
}

.rounded-image {
  border-radius: 10px;
}

/** Crea un espacio ente elementos del div que los contiene. */
.contenido {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espacio vertical entre los elementos */
}

.containerImg {
  overflow: auto; /* Asegura que el contenedor se ajuste al contenido flotado */
}

.containerImg img {
  float: left;
  margin-right: 20px; /* Espacio entre la imagen y el texto */
}

.containerImg div {
  max-width: 60px; /* Controla el ancho máximo del texto */
}

.white {
  color: white !important;
}
.orange {
  color: #f78b03 !important;
}
.green {
  color: #155638 !important;
}
.green2 {
  color: #179e56 !important;
}
.cream {
  color: #fff2d6 !important;
}
.melon {
  color: #f9b2a3 !important;
}
.blue {
  color: #1a76cc !important;
}

.orange2 {
  color: #f6a775 !important;
}

/* Tamaño de texto para dispositivos móviles (pantallas pequeñas) */
@media (max-width: 480px) {
  .botones-sup {
    display: flex;
    align-items: flex-start;
    flex-direction: column; /* Coloca los elementos en una columna */
    gap: 5px;
    float: right;
  }
  .boton-ancho {
    width: 100%;
  }

  .imagen {
    order: -1; /* Mueve la imagen al principio */
    margin-bottom: 10px; /* Agrega un margen debajo de la imagen */
  }

  h1 {
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
  }
  h2 {
    font-size: 1.6rem;
    font-weight: 600;
  }
  h3 {
    font-size: 1.2rem;
    font-weight: 600;
  }
  h4 {
    font-size: 1rem;
    font-weight: 600;
  }

  .sub1 {
    font-family: "Lexend";
    font-size: 1.3rem;
    color: black;
  }
  .sub2 {
    font-family: "Lexend";
    font-size: 1rem;
    color: black;
  }
  .sub3 {
    font-family: "Lexend";
    font-size: 0.8rem;
    color: black;
  }

  .sub4 {
    font-family: "Lexend";
    font-size: 0.7rem;
    font-weight: 100;
    color: black;
  }
}

.full-width-section {
  background-image: url("../../general/img/b2c/portada_sin_texto.png");
  width: 100vw; /* 100% del ancho de la ventana */
  height: 50vh; /* 100% de la altura de la ventana */
  background-attachment: fixed; /* Parallax Effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 3rem;
  text-align: center;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 480px) {
  .full-width-section {
    background-image: url("../../general/img/b2c/portada_sin_texto_movil.jpeg");

    background-attachment: scroll;
  }
}

/** Texto que se desplaza de izquierda a derecha */
.marquee {
  overflow: hidden; /* Oculta el contenido que desborda */
  white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
  width: 100%; /* Ancho del contenedor */
  /* background-color: #f0f0f0;  Color de fondo (opcional) */
  position: relative;
}

.marquee-content {
  display: inline-block; /* Hace que el contenido se muestre en línea */
  padding-left: 100%; /* Espacio inicial para el efecto de deslizamiento */
  animation: marquee 15s linear infinite; /* Aplica la animación */
}

/* Definición de la animación */
@keyframes marquee {
  from {
    transform: translateX(0); /* Comienza en la posición original */
  }
  to {
    transform: translateX(-100%); /* Mueve el texto fuera del contenedor */
  }
}

/** FAQs */
.acordionHeader {
  background-color: #fffefb !important;
}
.acordionButton::after {
  background-color: #fffefb !important;
  color: #fff2d6 !important;
}

/** Botón flotante ******************/
.floating-btn {
  position: fixed;
  bottom: 55px;
  right: 100px;
  background-color: #25d366; /* Color de fondo del botón (por ejemplo, color de WhatsApp) */
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  z-index: 1000;
}

/* Estilo del ícono o texto dentro del botón */
.floating-btn i {
  font-size: 24px;
}

/* Animación de hover */
.floating-btn:hover {
  background-color: #128c7e; /* Color más oscuro al pasar el cursor */
}

@media (max-width: 480px) {
  /** Botón flotante */
  .floating-btn {
    position: fixed;
    bottom: 20px;
    right: 90px;
    background-color: #25d366; /* Color de fondo del botón (por ejemplo, color de WhatsApp) */
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    z-index: 1000;
  }

  /* Estilo del ícono o texto dentro del botón */
  .floating-btn i {
    font-size: 22px;
  }
}

/* Tarjeta crema-verde */

.card-cm {
  background: var(--verdeLight); /* tono crema */
  border-radius: 20px;
  padding: 40px 32px;
  margin: 20px;
  max-width: 520px;
  box-sizing: border-box;
}

.card-cm h2 {
  font-size: 30px;
  font-family: "Lexend";
  font-weight: normal !important  ;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 32px 0;
  color: var(--verde); /* verde oscuro */
}

.card-cm a {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--verde2); /* verde enlace */
  transition: color 0.2s ease-in-out;
}

.card-cm a:hover {
  color: var(--verde);
}

.card-cm a svg {
  margin-left: 6px;
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}