@font-face {
  font-family: Dmon Var;
  src: url('../fonts/Dmon_var.woff2') format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Piedras;
  src: url('../fonts/Piedras.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --amarillo: #fbad17;
  --almost-black: #362113;
  --transparent: #3330;
  --white: #fff;
  --beige: #efe5db;
  --durazno: #d29c5e;
  --verde: #607650;
  --azul: #518b8e;
}

body {
  color: #333;
  font-family: Dmon Var, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.body-home {
  background-color: #c49a9a;
  background-image: url('../images/Desktop---3.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto;
  height: 8000px;
}

.header {
  z-index: 4;
  padding: 1.2rem 2rem;
  position: absolute;
  inset: 0% 0% auto;
}

.container-header {
  background-color: var(--amarillo);
  border-radius: 20rem;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
  padding: .6rem 2.9rem;
  display: flex;
}

.links-header {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  justify-content: flex-start;
  align-items: center;
  width: 33.33%;
  display: flex;
}

.a-link-header {
  color: var(--almost-black);
  font-size: .96rem;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
}

.logo-container {
  justify-content: center;
  align-items: center;
  width: 33.33%;
  display: flex;
}

.side-btns {
  grid-column-gap: 2.1rem;
  grid-row-gap: 2.1rem;
  justify-content: flex-end;
  align-items: center;
  width: 33.33%;
  padding-right: 1rem;
  display: flex;
}

.logo-header {
  width: 3rem;
}

.boton-general {
  background-color: var(--amarillo);
  filter: drop-shadow(0 0 1px #000000b3) drop-shadow(0 0 1px #000000b3) drop-shadow(0 0 1px #000000b3);
  color: #38240d;
  text-transform: uppercase;
  border-top-left-radius: .2rem;
  border-bottom-left-radius: .2rem;
  padding: .5rem 1rem .4rem 1.3rem;
  font-family: Dmon Var, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1em;
  transition: all .4s;
  position: relative;
}

.boton-general:hover {
  filter: contrast(400%) saturate(0%) invert() drop-shadow(0 0 1px #000000b3) drop-shadow(0 0 1px #000000b3) drop-shadow(0 0 1px #000000b3);
}

.boton-general.grande {
  background-color: var(--amarillo);
  margin-right: 1.3rem;
  padding: .5rem 1.6rem .4rem 1.5rem;
  font-size: 1.3rem;
}

.boton-general.regresa {
  padding-left: 1rem;
  padding-right: 1.3rem;
  position: absolute;
  top: 1.7rem;
  left: 2.2rem;
}

.flecha {
  z-index: 1;
  color: var(--transparent);
  background-image: url('../images/Vector.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.1rem;
  position: absolute;
  inset: 0% -.9rem 0% auto;
}

.flecha.grande {
  background-size: 100% 100%;
  right: -1rem;
}

.flecha.regresa {
  left: -.8rem;
  right: 0%;
  transform: rotate(180deg);
}

.section-hero {
  background-color: #000;
  height: 55.2rem;
  padding-top: 17.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}

.container-hero {
  z-index: 1;
  width: 100%;
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.titulo-hero {
  color: var(--amarillo);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1.4rem;
  font-family: Piedras, Impact, sans-serif;
  font-size: 5.6rem;
  font-weight: 400;
  line-height: 1em;
}

.desc-hero {
  color: var(--white);
  width: 42%;
  margin-bottom: 2.7rem;
  font-size: 1.3rem;
  line-height: 1.2em;
}

.bottom-hero {
  z-index: 1;
  padding-bottom: 3.1rem;
  position: absolute;
  inset: auto 0% 0%;
}

.p-un-esfuerzo {
  color: var(--white);
  text-align: center;
  max-width: 85rem;
  margin-bottom: 1.6rem;
  margin-left: auto;
  margin-right: auto;
  font-size: .8rem;
  line-height: 1em;
}

.lista-logos {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  justify-content: center;
  align-items: center;
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.logo-hero {
  max-width: 4.7rem;
  max-height: 1.7rem;
}

.logo-hero.grande {
  max-width: 10rem;
  max-height: 2.2rem;
}

.imagen-fondo {
  z-index: 0;
  opacity: .86;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.section-senderos {
  background-color: var(--beige);
  padding: 6.7rem 2rem 4rem;
}

.container-senderos {
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
}

.titulo-senderos {
  color: var(--almost-black);
  text-align: center;
  letter-spacing: -.15rem;
  text-transform: uppercase;
  width: 58%;
  margin: 0 auto 1.7rem;
  font-family: Piedras, Impact, sans-serif;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1em;
}

.p-sendero {
  color: var(--almost-black);
  text-align: center;
  letter-spacing: -.02em;
  width: 43%;
  margin-bottom: 4.1rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.3rem;
  line-height: 1.3em;
}

.contenedor-mapa {
  border: 1px solid var(--amarillo);
  background-color: var(--white);
  border-radius: 1.6rem;
  height: 43.2rem;
  position: relative;
  overflow: hidden;
}

.contenedor-mapa.debug {
  top: 7px;
  left: 27px;
}

.mapa-real {
  z-index: 0;
  height: 100%;
  position: relative;
}

.side-mapa {
  z-index: 1;
  background-color: #efe5db;
  border-radius: 1rem;
  width: 22.9rem;
  padding-top: 1.9rem;
  padding-left: 8.3rem;
  padding-right: 1.5rem;
  position: absolute;
  top: 2.6rem;
  bottom: 2.1rem;
  left: 1.8rem;
  overflow: scroll;
}

.side-mapa.debug {
  background-color: var(--transparent);
}

.filtro-side {
  z-index: 2;
  width: 6.6rem;
  padding-top: 1.7rem;
  position: absolute;
  inset: 2.6rem auto 2.1rem 2.7rem;
}

.label-filtro {
  border-bottom: 1px solid var(--almost-black);
  text-transform: uppercase;
  margin-bottom: 0;
  padding-bottom: .2rem;
  font-size: .85rem;
  line-height: 1em;
}

.lista-items {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.6rem;
  padding-top: .6rem;
  display: flex;
}

.link-filtro {
  color: var(--almost-black);
  white-space: nowrap;
  margin-bottom: .35rem;
  margin-right: -1rem;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
}

.hover-filtro-link {
  transition: all .2s;
  position: relative;
  left: -1rem;
}

.hover-filtro-link:hover {
  left: 0;
}

.hover-filtro-link.on {
  font-weight: 600;
  left: 0;
}

.item-sendero {
  border: 1px solid var(--almost-black);
  border-radius: .7rem;
  height: 7.2rem;
  margin-bottom: 1.2rem;
  padding-top: .5rem;
  padding-left: 5.8rem;
  padding-right: 1rem;
  text-decoration: none;
  position: relative;
}

.item-sendero.respuesta {
  background-color: var(--beige);
  margin-bottom: 0;
  padding-left: 17%;
}

.imagen-side {
  object-fit: cover;
  border-radius: .7rem;
  width: 39%;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
  overflow: hidden;
}

.titulo-item {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-bottom: .7rem;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1em;
}

.desc-item {
  color: var(--almost-black);
  margin-bottom: 0;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1em;
}

.flecha-item {
  width: .7rem;
  position: absolute;
  bottom: .6rem;
  right: 1rem;
}

.section-toma {
  background-color: var(--beige);
  padding: 3rem 2rem;
}

.container-toma {
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
}

.top-toma {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3.5rem;
  display: flex;
}

.titulo-toma {
  color: var(--almost-black);
  letter-spacing: -.15rem;
  text-transform: uppercase;
  width: 44%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1em;
}

.side-tomo {
  width: 32.5%;
}

.p-con-5-preg {
  color: var(--almost-black);
  letter-spacing: -.02em;
  margin-bottom: 1.7rem;
  font-size: 1.3rem;
  line-height: 1.3em;
}

.preguntas-grupo {
  border: 2px solid var(--almost-black);
  border-radius: 1.6rem;
  height: 43.3rem;
  overflow: hidden;
}

.slider-preguntas {
  background-color: #d29c5e;
  height: 100%;
}

.hide-btn {
  display: none;
}

.slide-inicial {
  background-color: var(--durazno);
  height: 100%;
  padding-top: 6.3rem;
}

.slide-inicial.final {
  background-color: var(--verde);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  display: flex;
}

.titulo-pregunta {
  color: var(--almost-black);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 600;
  line-height: 1em;
}

.titulo-elemento-pregunta {
  color: var(--almost-black);
  text-align: center;
  text-transform: uppercase;
  width: 50%;
  min-height: 2.1em;
  margin: 0 auto 3.6rem;
  font-family: Piedras, Impact, sans-serif;
  font-size: 3.2rem;
  line-height: 1em;
}

.titulo-elemento-pregunta.final {
  color: var(--beige);
  margin-bottom: 0;
}

.sendero-contenedor {
  width: 67%;
  margin-left: auto;
  margin-right: auto;
}

.indicador {
  border: 2px solid #000;
  border-radius: 20rem;
  justify-content: space-between;
  align-items: flex-end;
  height: 1.1rem;
  padding-left: .8rem;
  display: flex;
}

.avance {
  background-image: url('../images/Vector.png');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
  border-radius: 20rem;
  width: 2%;
  height: 76%;
  margin-bottom: .1rem;
  transition: all .8s;
  position: relative;
}

.monito-indicador {
  width: .7rem;
  position: absolute;
  bottom: 1.1rem;
  right: 0;
}

.lista-de-opciones {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin-top: 9.1rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.section-videos {
  background-color: var(--beige);
  padding: 2.2rem 2rem 2rem;
  overflow: hidden;
}

.container-videos {
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
}

.filtros-videos {
  grid-column-gap: 1.8rem;
  grid-row-gap: 1.8rem;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.link-filtro-grande {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-bottom: .35rem;
  margin-right: -1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
}

.grupo-texto-y-videos {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.col-a-lorem {
  width: 26%;
  padding-top: .4rem;
}

.smal-titulo-video {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-family: Dmon Var, Verdana, sans-serif;
  font-size: .74rem;
  font-weight: 400;
  line-height: 1em;
}

.titulo-video {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1.6rem;
  font-family: Piedras, Impact, sans-serif;
  font-size: 3.2rem;
  line-height: 1em;
}

.p-video {
  color: var(--almost-black);
  margin-bottom: 2.4rem;
  font-size: 1rem;
  line-height: 1.35em;
}

.slider-videos {
  width: 73.2rem;
  margin-right: -16rem;
}

.slide-video {
  float: left;
  width: 25%;
  padding-left: .3rem;
  padding-right: .3rem;
}

.slide-video.hidden-slide {
  display: none;
}

.inside-video {
  border-radius: 1rem;
  height: 30.6rem;
  position: relative;
  overflow: hidden;
}

.bg-video {
  z-index: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.play-pause-btn {
  width: 5rem;
  height: 5rem;
  position: static;
}

.play-icon {
  z-index: 1;
  background-color: #0000004d;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all .2s;
  display: flex;
  position: relative;
}

.play-icon.play {
  opacity: 0;
}

.play-icon-image {
  width: 5.5rem;
}

.flechas-slider {
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 2.8rem;
  display: flex;
}

.btn-slider {
  border: 1px solid var(--almost-black);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
}

.btn-slider.left {
  margin-right: 1.6rem;
  transform: rotate(180deg);
}

.icon-slider {
  width: .9rem;
}

.section-idependiente {
  background-color: var(--beige);
  padding: 3.3rem 2rem 3.5rem;
}

.container-independiente {
  max-width: 83.6rem;
  height: 46.8rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.p-independiente {
  z-index: 1;
  background-color: var(--almost-black);
  color: var(--amarillo);
  border-radius: .6rem;
  width: 29.6rem;
  margin-bottom: 0;
  padding: .5rem .5rem .5rem .9rem;
  font-size: 1rem;
  line-height: 1.33em;
  position: absolute;
  top: 1.9rem;
  left: 1.9rem;
}

.btns-independiente {
  z-index: 1;
  grid-column-gap: 1.7rem;
  grid-row-gap: 1.7rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  bottom: 1.9rem;
  left: 1.9rem;
}

.titulo-grande-senderos {
  z-index: 1;
  color: var(--amarillo);
  text-transform: uppercase;
  width: 23.4rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 4.2rem;
  line-height: 1em;
  position: absolute;
  bottom: 1.9rem;
  right: 1.9rem;
}

.grafico-1 {
  z-index: 1;
  width: 15.1rem;
  position: absolute;
  top: -2.8rem;
  right: .7rem;
}

.grafico-2 {
  z-index: 1;
  width: 13.5rem;
  position: absolute;
  bottom: -2.9rem;
  right: 30.2rem;
}

.imagen-fondo-indep {
  z-index: 0;
  object-fit: cover;
  border-radius: 2rem;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.section-explore-recursos {
  background-color: var(--beige);
  padding: 3rem 2rem 4rem;
  overflow: hidden;
}

.container-explora {
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
}

.top-recursos-slide {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.flechas-recursos {
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.titulo-explora-recursos {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 3.2rem;
  line-height: 1em;
}

.slides-recursos {
  width: 95.2rem;
  margin-top: 2.7rem;
  margin-left: -1.3rem;
}

.col-explora {
  float: left;
  width: 25%;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}

.col-explora.hide-slide-recurso {
  display: none;
}

.interno-recurso {
  border: 2px solid var(--almost-black);
  color: var(--almost-black);
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  height: 21.7rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.label-recurso {
  z-index: 1;
  margin-bottom: 0;
  font-size: 1.7rem;
  line-height: 1em;
  position: absolute;
  bottom: 1rem;
  left: 1.4rem;
}

.fondo-de-color {
  z-index: 0;
  background-color: var(--amarillo);
  display: block;
  position: absolute;
  inset: 0%;
}

.fondo-de-color.verde {
  background-color: var(--verde);
}

.fondo-de-color.rosa {
  background-color: #d09d5c;
}

.fondo-de-color.azul {
  background-color: var(--azul);
}

.icono-recurso {
  z-index: 1;
  width: 69%;
  margin-bottom: 2.2rem;
  transition: all .2s;
  position: relative;
}

.icono-recurso.hover {
  width: 83%;
}

.section-palabras {
  background-color: var(--beige);
  padding-top: 3.7rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-palabras {
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
}

.top-palabras {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  display: flex;
}

.fila-quotes {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.col-a-quotes {
  flex-flow: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 66%;
  display: flex;
}

.col-quote {
  border: 2px solid var(--almost-black);
  background-color: var(--verde);
  border-radius: 2rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 48%;
  height: 18.7rem;
  margin-bottom: 1.3rem;
  padding: 3.2rem 1.5rem 2.2rem 4rem;
  display: flex;
  position: relative;
}

.quote-graphic {
  width: 1.3rem;
  position: absolute;
  top: 2rem;
  left: 2.2rem;
}

.p-quote {
  color: var(--almost-black);
  margin-bottom: 0;
  font-size: 1.07rem;
  font-weight: 600;
  line-height: 1.3em;
}

.quote-who {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.img-profile {
  border: 1px solid var(--almost-black);
  object-fit: cover;
  border-radius: 100%;
  width: 3.4rem;
  height: 3.4rem;
  margin-right: .9rem;
}

.p-quote-name {
  color: var(--almost-black);
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3em;
}

.p-quote-place {
  color: var(--almost-black);
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3em;
}

.col-quote-grande {
  border: 2px solid var(--almost-black);
  background-color: var(--verde);
  border-radius: 2rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 32.4%;
  margin-bottom: 1.3rem;
  padding: 3.2rem 1.5rem 2.2rem 4rem;
  display: flex;
  position: relative;
}

.section-dejar-rese-a {
  background-color: var(--beige);
  padding: .6rem 2rem 7.1rem;
}

.container-deja {
  border: 2px solid var(--almost-black);
  background-color: var(--verde);
  border-radius: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.6rem 1.7rem 1.6rem 1rem;
  display: flex;
}

.form-deja {
  width: 56.7%;
  margin-bottom: 0;
}

.input {
  border: 1px solid var(--almost-black);
  background-color: var(--beige);
  color: var(--almost-black);
  border-radius: .5rem;
  height: 2.5rem;
  margin-bottom: 1.1rem;
  padding: 0 1.1rem;
}

.input::placeholder {
  color: var(--almost-black);
  font-size: 1rem;
  line-height: 1em;
}

.col-form {
  width: 41%;
}

.textarea {
  border: 1px solid var(--almost-black);
  background-color: var(--beige);
  border-radius: .5rem;
  width: 55%;
  min-height: 9.6rem;
  margin-bottom: 1.1rem;
  padding: .5rem 1.1rem 0;
}

.textarea::placeholder {
  color: var(--almost-black);
  font-size: 1rem;
  line-height: 1em;
}

.form-inside {
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.fila-enviar {
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.footer {
  background-color: var(--almost-black);
  padding-top: 5.1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-footer {
  justify-content: space-between;
  align-items: flex-start;
  max-width: 83.6rem;
  margin-bottom: 5.6rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.link-logo-footer {
  width: 15.2rem;
}

.logo-footer {
  width: 100%;
}

.form-newsletter {
  width: 21.3rem;
  margin-bottom: 0;
  position: relative;
}

.explora-y-conecta {
  color: var(--beige);
  margin-bottom: .7rem;
  font-size: .75rem;
  line-height: 1em;
}

.title-newsletter {
  color: var(--beige);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: .1rem;
  font-family: Piedras, Impact, sans-serif;
  font-size: 1.75rem;
  line-height: 1.5em;
}

.input-newsletter {
  border-style: none none solid;
  border-width: 1px;
  border-color: black black var(--beige);
  background-color: var(--transparent);
  color: var(--beige);
  height: 3rem;
  margin-bottom: 0;
  padding: 0;
  font-size: .75rem;
  line-height: 1em;
}

.input-newsletter:focus, .input-newsletter:focus-visible, .input-newsletter[data-wf-focus-visible] {
  border-bottom-color: var(--amarillo);
}

.input-newsletter::placeholder {
  color: var(--beige);
}

.submitt-newsletter {
  position: absolute;
  inset: auto .3rem .6rem auto;
}

.flecha-newsletter {
  filter: saturate(0%) invert();
  width: .8rem;
}

.bottom-footer {
  border-top: 1px solid var(--beige);
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 1.2rem 2rem 1.3rem;
}

.container-bottom-footer {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 83.6rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.p-footer {
  color: var(--beige);
  text-transform: uppercase;
  margin-bottom: 0;
  margin-right: .8rem;
  font-size: .75rem;
  line-height: 1em;
}

.link-red-footer {
  margin-left: 1.5rem;
}

.icono-footer {
  height: 1.5rem;
}

.links-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.col-links-footer {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 40%;
  display: flex;
}

.p-top-footer {
  color: var(--beige);
  text-transform: uppercase;
  margin-bottom: 1.9rem;
  font-size: .75rem;
  line-height: 1em;
}

.link-footer {
  color: var(--beige);
  margin-bottom: 1rem;
  font-size: 1.35rem;
  line-height: 1em;
  text-decoration: none;
}

.col-links-footer-out {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 33rem;
  display: flex;
}

.no-results {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-bottom: 0;
  padding-left: 1.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1em;
  display: none;
}

.body-detail {
  background-image: url('../images/Frame-68.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
}

.detalle-de-ruta {
  z-index: 3;
  border-radius: 1rem;
  flex-flow: column;
  width: 22.9rem;
  transition: all .2s;
  display: flex;
  position: absolute;
  top: 2.6rem;
  bottom: 2.1rem;
  left: -22.9rem;
  overflow: hidden;
}

.detalle-de-ruta.on {
  left: 1.8rem;
}

.imagen-ruta {
  object-fit: cover;
  width: 100%;
  height: 13rem;
}

.titulo-detalle {
  color: var(--beige);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 2.4rem;
  line-height: 1em;
  position: absolute;
  bottom: 26.5rem;
  left: 1.1rem;
}

.info-ruta {
  background-color: var(--beige);
  height: 100%;
  padding: 1.2rem 1.3rem 1rem;
  overflow: scroll;
}

.titulo-ruta-detalle {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1em;
}

.titulo-ruta-detalle.sin-icono {
  margin-bottom: .6rem;
}

.p-elelemtn-ruta {
  color: var(--almost-black);
  margin-bottom: 1.2rem;
  font-size: 1rem;
  line-height: 1em;
}

.slide-debug {
  background-image: url('../images/pregunta_2.png');
  background-position: 0 0;
  background-size: auto;
}

.lista-botones-quiz-2 {
  justify-content: center;
  align-items: stretch;
  width: 90%;
  margin-top: 4.9rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.boton-respuesta {
  border: 1px solid var(--almost-black);
  background-color: var(--almost-black);
  color: var(--durazno);
  border-radius: 1rem;
  justify-content: space-between;
  align-items: stretch;
  width: 33.33%;
  margin-left: .5rem;
  margin-right: .5rem;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  position: relative;
}

.boton-respuesta:hover, .boton-respuesta.on {
  background-color: var(--durazno);
  color: var(--almost-black);
}

.imagen-respuesta {
  z-index: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
  width: 44.5%;
  position: relative;
  overflow: hidden;
}

.contenido-respuesta {
  width: 55.5%;
  padding: 1.6rem 1rem 1rem;
}

.titulo-respuesta {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: .8rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1em;
}

.p-respuesta {
  margin-bottom: 0;
  font-size: .7rem;
  line-height: 1em;
}

.titulo-respuesta-side {
  z-index: 1;
  color: var(--white);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 44.5%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 1.3rem;
  line-height: 1em;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.imagen-zoom {
  opacity: .62;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all .2s;
}

.imagen-zoom.hover {
  transform: scale(1.1);
  opacity: 1;
}

.slider-quotes {
  background-color: var(--transparent);
  height: auto;
  padding-right: 0;
}

.hide-btns-quotes, .hamb-btn, .res-responsive-menu {
  display: none;
}

.link-logo-resp {
  width: 15.2rem;
}

.fila-boton {
  margin-bottom: 1.2rem;
}

.row-icono-detalle {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: .6rem;
  display: flex;
}

.icono-menor {
  width: 1.4rem;
}

.resultados-lista {
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin-top: 4.9rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.item-sendero-respuesta {
  border: 1px solid var(--almost-black);
  background-color: var(--beige);
  border-radius: .7rem;
  width: 32%;
  height: 12rem;
  padding-top: .9rem;
  padding-left: 16%;
  padding-right: 1rem;
  text-decoration: none;
  position: relative;
}

.item-sendero-respuesta.respuesta {
  background-color: var(--beige);
  margin-bottom: 0;
  padding-left: 17%;
}

.fila-btn-clear {
  padding-top: 1.2rem;
  padding-left: 2.3rem;
  display: none;
}

.col-links-footer-dos {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 60%;
  display: flex;
}

.lista-regresar {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.fila-boton-filtrar, .fila-boton-filtrar-close {
  display: none;
}

.titulo-detalle-resp {
  color: var(--almost-black);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Piedras, Impact, sans-serif;
  font-size: 2.4rem;
  line-height: 1em;
  display: none;
  position: absolute;
  bottom: 26.5rem;
  left: 1.1rem;
}

.mute-btn {
  z-index: 2;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.icon-mute {
  width: 2rem;
}

@media screen and (max-width: 991px) {
  .titulo-senderos {
    width: 80%;
  }

  .p-sendero {
    width: 60%;
  }

  .titulo-video {
    font-size: 1.8rem;
  }

  .slider-videos {
    margin-right: -31.9rem;
  }

  .titulo-grande-senderos {
    width: 17rem;
    font-size: 3rem;
  }

  .grafico-2 {
    right: 21.6rem;
  }

  .col-quote {
    height: auto;
  }

  .p-quote {
    margin-bottom: 2rem;
    font-size: 1rem;
  }

  .p-quote-name {
    font-size: 1rem;
  }

  .p-quote-place {
    font-size: .9rem;
  }

  .container-footer {
    flex-flow: wrap;
  }

  .form-newsletter {
    width: 100%;
    margin-top: 4rem;
  }

  .titulo-respuesta-side {
    font-size: .9rem;
  }
}

@media screen and (max-width: 767px) {
  .container-header {
    align-items: center;
  }

  .links-header {
    display: none;
  }

  .a-link-header {
    font-size: 1.3rem;
  }

  .logo-container {
    width: auto;
  }

  .side-btns {
    display: none;
  }

  .flecha {
    right: -.8rem;
  }

  .titulo-senderos {
    width: 100%;
    font-size: 3rem;
  }

  .p-sendero {
    width: 80%;
  }

  .top-toma {
    flex-flow: column;
  }

  .titulo-toma {
    width: 100%;
    font-size: 3rem;
  }

  .side-tomo {
    width: 90%;
    margin-top: 3rem;
  }

  .slide-inicial {
    padding-top: 5rem;
  }

  .titulo-elemento-pregunta {
    width: 92%;
    font-size: 3rem;
  }

  .col-a-lorem {
    width: 31%;
  }

  .slider-videos {
    margin-right: -44.3rem;
  }

  .grafico-1 {
    width: 10rem;
  }

  .grafico-2 {
    bottom: 15.8rem;
    right: 34.7rem;
  }

  .titulo-explora-recursos {
    margin-bottom: 2rem;
    font-size: 3rem;
  }

  .slides-recursos {
    width: 87rem;
  }

  .col-quote {
    padding-top: 4rem;
    padding-left: 2.1rem;
  }

  .p-quote {
    font-size: .8rem;
  }

  .img-profile {
    width: 2rem;
    height: 2rem;
    margin-right: .7rem;
  }

  .p-quote-name {
    font-size: .8rem;
    font-weight: 600;
  }

  .p-quote-place {
    font-size: .8rem;
  }

  .col-quote-grande {
    padding-top: 4.1rem;
    padding-left: 2.1rem;
  }

  .section-dejar-rese-a {
    padding-bottom: 5rem;
  }

  .container-deja {
    flex-flow: column;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .form-deja {
    width: 100%;
  }

  .col-links-footer-out {
    width: 100%;
    margin-top: 3rem;
  }

  .lista-botones-quiz-2 {
    margin-top: 2rem;
  }

  .boton-respuesta {
    flex-flow: column;
    width: 32%;
  }

  .imagen-respuesta {
    aspect-ratio: auto;
    width: 100%;
    height: 6rem;
    margin-bottom: 1rem;
  }

  .contenido-respuesta {
    width: 100%;
    padding-top: 1rem;
  }

  .titulo-respuesta {
    font-size: 1rem;
  }

  .titulo-respuesta-side {
    color: #fff;
    text-align: left;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
    position: static;
  }

  .imagen-zoom {
    object-position: 50% 0%;
  }

  .hamb-btn {
    border-top: 1px solid var(--almost-black);
    border-bottom: 1px solid var(--almost-black);
    width: 2rem;
    height: 1rem;
    padding-bottom: 0;
    padding-right: 0;
    display: block;
  }

  .linea-medio-hamb {
    border-bottom: 1px solid var(--almost-black);
    width: 100%;
    height: 50%;
    padding-bottom: 0;
    padding-right: 0;
  }

  .res-responsive-menu {
    z-index: 5;
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    background-color: var(--beige);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    transition: all .5s;
    display: flex;
    position: fixed;
    top: -100%;
    left: 0%;
    right: 0%;
  }

  .res-responsive-menu.on {
    top: 0%;
  }

  .link-logo-resp {
    width: 8rem;
  }

  .close-btn-resp {
    width: 2rem;
    height: 2rem;
    position: relative;
    transform: rotate(45deg);
  }

  .linea-close-a {
    border-bottom: 1px solid var(--almost-black);
    height: 50%;
    padding-bottom: 0;
    padding-right: 0;
  }

  .linea-close-b {
    border-right: 1px solid var(--almost-black);
    width: 50%;
    padding-bottom: 0;
    padding-right: 0;
    position: absolute;
    inset: 0% auto 0% 0%;
  }

  .resultados-lista {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .boton-general.grande {
    font-size: 1rem;
  }

  .flecha.grande {
    right: -.9rem;
  }

  .section-hero {
    height: 47rem;
    padding-top: 11.4rem;
  }

  .titulo-hero {
    font-size: 4rem;
  }

  .desc-hero {
    width: 100%;
  }

  .lista-logos {
    grid-column-gap: 4rem;
    grid-row-gap: 2rem;
    flex-flow: wrap;
  }

  .titulo-senderos {
    font-size: 2.5rem;
  }

  .p-sendero {
    width: 100%;
  }

  .contenedor-mapa {
    background-color: var(--transparent);
    height: auto;
  }

  .mapa-real {
    background-color: var(--white);
    height: 47rem;
  }

  .side-mapa {
    border: 1px solid var(--almost-black);
    border-radius: 1.5rem;
    flex-flow: wrap;
    width: auto;
    padding: 1rem .5rem;
    display: flex;
    position: absolute;
    inset: auto .2rem .2rem;
  }

  .filtro-side {
    border: 1px solid var(--almost-black);
    background-color: var(--beige);
    border-radius: 1.5rem;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: auto;
    padding: 1rem 1rem 0;
    transition: all .2s;
    display: flex;
    inset: -16rem .2rem auto;
  }

  .filtro-side.on {
    top: .2rem;
  }

  .label-filtro {
    font-size: .75rem;
  }

  .link-filtro {
    font-size: .7rem;
  }

  .hover-filtro-link {
    left: -.8rem;
  }

  .item-sendero {
    width: 12rem;
    height: 11rem;
    margin-bottom: 0;
    margin-left: .5rem;
    margin-right: .5rem;
    padding-top: 1rem;
    padding-bottom: 1.8rem;
    padding-left: 1rem;
  }

  .imagen-side {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    position: static;
  }

  .titulo-item {
    font-size: .8rem;
  }

  .desc-item {
    font-size: .7rem;
  }

  .titulo-toma, .titulo-elemento-pregunta {
    font-size: 2.5rem;
  }

  .titulo-elemento-pregunta.final {
    font-size: 2.1rem;
  }

  .sendero-contenedor {
    width: 90%;
  }

  .lista-de-opciones {
    margin-top: 7rem;
  }

  .filtros-videos {
    justify-content: space-between;
    align-items: center;
  }

  .grupo-texto-y-videos {
    flex-flow: column;
  }

  .col-a-lorem {
    width: 100%;
    margin-bottom: 2rem;
    padding-top: 0;
  }

  .slider-videos {
    margin-left: -.3rem;
    margin-right: 0;
  }

  .p-independiente {
    width: auto;
    font-size: .85rem;
    top: 17.7rem;
    right: 1.9rem;
  }

  .titulo-grande-senderos {
    width: auto;
    inset: 1.9rem 1.9rem auto;
  }

  .grafico-1 {
    display: none;
  }

  .titulo-explora-recursos {
    width: 75%;
    margin-bottom: 0;
    font-size: 2.5rem;
  }

  .slides-recursos {
    width: 91rem;
  }

  .fila-quotes {
    flex-flow: column;
  }

  .col-a-quotes {
    flex-flow: column;
    width: 100%;
  }

  .col-quote {
    width: 100%;
    padding-top: 2rem;
  }

  .quote-graphic {
    width: .7rem;
    top: 1rem;
  }

  .p-quote {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .col-quote-grande {
    width: 100%;
    padding-top: 2rem;
  }

  .col-form, .textarea {
    width: 100%;
  }

  .form-inside {
    flex-flow: column;
    margin-top: 1rem;
  }

  .container-bottom-footer {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .col-links-footer {
    width: 100%;
  }

  .col-links-footer-out {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
  }

  .no-results {
    padding-left: .7rem;
  }

  .detalle-de-ruta {
    border: 1px solid var(--almost-black);
    background-color: #ac7979;
    border-radius: 1.5rem;
    flex-flow: row;
    width: auto;
    height: 15.1rem;
    inset: auto .2rem -16rem;
  }

  .detalle-de-ruta.on {
    bottom: .2rem;
    left: .2rem;
  }

  .imagen-ruta {
    width: 11rem;
    height: 16rem;
  }

  .p-elelemtn-ruta {
    font-size: .85rem;
  }

  .lista-botones-quiz-2 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .boton-respuesta {
    width: 100%;
  }

  .imagen-respuesta {
    display: none;
  }

  .titulo-respuesta {
    margin-bottom: 0;
  }

  .p-respuesta {
    display: none;
  }

  .titulo-respuesta-side {
    padding-top: 1rem;
  }

  .resultados-lista {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    margin-top: .5rem;
    margin-bottom: .7rem;
  }

  .item-sendero-respuesta {
    width: 48%;
    height: auto;
    padding: .7rem;
  }

  .fila-btn-clear {
    padding-left: 1.4rem;
  }

  .col-links-footer-dos {
    width: 100%;
  }

  .lista-regresar {
    margin-top: 0;
  }

  .lista-item-resp {
    display: flex;
  }

  .fila-boton-filtrar {
    z-index: 1;
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
  }

  .fila-boton-filtrar-close {
    z-index: 1;
    width: 100%;
    margin-bottom: 1rem;
    display: block;
  }

  .titulo-detalle-resp {
    margin-bottom: 1rem;
    font-size: 1rem;
    display: block;
    position: static;
  }
}


@font-face {
  font-family: 'Dmon Var';
  src: url('../fonts/Dmon_var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Piedras';
  src: url('../fonts/Piedras.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}