/* Public guides site, phone. Loaded with media="(max-width: 768px)" on top of guides.css.
   Values from the Figma k7URF8SFvLzzr55Zi6FxQi (node 422:10610) at 440 px. */

/* Landing */

.gp-landing {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gp-landing__photo {
    position: static;
    height: 188px;
}

.gp-landing__side {
    padding: 24px 20px 48px;
}

.gp-landing__head {
    margin-bottom: 43px;
}

.gp-landing__country {
    margin-bottom: 23px;
}

.gp-landing__city:hover,
.gp-landing__city:focus-visible {
    padding: 22px 20px;
}

.gp-landing__see {
    display: none;
}

/* "Estoy viajando a" band */

.gp-band {
    flex-direction: column;
    align-items: stretch;
    gap: 23px;
    padding: 24px 16px;
}

.gp-band__route {
    gap: 0 7px;
    font-size: 28px;
}

.gp-band__pdf {
    width: 100%;
}

.gp-select ul {
    max-width: calc(100vw - 32px);
}

.gp-select li a {
    padding: 12px 40px 12px 16px;
    font-size: 20px;
}

/* Guide: the hero goes first, the band under it */

.gp-guide,
.gp-category {
    position: relative;
    display: flex;
    flex-direction: column;
}

.gp-guide .gp-hero {
    order: -1;
    height: 461px;
    margin: 0;
    border-radius: 0;
}

.gp-chips {
    flex-direction: column;
    justify-content: flex-start;
    gap: 29px;
    margin: 33px 16px 0;
    padding: 0;
}

.gp-chips__group > span {
    color: #b3b3b3;
}

.gp-chip {
    min-width: 0;
    padding: 6px 16px;
}

.gp-guide .gp-sections,
.gp-category .gp-sections {
    gap: 0;
    width: auto;
    margin: 24px 20px 0;
}

.gp-guide .gp-sections {
    padding-top: 25px;
    border-top: 1px solid var(--gp-line);
}

.gp-category .gp-sections {
    margin-top: 33px;
}

.gp-sections > .gp-section + .gp-section {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--gp-line);
}

.gp-guide .gp-section,
.gp-category .gp-section,
.gp-category .gp-section.is-photo-right,
.gp-category .gp-section.is-bare {
    display: block;
    padding: 0;
}

.gp-section h2 {
    font-size: 32px;
}

.gp-section__photo {
    display: none;
}

/* Two photos side by side, edge to edge ("Juntar de a 2") */

.gp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 52px -20px;
}

.gp-pair:last-child {
    margin-bottom: 0;
}

.gp-pair img {
    width: 100%;
    height: 138px;
    object-fit: cover;
}

.gp-pair img:only-child {
    grid-column: 1 / -1;
    height: 220px;
}

/* "Ver más": title and hero first, then the band */

.gp-category__head {
    order: -1;
    grid-template-columns: 142px 1fr;
    margin: 0;
}

.gp-category__head.is-bare {
    margin: 0;
    padding-top: 64px;
}

.gp-category__title {
    justify-self: center;
    max-height: 400px;
    font-size: min(144px, calc(400px / (var(--chars, 8) * 0.44)));
}

.gp-category__head .gp-hero {
    height: 462px;
    border-radius: 0;
}

.gp-back {
    position: absolute;
    top: 24px;
    left: 26px;
    z-index: 1;
    margin: 0;
    font-size: 16px;
}

/* Experiences banner, with the phone's own photo and type */

.gp-banner {
    height: auto;
    gap: 40px;
    margin-top: 30px;
    padding: 80px 24px 64px;
}

.gp-banner::after {
    background-color: rgb(35 35 36 / 73%);
}

.gp-banner__over {
    padding: 10px 29px;
    border: 1px solid #fff;
    letter-spacing: 0;
}

.gp .gp-banner__title {
    font-family: "Nysé", serif;
    font-size: 40px;
    line-height: 1.1;
    text-transform: none;
}

.gp-banner__text {
    margin-top: -20px;
    font-size: 18px;
    line-height: 1.3;
}

.gp-banner__cta {
    width: auto;
    height: 35px;
    margin-top: 24px;
    padding: 8px 25px;
    font-size: 14.7px;
}