/* Plantilla: templates/page-como_llegar.php (Cómo llegar) */

/* Botones de anclaje bajo la cabecera */
.modos {
  background: var(--navy-700);
  padding-bottom: var(--sp-6);
  margin-top: calc(-1 * var(--sp-5));
}

.modos__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.modos__btn {
  --btn-fg: var(--c-text-inv);
  --btn-border: rgb(255 255 255 / .5);
  --btn-fill: var(--c-text-inv);
  --btn-fg-hover: var(--c-text);
  gap: .6em;
}

.modos__icon {
  width: 1.3em;
  height: 1.3em;
}

/* Bloques por medio de transporte */
.rutas__list {
  display: grid;
  gap: var(--sp-6);
}

.ruta__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.ruta__icon {
  width: 2rem;
  height: 2rem;
  color: var(--c-accent);
  flex: none;
}

.ruta__text {
  --flow-space: var(--sp-3);
}

.ruta__text p strong {
  font-weight: var(--fw-semibold);
}

.ruta__lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.ruta__lines ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.ruta__link {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
}

.ruta__link-icon {
  width: 1.3em;
  height: 1.3em;
  margin-right: .2em;
  color: var(--c-accent);
}

.ruta__media {
  border-radius: var(--radius-md);
  overflow: clip;
  background: var(--c-bg-soft);
}

.ruta__media img,
.ruta__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  border: 0;
}

.fundacion-cta .section-head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  gap: var(--sp-4);
  display: flex;
  flex-flow: column;
  margin-bottom: var(--sp-4);
}

.fundacion-cta__btn {
  display: flex;
  justify-content: center;
}

@media (max-width: 60rem) {
  .ruta__media {
    order: -1;
  }

  .ruta__media img,
  .ruta__media iframe {
    min-height: 14rem;
  }
}