@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@300;400;500;600;700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans&display=swap');

body {
  overflow-x: hidden;
}

:root {
  --places-color: #02007e;
  --primary-color: #0D6681;
  --primary-dark: #004D63;
  --primary-dark2: #0F4C75;
  --primary-ultra-dark: #001f29;
  --secondary-color: #8AD0EE;
  --third-color: #888;
  --background-color: #fff;
  --background-color-alternative: #F5FAFD;

  --divider: #C0C8CC;
  --divider-dark: #000;

  --text-color: #ffffff;
  --text-color-subtext: #DCE4E8;
  --text-color-secu: #171C1F;
  --text-color-dark: #000;

  --button-color: #EE9300;
  --button-color-hover: #845415;

  --button-color-advertensing: #8C0009;
  --button-color-advertensing-hover: #4E0002;

  --icon-color: #FABA73;

  --text-hover: #845415;
  --text-hover-secondary: #FFDDBB;
}

.dark {
  --places-color: #02007e;
  --primary-color: #121212;
  --primary-dark: #004D63;
  --primary-dark2: #0F4C75;
  --primary-ultra-dark: #001f29;
  --secondary-color: #8AD0EE;
  --third-color: #888;
  --background-color: #fff;
  --background-color-alternative: #F5FAFD;

  --divider: #C0C8CC;
  --divider-dark: #000;

  --text-color: #ffffff;
  --text-color-subtext: #DCE4E8;
  --text-color-secu: #171C1F;
  --text-color-dark: #000;

  --button-color: #EE9300;
  --button-color-hover: #845415;

  --button-color-advertensing: #8C0009;
  --button-color-advertensing-hover: #4E0002;

  --icon-color: #FABA73;

  --text-hover: #845415;
  --text-hover-secondary: #FFDDBB;
}

.red {
  --places-color: #02007e;
  --primary-color: #FF0000;
  --primary-dark: #004D63;
  --primary-dark2: #0F4C75;
  --primary-ultra-dark: #001f29;
  --secondary-color: #8AD0EE;
  --third-color: #888;
  --background-color: #fff;
  --background-color-alternative: #F5FAFD;

  --divider: #C0C8CC;
  --divider-dark: #000;

  --text-color: #ffffff;
  --text-color-subtext: #DCE4E8;
  --text-color-secu: #171C1F;
  --text-color-dark: #000;

  --button-color: #EE9300;
  --button-color-hover: #845415;

  --button-color-advertensing: #8C0009;
  --button-color-advertensing-hover: #4E0002;

  --icon-color: #FABA73;

  --text-hover: #845415;
  --text-hover-secondary: #FFDDBB;
}

.weather-icon {
  width: 20px;
  height: 20px;
  background-color: var(--button-color);
  -webkit-mask-image: url('/icons/weather.svg');
  /* Safari y Chrome */
  mask-image: url('/icons/weather.svg');
  /* Otros navegadores */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}



.Fondo {
  background-color: var(--primary-color);
  padding: 2vh 1.5vw 0 0.5vw;
  padding-bottom: 1.5%;
}

.text {
  color: var(--text-color-secu);
  font-family: "Sofia Sans Condensed";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.vertical-line2 {
  width: 2px;
  height: 30px;
  /* Altura de la línea vertical */
  background-color: #7F7F7F;
  margin: 0 10px;
  display: inline-block;
  /* Asegura que se muestre correctamente */
  z-index: 0;
  position: relative;
}

.button {
  display: flex;
  padding: 5px;
  width: 202px;
  height: 43px;
  justify-content: center;
  margin-left: auto;
  align-items: center;
  gap: 3px;
  border-radius: 10px;
  background-color: var(--button-color-advertensing);
  border: none;
  cursor: pointer;
}

.button:hover {
  background: var(--button-color-advertensing-hover);
}

.button-text {
  color: var(--text-color);
  font-family: "Sofia Sans Condensed";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}

@media (max-width: 540px) {
  .button {
    display: column;
    width: 120px;
  }

}

.container-busqueda {
  display: flex;
  position: absolute;
  top: 25px;
  align-items: center;
  width: 60vw;
  width: Fill (715px)px;
  margin-left: 30px;

}

.custom-geocoder .mapboxgl-ctrl-geocoder {
  width: 50vw !important;
  /* Sobrescribe cualquier estilo interno */
  max-width: none !important;
  /* Asegura que no haya un ancho máximo */
  border-radius: 48px 48px 48px 48px;
  max-height: 36px;
}

.custom-geocoder .mapboxgl-ctrl-geocoder--input {
  width: 100%;
  /* Asegura que el input ocupe todo el ancho del contenedor */
  border-radius: 48px 48px 48px 48px;
  max-height: 36px;
  color: var(--third-color);
  /* Color del placeholder */
  font-family: "Sofia Sans";
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.custom-geocoder .mapboxgl-ctrl-geocoder--input::placeholder {
  color: var(--third-color);
  /* Color del placeholder */
  font-family: "Sofia Sans";
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.custom-geocoder .mapboxgl-ctrl-geocoder--icon {
  display: none;
  /* Oculta el icono predeterminado */
}


.geocoder-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-button {
  position: relative;
  right: 30px;
  /* Ajusta este valor según sea necesario */
  z-index: 2;
  background-color: var(--secondary-color);
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 48px;
  color: var(--primary-color);
  height: 36px;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: color 0.3s ease;
}


.gps-button {
  position: relative;
  right: 10px;
  height: 40px !important;
  width: 40px !important;
  /* Hereda la altura del contenedor */
  background-color: var(--secondary-color);
  color: var(--primary-dark);
  border: none;
  border-radius: 48px;
  /* Borde redondeado completo */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

}

.gps-button {
  transition: color 0.3s ease;
  background-color: var(--background-color);
}

.search-button:hover {
  background-color: var(--background-color);
}

.gps-button:hover {
  background-color: var(--secondary-color);
}


.results-container {
  margin-top: 20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.empty-space {
  visibility: hidden;
  /* Hace que el div sea invisible pero ocupe espacio */
  width: 40px;
  /* Define el tamaño del espacio vacío */
  height: 100%;
  /* Asegura que ocupe toda la altura del contenedor */
}

/* Responsive styles */

.weather-info {
  text-align: right;
  width: 100%;
  margin-top: 10px;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 18px;
  font-weight: 100;
  line-height: 30px;
  color: var(--background-color);
  text-underline-position: 'from-font';
  text-decoration-skip-ink: none;
}

.custom-hr {
  border: 0;
  height: 1px;
  background: var(--background-color);
  margin: 10px 0 10px auto;
  width: 130px;

}

@media (max-width: 900px) {

  /* Pantallas xs */
  .custom-hr {
    align-items: center;
    justify-content: center;
    text-align: center;
    align-content: center;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .weather-info {
    text-align: center;
  }

}


.Strong {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-color);

}

.location-info {
  font-family: 'Playfair Display', serif;
  color: var(--text-color);
  text-align: left;

}

.title {
  font-size: 62px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.2;
}

.icon {
  font-size: 24px;
  margin-left: 10px;
  vertical-align: middle;
  color: var(--icon-color)
    /* Color del ícono ♡ */
}

.iconmain {
  color: var(--primary-color);
}

.iconmain2 {
  color: var(--primary-color);
}

.subtitle {
  font-family: 'Sofia Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  margin-top: 5px;
  margin-bottom: 15px;
  color: var(--text-color);

}

.description {
  font-family: 'Sofia Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--text-color);

}

.actions {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  cursor: pointer;
  margin-top: auto;
}

.actions:hover {
  color: var(--text-hover);
}

@media (max-width:900px) {
  .location-info {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .actions {
    padding-right: 3vw;
  }
  .weather-info {
    order: 3;
  }

}

.texto {
  font-family: 'Sofia Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  top: -5%;
}

.texto:hover {
  color: #FFDDBB;

}

.action-button:hover {
  background: var(--background-color);
  color: var(--primary-dark2);
  /* Cambiar el color del texto al hacer hover */
  transition: color 0.3s ease;
}

.Left-Info {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--background-color);
  gap: 5px;
}

.Right-Info {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--background-color);
  border-top: 1px solid var(--background-color);
  gap: 5px;
}

.Key-Info {
  border-bottom: 1px solid var(--background-color);
  border-top: 1px solid var(--background-color);
}

.Left-Info h1,
.Right-Info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.15px;
  /* Redondeamos el valor */
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--text-color);
  margin: 5px;
  padding-left: 5px;
}

.Key-Info h1 {
  font-family: 'Playfair Display';
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.15000000596046448px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--text-color);
  margin: 5px;
  padding-left: 5px;
}

.Left-Info span:first-child {
  display: flex;
  border-bottom: 1px solid var(--background-color);
  justify-content: space-between;
  padding-right: 5px;
  flex-wrap: wrap;
}

.Left-Info span {
  border-bottom: 1px solid var(--background-color);
}

.Left-Info span:first-child p {
  margin: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 5px;
}

.Left-Info span:first-child i {
  margin: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 5px;
}

.Right-Info span,
.Key-Info span {
  border-bottom: 1px solid var(--background-color);
}

.Left-Info h2,
.Right-Info h2 {
  color: var(--text-color);
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  display: flex;
  margin: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
}

.Left-Info p {
  margin: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
}

.custom-hr2 {
  border: 0;
  max-height: 1px;
  min-height: 1px;
  background: var(--background-color);
}

.Superior-r {
  display: flex;
  justify-content: space-between;
}

.Superior-r h1,
.Inferior-r h1 {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  color: var(--text-color);
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.Superior-r h2,
.Inferior-r h2 {
  font-size: 22px;
  color: var(--text-color);

}

.Right-Info span:last-child {
  border: none;
}



.Indicadores {
  display: flex;
  /* Distribuye los elementos en fila */
  justify-content: space-between;
  /* Espaciado uniforme */
  align-items: center;
  /* Centra verticalmente */
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 93%;
  /* Asegura que ocupe todo el ancho */
  box-sizing: border-box;
}

.Iconos_texto {
  display: flex;
  flex-direction: column;
  /* Apila íconos y texto verticalmente */
  align-items: center;

}

@media(max-width:420px) {

  .Left-Info span:first-child,
  .Right-Info span:first-child {
    height: 60px;
  }
}

.Iconos_texto .Texto {
  color: var(--text-color);
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}


.Iconos_texto .Icono {
  color: var(--icon-color)
}

.Iconos_texto .Subtexto {
  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--text-color-subtext);
  /* Color más claro para subtítulo */
  margin-top: 2px;
  position: relative;
}

.boxPrinci {
  gap: 30px;
}


@media (max-width: 1450px) {
  .boxPrinci {
    gap: 18px;
  }

  .Iconos_texto {
    align-items: center;
  }

  .Iconos_texto .Texto {
    top: 0px;
    left: 0px;
    text-align: center;
  }

  .Iconos_texto .Subtexto {
    top: 0px;
    left: 0px;
    text-align: center;
  }
}

.Abajo {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--background-color);
  border-top: 1px solid var(--background-color);
  min-height: 5vh;
  padding: 5px;
  padding-left: 50px;
  align-items: center;
}

.Abajo2 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--background-color);
  padding: 5px;
  min-height: 5vh;

  padding-left: 50px;
  align-items: center;
  display: none;
}

.Contenedor-texto {
  display: flex;
  gap: 5px;
  align-items: center;
}

.Subtexto {
  color: var(--text-color);

  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.Texto {
  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--text-color-subtext);
  /* Color más claro para subtítulo */
}

.linea-vertical {
  border-left: 1px solid var(--background-color);
  /* Ajusta el color y el grosor de la línea vertical */
  height: 100%;
  /* Ajusta la altura de la línea vertical */
  align-items: center;
  width: 1px;
  height: 35px;
}

.Espacio-vacio {
  visibility: hidden;
  /* Hace que el div sea invisible pero ocupe espacio */
  width: 80px;
  /* Define el tamaño del espacio vacío */
  height: 100%;
  /* Asegura que ocupe toda la altura del contenedor */
}

.mapa {
  height: 54.54vh;
}

.fondocategoria {
  background-color: var(--background-color-alternative);
  background: var(--background-color-alternative);
  padding: 0;
  /* Sin padding por defecto */
  transition: padding 0.3s ease;
  /* Transición suave */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  

}

.fondocategoria:has(.cardCategorias) {
  padding-top: 0.2%;
  padding-bottom: 0.2%;
}

.Boton-Filtro {
  position: absolute;
  top: 20px;
  right: 1.9%;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* Centra verticalmente */
  gap: 8px;
  /* Espacio entre texto e ícono */
  background-color: var(--primary-color);
  padding: 6px 10px;
  border-radius: 8px;
}

.Boton-Filtro:hover {
  background-color: var(--secondary-color);
}

.Boton-Filtro:hover h2 {
  color: var(--text-color-dark);
}

.Boton-Filtro i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
}

.Boton-Filtro h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--text-color);
  margin: 0;
  /* Muy importante */
}

.Boton-Filtro:hover svg path {
  fill: var(--secondary-color);
  /* Cambia el color de los elementos path dentro del svg */
}

@media(max-width:868px) {
  .Boton-Filtro {
    height: min-content;
    width: min-content;
  }

  .Boton-Filtro h2 {
    display: none;
  }

  .fondocategoria{
    grid-template-columns: repeat(1, 1fr);
  }
}

@media(max-width:500px) {
  .Boton-Filtro {
    left: 30px;
    top: 70px;
  }

  .gps-button {
    position: absolute;
    left: 60px;
    top: 46px;

  }


}

/* FilterModal Styles */
.modalBackground {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.modalView {
  width: 25%;
  max-width: 500px;
  height: min-content;
  background-color: var(--background-color);
  border-radius: 20px;
  padding: 0px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modalTitle {
  display: flex;
  align-self: flex-start;
  justify-content: center;
  padding: 25px 25px 15px 25px;
  align-items: center;
  gap: 5px;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--divider)
}

.modalTitle h2,
p {
  margin: 0;
  padding: 0;
}

.modalTitle h2 {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0px;
  color: var(--text-color-dark);
}

.closeButton {
  position: absolute;
  top: 5.5%;
  right: 3.5%;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}


.fondofiltro {
  padding-top: 20px;
  width: 100%;
  /* Asegura que ocupe todo el ancho disponible */
}

.filtersContainer {
  display: flex;
  padding-left: 30px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  /* Asegura que ocupe todo el ancho disponible */
}

.filtersContainer strong{
  color: var(--primary-color);
  cursor: pointer;
}

.filtersContainer strong:hover{
  color: var(--primary-dark);
}

.flecha-filtros {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-right: 20px;
  padding-bottom: 20px;

}

.flecha-filtros i {
  cursor: pointer;
}

.flecha-filtros i,
.flecha-filtros svg,
button {
  user-select: none;
  /* Evita que se seleccione el texto */
}

.filterLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

.filterLabel input {
  display: none;
}

.customCheckbox {
  width: 20px;
  height: 20px;
  border: 2px solid #40484C;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.filterLabel input:checked+.customCheckbox {
  background-color: var(--primary-color);
}

.filterLabel input:checked+.customCheckbox::after {
  content: "✔";
  color: var(--background-color);
  font-size: 14px;
}


.filterLabel h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: var(--text-color-dark);
}

.fondofiltrobuton {
  display: flex;
  justify-content: center;
}

.filterButtonSelected {
  background-color: var(--primary-color);
  color: var(--background-color);
}

.applyButton {
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: var(--divider);
  color: var(--background-color);
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.applyButton:hover {
  background-color: var(--divider-dark);
}

@media(max-width: 768px) {
  .modalView {
    height: 70%;
    width: 60%;
  }
}

.cardCategorias {
  background-color: var(--background-color);
  border-radius: 8px;
  border: 1px solid var(--divider);
  padding: 25px 20px;
  margin: 1vw 2vh;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}


.filterTitleContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 10px;
}

.titleAndQuantityContainer {
  display: flex;
  align-items: center;
  flex: 1;
}

.cardTitle {
  font-family: "Sofia Sans", sans-serif;
  font-size: 20px;
  margin-right: 10px;
}

.filterQuantityContainer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.filterQuantityText {
  font-family: "Sofia Sans", sans-serif;
  font-size: 14px;
  color: var(--primary-ultra-dark);
}

.iconContainer {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--background-color);
}

.cardContent {
  margin-top: 10px;
}

.Fondo-Market {
  padding: 5vh 0 5vh 5vw;

  /* top right bottom left */
}

.Estructura-Market {
  display: flex;
  padding-bottom: 20px;
}

.Caja-marketplace {
  display: flex;
  flex-direction: column;
  width: 345px;
  height: 400px;
  padding-right: 5vw;
  margin: 0 auto;
}

.titulo-marketplace {
  font-family: 'Playfair Display', serif;
  /* Asegúrate de que Playfair Display esté importada */
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.linea-marketplace {
  width: 80px;
  /* Ancho de la línea */
  border: none;
  /* Elimina el borde predeterminado */
  border-top: 2px solid var(--divider-dark);
  /* Añade una línea superior con un grosor de 2px y color negro */
  padding-bottom: 20px;
  /* Espaciado superior e inferior */
}

.Descripcion-marketplace {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
  color: var(--third-color);
  padding-bottom: 100px;
}

.Boton-marketplace {
  width: 165px;
  height: Hug (56px)px;
  padding: 15px 20px 15px 20px;
  gap: 10px;
  border-radius: 10px 0px 0px 0px;
  opacity: 0px;
  border-radius: 10PX;
  background-color: var(--button-color);
  font-family: Sofia Sans;
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
  cursor: pointer;
}

.Boton-marketplace:hover {
  background: var(--button-color-hover);
}

.BotonCarta-marketplace {
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 10%;
}

.BotonCarta-marketplace2 {
  display: flex;
  position: absolute;
  display: none;

}

@media(max-width:768px) {
  .Descripcion-marketplace {
    padding-bottom: 20px;
  }

  .Caja-marketplace {
    height: auto;
    padding-bottom: 60px;
  }

  .BotonCarta-marketplace {
    display: none;
  }

  .BotonCarta-marketplace2 {
    display: flex;
    top: 100%;
  }
}

.Linea-divisora {
  border-top: 1px solid #ddd;
  padding-left: 30px;
  width: 100%;
  height: 100%
}

.Siguenos {
  display: inline-flex;
  /* Evita que el texto se divida */
  white-space: nowrap;
  /* Asegura que todo el texto esté en una sola línea */
  display: flex;
  width: 59px;
  height: 16px;
  gap: 0px;
  opacity: 0px;
  font-family: 'Sofia Sans Condensed', sans-serif;
  /* Asegúrate de que la fuente esté correctamente importada */
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  position: relative;
  right: 18%;
  top: 20px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--primary-color);
}

.footer1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 400px;
  height: 100%;
  padding-right: 20px;
}

.footer2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid #ddd;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
  gap: 20px;
  border-bottom: 1px solid #ddd;
}

@media(max-width:798px) {
  .footer1 {
    display: flex;
    flex-direction: row;
    padding-right: 50px;
  }

  .Siguenos {
    position: relative;
    top: -0px;
    right: -20px;
  }

  .footer2 {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media(max-width:600px) {
  .footer1 {
    display: flex;
    flex-direction: column;
    padding-right: 50px;
  }

  .Siguenos {
    position: relative;
    top: 20px;
    right: 18%;
    padding-bottom: 20px;
  }
}

.EnlacesFooter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columnas de igual ancho */
  gap: 60px;
  /* Espacio entre las celdas */
  justify-content: start;
  text-align: center;
  flex: 1;

}

@media(max-width:400px) {
  .EnlacesFooter {
    grid-template-columns: repeat(2, 1fr);
  }
}

.Linea-verticalfooter {
  border-left: 1px solid #ddd;

}

.Titulos {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  flex: 1;
  cursor: pointer;
  /* Para indicar que es interactivo */
  color: var(--theme-wtb-sys-light-on-background, #171C1F);
  transition: color 0.3s ease;
}

.Titulos:hover {
  color: #007BFF;
  /* Cambia solo el color del texto */
}

.Titulo-container {
  display: grid;
  grid-template-columns: repeat(1fr, 3);
  gap: 41px;
  justify-content: start;
  text-align: center;
  flex: 1;
  height: 100%;
  /* Asegura que el grid se expanda al height total del contenedor */
}

.Subtitulo {
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #70787D;
  cursor: pointer;
  transition: color 0.3s ease;
}

.Subtitulo:hover {
  color: #004085;
  /* Cambia solo el color del texto */
}

.Texto-Debajo {
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

/* Carousel.css */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.carousel {
  align-items: left;
  justify-content: left;
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease-in-out;
  height: 444px;
  /* Ajusta según tus necesidades */

  position: relative;
  width: 100% auto;
  margin: 0 auto;
  overflow: hidden;
}

.card {
  border-radius: 8px;
  border: 1px solid #ecf2f3;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
  min-width: 33.33%;
  max-width: 33.33%;
  flex: 0 0 33.33%;
  box-sizing: border-box;
  padding: 0px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.fotoCarta {
  width: 100%;
  height: 60%;

  position: relative;
  overflow: hidden;
  border-top-left-radius: 5px;
  /* Añade esquinas redondeadas superiores */
  border-top-right-radius: 5px;

}

.fotoCarta img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Asegura que la imagen cubra el contenedor sin distorsionarse */

}

.nav-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.nav-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.Cartas-marketplace {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.LikeCarta {
  position: absolute;
  display: inline-block;
  right: 3%;
  top: 3%
}

.like-container {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.liked {
  transform: scale(1.2);
  opacity: 1;
}

.like-container:not(.liked) {
  transform: scale(1);
  opacity: 0.8;
}

.LikeCarta:hover .like-container {
  transform: scale(1.1);
  opacity: 1;
}

.PersonaCarta {
  display: flex;
  gap: 6px;
}

.AvatarCarta {

  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: blue;


}

.DescriptCarta {
  display: flex;
  flex-direction: column;

  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  padding: 15px 20px 36px 20px;
  gap: 10px;
  opacity: 0px;


}

.PrecioCarta {

  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.LugarCarta {

  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.BotonesCarta {
  display: flex;
  justify-content: flex-end;
  font-family: 'Sofia Sans';
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--primary-color);
  gap: 5px;



}

.NombresCategoriaContainer {
  display: flex;
  border-bottom: 1px solid #c0c8cc;
  padding-bottom: 10px;
  margin-top: 10px;
  justify-content: space-between;

}

.NombresCategoria {
  position: relative;
  display: flex;
  left: 1%;
  justify-content: space-between;

  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.DirecciónCategoria {
  position: relative;
  display: flex;
  right: 1%;
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

@media(min-width:800px) {
  .adressdisplay {
    display: none;
  }
}

@media(max-width:800px) {
  .NombresCategoriaContainer {
    display: flex;
    flex-direction: column;
  }

  .DireccinCategoria {
    right: -1%;
  }
  .NombresCategoria{
    display: flex;
    justify-content: left;
  }

}

@media (max-width:859px) {
  .EnlacesFooter {
    margin-top: 40px;
    align-items: center;
  }

  .Titulo-container {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 !important;
  }

  .Titulo-container .Titulos {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
  }

  .Linea-verticalfooter {
    display: none;
  }
}

@media (max-width: 400px) {
  .Fondo {
    padding: 5vh 0 0 0;
    ;
  }

  .Contenedor-texto {
    display: table-column;
  }
}

@media (max-width: 768px) {

  .Abajo {
    padding-left: 20px;
  }

  .linea-vertical {
    height: auto;
  }

  .Abajo2 {
    display: flex;
    padding-left: 20px;
  }

  .Se-esconde {
    display: none;
  }

  .Espacio-vacio {
    width: 0px;
  }

  .Indicadores {
    padding-left: 10px;
  }

  .mapa {
    height: 100vh;
  }

  .text {
    font-size: 14px;
  }

  .button {
    padding: 3px;
    gap: 2px;
  }

  .button-text {
    font-size: 14px;
  }

  .weather-info,
  .location-info {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .weather-info,
  .location-info {
    align-items: center;
  }


}

@media (max-width: 1500px) {
  .Cartas-marketplace {
    width: 85%;
    /* Reduce el ancho en pantallas medianas */
  }

  .card {
    min-width: 35%;
    max-width: 35%;
    flex: 0 0 35%;
  }

  .Caja-marketplace {
    padding-right: 1vw;
  }


}

/* Estilos responsive */
@media (max-width: 1300px) {
  .Cartas-marketplace {
    width: 80%;
    /* Reduce el ancho en pantallas medianas */
  }

  .Caja-marketplace {
    padding-right: 1vw;
  }


}

@media (max-width: 1200px) {
  .Cartas-marketplace {
    width: 70%;
    /* Reduce aún más el ancho en pantallas más pequeñas */
  }

}

@media(max-width:900px) {
  .card {
    max-width: 50%;
    min-width: 50%;
    flex: 0 0 50%;
  }

  .BotonesCarta {
    display: flex;
    flex-direction: column;
  }

  .Fondo-Market {
    padding: 10px 10px;
  }
}

@media (max-width: 768px) {
  .Cartas-marketplace {
    width: 60%;
    /* Ajusta el ancho para tablets */
  }

  .Boton-marketplace {
    margin: 0 auto;
  }


  .Caja-marketplace {
    padding-right: 1vw;
  }



  .carousel-container {
    transform: translateX(0);
    /* Asegura que el carrusel no se desplace fuera de vista */
  }


}

@media (max-width: 576px) {
  .Cartas-marketplace {
    margin-top: -50px;
    width: 100%;
    padding-bottom: 30px;
    /* Ocupa el ancho completo en pantallas pequeñas */
  }

  .card {
    min-width: 70%;
    max-width: 70%;
    flex: 0 0 70%;
  }

  .BotonesCarta {
    display: flex;
    flex-direction: row;
  }

  .Estructura-Market {
    flex-direction: column;
    /* Cambia la dirección del layout a columna */
    align-items: center;
    /* Centra los elementos dentro del contenedor */
  }

  .Caja-marketplace {
    width: 100%;
    /* Asegura que la caja ocupe todo el ancho disponible */
  }

  .carousel {
    transform: translateX(0);

    /* Asegúrate de que el carrusel no se mueva fuera de vista */
  }

  .BotonCarta-marketplace {
    position: relative;
    top: 520px;
    right: 50%;
    z-index: 2;

  }

}

.tagsCarta {
  display: flex;
  justify-content: flex-start;
  gap: 10px;

}

.tagCarta {
  padding: 2px 10px;
  border-radius: 5px;
  background-color: #FFDDBB;
  color: #2B1700;
  display: flex;
  align-items: center;
  font-family: 'Sofia Sans';
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.1);
  /* Fondo semi-transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  /* Habilitar interacción con el modal */
}

.modal-KeyIndicators {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  width: 400px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Estilo para el header */
.modal-KeyIndicators span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-KeyIndicators h1 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color-dark);
  margin: 0;
}

.modal-KeyIndicators h2 {
  color: var(--text-color-dark);
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.modal-indicators {
  display: flex;
  flex-direction: column;
  font-family: '';
  gap: 10px;
  margin-top: 20px;
  overflow-y: auto;
  max-height: 300px;
  /* Ajusta la altura máxima según sea necesario */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE y Edge */
}

.modal-indicators::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari y Opera */
}

.indicator-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid #ccc;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.indicator-row-value {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color-dark);

}

/* Línea separadora */
.modal-KeyIndicators hr {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 10px 0 20px;
  width: 14%;
}

/* Botón guardar */
.modal-KeyIndicators .indicators {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 24px;
  gap: 20px;
}

.modal-KeyIndicators .iconCotent {
  width: 90px;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 5px;
  margin-right: 5px;
}

.modal-KeyIndicators .iconText {
  color: var(--text-color-dark);
  margin-left: 5px;
  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 400;
}

.modal-KeyIndicators .iconSubText {
  color: var(--text-color-dark);
  font-family: Sofia Sans Condensed;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .modal-KeyIndicators {
    width: 300px;
  }
}

@media (max-width: 576px) {
  .modal-KeyIndicators {
    width: 250px;
  }
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  position: relative;
  pointer-events: auto;
  padding-bottom: 20px;
  /* Habilitar solo el contenido del modal */
}

.REPUTACION {
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;

}

.REPUTACION h2 {
  color: #000;
  display: flex;
  text-align: center;
  justify-content: center;
}

.estrellas-modal {
  display: flex;
  text-align: center;
  justify-content: center;
  position: relative;
  top: -10px;
}

.estrellas-princi {
  display: flex;
  padding-left: 10px;
  padding-bottom: 7px;
}

.modal-content button {
  border: none;
  /* Elimina el borde predeterminado */
  border: 1px solid #0D6681;
  /* Añade el borde con el color especificado */
  border-radius: 5px;
  /* Añade el radio del borde */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  cursor: pointer;
  width: 222px;
  height: 42px;
}

.modal-content button p {
  margin: 0;
  /* Elimina márgenes por defecto */
  padding: 0;
  /* Elimina padding por defecto */
}

.modal-content button h3 {
  margin: 0;
  /* Elimina márgenes por defecto */
  padding: 0;
  /* Elimina padding por defecto */
}

.modal-content span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.modal-content span h2 {
  position: relative;
  top: 8px;
  margin: 0;
}


.modal-content span h3 {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #0D6681;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.modal-content h1 {
  color: #000;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding-top: 5px;
  position: relative;
  top: 3px;

}

.modal-content span p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: -5px;
  top: -2px;
  margin: 0;

}

.modal-content hr {
  border-bottom: 1px solid #C0C8CC;
}

.icon-container {
  display: inline-block;
  transition: transform 0.3s ease, fill 0.3s ease;
  /* Añade una transición suave */
}

.icon-container:hover {
  transform: scale(1.1);
  /* Agranda el icono ligeramente */
}

.icon-container:hover svg path {
  fill: #FFD700;
  /* Cambia el color de relleno al pasar el mouse */
}

.star-rating {
  display: flex;
  gap: 8px;
  /* Espaciado entre las estrellas */
  align-items: center;
}

.star-rating2 {
  display: flex;
  gap: 0px;
  /* Espaciado entre las estrellas */
  align-items: center;
}

.icon-container {
  display: inline-block;
}

.action-item {
  display: flex;
  align-items: center;
  align-self: flex-end;
  /* Alinea ícono y texto verticalmente */
  gap: 8px;
  /* Espaciado entre el ícono y el texto */
}

/* Hover en el contenedor afecta a ambos elementos */
.action-item:hover .texto {
  color: #FFDDBB;
  /* Cambia el color del texto en hover */
}

.action-item2 {
  display: flex;
  align-items: center;
  /* Alinea ícono y texto verticalmente */
  gap: 8px;
  /* Espaciado entre el ícono y el texto */
  opacity: 0.4;
  /* Transparencia baja para el texto también */
  cursor: not-allowed;
}

.texto2 {
  font-family: 'Sofia Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  top: -5%;

}

.FondoPlan {
  background-color: #0D6681;
  padding: 0px 10vw 0px 10vw;
  display: flex;
  flex-direction: row;
  gap: 200px auto;
  padding-bottom: 40px;
  flex-wrap: wrap;
}

@media(max-width: 800px) {
  .FondoPlan {
    gap: 10px;
  }
}

.left-plan {
  flex: 1;
  padding-top: 50px;
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.left-plan h1 {
  font-family: 'Playfair Display';
  font-size: 62px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
  margin: 0;
  /* Elimina márgenes por defecto */
  padding: 0;
  /* Elimina padding por defecto */

}

.left-plan p {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.left-plan hr {
  border: 1px solid #FFFFFF;
  width: 100px;
  display: block;
  position: relative;
  /* Asegura que el <hr> se comporte como un bloque */
  text-align: left;
  /* Alinea el <hr> a la izquierda */
  margin: 0;
  /* Elimina márgenes por defecto */
  padding: 0;
  /* Elimina padding por defecto */
  top: -15px;
}

.right-plan {
  flex: 1;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}




.cards-plan {
  display: grid;
  /* Usamos grid para el contenedor */
  grid-template-columns: repeat(3, 1fr);
  /* Tres columnas de igual tamaño */
  gap: 20px;
  /* Espaciado entre las cartas */
  padding: 0px 20px;
  /* Paddings laterales del contenedor */
  box-sizing: border-box;
  /* Asegura que el padding no afecte el tamaño total */
  padding: 0px 10vw 0px 10vw;
  position: relative;
  top: -30px;
  flex-wrap: wrap;
}

.card-plan {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 25px;
  height: 550px auto;
  gap: 15px;
  border: 1px solid #ECF2F3;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  box-shadow: 5px 5px #97DCEB,
    0 -5px #EE9300;
}

.card-plan h1,
h2,
h3,
p {
  padding: 0px;
  margin: 0px;
}

.card-plan h1 {
  font-family: 'Sofia Sans', Condensed;
  font-size: 34px;
  font-weight: 600;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.card-plan h2 {
  font-family: 'Sofia Sans';
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;

}

.card-plan button {
  background-color: #FABA73;
  border: none;
  display: flex;
  width: 100%;
  /* Asegura que el botón ocupe todo el ancho del contenedor */
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  box-shadow: 4px 4px 0px 0px #00000073;
  height: 60px;
}

.card-plan button p {
  font-family: 'Sofia Sans', Condensed;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.card-plan p {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.card-plan span p {
  padding-bottom: 15px;
}

.card-plan span {
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Aumentamos el padding-right solo para el span */
}

.card-plan h3 {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
  padding: 0px;
  margin: 0px;
}

/* Efecto al hacer hover (opcional) */
.card-plan:hover {
  transform: translateY(-5px);
  /* Efecto de hover para elevar la carta */
}

.iconoytexto-plan {
  display: flex;
  flex-direction: column;
}

.iconoytextofe {
  display: flex;
  gap: 5px;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 1200px) {
  .cards-plan {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columnas en pantallas medianas */
  }
}

@media (max-width: 800px) {
  .cards-plan {
    grid-template-columns: 1fr;
    /* 1 columna en pantallas pequeñas */
  }

  .card-plan {
    height: auto;
    /* Dejar que la altura de las cartas se ajuste al contenido */
  }
}

/* Seccion Planificador de viajes */
.arriba-planificador {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0 30vw;
  /* Márgenes a los costados (izquierda y derecha) */
}

.arriba-planificador h1,
h2,
h3,
p {
  margin: 10px;
  padding: 0;
}

.arriba-planificador h1 {
  font-family: 'Playfair Display';
  font-size: 62px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.25px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

@media(max-width:768px) {
  .arriba-planificador h1 {
    font-size: 32px;
  }

  .arriba-planificador {
    margin: 0 20px;
  }
}

.arriba-planificador p {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.arriba-planificador hr {
  border: 1px solid #171C1F;
  width: 15%;
}

.abajo-planificador {
  display: flex;
  flex-direction: row;
  padding: 40px 40px;
  gap: 40px;
  height: auto;
  flex-wrap: wrap;
}

.left-planificador {
  flex: 3;
  height: 568px;
}

.right-planificador {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* Opcional, para centrar verticalmente */
  background-color: #f5f5f5;
  /* Fondo opcional */
}

.custom-image {
  width: 100%;
  height: 100%;

}

.cards-planificador {
  border: 1px solid #ECF2F3;
  min-height: 116px;
  height: 116px auto;
  border-radius: 10px;
  background-color: #F5FAFB;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
}

@media(min-width:1500px) {
  .cards-planificador {
    max-height: 116px;
  }
}


.left-p {
  display: flex;
  flex: 1;
  justify-content: center;
}

.right-p {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 4;
  margin: 0;
  padding: 0;
}

.right-p h1 {
  font-family: 'Playfair Display';
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 0;
  padding: 0;
  position: relative;
  top: -6px;
}

.right-p p {
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 0;
  padding: 0;
  position: relative;
  top: -10px;
}

/* Para pantallas medianas (tablets) */
@media (max-width: 1024px) {
  .abajo-planificador {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }

  .left-planificador {
    order: 1;
    /* Mueve la imagen debajo de los elementos */
    width: 100%;
  }

  .right-planificador {
    order: 2;
  }

  .custom-image {
    height: 300px;
    /* Reduce la altura de la imagen */
  }

  .cards-planificador {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
  }

}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {

  .custom-image {
    height: 200px;
    /* Ajusta la altura aún más para móviles */
  }

}

.fondo-opinion {
  padding: 1vh 5vw 1vh 5vw;
  background-color: #F5FAFB;
}

.arriba-opinion {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Esto asegura que los elementos comiencen desde arriba */
  align-items: flex-start;
  /* Alinea todo a la izquierda */
  margin: 0;
  /* Elimina márgenes externos */
  padding: 0;
  /* Elimina rellenos internos */
  padding-top: 20px;
  padding-bottom: 40px;
}

.arriba-opinion hr {
  border: 1px solid #000;
  width: 80px;
  margin: 0;
}

.arriba-opinion h1 {
  font-family: 'Playfair Display';
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 0px;
  padding-bottom: 16px;
}

/* App.css */

/* Contenedor principal */
.carousel-container3 {
  width: 100%;
  margin: 0 auto;
}

/* Estilos de las cartas */
.carousel-card3 {
  padding: 30px;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  text-align: left;
  height: auto;
  margin: 16px;
  /* Aseguramos que las cartas tengan un ancho fijo */
  width: 100% auto;
  box-sizing: border-box;
}

/* Estilos de las estrellas */
.carousel-stars3 {
  display: flex;
  gap: 4px;
  color: #facc15;
  padding-bottom: 10px;
  /* Amarillo para estrellas */
}

/* Estilo del encabezado de la carta */
.carousel-header3 {
  font-weight: bold;
  margin-top: 10px;
  font-family: 'Sofia Sans';
  font-size: 22px;
  font-weight: 700;
  line-height: 26.4px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
  margin: 0;
  padding-bottom: 10px;

}

.carousel-card3 p {

  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
  margin: 0;
}

/* Estilo de la sección de usuario */
.carousel-user3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;

}

/* Estilo para la imagen del usuario */
.carousel-user3 img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}


.opiniones .slick-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.opiniones .slick-list {
  display: flex;
  justify-content: center;

  padding: 0px 5px;
}

.opiniones .slick-track {
  display: flex;
  justify-content: space-between;

}


.opiniones .slick-slide>div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  margin: 0px -15px;
}

.carousel-buttons button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.carousel-buttons {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.checklist {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 20px;
}

.checks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 20px;
}

.checklist h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0;

}

.checkviaje {
  display: flex;

}

.butonnew {
  border: none;
  border: 1px solid #0D6681;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  cursor: pointer;
  width: 100%;
  height: 42px;
  background-color: #fff;
  gap: 6px;

}

.butonnew h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  color: #0D6681;
}

.fondo-botones {
  display: flex;
  padding: 15px;
  width: 100%;
  flex-direction: column;
  /* Asegura que los elementos estén en columna */
  align-items: flex-start;
  /* Centra los elementos horizontalmente */
  max-width: 274px;
  /* Ajusta según el tamaño del modal */
  text-align: left;
}

.fondo-botones span {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 5px;
  padding-bottom: 40px;
}

.fondo-botones span h3 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #171D1E;
  margin: 0;
  padding: 0;
}

.fondo-botones span input {
  display: flex;
  width: 100%;
  max-width: 100%;
  /* Evita que el input crezca más allá de su contenedor */
  box-sizing: border-box;
  /* Asegura que padding y border no afecten el tamaño total */
  border: none;
  border: 1px solid #C0C8CC;
  border-radius: 8px;
  height: 54px;
  text-indent: 5px;
}

.fondo-botones span input::placeholder {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;
}

.modal-agregarviaje {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.carta-agregarviaje {
  background: white;
  border-radius: 10px;
  width: 304px;
  box-sizing: border-box;
  text-align: center;
  height: auto;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.carta-agregarviaje h2 {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #000;
  margin: 20px;
}

.boton-agregarviaje {
  position: absolute;
  top: 15px;
  right: 15px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

.boton-expandible {
  border: none;
  border: 1px solid #C0C8CC;
  border-radius: 8px;
  height: 54px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.boton-expandible h1 {
  color: #757575;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
}

.boton-expandible2 {
  border: none;
  border: 1px solid #C0C8CC;
  border-top: none;
  border-radius: 8px;
  height: 54px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  top: -5px;
}

.boton-expandible2 h1 {
  color: #757575;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
}

.botones-inferior {
  display: flex;
  gap: 20px;
  box-sizing: border-box;
}

.botones-inferior button {
  width: 127px;
  height: 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}

.botones-inferior button h2 {
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
}

.boton-celeste {
  background-color: #BBE9FF;
}

.boton-azul {
  background-color: #0D6681;
}

.boton-azul h2 {
  color: #fff;
}


.FondoAzul {
  background-color: var(--primary-color);
  height: auto;
  width: 100%;
  padding: 5vh 5vw 5vh 5vw;
  padding-bottom: 4%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Define un grid de 2 columnas de igual ancho */
  box-sizing: border-box;
  gap: 10vw;
}

.Linea-divisora2 {
  height: 1px;
  /* Altura de la línea */
  background-color: #C0C8CC;
  /* Color de la línea */
  border: none;
  /* Sin bordes */
  margin: 0 4vw;
  /* Espaciado derecho e izquierdo */
  width: auto;
  /* Asegura que la línea se ajuste al contenedor menos los márgenes */

}

.Descripcion {
  width: 40vw;
}

.Texto h1 {
  font-family: 'Playfair Display', serif;
  /* Asegúrate de que Playfair Display esté importada */
  font-size: 62px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFF;
}

.Texto p {
  font-family: 'Sofia Sans', sans-serif;
  /* Asegúrate de que Sofia Sans esté importada */
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
  padding: 0;
}

.Imagen {
  display: flex;
}

.Linea {
  position: relative;
  width: 85px;
  height: 1px;
  top: -25px;
  background-color: #FFFFFF;
  /* Define el color de fondo de la línea */
  border: none;
  /* Elimina cualquier borde */
}

@media (max-width: 1300px) {
  .FondoAzul {

    gap: 0px;
  }
}

@media (max-width: 1100px) {
  .FondoAzul {
    grid-template-columns: 1fr;
  }

  .Descripcion {
    text-align: center;
    /* Centra el texto en pantallas pequeñas */
    width: 100%;
  }

  .Imagen {
    justify-content: center;
    /* Centra la imagen en pantallas pequeñas */

  }
}

@media (max-width: 620px) {
  .Imagen svg {
    width: 80%;
    /* Reduce el tamaño de la imagen */
    max-width: 500px;
    /* Limita el tamaño máximo */
  }

  .FondoAzul {
    padding-bottom: 0%;
  }
}

.Estructura-Foro {

  display: flex;
  padding: 5vh 5vw 5vh 5vw;
}


.Caja-foro {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 345px;
  height: 400px;
  margin: 0 auto;
  padding-right: 8vw;
}

.titulo-foro {
  font-family: 'Playfair Display', serif;
  /* Asegúrate de que Playfair Display esté importada */
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.linea-foro {
  width: 80px;
  /* Ancho de la línea */
  border: none;
  /* Elimina el borde predeterminado */
  border-top: 2px solid #000;
  /* Añade una línea superior con un grosor de 2px y color negro */
  padding-bottom: 20px;
  /* Espaciado superior e inferior */
}

.Descripcion-foro {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
  color: #555;
  padding-bottom: 100px;
}

.Boton-foro {
  width: 165px;
  height: Hug (56px)px;
  padding: 15px 20px 15px 20px;
  gap: 10px;
  border-radius: 10px 0px 0px 0px;
  opacity: 0px;
  border-radius: 10PX;
  background-color: #EE9300;
  font-family: Sofia Sans;
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
  cursor: pointer;
}

.Boton-foro:hover {
  background: #845415;
}

.Cartas-foro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Define un grid de 2 columnas de igual ancho */
  grid-auto-rows: minmax(186px, auto);
  /* Asegura una altura mínima, pero permite crecer si es necesario */
  justify-content: center;
  align-items: start;
  /* Alinea los elementos al inicio de la celda */
  row-gap: 30px;
  /* Espaciado vertical entre filas */
  column-gap: 20px;
  /* Espaciado horizontal entre columnas */
  max-width: 60vw;
  width: 100%;
  /* Ajusta el ancho del contenedor */
}

.caja-foro {
  display: flex;
  /* Flexbox para alinear contenido interno */
  flex-direction: column;
  /* Asegura alineación vertical */
  justify-content: space-between;
  /* Distribuye el contenido de manera uniforme */
  align-self: stretch;
  /* Estira cada caja para que coincida con la altura de la fila */
  width: 100%;
  /* Ajusta al tamaño disponible en el grid */
  min-height: 186px;
  /* Altura mínima */
  border-radius: 10px;
  /* Bordes redondeados */
  background-color: #FFF;
  /* Fondo blanco */
  border: 1px solid #f5f5f5;
  /* Borde de color #f5f5f5 */
  padding-left: 20px;
  /* Margen interno uniforme */
  padding-right: 50px;
  padding-top: 15px;
  box-sizing: border-box;
  /* Incluye padding y bordes en las dimensiones */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra hacia abajo y a los lados */
}


/* Estilo para h2 */
.caja-foro h2 {
  font-family: 'Sofia Sans Condensed', sans-serif;
  /* Fuente para h2 */
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-bottom: 10px;
  /* Espaciado inferior */
  color: #0D6681;

}

/* Estilo para p */
.caja-foro p {
  font-family: 'Sofia Sans', sans-serif;
  /* Fuente para p */
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-bottom: 15px;
  /* Espaciado inferior para separar de otros elementos */
  color: #171D1E;
}

/* Estilo para el enlace "Ver más" */
.caja-foro .Vermas a {
  font-family: 'Sofia Sans', sans-serif;
  /* Fuente para "Ver más" */
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: right;
  position: relative;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #004D63;
  /* Color personalizado para el enlace */
  text-decoration: none;
  /* Elimina subrayado predeterminado */
  display: block;
  top: -80%;
}

.caja-foro .Vermas a:hover {
  color: #845415;
  /* Color al pasar el mouse */
  text-decoration: underline;
  /* Subrayado al pasar el mouse */
}


@media(max-width: 800px) {
  .Estructura-Foro {
    flex-direction: column;
    /* Cambia la dirección del contenedor principal a columna */
    align-items: center;
    /* Centra los elementos horizontalmente */
  }

  .Caja-foro {
    margin-bottom: 20px;
    /* Añade espacio entre la descripción de los foros y las cartas */
    padding-right: 0;
    /* Elimina padding lateral en pantallas pequeñas */
  }

  .Cartas-foro {
    width: 100%;
    /* Ocupa el ancho completo del contenedor */
    grid-template-columns: 1fr;
    /* Acomoda las cartas en una columna */
  }

  .caja-foro {
    margin: 10px auto;
    /* Centra las cartas y añade espacio entre ellas */
    width: 90%;
    /* Ajusta el ancho de las cartas en pantallas pequeñas */
  }

  .Boton-foro {
    margin: 0 auto;
  }

  .BotonCarta-foro {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: 10%;
  }

  .Boton-evento {
    margin: 0 auto;
  }

}

.Fondo-evento {
  padding: 5vh 5vw 5vh 5vw;
  height: auto;
  /* top right bottom left */
}

.Estructura-evento {
  display: flex;
  height: auto;
  box-sizing: border-box;
}

.Caja-evento {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 5vw;
  margin: 0 auto;
}

.titulo-evento {
  font-family: 'Playfair Display', serif;
  /* Asegúrate de que Playfair Display esté importada */
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.linea-evento {
  width: 80px;
  /* Ancho de la línea */
  border: none;
  /* Elimina el borde predeterminado */
  border-top: 2px solid #000;
  /* Añade una línea superior con un grosor de 2px y color negro */
  padding-bottom: 20px;
  /* Espaciado superior e inferior */
}

.Descripcion-evento {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
  color: #555;
  padding-bottom: 100px;
}

.DescriptCarta2 {
  display: flex;
  flex-direction: column;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  padding: 15px 20px 36px 20px;
  gap: 20px;
  opacity: 0px;
  flex: 1;

}

.BotonesCarta2 {
  display: flex;
  justify-content: flex-end;
  font-family: 'Sofia Sans';
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #004D63;
  gap: 4px;


}

.Boton-evento {
  width: 165px;
  height: Hug (56px)px;
  padding: 15px 20px 15px 20px;
  gap: 10px;
  border-radius: 10px 0px 0px 0px;
  opacity: 0px;
  border-radius: 10PX;
  background-color: #EE9300;
  font-family: Sofia Sans;
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
  cursor: pointer;
}

.Boton-evento:hover {
  background: #845415;
}

.BotonCarta-evento {
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 10%;
}

/* Carousel.css */
.Cartas-evento {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  /* Ancho inicial */
  margin: 0 auto;
  /* Centrar contenido */
  transition: width 0.3s ease-in-out;
  /* Transición suave en cambios de tamaño */
}

.carousel-evento {
  display: flex;
  align-items: left;
  justify-content: left;
  position: relative;
  width: 100% auto;
  margin: 0 auto;
  overflow: hidden;

}

.carouselevento {
  display: flex;
  transition: transform 0.3s ease-in-out;
  height: 490px;
  transform: translateX(0);
  /* Asegúrate de que no se mueva */
  /* Ajusta según tus necesidades */
}

.cardevento {
  border-radius: 8px;
  border: 1px solid #ecf2f3;
  margin: 0.5vw 2vh;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
  flex: 0 0 47%;
  /* Mostrar 3 cartas (100% / 3) */
  /* Parte de la derecha a la mitad */
  box-sizing: border-box;
  padding: 0px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.fotoCartaevento {
  width: 100%;
  height: 45%;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 5px;
  /* Añade esquinas redondeadas superiores */
  border-top-right-radius: 5px;

}

.fotoCartaevento img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  /* Asegura que la imagen cubra el contenedor sin distorsionarse */

}

.nav-buttonevento {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.nav-buttonevento:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.PersonaCarta {
  display: flex;
  gap: 6px;
}

.AvatarCarta {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: blue;
}

.LugarCartaevento {
  font-family: 'Sofia Sans', sans-serif;
  /* Fuente Sofia Sans */
  font-size: 18px;
  /* Tamaño de fuente */
  font-weight: 300;
  /* Grosor de fuente */
  line-height: 26px;
  /* Altura de línea */
  letter-spacing: 0.25px;
  /* Espaciado entre letras */
  text-align: left;
  /* Alineación del texto */
  text-underline-position: from-font;
  /* Posición de subrayado */
  text-decoration-skip-ink: none;
  /* Evita que el subrayado salte tinta */
  color: #171D1E;
  /* Color del texto (ajústalo según necesidad) */
  margin: 0;
  /* Elimina márgenes predeterminados */

}

.Atributos {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  padding: 15px;
  text-align: left;
  justify-content: flex-start;
}

.Atributo {
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  width: max-content;
  height: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
  display: flex;
  /* Añadido */
  align-items: center;
  /* Añadido */


}

.Atributo p {
  margin: 0;
  /* Elimina cualquier margen predeterminado del párrafo */
  padding-left: 5px;
  /* Añade un pequeño espacio entre el icono y el texto */
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000;

}

.Atributo:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Estilos responsive */
@media (max-width: 1300px) {
  .Cartas-evento {
    width: 80%;
    /* Reduce el ancho en pantallas medianas */
  }

  .cardevento {
    flex: 0 0 30%;
  }
}

@media (max-width: 1200px) {
  .Cartas-evento {
    width: 70%;
    /* Reduce aún más el ancho en pantallas más pequeñas */
  }

  .cardevento {
    flex: 0 0 25%;
  }

  .Atributo {
    height: 2px;
  }
}

@media (max-width: 768px) {
  .Cartas-evento {
    width: 60%;
    /* Ajusta el ancho para tablets */
  }



  .Caja-evento {
    padding-right: 1vw;
  }

  .Fondo-evento {
    padding: 5vh 5vw 5vh 5vw;
  }

  .carouselevento {
    transform: translateX(0);
    /* Asegura que el carrusel no se desplace fuera de vista */
  }


}

@media (max-width: 576px) {
  .Cartas-evento {
    width: 100%;
    /* Ocupa el ancho completo en pantallas pequeñas */
  }

  .cardevento {
    flex: 0 0 15%;
  }

  .Estructura-evento {
    flex-direction: column;
    /* Cambia la dirección del layout a columna */
    align-items: center;
    /* Centra los elementos dentro del contenedor */
  }

  .Caja-evento {
    width: 100%;
    /* Asegura que la caja ocupe todo el ancho disponible */
  }

  .Cartas-evento {
    width: 100%;
    /* El carrusel ocupará el ancho completo */
    margin-top: 20px;
    /* Espacio entre la caja y el carrusel */
  }

  .carouselevento {
    transform: translateX(0);
    padding-bottom: 10px;
    /* Asegúrate de que el carrusel no se mueva fuera de vista */
  }

  .cardevento {
    flex: 0 0 35%;

  }

  .BotonCarta-evento {
    position: relative;
    top: 570px;
    right: 165px;
    z-index: 2;

  }

}

.tituloSailors {
  height: 124px;
  background-color: var(--primary-color);
  box-sizing: border-box;
  display: flex;
  padding-left: 45px;
  text-align: center;
  align-items: center;
}

.tituloSailors h1 {
  font-family: 'Playfair Display', serif;
  font-size: 70px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;

}

.seccionSailors {
  display: flex;
  padding-left: 45px;
  height: 9vh;
  gap: 5vw;
  box-sizing: border-box;
  border-bottom: 1px solid #C0C8CC;
  justify-content: space-between;
}

.Trigrama {
  display: flex;
  gap: 25px;
  text-align: center;
  align-items: center;
}

.Trigrama h2 {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.Wrapper {
  width: fit-content;
  /* Ajusta el ancho al contenido */
  height: 32px;
  /* Ajusta la altura al contenido */
  padding: 0px 10px 0px 10px;
  border-radius: 5px 5px 5px 5px;
  background: #00495D;
  color: #fff;
  display: flex;
  /* Asegura que se aplique el gap si hay elementos internos adicionales */
  align-items: center;
  /* Centra verticalmente el contenido dentro del wrapper */
  justify-content: center;
  /* Centra horizontalmente el contenido dentro del wrapper */
}

/* STYLES DEL COMPONENTE FORO */
.Fondo-Foro {
  padding: 26px 45px;
}

.Buscador-foro {
  display: flex;
}

.seccionazul-foro {
  background: #0D6681;
  width: 200px;
  /* Ajusta el ancho a 200px */
  height: 48px auto;
  max-height: 48px;
  /* Ajusta la altura a 48px */
  padding: 10px;
  /* Ajusta el padding */
  border-radius: 5px 0 0 5px;
  display: flex;
  /* Asegura que el contenedor use flexbox */
  align-items: center;
  /* Centra verticalmente el contenido */
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  /* Necesario para que el hijo absoluto se ajuste */
  cursor: pointer;
}

.expanded-list {
  display: flex;
  margin: 0;
  flex-direction: column;
  padding: 0;
  color: #000;
  background-color: #0D6681;
  box-sizing: border-box;
  padding: 10px;
  z-index: 3;
  width: 100%;
  /* Asegura que la lista expandida ocupe todo el ancho del contenedor padre */
  position: absolute;
  /* Permite que el contenedor se ajuste al tamaño del padre */
  top: 100%px;
  /* Coloca la lista justo debajo del contenedor padre */
  left: 0;
  /* Alinea la lista al borde izquierdo del contenedor padre */
  gap: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  padding-right: 10px;
  border-radius: 5px;
  max-width: 200px;

}

.expanded-list h2 {
  color: #000;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  /* Oculta cualquier contenido que se desborde horizontalmente */
  text-overflow: ellipsis;
  /* Añade puntos suspensivos al final del texto si es demasiado largo */

}

.Dentro-list {
  display: flex;
  position: relative;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  /* Ajusta según necesidad */
  padding-right: 1px;
}

.seccionazul-foro h2 {

  margin: 0;
  /* Elimina cualquier margen del h2 */
  font-family: 'Sofia Sans Condensed';
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-align: center;
  /* Asegura que el texto esté centrado */
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
  white-space: nowrap;
}

.seccionazul-foro p {
  justify-content: flex-end;
}

.Search-foro input {
  width: 446px;
  /* Descuenta el espacio del botón */
  max-width: 446px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #C0C8CC;
  border-radius: 0 70px 70px 0;
  padding-left: 20px;
  padding-right: 50px;
  color: #000;
  /* Color del placeholder */
  font-family: "Sofia Sans";
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.Search-foro input::placeholder {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.Boton-busqueda-foro {
  position: relative;
  top: -4px;
  left: -52px;
}

/* Ajustes responsive */
@media (max-width: 768px) {

  .Search-foro input {
    width: calc(446px - 250px);
  }
}

.container {
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  gap: 100px;
  align-items: flex-start;
}

.left-section {
  flex: 3;
}

.right-section {
  flex: 1;
  background-color: #F5FAFB;
  padding: 10px;
  border-radius: 20px;
  height: auto;
  border: 1px solid #DCE4E8;
  border: 1px 1px 1px 1px;
}

.category-content {
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
  border-bottom: 1px solid #C0C8CC;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Añade una transición suave */
}

.category-content:hover {
  background-color: #e0e0e0;
  /* Cambia el fondo a un color más oscuro */
  transform: scale(1.05);
  /* Agranda el contenido */
}

.IconoPosts {
  justify-content: flex-end;
  margin-top: 5px;
}

.IconoPosts p {
  display: flex;
  justify-content: center;
  margin-top: -5px;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.category {
  border-radius: 8px;
}

.category h2 {
  font-family: 'Sofia Sans Condensed';
  font-size: 34px;
  font-weight: 600;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}

.category-item h3 {
  margin: 0;
  font-size: 16px;
  color: #171D1E;
  padding-left: 10px;
  font-family: 'Playfair Display';
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.category-item p {
  margin: 5px 0;
  color: #666;
  padding-left: 10px;
  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
}

.category-item span {
  display: block;
  font-size: 14px;
  color: #999;
}

.category-header {
  display: flex;
  height: 62px;
  background-color: #DEE3E5;

}

.popular-threads {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 20px;
  padding: 20px 20px 20px 20px;
  gap: 20px;




}

.popular-threads h2 {
  font-family: 'Playfair Display';
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #003545;

}

.thread {
  display: flex;
  flex-direction: column;
}

.thread-footer {
  display: flex;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  gap: 10px;

}

.thread-raya {
  display: flex;
  border-bottom: 1px solid #C0C8CC;
  margin-left: -10px;
  /* Mueve la línea 10px hacia la izquierda */
  margin-right: -10px;
  /* Mueve la línea 10px hacia la derecha */
  margin-top: 20px;
  /* Opcional para separar un poco de otros elementos */
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
  align-items: center;
}

.AvatarCarta2 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: blue;
  margin-left: 2px;
}

.thread p {
  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  padding-bottom: 20px;
}

.thread small {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;

}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .right-section {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Asegura que ocupe todo el ancho disponible */
    margin: 0 auto;
    /* Centra la sección derecha horizontalmente */
  }

  .container2 {
    flex-direction: column;
  }

  .right-section2 {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Asegura que ocupe todo el ancho disponible */
    margin: 0 auto;
    /* Centra la sección derecha horizontalmente */
  }

}

.Fondo-Subcategoria {

  padding: 26px 45px;

}

.Titulosubcategoria {
  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  padding-left: 45px;
  padding-right: 45px;
  border-bottom: 1px solid #C0C8CC;
  height: 9vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.Fondo-left-subcategoria {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.Fondo-left-subcategoria button {
  background-color: #EE9300;
  border: none;
  color: #fff;
  width: auto;
  height: 49px;
  gap: 8px;
  border-radius: 8px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 0px 10px;
}

.Fondo-left-subcategoria button p {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-family: 'Sofia sans';
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.subcategoria {
  border-bottom: 1px solid #C0C8CC;
  height: 50px auto;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
}

.subcategoria h2 {
  font-family: 'Playfair Display';
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
  margin: 0;
}

.thread-subcategoria-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: -10px;
}

.thread-subcategoria-nav h2 {
  font-family: 'Sofia Sans', 'Condensed';
  font-size: 22px;
  font-weight: 500;
  line-height: 26.4px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.fijados {
  margin-top: -20px;
}

.fijado-item {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-bottom: 1px solid #C0C8CC;

}

.Avatar-item {
  flex: 0.5;
  justify-items: center;
  align-items: center;
  justify-content: center;
  display: flex;
}

.descripcion-item {
  flex: 4;
  display: flex;
  flex-direction: column;
}

.descripcion-item h3 {
  margin: 0;
  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;

}

.descripcion-item p {
  margin: 0;
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000;

}

.Descript-footer h1 {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.Descript-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Descript-footer span:first-child {
  flex: 10;
  /* Toma el 10x de espacio relativo */
  display: flex;
  gap: 5px;
  align-items: center;
  /* Centra verticalmente */
  justify-content: flex-start;
  /* Alinea a la izquierda */
  text-align: left;
}

.Descript-footer span:last-child {
  flex: 1;
  /* Toma el espacio relativo más pequeño */
  display: flex;
  gap: 5px;
  align-items: center;
  /* Centra verticalmente */
  justify-content: flex-start;
  /* Alinea a la izquierda */
  text-align: left;
}

.Descript-footer span p {
  margin: 0;
  /* Elimina márgenes por defecto */
  padding-left: 5px;
  align-self: center;
  /* Centra el texto dentro del contenedor */
  top: 0px;
  /* Elimina valores de posición que pueden causar problemas */
  position: relative;
  /* Solo utiliza esto si necesitas un ajuste adicional */
}

.Descript-footer span:last-child h1 {
  color: #004D63;
}

.Lasttime-item {
  flex: 0.5;
  display: flex;
  justify-content: center;
  text-align: right;
  flex-direction: column;
}

.Lasttime-item p {
  font-family: 'Sofia Sans';
  font-size: 12px;
  font-weight: 300;
  line-height: 24px;
  text-align: right;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #40484C;
  margin: 0;
  display: inline;
}

.circle-item {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Hace que los bordes sean redondos */
  border: 1px solid black;
  /* Define un borde sólido completo */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  /* Establece la opacidad a 1 para que sea visible */
}

.fijado-item {
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.fijado-item:hover {
  background-color: #e0e0e0;
  /* Cambia el fondo a un color más oscuro */
  transform: scale(1.05);
  /* Agranda el contenido */
}

@media (max-width:700px) {
  .Avatar-item {
    flex: 0.1;
  }
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: none;
}

.pagination button {
  background-color: #fff;
}

.pagination button h1 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #000;
}

.arrow-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
}

.arrow-button:disabled {
  color: #d0d6dc;
  cursor: default;
}

.page-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 5px;
  width: auto;
}

.page-button.active {
  background-color: #16647a;
  color: white;
  width: 32px;
}

.page-button.active h1 {
  color: white;
}

.dots {
  font-size: 18px;
  color: #333;
}

.fondo-hilo {
  padding: 26px 45px;
}

.container2 {
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  gap: 100px;
  align-items: flex-start;
}

.right-section2 {
  flex: 1;
  background-color: #F5FAFB;
  padding: 10px;
  border-radius: 20px;
  height: auto;
  border: 1px solid #DCE4E8;
  border: 1px 1px 1px 1px;
}

.left-section2 {
  flex: 3;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.left-section2 span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.left-section2 span p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
}

.left-section2 span h1 {
  display: flex;
  margin: 0;
  padding: 0;
}

.left-section2 h1 {
  color: #000;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 0%;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .container2 {
    flex-direction: column;
  }

  .right-section2 {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Asegura que ocupe todo el ancho disponible */
    margin: 0 auto;
    /* Centra la sección derecha horizontalmente */
  }

}

.carta-hilo {
  display: flex;
  flex-direction: row;
  flex: 1;

}

.avatar-hilo {
  display: flex;
  flex-direction: column;
  border: 1px solid #DCE4E8;
  width: 121px;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  border-radius: 10px 0px 0px 10px;
  position: relative;
  background-color: #F5FAFB;
}

.avatar-hilo span {
  display: flex;
  flex-direction: column;
  position: absolute;
  /* Lo saca del flujo normal y permite posicionarlo arriba */
  top: 20px;
  /* Lo pega a la parte superior del contenedor padre */
  left: 50%;
  /* Lo lleva al centro horizontalmente */
  transform: translateX(-50%);
  /* Corrige el desplazamiento del 50% */
  align-items: center;
  /* Centra los elementos dentro del span */
  width: max-content;
  /* Ajusta el ancho al contenido */
}


.avatar-hilo span h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #000;
}

.texto-hilo {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #DCE4E8;
  border-left: none;
  border-radius: 0px 10px 10px 0px;
  padding: 40px 20px;
  gap: 20px;
}

.texto-hilo span p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
}

.texto-hilo h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #000;
}

.texto-hilo span {
  display: flex;
  justify-content: space-between;
}

.circle-avatar-hilo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}

.botones-hilo {
  display: flex;
  gap: 10px;
}

.botones-hilo span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.botones-hilo span h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #004D63;
  margin: 0;
  padding: 0;
}

.botones-hilo span p {
  margin: 0;
  padding: 0;
}

.input-hilo {
  flex: 1;
}

.input-hilo input {
  flex: 1;
  width: 100%;
  border: 1px solid #70787D;
  box-sizing: border-box;
  border-radius: 10px;
  height: 46px;
  padding-left: 20px;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #000;
}

.input-hilo input::placeholder {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #40484C;
}

.cuadrado-dentro-hilo {
  display: flex;
  flex-direction: column;
  border-left: 4px solid #8AD0EE;

}

.avatar-cuadrado {
  display: flex;
  height: 54px;
  border: 1px solid #DCE4E8;
  border-left: none;
  border-bottom: none;
  padding: 10px 20px;
  align-items: center;
  gap: 10px;
}

.avatar-cuadrado p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
}

.circulo-cuadrado {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}

.texto-cuadrado {
  display: flex;
  border: 1px solid #DCE4E8;
  border-top: none;
  border-left: none;
  padding: 10px 20px;
  background-color: #F5FAFB;
}

.hilos-similares {
  display: flex;
  flex-direction: column;
  padding: 40px 10px;
  gap: 20px;
}

.hilos-similares span {
  display: flex;
  justify-content: space-between;
}

.hilos-similares span h1 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 500;
  color: #000;
  line-height: 26.4px;
  letter-spacing: 0px;

}

.texto-similares {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.titulo-similares {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
  width: 100%;
}

.titulo-similares span p {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: right;
  color: #40484C;
  display: flex;
  align-self: flex-start;
  text-align: right;

}

.titulo-similares h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
}

.cuadrado-similares {
  width: 85px;
  height: 85px;
  border: 1px solid #000;

}

.avatar-similares {
  display: flex;
  flex-direction: column;
}

.carta-similares {
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  gap: 20px;
  border-bottom: 1px solid #C0C8CC;
}

.info-usuario-similares {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-usuario-similares h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
  margin: 0;
  padding: 0;
}

.info-usuario-similares h1 {
  display: flex;
  margin: 0;
  padding: 0;
}

.circulo-avatar-similares {
  width: 24px;
  height: 24px;
  border: 1px solid #000;
  border-radius: 50%;
}

.derecha-similares {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 0;
  margin: 0;
  gap: 2px;
  /* Espacio entre los elementos */
}

.derecha-similares p {
  margin: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  /* Evita que los textos se partan en varias líneas */
}

.botones-similares {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
}

.botones-similares span {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 4px;
}


.botones-similares span h2,
p {
  margin: 0;
  padding: 0;
}

.botones-similares h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #004D63;

}

.fondo-nuevo-hilo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20vw;
  min-height: calc(100vh - 40px);
}

.nuevo-hilo {
  width: 100%;
  max-width: 800px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nuevo-hilo textarea {
  border: 1px solid #C0C8CC;
  border-radius: 8px;
  padding: 10px 10px;
  /* Ajusta el padding para que el texto empiece arriba */
  font-size: 16px;
  text-align: left;
  resize: none;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;

}

.nuevo-hilo input {
  border: 1px solid #C0C8CC;
  height: 54px;
  border-radius: 8px;
  padding: 10px 10px;
  /* Ajusta el padding para que el texto empiece arriba */
  font-size: 16px;
  text-align: left;
  height: 54px;
  display: flex;
  text-align: left;
  justify-content: center;
  align-items: center;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;

}

.nuevo-hilo select {
  border: 1px solid #C0C8CC;
  height: 54px;
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 16px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Sofia Sans', sans-serif;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;
  background-color: white;
  /* para que no sea transparente */
  -webkit-appearance: none;
  /* para que no tenga estilos por defecto en Safari/Chrome */
  -moz-appearance: none;
  /* para Firefox */
  appearance: none;
  cursor: pointer;
}

.required-asterisk {
  color: red;
  margin-left: 4px;
}

.nuevo-hilo .inputconicono {
  display: flex;
  width: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}

.nuevo-hilo .inputconicono p {
  display: flex;
  position: absolute;
  right: 0;
  padding-right: 10px;
  justify-content: center;
  align-items: center;
}

.titulo {
  border: 1px solid #C0C8CC;
  height: 54px;
  border-radius: 8px;
  padding: 10px 10px;
  /* Ajusta el padding para que el texto empiece arriba */
  font-size: 16px;
  text-align: left;
  height: 54px;
  display: flex;
  text-align: left;
  justify-content: center;
  align-items: center;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;
  width: 100%;
  padding: 0;
  margin: 0;
}

.nuevo-hilo input::placeholder {
  display: flex;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.nuevo-hilo .contenido {
  height: 236px;
}

.botones-nuevo-hilo {
  display: flex;
  gap: 15px;
}

.botones-nuevo-hilo p {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.botones-inferior-nuevo-hilo {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.botones-inferior-nuevo-hilo button {
  width: 265px;
  height: 60px;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}

.botones-inferior-nuevo-hilo button h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
}

.botones-inferior-nuevo-hilo button:first-child {
  background-color: #BBE9FF;
  color: #000;
}

.botones-inferior-nuevo-hilo button:last-child {
  background-color: #0D6681;
  color: #fff;
}

.cardevento2 {
  border-radius: 8px;
  border: 1px solid #ecf2f3;
  margin: 0.5vw 2vh;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  /* Mostrar 3 cartas (100% / 3) */
  /* Parte de la derecha a la mitad */
  box-sizing: border-box;
  padding: 0px;
  background-color: #fff;
  border: 1px solid #ddd;
  text-align: center;
  display: flex;
  flex-direction: column;
}


.slider-container {
  padding: 20px 45px;
  margin-bottom: 50px;
  position: relative;
}

/* ESTE ES EL DIV DEL CARROUSEL EL COMPONENTE PRINCIPAL */
.variable-width .slick-slide {
  color: #000;
  margin: 10px;
  text-align: left;
  height: auto;
  width: 1005px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px #00000040;
  box-sizing: border-box;



}

.variable-width .slick-track {
  display: flex;
  justify-content: flex-start;
}

.variable-width .slick-slide div {
  margin: 0;
  padding: 0;
  height: 100%;
}


.fondo-eventos {
  display: flex;
  flex-direction: row;


}

/* SI LE PONGO TOP:2PX SE ARREGLA UN POCO PERO NO ES LA SOLUCION */
.foto-eventos {
  display: flex;
  flex: 4;
  box-sizing: border-box;
  position: relative;
  height: 150px;

}

.foto-eventos img {
  display: flex;
  box-sizing: border-box;
  width: 100%;

  object-fit: cover;
  border-radius: 10px 0px 0px 10px;

}

.texto-eventos {
  display: flex;
  flex: 6;

  box-sizing: border-box;
}

.texto-eventos-dentro {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40px 20px !important;
  gap: 20px;
}

.texto-eventos-dentro2 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px 20px !important;
  gap: 20px;
  width: 100%;
}

.texto-eventos-dentro3 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px 20px !important;
  gap: 10px;
  width: 100%;
}

.conjunto-eventos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.conjunto-eventos h1 {
  margin: 0;
  padding: 0;
}

.conjunto-eventos p {
  color: #000;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;

}

.texto-eventos-dentro h1,
.texto-eventos-dentro h2,
.texto-eventos-dentro p {
  margin: 0;
  padding: 0;
  color: #000;
}

.texto-eventos-dentro h1 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 0%;
}

.texto-eventos-dentro h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;

}

.imagen-autor-evento {
  max-width: 24px;
  max-height: 24px;
  min-height: 24px;
  min-width: 24px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #FFF;
}

.botones-footer-eventos {
  display: flex;
  justify-content: space-between;
}

.ultimos-botones-eventos {
  display: flex;
  gap: 10px;
}

.ultimos-botones-eventos span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ultimos-botones-eventos span h3 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #004D63;
}

.ultimos-botones-eventos span h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #004D63;
}

.boton-posicion {
  display: flex;
  justify-content: space-between;
}

.carousel-buttons2 button {
  background: none;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
}


.carousel-buttons2 {
  display: flex;
  padding: 0;
  margin: 0;
  padding-top: 20px;
  position: relative;
  right: 0;
}

.carousel-buttons2 button svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Evita que el SVG intercepte el clic */
}

.slick-dots {
  bottom: -40px !important;
  display: flex !important;
  justify-content: center;

}

.slick-dots li {
  margin: 0 10px;
  /* Espacio entre los puntos */
  background-color: #ffffff;
  width: 16px;
  height: 16px;
  border: 1px solid #70787D;
  border-radius: 50%;
}

.slick-dots li button {
  font-size: 0;
  /* Oculta el número del botón */
  background: #ffffff;
  /* Color de los dots */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: background 0.3s ease;
  color: #fff;
}

.slick-dots li.slick-active button {
  background: #0D6681;
  /* Color del dot activo */

}

.slick-dots li button::before {
  display: none !important;
}

@media (max-width: 800px) {
  .fondo-eventos {
    flex-direction: column;

  }

  .boton-posicion {
    flex-direction: column;
    align-items: center;
    /* Centrar contenido */
  }

  .carousel-buttons2 {
    position: relative;
    top: 50px;
    /* Ajusta la distancia entre los dots y los botones */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slick-dots {
    position: relative;
    top: 5px;
    /* Asegurar que los dots mantengan su posición */
  }

  .foto-eventos img {
    border-radius: 10px 10px 0px 0px;
  }
}


@media(max-width:500px) {
  .texto-eventos-dentro {
    gap: 1px;
    padding: 10px 20px !important;
  }

  .texto-eventos {
    padding: 0px;
  }

  .texto-eventos-dentro h1 {
    font-size: 20px;
  }

  .texto-eventos-dentro h2 {
    font-size: 16px;
  }

}

.atributos-foto {
  display: flex;
  position: absolute;
  left: 10px;
  top: 20px;

}

.fondoblanco-foto {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 3px;
  height: 25px;
}

.fondoblanco-foto span {
  background-color: #F5FAFB;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  gap: 10px;
  width: fit-content;

}

.fondoblanco-foto span p {
  margin: 0;
  padding: 0;
}

.fondoblanco-foto span h2 {
  text-align: left;
  color: #000;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;
}

.slider-container h1 {
  margin: 10px 0px;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 0%;
  color: #000;
  padding-bottom: 5px;
}

.fondo-todoseventos {
  padding: 20px 45px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fondo-todoseventos h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
}

.fondo-todoseventos hr {
  border: 1px solid #C0C8CC;
  width: 100%;
  margin-top: -5px;
}

.fondo-todoseventos span:first-child {
  display: flex;
  flex-direction: column;
}

.fondo-todoseventos span {
  display: flex;
}

.fondo-todoseventos span div {
  flex: 3;
  height: 48px;
  display: flex;
  /* Hace que el div se comporte como contenedor flexible */
  align-items: center;
  /* Asegura que el input se alinee correctamente */
  box-sizing: border-box;
  position: relative;
}

.fondo-todoseventos span div input {
  width: 100%;
  height: 100%;
  flex: 1;

  margin: 0;
  padding: 0;
  outline: none;
  /* Opcional: elimina el borde azul en foco */
  box-sizing: border-box;
  /* Asegura que el tamaño se respete correctamente */
  padding-left: 10px;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #000;

}




.fondo-todoseventos span button h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #FFF;
}

.fondo-todoseventos span div p {
  display: flex;
  position: absolute;
  right: 0;
}

.fondo-todoseventos span button {
  flex: 1;
  height: 48px;
  background-color: #0D6681;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0px 10px 10px 0px;
  width: 100%;
  position: static;

}

@media(max-width: 650px) {
  .fondo-todoseventos span {
    flex-direction: column;
  }

  .fondo-todoseventos span div input {
    height: 48px;
  }

  .fondo-todoseventos span button {
    height: 48px;
    border-radius: 0px;
    width: 100%;
    height: 100%;
  }
}

.botonsito-evento {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 313px auto;
  max-width: 313px;
  height: 49px;
  background-color: #EE9300;
  border: none;
  border-radius: 10px;
  position: relative;
  top: -15px;
  cursor: pointer;
}

.botonsito-evento2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 313px;
  max-width: 313px;
  height: 49px;
  background-color: #EE9300;
  border: none;
  border-radius: 10px;
  position: relative;
  top: -15px;
  cursor: pointer;
}

.botonsito-evento h2,
.botonsito-evento2 h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}


.boton-al-centro {
  display: flex;
  justify-content: center;
  width: 100%;
}

.fondo-todoseventos button p {
  position: relative;
  top: 0px;
}

.fondo-todoseventos button h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  /* Cambia esto al tamaño que necesitas */
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}

.filtros-eventostodos {
  display: flex;
}

.filtros-eventostodos h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #0D6681;
}

.fondo-todoseventos .filtros-eventostodos span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.fondo-todoseventos .filtros-eventostodos {
  display: flex;
  gap: 100px;
}

.caja-de-filtros div {
  display: flex;
  align-items: center;
  gap: 10px;
}


.caja-de-filtros {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.caja-de-filtros h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #40484C;
}

.caja-filtros-eventos {
  background-color: #F5FAFD;
  border: 1px solid #70787D;
  height: 40px;
  width: 213px;
  border-radius: 10px;
  display: flex;
  position: relative;
  justify-content: space-between;
}


.caja-filtros-eventos input {
  display: flex;
  padding-left: 10px;
  width: 100%;

  background-color: #F5FAFD;
  height: 95%;
  border-radius: 10px;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #171C1F;
  border: none;
}

.caja-filtros-eventos input::placeholder {
  color: #171C1F;
}

.caja-filtros-eventos input:focus {
  border: none;
  outline: none;
  /* Evita el contorno azul/negro al hacer clic */
}

.caja-filtros-eventos p {
  position: absolute;
  right: 0;
  padding-right: 10px;
}

.caja-filtros-eventos input[type="date"] {
  position: absolute;
  opacity: 0;
  width: 0;
}

.caja-filtros-eventos span {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  color: #171C1F;
  padding-left: 10px;
}

.caja-filtros-eventos p {
  position: relative;
}

@media(max-width:1274px) {
  .caja-de-filtros h1 {
    display: flex;
    text-align: right;
  }
}

@media(max-width:1100px) {
  .fondo-todoseventos .filtros-eventostodos {
    display: flex;
    gap: 20px;
  }
}

@media(max-width:1015px) {
  .caja-de-filtros h1 {
    text-align: left;
  }

  .caja-de-filtros {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  .fondo-todoseventos .filtros-eventostodos {
    display: flex;
    flex-direction: column;
  }

  .caja-de-filtros {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Asegura alineación a la izquierda */
    width: 100%;
    /* Que ocupe el ancho completo */
  }

  .caja-de-filtros div {
    display: flex;
    gap: 0px;
  }

  .caja-filtros-eventos2 {
    position: relative;
    right: 50px;
  }

  .caja-filtros-eventos {
    width: 100%;
    /* Ocupar todo el ancho disponible */
  }

  .caja-de-filtros .cajita-filtros {
    display: flex;

  }
}

.titulo-pormes {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.titulo-pormes {
  max-height: 1px;
}

.titulo-pormes h1 {
  white-space: nowrap;
  /* Evita el salto de línea */
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.titulo-pormes hr {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: relative;
  top: 6.5px;
}

.fondoatributos-evento {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 3px;
  height: 25px;
}

.atributos-evento {
  background-color: #F5FAFB;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  gap: 10px;
  width: fit-content;
  height: 25px;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.atributos-evento h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #171D1E;
}

.fondo-atributos {
  display: flex;
  position: absolute;
  left: 10px;
  top: 20px;
}

.boton-tags {
  display: flex;
  background-color: #DCE4E8;
  border-radius: 10px;
  padding: 6px 10px;
  width: fit-content;
}

.boton-tags p {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #000;
}

.fondo-subevento {
  padding: 20px 18vw;
}

.contenido-subevento {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.superior-subevento {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.superior-subevento span {
  display: flex;
  align-items: center;
  gap: 10px;

}

.superior-subevento span p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
  margin: 0;
  padding: 0;
}

.superior-subevento span h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000;
  margin: 0;
  padding: 0;
}

.contenido-subevento .superior-subevento h2 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 500;
  font-size: 22px;
  line-height: 26.4px;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0;
}

.superior-subevento span button {
  width: 54px auto;
  height: 20px;
  gap: 10px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  border-radius: 5px;
  background-color: #FFDDBB;
  border: none;
}

.superior-subevento span button h3 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  color: #2B1700;
}

.contenido-subevento h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #000;
}

.circulo-avatar-subevento {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}

.contenido-subevento span {
  display: flex;
  gap: 5px;
}

.contenido-subevento span p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #40484C;
}

.atributos-subevento {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #C0C8CC;
  border-bottom: 1px solid #C0C8CC;
  padding: 20px 0px;
}

.atributos-subevento span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid #C0C8CC;
}

.atributos-subevento span h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #40484C;
}

.atributos-subevento span:last-child {
  border-right: none;
  padding-right: 0px;
}

.inferior-subevento {
  display: flex;
  flex-direction: row;
  gap: 0px;
}

@media(max-width: 1400px) {
  .inferior-subevento {
    gap: 10px;
  }
}

.left-subevento {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.cuadrado-imagen-subevento {
  width: 100px;
  height: 100px;
  border: 1px solid #C0C8CC;

}

.cuadrado-imagen-subevento img,
.cuadrado-imagen-subevento-more img,
.right-subevento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cuadrado-imagen-subevento-more {
  width: 100px;
  height: 100px;
  border: 1px solid #C0C8CC;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cuadrado-imagen-subevento-more img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(50%);
}

.cuadrado-imagen-subevento-more p {
  display: flex;
  position: absolute;
}

.right-subevento {
  display: flex;
  flex: 6;
  height: 610px;
  flex-direction: column;
  gap: 20px;
}

.right-subevento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #C0C8CC;

}

.likes-eventos {
  display: flex;
  justify-content: space-between;
}

.fondo-MARKET {
  display: flex;
  flex-direction: row;
  padding: 20px 45px;
  gap: 10vw;

  @media (max-width: 768px) {
    flex-direction: column;
    padding: 12px 20px;
    gap: 30px;
  }

  /* Para móviles pequeños (hasta 576px) */
  @media (max-width: 576px) {
    padding: 10px 15px;
    gap: 20px;
  }
}



.market-left {
  display: flex;
  flex-direction: column;
  flex: 2;
  gap: 10px;
}


.filtro-azul-market {
  display: flex;
  gap: 10px;
  background-color: #BBE9FF;
  padding: 8px;
  border-radius: 10px;
}

.filtro-azul-market.activo {
  background-color: var(--primary-color);
  /* Azul más oscuro o el color que prefieras */
  color: white;
}

/* Para que los elementos dentro hereden el color blanco */

.filtro-azul-market.activo h2 {
  color: #fff;
}

.filtro-azul-market p {
  display: flex;
  margin: 0;
  padding: 0;

}

.filtro-azul-market h2 {
  display: flex;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #001F29;
}

.market-left button {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EE9300;
  border-radius: 10px;
  border: none;
  gap: 10px;
  padding: 16px 8px;
  cursor: pointer;
}

.market-left button h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: center;
  font-size: 18px;
  color: #FFF;

}

.espacio-blanco {
  padding-bottom: 20px;
}

.linea-horizontal-gris {
  border: 1px solid #C0C8CC;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ubicacion-market {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ubicacion-market h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
}

.ubicacion-market span {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ubicacion-market span h3 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #40484C;
}

.ubicacion-market span input {
  min-width: 16px;
  min-height: 16px;
  border: none;
  border: 1px solid #C0C8CC;
}

.ubicacion-market span input:checked {

  color: #0D6681;
}

.superior-market {
  display: flex;
  padding-left: 10px;
}

.superior-market div {
  flex: 3;
  height: 48px;
  display: flex;
  /* Hace que el div se comporte como contenedor flexible */
  align-items: center;
  /* Asegura que el input se alinee correctamente */
  box-sizing: border-box;
  position: relative;
}

.superior-market div input {
  width: 100%;
  height: 100%;
  flex: 1;

  margin: 0;
  padding: 0;
  outline: none;
  /* Opcional: elimina el borde azul en foco */
  box-sizing: border-box;
  /* Asegura que el tamaño se respete correctamente */
  padding-left: 10px;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #000;

}




.superior-market button h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #FFF;
}

.superior-market div p {
  display: flex;
  position: absolute;
  right: 0;
}

.superior-market button {
  flex: 1;
  height: 48px;
  background-color: #0D6681;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0px 10px 10px 0px;
  width: 100%;
  position: static;

}

@media(max-width: 650px) {
  .superior-market {
    flex-direction: column;
  }

  .superior-market div input {
    height: 48px;
  }

  .superior-market button {
    height: 48px;
    border-radius: 0px;
    width: 100%;
    height: 100%;
  }
}

.tags-marketplace {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-marketplace {
  display: flex;
  padding: 2px 10px !important;
  background-color: #FFDDBB;
  border-radius: 5px;
  justify-content: center;
  align-items: center;

}

.tag-marketplace h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  color: #2B1700;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 0;
  padding: 0;
}

.anchomarket {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.preciocartamarket {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 0%;
}

.anchomarket h3 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #000;
  margin-top: -5px;
}

.botones-inferior-marketplace {
  display: flex;
  justify-content: space-between;
}

.botones-inferior-marketplace-dentro {
  display: flex;
  gap: 10px;
  align-items: center;
}

.botones-inferior-marketplace-dentro span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.botones-inferior-marketplace-dentro h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #004D63;
}

.market-right {
  display: flex;
  flex-direction: column;
  flex: 10;
  overflow: hidden;
}

.container-market-slide {
  padding-bottom: 60px;
  position: relative;

}

.variable-width2 .slick-slide {
  color: #000;
  margin: 10px;
  text-align: left;
  height: auto;
  max-width: 776px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px #00000040;
  box-sizing: border-box;

}

.variable-width2 .slick-track {
  display: flex;
  justify-content: flex-start;
  margin: 10px;
}

.variable-width2 .slick-slide div {
  margin: 0;
  padding: 0;
  height: 100%;
}

@media (max-width: 600px) {
  .variable-width2 .slick-track {
    justify-content: center;
  }
}

@media(max-width:1164px) {
  .variable-width2 .slick-slide {
    width: 500px;
  }
}

@media(max-width:838px) {
  .variable-width2 .slick-slide {
    width: 300px;
  }
}






@media (max-width: 800px) {
  .slick-dots {
    position: relative;
    /* Asegurar que los dots mantengan su posición */
  }
}

.container-market-slide h1 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 0%;
  color: #000;
  margin: 10px;
  position: relative;
  top: 10px;
}

.conjunto-filtro {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;


}

.conjunto-filtro h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
  padding-left: 10px;
}

.raya-gris-market {
  border: 1px solid #C0C8CC;
  width: 100%;
  margin: 0px 10px;


}

.market-width .slick-slide {
  color: #000;
  margin: 0px 30px;
  text-align: left;

  height: 260px auto;
  width: 315px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px #00000040;
  box-sizing: border-box;
}

.market-width .slick-track {
  display: flex;
  justify-content: flex-start;
  margin: 10px;

}

.market-width .slick-slide div {
  margin: 0;
  padding: 0;
}

.fondo-carrusel-market {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.foto-eventos2 {
  display: flex;
  flex: 5;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;

}

.foto-eventos2 img {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
}

.texto-eventos2 {
  display: flex;
  flex: 4;

  box-sizing: border-box;
}

.tags-marketplace2 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-marketplace2 {
  display: flex;
  padding: 2px 10px !important;
  background-color: #FFDDBB;
  border-radius: 5px;
  justify-content: center;
  align-items: center;

}

.tag-marketplace2 h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  color: #2B1700;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 0;
  padding: 0;
}

.conjunto-eventos2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;

}


.conjunto-eventos2 h1 {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.conjunto-eventos2 h2,
.conjunto-eventos h2 {
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}

.conjunto-eventos2 p {
  color: #000;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  align-items: center;

}

.preciocartamarket2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 20px;
  line-height: 33.6px;
  letter-spacing: 0%;
}

.preciocartamarket3 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;

}

.botones-inferior-marketplace2 {
  display: flex;
  justify-content: space-between;
}

.botones-inferior-marketplace-dentro2 {
  display: flex;
  gap: 10px;
  align-items: center;
}

.botones-inferior-marketplace-dentro2 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.botones-inferior-marketplace-dentro2 h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #004D63;
}

.botones-inferior-marketplace-dentro2 span p {
  margin: 0;
  padding: 0;
}

.botones-inferior-marketplace-dentro2 span h2 {
  margin: 0;
  padding: 0;
}

.subtitulo-submarket {
  display: flex;
  border-bottom: 1px solid #C0C8CC;
}

.subtitulo-submarket h1 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  padding: 0;
  margin: 10px 45px;

}

.contenido-submarket {
  display: flex;
  flex-direction: row;
  padding: 5vh 4vw;
  gap: 20px;
}

.little-squares {
  display: flex;
  flex-direction: column;
  height: 500px;
  flex: 1;
  gap: 20px;
  padding-bottom: 440px;
}

.squares,
.squares2 {
  display: flex;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  position: relative;
}

.squares img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  /* evita pixelado en navegadores antiguos */
}

.squares2 img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(50%);
  image-rendering: auto;
  /* evita pixelado en navegadores antiguos */
}

.squares p,
.squares2 p {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.principal-content-submarket {
  display: flex;
  flex: 5;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.square-main {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  width: auto;
  height: 300px;
  /* cuadrado fijo */
  overflow: hidden;
  position: relative;
}

.square-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.text-area-submarket {
  display: flex;
  flex-direction: column;
  flex: 4;
}

.text-area-submarket span {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid #C0C8CC;
  padding-bottom: 20px;
}

.titulo-submarket {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.titulo-submarket h1 {
  font-family: 'Sofia Sans';
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: 0%;
  color: #000;
  margin: 0;
  padding: 0;
}

.titulo-submarket div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.titulo-submarket div i {
  display: flex;
  justify-content: center;
  align-items: center;
}

.titulo-submarket div p {
  display: flex;
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: 0%;
  text-align: center;
  align-items: center;
  color: #000;

}

.iconos-inferior-separacion {
  display: flex;
  gap: 20px;
}

.conjunto-inferior {
  display: flex;
  gap: 5px;
  align-items: center;
}

.conjunto-inferior p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #004D63
}

.descript-submarket {
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
  gap: 20px;
  border-bottom: 1px solid #C0C8CC;
  padding-bottom: 20px;
}

.descript-submarket h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
}

.descript-submarket h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;


}

.descript-submarket p {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;

}

.descript-submarket h1,
.descript-submarket h2,
.descript-submarket div p {
  margin: 0;
  padding: 0;
  color: #171D1E;
  display: flex;
  align-items: center;
}

.descript-submarket div {
  display: flex;
  gap: 10px;
}

.venta-submarket {
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
  gap: 20px;
}

.venta-submarket h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0;
}

.cuadrado-vendedor {
  display: flex;
  border-radius: 10px;
  padding: 20px;
  gap: 10px;
  border: 1px solid #DCE4E8;
  background-color: #F5FAFB;
  flex-direction: column;
}

.circulo-submarket {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
}

.avatar-submarket {
  display: flex;
  gap: 10px
}

.avatar-submarket h2 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #000;
  align-items: center;
}

.conjunto-inferior2 {
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}

.conjunto-inferior2 p {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #004D63;
}

.cuadrado-vendedor h3 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #000;
}

.raya-inferior-gris {
  display: flex;
  border: 1px solid #C0C8CC;

}

.parte-inferior-submarket {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.parte-inferior-submarket h1 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  margin: 0;
  padding: 0;
  color: #000;
}

.fondo-slider-submarket {
  display: flex;
  position: absolute;
  overflow: hidden;
  margin: auto;
  width: 100%;
  padding-top: 20px;
  gap: 10px;
  padding-bottom: 50px;
  flex-direction: column;
}

.dos-slider .slick-list {
  overflow: hidden;
  /* Oculta el desbordamiento horizontal */
}

.dos-slider .slick-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 308px;
  /* Cada slide ocupa la mitad del contenedor */
  box-sizing: border-box;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0px 5px 5px 0px #00000040;
  border: 1px solid #C0C8CC;
}

.dos-slider .slick-track {
  display: flex;
  justify-content: flex-start;
  margin: 10px;
}

.dos-slider .slick-slide div {
  margin: 0;
  padding: 0;


  gap: 20px;
}

.fondo-carta-submarket {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.dos-slider .slick-slide .fondo-carta-submarket {
  margin: 20px;
}

.imagen-carta-sub {
  display: flex;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;

  border: 1px solid #C0C8CC;
}

.imagen-carta-sub img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.texto-carta-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media(max-width:880px) {
  .contenido-submarket {
    gap: 0px;
    flex-direction: column-reverse;
    position: relative;
  }

  .little-squares {
    flex-direction: row;
    padding-top: 20px;
    padding-bottom: 250px;
  }

  .raya-inferior-gris {
    display: none;
  }

  .parte-inferior-submarket {
    position: absolute;
    top: 440px;
    left: 0;
    width: 100%;

  }

  .boton-posicion {
    margin-top: -50px;
  }

  .square-main {
    height: 305px;
  }

}

.fondo-profile {
  display: flex;
  flex-direction: row;
  padding: 20px 45px;
  padding-right: 8vw;
  gap: 4vw;
}

@media(max-width:390px) {
  .fondo-profile {
    padding: 5px 12px;
  }
}

.parte-left-profile {
  flex: 1;
}

.parte-right-profile {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 333px;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .parte-left-profile {
    display: none;
  }
}

.parte-right-profile>button {
  border: none;
  border-radius: 10px;
  height: 40px;
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.parte-right-profile>button>h2 {
  display: flex;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--text-color);
}

.type-fondo {
  display: flex;
  padding: 20px 40px;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid #C0C8CC;
}

.type-fondo {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #C0C8CC;
}

.type-fondo span {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid #ECF2F3;
  padding: 5px;
}

.atributo-type-profile,
.atributo-type-profile1 {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.atributo-type-profile i {
  display: flex;
  align-items: center;
}

.atributo-type-profile h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #40484C;
  align-items: center;
}

.atributo-type-profile1 h3 {
  color: var(--primary-color);
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  align-items: center;
}

.buton-cerrarsesion {
  display: flex;
  padding-top: 10px;
  width: 100%;
  align-items: center;
}

.buton-cerrarsesion button {
  display: flex;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--primary-color);
  background-color: #fff;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
}

.buton-cerrarsesion button i {
  display: flex;

}

.buton-cerrarsesion button h2 {
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--primary-color);
}

.margenes-plan {
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 45px;
  padding-bottom: 45px;
}

.fondoazul-plan {
  background-color: #0D6681;
  display: flex;
  gap: 45px;
  padding: 45px 45px;
  height: auto;
  box-sizing: border-box;
}

.fondoazul-left {
  display: flex;
  align-items: center;
  /* Centra verticalmente */
  justify-content: center;
  /* Centra horizontalmente si es necesario */
  height: auto;
  /* Asegura que tenga altura suficiente */

}

.circle {
  width: 208px;
  /* El diámetro del círculo es el doble del radio */
  height: 208px;
  /* El diámetro del círculo es el doble del radio */
  border-radius: 50%;
  /* Hace que los bordes sean redondos, formando un círculo */
  background-color: #ffffff;
  /* Color de fondo del círculo */
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;

}


.tituloicono-plan {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 10px;
}

.tituloicono-plan i {
  display: flex;
  align-items: center;
}

.tituloicono-plan h1 {
  display: flex;
  font-family: 'Playfair Display';
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #ffffff;
  margin: 0;
  padding: 0;



}

.fondoazul-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0;
  /* Evita cualquier margen que lo separe del borde superior */
  padding-top: 0;
  gap: 20px;
}





.bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.text-right {
  display: flex;
  align-items: center;
  gap: 10px;


}

.text-right h3 {
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.text-right h2,
p {
  margin: 0;
  padding: 0;
}

.text-right button {
  margin: 0;
  display: flex;
  border: none;
  align-items: center;
  width: 77px auto;
  height: 24px;
  padding: 2px 8px 2px 8px;
  gap: 5px;
  border-radius: 5px;

  background-color: #BBE9FF;
}

.text-right button p {
  position: relative;
  top: 15px;
}



@media (max-width: 1080px) {
  .text-right h2 {
    display: none;
  }

  .circle {
    width: 100px;
    height: 100px;
  }

  .tituloicono-plan h1 {
    font-size: 30px;
    gap: 0px;
  }
}

@media (max-width: 700px) {
  .circle {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
  }

  .margenes-plan {
    padding: 0;
  }

  .tituloicono-plan h1 {
    font-size: 20px;
  }

  .text-right {
    align-self: flex-start;
  }

  .fondoazul-plan {
    padding: 45px 10px;
    gap: 10px;
  }
}

@media (max-width:500px) {
  .tituloicono-plan {
    gap: 0px;
  }

  .fondoazul-plan {
    padding: 20px 10px;
  }

}

.fechas-plan {
  display: flex;

  align-items: center;
  gap: 5px;
}

.fechas-plan h2,
p {
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans', Condensed;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;

}

.fechas-plan hr {
  border: 1px solid #fff;
  margin: 5px;
  padding: 0;
  height: 100%;
}

.fechas-plan p {
  position: relative;
  top: 10%;
}

.Boton-plan button {
  background-color: #FFDDBB;
  border: none;
  display: flex;
  width: 120px;
  height: 31px;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;

}

.Boton-plan button p {
  display: flex;
  position: relative;
  left: 5px;
}

.fondoazul-plan button h2 {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.fondoazul-plan button p {
  position: relative;
  top: -5%;

}

.text-right button p {
  position: relative;
  top: 5%;
}

.fondoazul-right span:last-child {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;

}

.fondoazul-right span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  width: 100%;

}

.bottom-right hr {
  border: 1px solid #ffffff;
  margin: 5px;
  padding: 0;
  height: 25px;
}

@media(max-width:450px) {
  .fechas-plan {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
  }

  .fechas-plan hr {
    height: 0px;
    margin: 0px;
    width: 100%;
  }

  .fondoazul-right span:last-child {
    padding: 10px 0px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bottom-right {
    flex-direction: column;
  }

  .bottom-right hr {
    width: 100%;
    height: 0px;
  }
}

.bottom-plan {
  display: flex;
  gap: 10px;


}

.bottom-plan p {
  display: flex;
  position: relative;
  top: 2px;
  padding-left: 10px;
}

.bottom-plan h2 {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}



.fondoazul-right span h2 {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.text-right button h2 {

  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  color: #001F29;
}

.bottom-right {

  height: 100%;
}



.bottom-right h3 {
  padding-right: 10px;
}

.bottom-right h3 p {
  position: relative;
  margin: 0;
  padding: 0;
  margin-top: 2px;
}

.fondoazul-right span:last-child h3 {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FABA73;
  display: flex;
  gap: 5px;

}

.fondoazul-right span:last-child h3 p {
  position: relative;
  top: 2px;
}

.mapa-calculo {
  display: flex;
  flex: 4;
  height: auto;
}

.calculo-calculo {
  display: flex;
  flex: 3;
  flex-direction: column;
  height: auto;
}

.inferior-plan {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding-bottom: 20px;
}

.franja-calculo {
  background-color: #DEE3E5;
}



.franjafooter-calculo {
  display: flex;
  background-color: #BBE9FF;
  justify-content: flex-end;
}

.franjafooter-calculo h2 {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 15px;
}

.producto-item {
  display: flex;
  justify-content: space-between;

  border-bottom: 1px solid #000;
}

.producto-item h3 {
  margin: 15px;

  display: flex;
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
}

.foto-calculo {
  width: 100%;
}

.etapas-plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.etapas-plan h1 {
  font-family: 'Playfair Display';
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 0;
  /* Elimina cualquier margen */

}

.etapas-plan hr {
  border: 1px solid #000;
  width: 45px;
  margin: 0;
  /* Elimina cualquier margen */
  padding: 0;
  /* Elimina cualquier padding */
  display: flex;
  top: -15px;
  position: relative;
  justify-content: flex-start;
  align-self: flex-start;
  /* Alinea el <hr> al inicio del contenedor flex */
}

.fondo-oscuro-plan {

  background-color: #E6E6E6;
  width: auto;
  height: 205px;
}

@media (max-width:768px) {
  .inferior-plan {
    display: flex;
    flex-direction: column;
  }
}

.carta-lugares {

  height: auto;
  border: 1px solid #DCE4E8;
  border-radius: 10px;
  position: relative;
  padding: 40px 20px;
  box-shadow: 0px 4px 4px 0px #00000040;

}

.cross-lugar {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  /* Ajusta el margen según sea necesario */
  cursor: pointer;
  /* Cambia el cursor al pasar sobre el icono */
}

.dentro-lugares {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.circle-lugar {
  min-width: 84px;
  min-height: 84px;
  max-width: 84px;
  max-height: 84px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-lugar {
  display: flex;
  flex: 1.2;
  gap: 15px;
}

.right-lugar {
  display: flex;
  flex: 2;
  flex-direction: column;
  gap: 20px;
}

.right-lugar span {
  display: flex;
}

.fechas-lugar {
  display: flex;
  gap: 20px;
}

@media (max-width:950px) {
  .fechas-lugar {
    flex-direction: column;
  }
}

@media (max-width:600px) {
  .dentro-lugares {
    flex-direction: column;
  }

  .etapas-plan {
    padding: 20px;
  }
}

.fechas-lugar span {
  gap: 10px;
}

.junto-lugar {
  display: flex;
  gap: 5px;
}

.junto-lugar p {
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  margin: 0;
  /* Elimina cualquier margen */
  padding: 0;
  /* Elimina cualquier padding */
}

.junto-lugar h2 {
  padding: 0;
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.junto-lugar input {
  height: 29px;
  width: 211px;
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}

.fechas-lugar span {
  display: flex;
  flex-direction: column;
}

.fechas-lugar h1,
p,
h2 {
  display: flex;
  margin: 0;
  padding: 0;
}

.left-lugar span {
  display: flex;
  flex-direction: column;
}

.left-lugar h2 {
  margin: 0;
  padding: 0;
}

.left-lugar hr {
  border: none;
  border-right: 1px solid #000;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  /* Elimina cualquier margen */
  padding: 0;
  /* Elimina cualquier padding */
  align-self: center;
  position: relative;
  top: 1%;
}

.titulo-lugar {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
}

.titulo-lugar h1,
p {
  margin: 0;
  padding: 0;
}

.titulo-lugar h1 {
  display: flex;
  align-content: center;
  text-align: left;
  justify-content: flex-start;
  font-family: 'Playfair Display';
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;

}

.descripcion-lugar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.descripcion-lugar p {
  position: relative;
  top: 2px;
}

.descripcion-lugar h2 {
  font-family: 'Sofia Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
}


.react-datepicker__current-month {
  text-align: center;
  width: 100%;
  font-weight: bold;
  position: relative;
  left: 75px;
}


.react-datepicker__navigation {
  position: absolute;
  top: 10px;
}

.boton-lugar {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.boton-lugar button {
  width: 430px;
  height: 53px;
  background-color: #0D6681;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50px;
}

.boton-lugar button p {
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;

}

.right-lugar h1 {
  font-family: 'Sofia Sans';
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
}

.fondo-lugares {
  padding: 45px;
}

.conjunto-lugares {
  display: flex;
  flex-direction: row;
  gap: 100px;
}

.left-lugares {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-width: 200px;
}

.busqueda-lugares {
  display: flex;
}

.busqueda-lugares input {
  /* Descuenta el espacio del botón */
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #C0C8CC;
  border-radius: 70px;
  padding-left: 20px;
  padding-right: 50px;
  color: #000;
  /* Color del placeholder */
  font-family: "Sofia Sans";
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.boton-busqueda-lugares {
  position: relative;

}

.busqueda-lugares {
  position: relative;
  width: 100%;

  /* Ajusta según necesidad */

}


.boton-busqueda-lugares {
  position: absolute;
  right: -5px;
  top: 55%;
  transform: translateY(-50%);
  cursor: pointer;
  color: gray;
}

.left-lugares span {
  border-top: 1px solid #C0C8CC;
  border-bottom: 1px solid #C0C8CC;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.left-lugares span h2 {
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans', Condensed;
  font-size: 22px;
  font-weight: 500;
  line-height: 26.4px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
  margin: 10px 5px 10px 5px;
}

.left-lugares span p {
  margin: 10px 5px 10px 5px;
  padding: 0;
}

.left-lugares h3 {
  font-family: 'Sofia Sans';
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171C1F;
  padding-left: 10px;
  cursor: pointer;
}

.left-lugares h3:hover {
  color: #616161;
}

.right-lugares {
  display: flex;
  flex-direction: column;
  flex: 3;
  gap: 20px;
  box-sizing: border-box;
}

.carta-p {
  display: flex;
  border: none;
  flex-direction: column;
  border-radius: 10px;
  background-color: var(--primary-color);
  padding: 40px 20px 20px 20px;
  color: #fff;
  gap: 20px;

}

.superior-p {
  display: flex;
  gap: 15px;
}

.circle-p {
  height: 114px;
  width: 114px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

.right-p {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.right-p span {
  display: flex;
  justify-content: space-between;

}

.right-p span h1 {
  color: #fff;
  font-family: 'Playfair Display';
  font-size: 50px;
  font-weight: 600;
  line-height: 52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
  padding-top: 5px;
}

.privado-p {
  display: flex;
}

.calendario-p {
  display: flex;
  gap: 5px;
  margin-top: -8px;
}

.calendario-p p,
h2,
h3 {
  margin: 0;
  padding: 0;
}

.calendario-p h3 {
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans', Condensed;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.calendario-p h2 {
  font-family: 'Sofia Sans', Condensed;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.calendario-p hr {
  border: 1px solid #ffffff;
  margin: 5px;
  padding: 0;
  height: 100%;
  position: relative;
  top: -6px;
}

.calendario-p h2 {
  position: relative;
  top: 1px;
}

.calendario-p p {
  position: relative;
  top: 1px;
}

.atributo-calendario {
  display: flex;
  gap: 5px;
}

@media(max-width:450px) {
  .calendario-p {
    flex-direction: column;

  }

  .calendario-p hr {
    display: none;
  }

  .fondo-lugares {
    padding: 20px;

  }

  .superior-p {
    gap: 5px;
  }

  .carta-p {
    padding: 10px 10px;
  }

  .right-p span {
    display: flex;
  }
}

.estado-curso {
  background-color: #EE9300;
  width: 84px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  padding: 0px 10px 0px 10px;
}

.estado-preparacion {
  border: 1px solid #fff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  width: 127px;
  color: #fff;
}

.estado-preparacion p {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.estado-curso p {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.estado-destino {
  background-color: #000000;
  width: 84px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 0px 10px;
}

.estado-destino p {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.inferior-p {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;


}

.inferior-p h2 {
  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;

}

.icono-p {
  display: flex;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.descript-p {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
}

.text-right2 h3 {
  font-family: 'Sofia Sans';
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.text-right2 h2,
p {
  margin: 0;
  padding: 0;
}

.text-right2 button {
  margin: 0;
  display: flex;
  border: none;
  align-items: center;
  width: 77px auto;
  height: 24px;
  padding: 2px 8px 2px 8px;
  gap: 5px;
  border-radius: 5px;

  background-color: var(--secondary-color);
}

.text-right2 button p {
  position: relative;
  top: 15px;
}

.text-right2 button p {
  position: relative;
  top: 5%;
}

.text-right2 button h2 {

  font-family: 'Sofia Sans';
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.10000000149011612px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #001F29;
}

@media (max-width: 800px) {
  .inferior-p {
    display: flex;
    flex-direction: column;
  }

  .right-p span h1 {
    font-size: 20px;
  }

  .circle-p {
    min-width: none;
    min-height: none;
    height: 50px;
    width: 50px;
  }

  .descript-p {
    padding-left: 20px;
  }
}

@media (max-width: 710px) {
  .conjunto-lugares {
    display: flex;
    flex-direction: column;
  }
}

.selected-filter {
  background-color: #ffa734;
  /* Color gris activado */
  border-radius: 5px;
}

.franja-calculo h3 {
  font-family: 'Sofia Sans', Condensed;
  font-size: 22px;
  font-weight: 500;
  line-height: 26.4px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #171D1E;
  margin: 8px;
}

.boton-p p {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0px;

}

.modal-posicion-points {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;

}


.modal-points {
  position: fixed;
  /* Fija el modal en la pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centra el modal */
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* Asegura que esté por encima de otros elementos */
  min-width: 330px;
  width: auto;
  /* Ajusta el tamaño según sea necesario */
  max-height: 80vh;
  /* Para que no sea más alto que la pantalla */
  overflow-y: auto;
  

}


.modal-points::-webkit-scrollbar {
  width: 8px;
}

.modal-points::-webkit-scrollbar-thumb {
  background-color: rgba(172, 172, 172, 0.5);
  border-radius: 4px;
}

.modal-points::-webkit-scrollbar-track {
  background: #d0d0d0;
}

.modal-points span {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #C0C8CC;
  gap: 10px;
  padding: 10px 0px;
}

.modal-points h2 {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0px 10px;
}

@media(min-width:850px){
  .modal-points{
    width: 700px !important;
  }
}

.imagen-points {
  position: relative;
}

.imagen-points img {
  display: flex;
  height: 206px;
  width: 100%;
  object-fit: cover;
}

.cuadrado-blanco-points {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 5px;
  background-color: #fff;
}

.cuadrado-blanco-points h2 {
  color: #000;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;
  padding: 0px 5px;
}

.stars-points {
  display: flex;
  gap: 10px;
  margin: 0px 10px;
  align-items: center;
}

.stars-points p {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #000;
}

.stars-points h3 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #000;
}

.fotos-videos-points {
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fotos-videos-points h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0;
}

.square-points {
  display: flex;
  flex-direction: row;
  padding: 0px 10px;
  gap: 10px;
  height: 206px;
}

.square-img-point {
  display: flex;
  flex: 1;
  position: relative;
}

.square-vid-point {
  display: flex;
  flex: 1;
  position: relative;
}

.square-img-point img,
.square-vid-point img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.square-img-point::after,
.square-vid-point::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  border-radius: 10px;
  pointer-events: none;
}

.square-img-point h3,
.square-vid-point h3 {
  display: flex;
  position: absolute;
  z-index: 1001;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
}

.fotos-videos-points button {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 5px 10px;
  width: max-content;
  margin: 10px auto 0;
  border: 1px solid #0290a07b;
  border-radius: 20px;
  background-color: #fff;
}

.fotos-videos-points button h3 {
  display: flex;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0px;
  color: var(--primary-color);
  margin: 0;
  padding: 0;
}

.resenas-x-user {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #C0C8CC;
}

.user-info-points {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0px 20px;
  text-align: left;
  justify-content: flex-start;
}

.user-info-points h2,
.user-info-points h3 {
  display: flex;
  padding: 0;
  text-align: center;
  align-items: center;
  margin: 0;
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
}

.stars-x-user {
  display: flex;
  padding: 0px 20px;
}

.resenas-x-user h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.1px;
  color: #000;
  padding: 0px 20px;
}

.fondo-claro-profile {
  display: flex;
  flex-direction: column;
  border: 1px solid #DCE4E8;
  background-color: #F5FAFB;
  padding: 40px 2vw;
  border-radius: 10px;
  gap: 20px;
}


.subtitulo-profile {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  position: relative;
  /* Necesario para ::after */
  align-items: flex-start;
  width: max-content;
  /* Asegura que el borde siga el texto */
}

.subtitulo-profile h2::after {
  content: "";
  width: 40%;
  /* Hace que la línea tenga el 40% del ancho del texto */
  height: 1px;
  max-height: 1px;
  /* Grosor del borde */
  background-color: #000;
  /* Color del borde */
  position: absolute;
  bottom: 0;
  left: 0;
}

.subtitulo-profile h2 {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  color: var(--text-color-secu);
  margin: 0;
  padding: 0;

}

.datos-personales {
  display: flex;
  flex-direction: row;
  height: min-content;
  gap: 20px;
  align-items: stretch;
}

.imagen-editar-profile {
  display: flex;
  position: relative;
  width: min-content;
}

.imagen-editar-profile i:last-child {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.texto-profile {
  display: flex;
  flex-direction: column;
}

.texto-profile span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.texto-profile span h2,
.texto-profile span i {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--primary-color);
}

.texto-profile h1 {
  display: flex;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans', Condensed;
  font-weight: 600;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--primary-color);
}

.texto-profile h3 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--button-color);
}

.logros-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  z-index: 1;
}

.logros-profile i {
  position: relative;
  overflow: hidden;
}

.logros-profile i:first-child {
  z-index: 5;
  right: 0px;
}

.logros-profile i:nth-child(2) {
  z-index: 4;
  right: 20px;
}

.logros-profile i:nth-child(3) {
  z-index: 3;
  right: 40px;

}

.logros-profile i:nth-child(4) {
  z-index: 2;
  right: 60px;

}

.logros-profile i:nth-child(5) {
  z-index: 1;
  right: 80px;

}

.logros-profile h2 {
  font-family: 'Sofia Sans';
  font-weight: 800;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 7%;
  text-transform: uppercase;
  color: var(--text-color-secu);
  margin: 0;
  padding: 0;
}

.stars-profile {
  display: flex;
  flex-wrap: nowrap;
}

.input-con-titulo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--divider);
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
  padding: 4px 10px;
  cursor: text;
  box-sizing: border-box;
  position: relative;
}

.input-con-titulo h2 {
  font-family: 'Sofia Sans';
  font-weight: 800;
  font-size: 12px !important;
  line-height: 100%;
  letter-spacing: 7%;
  text-transform: uppercase;
  color: var(--text-color-secu);
  padding: 0px !important;
}

.input-con-titulo>input {
  border: none;
  width: 90%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;
}

.justify-profile {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.input-con-titulo input:focus {
  outline: none;
  border: none;
}

.input-con-titulo:focus-within {
  border: 1px solid #000;
  color: white;
  /* Opcional: Cambia el color del texto para mejor visibilidad */
}

.input-con-titulo>i {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  padding-right: 10px;
  cursor: pointer;
  align-items: center;
}

.email-input h2,
.email-input input::placeholder {
  color: #40484c73;
}

.email-input input {
  pointer-events: none;
}

.colores-profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.colores-profile img {
  width: 78px;
  height: 28px;
  object-fit: cover;
  border-radius: 14px 14px 14px 14px;
  cursor: pointer;
}

.avatares-profile {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}


.input-con-titulo2.descripcion {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  border-radius: 10px;
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484C;


}

.input-con-titulo2.descripcion textarea {
  flex: 1;
  resize: none;
  border: none;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 10px;
}

.input-con-titulo2.descripcion textarea:focus {
  border-color: black;
  outline: none;
}

.subtitulo-input-profile {
  display: flex;
  align-items: center;
}

.subtitulo-input-profile i {
  display: flex;
}

.subtitulo-input-profile h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px !important;
  line-height: 24px;
  letter-spacing: 0px;
  color: #40484c;
}

.colores-profile h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: #000;
}

.colores-profile span {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.circulo1-profile,
.circulo2-profile,
.circulo3-profile,
.circulo4-profile {
  display: flex;
  min-width: 37px;
  min-height: 37px;
  max-width: 37px;
  max-height: 37px;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  border: 1px solid #C0C8CC;
}

.circulo1-profile {
  background-color: #5F2263
}

.circulo2-profile {
  background-color: #EE9300;
}


.circulo3-profile {
  background-color: #004D63;
}

.circulo4-profile {
  background-color: #EE9300;
}

.preference-languaje {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 20px;
  box-sizing: border-box;
}

.container-select {
  flex: 1;
  position: relative;
}

.preference-languaje>h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;

}

.preference-languaje2 {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 20px;
  box-sizing: border-box;
}

.preference-languaje2 h3 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;


}

.preference-languaje2 h2 {
  font-family: 'Sofia Sans';
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #000;
  padding-bottom: 20px;

}

.preference-languaje2 button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  border: none;
  border-radius: 24px 24px 24px 24px;
  background-color: var(--primary-color);
  cursor: pointer;
}

.preference-languaje2 button h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--text-color)
}

.iconos-avatares {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.iconos-avatares .avatar img {
  height: 66px;
  width: 66px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.iconos-avatares .avatar,
.iconos-avatares .privado {
  height: min-content;
  width: min-content;
  position: relative;
}

.iconos-avatares .privado i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1);
}

.iconos-avatares .privado img {
  opacity: 0.6;
  cursor: default;
}

.selectboxes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 58px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid var(--divider);
  position: relative;
  cursor: pointer;
}

.selectboxes i {
  margin: 0;
  padding: 0;
}

.selectboxes h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: var(--third-color);
  margin: 0;
  padding: 0;
}

.opciones-boxes {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background-color: var(--background-color);
  z-index: 3;
}

.opcion-boxes {
  padding: 10px 10px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
}

.opcion-boxes:hover {
  background-color: #00000014;
}

.opcion-boxes h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: var(--third-color);
  margin: 0;
  padding: 0;
}

.opcion-boxes:last-child {
  border-bottom: none;
}

.container-select select {
  display: flex;
  height: 58px;
  padding: 0 20px;
  /* Añade padding a los lados */
  border-radius: 10px;
  border: 1px solid #C0C8CC;
  appearance: none;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #757575;
  position: relative;
  width: 100%;
  cursor: pointer;
}

.container-select i {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Contenedor principal del Navbar */

.navbar {
  display: flex;
  align-items: center;
  padding: 10px 45px;
  background-color: #ffffff;
  border-bottom: 1.5px solid #afafaf3a;
  height: 15vh;
  justify-content: space-between;
  z-index: 2;
  position: relative;
}

/* Logo */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.navbar-logo img {
  display: flex;
  width: 64px;
  height: 64px;
}

.navbar-logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  z-index: 2;
}

.navbar-logo-sidebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: column;
}

.navbar-logo-sidebar img {
  display: flex;
  width: 100px;
  height: 100px;
}

.navbar-logo-sidebar h2 {
  font-size: 32px;
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
}


.navbar-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #555555;
  z-index: 2;
}

/* Links de navegación */
.navbar-links {
  z-index: 2;
  display: flex;
  list-style: none;
  gap: 20px;
  justify-content: flex-end;
  flex-grow: 1;
  font-family: "Sofia Sans";
  transition: 1s;

}


.navbar-links li a {
  text-decoration: none;
  z-index: 2;
  color: #333333;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.9s ease;
  color: var(--theme-wtb-sys-light-on-background, #171C1F);
  /* theme-wtb/body/Menu Font */
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */

}

.navbar-links li a:hover {
  color: #007BFF;
  z-index: 2;

}


/* Perfil */
.navbar-profile {
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  cursor: pointer;
}

.navbar-icon {
  z-index: 2;
  color: #00495D;
  padding: 10px;
}

.navbar-icon:hover {
  color: #007BFF;
  z-index: 2;
}

.navbar-dropdown {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #7F7F7F;
  /* Color de la flecha */
  position: relative;
  /* Necesario para posicionar el rombo dentro de este contenedor */
  display: inline-block;
  /* Asegura que el dropdown y el rombo estén alineados */
  z-index: 2;
}

.navbar-dropdown::after {
  content: '';
  /* Asegura que el pseudo-elemento se renderice */
  width: 10px;
  /* Tamaño del rombo */
  height: 10px;
  /* Tamaño del rombo */
  position: absolute;
  top: -1600px;
  /* Ajusta según sea necesario para posicionar el rombo */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  /* Centra y rota el cuadrado 45 grados */
  background-color: #ffffff;
  /* Color del rombo */
  display: block;
  /* Permite asignar dimensiones al pseudo-elemento */
  z-index: 2;
  /* Asegura que el rombo esté por encima de otros elementos si es necesario */
}

.navbar-dropdown:hover {
  color: #007BFF;

}



/* Línea vertical */
.vertical-line {
  width: 2px;
  height: 30px;
  /* Altura de la línea vertical */
  background-color: #7F7F7F;
  margin: 0 10px;
  display: inline-block;
  /* Asegura que se muestre correctamente */
  z-index: 2;

}

.flecha {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 37.5%;
  bottom: 37.5%;
  /* theme-wtb/sys/light/on-background */
  border: 2px solid #171C1F;
  z-index: 2;
}

@media (max-width: 768px) {
  .navbar-links {
    display: none;
    /* Hide by default */
  }

  .navbar-links.active {
    display: block;
    /* Show when active */
    flex-direction: column;
    width: 60vw;
    position: absolute;
    top: 0%;
    right: 0;
    z-index: 1002;
    text-align: center;
    opacity: 1;




  }

  .navbar-links li {
    width: 100%;
    padding: 10px 0;

  }

  .navbar-links li a {
    color: #ffffff;

  }

  .navbar-toggle {
    display: block;
    cursor: pointer;
    color: rgb(0, 0, 0);
    font-size: 24px;

  }

  .vertical-line {
    display: none;
    /* Hide vertical line on small screens */
  }

  .navbar-profile {
    display: none;
  }

  .navbar-dropdown {
    display: none;
  }
}

@media (max-width: 800px) {
  .navbar-links.active {
    width: 40vw;
  }
}

/* nav-icon-5 */
.nav-icon-5 {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  z-index: 1003;
}

.nav-icon-5 span {
  background-color: #000000;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
  transition-duration: 500ms
}

.nav-icon-5 span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.nav-icon-5 span:nth-child(2) {
  top: 13px;
  left: 0px;
  opacity: 1;
}

.nav-icon-5 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(1.1);
}

.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}

.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}

.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 13px;
}

.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}

.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 13px;

}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  /* Transparente por defecto */
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  /* Debajo del sidebar */
  pointer-events: none;
  /* No bloquea clics cuando está oculto */
}

.sidebar-overlay.active {
  background: rgba(0, 0, 0, 0.5);
  /* Fondo oscuro */
  opacity: 1;
  pointer-events: auto;
  /* Permite cerrar el sidebar al hacer click */
}

.bd-div {
  background-color: var(--background-color);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  position: fixed;
  /* Evita que afecte el flujo del contenido */
  top: 0;
  right: -80vw;
  /* Inicialmente oculta fuera de la vista */
  width: 40vw;

  .bd-div {
    background-color: var(--background-color);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: -100vw;
    width: 40vw;
    height: 100%;
    z-index: 1003;
    transition: right 0.6s ease;
    overflow-y: auto;
  }

  .bd-div.active {
    right: 0;
  }

  @media (max-width: 600px) {
    .bd-div {
      width: 60vw;
    }
  }

  @media (max-width: 400px) {
    .bd-div {
      width: 100vw;
    }
  }

  height: 100%;
  z-index: 1000;
  /* Asegura que esté por encima de otros elementos */
  transition: right 0.6s ease;
  overflow-y: auto;


}

.bd-div.active {
  right: 0;
  /* Muestra la barra lateral */
}

@media (max-width: 600px) {
  .navbar-links.active {
    width: 60vw;
  }

  .bd-div {
    width: 60vw;

  }
}

@media (max-width: 400px) {
  .navbar-links.active {
    width: 80vw;
  }

  .bd-div {
    width: 80vw;

  }
}

.box-with-links {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background-color: var(--background-color);
  width: 80%;
  list-style: none;
  padding: 10px 20px;
  /* Quita los puntos de la lista */
}

.box-with-links i {
  display: flex;
}

.link-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #BBE9FF;
}

.link-primeraparte {
  display: flex;
  gap: 5px;
  align-items: center;
}

.link-primeraparte li a {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #001F29;
}

.box-with-links li {
  text-decoration: none;
}

.perfilylogros-nav button {
  display: flex;
  width: 95%;
  border: 1px solid #BBE9FF;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: var(--background-color);
}

.perfilylogros-nav button h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: var(--primary-color);
}

.perfilylogros-nav>h3 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 600;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--primary-color);
}

@media(width>768px) {
  .navbar-fixed {
    display: none;
  }
}

.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.95);

  align-items: center;

  padding: 10px 45px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  transition: top 0.3s ease-in-out;

}

.navbar-fijado {
  display: flex;
  justify-content: space-between;
  padding-right: 80px;
  align-items: center;

}

/* Asegura que el Burger Button esté en la esquina superior derecha */
.navbar-fixed .navbar-toggle {
  position: absolute;
  top: 20%;
  left: 75%;
}

@media(max-width:500px) {
  .navbar-fixed .navbar-toggle {
    left: 80vw;
  }
}

.navbar-links.active {
  position: fixed;
  z-index: 1003;
  overflow-y: auto;
  overflow-x: hidden;
  /* Evita el scroll horizontal */
  height: 100vh;
  /* Ocupar toda la pantalla */
}

.perfilylogros-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  gap: 5px;
  padding-top: 10vh;
  padding-bottom: 30vh;

}

@media (min-width: 769px) {
  .navbar-toggle {
    display: none;
  }

}

.profile-modal {
  position: absolute;
  top: 120px;
  /* Ajusta según la altura del navbar */
  right: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 10;
  min-width: 100px;
}

.profile-modal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-modal li {
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #000;
}

.profile-modal li:hover {
  background: #f5f5f5;
}

/* Modal para cuando baje la barra de navegación */
.profile-modal2 {
  position: absolute;
  top: 80px;
  /* Ajusta según la altura del navbar */
  right: 100px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 10;
  min-width: 80px;
}

.profile-modal2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-modal2 li {
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 13px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #000;
}

.profile-modal2 li:hover {
  background: #f5f5f5;
}

.icon5 {
  color: var(--primary-color);
  font-size: 16px;
  margin-right: 10px;

}

.icon5-warning {
  color: white;
  font-size: 16px;
  margin-right: 10px;
}

.icon {
  color: var(--primary-color);
}

@media(max-width:820px) {
  .datos-personales {
    flex-direction: column;
  }
}

.input-con-edit-privacy {
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 0 10px;
  height: 58px;
  background-color: var(--background-color);
  display: flex;
  align-items: center;
  position: relative;

}

.input-con-edit-privacy:focus-within {
  border-color: black;
  /* Se vuelve negro al seleccionar el input o el icono */
}

.input-con-edit-privacy i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.input-con-edit-privacy input {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #40484C;
}

.emergency-numbers {
  display: flex;
  flex-direction: column;
}

.emergency-number {
  display: flex;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--divider);
  padding: 0px 10px;
  align-items: center;
  height: 44px;
  position: relative;
}

.emergency-number i {
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}

.emergency-number h2 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  margin: 0;
  padding: 0;
  color: #40484C;
}

.emergency-Icons {
  color: var(--icon-color);
  gap: 0px;
}

.ultimospan {
  display: flex;
  justify-content: space-between;
}

.ultimospan-iconos {
  display: flex;
  gap: 20px;
  padding-right: 10px;
}

.ultimospan-iconos-icono {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.ultimospan-iconos-icono h2,
.ultimospan-iconos-icono p {
  margin: -2px;
  padding: 0;
}

.final-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.final-profile span {
  display: flex;
  align-items: center;
  gap: 10px
}

.final-profile span h3 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: 9%;
  text-align: right;
  vertical-align: middle;
  text-transform: uppercase;
  color: #10A0C8;
}

.final-profile span i {
  display: flex;
  align-items: center;
}

.modal-overlay-profile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Fondo oscuro */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content-profile {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.botones-profile {
  display: flex;
  gap: 10px;
  padding-top: 20px;
}

.botones-profile button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border-radius: 10px;
  border: none;
  width: 100%;
  height: 32px;
  color: var(--text-color);
}

.botones-profile button:first-child {
  background-color: #BBE9FF;
  color: #001F29;
}

.botones-profile button h4,
.botones-profile button i {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.botones-profile button h4 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}

.icono-mas-member {
  display: flex;
  gap: 5px;
  align-items: center;
  padding-bottom: 20px;
}

.icono-mas-member i,
.icono-mas-member h2 {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--button-color);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider5 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid var(--divider);
}

.slider5:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #70787D;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider5 {
  background-color: var(--primary-color);
}

input:focus+.slider5 {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.slider5:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: var(--background-color);
}

/* Rounded sliders */
.slider5.round {
  border-radius: 34px;
}

.slider5.round:before {
  border-radius: 50%;
}

.renovate-subscription {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}

.renovate-subscription h3,
.renovate-subscription h4,
.renovate-subscription h5 {
  margin: 0;
  padding: 0;
}

.renovate-subscription h3 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 'Body/Size', Medium;
  line-height: 140%;
  letter-spacing: 0%;
  color: #000;
}

.renovate-subscription h4 {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.25px;
  color: #757575;
}

.renovate-subscription h5 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #10A0C8;
}

.renovate-subscription span {
  display: flex;
  gap: 20px;
  align-items: center;
}

.renovate-subscription span h2 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #000;
}

.card-subscription {
  display: flex;
  border: 1px solid var(--divider);
  background-color: #ECF2F3;
  width: 200px;
  height: 120px;
  position: relative;
}

.card-subscription span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-subscription span h2 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
  padding: 0;
}

.card-subscription span h3 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #000;
  margin: 0;
  padding: 0;
}

.edit-or-delete-sub {
  display: flex;
  position: absolute;
  right: 0;
  top: 100%;
  padding-top: 10px;
  gap: 5px;
}

.edit-or-delete-sub h2 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #10A0C8;
}

.add-sub {
  display: flex;
  position: absolute;
  left: 100%;
  top: 50%;
  padding-left: 20px;

}

.add-sub i {
  display: flex;
  align-items: center;
}

.add-sub h2 {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #10A0C8;
}

.preference-languaje table {
  border-collapse: collapse;
  border-bottom: 1px solid var(--divider);
  max-width: 648px;

}

.preference-languaje table tr {
  background-color: var(--background-color);
  border-top: 1px solid var(--divider);
}

.preference-languaje table td {
  text-align: left;
  height: 42px;
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #40484C;
}

.preference-languaje table td:nth-child(2) {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
}

.preference-languaje table td:nth-child(2) h2 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #40484C;
  align-items: center;
}

.preference-languaje table td h3 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #171D1E;
}

.preference-languaje table th {
  font-family: 'Sofia Sans', Condensed;
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0%;
  height: 42px;
  text-align: left;
}

.preference-languaje table tr th:last-child {
  text-align: center;
}

.preference-languaje table tr td:last-child {
  text-align: center;
}

@media(max-width:756px) {
  .preference-languaje table th {
    display: none;
  }
}

.botones-subscriptions {
  display: flex;
  gap: 10px
}

.botones-subscriptions button {
  height: 60px;
  border-radius: 20px;
  width: 193px;
  max-width: 193px;
  border: none;
  background-color: var(--primary-color);
  color: var(--text-color);
  cursor: pointer;
}

.botones-subscriptions button h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}

.botones-subscriptions button:last-child {
  color: #001F29;
  background-color: #BBE9FF;
}

.type-button-profile {
  display: flex;
  width: 100%;
  padding-top: 10px;
}

.type-button-profile button {
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  gap: 10px;
  width: 100%;
  height: 42px;
  justify-content: center;
  cursor: pointer;
}

.type-button-profile i {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.type-button-profile button h3 {
  font-family: 'Sofia Sans';
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--primary-color);
  display: flex;
  align-items: center;

}

.horayfechaprinci {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 10px 45px;
  background-color: var(--background-color-alternative);
  height: auto;
}

.conjunto-horafecha {
  display: flex;
  align-items: center;
}

.flex-horafecha {
  display: flex;
  align-items: center;

}

@media(max-width:500px) {
  .flex-horafecha {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .horayfechaprinci {
    padding: 5px 10px;
  }
}

.register-page {
  height: full;
  display: flex;
  justify-content: center;
  align-content: center;
}

/* Login */
.login-overlay,
.register-overlay {
    /* Ocupa toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo semi-transparente para enfocar la modal */
    background-color: rgba(0, 0, 0, 0.6); 
    
    /* Centra el contenido (login-content) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Asegura que esté por encima de todo */
    z-index: 1000; 
}

.login-content,
.register-content {
    /* Fondo y borde para la sensación náutica/limpia */
    background-color: white;
    border-radius: 12px; /* Esquinas suaves */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra elegante */
    box-sizing: border-box;
    padding: 0 35px 35px 35px; 
    width: 90%;
    max-width: 550px; /* Limita el ancho para móviles y escritorio */
    position: relative;
    background-image: none; 
    overflow: visible;
}

/* Login -> Cabecera con imagen de barco */
.marine-header {
    height: 160px; 
    width: calc(100% + 35px);
    background-color: #0d6681; 
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;
    overflow: visible; 
    margin-left: -35px;
    margin-bottom: 15px;

    display: flex;
    align-items: flex-end; 
    justify-content: flex-end; 
    padding: 10px 25px 10px 10px; /* Arriba Der Abajo Izq */

    background-image: url("boat_outline.svg"); 
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: 35% 90%; /* horizontal vertical */
}

.marine-header::after {
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 70px; 
    
    background-image: url("waves_outline.svg");
    
    background-repeat: repeat-x; /* Repetir horizontalmente */
    background-size: 300px; 
    background-position: left bottom; 
    
    z-index: 1;
}


/* Registrarse -> Cabecera con imagen de barco */
.register-marine-header {
    height: 170px; 
    width: calc(100% + 35px);
    background-color: #0d6681; 
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;
    overflow: visible; 
    margin-left: -35px;
    margin-bottom: 15px;

    display: flex;
    align-items: flex-end; 
    justify-content: flex-end; 
    padding: 10px 25px 10px 10px; /* Arriba Der Abajo Izq */

    background-image: url("sailor_outline.svg"); 
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: 25% 90%; /* horizontal vertical */
}

.register-marine-header::after {
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 70px; 
    
    background-image: url("waves_outline.svg");
    
    background-repeat: repeat-x; /* Repetir horizontalmente */
    background-size: 260px; 
    background-position: left bottom; 
    
    z-index: 1;
}

.loginheaderimg {
    height: 250px; /* Altura */
    width: auto; 
    display: block; 
    
    /* Controlar posicion */
    margin: 0px -15px 10px 0px; /* Arriba Der Abajo Izq */    
}

.login-content h2, 
.register-content h2 {
    color: var(--primary, #5f2263); /* Título en el color principal */
    text-align: left;
    font-size: 2em;
    font-weight: 900;
    font-family: 'Sofia Sans';
    margin-bottom: 10px;
}

.login.close-btn, 
.register.close-btn  {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}
.login.close-btn:hover, 
.register-close-btn:hover  {
    transform: scale(1.1);
}

.login-content form, 
.register-content form {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    gap: 15px; /* Espacio entre inputs y errores */
}

.login-content input[type="email"],
.login-content input[type="password"], 
.register-content input {
    padding: 12px 15px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.login-content input:focus, 
.register-content input:focus {
    border-color: var(--primary, #0d6681); /* Resalta el foco con el color primario */
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 102, 129, 0.2); /* Sombra suave para el foco */
}

.input-error {
    border-color: red !important;
}

.error {
    color: red;
    font-size: 0.9em;
    margin-top: -10px; /* Acercar al input */
}

.button-container {
    /* Para poner los botones lado a lado */
    display: flex;
    gap: 40px; 
    margin-top: 20px;
    justify-content: space-between; /* Distribuye los botones */
    align-items: center;
}

.button-container button {
    flex-grow: 1; /* Permite que ambos ocupen espacio */
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s, border-color 0.3s;
    box-sizing: border-box; 
}

/* Botón de Submit (Iniciar Sesión/Registrarse) */
.button-container button[type="submit"] {
    background-color: var(--primary, #0d6681);
    color: white;
    border: 2px solid var(--primary, #0d6681);
    width: 60%;
}

.button-container button[type="submit"]:hover:not(:disabled) {
    background-color: #08495f; /* Un poco más oscuro al pasar el mouse */
}

/* Botón Secundario (Cambiar a Registro/Login) */
.button-container button[type="button"] {
    background-color: white; 
    color: var(--accent, #5f2263);
    border: 2px solid var(--accent, #5f2263); 
    width: 40%;
}

.button-container button[type="button"]:hover {
    background-color: #fde8fe; /* Fondo claro al pasar el mouse */
    color: var(--accent, #5f2263);
}

.button-container button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Spinner loading POIs */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-simple {
  display: inline-block; 
  width: 16px;          
  height: 16px;
  border: 3px solid #f3f3f3; 
  border-top: 3px solid #1976D2; 
  border-radius: 50%; 
  animation: spin 1s linear infinite; 
  vertical-align: middle; 
}

.loaderContainerStyle {
  position: absolute;
  bottom: auto; 
  left: 50%;  
  top: 85px;  
  right: auto; 
  
  width: auto;
  height: auto;  
  background-color: transparent;   
  z-index: 100;
  pointer-events: none; 
}

.loaderPOIs { 
  padding: 12px; 
  border-radius: 5px;
  background-color: #e49106; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra más sutil */

  display: flex;
  align-items: center; 
  gap: 10px;
  pointer-events: auto; 

  color: #fff;
  font-size: 16px;
  font-weight: 900;
  font-family: 'Sofia Sans';
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); 
}


/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
  border-radius: 4px;
  margin: 8px 0;
  min-height: 20px;
  min-width: 60px;
}

.loading-message {
  background-color: #eee;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: not-allowed;
  font-size: 1rem;
  margin: 1rem auto;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.policy-conditions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.policy-conditions>h1 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 40px;
}

.policy-conditions>h3 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 20px;
}

.policy-conditions span {
  max-width: 50vw;
  border-top: 1px solid #c0c8cc;
  border-left: 1px solid #c0c8cc;
  border-right: 1px solid #c0c8cc;
  display: flex;
  flex-direction: column;
  justify-content: left;
  min-width: 50vw;
  padding: 10px;
}

.policy-conditions span:last-child {
  border-bottom: 1px solid #c0c8cc;
}

.policy-conditions span h2 {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-size: 20px;
  color: #40484C;
}

.policy-conditions p {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.policy-conditions ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

.policy-conditions li {
  font-family: 'Sofia Sans';
  font-weight: 300;
  font-size: 15px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.5;
}