/* ===================================================
   OXIGENA VIAJES — CSS COMÚN
   Estilos de todo el sitio (cabecera, pie y páginas)
=================================================== */

:root {
    --primary: #00b8f3;
    --primary-dark: #00a8e8;
    --navy: #003854;
    --dark-box: #002b40;
    --white: #ffffff;
    --light-bg: #ececec;
    --team-bg: #c6e7f4;
    --font-main: "Kufam", sans-serif;
    --primaria: "Kufam", sans-serif;

    --color-white: #ffffff;
    --color-primary: #0078ae;
    --color-primary-dark: #005b87;
    --color_fondo_1: #006791;
    --color_principal: #888b8c;
    --color_contraste: #81a9ad;
    --color_footer: #d6dfe2;
    --color_overlay: rgba(50, 50, 50, 0.75);
    --color-text: #ffffff;
    --color-dark: #003a57;
    --color-date: #ff6368;
    --blue: #1ab9ea;

    --hero-height: 530px;
    --container: 1400px;
    --transition: 0.3s ease;
    --borde-redondeado: 8px;
    --radius: 10px;
    --shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--white);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =====================
   HEADER
===================== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.login-menu {
    right: 0;
    left: auto;
    transform: none;
}

.nav {
    height: 122px;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 100px;
    gap: 20px;
    position: relative;
}

.nav a:hover:not(.btn-login) {
    font-weight: 700;
    color: #3a99c8;
}

.nav-left,
.nav-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.nav a {
    font-size: 20px;
    font-weight: 500;
    color: #002c42;
    text-decoration: none;
    font-family: var(--primaria, Kufam);
    font-style: normal;
    font-variant: small-caps;
    white-space: nowrap;
}

.logo {
    padding: 0 50px;
    flex: none;
}

.logo img {
    width: 82px;
    height: auto;
    object-fit: contain;
}

.burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.burger span {
    display: block;
    width: 40px;
    height: 4px;
    background: #002c42;
    margin: 8px 0;
}

.mobile-menu {
    display: none;
}

@media (max-width: 1600px) {
    .groups-menu {
        width: 300px;
    }

    .btn-login {
        font-size: 22px;
    }
}

@media (max-width: 992px) {
    .nav-left,
    .nav-right {
        display: none;
    }

    .nav {
        justify-content: space-between;
        padding: 20px 30px;
        height: auto;
        min-height: 85px;
    }

    .logo {
        padding: 0 10px;
        flex: none;
    }

    .burger {
        position: relative;
        z-index: 120;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        transition: background 0.25s ease;
    }

    .burger:hover {
        background: rgba(0, 44, 66, 0.08);
    }

    .burger span {
        display: block;
        width: 30px;
        height: 3px;
        background: #002c42;
        margin: 3.5px 0;
        border-radius: 2px;
        transition:
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease,
            background 0.3s ease;
    }

    body.menu-open .burger span,
    .header.menu-open .burger span {
        background: #ffffff !important;
    }

    body.menu-open .burger span:nth-child(1),
    .header.menu-open .burger span:nth-child(1) {
        transform: translateY(10px) rotate(45deg) !important;
    }

    body.menu-open .burger span:nth-child(2),
    .header.menu-open .burger span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    body.menu-open .burger span:nth-child(3),
    .header.menu-open .burger span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg) !important;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 50%;
        left: 50%;
        border-radius: 8px;
        width: 85%;
        max-width: 360px;
        background: #0c6b95;
        padding: 20px 16px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        z-index: 105;
    }

    body.menu-open .mobile-menu,
    .header.menu-open .mobile-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .mobile-menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        padding: 16px 20px;
        color: #ffffff;
        font-family: var(--primaria, "Kufam", sans-serif);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 8px;
    }

    .mobile-menu a:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mobile-menu a:hover,
    .mobile-menu a:active {
        background: rgba(255, 255, 255, 0.15);
        color: #8fd9ff;
        transform: scale(1.02);
    }

    .mobile-menu a[href*="mi-viaje"],
    .mobile-menu a:last-child {
        color: #8fd9ff;
        font-weight: 700;
    }

    .mobile-menu {
        max-height: 85vh;
        overflow-y: auto;
    }

    .mobile-menu .dropdown {
        width: 100%;
    }

    .mobile-menu .dropdown-toggle {
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-menu .dropdown-menu {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        width: 100%;
        max-width: none;
        box-shadow: none;
        padding: 0 0 8px;
        background: transparent;
    }

    .mobile-menu .dropdown.open .dropdown-menu,
    .mobile-menu .dropdown.active .dropdown-menu {
        display: flex;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .mobile-menu .schools-menu,
    .mobile-menu .groups-menu,
    .mobile-menu .login-menu {
        width: 100%;
        left: auto;
        transform: none;
        padding: 0 0 8px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        box-shadow: none;
    }

    .mobile-menu .dropdown-menu::before {
        display: none;
    }

    .mobile-menu .schools-menu a,
    .mobile-menu .groups-menu a {
        font-size: 14px;
        font-weight: 500;
        padding: 10px 16px;
        border-bottom: none;
        color: #e8f7ff;
    }

    .mobile-menu .login-menu {
        padding: 16px 12px 18px;
    }

    .mobile-menu .login-menu h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .mobile-menu .login-menu input {
        height: 44px;
        font-size: 16px;
        margin-bottom: 12px;
    }

    .mobile-menu .btn-login,
    .mobile-menu a.btn-login {
        height: 48px;
        font-size: 18px;
        border-bottom: none;
        color: #003e61;
    }
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    font-family: var(--font-main);
    display: block;
}

.dropdown-menu {
    font-family: var(--font-main);
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 999;
}

.dropdown-menu input {
    font-family: var(--font-main);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown.active .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
}

.schools-menu,
.groups-menu {
    width: 340px;
    background: #0c6b95;
    border-radius: 8px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.schools-menu {
    left: 120px;
}

.groups-menu {
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-menu a {
    visibility: visible;
}

.schools-menu a,
.groups-menu a {
    color: #fff;
    text-align: center;
    padding: 13px 20px;
    font-size: 19px;
    font-weight: 400;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: normal;
    line-height: 1.25;
    text-transform: uppercase;
    display: block;
}

.schools-menu a:hover,
.groups-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #8fd9ff;
}

.login-menu {
    left: -40px;
    width: 300px;
    background: #0c6b95;
    border-radius: 8px;
    padding: 25px;
}

.login-menu h3 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.2;
    font-size: 20px;
}

.login-menu input {
    font-family: var(--font-main);
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 18px;
    font-size: 18px;
}

.btn-login,
.nav a.btn-login {
    font-family: var(--font-main);
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #8fd9ff, #bdeaff);
    color: #003e61;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-variant: normal;
    box-sizing: border-box;
}

.btn-login:hover,
.nav a.btn-login:hover {
    color: #003e61;
    font-weight: 700;
    filter: brightness(1.04);
}

@media (max-width: 992px) {
    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        transform: none;
        opacity: 1;
        visibility: visible;
        margin-top: 15px;
    }
}

.dropdown.open .dropdown-menu {
    display: flex;
}

@media (max-width: 768px) {
    .logo img {
        width: 50px;
    }
}

/* =====================
   FOOTER
===================== */

.footer {
    background: #ffffff;
    padding: 40px 20px;
    color: #003854;
    font-family: var(--font-main);
}

.footer-top {
    max-width: 1920px;
    margin: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: center;
    min-height: 147px;
    gap: 50px;
}

.footer-divider {
    width: 1px;
    height: 147px;
    background: rgba(0, 56, 84, 0.25);
    border: none;
}

.footer-divider-bottom,
.footer-divider-legal {
    display: none;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-logo img {
    width: 123px;
    height: 123px;
}

.footer-logo p {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu a {
    text-decoration: none;
    color: #003854;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.footer-menu a:hover {
    color: #007dae;
}

.footer-phones {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.footer-phones p {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-mail {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #003854;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.footer-mail img {
    width: 23px;
    height: auto;
    object-fit: contain;
}

.footer-social {
    display: flex;
    gap: 25px;
}

.footer-social img {
    width: 40px;
    height: 40px;
}

.footer-bottom {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    padding: 0;
    align-items: center;
    min-height: 50px;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal a {
    text-decoration: none;
    color: #003854;
    font-size: 12px;
    font-weight: 500;
}

.footer-legal span {
    width: 1px;
    height: 28px;
    background: #003854;
}

.footer-company {
    text-align: right;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

@media (max-width: 1600px) {
    .footer-top {
        gap: 10px;
    }

    .footer-contact {
        gap: 20px;
    }

    .footer-menu a {
        font-size: 15px;
        text-align: center;
    }

    .footer-phones {
        font-size: 12px;
    }

    .footer-legal {
        gap: 5px;
    }

    .footer-legal a {
        font-size: 10px;
    }

    .footer-company {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    .footer-logo img {
        width: 150px;
        height: 150px;
    }

    .footer-logo p {
        margin-top: 15px;
        font-size: 17px;
    }

    .footer-top {
        max-width: 1900px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 5px;
    }

    .footer-divider,
    hr {
        display: block;
        width: 100%;
        height: 0;
        border: none;
        border-top: 0.5px solid #003854;
        margin: 15px auto;
    }

    .footer-divider-bottom {
        display: block;
        margin: 25px auto 20px;
    }

    .footer-divider-legal {
        display: block;
        margin: 20px auto;
    }

    .footer {
        padding: 40px 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        margin-top: 20px;
    }

    .footer-company {
        text-align: center;
        font-size: 17px;
    }

    .footer-menu {
        align-items: center;
        text-align: center;
    }

    .footer-menu a {
        font-size: 25px;
        font-weight: 500;
        line-height: 30px;
    }

    .footer-phones {
        text-align: center;
    }

    .footer-phones p {
        font-size: 18px;
        display: block;
        flex-direction: row;
    }

    .footer-mail {
        font-size: 20px;
    }

    .footer-mail img {
        width: 35px;
        height: 35px;
    }

    .footer-social {
        gap: 40px;
    }

    .footer-legal {
        display: flex;
        flex-direction: column;
    }

    .footer-legal a {
        font-size: 22px;
    }
}

@media (max-width: 450px) {
    .footer-phones p {
        font-size: 15px;
    }
}

@media (max-width: 375px) {
    .footer-phones p {
        font-size: 14px;
    }
}


/* ===================================================
   PÁGINA: index.html  (body.page-home)
=================================================== */
body.page-home{
    --color_principal: #888b8c;
    --color_fondo_1: #006791;
    --color_contraste: #81A9AD;
    --color_footer: #D6DFE2;
    --color_overlay: rgba(50, 50, 50, 0.75);
    --borde-redondeado: 8px;

}

body.page-home .btn-primary{
    background: var(--color_fondo_1);

}

body.page-home .btn-primary:hover{
    background: #007DAE;
}


body.page-home a.btn-primary{
    display: flex;
    padding: 12px 25px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--borde-redondeado);
    background: var(--color_fondo_1);
    color: #FFF;
    font-family: Kufam;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}

body.page-home{
    font-family: 'Kufam', sans-serif;
    overflow-x: hidden;
}


body.page-home .home-slider{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

body.page-home .slider-track{
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-home .slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: .6s ease;
}

body.page-home span.flechas-slide{
    font-size: 32px;
    line-height: 20px;
}

body.page-home .slide.active{
    opacity: 1;
    visibility: visible;
}

body.page-home .slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-home .slide-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #003854;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    p.texto-banner {
        font-size: 22px;
        font-weight: 400;
        color: #000;
        text-align: center;
        font-family: var(--primaria, Kufam);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    a.btn-primary {
        display: flex;
        padding: 12px 25px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: var(--borde-redondeado);
        background: var(--color_fondo_1);
        color: #FFF;
        font-family: Kufam;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
        text-decoration: none;
    }

    a.btn-primary:hover {
        background: #007DAE;
    }

}

body.page-home .slide-left{
    left: 28%;
    transform: translateY(-50%);
    text-align: left;
}


body.page-home .slider-prev,
body.page-home .slider-next{

    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border: 1px solid;
    border-radius: 50%;

    background: #003854;
    color: white;

    cursor: pointer;
    z-index: 10;
}

body.page-home .slider-prev{
    left: 40px;
}

body.page-home .slider-next{
    right: 40px;
}

body.page-home .slider-dots{

    position: absolute;

    bottom: 40px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 12px;
}

body.page-home .dot{

    width: 12px;
    height: 12px;

    border-radius: 50%;
    border: none;

    background: white;
    opacity: .4;

    cursor: pointer;
}

body.page-home .dot.active{
    opacity: 1;
}

@media (max-width: 768px) {

    body.page-home .slide-content.slide-left,
body.page-home .slide-left{
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        align-items: center;
        width: 90%;
    }
}


/* =====================
HERO
===================== */

body.page-home .hero{
    position: relative;
    height: 1080px;
    overflow: hidden;
}

body.page-home .hero-bg{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

body.page-home .hero-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(0, 0, 0, .05) 100%);
}

body.page-home .hero-content{
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    width: 462px;
}

body.page-home .hero-content h1{
    font-size: 35px;
    font-weight: 900;
    color: #003854;
    text-transform: uppercase;
    text-align: center;
}

body.page-home .hero-content span{
    font-weight: 900;
}

body.page-home .hero-content p{
    font-size: 20px;
    font-weight: 500;
    color: #000;
    text-align: center;
    width: 422px;
    line-height: 1.4;
}

body.page-home .hero-btn{
    width: 292px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color_fondo_1);
    border-radius: 8px;

    color: #fff;
    text-decoration: none;

    font-size: 20px;
    font-weight: 600;

    transition: .3s;
}

body.page-home .hero-btn:hover{
    background: #005777;
}

body.page-home .hero-arrow{
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 25px;
    height: 25px;

    border: none;
    background: none;

    cursor: pointer;

    font-size: 28px;
    font-weight: 700;

    color: #003854;

    z-index: 20;
}

body.page-home .hero-prev{
    left: 64px;
}

body.page-home .hero-next{
    right: 64px;
}

/* =====================
RESPONSIVE
===================== */









/* ===================================
   PROXIMAS AVENTURAS
=================================== */

body.page-home .adventures{

    background:
        linear-gradient(180deg,
            #b4eaff 0%,
            #eeeef0 64.888%);

    display: flex;
    justify-content: center;

    padding: 80px 20px;
}

body.page-home .adventures-container{

    width: 1814px;
    max-width: 100%;
}

body.page-home .adventures-title{

    width: 80%;
    max-width: 100%;

    font-size: 30px;
    font-weight: 600;
    color: #003854;

    margin: 0 auto 50px;

    line-height: 1.35;
}

body.page-home .adventures-grid,
.adventures-grid{

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-bottom: 50px;
}

/* =======================
   TARJETAS
======================= */

body.page-home .trip-card,
.adventures .trip-card{

    width: 241px;
    height: 475px;

    border-radius: 10px;

    overflow: hidden;

    position: relative;

    flex: none;
    min-width: 0;
}

body.page-home a.trip-card-link,
.adventures a.trip-card-link{
    display: block;
    flex: 0 0 241px;
    width: 241px;
    max-width: 241px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

body.page-home a.trip-card-link .trip-card,
.adventures a.trip-card-link .trip-card{
    width: 241px;
    max-width: 100%;
}

body.page-home .trip-sidebar h3,
body.page-home .trip-sidebar p{
    white-space: pre-line;
}

body.page-home .trip-card img,
.adventures .trip-card img{

    width: 100%;
    height: 100%;
    max-width: 100%;

    object-fit: cover;
}

body.page-home .trip-info{
    background-color: #003854;
    padding: 10px;
    position: absolute;
    border-radius: 10px;
    left: 10px;
    bottom: 20px;

    display: flex;
    flex-direction: column;

    font-size: 24px;
    font-weight: 800;

    line-height: 20px;

    color: #fff;
}

body.page-home .trip-info.light{

    color: #eeeef0;
}

/* =======================
   COLUMNA DERECHA
======================= */

body.page-home .trip-sidebar{

    width: 236px;

    text-align: center;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 23px;
}

body.page-home .trip-sidebar h3{

    font-size: 25px;
    font-weight: 700;

    color: #003854;

    line-height: 23px;
}

body.page-home .trip-sidebar p{

    font-size: 25px;
    font-weight: 400;

    line-height: 1.2;

    color: #19191b;
}

body.page-home .trip-sidebar a{
    padding-top: 0px;
    padding-bottom: 0px;
    padding: 10px 20px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color_fondo_1);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* =======================
   BLOQUE INFERIOR
======================= */

body.page-home .adventures-bottom{

    width: 50%;

    max-width: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 50px;
    display: flex;
    justify-content: center;
}

body.page-home .advantages-icons{

    display: flex;
    gap: 10px;
}

body.page-home .advantages-icons img{

    height: 82px;
    width: auto;
}

body.page-home .advantages-list{

    color: #003854;

    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}

body.page-home .advantages-list li{

    margin-bottom: 4px;
}


/* ======================================
   ESQUI (FIGMA 25:3926)
====================================== */

body.page-home .ski-section{
    position: relative;
    width: 100%;
    height: 1080px;
    overflow: hidden;
}

body.page-home .ski-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-home .ski-inner{
    position: relative;
    width: 100%;
    height: 100%;
}

/* TEXTO */

body.page-home .ski-title{

    position: absolute;

    top: 250px;
    left: 50%;

    transform: translateX(-50%);

    width: 969px;

    text-align: center;

    font-family: 'Kufam', sans-serif;
    font-size: 300px;
    font-weight: 900;
    line-height: 1;

    color: #003854;

    z-index: 2;
}

/* PERSONAJE */

body.page-home .ski-character-wrap{

    position: absolute;

    width: 1089px;
    height: 538px;

    left: calc(50% - 316.5px);
    bottom: 196px;

    z-index: 3;
}

body.page-home .ski-character{

    position: absolute;

    top: 15%;
    left: -40%;

    width: 65.97%;
    height: 88.48%;

    object-fit: contain;
}

/* BOTON */

body.page-home .ski-btn{
    position: absolute;
    left: 50%;
    top: 881px;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: var(--color_fondo_1);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-family: 'Kufam', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 10;
}

body.page-home .ski-btn:hover{
    background: #007DAE;
}

/* DESTINOS */

body.page-home .ski-destinations{
    position: absolute;
    top: 950px;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 80px), 1672px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 19px 5px;
    font-family: 'Kufam', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #081b23;
    text-align: center;
    margin: 0 auto;
    z-index: 10;
}

body.page-home .ski-destinations-row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

body.page-home .ski-destinations span{
    white-space: nowrap;
    text-align: center;
}

body.page-home .ski-destinations a{
    text-decoration: none;
    color: #003854;
}

body.page-home .ski-destinations a:hover{
    color: #003854;
    font-weight: bold;
}

@media (max-width: 1200px) {
    body.page-home .ski-title{
        font-size: 200px;
    }

    body.page-home .ski-character{
        left: -20%;
    }

    body.page-home .ski-destinations{
        gap: 10px;
    }
}

@media (max-width: 768px) {

    body.page-home .ski-section{
        height: clamp(650px, 100vw, 650px);
    }

    body.page-home .ski-bg{
        object-position: center 30%;
    }

    body.page-home .ski-title{
        top: 16%;
        left: 50%;
        transform: translateX(-50%);
        width: 92%;
        font-size: clamp(72px, 22.5vw, 150px);
        line-height: 0.95;
        letter-spacing: -0.01em;
        z-index: 2;
    }

    body.page-home .ski-character-wrap{
        left: -8%;
        top: 41%;
        width: 100%;
        height: 36%;
        bottom: auto;
        z-index: 3;
        pointer-events: none;
    }

    body.page-home .ski-character{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }

    body.page-home .ski-btn{

        top: 76%;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        font-size: clamp(13px, 3.6vw, 17px);
        z-index: 10;
    }

    body.page-home .ski-destinations{

        position: absolute;
        top: auto;
        bottom: 3.5%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
        max-width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, 1.2vw, 8px);
        padding: 0;
        margin: 0 auto;
        text-align: center;
        z-index: 10;
    }

    body.page-home .ski-destinations-row{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: clamp(6px, 1.8vw, 14px);
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    body.page-home .ski-destinations span{
        font-size: 11px;
        font-weight: 600;
        color: #003854;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
    }
}

/* ========================================
   AVENTURA
======================================== */

body.page-home .adventure-section{

    position: relative;

    width: 100%;
    height: 1080px;

    overflow: hidden;

    background: #000;
}

body.page-home .adventure-bg{

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Frame real Figma */

body.page-home .adventure-content{

    position: relative;

    width: 100%;
    height: 100%;

    z-index: 2;
}

body.page-home .adventure-title{

    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Kufam', sans-serif;
    font-weight: 900;
    font-size: 150px;
    line-height: 1;
    color: #007DAE;
    text-align: center;
    white-space: nowrap;
    z-index: 4;
}

body.page-home .adventure-character{

    position: absolute;
    width: 1433px;
    height: auto;
    left: 50%;
    top: calc(50% - 47px);
    transform: translateX(-50%) translateY(-30%);
    z-index: 3;
    pointer-events: none;
}

body.page-home .adventure-btn{
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color_fondo_1);
    border-radius: 8px;
    font-family: 'Kufam', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    z-index: 10;
    cursor: pointer;
    transition: .25s;
}

body.page-home .adventure-btn:hover{
    background: #007DAE;
}



body.page-home .trip-info{
    font-size: 20px;
    font-weight: 500;
}

body.page-home .adventures-bottom{
    display: flex;
    width: 60%;
    flex-direction: column;
}

body.page-home .advantages-list{
    font-size: 16px;
}


@media (max-width:1600px) {
    body.page-home .adventure-content{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        align-content: space-between;
        width: 100%;

    }

    body.page-home .adventure-title{
        position: absolute;
        font-size: 120px;
    }

    body.page-home .adventure-character{
        left: -2%;
        top: 460px;
        position: absolute;
        transform: translateY(-30%);
    }

    body.page-home .trip-info{
        font-size: 20px;
        font-weight: 500;
    }
}

@media (max-width:1200px) {


    body.page-home .adventure-section{
        height: 850px;
    }

    body.page-home .adventure-content{
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    body.page-home .adventure-title{
        position: absolute;
        font-size: 100px;
    }

    body.page-home .adventure-character{
        width: 110%;
        left: 50%;
        top: 432px;
        position: absolute;
        transform: translateX(-50%) translateY(-30%);
    }

    body.page-home .trip-sidebar{
        width: 20%;
        margin-top: 30px;
    }

    body.page-home .trip-info{
        font-size: 20px;
        font-weight: 500;
    }

}

@media(max-width:768px) {
    body.page-home .adventure-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    body.page-home .adventure-title{
        position: absolute;
        left: 49%;
        font-size: 70px;
    }

    body.page-home .adventure-character{
        left: 46.33%;
        top: 460px;
        position: absolute;
        transform: translateX(-50%) translateY(-30%);
    }

    body.page-home .adventures-grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }

    body.page-home .trip-card,
    .adventures .trip-card{
        width: 157px;
        max-width: 157px;
        height: 350px;
    }

    body.page-home a.trip-card-link,
    .adventures a.trip-card-link{
        flex: 0 0 157px;
        width: 157px;
        max-width: 157px;
    }

    body.page-home .trip-sidebar{
        width: 38%;
        margin-top: 20px;
    }

    body.page-home .trip-sidebar p{
        font-size: 20px;
        font-weight: 400;
    }

    body.page-home .trip-sidebar a{
        padding-top: 0px;
        padding-bottom: 0px;
        height: 50px;
        font-size: 15px;
    }

    body.page-home .trip-info{
        font-size: 22px;
        font-weight: 500;
    }

    body.page-home .adventure-btn{
        padding-top: 0px;
        padding-bottom: 0px;
        left: 47%;
        height: 50px;
        font-size: 17px;
    }

    body.page-home .advantages-list{
        width: 60%;
    }
}

@media(max-width:480px) {
    body.page-home .adventures-grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }

    body.page-home .trip-card,
    .adventures .trip-card{
        width: 157px;
        max-width: 157px;
        height: 350px;
    }

    body.page-home a.trip-card-link,
    .adventures a.trip-card-link{
        flex: 0 0 157px;
        width: 157px;
        max-width: 157px;
    }

    body.page-home .adventure-character{
        width: 166%;
        left: 49%;
    }

    body.page-home .adventures-title{
        font-size: 20px;
    }


    body.page-home .adventure-title{
        left: 50%;
        font-size: 50px;
    }

    body.page-home .trip-sidebar{
        width: 45%;
    }

    body.page-home .trip-info{
        font-size: 15px;
    }
}


@media(max-width:375px) {
    body.page-home .adventures-title{
        font-size: 20px;
    }

    body.page-home .adventures-grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }

    body.page-home .adventure-content{
        width: 200%;
        height: 100%;
    }

    body.page-home .adventure-title{
        left: 25%;
        font-size: 51px;
    }

    body.page-home .adventure-character{
        left: 24%;
        width: 88%;
    }

    body.page-home .adventure-btn{
        left: 25%;
        font-size: 20px;
    }

    body.page-home .trip-card,
    .adventures .trip-card{
        width: 150px;
        max-width: 150px;
        height: 300px;
    }

    body.page-home a.trip-card-link,
    .adventures a.trip-card-link{
        flex: 0 0 150px;
        width: 150px;
        max-width: 150px;
    }

    body.page-home .trip-sidebar{
        width: 45%;
    }

    body.page-home .trip-sidebar p{
        font-size: 15px;
    }

    body.page-home .trip-sidebar a{
        font-size: 16px;
    }

    body.page-home .trip-info{
        width: 60%;
        font-size: 16px;
    }

    body.page-home .graduation-title{
        font-size: 30px;
    }
}


/* ======================================
   FIN DE CURSO
====================================== */

body.page-home .graduation-section{

    position: relative;

    width: 100%;
    height: 1080px;

    overflow: hidden;
}

body.page-home .graduation-bg{

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

body.page-home .graduation-content{

    position: relative;

    width: 100%;
    height: 100%;
}

body.page-home .graduation-title{

    position: absolute;

    top: 173px;
    left: 50%;

    transform: translateX(-50%);

    font-family: 'Kufam', sans-serif;
    font-weight: 900;

    font-size: 200px;
    line-height: 1;

    color: #003854;

    white-space: nowrap;

    z-index: 4;
}

body.page-home .graduation-group{
    position: absolute;
    width: 1816px;
    height: auto;
    left: 50%;
    max-width: 100%;
    bottom: 0;
    z-index: 3;

    transform:
        translateX(-50%) translateY(-0%);
}

body.page-home .graduation-btn{

    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    padding: 10px 20px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color_fondo_1);
    border-radius: 8px;
    font-family: 'Kufam', sans-serif;
    font-size: 20px;
    font-weight: 600;

    color: #fff;

    text-decoration: none;
    text-transform: uppercase;

    z-index: 5;

    transition: .25s;
}

body.page-home .graduation-btn:hover{

    background: #007DAE;
}

@media (max-width:1600px) {

    body.page-home .graduation-title{
        font-size: 150px;
    }

    body.page-home .graduation-group{

        width: 1400px;
    }
}

@media (max-width:1200px) {
    body.page-home .graduation-content{
        width: 130%;
        height: 100%;

    }

    body.page-home .graduation-section{
        height: 850px;
    }

    body.page-home .graduation-title{
        top: 120px;
        font-size: 100px;
        left: 39%;
    }

    body.page-home .graduation-group{
        width: 1100px;
        left: 36%;

    }
}

@media (max-width:768px) {

    body.page-home .graduation-section{
        height: 650px;
    }

    body.page-home .graduation-content{
        width: 180%;

    }

    body.page-home .graduation-title{
        top: 100px;
        left: 28%;
        font-size: 50px;
    }

    body.page-home .graduation-group{
        left: 24%;
        top: 47%;
        height: 60%;
        bottom: auto;
    }


    body.page-home .graduation-btn{
        width: 240px;
        height: 30px;
        font-size: 18px;
        padding: 10px 20px;
    }
}

@media(max-width:376px) {
    body.page-home .graduation-content{

        width: 200%;
    }

    body.page-home .graduation-group{
        width: 100%;
        left: 18%;
    }

    body.page-home .graduation-title{
        left: 25%;
        font-size: 46px;
    }
}

/* ======================================
   PERSONALIZA TU EXPERIENCIA
====================================== */

body.page-home .custom-section{
    position: relative;
    width: 100%;
    min-height: 1020px;
    background: linear-gradient(180deg, #005a80 0%, #0081a9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 380px;
    padding-bottom: 65px;
    overflow: hidden;
    box-sizing: border-box;
}

/* ================================= */

body.page-home .custom-center{
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ================================= */

body.page-home .letsgo{
    display: flex;
    margin-bottom: 16px;
    justify-content: center;
    align-items: center;
}

body.page-home .letsgo img{
    width: 236px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ================================= */

body.page-home .custom-icons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 60px;
}

body.page-home .custom-icons img{
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* ================================= */

body.page-home .custom-center h2{
    font-family: 'Kufam', sans-serif;
    text-transform: uppercase;
    margin: 0 0 65px 0;
    color: #FFFFFF;
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.5px;
}

/* ================================= */

body.page-home .custom-center a{
    flex-shrink: 0;
    padding: 10px 20px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color_fondo_1);
    border-radius: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Kufam', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

body.page-home .custom-center a:hover{
    background: #007DAE;
}

/* ================================= */

body.page-home .custom-collage{
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

body.page-home .custom-collage.custom-left{
    top: 115px;
    left: clamp(-160px, calc(50% - 560px), 400px);
}

body.page-home .custom-collage.custom-right{
    top: 105px;
    right: clamp(-160px, calc(50% - 560px), 400px);
}

body.page-home .custom-collage.custom-left img,
body.page-home .custom-collage.custom-left .polaroid{
    height: 450px;
    width: auto;
    object-fit: contain;
    display: block;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

body.page-home .custom-collage.custom-right img,
body.page-home .custom-collage.custom-right .polaroid{
    height: 430px;
    width: auto;
    object-fit: contain;
    display: block;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

@media(max-width:1200px) {
    body.page-home .custom-section{
        min-height: 940px;
        padding-top: 320px;
        padding-bottom: 55px;
    }

    body.page-home .custom-center h2{
        font-size: 48px;
        margin-bottom: 45px;
    }

    body.page-home .custom-icons{
        margin-bottom: 45px;
    }

    body.page-home .custom-collage.custom-left img{
        height: 400px;
    }

    body.page-home .custom-collage.custom-right img{
        height: 380px;
    }

    body.page-home .custom-collage.custom-left{
        top: 90px;
        left: -150px;
    }

    body.page-home .custom-collage.custom-right{
        top: 80px;
        right: -150px;
    }
}

@media(max-width:768px) {
    body.page-home .custom-section{
        min-height: 560px;
        padding-top: 50px;
        padding-bottom: 50px;
        justify-content: center;
    }

    body.page-home .custom-center h2{
        font-size: 32px;
        margin-bottom: 28px;
        line-height: 1.1;
    }

    body.page-home .letsgo img{
        width: 165px;
    }

    body.page-home .custom-icons{
        gap: 12px;
        margin-bottom: 25px;
    }

    body.page-home .custom-icons img{
        width: 46px;
        height: 46px;
    }

    body.page-home .custom-center a{
        width: 250px;
        height: 30px;
        font-size: 18px;
        padding: 10px 20px;
    }

    body.page-home .custom-collage{
        opacity: 0.18;
    }

    body.page-home .custom-collage.custom-left{
        top: 50%;
        transform: translateY(-50%);
        left: -230px;
    }

    body.page-home .custom-collage.custom-right{
        top: 50%;
        transform: translateY(-50%);
        right: -230px;
    }

    body.page-home .custom-collage.custom-left img{
        height: 320px;
    }

    body.page-home .custom-collage.custom-right img{
        height: 300px;
    }
}

/* =====================================
   #OXIGENATUVIDA
===================================== */

body.page-home .oxigena-life{

    position: relative;

    width: 100%;
    height: 1080px;

    overflow: hidden;
}

/* collage */

body.page-home .oxigena-life-bg{

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* texto */

body.page-home .oxigena-life-title{

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1305px;

    transform:
        translateX(-50%) translateY(-70px);

    font-family: 'Kufam', sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;

    color: #EEEEF0;

    text-align: center;
    text-transform: uppercase;

    text-shadow:
        1px 4px 64px rgba(0, 0, 0, .25);

    z-index: 3;
}

/* =======================
   RESPONSIVE
======================= */
@media(max-width:1600px) {
    body.page-home .adventures-bottom{
        width: 90%;
    }
}




@media(max-width:1200px) {}




@media(max-width:992px) {
    body.page-home .hero{
        height: 100vh;
        min-height: 750px;
    }

    body.page-home .hero-content{
        width: 90%;
    }

    body.page-home .hero-content h1{
        font-size: 28px;
    }

    body.page-home .hero-content p{
        width: 100%;
        font-size: 18px;
    }

    body.page-home .hero-btn{
        width: 260px;
    }

    body.page-home .hero-prev{
        left: 20px;
    }

    body.page-home .hero-next{
        right: 20px;
    }

    body.page-home .adventures-bottom{
        width: 80%;
    }

    body.page-home .advantages-list{
        font-size: 17px;
    }

}




@media(max-width:1600px) {
    body.page-home .oxigena-life{

        height: 850px;
    }

    body.page-home .oxigena-life-title{

        width: 1000px;
        font-size: 110px;
    }
}

@media(max-width:1200px) {

    body.page-home .oxigena-life{

        height: 850px;
    }

    body.page-home .oxigena-life-title{

        width: 900px;
        font-size: 80px;
    }
}

@media(max-width:768px) {

    body.page-home .oxigena-life{
        height: 650px;
    }

    body.page-home .oxigena-life-title{
        width: 95%;
        font-size: 52px;
        line-height: 3.1;
    }
}

@media(max-width:480px) {
    body.page-home .oxigena-life-title{
        font-size: 36px;
    }
}


/* ===================================================
   PÁGINA: esqui.html  (:is(body.page-esqui, body.page-catalogo))
=================================================== */
/* ==================================================
   ESQUÍ STYLES · OXIGENA VIAJES
   ================================================== */

:is(body.page-esqui, body.page-catalogo),
:is(body.page-esqui, body.page-catalogo){
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Kufam', sans-serif;
    background-color: #ffffff;
}

/* ==================================================
   HERO ESQUÍ
   ================================================== */

:is(body.page-esqui, body.page-catalogo) .a{
    color: #fff;
    text-decoration: none;
}



:is(body.page-esqui, body.page-catalogo) .trip-hero{
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    background-image: url("../assets/img/esqui/fondo-esqui.webp");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

:is(body.page-esqui, body.page-catalogo) .trip-hero__overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
}

:is(body.page-esqui, body.page-catalogo) .trip-hero__container{
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

:is(body.page-esqui, body.page-catalogo) .hero-ski-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

:is(body.page-esqui, body.page-catalogo) .hero-title-box{
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

:is(body.page-esqui, body.page-catalogo) .titular-main{
    margin: 0;
    font-family: 'Kufam', sans-serif;
    font-size: 130px;
    font-weight: 900;
    color: #002C42;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
}

:is(body.page-esqui, body.page-catalogo) .trip-hero__back{
    top: 100px;
    position: absolute;
    left: -105%;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    z-index: 5;
    transition: transform 0.2s ease, background 0.2s ease;
}

:is(body.page-esqui, body.page-catalogo) .trip-hero__back:hover{
    transform: scale(1.08);
    background: #B4EAFF;
}

:is(body.page-esqui, body.page-catalogo) .trip-hero__back img{
    width: 26px;
    height: 26px;
    display: block;
}

:is(body.page-esqui, body.page-catalogo) .hero-character-box{
    position: absolute;
    top: 230px;
    left: 32%;
    transform: translateX(-47%);
    width: 520px;
    z-index: 4;
    pointer-events: none;
}

:is(body.page-esqui, body.page-catalogo) .hero-ski-character{
    width: 100%;
    height: auto;
    display: block;
}

/* ==================================================
   CONTENT MAIN & FIN INFO
   ================================================== */

:is(body.page-esqui, body.page-catalogo) .content-main{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(body.page-esqui, body.page-catalogo) .fin-info{
    background: #F4F4F4;
    padding: 50px 20px 60px;
    width: 100%;
}

:is(body.page-esqui, body.page-catalogo) .fin-info .container{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__header{
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__header h1{
    color: #00C3FF;
    font-family: 'Kufam', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__content{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: start;
    width: 80%;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__left{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

:is(body.page-esqui, body.page-catalogo) .destinos-experiencia{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

:is(body.page-esqui, body.page-catalogo) .experiencia-card{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

:is(body.page-esqui, body.page-catalogo) .experiencia-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:is(body.page-esqui, body.page-catalogo) .experiencia-texto{
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
}

:is(body.page-esqui, body.page-catalogo) .experiencia-texto h3{
    font-family: 'Kufam', sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.18;
    color: #fff;
    background-color: #002C42;
    padding: 10px 10px;
    border-radius: 8px;
}

:is(body.page-esqui, body.page-catalogo) .beneficios{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(body.page-esqui, body.page-catalogo) .beneficios li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 56, 84, 0.15);
}

:is(body.page-esqui, body.page-catalogo) .beneficio-bullet{
    color: #0078AE;
    font-size: 10px;
    margin-top: 3px;
    flex-shrink: 0;
}

:is(body.page-esqui, body.page-catalogo) .beneficios li span:last-child{
    font-family: 'Kufam', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #003854;
    line-height: 1.35;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__card{
    background: #BAE8FF;
    border-radius: 12px;
    padding: 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__card .card-logo{
    width: 100px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

:is(body.page-esqui, body.page-catalogo) .fin-info__card h3{
    font-family: 'Kufam', sans-serif;
    color: #003854;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* ==================================================
   DESTINOS GALERÍA (SEMANA BLANCA)
   ================================================== */

:is(body.page-esqui, body.page-catalogo) .destinos-galeria{
    background: linear-gradient(180deg, #37A2D2 0%, #52BEEC 35%, #B4E8FD 100%);
    padding: 50px 20px 80px;
    width: 100%;
}

:is(body.page-esqui, body.page-catalogo) .destinos-galeria .container{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(body.page-esqui, body.page-catalogo) .destinos__header{
    text-align: center;
    margin-bottom: 40px;
    width: 80%;
}

:is(body.page-esqui, body.page-catalogo) .destinos__header h2{
    color: #002C42;
    font-family: 'Kufam', sans-serif;
    font-size: 38px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.15;
}

:is(body.page-esqui, body.page-catalogo) .destinos-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
    align-items: start;
}

:is(body.page-esqui, body.page-catalogo) .destino-card{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    height: fit-content;
}

:is(body.page-esqui, body.page-catalogo) .destino-slider{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
}

:is(body.page-esqui, body.page-catalogo) .slider-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:is(body.page-esqui, body.page-catalogo) .slider-btn{
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: transform 0.2s ease;
}

:is(body.page-esqui, body.page-catalogo) .slider-btn:hover{
    transform: translateY(-50%) scale(1.1);
}

:is(body.page-esqui, body.page-catalogo) .slider-btn.prev{
    left: 8px;
}

:is(body.page-esqui, body.page-catalogo) .slider-btn.next{
    right: 8px;
}

:is(body.page-esqui, body.page-catalogo) .slider-btn img{
    width: 34px;
    height: 34px;
    display: block;
}

:is(body.page-esqui, body.page-catalogo) .destino-card-bottom{
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 4;
}

:is(body.page-esqui, body.page-catalogo) .destino-info{
    display: flex;
    gap: 6px;
    padding: 0 20px 5px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: -10px;
}

:is(body.page-esqui, body.page-catalogo) .destino-info .dias{
    flex: 1;
    background: #FF5F6A;
    color: #ffffff;
    font-family: 'Kufam', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    padding: 6px 4px;
    border-radius: 8px;
}

:is(body.page-esqui, body.page-catalogo) .destino-info .precio{
    flex: 1;
    background: #7756F7;
    color: #ffffff;
    font-family: 'Kufam', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    padding: 6px 4px;
    border-radius: 8px;
}

:is(body.page-esqui, body.page-catalogo) .destino-btn{
    width: 100%;
    height: 42px;
    background: #005E8D;
    color: #ffffff;
    font-family: 'Kufam', sans-serif;
    font-size: 24px;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    padding: 0 8px;
    margin: 0;
    transition: background 0.2s ease;
}

:is(body.page-esqui, body.page-catalogo) .destino-btn:hover{
    background: #007BB8;
}

/* ==================================================
   ESQUÍ · RESPONSIVE MÓVIL (DISEÑO DE REFERENCIA)
   ================================================== */
/* Header mobile adjustment */
@media (max-width: 1600px) {
    :is(body.page-esqui, body.page-catalogo) .trip-hero__back{
        left: -84%;
    }
}

@media (max-width: 1200px) {
    :is(body.page-esqui, body.page-catalogo) .trip-hero__back{
        left: -25%;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos-galeria{
        padding-top: 20px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-slider{
        height: 290px;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos-grid{
        width: 90%;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-info .dias{
        font-size: 12px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-info .precio{
        font-size: 12px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-btn{
        font-size: 15px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-card-bottom{
        padding: 5px;
    }
}

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

    :is(body.page-esqui, body.page-catalogo) .destino-card-bottom{
        padding: 5px;
    }

    :is(body.page-esqui, body.page-catalogo) .header .nav{
        padding: 6px 12px;
        min-height: 46px;
    }

    :is(body.page-esqui, body.page-catalogo) .header .logo{
        padding: 0;
    }

    :is(body.page-esqui, body.page-catalogo) .header .logo img{
        width: 52px;
    }

    :is(body.page-esqui, body.page-catalogo) .header .burger{
        width: 34px;
        height: 34px;
        padding: 3px;
    }

    :is(body.page-esqui, body.page-catalogo) .header .burger span{
        width: 22px;
        height: 2.5px;
        margin: 2px 0;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__content{
        display: flex;
        align-items: center;
    }

    /* Hero */
    :is(body.page-esqui, body.page-catalogo) .trip-hero{
        height: 185px;
        background-position: center bottom;
    }

    :is(body.page-esqui, body.page-catalogo) .hero-title-box{
        top: 36px;
    }

    :is(body.page-esqui, body.page-catalogo) .titular-main{
        font-size: 48px;
        letter-spacing: -0.5px;
    }

    :is(body.page-esqui, body.page-catalogo) .trip-hero__back{
        top: 60px;
        left: -110%;
        bottom: -35px;
        width: 30px;
        height: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    :is(body.page-esqui, body.page-catalogo) .trip-hero__back img{
        width: 11px;
        height: 11px;
    }

    :is(body.page-esqui, body.page-catalogo) .hero-character-box{
        left: 29%;
        top: 70px;
        width: 239px;
        transform: translateX(-47%);
    }

    /* Fin info */
    :is(body.page-esqui, body.page-catalogo) .fin-info{
        padding: 22px 14px 24px;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__header{
        margin-bottom: 14px;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__header h1{
        font-size: 18px;
        line-height: 1.25;
        letter-spacing: 0.2px;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__content{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 80%;
        max-width: 340px;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__left{
        gap: 10px;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos-experiencia{
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    :is(body.page-esqui, body.page-catalogo) .experiencia-card{
        border-radius: 8px;
        height: 220px;
        width: 90%;
    }

    :is(body.page-esqui, body.page-catalogo) .experiencia-texto{
        bottom: 6px;
        left: 6px;
        right: 6px;

    }

    :is(body.page-esqui, body.page-catalogo) .experiencia-texto h3{
        font-size: 15px;
        line-height: 1.15;
    }

    :is(body.page-esqui, body.page-catalogo) .beneficios{
        gap: 2px;
    }

    :is(body.page-esqui, body.page-catalogo) .beneficios li{
        padding: 4px 0;
        gap: 6px;
        border-bottom: 1px solid rgba(0, 56, 84, 0.12);
    }

    :is(body.page-esqui, body.page-catalogo) .beneficio-bullet{
        font-size: 7px;
        margin-top: 2px;
    }

    :is(body.page-esqui, body.page-catalogo) .beneficios li span:last-child{
        font-size: 12px;
        font-weight: 400;
        line-height: 1.25;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__card{
        border-radius: 6px;
        padding: 14px 16px;
        width: 100%;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__card .card-logo{
        width: 52px;
        margin-bottom: 6px;
    }

    :is(body.page-esqui, body.page-catalogo) .fin-info__card h3{
        font-size: 15px;
        font-weight: 400;
        line-height: 1.35;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos-galeria{
        padding: 20px 8px 36px;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos__header{
        margin-bottom: 14px;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos__header h2{
        font-size: 18px;
        letter-spacing: 0px;
        font-weight: 600;
    }

    :is(body.page-esqui, body.page-catalogo) .destinos-grid{
        gap: 15px;
        width: 90%;
        align-items: start;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-card{
        border-radius: 5px;
        height: fit-content;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-slider{
        height: 250px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-info{

        padding: 0 5px 5px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-info .dias{
        font-size: 12px;
        padding: 2px 0;
        border-radius: 5px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-info .precio{
        font-size: 12px;
        padding: 2px 0;
        border-radius: 5px;
    }

    :is(body.page-esqui, body.page-catalogo) .destino-btn{
        height: 40px;
        font-size: 12px;
        font-weight: 500;
        padding: 0 2px;
    }

    :is(body.page-esqui, body.page-catalogo) .slider-btn{
        width: 18px;
        height: 18px;
        background: transparent;
    }

    :is(body.page-esqui, body.page-catalogo) .slider-btn.prev{
        left: 4px;
    }

    :is(body.page-esqui, body.page-catalogo) .slider-btn.next{
        right: 4px;
    }

    :is(body.page-esqui, body.page-catalogo) .slider-btn img{
        width: 20px;
        height: 20px;
    }
}

/*------------------------ */
@media (max-width: 450px) {

    :is(body.page-esqui, body.page-catalogo) .destinos-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    :is(body.page-esqui, body.page-catalogo) .destino-card{
        width: 100%;
    }

    :is(body.page-esqui, body.page-catalogo) .trip-hero__back{
        top: 60px;
        left: -80%;
        bottom: -35px;
        width: 30px;
        height: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    :is(body.page-esqui, body.page-catalogo) .hero-character-box{
        left: 44%;
        top: 74px;
        width: 311px;
        transform: translateX(-47%);
    }
}

@media (max-width: 375px) {
    :is(body.page-esqui, body.page-catalogo) .trip-hero__back{
        top: 60px;
        left: -50%;
        bottom: -35px;
        width: 30px;
        height: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        z-index: 1000;
    }

    :is(body.page-esqui, body.page-catalogo) .hero-character-box{
        left: 44%;
        top: 74px;
        width: 311px;
        transform: translateX(-47%);
    }
}


/* ===================================================
   PÁGINA: destino-la-molina.html  (body.page-destino-la-molina)
=================================================== */
/* ==========================
   VARIABLES
========================== */
body.page-destino-la-molina,
body.page-destino-la-molina{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Kufam', sans-serif;
    background-color: #ffffff;
}

body.page-destino-la-molina{

    --color-white: #FFFFFF;
    --color-primary: #0078AE;

    --hero-height: 530px;

    --container: 1920px;

    --transition: .3s ease;

}

/* ==========================
   HERO
========================== */

body.page-destino-la-molina .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/destino-la-molina/fondo-esqui.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-destino-la-molina .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-destino-la-molina .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-destino-la-molina .trip-hero__back{
    top: 240px;
    position: absolute;
    left: 10%;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    z-index: 5;
    transition: transform 0.2s ease, background 0.2s ease;
}

body.page-destino-la-molina .trip-hero__back:hover{
    transform: scale(1.08);
    background: #B4EAFF;
}

body.page-destino-la-molina .trip-hero__back img{

    width: 26px;
    height: 26px;
    display: block;
}

body.page-destino-la-molina .trip-hero__back div{
    width: 30px;
    height: 30px;
}





/* ==========================
   TEXTO
========================== */

body.page-destino-la-molina .trip-hero__content{

    position: absolute;
    left: 11%;
    bottom: 28px;
    display: flex;
    flex-direction: column;
}

body.page-destino-la-molina .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-destino-la-molina .trip-hero__title{
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}







/*contenido..............................*/


body.page-destino-la-molina{

    --color-primary: #22B8EA;
    --color-primary-dark: #005B87;

    --color-date: #FF6368;

    --color-text: #FFFFFF;
    --color-dark: #003A57;

    --radius: 10px;

    --container: (1490px);

    --shadow:
        0 6px 30px rgba(0, 0, 0, .08);
}

body.page-destino-la-molina .content-main{
    position: relative;
    padding-top: 20px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}

body.page-destino-la-molina .trip-overview{

    position: relative;

    padding: 24px 15px;


}

body.page-destino-la-molina .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-destino-la-molina .trip-overview__title{

    color: #fff;
    font-family: 'Kufam', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

body.page-destino-la-molina .trip-overview__title span{

    display: block;
}

body.page-destino-la-molina .trip-overview__top{

    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

body.page-destino-la-molina .trip-overview__destination{

    color: var(--12, #EEEEF0);
    /* titular-secciones */
    font-family: var(--primaria, Kufam);
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 60px */
    text-transform: uppercase;
}

body.page-destino-la-molina .trip-overview__cta{

    min-width: 410px;

    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: var(--radius);

    background: var(--color-primary);

    color: var(--color-dark);

    text-decoration: none;

    font-size: 2rem;

    font-weight: 900;

    transition: .25s;
    color: var(--4, #003854);
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 92% */
    text-transform: uppercase;
}

body.page-destino-la-molina .trip-overview__cta:hover{
    background: #B4EAFF;
    color: #003854;
}

body.page-destino-la-molina .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}




body.page-destino-la-molina .card{

    border-radius: var(--radius);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

    color: white;

    box-shadow: var(--shadow);
}

body.page-destino-la-molina .card--price{
    width: 100%;
    background: var(--color-primary);
}

body.page-destino-la-molina .card__label{
    vertical-align: top;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

body.page-destino-la-molina .card__value{
    vertical-align: top;
    text-align: left;
    font-size: 30px;
    font-weight: 800;

}

body.page-destino-la-molina .card--dates{
    width: 100%;
    background: var(--color-date);
    font-size: 1rem;
}

body.page-destino-la-molina .card--payment{
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    background: #fff;

    padding: 10px;


}

body.page-destino-la-molina .payment-fragmented{
    line-height: 1;
    width: 95%;

    background: var(--color-primary-dark);

    border-radius: 8px;

    color: white;

    padding: 10px;
}

body.page-destino-la-molina .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-destino-la-molina .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-destino-la-molina .payment-fragmented li{

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

body.page-destino-la-molina .payment-full{
    font-family: Kufam;
    font-size: 20px;

    margin-top: 10px;

    width: 100%;

    height: 54px;

    background: var(--color-primary);

    border-radius: 8px;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    color: white;

    font-weight: 900;
}

body.page-destino-la-molina .card--activities{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    background: #14B4E6;
}

body.page-destino-la-molina .card--activities h3{

    font-size: 2rem;

    margin-bottom: 20px;
}

body.page-destino-la-molina .card--activities ul{

    list-style: none;

    text-align: left;
    list-style-type: disc;
}

body.page-destino-la-molina .card--activities li{

    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-decoration: dashed;
    text-transform: uppercase;
    line-height: 1;
}


/*GALERIA----------------------------------*/

body.page-destino-la-molina .galeria{

    display: flex;
    flex-direction: column;

    height: 920px;
    /* igual que la columna de itinerario */
}

/* ==============================
   VISOR
============================== */

body.page-destino-la-molina .gallery__viewer{

    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    border-radius: 12px;

    background: #e5e5e5;
}

/* Slides */

body.page-destino-la-molina .gallery-slide{

    position: absolute;

    inset: 0;

    display: none;
}

body.page-destino-la-molina .gallery-slide.active{

    display: block;
}

/* Imagen */

body.page-destino-la-molina .gallery-slide img{

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* MAPA */

body.page-destino-la-molina .gallery-slide iframe{

    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}




/*
.trip-detail{

    background:
    linear-gradient(
        180deg,
        #21B7E9 0%,
        #82CCE9 40%,
        #B6E5F7 100%
    );

    padding:40px 0 70px;

    width:100%;
}
    */

body.page-destino-la-molina .trip-detail{
    width: 90%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    max-width: 1400px;

    margin: 0 auto;
}

body.page-destino-la-molina .destination-gallery{

    display: flex;
    flex-direction: column;
}

body.page-destino-la-molina .gallery-main-image{

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-destino-la-molina .gallery-arrow{

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 60px;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    background: #fff;

    cursor: pointer;

    z-index: 100;
}

/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-destino-la-molina .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-destino-la-molina .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-destino-la-molina .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-destino-la-molina .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-destino-la-molina .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-destino-la-molina .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
    text-decoration: none;
}

body.page-destino-la-molina .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-destino-la-molina .gallery-tab.active{

    text-decoration: underline;

}


body.page-destino-la-molina .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-destino-la-molina .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-destino-la-molina .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-destino-la-molina .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-destino-la-molina .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-destino-la-molina .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}

body.page-destino-la-molina .trip-itinerary{


    display: flex;

    flex-direction: column;

    height: 920px;

    background: #ececec;

    border-radius: 12px;

    padding: 28px;
}

body.page-destino-la-molina .trip-itinerary__title{
    padding-top: 20px;
    font-family: Kufam;
    font-size: 40px;
    font-weight: 500;
    color: #1BB8EA;
}

body.page-destino-la-molina .trip-itinerary__tabs{
    font-family: Kufam;
    font-weight: 200;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

body.page-destino-la-molina .day-tab{

    background: #005E8D;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 8px;
    margin: 0;
    transition: background 0.2s ease;


    font-family: Kufam;
    font-weight: 400;
    min-width: 92px;
    height: 50px;

    border: none;
    border-radius: 8px;

    font-size: 22px;
    font-weight: 800;

    cursor: pointer;
}

body.page-destino-la-molina .day-tab:hover{
    background: #007BB8;
    color: #fff;

}

body.page-destino-la-molina .day-tab.active{

    background: #00C3FF;
    color: #003854;
}

body.page-destino-la-molina .trip-itinerary__content{
    color: #003854;
    font-family: kufam;
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    min-height: 0;
    font-size: 20px;
    line-height: 30px;
}

body.page-destino-la-molina .trip-itinerary__content::-webkit-scrollbar{

    width: 10px;
}

body.page-destino-la-molina .trip-itinerary__content::-webkit-scrollbar-thumb{

    background: #1EBBF0;

    border-radius: 20px;
}

body.page-destino-la-molina .itinerary-program{

    color: #003A57;

    font-size: 20px;

    line-height: 1.65;
}

body.page-destino-la-molina .itinerary-program p{

    margin-bottom: 24px;
}





/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-destino-la-molina{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-destino-la-molina .trip-info{

    padding: 40px 0 60px;



}

body.page-destino-la-molina .container{

    width: min(1400px, 95%);
    margin: auto;
    margin: auto;
}

body.page-destino-la-molina .trip-info__grid{
    font-family: kufam;
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 24px;
}


body.page-destino-la-molina .info-card{
    gap: 20px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 20px;

    box-shadow: var(--shadow);
    color: #003854;
}

body.page-destino-la-molina .info-com-cond{
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

body.page-destino-la-molina .info-card h2{
    color: var(--blue);
    font-size: 25px;
    margin-bottom: 5px;
    font-weight: 800;
}

body.page-destino-la-molina .info-card h3{

    color: #1ab9ea;

    font-size: 30px;

    margin-top: 10px;
}

body.page-destino-la-molina .info-card ul,
body.page-destino-la-molina .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}

/*faq section---------------------*/
body.page-destino-la-molina{

    --faq-bg: #F2F2F2;
    --faq-title: #18B9EA;
    --faq-text: #003A57;
    --faq-scroll: #18B9EA;
}

body.page-destino-la-molina .faq-section{
    font-family: kufam;
    width: 100%;
}

body.page-destino-la-molina .faq-card{

    background: var(--faq-bg);

    border-radius: 12px;

    padding: 20px;
}

body.page-destino-la-molina .faq-title{
    font-family: kufam;
    color: var(--blue);
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 800;
}

body.page-destino-la-molina .faq-scroll{

    height: 418px;

    overflow-y: auto;

    padding-right: 0px;
    padding-left: 0px;
}

body.page-destino-la-molina .faq-scroll::-webkit-scrollbar{

    width: 10px;
}

body.page-destino-la-molina .faq-scroll::-webkit-scrollbar-track{

    background: #d8d8d8;

    border-radius: 20px;
}

body.page-destino-la-molina .faq-scroll::-webkit-scrollbar-thumb{

    background: var(--faq-scroll);

    border-radius: 20px;
}

body.page-destino-la-molina .faq-item{
    padding: 5px;
    border: none;
    color: #003854;
    background-color: #B4EAFF;
    margin-bottom: 5px;
    padding-left: 5px;
    font-weight: 600;
}

body.page-destino-la-molina .faq-item:hover{

    background-color: #00C3FF;
}

body.page-destino-la-molina .faq-item summary{

    /* mobil-regular */

    list-style: none;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    cursor: pointer;

    color: var(--faq-text);

    font-size: 18px;

    line-height: auto;
    padding: 6px 0px;
    font-weight: 500;
}

body.page-destino-la-molina .faq-item summary::-webkit-details-marker{
    align-items: center;
    padding-left: 5px;
    display: none;
}

body.page-destino-la-molina .faq-item summary::before{
    font-size: 25px;
    align-items: center;
    content: "+";

    width: 20px;
    height: 100%;

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-repeat: no-repeat;

}


body.page-destino-la-molina .faq-item[open] summary::before{

    background-color: #00C3FF;
    content: "-";

}

body.page-destino-la-molina .faq-content{

    color: #14B4E6;

    margin-left: 10px;

    margin-top: 5px;

    color: var(--faq-text);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
}



body.page-destino-la-molina .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;
    color: #B4EAFF;
    border-radius: 8px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-destino-la-molina .contact-card__icon{

    text-align: center;

    margin-bottom: 25px;
}

body.page-destino-la-molina .contact-card__icon img{

    max-width: 170px;
    height: auto;
}

body.page-destino-la-molina .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-destino-la-molina .contact-card hr{

    margin-top: 15px;
    margin-bottom: 15px;
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-destino-la-molina .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-destino-la-molina .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-destino-la-molina .contact-card-datos img{
    width: 25px;
}


body.page-destino-la-molina .btn-primary{
    font-family: Kufam;
    width: 100%;

    height: 58px;

    border: none;

    border-radius: 6px;

    background: var(--blue);

    color: #fff;

    font-size: 22px;

    font-weight: 700;

    cursor: pointer;
}

body.page-destino-la-molina .btn-primary:hover{
    background: #B4EAFF;
    color: #003854;
}

body.page-destino-la-molina .btn-condiciones{
    background: #005E8D;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 8px;
    margin: 0;
    transition: background 0.2s ease;



    padding: 10px;
    font-family: Kufam;
    width: 100%;
    height: 58px;
    line-height: 20px;
    /* 133.333% */
    gap: 10px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
}

body.page-destino-la-molina .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-destino-la-molina .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


body.page-destino-la-molina .payment-icons{

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 20px;
}

body.page-destino-la-molina .payment-icons img{

    height: 32px;
}

body.page-destino-la-molina .equipment-card{
    font-family: Kufam;

    background: #efefef;

    border-radius: 8px;

    padding: 26px;
    color: #003854;


}

body.page-destino-la-molina .equipment-card h2{

    color: var(--blue);

    font-size: 34px;

    margin-bottom: 24px;
}

body.page-destino-la-molina .equipment-list{

    display: flex;

    flex-direction: column;

    gap: 14px;

    list-style: none;

    padding: 0;

}

body.page-destino-la-molina .equipment-list li{


    background: white;

    border-radius: 6px;

    padding: 18px 22px;
}


@media (max-width:1600px) {
    body.page-destino-la-molina .trip-hero__back{
        left: 4%;
    }

    body.page-destino-la-molina .card__value{
        font-size: 28px;
    }
}



@media (max-width:1200px) {
    body.page-destino-la-molina .trip-hero__back{
        top: 200px;
        left: 5%;
    }

    body.page-destino-la-molina .trip-hero{

        height: 420px;
    }

    body.page-destino-la-molina .trip-hero__content{

        left: 10%;
        bottom: 25px;
    }

    body.page-destino-la-molina .trip-hero__label{

        font-size: 24px;
    }

    body.page-destino-la-molina .trip-hero__title{

        font-size: 30px;
    }

    body.page-destino-la-molina .trip-overview__title{
        font-size: 20px;
    }

    body.page-destino-la-molina .trip-info__grid{

        grid-template-columns:
            1fr 1fr;
    }


    body.page-destino-la-molina .trip-overview__top{
        font-size: 20px;
    }

    body.page-destino-la-molina .trip-overview__destination{
        font-size: 25px;
    }

    body.page-destino-la-molina .trip-overview__cta{
        min-width: 250px;
        font-size: 25px;
    }


    body.page-destino-la-molina .card__value{
        font-size: 20px;
    }

    body.page-destino-la-molina .trip-itinerary__tabs{
        justify-content: center;
    }

    body.page-destino-la-molina .trip-overview__cards{

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/*==================================================
CONTACT CARD - TABLET
==================================================*/

@media (max-width:1024px) {

    body.page-destino-la-molina .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos {

            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {
            width: 22px;
            margin: 0;
        }



        .equipment-card h2 {

            font-size: 24px;
        }

        .btn-primary {

            font-size: 16px;
        }

        .hero-propuesta {

            height: 540px;
        }

        .navbar__container {

            display: flex;

            justify-content: space-between;
        }

        .navbar__link {

            display: none;
        }

        .navbar__toggle {

            display: block;
        }

        .hero-propuesta__text span {

            font-size: 48px;
        }

        .galeria,
        .itinerario {
            height: auto;
        }

        .gallery__viewer {
            height: 560px;
            flex: none;
        }

        .hero-propuesta {

            height: 540px;
        }

        .navbar__container {

            display: flex;

            justify-content: space-between;
        }

        .navbar__link {

            display: none;
        }

        .navbar__toggle {

            display: block;
        }

        .hero-propuesta__text span {

            font-size: 48px;
        }

        .galeria,
        .itinerario {
            height: auto;
        }

        .gallery__viewer {
            height: 560px;
            flex: none;
        }

    }
}



/*==================================================
CONTACT CARD - MOBILE
==================================================*/

@media (max-width:768px) {
    body.page-destino-la-molina .trip-hero__back{
        top: 130px;
        left: 10%;
        bottom: -35px;
        width: 30px;
        height: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        z-index: 1000;
    }

    body.page-destino-la-molina .hero-character-box{
        left: 10%;
        top: 74px;
        width: 311px;
        transform: translateX(-47%);
    }

    body.page-destino-la-molina .trip-hero{
        height: 260px;
        background-position: center;
    }

    body.page-destino-la-molina .trip-hero__back{
        top: 130px;
        left: 7%;
        bottom: -35px;
        width: 30px;
        height: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    body.page-destino-la-molina .trip-hero__back img{
        width: 11px;
        height: 11px;
    }

    body.page-destino-la-molina .trip-hero__back svg{
        width: 22px;
        height: 22px;
    }



    body.page-destino-la-molina .trip-hero__content{
        left: 10%;
        bottom: 16px;
    }

    body.page-destino-la-molina .trip-hero__label{
        font-size: 25px;
        margin-bottom: 4px;
    }

    body.page-destino-la-molina .trip-hero__title{
        font-size: 25px;
        left: 10%;
    }

    body.page-destino-la-molina .sub-grupo h3{
        font-size: 25px;
    }

    body.page-destino-la-molina .trip-overview{

        padding: 20px 0 40px;
    }

    body.page-destino-la-molina .trip-overview__container{

        width: min(100% - 24px, 100%);
    }

    body.page-destino-la-molina .trip-overview__title{

        font-size: 2rem;
    }

    body.page-destino-la-molina .trip-overview__top{
        width: 90%;
        margin-top: 30px;
        gap: 20px;
    }

    body.page-destino-la-molina .card__value{
        font-size: 25px;
    }


    body.page-destino-la-molina .trip-overview__destination{

        font-size: 25px;
    }

    body.page-destino-la-molina .trip-overview__cta{
        min-width: 230px;
        font-size: 20px;
    }

    body.page-destino-la-molina .trip-overview__destination{
        gap: 10px;
        font-size: 20px;
    }



    body.page-destino-la-molina .trip-itinerary__title{
        font-size: 35px;
    }

    body.page-destino-la-molina .faq-card{

        padding: 18px;
    }

    body.page-destino-la-molina .faq-title{

        font-size: 28px;
    }

    body.page-destino-la-molina .faq-scroll{

        height: 520px;
    }

    body.page-destino-la-molina .faq-item summary{

        font-size: 16px;

        gap: 12px;
    }

    body.page-destino-la-molina .faq-item summary::before{

        width: 28px;
        height: 28px;

        font-size: 18px;
    }

    body.page-destino-la-molina .faq-content{
        color: var(--12, #B4EAFF);
        margin-left: 40px;

        font-size: 14px;
    }


    body.page-destino-la-molina .contact-card{
        display: grid;
        flex-direction: row;
        grid-template-columns: 30px 4fr;
        text-align: left;

        padding: 22px 18px;
    }

    body.page-destino-la-molina .contact-card__icon{
        width: 30px;
        margin-bottom: 18px;
    }

    body.page-destino-la-molina .contact-card__icon img{
        width: 15%;
        width: 72px;
    }

    body.page-destino-la-molina .contact-card h3{
        font-size: 12px;
    }

    body.page-destino-la-molina .contact-card p{
        font-size: 15px;
        line-height: 1.5;
    }


    body.page-destino-la-molina .contact-card-datos{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    body.page-destino-la-molina .contact-card-datos img{

        width: 18px;
    }

    body.page-destino-la-molina .contact-card-datos a{
        font-size: 15px;
        word-break: break-word;
    }

    body.page-destino-la-molina .trip-detail{
        padding-top: 25px;
    }


    body.page-destino-la-molina .trip-itinerary__title{
        font-size: 28px;
    }

    body.page-destino-la-molina .day-tab{
        min-width: 92px;
        font-size: 20px;
        height: 40px;
    }

    body.page-destino-la-molina .trip-itinerary__content{
        height: 380px;
    }

    body.page-destino-la-molina .gallery-tab{
        padding-top: 10px;
        font-size: 20px;
        height: 42px;
    }

    body.page-destino-la-molina .contact-card-datos a{
        font-size: 20px;
    }

    body.page-destino-la-molina .gallery__viewer{
        height: 340px;
    }

    body.page-destino-la-molina .itinerario{
        height: auto;
    }

    body.page-destino-la-molina .itinerario__contenido{
        height: 380px;
        flex: none;
    }

    body.page-destino-la-molina .trip-info{

        padding: 20px 0 40px;
    }

    body.page-destino-la-molina .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-destino-la-molina .info-card h2{

        font-size: 22px;
    }

    body.page-destino-la-molina .hero-propuesta{
        height: 420px;
    }

    body.page-destino-la-molina .navbar__container{
        padding: 18px 20px;
    }

    body.page-destino-la-molina .navbar__logo img{
        width: 90px;
    }

    body.page-destino-la-molina .hero-propuesta__content{
        left: 24px;
        bottom: 32px;
    }

    body.page-destino-la-molina .hero-propuesta__back{
        width: 52px;
        height: 52px;
    }

    body.page-destino-la-molina .hero-propuesta__back img{
        width: 24px;
    }

    body.page-destino-la-molina .hero-propuesta__text span{
        font-size: 34px;
    }

}

@media (max-width:450px) {
    body.page-destino-la-molina .hero-character-box{
        left: 20%;

    }

    body.page-destino-la-molina .trip-overview__title{

        font-size: 18px;
    }

    body.page-destino-la-molina .trip-overview__destination{
        text-align: center;
    }

    body.page-destino-la-molina .trip-hero__content{
        left: 10%;
    }

    body.page-destino-la-molina .trip-overview__top{
        display: flex;
        flex-direction: column;
    }



    body.page-destino-la-molina .destination-gallery{
        height: 200px;
    }

    body.page-destino-la-molina .gallery-arrow{
        width: 30px;
        height: 30px;
    }

    body.page-destino-la-molina .gallery-arrow img{
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    body.page-destino-la-molina .gallery-tab{
        font-size: 15px;
    }

    body.page-destino-la-molina .gallery-tabs{
        margin-top: -13px;
    }

    body.page-destino-la-molina .trip-detail{
        width: 90%;

        display: flex;
        flex-direction: column;

    }

    body.page-destino-la-molina .trip-itinerary{
        padding: 10px;
    }

    body.page-destino-la-molina .destination-gallery{
        display: flex;
        flex-direction: column;
    }

    body.page-destino-la-molina .card{
        padding: 10px;
    }

    body.page-destino-la-molina .trip-overview__cards{
        width: 100%;
        gap: 10px;
    }

    body.page-destino-la-molina .contact-card{
        padding: 10px;
        display: flex;
        flex-direction: row;
    }

    body.page-destino-la-molina .card__value{
        font-size: 12px;
    }

    body.page-destino-la-molina .contact-card-datos a{
        font-size: 12px;
    }

    body.page-destino-la-molina .contact-card h3{
        font-size: 11 px;
    }

    body.page-destino-la-molina .contact-card p{
        line-height: 12px;
        font-size: 12px;
    }

    body.page-destino-la-molina .faq-title{
        font-size: 20px;
    }
}


/* ===================================================
   PÁGINA: formulario-datos.html  (body.page-formulario-datos)
=================================================== */
/* ==========================
   VARIABLES
========================== */

body.page-formulario-datos{

    --color-white: #FFFFFF;
    --color-primary: #0078AE;

    --hero-height: 530px;

    --container: 1920px;

    --transition: .3s ease;

}

body.page-formulario-datos .container{
    width: min(1400px, 90%);
    margin: 0 auto;

    display: flex;
    flex-direction: row;

    gap: 28px;

    align-items: start;
}


/* CONTENEDOR */

body.page-formulario-datos .accordion-checkbox{

    margin: 18px 0;

}

/* Checkbox oculto */

body.page-formulario-datos .accordion-toggle{

    display: none;

}

/* Cabecera */

body.page-formulario-datos .accordion-label{
    color: #00C3FF;
    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    background: #B4EAFF;

    border-radius: 8px;

    cursor: pointer;

    user-select: none;

}

/* Texto */

body.page-formulario-datos .accordion-title{

    display: flex;

    align-items: center;

    gap: 12px;

}

/* Casilla */

body.page-formulario-datos .checkbox{

    width: 18px;

    height: 18px;

    border-radius: 4px;

    background: #fff;

    border: 2px solid #fff;

}

/* Flecha */

body.page-formulario-datos .accordion-arrow{

    transition: .35s;

    color: var(--color-primary-dark);

}

/* Contenido */

body.page-formulario-datos .accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background-color: #B4EAFF;
    color: #003854;
}

/* Cuando está abierto */

body.page-formulario-datos .accordion-toggle:checked~.accordion-content{

    max-height: max-content;

    margin-top: 15px;

}

/* Flecha */

body.page-formulario-datos .accordion-toggle:checked+.accordion-label .accordion-arrow{

    transform: rotate(180deg);

}

/* Casilla marcada */

body.page-formulario-datos .accordion-toggle:checked+.accordion-label .checkbox{

    background: var(--color-primary);

    border-color: var(--color-primary);

    position: relative;

}

body.page-formulario-datos .accordion-toggle:checked+.accordion-label .checkbox::after{

    content: "✓";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 12px;

}

/* Campos */

body.page-formulario-datos .form-grid{

    display: grid;

    gap: 15px;

    padding: 18px;

}

body.page-formulario-datos .form-grid input{

    width: 100%;

}

body.page-formulario-datos .accordion-content p{
    margin-left: 15px;
}

body.page-formulario-datos .medidas-user{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ==========================
   HERO
========================== */

body.page-formulario-datos .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/formulario-datos/fondo-esqui.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-formulario-datos .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-formulario-datos .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-formulario-datos .trip-hero__back{

    position: absolute;

    left: 92px;

    top: 228px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12);

    transition: var(--transition);
}

body.page-formulario-datos .trip-hero__back div{
    width: 30px;
    height: 30px;
}

body.page-formulario-datos .trip-hero__back:hover{


    background: #B4EAFF;
    color: #003854;
}

body.page-formulario-datos .trip-hero__back img{

    width: 32px;
    height: 32px;
}

body.page-formulario-datos .form-steps{
    color: #062f49;
    padding: 10px;

    .active {
        font-weight: 700;
    }
}

/* ==========================
   TEXTO
========================== */

body.page-formulario-datos .trip-hero__content{

    position: absolute;

    left: 82px;

    bottom: 28px;

    display: flex;
    flex-direction: column;
}

body.page-formulario-datos .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-datos .trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

@media (max-width:1024px) {


    body.page-formulario-datos .trip-hero{

        height: 420px;
    }

    body.page-formulario-datos .trip-hero__back{

        left: 40px;
        top: 180px;
    }

    body.page-formulario-datos .trip-hero__content{

        left: 40px;
        bottom: 25px;
    }

    body.page-formulario-datos .trip-hero__label{

        font-size: 24px;
    }

    body.page-formulario-datos .trip-hero__title{

        font-size: 48px;
    }

}

@media (max-width:768px) {

    body.page-formulario-datos .trip-hero{

        height: 260px;

        background-position: center;
    }

    body.page-formulario-datos .trip-hero__back{

        width: 46px;
        height: 46px;

        left: 16px;
        top: 110px;
    }

    body.page-formulario-datos .trip-hero__back svg{

        width: 22px;
        height: 22px;
    }

    body.page-formulario-datos .trip-hero__content{

        left: 16px;
        bottom: 16px;
    }

    body.page-formulario-datos .trip-hero__label{

        font-size: 12px;

        margin-bottom: 4px;
    }

    body.page-formulario-datos .trip-hero__title{

        font-size: 22px;
    }

}





/*contenido..............................*/


body.page-formulario-datos .content-main{
    position: relative;
    padding: 24px 0 0px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}

body.page-formulario-datos .trip-overview{

    position: relative;

    padding: 24px 15px;


}

body.page-formulario-datos .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-datos .trip-overview__title{

    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T1-50 */
    font-family: Kufam;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-datos .trip-overview__title span{

    display: block;
}

body.page-formulario-datos .trip-overview__top{
    width: 70%;

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}



body.page-formulario-datos .formulario-img img{
    display: block;

    width: 100%;

    height: 315px;

    object-fit: cover;

    border-radius: 10px;
}

/*=========================================
FORMULARIO
=========================================*/
body.page-formulario-datos .upload-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 40px;
    margin-top: 20px;
    background-color: #003854;
    color: #FFF;
    gap: 20px;
    height: 60px;
    border-radius: 10px;
}

body.page-formulario-datos .img-up-doc{
    width: 30px;
}

body.page-formulario-datos .upload-btn:hover{
    background-color: #0078AE;
}


body.page-formulario-datos .trip-form{

    max-width: none;

    height: 100%;
    justify-content: flex-start;

    background: #F2F2F2;

    border-radius: 10px;

    padding: 34px 34px 40px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

/*----------------------------------*/

body.page-formulario-datos .trip-form__title{

    color: #00C3FF;
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 92% */
    text-transform: uppercase;
}

/*----------------------------------*/

body.page-formulario-datos .trip-form__group{

    margin-bottom: 14px;

}

/*----------------------------------*/

body.page-formulario-datos .trip-form input,
body.page-formulario-datos .trip-form textarea{

    width: 100%;

    border: none;

    outline: none;

    background: #FFFFFF;

    border-radius: 8px;

    padding: 13px 18px;

    font-family: Kufam, sans-serif;

    font-size: 18px;

    color: #003854;

    box-sizing: border-box;

    transition: .25s;

}

/*----------------------------------*/

body.page-formulario-datos .trip-form textarea{

    min-height: 95px;

    resize: none;

}

/*----------------------------------*/

body.page-formulario-datos .trip-form input::placeholder,
body.page-formulario-datos .trip-form textarea::placeholder{

    color: #9E9E9E;

}

/*----------------------------------*/

body.page-formulario-datos .trip-form input:focus,
body.page-formulario-datos .trip-form textarea:focus{

    box-shadow: 0 0 0 3px rgba(34, 184, 234, .25);

}

/*----------------------------------*/

body.page-formulario-datos .trip-form__back{

    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 28px;

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    color: #003854;

    font-family: Kufam, sans-serif;

    transition: .25s;

}

body.page-formulario-datos .trip-form__back:hover{

    color: #22B8EA;

}

/*----------------------------------*/

body.page-formulario-datos .trip-form__button{

    width: 240px;

    height: 64px;

    margin: auto;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #22B8EA;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    transition: .25s;

}

body.page-formulario-datos .trip-form__button:hover{

    background: #15AFE5;

}

body.page-formulario-datos .trip-form__button:active{

    transform: scale(.98);

}


/*=========================================
TABLET
=========================================*/

@media (max-width:1024px) {

    body.page-formulario-datos .accordion-label{
        height: 50px;
    }

    body.page-formulario-datos .trip-form input{
        height: 70px;
        font-size: 25px;
    }

    body.page-formulario-datos .trip-form{
        width: auto;
        color: #062f49;
        padding: 28px;
        gap: 20px;
        font-size: 25px;

    }

    body.page-formulario-datos .trip-form__title{
        line-height: 40px;
        font-size: 46px;

    }

    body.page-formulario-datos .trip-form__button{

        width: 280px;

        font-size: 26px;

    }

}

/*=========================================
MÓVIL
=========================================*/

@media (max-width:768px) {

    body.page-formulario-datos .trip-form{

        padding: 22px;

    }

    body.page-formulario-datos .trip-form__title{

        font-size: 34px;

        margin-bottom: 20px;

    }

    body.page-formulario-datos .trip-form input,
body.page-formulario-datos .trip-form textarea{

        padding: 13px 14px;

        font-size: 18px;

    }

    body.page-formulario-datos .trip-form textarea{

        min-height: 92px;

    }

    body.page-formulario-datos .trip-form__back{

        font-size: 20px;

        margin: 14px 0;

    }

    body.page-formulario-datos .trip-form__button{

        width: 220px;

        height: 52px;

        font-size: 20px;

    }

}

/*=========================================
ACCESIBILIDAD
=========================================*/

body.page-formulario-datos .sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}

body.page-formulario-datos .trip-overview__top h3{
    color: var(--Color, #EEEEF0);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


body.page-formulario-datos .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}



body.page-formulario-datos .payment-fragmented{
    line-height: 1;
    width: 95%;

    background: var(--color-primary-dark);

    border-radius: 8px;

    color: white;

    padding: 10px;
}

body.page-formulario-datos .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-formulario-datos .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-formulario-datos .payment-fragmented li{

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

@media (max-width:768px) {

    body.page-formulario-datos .trip-overview{

        padding: 20px 0 40px;
    }

    body.page-formulario-datos .trip-overview__container{

        width: min(100% - 24px, 100%);
    }

    body.page-formulario-datos .trip-overview__title{

        font-size: 2rem;
    }

    body.page-formulario-datos .trip-overview__top{

        margin-top: 30px;
        gap: 20px;
    }

    body.page-formulario-datos .trip-overview__destination{

        font-size: 1.75rem;
    }



    body.page-formulario-datos .trip-overview__cards{

        grid-template-columns: 1fr;
    }

    body.page-formulario-datos .card{

        min-height: auto;
    }

    body.page-formulario-datos .card__value{

        font-size: 3rem;
    }

}

body.page-formulario-datos .contact-card hr{
    margin-top: 10px;
    padding-top: 10px;
    border: none;
    border-top: 2px solid #B4EAFF;
}


/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-formulario-datos .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-formulario-datos .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-formulario-datos .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-formulario-datos .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-formulario-datos .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-formulario-datos .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
}

body.page-formulario-datos .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-formulario-datos .gallery-tab.active{

    text-decoration: underline;

}


body.page-formulario-datos .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-formulario-datos .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-datos .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-formulario-datos .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-datos .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-formulario-datos .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}

@media (max-width:1024px) {

    body.page-formulario-datos .galeria,
body.page-formulario-datos .itinerario{

        height: auto;
    }

    body.page-formulario-datos .gallery__viewer{

        height: 560px;
        flex: none;
    }

}

@media (max-width:768px) {

    body.page-formulario-datos .gallery__viewer{

        height: 340px;
    }

    body.page-formulario-datos .itinerario{

        height: auto;
    }

    body.page-formulario-datos .itinerario__contenido{

        height: 380px;
        flex: none;
    }

}


/*==================================================
CONTACT CARD - MOBILE
==================================================*/

@media (max-width:768px) {

    body.page-formulario-datos .contact-card{

        display: grid;

        flex-direction: row;
        grid-template-columns: 30px 4fr;
        text-align: left;

        padding: 22px 18px;
    }

    body.page-formulario-datos .contact-card__icon{
        width: 30px;
        margin-bottom: 18px;
    }

    body.page-formulario-datos .contact-card__icon img{
        width: 15%;
        width: 72px;
    }

    body.page-formulario-datos .contact-card h3{
        font-size: 12px;
    }

    body.page-formulario-datos .contact-card p{
        font-size: 15px;
        line-height: 1.5;
    }


    body.page-formulario-datos .contact-card-datos{

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;
    }

    body.page-formulario-datos .contact-card-datos img{

        width: 18px;
    }

    body.page-formulario-datos .contact-card-datos a{

        font-size: 15px;

        word-break: break-word;
    }

}



@media (max-width:768px) {



    body.page-formulario-datos .trip-itinerary__title{

        font-size: 28px;
    }

    body.page-formulario-datos .day-tab{

        min-width: 68px;

        font-size: 14px;

        height: 40px;
    }

    body.page-formulario-datos .trip-itinerary__content{

        height: 380px;
    }

    body.page-formulario-datos .gallery-tab{

        font-size: 14px;

        height: 42px;
    }

}

/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-formulario-datos{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-formulario-datos .trip-info{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    width: 90%;
}


body.page-formulario-datos .trip-info__grid{
    height: fit-content;

    width: 100%;
    max-width: none;
    font-family: kufam;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

}


body.page-formulario-datos .info-card{
    gap: 14px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 18px 20px;

    box-shadow: var(--shadow);
    color: #003854;
}

body.page-formulario-datos .info-com-cond{
    width: 100%;
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-formulario-datos .info-card h2{

    color: var(--blue);

    font-size: 30px;

    margin-bottom: 5px;

    font-weight: 800;
}

body.page-formulario-datos .info-card h3{

    color: #FF6164;

    font-size: 30px;

    margin-top: 10px;
}

body.page-formulario-datos .info-card ul,
body.page-formulario-datos .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}


body.page-formulario-datos .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;

    color: #B4EAFF;

    border-radius: 8px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-formulario-datos .contact-card__icon{
    text-align: center;
    margin-bottom: 25px;
}

body.page-formulario-datos .contact-card__icon img{
    max-width: 170px;
    height: auto;
}

body.page-formulario-datos .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-formulario-datos .contact-card hr{
    margin-top: 10px;
    padding-top: 10px;
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-formulario-datos .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-formulario-datos .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-formulario-datos .contact-card-datos img{
    width: 25px;
}

body.page-formulario-datos .btn-condiciones{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;

    text-transform: lowercase;
    font-family: Kufam;
    width: 100%;
    height: 58px;
    line-height: 20px;
    /* 133.333% */
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

body.page-formulario-datos .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-formulario-datos .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


@media (max-width:1024px) {

    body.page-formulario-datos .trip-info__grid{

        grid-template-columns:
            1fr 1fr;
    }



}

@media (max-width:768px) {

    body.page-formulario-datos .trip-info{

        padding: 20px 0 40px;
    }

    body.page-formulario-datos .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-formulario-datos .info-card h2{

        font-size: 22px;
    }
}

/*==================================================
CONTACT CARD - TABLET
==================================================*/

@media (max-width:1024px) {

    body.page-formulario-datos .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos a {
            font-size: 15px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 1.2;
        }

        h3 {

            margin: 0px;
            font-size: 22px;
            line-height: 30px;
            text-align: center;
        }


        .contact-card-datos {

            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {

            width: 22px;

            margin: 0;
        }
    }
}

/* =========================================
MOBILE
========================================= */


@media (max-width:1024px) {

    body.page-formulario-datos .container{
        font-size: 25px;
        display: flex;
        flex-direction: column-reverse;

        gap: 26px;

        width: min(760px, 94%);

    }

    body.page-formulario-datos .trip-form{

        order: -1;

    }

}

@media (max-width:768px) {
    body.page-formulario-datos .hero-propuesta{

        height: 420px;
    }

    body.page-formulario-datos .navbar__container{

        padding: 18px 20px;
    }

    body.page-formulario-datos .navbar__logo img{

        width: 90px;
    }

    body.page-formulario-datos .hero-propuesta__text span{

        font-size: 34px;
    }

    body.page-formulario-datos .container{
        display: flex;
        flex-direction: column-reverse;
        width: 92%;
        gap: 18px;
    }

    body.page-formulario-datos .trip-form{
        padding: 15px;
    }

    body.page-formulario-datos .trip-overview__title{
        font-size: 18px;
    }

    body.page-formulario-datos .trip-overview__top{
        margin-top: 15px;
    }

    body.page-formulario-datos .trip-form__title{
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 0px;
    }

    body.page-formulario-datos .form-steps{
        font-size: 14px;

    }

    body.page-formulario-datos .trip-overview__top h3{
        font-size: 15px;
    }

    body.page-formulario-datos .trip-overview__top{
        font-size: 15px;
    }

    body.page-formulario-datos .trip-form{
        gap: 0px;
    }

    body.page-formulario-datos .trip-form input{
        height: 50px;
        font-size: 17px;
    }

    body.page-formulario-datos .accordion-title{
        font-size: 18px;
    }

    body.page-formulario-datos .trip-form__title{
        font-size: 20px;
    }

    body.page-formulario-datos .upload-btn{
        font-size: 18px;
    }

    body.page-formulario-datos .info-card ul,
body.page-formulario-datos .info-card ol{
        font-size: 15px;
    }

    body.page-formulario-datos .info-card h3{
        font-size: 20px;
    }

    body.page-formulario-datos .info-card{
        font-size: 15px;
    }

    body.page-formulario-datos .sub-grupo h3,
body.page-formulario-datos p{
        font-size: 15px;
        line-height: 15px;
    }

    body.page-formulario-datos .hr-ct-card{
        font-size: 15px;
    }
}

@media (max-width:450px) {

    body.page-formulario-datos .sub-grupo h3,
body.page-formulario-datos .sub-grupo p{
        font-size: 12px;
        line-height: 12px;
    }

    body.page-formulario-datos .contact-card{
        .contact-card-datos a {
            font-size: 12px;
        }
    }

    body.page-formulario-datos .trip-hero__label{

        font-size: 20px;
    }

    body.page-formulario-datos .trip-hero__title{

        font-size: 20px;
    }
}


/* ===================================================
   PÁGINA: formulario-finalizar.html  (body.page-formulario-finalizar)
=================================================== */
/* ==========================
   VARIABLES
========================== */


body.page-formulario-finalizar{

    --color-white: #FFFFFF;
    --color-primary: #0078AE;
    --navy: #002c42;
    --font-main: 'Kufam', sans-serif;

    --hero-height: 530px;

    --container: 1920px;

    --transition: .3s ease;

}

body.page-formulario-finalizar .container{
    width: min(1400px, 90%);
    margin: 0 auto;

    display: flex;
    flex-direction: row;

    gap: 28px;

    align-items: start;
}








/* CONTENEDOR */

body.page-formulario-finalizar .accordion-checkbox{

    margin: 18px 0;

}

/* Checkbox oculto */

body.page-formulario-finalizar .accordion-toggle{

    display: none;

}

/* Cabecera */

body.page-formulario-finalizar .accordion-label{
    color: #00C3FF;
    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    background: #B4EAFF;

    border-radius: 8px;

    cursor: pointer;

    user-select: none;

}

/* Texto */

body.page-formulario-finalizar .accordion-title{

    display: flex;

    align-items: center;

    gap: 12px;

}

/* Casilla */

body.page-formulario-finalizar .checkbox{

    width: 18px;

    height: 18px;

    border-radius: 4px;

    background: #fff;

    border: 2px solid #fff;

}

/* Flecha */

body.page-formulario-finalizar .accordion-arrow{

    transition: .35s;

    color: var(--color-primary-dark);

}

/* Contenido */

body.page-formulario-finalizar .accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background-color: #B4EAFF;
    color: #003854;
}

/* Cuando está abierto */

body.page-formulario-finalizar .accordion-toggle:checked~.accordion-content{

    max-height: max-content;

    margin-top: 15px;

}

/* Flecha */

body.page-formulario-finalizar .accordion-toggle:checked+.accordion-label .accordion-arrow{

    transform: rotate(180deg);

}

/* Casilla marcada */

body.page-formulario-finalizar .accordion-toggle:checked+.accordion-label .checkbox{

    background: var(--color-primary);

    border-color: var(--color-primary);

    position: relative;

}

body.page-formulario-finalizar .accordion-toggle:checked+.accordion-label .checkbox::after{

    content: "✓";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 12px;

}

/* Campos */

body.page-formulario-finalizar .form-grid{

    display: grid;

    gap: 15px;

    padding: 18px;

}

body.page-formulario-finalizar .form-grid input{

    width: 100%;

}

body.page-formulario-finalizar .accordion-content p{
    margin-left: 15px;
}

body.page-formulario-finalizar .medidas-user{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ==========================
   HERO
========================== */

body.page-formulario-finalizar .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/formulario-datos/fondo-esqui.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-formulario-finalizar .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-formulario-finalizar .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-formulario-finalizar .trip-hero__back{

    position: absolute;

    left: 92px;

    top: 228px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12);

    transition: var(--transition);
}

body.page-formulario-finalizar .trip-hero__back div{
    width: 30px;
    height: 30px;
}

body.page-formulario-finalizar .trip-hero__back:hover{


    background: #B4EAFF;
    color: #003854;
}

body.page-formulario-finalizar .trip-hero__back img{

    width: 32px;
    height: 32px;
}

body.page-formulario-finalizar .form-steps{
    color: #062f49;
    padding: 10px;
    font-size: 14px;

    .active {
        font-weight: 700;
    }
}

/* ==========================
   TEXTO
========================== */

body.page-formulario-finalizar .trip-hero__content{

    position: absolute;

    left: 82px;

    bottom: 28px;

    display: flex;
    flex-direction: column;
}

body.page-formulario-finalizar .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-finalizar .trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

@media (max-width:1024px) {


    body.page-formulario-finalizar .trip-hero{

        height: 420px;
    }

    body.page-formulario-finalizar .trip-hero__back{

        left: 40px;
        top: 180px;
    }

    body.page-formulario-finalizar .trip-hero__content{

        left: 40px;
        bottom: 25px;
    }

    body.page-formulario-finalizar .trip-hero__label{

        font-size: 24px;
    }

    body.page-formulario-finalizar .trip-hero__title{

        font-size: 48px;
    }

}

@media (max-width:768px) {

    body.page-formulario-finalizar .trip-hero{

        height: 260px;

        background-position: center;
    }

    body.page-formulario-finalizar .trip-hero__back{

        width: 46px;
        height: 46px;

        left: 16px;
        top: 110px;
    }

    body.page-formulario-finalizar .trip-hero__back svg{

        width: 22px;
        height: 22px;
    }

    body.page-formulario-finalizar .trip-hero__content{

        left: 16px;
        bottom: 16px;
    }

    body.page-formulario-finalizar .trip-hero__label{

        font-size: 12px;

        margin-bottom: 4px;
    }

    body.page-formulario-finalizar .trip-hero__title{

        font-size: 22px;
    }

}





/*contenido..............................*/


body.page-formulario-finalizar .content-main{
    position: relative;
    padding: 24px 0 0px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}

body.page-formulario-finalizar .trip-overview{

    position: relative;

    padding: 24px 15px;


}

body.page-formulario-finalizar .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-finalizar .trip-overview__title{

    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T1-50 */
    font-family: Kufam;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-finalizar .trip-overview__title span{

    display: block;
}

body.page-formulario-finalizar .trip-overview__top{
    width: 70%;

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}



body.page-formulario-finalizar .formulario-img img{
    display: block;

    width: 100%;

    height: 315px;

    object-fit: cover;

    border-radius: 10px;
}

/*=========================================
FORMULARIO
=========================================*/
body.page-formulario-finalizar .upload-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 40px;
    margin-top: 20px;
    background-color: #003854;
    color: #FFF;
    gap: 20px;
    height: 60px;
    border-radius: 10px;
}

body.page-formulario-finalizar .img-up-doc{
    width: 30px;
}

body.page-formulario-finalizar .upload-btn:hover{
    background-color: #0078AE;
}


body.page-formulario-finalizar .trip-form{

    max-width: none;

    height: 100%;
    justify-content: flex-start;

    background: #F2F2F2;

    border-radius: 10px;

    padding: 34px 34px 40px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form__title{

    color: #00C3FF;
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 92% */
    text-transform: uppercase;
}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form__group{

    margin-bottom: 14px;

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form input,
body.page-formulario-finalizar .trip-form textarea{

    width: 100%;

    border: none;

    outline: none;

    background: #eeeef0;

    border-radius: 8px;

    padding: 13px 18px;

    font-family: Kufam, sans-serif;

    font-size: 18px;

    color: #003854;

    box-sizing: border-box;

    transition: .25s;

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form textarea{

    min-height: 95px;

    resize: none;

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form input::placeholder,
body.page-formulario-finalizar .trip-form textarea::placeholder{

    color: #9E9E9E;

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form input:focus,
body.page-formulario-finalizar .trip-form textarea:focus{

    box-shadow: 0 0 0 3px rgba(34, 184, 234, .25);

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form__back{

    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 28px;

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    color: #003854;

    font-family: Kufam, sans-serif;

    transition: .25s;

}

body.page-formulario-finalizar .trip-form__back:hover{

    color: #22B8EA;

}

/*----------------------------------*/

body.page-formulario-finalizar .trip-form__button{

    width: 240px;

    height: 64px;

    margin: auto;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #22B8EA;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    transition: .25s;

}

body.page-formulario-finalizar .trip-form__button:hover{

    background: #15AFE5;

}

body.page-formulario-finalizar .trip-form__button:active{

    transform: scale(.98);

}


/*=========================================
TABLET
=========================================*/

@media (max-width:1024px) {

    body.page-formulario-finalizar .accordion-label{
        height: 50px;
    }

    body.page-formulario-finalizar .trip-form input{
        height: 70px;
        font-size: 25px;
    }

    body.page-formulario-finalizar .trip-form{
        width: auto;
        color: #062f49;
        padding: 28px;
        gap: 20px;
        font-size: 25px;

    }

    body.page-formulario-finalizar .trip-form__title{
        line-height: 40px;
        font-size: 46px;

    }

    body.page-formulario-finalizar .trip-form__button{

        width: 280px;

        font-size: 26px;

    }

}

/*=========================================
MÓVIL
=========================================*/

@media (max-width:768px) {

    body.page-formulario-finalizar .trip-form{

        padding: 10px;

    }

    body.page-formulario-finalizar .trip-form__title{

        font-size: 34px;

        margin-bottom: 20px;

    }

    body.page-formulario-finalizar .trip-form input,
body.page-formulario-finalizar .trip-form textarea{

        padding: 13px 14px;

        font-size: 18px;

    }

    body.page-formulario-finalizar .trip-form textarea{

        min-height: 92px;

    }

    body.page-formulario-finalizar .trip-form__back{

        font-size: 20px;

        margin: 14px 0;

    }

    body.page-formulario-finalizar .trip-form__button{

        width: 220px;

        height: 52px;

        font-size: 20px;

    }


}

/*=========================================
ACCESIBILIDAD
=========================================*/

body.page-formulario-finalizar .sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}

body.page-formulario-finalizar .trip-overview__top h3{
    color: var(--Color, #EEEEF0);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


body.page-formulario-finalizar .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}



body.page-formulario-finalizar .payment-fragmented{
    line-height: 1;
    width: 95%;
    background: var(--color-primary-dark);
    border-radius: 10px;
    color: white;

    padding: 10px;
}

body.page-formulario-finalizar .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-formulario-finalizar .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-formulario-finalizar .payment-fragmented li{

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

@media (max-width:768px) {

    body.page-formulario-finalizar .trip-overview{

        padding: 20px 0 40px;
    }

    body.page-formulario-finalizar .trip-overview__container{

        width: min(100% - 24px, 100%);
    }

    body.page-formulario-finalizar .trip-overview__title{

        font-size: 2rem;
    }

    body.page-formulario-finalizar .trip-overview__top{

        margin-top: 30px;
        gap: 20px;
    }

    body.page-formulario-finalizar .trip-overview__destination{

        font-size: 1.75rem;
    }



    body.page-formulario-finalizar .trip-overview__cards{

        grid-template-columns: 1fr;
    }

    body.page-formulario-finalizar .card{

        min-height: auto;
    }

    body.page-formulario-finalizar .card__value{

        font-size: 3rem;
    }

}

/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-formulario-finalizar .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-formulario-finalizar .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-formulario-finalizar .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-formulario-finalizar .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-formulario-finalizar .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-formulario-finalizar .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
}

body.page-formulario-finalizar .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-formulario-finalizar .gallery-tab.active{

    text-decoration: underline;

}


body.page-formulario-finalizar .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-formulario-finalizar .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-finalizar .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-formulario-finalizar .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-finalizar .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-formulario-finalizar .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}

@media (max-width:1024px) {

    body.page-formulario-finalizar .galeria,
body.page-formulario-finalizar .itinerario{

        height: auto;
    }

    body.page-formulario-finalizar .gallery__viewer{

        height: 560px;
        flex: none;
    }

}

@media (max-width:768px) {

    body.page-formulario-finalizar .gallery__viewer{

        height: 340px;
    }

    body.page-formulario-finalizar .itinerario{

        height: auto;
    }

    body.page-formulario-finalizar .itinerario__contenido{

        height: 380px;
        flex: none;
    }

}


/*==================================================
CONTACT CARD - MOBILE
==================================================*/

@media (max-width:768px) {

    body.page-formulario-finalizar .contact-card{

        display: grid;

        flex-direction: row;
        grid-template-columns: 30px 4fr;
        text-align: left;

        padding: 22px 18px;
    }

    body.page-formulario-finalizar .contact-card__icon{
        width: 30px;
        margin-bottom: 18px;
    }

    body.page-formulario-finalizar .contact-card__icon img{
        width: 15%;
        width: 72px;
    }

    body.page-formulario-finalizar .contact-card h3{
        font-size: 12px;
    }

    body.page-formulario-finalizar .contact-card p{
        font-size: 15px;
        line-height: 1.5;
    }


    body.page-formulario-finalizar .contact-card-datos{

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;
    }

    body.page-formulario-finalizar .contact-card-datos img{

        width: 18px;
    }

    body.page-formulario-finalizar .contact-card-datos a{

        font-size: 15px;

        word-break: break-word;
    }

}



@media (max-width:768px) {



    body.page-formulario-finalizar .trip-itinerary__title{

        font-size: 28px;
    }

    body.page-formulario-finalizar .day-tab{

        min-width: 68px;

        font-size: 14px;

        height: 40px;
    }

    body.page-formulario-finalizar .trip-itinerary__content{

        height: 380px;
    }

    body.page-formulario-finalizar .gallery-tab{

        font-size: 14px;

        height: 42px;
    }

}

/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-formulario-finalizar{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-formulario-finalizar .trip-info{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    width: 90%;
}


body.page-formulario-finalizar .trip-info__grid{
    height: fit-content;

    width: 100%;
    max-width: none;
    font-family: kufam;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

}


body.page-formulario-finalizar .info-card{
    gap: 14px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 18px 20px;

    box-shadow: var(--shadow);
    color: #003854;
}

body.page-formulario-finalizar .info-com-cond{
    width: 100%;
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-formulario-finalizar .info-card h2{

    color: var(--blue);

    font-size: 30px;

    margin-bottom: 5px;

    font-weight: 800;
}

body.page-formulario-finalizar .info-card h3{

    color: #FF6164;

    font-size: 30px;

    margin-top: 10px;
}

body.page-formulario-finalizar .info-card ul,
body.page-formulario-finalizar .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}


body.page-formulario-finalizar .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;

    color: #B4EAFF;

    border-radius: 8px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-formulario-finalizar .contact-card__icon{

    text-align: center;

    margin-bottom: 25px;
}

body.page-formulario-finalizar .contact-card__icon img{

    max-width: 170px;
    height: auto;
}

body.page-formulario-finalizar .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-formulario-finalizar .contact-card hr{
    margin-top: 10px;
    padding-top: 10px;
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-formulario-finalizar .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-formulario-finalizar .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-formulario-finalizar .contact-card-datos img{
    width: 25px;
}


body.page-formulario-finalizar .btn-condiciones{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;

    text-transform: lowercase;
    font-family: Kufam;
    width: 100%;
    height: 58px;
    line-height: 20px;
    /* 133.333% */
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

body.page-formulario-finalizar .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-formulario-finalizar .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


body.page-formulario-finalizar .payment-selector{
    padding: 5px;
    display: flex;
    flex-direction: column;
    color: #003854;

}

body.page-formulario-finalizar .valorpagar{
    font-size: 25px;
    font-weight: 500;
}

body.page-formulario-finalizar hr{
    border: 1;
    width: 100%;
    background-color: #003854;
}

body.page-formulario-finalizar .payment-radio{
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    align-items: center;
    height: auto;
    gap: 10px;
    border-radius: 10px;
}

body.page-formulario-finalizar .datos-personales{
    color: var(--4, #003854);
    font-family: var(--primaria, Kufam);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;

    h2 {
        line-height: 20px;
        padding: none;
    }
}

body.page-formulario-finalizar .datos-pago{
    align-self: stretch;
    color: var(--4, #003854);
    font-family: var(--primaria, Kufam);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    white-space: pre-line;
    line-height: 17px;
    /* 106.25% */
}

body.page-formulario-finalizar .datos-resumen-viaje{
    color: var(--4, #003854);
    font-family: var(--primaria, Kufam);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    /* 121.429% */
    text-decoration: dashed;
    white-space: pre-line;
    margin-left: 20px;
    list-style-type: disc;
}

body.page-formulario-finalizar .datos-titular{
    align-self: stretch;
    color: var(--4, #003854);
    font-family: var(--primaria, Kufam);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
    /* 175% */
}

body.page-formulario-finalizar .datos-detalles{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

body.page-formulario-finalizar .payment-radio input{

    accent-color: var(--color-primary);

}

body.page-formulario-finalizar .payment-plan{
    width: 100%;
    border-radius: 10px;

    table {
        width: 100%;
    }
}

body.page-formulario-finalizar .payment-method{
    width: 100%;

}

body.page-formulario-finalizar .tipo-de-pago{
    color: #003854;

    border-radius: 10px;
}

body.page-formulario-finalizar .pago-radio{
    align-self: flex-start;
    gap: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    white-space: nowrap;

}

body.page-formulario-finalizar .check-m-pago{
    display: flex;
    width: 100px;

    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

body.page-formulario-finalizar .cards{

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    img {
        width: 58px;
        height: 40px;
    }
}

body.page-formulario-finalizar .card-form{
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

body.page-formulario-finalizar .row{

    display: grid;

    grid-template-columns: 1fr 150px;

    gap: 18px;

}

body.page-formulario-finalizar .card-security{
    display: flex;
    flex-direction: row;
    gap: 20px;
}





@media (max-width:1024px) {

    body.page-formulario-finalizar .trip-info__grid{

        grid-template-columns:
            1fr 1fr;
    }



}

@media (max-width:768px) {

    body.page-formulario-finalizar .trip-info{

        padding: 20px 0 40px;
    }

    body.page-formulario-finalizar .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-formulario-finalizar .info-card h2{

        font-size: 22px;
    }

    body.page-formulario-finalizar .info-card{
        font-size: 18px;
    }

    body.page-formulario-finalizar .info-card ul{
        font-size: 15px;
    }

    body.page-formulario-finalizar .info-card p{
        font-size: 15px;
    }
}

/*==================================================
CONTACT CARD - TABLET
==================================================*/

@media (max-width:1024px) {

    body.page-formulario-finalizar .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos a {
            font-size: 12px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 1.2;
        }

        h3 {

            margin: 0px;
            font-size: 22px;
            line-height: 30px;
            text-align: center;
        }


        .contact-card-datos {

            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {

            width: 22px;

            margin: 0;
        }
    }
}


/* =========================================
TABLET
========================================= */


/* =========================================
MOBILE
========================================= */

@media (max-width:768px) {

    body.page-formulario-finalizar .hero-propuesta{

        height: 420px;
    }

    body.page-formulario-finalizar .navbar__container{

        padding: 18px 20px;
    }

    body.page-formulario-finalizar .navbar__logo img{

        width: 90px;
    }



    body.page-formulario-finalizar .hero-propuesta__text span{

        font-size: 34px;
    }
}

@media (max-width:1024px) {

    body.page-formulario-finalizar .container{
        font-size: 25px;
        display: flex;
        flex-direction: column-reverse;

        gap: 26px;

        width: min(760px, 94%);

    }

    body.page-formulario-finalizar .trip-form{

        order: -1;

    }

}

/* ======================
   MODAL CONFIRMACIÓN
====================== */
body.page-formulario-finalizar .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
    box-sizing: border-box;
}

body.page-formulario-finalizar .modal-backdrop.active{
    display: flex;
    opacity: 1;
    visibility: visible;
}

body.page-formulario-finalizar .modal-dialog{
    position: relative;
    max-width: 540px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}

body.page-formulario-finalizar .modal-close{
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 44, 66, 0.08);
    color: #002c42;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

body.page-formulario-finalizar .modal-close:hover{
    background: rgba(0, 44, 66, 0.18);
    transform: scale(1.08);
}

body.page-formulario-finalizar .modal-header{
    background: #ffffff;
    padding: 28px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-finalizar .modal-header__logo{
    width: 165px;
    max-width: 100%;
    height: auto;
    display: block;
}

body.page-formulario-finalizar .modal-header__tagline{
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy, #002c42);
    margin: 10px 0 0;
    letter-spacing: 0.2px;
}

body.page-formulario-finalizar .modal-banner{
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 297;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0081a7;
}

body.page-formulario-finalizar .modal-banner__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-formulario-finalizar .modal-banner__title{
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.2px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

body.page-formulario-finalizar .modal-footer{
    background: #006791;
    padding: 24px 24px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-sizing: border-box;
}

body.page-formulario-finalizar .modal-footer__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-formulario-finalizar .modal-footer__icon svg{
    display: block;
    width: 44px;
    height: 38px;
}

body.page-formulario-finalizar .modal-footer__text{
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 17px;
    font-weight: 400;
    color: #00b8f3;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    text-align: left;
}

@media (max-width:768px) {

    body.page-formulario-finalizar .container{
        display: flex;
        flex-direction: column-reverse;
        width: 92%;
        gap: 18px;
    }

    /* MODAL MOBILE */
    body.page-formulario-finalizar .modal-dialog{
        max-width: 92%;
        border-radius: 14px;
    }

    body.page-formulario-finalizar .modal-close{
        width: 28px;
        height: 28px;
        font-size: 18px;
        top: 8px;
        right: 10px;
    }

    body.page-formulario-finalizar .modal-header{
        padding: 18px 14px 14px;
    }

    body.page-formulario-finalizar .modal-header__logo{
        width: 125px;
    }

    body.page-formulario-finalizar .modal-header__tagline{
        font-size: 19px;
        margin-top: 6px;
    }

    body.page-formulario-finalizar .modal-banner__title{
        font-size: 20px;
        line-height: 1.18;
        padding: 0 10px;
    }

    body.page-formulario-finalizar .modal-footer{
        padding: 16px 14px 18px;
        gap: 12px;
    }

    body.page-formulario-finalizar .modal-footer__icon svg{
        width: 32px;
        height: 28px;
    }

    body.page-formulario-finalizar .modal-footer__text{
        font-size: 15px;
        line-height: 1.3;
    }

    body.page-formulario-finalizar .datos-detalles{
        font-size: 18px;
        font-weight: 500;
    }

    body.page-formulario-finalizar .sub-grupo h3,
body.page-formulario-finalizar .sub-grupo p{
        font-size: 12px;
        line-height: 12px;
    }


}


/* ===================================================
   PÁGINA: formulario-pagos.html  (body.page-formulario-pagos)
=================================================== */
body.page-formulario-pagos *,
body.page-formulario-pagos *::before,
body.page-formulario-pagos *::after{
    box-sizing: border-box;
}

body.page-formulario-pagos,
body.page-formulario-pagos{
    overflow-x: hidden;
    max-width: 100%;
}

/* ==========================
   VARIABLES
========================== */

body.page-formulario-pagos{
    --color-white: #FFFFFF;
    --color-primary: #0078AE;
    --hero-height: 530px;
    --container: 1920px;
    --transition: .3s ease;

}

body.page-formulario-pagos .container{
    width: min(1400px, 90%);
    margin: 0 auto;

    display: flex;
    flex-direction: row;

    gap: 28px;

    align-items: start;
}


/* CONTENEDOR */

body.page-formulario-pagos .accordion-checkbox{
    margin: 18px 0;

}

/* Checkbox oculto */

body.page-formulario-pagos .accordion-toggle{
    display: none;

}

/* Cabecera */

body.page-formulario-pagos .accordion-label{
    color: #00C3FF;
    font-weight: 600;
    display: flex;
    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    background: #B4EAFF;

    border-radius: 8px;

    cursor: pointer;

    user-select: none;

}

/* Texto */

body.page-formulario-pagos .accordion-title{

    display: flex;

    align-items: center;

    gap: 12px;

}

/* Casilla */

body.page-formulario-pagos .checkbox{

    width: 18px;

    height: 18px;

    border-radius: 4px;

    background: #fff;

    border: 2px solid #fff;

}

/* Flecha */

body.page-formulario-pagos .accordion-arrow{

    transition: .35s;

    color: var(--color-primary-dark);

}

/* Contenido */

body.page-formulario-pagos .accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background-color: #B4EAFF;
    color: #003854;
}

/* Cuando está abierto */

body.page-formulario-pagos .accordion-toggle:checked~.accordion-content{

    max-height: max-content;

    margin-top: 15px;

}

/* Flecha */

body.page-formulario-pagos .accordion-toggle:checked+.accordion-label .accordion-arrow{

    transform: rotate(180deg);

}

/* Casilla marcada */

body.page-formulario-pagos .accordion-toggle:checked+.accordion-label .checkbox{

    background: var(--color-primary);

    border-color: var(--color-primary);

    position: relative;

}

body.page-formulario-pagos .accordion-toggle:checked+.accordion-label .checkbox::after{

    content: "✓";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 12px;

}

/* Campos */

body.page-formulario-pagos .form-grid{

    display: grid;

    gap: 15px;

    padding: 18px;

}

body.page-formulario-pagos .form-grid input{

    width: 100%;

}

body.page-formulario-pagos .accordion-content p{
    margin-left: 15px;
}

body.page-formulario-pagos .medidas-user{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ==========================
   HERO
========================== */

body.page-formulario-pagos .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/formulario-datos/fondo-esqui.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-formulario-pagos .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-formulario-pagos .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-formulario-pagos .trip-hero__back{

    position: absolute;

    left: 92px;

    top: 228px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12);

    transition: var(--transition);
}

body.page-formulario-pagos .trip-hero__back div{
    width: 30px;
    height: 30px;
}

body.page-formulario-pagos .trip-hero__back:hover{


    background: #B4EAFF;
    color: #003854;
}

body.page-formulario-pagos .trip-hero__back img{

    width: 32px;
    height: 32px;
}

body.page-formulario-pagos .form-steps{
    color: #062f49;
    padding: 10px;

    .active {
        font-weight: 700;
    }
}

/* ==========================
   TEXTO
========================== */

body.page-formulario-pagos .trip-hero__content{

    position: absolute;

    left: 82px;

    bottom: 28px;

    display: flex;
    flex-direction: column;
}

body.page-formulario-pagos .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-pagos .trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

@media (max-width:1024px) {


    body.page-formulario-pagos .trip-hero{

        height: 420px;
    }

    body.page-formulario-pagos .trip-hero__back{

        left: 40px;
        top: 180px;
    }

    body.page-formulario-pagos .trip-hero__content{

        left: 40px;
        bottom: 25px;
    }

    body.page-formulario-pagos .trip-hero__label{

        font-size: 24px;
    }

    body.page-formulario-pagos .trip-hero__title{

        font-size: 48px;
    }

}







/*contenido..............................*/


body.page-formulario-pagos .content-main{
    position: relative;
    padding: 24px 0 0px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}

body.page-formulario-pagos .trip-overview{

    position: relative;

    padding: 24px 15px;


}

body.page-formulario-pagos .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-pagos .trip-overview__title{

    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T1-50 */
    font-family: Kufam;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-pagos .trip-overview__title span{

    display: block;
}

body.page-formulario-pagos .trip-overview__top{
    width: 70%;

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}



body.page-formulario-pagos .formulario-img img{
    display: block;

    width: 100%;

    height: 315px;

    object-fit: cover;

    border-radius: 10px;
}

/*=========================================
FORMULARIO
=========================================*/
body.page-formulario-pagos .upload-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 40px;
    margin-top: 20px;
    background-color: #003854;
    color: #FFF;
    gap: 20px;
    height: 60px;
    border-radius: 10px;
}

body.page-formulario-pagos .img-up-doc{
    width: 30px;
}

body.page-formulario-pagos .upload-btn:hover{
    background-color: #0078AE;
}


body.page-formulario-pagos .trip-form{

    max-width: none;

    height: 100%;
    justify-content: flex-start;

    background: #F2F2F2;

    border-radius: 10px;

    padding: 34px 34px 40px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

/*----------------------------------*/

body.page-formulario-pagos .trip-form__title{

    color: #00C3FF;
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 92% */
    text-transform: uppercase;
}

/*----------------------------------*/

body.page-formulario-pagos .trip-form__group{

    margin-bottom: 14px;

}

/*----------------------------------*/

body.page-formulario-pagos .check-m-pago{
    height: 50px;
    font-size: 25px
}

body.page-formulario-pagos .trip-form input,
body.page-formulario-pagos .trip-form textarea{

    width: 100%;

    border: none;

    outline: none;

    background: #eeeef0;

    border-radius: 8px;

    padding: 13px 18px;

    font-family: Kufam, sans-serif;

    font-size: 18px;

    color: #003854;

    box-sizing: border-box;

    transition: .25s;
    height: 20px;


}

/*----------------------------------*/

body.page-formulario-pagos .trip-form textarea{

    min-height: 95px;

    resize: none;

}

/*----------------------------------*/

body.page-formulario-pagos .trip-form input::placeholder,
body.page-formulario-pagos .trip-form textarea::placeholder{

    color: #9E9E9E;

}

/*----------------------------------*/

body.page-formulario-pagos .trip-form input:focus,
body.page-formulario-pagos .trip-form textarea:focus{

    box-shadow: 0 0 0 3px rgba(34, 184, 234, .25);

}

/*----------------------------------*/

body.page-formulario-pagos .trip-form__back{

    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 28px;

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    color: #003854;

    font-family: Kufam, sans-serif;

    transition: .25s;

}

body.page-formulario-pagos .trip-form__back:hover{

    color: #22B8EA;

}

/*----------------------------------*/

body.page-formulario-pagos .trip-form__button{

    width: 240px;

    height: 64px;

    margin: auto;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #22B8EA;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    transition: .25s;

}

body.page-formulario-pagos .trip-form__button:hover{

    background: #15AFE5;

}

body.page-formulario-pagos .trip-form__button:active{

    transform: scale(.98);

}



/*=========================================
ACCESIBILIDAD
=========================================*/

body.page-formulario-pagos .sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}

body.page-formulario-pagos .trip-overview__top h3{
    color: var(--Color, #EEEEF0);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


body.page-formulario-pagos .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}



body.page-formulario-pagos .payment-fragmented{
    line-height: 1;
    width: 95%;
    background: var(--color-primary-dark);
    border-radius: 10px;
    color: white;

    padding: 10px;
}

body.page-formulario-pagos .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-formulario-pagos .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-formulario-pagos .payment-fragmented li{

    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;

}


/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-formulario-pagos .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-formulario-pagos .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-formulario-pagos .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-formulario-pagos .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-formulario-pagos .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-formulario-pagos .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
}

body.page-formulario-pagos .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-formulario-pagos .gallery-tab.active{

    text-decoration: underline;

}


body.page-formulario-pagos .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-formulario-pagos .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-pagos .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-formulario-pagos .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-pagos .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-formulario-pagos .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}





/*==================================================
CONTACT CARD - MOBILE
==================================================*/




/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-formulario-pagos{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-formulario-pagos .trip-info{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    width: 90%;
}


body.page-formulario-pagos .trip-info__grid{
    height: fit-content;

    width: 100%;
    max-width: none;
    font-family: kufam;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

}


body.page-formulario-pagos .info-card{
    gap: 14px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 18px 20px;

    box-shadow: var(--shadow);
    color: #003854;
}

body.page-formulario-pagos .info-com-cond{
    width: 100%;
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-formulario-pagos .info-card h2{

    color: var(--blue);

    font-size: 30px;

    margin-bottom: 5px;

    font-weight: 800;
}

body.page-formulario-pagos .info-card h3{

    color: #FF6164;

    font-size: 30px;

    margin-top: 10px;
}

body.page-formulario-pagos .info-card ul,
body.page-formulario-pagos .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}


body.page-formulario-pagos .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;

    color: #B4EAFF;

    border-radius: 8px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-formulario-pagos .contact-card__icon{

    text-align: center;

    margin-bottom: 25px;
}

body.page-formulario-pagos .contact-card__icon img{

    max-width: 170px;
    height: auto;
}

body.page-formulario-pagos .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-formulario-pagos .contact-card hr{
    margin-top: 10px;
    padding-top: 10px;
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-formulario-pagos .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-formulario-pagos .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-formulario-pagos .contact-card-datos img{
    width: 25px;
}


body.page-formulario-pagos .btn-condiciones{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;

    text-transform: lowercase;
    font-family: Kufam;
    width: 100%;
    height: 58px;
    line-height: 20px;
    /* 133.333% */
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

body.page-formulario-pagos .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-formulario-pagos .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


body.page-formulario-pagos .payment-selector{

    display: flex;
    flex-direction: column;
    gap: 30px;


}

body.page-formulario-pagos .payment-radio{
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    align-items: center;
    height: auto;
    gap: 10px;
    border-radius: 10px;


}

body.page-formulario-pagos .payment-radio input{
    height: 50px;
    accent-color: var(--color-primary);

}

body.page-formulario-pagos .payment-plan{
    width: 100%;
    border-radius: 10px;

    table {
        width: 100%;
    }
}

body.page-formulario-pagos .payment-method{
    width: 100%;

}

body.page-formulario-pagos .tipo-de-pago{
    color: #003854;

    border-radius: 10px;
}

body.page-formulario-pagos .pago-radio{
    align-self: flex-start;
    gap: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    white-space: nowrap;
    align-items: center;

}

body.page-formulario-pagos .check-m-pago{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    white-space: normal;
}

body.page-formulario-pagos .check-m-pago span{
    font-size: 14px;
    line-height: 1.3;
}

body.page-formulario-pagos .cards{

    display: flex;
    justify-content: space-between;
    gap: 12px;

    flex-wrap: wrap;

    img {
        width: 58px;
        height: 40px;
    }
}

body.page-formulario-pagos .card-form{
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

body.page-formulario-pagos .row{

    display: grid;

    grid-template-columns: 1fr 150px;

    gap: 18px;

}

body.page-formulario-pagos .card-security{
    display: flex;
    flex-direction: row;
    gap: 20px;
}






/* =========================================
MOBILE
========================================= */


@media (max-width:1024px) {
    body.page-formulario-pagos .accordion-label{
        height: 50px;
    }

    body.page-formulario-pagos .trip-form input{
        height: 70px;
        font-size: 25px;
    }

    body.page-formulario-pagos .trip-form{
        width: auto;
        color: #062f49;
        padding: 28px;
        gap: 20px;
        font-size: 25px;

    }

    body.page-formulario-pagos .trip-form__title{
        line-height: 40px;
        font-size: 46px;

    }

    body.page-formulario-pagos .trip-form__button{

        width: 280px;

        font-size: 26px;

    }

    body.page-formulario-pagos .galeria,
body.page-formulario-pagos .itinerario{

        height: auto;
    }

    body.page-formulario-pagos .gallery__viewer{

        height: 560px;
        flex: none;
    }

    body.page-formulario-pagos .trip-info__grid{

        grid-template-columns:
            1fr 1fr;
    }

    body.page-formulario-pagos .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos a {
            font-size: 15px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 1.2;
        }

        h3 {

            margin: 0px;
            font-size: 22px;
            line-height: 30px;
            text-align: center;
        }


        .contact-card-datos {
            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {
            width: 22px;
            margin: 0;
        }
    }

    body.page-formulario-pagos .container{
        font-size: 25px;
        display: flex;
        flex-direction: column-reverse;
        gap: 26px;
        width: min(760px, 94%);

    }

    body.page-formulario-pagos .trip-form{

        order: -1;

    }

}

@media (max-width:768px) {
    body.page-formulario-pagos .trip-form{
        padding: 16px;
        font-size: 16px;
        gap: 0px;
    }

    body.page-formulario-pagos .trip-form__title{
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    body.page-formulario-pagos .trip-form input,
body.page-formulario-pagos .trip-form textarea{
        padding: 13px 14px;
        font-size: 17px;
    }

    body.page-formulario-pagos .trip-form input{
        height: 50px;
    }

    body.page-formulario-pagos .trip-form textarea{
        min-height: 92px;

    }

    body.page-formulario-pagos .trip-form__back{
        font-size: 20px;
        margin: 14px 0;

    }

    body.page-formulario-pagos .trip-form__button{
        width: 220px;
        height: 52px;
        font-size: 20px;
    }

    body.page-formulario-pagos .trip-hero{
        height: 260px;
        background-position: center;
    }

    body.page-formulario-pagos .trip-hero__back{
        width: 46px;
        height: 46px;
        left: 16px;
        top: 110px;
    }

    body.page-formulario-pagos .trip-hero__back svg{
        width: 22px;
        height: 22px;
    }

    body.page-formulario-pagos .trip-hero__content{
        left: 16px;
        bottom: 16px;
    }

    body.page-formulario-pagos .trip-hero__label{
        font-size: 12px;
        margin-bottom: 4px;
    }

    body.page-formulario-pagos .trip-hero__title{
        font-size: 22px;
    }

    body.page-formulario-pagos .trip-overview{
        padding: 20px 0 40px;
    }

    body.page-formulario-pagos .trip-overview__container{
        width: min(100% - 24px, 100%);
    }

    body.page-formulario-pagos .trip-overview__title{
        font-size: 22px;
    }

    body.page-formulario-pagos .trip-overview__top{
        width: 100%;
        margin-top: 15px;
        gap: 15px;
    }

    body.page-formulario-pagos .trip-overview__top h3{
        font-size: 15px;
        line-height: 1.4;
    }

    body.page-formulario-pagos .trip-overview__destination{
        font-size: 1.75rem;
    }



    body.page-formulario-pagos .trip-overview__cards{
        grid-template-columns: 1fr;
    }

    body.page-formulario-pagos .card{
        min-height: auto;
    }

    body.page-formulario-pagos .card__value{
        font-size: 3rem;
    }

    body.page-formulario-pagos .gallery__viewer{
        height: 340px;
    }

    body.page-formulario-pagos .itinerario{
        height: auto;
    }

    body.page-formulario-pagos .itinerario__contenido{
        height: 380px;
        flex: none;
    }

    body.page-formulario-pagos .contact-card{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        background: #062f49;
        border-radius: 12px;
        gap: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    body.page-formulario-pagos .contact-card hr,
body.page-formulario-pagos .contact-card .hr-ct-card{
        display: none;
    }

    body.page-formulario-pagos .contact-card .grupo-superior{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding-right: 16px;
        border-right: 1.5px solid #00C3FF;
        max-width: none;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card__icon img{
        width: 42px;
        height: auto;
        display: block;
    }

    body.page-formulario-pagos .contact-card .sub-grupo{
        display: flex;
        flex-direction: column;
        gap: 3px;
        text-align: left;
    }

    body.page-formulario-pagos .contact-card .sub-grupo h3,
body.page-formulario-pagos .contact-card h3{
        color: #FFFFFF;
        font-family: 'Kufam', sans-serif;
        font-size: 16px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
        text-align: left;
    }

    body.page-formulario-pagos .contact-card .sub-grupo p,
body.page-formulario-pagos .contact-card p{
        color: #B4EAFF;
        font-family: 'Kufam', sans-serif;
        font-size: 13px;
        font-weight: 400;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
        text-align: left;
    }

    body.page-formulario-pagos .contact-card .grupo-inferior{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos img{
        width: 20px;
        height: auto;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos a,
body.page-formulario-pagos .contact-card a{
        color: #FFFFFF;
        font-family: 'Kufam', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.page-formulario-pagos .trip-info{

        padding: 20px 0 40px;
    }

    body.page-formulario-pagos .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-formulario-pagos .info-card h2{

        font-size: 22px;
    }

    body.page-formulario-pagos .hero-propuesta{
        height: 420px;
    }

    body.page-formulario-pagos .navbar__container{
        padding: 18px 20px;
    }

    body.page-formulario-pagos .navbar__logo img{
        width: 90px;
    }



    body.page-formulario-pagos .hero-propuesta__text span{
        font-size: 34px;
    }

    body.page-formulario-pagos .container{
        display: flex;
        flex-direction: column-reverse;
        width: 92%;
        margin: 0 auto;
        gap: 18px;
        font-size: 16px;
    }

    body.page-formulario-pagos .payment-radio{
        padding: 16px 14px;
        width: 100%;
    }

    body.page-formulario-pagos .payment-plan{
        width: 100%;
    }

    body.page-formulario-pagos .payment-plan h3{
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    body.page-formulario-pagos .payment-plan table{
        width: 100%;
        font-size: 14px;
    }

    body.page-formulario-pagos .payment-plan td{
        font-size: 14px;
        padding: 6px 0;
    }

    body.page-formulario-pagos .payment-full h3{
        font-size: 16px;
        line-height: 1.3;
    }

    body.page-formulario-pagos .payment-full .price{
        font-size: 15px;
    }

    body.page-formulario-pagos .cards{
        gap: 8px;
    }

    body.page-formulario-pagos .cards img{
        width: 44px;
        height: auto;
    }

    body.page-formulario-pagos .card-security{
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }

    body.page-formulario-pagos .card-security .trip-form__group{
        flex: 1;
        min-width: 0;
    }

    body.page-formulario-pagos .card-security input{
        min-width: 0;
        width: 100%;
    }

    body.page-formulario-pagos .check-m-pago{
        width: 100%;
        white-space: normal;
        font-size: 14px;

    }

    body.page-formulario-pagos .check-m-pago span{
        font-size: 14px;
    }

}

@media (max-width:450px) {

    body.page-formulario-pagos .trip-overview__title{
        font-size: 18px;
    }

    body.page-formulario-pagos .trip-overview__top h3{
        font-size: 15px;
    }

    body.page-formulario-pagos .form-steps{
        font-size: 14px;
    }

    body.page-formulario-pagos .pago-radio p{
        font-size: 15px;
    }

    body.page-formulario-pagos .trip-form{
        padding: 12px;
    }

    body.page-formulario-pagos .payment-radio{
        padding: 14px 10px;
    }

    body.page-formulario-pagos .payment-plan table{
        font-size: 12px;
    }

    body.page-formulario-pagos .payment-plan td{
        font-size: 12px;
    }

    body.page-formulario-pagos .cards img{
        width: 38px;
    }

    body.page-formulario-pagos .contact-card{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 12px;
        background: #062f49;
        border-radius: 8px;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    body.page-formulario-pagos .contact-card hr,
body.page-formulario-pagos .contact-card .hr-ct-card{
        display: none;
    }

    body.page-formulario-pagos .contact-card .grupo-superior{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-right: 10px;
        border-right: 1.5px solid #00C3FF;
        max-width: none;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card__icon img{
        width: 32px;
        min-width: 26px;
        max-width: 36px;
        height: auto;
        display: block;
    }

    body.page-formulario-pagos .contact-card .sub-grupo{
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
        width: 82px;
        max-width: 82px;
    }

    body.page-formulario-pagos .contact-card .sub-grupo h3,
body.page-formulario-pagos .contact-card h3{
        color: #B4EAFF;
        font-size: 12px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    body.page-formulario-pagos .contact-card .sub-grupo p,
body.page-formulario-pagos .contact-card p{
        color: #B4EAFF;
        font-family: 'Kufam', sans-serif;
        font-size: 11px;
        font-weight: 400;
        margin: 0;
        line-height: 1.2;
        white-space: normal;
        text-align: left;
    }

    body.page-formulario-pagos .contact-card .grupo-inferior{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos img{
        width: 16px;
        height: auto;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos a,
body.page-formulario-pagos .contact-card a{
        color: #FFFFFF;
        font-family: 'Kufam', sans-serif;
        font-size: 11.5px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.page-formulario-pagos .trip-hero__label{
        font-size: 20px;
    }

    body.page-formulario-pagos .trip-hero__title{
        font-size: 20px;
    }

}

@media (max-width:360px) {
    body.page-formulario-pagos .contact-card{
        padding: 12px 8px;
        gap: 6px;
    }

    body.page-formulario-pagos .contact-card .grupo-superior{
        gap: 6px;
        padding-right: 8px;
    }

    body.page-formulario-pagos .contact-card .sub-grupo{
        width: 78px;
        max-width: 78px;
    }

    body.page-formulario-pagos .contact-card .contact-card__icon img{
        width: 28px;
    }

    body.page-formulario-pagos .contact-card .sub-grupo h3,
body.page-formulario-pagos .contact-card h3{
        font-size: 11.5px;
        white-space: normal;
    }

    body.page-formulario-pagos .contact-card .sub-grupo p,
body.page-formulario-pagos .contact-card p{
        font-size: 10px;
        white-space: normal;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos img{
        width: 15px;
    }

    body.page-formulario-pagos .contact-card .contact-card-datos a,
body.page-formulario-pagos .contact-card a{
        font-size: 11px;
    }
}


/* ===================================================
   PÁGINA: formulario-solicita-tu-viaje.html  (body.page-formulario-solicita)
=================================================== */
body.page-formulario-solicita{
    margin: 0px;
}

body.page-formulario-solicita{

    --color-white: #FFFFFF;
    --color-primary: #0078AE;
    --navy: #002c42;
    --font-main: 'Kufam', sans-serif;

    --hero-height: 530px;

    --container: 1920px;

    --transition: .3s ease;

}

body.page-formulario-solicita,
body.page-formulario-solicita{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.page-formulario-solicita .container{
    width: min(1400px, 90%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    box-sizing: border-box;
}

body.page-formulario-solicita .container>.trip-info__grid{
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
}


/* ==========================
   HERO
========================== */

body.page-formulario-solicita .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/formulario-solicita-tu-viaje/fondo-esqui.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-formulario-solicita .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-formulario-solicita .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-formulario-solicita .trip-hero__back{

    position: absolute;

    left: 92px;

    top: 228px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12);

    transition: var(--transition);
}

body.page-formulario-solicita .trip-hero__back div{
    width: 30px;
    height: 30px;
}

body.page-formulario-solicita .trip-hero__back:hover{


    background: #B4EAFF;
    color: #003854;
}

body.page-formulario-solicita .trip-hero__back img{

    width: 32px;
    height: 32px;
}

/* ==========================
   TEXTO
========================== */

body.page-formulario-solicita .trip-hero__content{

    position: absolute;

    left: 82px;

    bottom: 28px;

    display: flex;
    flex-direction: column;
}

body.page-formulario-solicita .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-solicita .trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

@media (max-width:1024px) {

    body.page-formulario-solicita .trip-hero{

        height: 420px;
    }

    body.page-formulario-solicita .trip-hero__back{

        left: 40px;
        top: 180px;
    }

    body.page-formulario-solicita .trip-hero__content{

        left: 40px;
        bottom: 25px;
    }

    body.page-formulario-solicita .trip-hero__label{

        font-size: 24px;
    }

    body.page-formulario-solicita .trip-hero__title{

        font-size: 48px;
    }

}

@media (max-width:768px) {

    body.page-formulario-solicita .trip-hero{

        height: 260px;

        background-position: center;
    }

    body.page-formulario-solicita .trip-hero__back{

        width: 46px;
        height: 46px;

        left: 16px;
        top: 110px;
    }

    body.page-formulario-solicita .trip-hero__back svg{

        width: 22px;
        height: 22px;
    }

    body.page-formulario-solicita .trip-hero__content{

        left: 16px;
        bottom: 16px;
    }

    body.page-formulario-solicita .trip-hero__label{

        font-size: 12px;

        margin-bottom: 4px;
    }

    body.page-formulario-solicita .trip-hero__title{

        font-size: 22px;
    }

}





/*contenido..............................*/


body.page-formulario-solicita .content-main{
    position: relative;
    padding: 24px 0 0px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-solicita .trip-overview{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 15px;
}

body.page-formulario-solicita .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-solicita .trip-overview__title{

    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T1-50 */
    font-family: Kufam;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

body.page-formulario-solicita .trip-overview__title span{

    display: block;
}

body.page-formulario-solicita .trip-overview__top{
    width: 70%;

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}



body.page-formulario-solicita .formulario-img img{
    display: block;

    width: 100%;

    height: 315px;

    object-fit: cover;

    border-radius: 10px;
}

/*=========================================
FORMULARIO
=========================================*/

body.page-formulario-solicita .trip-form{
    padding: 20px;

    width: 100%;

    max-width: none;

    height: 100%;
    justify-content: flex-start;

    background: #F2F2F2;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form__title{

    margin: 0 0 28px;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 48px;

    font-weight: 900;

    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 28px;
}

/*----------------------------------*/

body.page-formulario-solicita .trip-form__group{

    margin-bottom: 14px;

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form input,
body.page-formulario-solicita .trip-form textarea{

    width: 100%;

    border: none;

    outline: none;

    background: #FFFFFF;

    border-radius: 8px;

    padding: 13px 18px;

    font-family: Kufam, sans-serif;

    font-size: 18px;

    color: #003854;

    box-sizing: border-box;

    transition: .25s;

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form textarea{

    min-height: 95px;
    font-size: 25px;
    resize: none;

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form input::placeholder,
body.page-formulario-solicita .trip-form textarea::placeholder{

    color: #9E9E9E;

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form input:focus,
body.page-formulario-solicita .trip-form textarea:focus{

    box-shadow: 0 0 0 3px rgba(34, 184, 234, .25);

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form__back{

    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 28px;

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    color: #003854;

    font-family: Kufam, sans-serif;

    transition: .25s;

}

body.page-formulario-solicita .trip-form__back:hover{

    color: #22B8EA;

}

/*----------------------------------*/

body.page-formulario-solicita .trip-form__button{

    width: 240px;

    height: 64px;

    margin: auto;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #22B8EA;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    transition: .25s;

}

body.page-formulario-solicita .trip-form__button:hover{

    background: #15AFE5;

}

body.page-formulario-solicita .trip-form__button:active{

    transform: scale(.98);

}


/*=========================================
TABLET
=========================================*/

@media (max-width:1024px) {

    body.page-formulario-solicita .trip-form{

        padding: 28px;
        font-size: 25px;
        order: -1;
    }

    body.page-formulario-solicita .trip-form__title{
        color: #00C3FF;
        font-size: 46px;
    }

    body.page-formulario-solicita .trip-form__button{

        width: 280px;

        font-size: 26px;
    }

    body.page-formulario-solicita .trip-form input{
        height: 70px;
        font-size: 25px;
    }

}

/*=========================================
MÓVIL
=========================================*/

@media (max-width:768px) {

    body.page-formulario-solicita .trip-form{

        padding: 22px;
        font-size: 25px;
    }

    body.page-formulario-solicita .trip-form__title{

        font-size: 25px;

        margin-bottom: 20px;

    }

    body.page-formulario-solicita .trip-form input,
body.page-formulario-solicita .trip-form textarea{

        padding: 13px 14px;
        height: 50px;
        font-size: 18px;

    }

    body.page-formulario-solicita .trip-form textarea{

        min-height: 92px;
        font-size: 18px;

    }

    body.page-formulario-solicita .trip-form__back{

        font-size: 20px;

        margin: 14px 0;

    }

    body.page-formulario-solicita .trip-form__button{

        width: 220px;

        height: 52px;

        font-size: 20px;

    }

}

/*=========================================
ACCESIBILIDAD
=========================================*/

body.page-formulario-solicita .sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}

body.page-formulario-solicita .trip-overview__top h3{
    color: var(--Color, #EEEEF0);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


body.page-formulario-solicita .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}



body.page-formulario-solicita .payment-fragmented{
    line-height: 1;
    width: 95%;

    background: var(--color-primary-dark);

    border-radius: 8px;

    color: white;

    padding: 10px;
}

body.page-formulario-solicita .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-formulario-solicita .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-formulario-solicita .payment-fragmented li{

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

@media (max-width:768px) {

    body.page-formulario-solicita .trip-overview{

        padding: 20px 0 40px;
    }

    body.page-formulario-solicita .trip-overview__container{

        width: min(100% - 24px, 100%);
    }

    body.page-formulario-solicita .trip-overview__title{

        font-size: 2rem;
    }

    body.page-formulario-solicita .trip-overview__top{

        margin-top: 30px;
        gap: 20px;
    }

    body.page-formulario-solicita .trip-overview__destination{

        font-size: 1.75rem;
    }



    body.page-formulario-solicita .trip-overview__cards{

        grid-template-columns: 1fr;
    }

    body.page-formulario-solicita .card{

        min-height: auto;
    }

    body.page-formulario-solicita .card__value{

        font-size: 3rem;
    }

}

/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-formulario-solicita .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-formulario-solicita .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-formulario-solicita .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-formulario-solicita .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-formulario-solicita .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-formulario-solicita .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
}

body.page-formulario-solicita .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-formulario-solicita .gallery-tab.active{

    text-decoration: underline;

}


body.page-formulario-solicita .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-formulario-solicita .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-solicita .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-formulario-solicita .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-formulario-solicita .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-formulario-solicita .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}

@media (max-width:1024px) {

    body.page-formulario-solicita .galeria,
body.page-formulario-solicita .itinerario{

        height: auto;
    }

    body.page-formulario-solicita .gallery__viewer{

        height: 560px;
        flex: none;
    }

}

@media (max-width:768px) {

    body.page-formulario-solicita .gallery__viewer{

        height: 340px;
    }

    body.page-formulario-solicita .itinerario{

        height: auto;
    }

    body.page-formulario-solicita .itinerario__contenido{

        height: 380px;
        flex: none;
    }

}


/*==================================================
CONTACT CARD - MOBILE (Cleanly inherited from max-width:1024px)
==================================================*/




@media (max-width:768px) {



    body.page-formulario-solicita .trip-itinerary__title{

        font-size: 28px;
    }

    body.page-formulario-solicita .day-tab{

        min-width: 68px;

        font-size: 14px;

        height: 40px;
    }

    body.page-formulario-solicita .trip-itinerary__content{

        height: 380px;
    }

    body.page-formulario-solicita .gallery-tab{

        font-size: 14px;

        height: 42px;
    }

}

/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-formulario-solicita{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-formulario-solicita .trip-info{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    width: 90%;
}


body.page-formulario-solicita .trip-info__grid{
    height: fit-content;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: kufam;
    display: flex;
    margin-bottom: 24px;

}


body.page-formulario-solicita .info-card{
    gap: 14px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 18px 20px;

    box-shadow: var(--shadow);
    color: #003854;

}

body.page-formulario-solicita .info-com-cond{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-formulario-solicita .info-card h2{

    color: var(--blue, #003854);

    font-size: 24px;

    margin-bottom: 12px;

    font-weight: 800;
    word-break: break-word;
    overflow-wrap: break-word;
}

body.page-formulario-solicita .info-card h3{

    color: #1ab9ea;

    font-size: 30px;

    margin-top: 10px;
}

body.page-formulario-solicita .info-card ul,
body.page-formulario-solicita .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}


body.page-formulario-solicita .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;

    color: #B4EAFF;

    border-radius: 8px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-formulario-solicita .contact-card__icon{

    text-align: center;

    margin-bottom: 25px;
}

body.page-formulario-solicita .contact-card__icon img{

    max-width: 170px;
    height: auto;
}

body.page-formulario-solicita .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-formulario-solicita .contact-card hr{
    margin-top: 10px;
    padding-bottom: 10px;
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-formulario-solicita .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-formulario-solicita .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-formulario-solicita .contact-card-datos img{
    width: 25px;
}


body.page-formulario-solicita .btn-condiciones{
    display: flex;
    flex-direction: row;
    padding: 12px 14px;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    font-family: var(--font-main, 'Kufam', sans-serif);

    height: auto;
    min-height: 52px;
    line-height: 1.3;
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

body.page-formulario-solicita .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-formulario-solicita .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


@media (max-width:1024px) {

    body.page-formulario-solicita .trip-info__grid{
        font-size: 25px;
        grid-template-columns:
            1fr 1fr;
    }



}

@media (max-width:768px) {

    body.page-formulario-solicita .trip-info{

        padding: 20px 0 40px;
        font-size: 25px;
    }

    body.page-formulario-solicita .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-formulario-solicita .info-card h2{

        font-size: 25px;
    }
}

/*==================================================
CONTACT CARD - TABLET
==================================================*/

@media (max-width:1024px) {

    body.page-formulario-solicita .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos a {
            font-size: 15px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 1.2;
        }

        h3 {

            margin: 0px;
            font-size: 22px;
            line-height: 30px;
            text-align: center;
        }


        .contact-card-datos {

            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {

            width: 22px;

            margin: 0;
        }
    }
}


/* =========================================
TABLET
========================================= */


/* =========================================
MOBILE
========================================= */

@media (max-width:768px) {

    body.page-formulario-solicita .hero-propuesta{

        height: 420px;
    }

    body.page-formulario-solicita .navbar__container{

        padding: 18px 20px;
    }

    body.page-formulario-solicita .navbar__logo img{

        width: 90px;
    }



    body.page-formulario-solicita .hero-propuesta__text span{

        font-size: 34px;
    }
}

@media (max-width:1024px) {

    body.page-formulario-solicita .container{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 26px;
        width: min(760px, 94%);
    }

    body.page-formulario-solicita .container>.trip-info__grid{
        flex: none;
        width: 90%;
        max-width: 100%;
    }

}

@media (max-width:768px) {

    body.page-formulario-solicita .container{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 92%;
        gap: 18px;
    }

    body.page-formulario-solicita .container>.trip-info__grid{
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    body.page-formulario-solicita .info-card h2{
        font-size: 19px;
    }

    body.page-formulario-solicita .btn-condiciones{
        font-size: 13px;
        padding: 10px;
    }

    body.page-formulario-solicita .contact-card{
        flex-direction: column;
        padding: 24px 18px;
        gap: 16px;
        text-align: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.page-formulario-solicita .contact-card .grupo-superior{
        flex-direction: column;
        max-width: 100%;
        border-right: none;
        padding-right: 0;
        align-items: center;
        gap: 8px;
    }

    body.page-formulario-solicita .contact-card .grupo-superior .contact-card__icon{
        width: auto;
        margin: 0 0 4px;
    }

    body.page-formulario-solicita .contact-card .grupo-superior .contact-card__icon img{
        max-width: 60px;
        height: auto;
    }

    body.page-formulario-solicita .contact-card .grupo-superior h3{
        font-size: 18px;
        line-height: 1.2;
        margin: 0;
    }

    body.page-formulario-solicita .contact-card .grupo-superior p{
        font-size: 14px;
        margin: 0;
    }

    body.page-formulario-solicita .contact-card hr,
body.page-formulario-solicita .contact-card .hr-ct-card{
        display: block;
        width: 100%;
        border: none;
        border-top: 1px solid rgba(180, 234, 255, 0.35);
        margin: 4px 0;
    }

    body.page-formulario-solicita .contact-card .grupo-inferior{
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    body.page-formulario-solicita .contact-card-datos{
        justify-content: center;
        gap: 8px;
    }

    body.page-formulario-solicita .contact-card-datos a{
        font-size: 14px;
        word-break: break-all;
    }

}

/* ======================
   MODAL CONFIRMACIÓN
====================== */
body.page-formulario-solicita .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
    box-sizing: border-box;
}

body.page-formulario-solicita .modal-backdrop.active{
    display: flex;
    opacity: 1;
    visibility: visible;
}

body.page-formulario-solicita .modal-dialog{
    position: relative;
    max-width: 540px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}

body.page-formulario-solicita .modal-close{
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 44, 66, 0.08);
    color: #002c42;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

body.page-formulario-solicita .modal-close:hover{
    background: rgba(0, 44, 66, 0.18);
    transform: scale(1.08);
}

body.page-formulario-solicita .modal-header{
    background: #ffffff;
    padding: 28px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-formulario-solicita .modal-header__logo{
    width: 165px;
    max-width: 100%;
    height: auto;
    display: block;
}

body.page-formulario-solicita .modal-header__tagline{
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy, #002c42);
    margin: 10px 0 0;
    letter-spacing: 0.2px;
}

body.page-formulario-solicita .modal-banner{
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 297;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0081a7;
}

body.page-formulario-solicita .modal-banner__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-formulario-solicita .modal-banner__title{
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.2px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

body.page-formulario-solicita .modal-footer{
    background: #006791;
    padding: 24px 24px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-sizing: border-box;
}

body.page-formulario-solicita .modal-footer__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-formulario-solicita .modal-footer__icon svg{
    display: block;
    width: 44px;
    height: 38px;
}

body.page-formulario-solicita .modal-footer__text{
    font-family: var(--font-main, 'Kufam', sans-serif);
    font-size: 17px;
    font-weight: 400;
    color: #00b8f3;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    text-align: left;
}

@media (max-width:768px) {

    /* MODAL MOBILE */
    body.page-formulario-solicita .modal-dialog{
        max-width: 92%;
        border-radius: 14px;
    }

    body.page-formulario-solicita .modal-close{
        width: 28px;
        height: 28px;
        font-size: 18px;
        top: 8px;
        right: 10px;
    }

    body.page-formulario-solicita .modal-header{
        padding: 18px 14px 14px;
    }

    body.page-formulario-solicita .modal-header__logo{
        width: 125px;
    }

    body.page-formulario-solicita .modal-header__tagline{
        font-size: 19px;
        margin-top: 6px;
    }

    body.page-formulario-solicita .modal-banner__title{
        font-size: 20px;
        line-height: 1.18;
        padding: 0 10px;
    }

    body.page-formulario-solicita .modal-footer{
        padding: 16px 14px 18px;
        gap: 12px;
    }

    body.page-formulario-solicita .modal-footer__icon svg{
        width: 32px;
        height: 28px;
    }

    body.page-formulario-solicita .modal-footer__text{
        font-size: 15px;
        line-height: 1.3;
    }
}

/* =========================================
   VISTA MÓVIL (MAX-WIDTH: 450PX) - 100% ANCHO
   ========================================= */

@media (max-width: 450px) {

    body.page-formulario-solicita,
body.page-formulario-solicita{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.page-formulario-solicita .trip-hero{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .trip-hero__container{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .trip-hero__label{
        font-size: 16px;
    }

    body.page-formulario-solicita .trip-hero__title{
        font-size: 18px;
    }

    body.page-formulario-solicita .content-main{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    body.page-formulario-solicita .trip-overview{
        width: 100%;
        padding: 16px 0 24px;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .trip-overview__container{
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .trip-overview__title{
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
    }

    body.page-formulario-solicita .trip-overview__top{
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    body.page-formulario-solicita .trip-overview__top h3{

        font-size: 14px;
        line-height: 14px;
        text-align: center;
    }

    body.page-formulario-solicita .container{
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        margin: 0 auto;
        gap: 16px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    body.page-formulario-solicita .trip-info__grid{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 16px;
        gap: 16px;
    }

    body.page-formulario-solicita .info-com-cond{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 16px;
    }

    body.page-formulario-solicita .formulario-img{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .formulario-img img{
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: cover;
        border-radius: 10px;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .info-card{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px 14px;
        font-size: 14px;
    }

    body.page-formulario-solicita .info-card h2{
        font-size: 17px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    body.page-formulario-solicita .btn-condiciones{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 12.5px;
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
        gap: 8px;
    }

    body.page-formulario-solicita .btn-condiciones img{
        width: 22px;
        flex-shrink: 0;
    }

    body.page-formulario-solicita .contact-card{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 14px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.page-formulario-solicita .contact-card hr,
body.page-formulario-solicita .contact-card .hr-ct-card{
        display: none;
    }

    body.page-formulario-solicita .contact-card .grupo-superior{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding-right: 8px;
        border-right: 1.5px solid #00C3FF;
        max-width: 46%;
        flex-shrink: 0;
    }

    body.page-formulario-solicita .contact-card .contact-card__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        flex-shrink: 0;
    }

    body.page-formulario-solicita .contact-card .contact-card__icon img{
        width: 28px;
        max-width: 32px;
        height: auto;
        display: block;
    }

    body.page-formulario-solicita .contact-card .sub-grupo{
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }

    body.page-formulario-solicita .contact-card .sub-grupo h3,
body.page-formulario-solicita .contact-card h3{
        color: #B4EAFF;
        font-size: 12px;
        margin: 0;
        line-height: 1.2;
        text-align: center;
    }

    body.page-formulario-solicita .contact-card .sub-grupo p,
body.page-formulario-solicita .contact-card p{
        color: #B4EAFF;
        font-size: 11px;
        margin: 0;
        line-height: 1.2;
        text-align: left;
    }

    body.page-formulario-solicita .contact-card .grupo-inferior{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.page-formulario-solicita .contact-card .contact-card-datos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
    }

    body.page-formulario-solicita .contact-card .contact-card-datos img{
        width: 16px;
        height: auto;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    body.page-formulario-solicita .contact-card .contact-card-datos a,
body.page-formulario-solicita .contact-card a{
        color: #FFFFFF;
        font-size: 11.5px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.page-formulario-solicita .trip-form{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px 14px 22px;
        gap: 0px;
        font-size: 16px;
    }

    body.page-formulario-solicita .trip-form__title{
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    body.page-formulario-solicita .trip-form input,
body.page-formulario-solicita .trip-form textarea{
        width: 100%;
        height: 48px;
        font-size: 15px;
        padding: 10px 14px;
        box-sizing: border-box;
    }

    body.page-formulario-solicita .trip-form textarea{
        min-height: 80px;
        height: auto;
    }

    body.page-formulario-solicita .trip-form__button{
        width: 100%;
        max-width: 220px;
        height: 48px;
        font-size: 18px;
        margin: 10px auto 0;
        display: block;
    }

    body.page-formulario-solicita .trip-form__back{
        font-size: 16px;
        margin: 12px 0 16px;
    }

    body.page-formulario-solicita .modal-dialog{
        max-width: 94%;
        width: 100%;
        margin: 0 auto;
    }
}


/* ===================================================
   PÁGINA: mi-viaje-propuesta.html  (:is(body.page-mi-viaje-propuesta, body.page-mi-viaje))
=================================================== */
/* =========================================
   GLOBAL RESET & VARIABLES
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero,
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero *,
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .content-main,
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .content-main * {
    box-sizing: border-box;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje){
    --color-white: #FFFFFF;
    --color-primary: #22B8EA;
    --color-primary-dark: #005B87;
    --color-date: #FF6368;
    --color-text: #FFFFFF;
    --color-dark: #003A57;
    --blue: #1ab9ea;
    --radius: 10px;
    --container: 1400px;
    --shadow: 0 6px 30px rgba(0, 0, 0, .08);
    --transition: .3s ease;
    --hero-height: 500px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje),
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje){
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Kufam', sans-serif;
    background: #007DAE;
    -webkit-font-smoothing: antialiased;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) img{
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   HERO - MI VIAJE PROPUESTA
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--hero-height);
    overflow: hidden;
    background-image: url("../assets/img/mi-viaje-propuesta/fondo-cabecera.webp");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__container{
    position: relative;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__back{
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: var(--transition);
    z-index: 10;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__back:hover{
    background: #B4EAFF;
    color: #003854;
    transform: translateY(-50%) scale(1.06);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__back img{
    width: 24px;
    height: 24px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__content{
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__label{
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
    font-size: clamp(14px, 2.5vw, 22px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__title{
    margin: 4px 0 0;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero{
        height: 240px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__back{
        left: 16px;
        top: 55%;
        width: 38px;
        height: 38px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__back img{
        width: 20px;
        height: 20px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__content{
        left: 66px;
        top: 55%;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__label{
        font-size: 13px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-hero__title{
        font-size: 24px;
    }
}

/* =========================================
   MAIN WRAPPER & GRADIENT
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .content-main{
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 30px 0 0;
    background: linear-gradient(180deg, #007DAE 0%, #3FBBEA 40%, #B4EAFF 100%);
    overflow-x: hidden;
}

/* =========================================
   TRIP OVERVIEW (HERO RESUMEN)
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview{
    position: relative;
    width: 100%;
    padding: 10px 16px 30px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__container{
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__header{
    width: 100%;
    text-align: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__title{
    margin: 0;
    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    font-size: clamp(20px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__title span{
    display: block;
    font-weight: 500;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__top{
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__destination{
    margin: 0;
    color: #EEEEF0;
    font-size: clamp(22px, 3.5vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    word-break: break-word;
    flex: 1;
    min-width: 260px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    height: 60px;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #003854;
    text-decoration: none;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: var(--shadow);
    transition: var(--transition);
    white-space: nowrap;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cta:hover{
    background: #B4EAFF;
    color: #003854;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__top{
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 16px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__destination{
        text-align: center;
        font-size: 24px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cta{
        width: 100%;
        height: 52px;
        font-size: 18px;
    }
}

/* =========================================
   OVERVIEW CARDS (PRECIO, FECHAS, PAGOS, ACTIVIDADES)
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cards{
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cards{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-overview__cards{
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card{
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 20px;
    color: white;
    box-shadow: var(--shadow);
    width: 100%;
    min-width: 0;
    text-align: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--price{
    background: var(--color-primary);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--dates{
    background: var(--color-date);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card__label{
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card__value{
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 900;
    line-height: 1.1;
}

/* TARJETA PAGOS */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--payment{
    border-radius: var(--radius);
    background: #fff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--shadow);
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-fragmented{
    background: var(--color-primary-dark);
    border-radius: 8px;
    color: white;
    padding: 14px 12px;
    width: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-fragmented h3{
    margin: 0 0 10px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-fragmented ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-fragmented li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(12px, 1.8vw, 14px);
    font-weight: 500;
    gap: 8px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-full{
    background: #E8F4F8;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: clamp(13px, 2vw, 15px);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-full small{
    font-size: clamp(14px, 2.2vw, 17px);
    font-weight: 900;
}

/* TARJETA ACTIVIDADES */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--activities{
    border-radius: var(--radius);
    background: #14B4E6;
    padding: 24px 20px;
    color: white;
    box-shadow: var(--shadow);
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--activities h3{
    margin: 0 0 14px;
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--activities ul{
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .card--activities li{
    font-size: clamp(13px, 1.8vw, 16px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
    word-break: break-word;
}

/* =========================================
   TRIP DETAIL: GALERÍA & ITINERARIO
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-detail{
    width: 100%;
    max-width: var(--container);
    margin: 30px auto 0;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 960px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-detail{
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* GALERÍA */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .destination-gallery{
    display: flex;
    flex-direction: column;
    height: 620px;
    width: 100%;
    min-width: 0;
}

@media (max-width: 960px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .destination-gallery{
        height: auto;
    }
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery__viewer{
    position: relative;
    flex: 1;
    min-height: 380px;
    border-radius: 12px;
    overflow: hidden;
    background: #002C42;
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery__viewer{
        min-height: 260px;
        height: 280px;
        flex: none;
    }
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-slide{
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-slide.active{
    display: block;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-slide iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

/* Flechas de galería */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: var(--transition);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow:hover{
    transform: translateY(-50%) scale(1.08);
    background: #B4EAFF;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow.prev{
    left: 14px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow.next{
    right: 14px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow img{
    width: 32px;
    height: 32px;
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow{
        width: 40px;
        height: 40px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow img{
        width: 24px;
        height: 24px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow.prev{
        left: 8px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-arrow.next{
        right: 8px;
    }
}

/* Tabs de Galería */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tabs{
    font-family: kufam;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: -10px;
    width: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab{
    height: 52px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: clamp(13px, 2vw, 18px);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab[data-gallery="estacion"]{
    background: #FF5C65;
    font-family: kufam;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab[data-gallery="hotel"]{
    background: #7A5AF8;
    font-family: kufam;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab[data-gallery="mapa"]{
    background: #19B8EA;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab:hover,
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .gallery-tab.active{
    filter: brightness(1.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: underline;
    font-family: kufam;
}

/* ITINERARIO */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary{
    display: flex;
    flex-direction: column;
    height: 620px;
    background: #ECECEC;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    min-width: 0;
    box-shadow: var(--shadow);
}

@media (max-width: 960px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary{
        height: 480px;
    }
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary{
        padding: 16px 14px;
        height: 420px;
    }
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__title{
    margin: 0 0 14px;
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    color: #1BB8EA;
    text-transform: uppercase;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__tabs{
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    width: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .day-tab{
    font-family: kufam;
    font-size: 18px;
    flex: 1;
    min-width: 60px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #005B87;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    padding: 0 6px;
    white-space: nowrap;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .day-tab:hover{
    background: #B4EAFF;
    color: #003854;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .day-tab.active{
    background: #00C3FF;
    color: #003854;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__content{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    color: #003854;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__content::-webkit-scrollbar{
    width: 8px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__content::-webkit-scrollbar-thumb{
    background: #1EBBF0;
    border-radius: 10px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__content p{
    margin: 0 0 16px;
    font-size: clamp(14px, 1.8vw, 17px);
    line-height: 1.5;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-itinerary__content p strong{
    color: #005B87;
    font-size: 1.05em;
}

/* =========================================
   SERVICIOS, COMIDAS, CONTACTO Y FAQ
   ========================================= */

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-info{
    padding: 40px 0 60px;
    width: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .container{
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-info__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-info__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .trip-info__grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    :is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card{
        display: flex;
        flex-direction: row;
    }
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card{
    background: #F2F2F2;
    border-radius: 8px;
    padding: 22px;
    box-shadow: var(--shadow);
    color: #003854;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-com-cond{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card h2{
    color: var(--blue);
    font-size: clamp(20px, 2.5vw, 28px);
    margin: 0 0 10px;
    font-weight: 800;
    text-transform: uppercase;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card h3{
    color: #1ab9ea;
    font-size: clamp(16px, 2vw, 22px);
    margin: 14px 0 8px;
    font-weight: 700;
    text-transform: uppercase;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card p{
    margin: 0 0 12px;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.4;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card ul{
    padding-left: 20px;
    margin: 0 0 12px;
    line-height: 1.5;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .info-card li{
    margin-bottom: 6px;
    font-size: clamp(13px, 1.8vw, 15px);
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .btn-primary,
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) a.btn-primary{
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 6px;
    background: var(--blue);
    color: #fff;
    font-family: Kufam, sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    text-decoration: none;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .btn-primary:hover{
    background: #B4EAFF;
    color: #003854;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .btn-condiciones{
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: clamp(12px, 1.6vw, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    text-align: center;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .btn-condiciones img{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}

/* CONTACT CARD */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card{
    background: #062F49;
    color: #B4EAFF;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card .grupo-superior{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card__icon img{
    width: 170px;
    height: auto;
    margin-bottom: 12px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card h3{
    margin: 0 0 6px;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    color: #B4EAFF;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card p{
    margin: 0;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 500;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .hr-ct-card{
    border: none;
    border-top: 1px solid #00C3FF;
    margin: 18px 0;
    width: 100%;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card .grupo-inferior{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card-datos img{
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card-datos a{
    text-align: center;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 25px;
    font-weight: 600;
    word-break: break-all;
    text-align: center;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .contact-card-datos a:hover{
    color: #fff;
}

/* FAQ SECTION */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-section{
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-card{
    background: #F2F2F2;
    border-radius: 8px;
    padding: 22px;
    box-shadow: var(--shadow);
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-title{
    color: var(--blue);
    font-size: clamp(20px, 2.5vw, 28px);
    margin: 0 0 14px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-scroll{
    height: 380px;
    overflow-y: auto;
    padding-right: 6px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-scroll::-webkit-scrollbar{
    width: 6px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-scroll::-webkit-scrollbar-thumb{
    background: var(--blue);
    border-radius: 10px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item{
    background-color: #B4EAFF;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
    color: #003854;
    transition: var(--transition);
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item:hover{
    background-color: #92DCFC;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item summary{
    list-style: none;
    cursor: pointer;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    line-height: 1.3;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item summary::-webkit-details-marker{
    display: none;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item summary::before{
    content: "+";
    font-size: 20px;
    font-weight: 800;
    color: #005B87;
    width: 18px;
    display: inline-block;
    flex-shrink: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-item[open] summary::before{
    content: "–";
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .faq-content{
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 56, 84, 0.15);
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1.4;
    color: #003854;
    word-break: break-word;
}

/* PAYMENT ICONS */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-icons{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .payment-icons img{
    height: 28px;
    width: auto;
}

/* EQUIPMENT SECTION */
:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .equipment-card{
    background: #EFEFEF;
    border-radius: 8px;
    padding: 26px;
    color: #003854;
    box-shadow: var(--shadow);
    width: 100%;
    min-width: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .equipment-card h2{
    color: var(--blue);
    font-size: clamp(20px, 2.5vw, 30px);
    margin: 0 0 20px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .equipment-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

:is(body.page-mi-viaje-propuesta, body.page-mi-viaje) .equipment-list li{
    background: white;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    word-break: break-word;
}



/* ===================================================
   PÁGINA: mi-viaje.html  — bloques propios
=================================================== */

body.page-mi-viaje .content-main,
body.page-mi-viaje .content-main * {
    box-sizing: border-box;
}

body.page-mi-viaje .trip-hero {
    background-image: url("../assets/img/mi-viaje/fondo-cabecera.webp");
}

.page-mi-viaje .hero-viaje {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-image: url("../assets/img/mi-viaje/fondo-cabecera.webp");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.page-mi-viaje .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.page-mi-viaje .hero-container {
    position: relative;
    z-index: 2;
    width: min(1400px, 92%);
    margin: 0 auto;
    padding: 80px 0 0;
}

.page-mi-viaje .hero-title {
    margin: 0;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
    font-size: clamp(22px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.page-mi-viaje .hero-title span {
    display: block;
    font-weight: 500;
    margin-top: 6px;
}

.page-mi-viaje .hero-breadcrumb {
    display: flex;
    gap: 18px;
    margin-top: 22px;
}

.page-mi-viaje .breadcrumb-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.page-mi-viaje .breadcrumb-link:hover {
    color: #b4eaff;
}

.page-mi-viaje .resumen-reserva {
    width: 100%;
    padding: 28px 16px 10px;
}

.page-mi-viaje .resumen-reserva__container {
    width: min(1400px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: stretch;
}

.page-mi-viaje .perfil {
    background: #002c42;
    border-radius: 12px;
    padding: 28px 22px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}

.page-mi-viaje .perfil__titulo {
    margin: 0 0 18px;
    color: #00b8f3;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.page-mi-viaje .perfil__avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: #007dae;
}

.page-mi-viaje .perfil__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-mi-viaje .perfil__datos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.page-mi-viaje .panel-reserva {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}

.page-mi-viaje .panel-reserva__contenido {
    padding: 26px 28px;
}

.page-mi-viaje .panel-reserva__cabecera {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 22px;
}

.page-mi-viaje .precio h3,
.page-mi-viaje .reserva h3 {
    margin: 0 0 8px;
    color: #007dae;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.page-mi-viaje .precio__valor {
    color: #003854;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1;
}

.page-mi-viaje .divider-vertical {
    width: 1px;
    background: rgba(0, 56, 84, 0.2);
}

.page-mi-viaje .reserva span {
    display: block;
    color: #00b8f3;
    font-size: 18px;
    font-weight: 800;
}

.page-mi-viaje .reserva strong {
    display: block;
    margin-top: 4px;
    color: #003854;
    font-size: 16px;
}

.page-mi-viaje .beneficios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.page-mi-viaje .beneficio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.page-mi-viaje .beneficio img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.page-mi-viaje .beneficio p {
    margin: 0;
    color: #003854;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.page-mi-viaje .panel-reserva__imagen {
    margin: 0;
    min-height: 100%;
}

.page-mi-viaje .panel-reserva__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 960px) {
    .page-mi-viaje .hero-viaje {
        height: 240px;
    }

    .page-mi-viaje .hero-container {
        padding-top: 70px;
    }

    .page-mi-viaje .resumen-reserva__container {
        grid-template-columns: 1fr;
    }

    .page-mi-viaje .panel-reserva {
        grid-template-columns: 1fr;
    }

    .page-mi-viaje .panel-reserva__imagen {
        min-height: 200px;
    }

    .page-mi-viaje .beneficios {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-mi-viaje .panel-reserva__cabecera {
        flex-direction: column;
        gap: 14px;
    }

    .page-mi-viaje .divider-vertical {
        width: 100%;
        height: 1px;
    }
}

/* ===================================================
   PÁGINA: formulario-viaje-a-medida.html  (body.page-viaje-a-medida)
=================================================== */
/* ==========================
   VARIABLES
========================== */

body.page-viaje-a-medida{
    margin: 0px;
}

body.page-viaje-a-medida{

    --color-white: #FFFFFF;
    --color-primary: #0078AE;

    --hero-height: 530px;

    --container: 1920px;

    --transition: .3s ease;

}

body.page-viaje-a-medida .container{
    width: min(1400px, 90%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    box-sizing: border-box;
}

body.page-viaje-a-medida .container > .trip-info__grid{
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
}


/* CONTENEDOR */

body.page-viaje-a-medida .accordion-checkbox{

    margin: 18px 0;

}

/* Checkbox oculto */

body.page-viaje-a-medida .accordion-toggle{

    display: none;

}

/* Cabecera */

body.page-viaje-a-medida .accordion-label{
    color: #00C3FF;
    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    background: #B4EAFF;

    border-radius: 8px;

    cursor: pointer;

    user-select: none;

}

/* Texto */

body.page-viaje-a-medida .accordion-title{

    display: flex;

    align-items: center;

    gap: 12px;

}

/* Casilla */

body.page-viaje-a-medida .checkbox{

    width: 18px;

    height: 18px;

    border-radius: 4px;

    background: #fff;

    border: 2px solid #fff;

}

/* Flecha */

body.page-viaje-a-medida .accordion-arrow{

    transition: .35s;

    color: var(--color-primary-dark);

}

/* Contenido */

body.page-viaje-a-medida .accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background-color: #B4EAFF;
    color: #003854;
}

/* Cuando está abierto */

body.page-viaje-a-medida .accordion-toggle:checked~.accordion-content{

    max-height: max-content;

    margin-top: 15px;

}

/* Flecha */

body.page-viaje-a-medida .accordion-toggle:checked+.accordion-label .accordion-arrow{

    transform: rotate(180deg);

}

/* Casilla marcada */

body.page-viaje-a-medida .accordion-toggle:checked+.accordion-label .checkbox{

    background: var(--color-primary);

    border-color: var(--color-primary);

    position: relative;

}

body.page-viaje-a-medida .accordion-toggle:checked+.accordion-label .checkbox::after{

    content: "✓";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 12px;

}

/* Campos */

body.page-viaje-a-medida .form-grid{

    display: grid;

    gap: 15px;

    padding: 18px;

}

body.page-viaje-a-medida .form-grid input{

    width: 100%;

}

body.page-viaje-a-medida .accordion-content p{
    margin-left: 15px;
}

body.page-viaje-a-medida .medidas-user{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ==========================
   HERO
========================== */

body.page-viaje-a-medida .trip-hero{

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background-image:
        url("../assets/img/viaje-a-medida/fondo-cabecera.webp");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;
}

/* ligera capa superior */

body.page-viaje-a-medida .trip-hero__overlay{

    position: absolute;

    inset: 0;


    pointer-events: none;
}

/* ==========================
   CONTENIDO
========================== */

body.page-viaje-a-medida .trip-hero__container{

    position: relative;

    height: 100%;

    max-width: var(--container);

    margin: 0 auto;
}

/* ==========================
   BOTÓN ATRÁS
========================== */

body.page-viaje-a-medida .trip-hero__back{

    position: absolute;

    left: 92px;

    top: 228px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12);

    transition: var(--transition);
}

body.page-viaje-a-medida .trip-hero__back div{
    width: 30px;
    height: 30px;
}

body.page-viaje-a-medida .trip-hero__back:hover{


    background: #B4EAFF;
    color: #003854;
}

body.page-viaje-a-medida .trip-hero__back img{

    width: 32px;
    height: 32px;
}

body.page-viaje-a-medida .form-steps{
    color: #062f49;
    padding: 10px;

    .active {
        font-weight: 700;
    }
}

/* ==========================
   TEXTO
========================== */

body.page-viaje-a-medida .trip-hero__content{

    position: absolute;

    left: 82px;

    bottom: 28px;

    display: flex;
    flex-direction: column;
}

body.page-viaje-a-medida .trip-hero__label{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

body.page-viaje-a-medida .trip-hero__title{

    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T3-REGULAR */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

@media (max-width:1024px) {


    body.page-viaje-a-medida .trip-hero{

        height: 420px;
    }

    body.page-viaje-a-medida .trip-hero__back{

        left: 40px;
        top: 180px;
    }

    body.page-viaje-a-medida .trip-hero__content{

        left: 40px;
        bottom: 25px;
    }

    body.page-viaje-a-medida .trip-hero__label{

        font-size: 24px;
    }

    body.page-viaje-a-medida .trip-hero__title{

        font-size: 48px;
    }

}

@media (max-width:768px) {

    body.page-viaje-a-medida .trip-hero{

        height: 260px;

        background-position: center;
    }

    body.page-viaje-a-medida .trip-hero__back{

        width: 46px;
        height: 46px;

        left: 16px;
        top: 110px;
    }

    body.page-viaje-a-medida .trip-hero__back svg{

        width: 22px;
        height: 22px;
    }

    body.page-viaje-a-medida .trip-hero__content{

        left: 16px;
        bottom: 16px;
    }

    body.page-viaje-a-medida .trip-hero__label{

        font-size: 12px;

        margin-bottom: 4px;
    }

    body.page-viaje-a-medida .trip-hero__title{

        font-size: 22px;
    }

}





/*contenido..............................*/


body.page-viaje-a-medida .content-main{
    position: relative;
    padding: 24px 0 0px;
    background: linear-gradient(0deg, #B4EAFF 0%, #007DAE 100%);

}

body.page-viaje-a-medida .trip-overview{

    position: relative;

    padding: 24px 15px;


}

body.page-viaje-a-medida .trip-overview__container{

    width: min(100% - 50px, var(--container));

    margin-inline: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-viaje-a-medida .trip-overview__title{

    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    /* T1-50 */
    font-family: Kufam;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

body.page-viaje-a-medida .trip-overview__title span{

    display: block;
}

body.page-viaje-a-medida .trip-overview__top{
    width: min(1400px, 90%);

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}

body.page-viaje-a-medida .head-titulares{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

body.page-viaje-a-medida .titular-main{
    margin-top: 200px;
    font-family: kufam;
    font-size: 80px;
    font-weight: 700;
    color: #002C42;
}

@media (max-width:768px) {
    body.page-viaje-a-medida .titular-main{
        margin-top: 150px;
        font-size: 50px;
    }
}



body.page-viaje-a-medida .formulario-img img{
    display: block;

    width: 100%;

    height: 315px;

    object-fit: cover;

    border-radius: 10px;
}

/*=========================================
FORMULARIO
=========================================*/
body.page-viaje-a-medida .upload-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 40px;
    margin-top: 20px;
    background-color: #003854;
    color: #FFF;
    gap: 20px;
    height: 60px;
    border-radius: 10px;
}

body.page-viaje-a-medida .img-up-doc{
    width: 30px;
}

body.page-viaje-a-medida .upload-btn:hover{
    background-color: #0078AE;
}


body.page-viaje-a-medida .trip-form{

    max-width: none;

    height: 100%;
    justify-content: flex-start;

    background: #F2F2F2;

    border-radius: 10px;

    padding: 34px 34px 40px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form__title{

    color: #00C3FF;
    /* T3-BOLD */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 92% */
    text-transform: uppercase;
}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form__group{

    margin-bottom: 14px;

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form input,
body.page-viaje-a-medida .trip-form textarea{

    width: 100%;

    border: none;

    outline: none;

    background: #FFFFFF;

    border-radius: 8px;

    padding: 13px 18px;

    font-family: Kufam, sans-serif;

    font-size: 18px;

    color: #003854;

    box-sizing: border-box;

    transition: .25s;

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form textarea{

    min-height: 95px;

    resize: none;

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form input::placeholder,
body.page-viaje-a-medida .trip-form textarea::placeholder{

    color: #9E9E9E;

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form input:focus,
body.page-viaje-a-medida .trip-form textarea:focus{

    box-shadow: 0 0 0 3px rgba(34, 184, 234, .25);

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form__back{

    display: block;

    text-align: center;

    margin-top: 18px;
    margin-bottom: 28px;

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    color: #003854;

    font-family: Kufam, sans-serif;

    transition: .25s;

}

body.page-viaje-a-medida .trip-form__back:hover{

    color: #22B8EA;

}

/*----------------------------------*/

body.page-viaje-a-medida .trip-form__button{

    width: 240px;

    height: 64px;

    margin: auto;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background: #22B8EA;

    color: #003854;

    font-family: Kufam, sans-serif;

    font-size: 30px;

    font-weight: 800;

    text-transform: uppercase;

    transition: .25s;

}

body.page-viaje-a-medida .trip-form__button:hover{

    background: #15AFE5;

}

body.page-viaje-a-medida .trip-form__button:active{

    transform: scale(.98);

}


/*=========================================
TABLET
=========================================*/

@media (max-width:1024px) {

    body.page-viaje-a-medida .accordion-label{
        height: 50px;
    }

    body.page-viaje-a-medida .trip-form input{
        height: 70px;
        font-size: 25px;
    }

    body.page-viaje-a-medida .trip-form{
        width: auto;
        color: #062f49;
        padding: 28px;
        gap: 20px;
        font-size: 25px;

    }

    body.page-viaje-a-medida .trip-form__title{
        line-height: 40px;
        font-size: 46px;

    }

    body.page-viaje-a-medida .trip-form__button{

        width: 280px;

        font-size: 26px;

    }

}

/*=========================================
MÓVIL
=========================================*/

@media (max-width:768px) {

    body.page-viaje-a-medida .trip-form{

        padding: 22px;

    }

    body.page-viaje-a-medida .trip-form__title{

        font-size: 34px;

        margin-bottom: 20px;

    }

    body.page-viaje-a-medida .trip-form__title-sub{
        font-size: 25px;
        color: #043553;
        font-weight: 500;
    }


    body.page-viaje-a-medida .trip-form input,
body.page-viaje-a-medida .trip-form textarea{

        padding: 13px 14px;

        font-size: 18px;

    }

    body.page-viaje-a-medida .trip-form textarea{

        min-height: 92px;

    }

    body.page-viaje-a-medida .trip-form__back{

        font-size: 20px;

        margin: 14px 0;

    }

    body.page-viaje-a-medida .trip-form__button{

        width: 220px;

        height: 52px;

        font-size: 20px;

    }

}

/*=========================================
ACCESIBILIDAD
=========================================*/

body.page-viaje-a-medida .sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}

body.page-viaje-a-medida .trip-overview__top h3{
    color: var(--Color, #043553);
    /* T2 - 30 */
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

}


body.page-viaje-a-medida .trip-overview__cards{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: Kufam;

    width: 100%;
    gap: 20px;
}



body.page-viaje-a-medida .payment-fragmented{
    line-height: 1;
    width: 95%;

    background: var(--color-primary-dark);

    border-radius: 8px;

    color: white;

    padding: 10px;
}

body.page-viaje-a-medida .payment-fragmented h3{

    text-align: center;

    font-size: 1.75rem;
}

body.page-viaje-a-medida .payment-fragmented ul{
    font-family: Kufam;
    font-size: 20px;
    list-style: none;
    margin-left: -30px;
}

body.page-viaje-a-medida .payment-fragmented li{

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

@media (max-width:768px) {

    body.page-viaje-a-medida .trip-overview{

        padding: 20px 0 40px;
    }

    body.page-viaje-a-medida .trip-overview__container{

        width: min(100% - 24px, 100%);
    }

    body.page-viaje-a-medida .trip-overview__title{

        font-size: 2rem;
    }

    body.page-viaje-a-medida .trip-overview__top{

        margin-top: 30px;
        gap: 20px;
    }

    body.page-viaje-a-medida .trip-overview__destination{

        font-size: 1.75rem;
    }



    body.page-viaje-a-medida .trip-overview__cards{

        grid-template-columns: 1fr;
    }

    body.page-viaje-a-medida .card{

        min-height: auto;
    }

    body.page-viaje-a-medida .card__value{

        font-size: 3rem;
    }

}

/*=====================================
FLECHAS GALERÍA
=====================================*/

body.page-viaje-a-medida .gallery-arrow{

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transition: .25s;
}

body.page-viaje-a-medida .gallery-arrow:hover{

    transform: translateY(-50%) scale(1.08);
}

/* IZQUIERDA */

body.page-viaje-a-medida .gallery-arrow.prev{

    left: 22px;
    right: auto;
}

/* DERECHA */

body.page-viaje-a-medida .gallery-arrow.next{

    right: 22px;
    left: auto;
}

body.page-viaje-a-medida .gallery-arrow img{

    width: 64px;
    height: 64px;

    object-fit: contain;
}

body.page-viaje-a-medida .gallery-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -8px;
}

body.page-viaje-a-medida .gallery-tab{
    font-family: kufam;
    height: 60px;

    border: none;
    border-radius: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-viaje-a-medida .gallery-tab.active{

    text-decoration: underline;

}


body.page-viaje-a-medida .gallery-tab[data-gallery="estacion"]{

    background: #FF5C65;
}

body.page-viaje-a-medida .gallery-tab[data-gallery="estacion"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-viaje-a-medida .gallery-tab[data-gallery="hotel"]{

    background: #7A5AF8;
}

body.page-viaje-a-medida .gallery-tab[data-gallery="hotel"]:hover{

    background: #B4EAFF;
    color: #003854;
}


body.page-viaje-a-medida .gallery-tab[data-gallery="mapa"]{

    background: #19B8EA;
}

body.page-viaje-a-medida .gallery-tab[data-gallery="mapa"]:hover{

    background: #B4EAFF;
    color: #003854;
}

@media (max-width:1024px) {

    body.page-viaje-a-medida .galeria,
body.page-viaje-a-medida .itinerario{

        height: auto;
    }

    body.page-viaje-a-medida .gallery__viewer{

        height: 560px;
        flex: none;
    }

}

@media (max-width:768px) {

    body.page-viaje-a-medida .gallery__viewer{

        height: 340px;
    }

    body.page-viaje-a-medida .itinerario{

        height: auto;
    }

    body.page-viaje-a-medida .itinerario__contenido{

        height: 380px;
        flex: none;
    }

}


/*==================================================
CONTACT CARD - MOBILE
==================================================*/

@media (max-width:768px) {

    body.page-viaje-a-medida .contact-card{

        display: grid;

        flex-direction: row;
        grid-template-columns: 30px 4fr;
        text-align: left;

        padding: 22px 18px;
    }

    body.page-viaje-a-medida .contact-card__icon{
        width: 30px;
        margin-bottom: 18px;
    }

    body.page-viaje-a-medida .contact-card__icon img{
        width: 15%;
        width: 72px;
    }

    body.page-viaje-a-medida .contact-card h3{
        font-size: 12px;
    }

    body.page-viaje-a-medida .contact-card p{
        font-size: 15px;
        line-height: 1.5;
    }


    body.page-viaje-a-medida .contact-card-datos{

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;
    }

    body.page-viaje-a-medida .contact-card-datos img{

        width: 18px;
    }

    body.page-viaje-a-medida .contact-card-datos a{

        font-size: 15px;

        word-break: break-word;
    }

}



@media (max-width:768px) {



    body.page-viaje-a-medida .trip-itinerary__title{

        font-size: 28px;
    }

    body.page-viaje-a-medida .day-tab{

        min-width: 68px;

        font-size: 14px;

        height: 40px;
    }

    body.page-viaje-a-medida .trip-itinerary__content{

        height: 380px;
    }

    body.page-viaje-a-medida .gallery-tab{

        font-size: 14px;

        height: 42px;
    }

}

/* SERVICIOS COMIDA  CONTACTO ---------------------*/
body.page-viaje-a-medida{

    --bg-top: #c5edff;
    --bg-bottom: #b5e7fb;

    --white: #f5f5f5;

    --blue: #1ab9ea;
    --dark: #043553;

    --radius: 8px;

    --shadow:
        0 2px 6px rgba(0, 0, 0, .08);

}

body.page-viaje-a-medida .form_title{
    font-family: 'Kufam';
    width: min(1400px, 90%);
    font-size: 50px;
    color: #fff;
    text-align: left;

}

body.page-viaje-a-medida .trip-info{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    width: 90%;
}


body.page-viaje-a-medida .trip-info__grid{
    height: fit-content;

    width: 100%;
    max-width: none;
    font-family: kufam;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    gap: 20px;

}


body.page-viaje-a-medida .info-card{
    font-weight: 700;
    gap: 14px;

    background: #f2f2f2;

    border-radius: 8px;

    padding: 18px 20px;

    box-shadow: var(--shadow);
    color: #003854;
}

body.page-viaje-a-medida .info-card p,
body.page-viaje-a-medida .info-card ul{
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

body.page-viaje-a-medida .info-com-cond{
    width: 100%;
    height: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-viaje-a-medida .info-card h2{

    color: var(--blue);

    font-size: 30px;

    margin-bottom: 5px;

    font-weight: 800;
    line-height: 1;
}

body.page-viaje-a-medida .info-card h3{

    color: #FF6164;

    font-size: 30px;

    margin-top: 10px;
}

body.page-viaje-a-medida .info-card ul,
body.page-viaje-a-medida .info-card ol{

    padding-left: 20px;

    line-height: 1.5;
}


body.page-viaje-a-medida .contact-card{
    color: var(--12, #B4EAFF);
    font-family: Kufam;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background: #062f49;

    color: #B4EAFF;

    border-radius: 8px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    .grupo-superior,
    .grupo-inferior {
        display: flex;
        flex-direction: column;
    }

    .grupo-inferior {
        gap: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grupo-superior {



        .sub-grupo {
            flex-direction: column;
            gap: 5px;

            p {
                text-align: center;
            }
        }
    }

}

body.page-viaje-a-medida .radius-option{
    display: flex;
    flex-direction: row;
}

/* Contenedor principal */
body.page-viaje-a-medida .radio-group{
    font-family: kufam;
    display: flex;
    gap: 20px;
    font-family: sans-serif;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
}

/* Ocultar el radio button nativo */
body.page-viaje-a-medida .radio-group input[type="radio"]{
    display: none;
}

/* Estilo base para la etiqueta */
body.page-viaje-a-medida .radio-group label{
    font-family: kufam;
    font-size: 16px;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
}

/* Crear el círculo exterior personalizado */
body.page-viaje-a-medida .radio-group label::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.2s ease;
}

/* Crear el punto central (oculto por defecto) */
body.page-viaje-a-medida .radio-group label::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #007bff;
    /* Color del punto */
    transform: scale(0);
    transition: transform 0.2s ease;
}

/* Cambiar el color del borde al pasar el cursor */
body.page-viaje-a-medida .radio-group label:hover::before{
    border-color: #007bff;
}

/* Estilos cuando el radio button está seleccionado */
body.page-viaje-a-medida .radio-group input[type="radio"]:checked+label::before{
    border-color: #007bff;
}

body.page-viaje-a-medida .radio-group input[type="radio"]:checked+label::after{
    transform: scale(1);
    /* Muestra el punto central */
}


body.page-viaje-a-medida .contact-card__icon{

    text-align: center;

    margin-bottom: 25px;
}

body.page-viaje-a-medida .contact-card__icon img{

    max-width: 170px;
    height: auto;
}

body.page-viaje-a-medida .contact-card h3{
    font-weight: 600;
    font-size: 38px;
    color: #B4EAFF;
    text-align: center;
}

body.page-viaje-a-medida .contact-card hr{
    border: none;
    border-top: 2px solid #B4EAFF;
}

body.page-viaje-a-medida .contact-card a{
    display: flex;
    color: #B4EAFF;
    text-decoration: none;
    font-size: 22px;
}

body.page-viaje-a-medida .contact-card-datos{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-viaje-a-medida .contact-card-datos img{
    width: 25px;
}


body.page-viaje-a-medida .btn-condiciones{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;

    text-transform: lowercase;
    font-family: Kufam;
    width: 100%;
    height: 58px;
    line-height: 20px;
    /* 133.333% */
    gap: 10px;
    border: none;
    border-radius: 6px;
    background: #003854;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

body.page-viaje-a-medida .btn-condiciones img{
    width: 25px;
    height: auto;
}

body.page-viaje-a-medida .btn-condiciones:hover{
    background: #0078AE;
    color: #fff;
}


@media (max-width:1024px) {

    body.page-viaje-a-medida .trip-info__grid{

        grid-template-columns:
            1fr 1fr;
    }



}

@media (max-width:768px) {

    body.page-viaje-a-medida .trip-info{

        padding: 20px 0 40px;
    }

    body.page-viaje-a-medida .trip-info__grid{

        grid-template-columns: 1fr;
    }

    body.page-viaje-a-medida .info-card h2{

        font-size: 22px;
    }
}

/*==================================================
CONTACT CARD - TABLET
==================================================*/

@media (max-width:1024px) {

    body.page-viaje-a-medida .contact-card{
        flex-direction: row;
        padding: 18px 8px;
        gap: 11px;

        hr {
            display: none;
        }

        .grupo-superior {
            flex-direction: row;
            padding-right: 5px;
            gap: 5px;
            max-width: 40%;
            align-items: center;
            border-right: solid 1px #00C3FF;
        }

        .grupo-inferior {
            flex-direction: column;
            justify-content: space-evenly;

        }

        .contact-card__icon {
            width: auto;
            margin: 0;
        }

        .contact-card__icon img {
            min-width: 30px;
            max-width: 40px;
            height: auto;
        }

        .contact-card-datos a {
            font-size: 15px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 1.2;
        }

        h3 {

            margin: 0px;
            font-size: 22px;
            line-height: 30px;
            text-align: center;
        }


        .contact-card-datos {

            display: flex;
            justify-content: flex-start;
            gap: 12px;
        }

        .contact-card-datos img {

            width: 22px;

            margin: 0;
        }
    }
}


/* =========================================
TABLET
========================================= */


/* =========================================
MOBILE
========================================= */

@media (max-width:768px) {

    body.page-viaje-a-medida .hero-propuesta{

        height: 420px;
    }

    body.page-viaje-a-medida .navbar__container{

        padding: 18px 20px;
    }

    body.page-viaje-a-medida .navbar__logo img{

        width: 90px;
    }



    body.page-viaje-a-medida .hero-propuesta__text span{

        font-size: 34px;
    }
}

@media (max-width:1024px) {

    body.page-viaje-a-medida .container{
        font-size: 25px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 26px;
        width: min(760px, 94%);
    }

    body.page-viaje-a-medida .container > .trip-info__grid{
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    body.page-viaje-a-medida .trip-form{

        order: -1;

    }

}

@media (max-width:768px) {

    body.page-viaje-a-medida .container{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 92%;
        gap: 18px;
    }

    body.page-viaje-a-medida .container > .trip-info__grid{
        flex: none;
        width: 100%;
        max-width: 100%;
    }

}

/* =========================================
   VISTA MÓVIL (MAX-WIDTH: 450PX) - 100% ANCHO
   ========================================= */

@media (max-width: 450px) {

    body.page-viaje-a-medida,
body.page-viaje-a-medida{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.page-viaje-a-medida .head-titulares{
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .titular-main{
        margin-top: 120px;
        font-size: clamp(22px, 6.5vw, 32px);
        text-align: center;
        width: 100%;
    }

    body.page-viaje-a-medida .trip-hero__label{
        font-size: 16px;
    }

    body.page-viaje-a-medida .trip-hero__title{
        font-size: 18px;
    }

    body.page-viaje-a-medida .content-main{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    body.page-viaje-a-medida .trip-overview{
        width: 100%;
        padding: 16px 0 24px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .trip-overview__container{
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .trip-overview__title{
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
    }

    body.page-viaje-a-medida .trip-overview__top{
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    body.page-viaje-a-medida .trip-overview__top h3{
        font-size: 14px;
        line-height: 1.45;
        text-align: center;
    }

    body.page-viaje-a-medida .form_title{
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        text-align: center;
        margin-top: 16px;
        margin-bottom: 0;
    }

    body.page-viaje-a-medida .container{
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        margin: 0 auto;
        gap: 16px;
        display: flex;
        flex-direction: column-reverse;
    }

    body.page-viaje-a-medida .trip-info__grid{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 16px;
        gap: 16px;
    }

    body.page-viaje-a-medida .info-card{
        width: 100%;
        box-sizing: border-box;
        padding: 16px 14px;
        font-size: 14px;
    }

    body.page-viaje-a-medida .info-card h2{
        font-size: 17px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    body.page-viaje-a-medida .info-card p,
body.page-viaje-a-medida .info-card ul{
        font-size: 12px;
        line-height: 1.45;
    }

    body.page-viaje-a-medida .contact-card{
        width: 100%;
        box-sizing: border-box;
        padding: 14px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.page-viaje-a-medida .contact-card hr,
body.page-viaje-a-medida .contact-card .hr-ct-card{
        display: none;
    }

    body.page-viaje-a-medida .contact-card .grupo-superior{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding-right: 8px;
        border-right: 1.5px solid #00C3FF;
        max-width: 46%;
        flex-shrink: 0;
    }

    body.page-viaje-a-medida .contact-card .contact-card__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        flex-shrink: 0;
    }

    body.page-viaje-a-medida .contact-card .contact-card__icon img{
        width: 28px;
        max-width: 32px;
        height: auto;
        display: block;
    }

    body.page-viaje-a-medida .contact-card .sub-grupo{
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }

    body.page-viaje-a-medida .contact-card .sub-grupo h3,
body.page-viaje-a-medida .contact-card h3{
        color: #B4EAFF;
        font-size: 12px;
        margin: 0;
        line-height: 1.2;
        text-align: center;
    }

    body.page-viaje-a-medida .contact-card .sub-grupo p,
body.page-viaje-a-medida .contact-card p{
        color: #B4EAFF;
        font-size: 11px;
        margin: 0;
        line-height: 1.2;
        text-align: left;
    }

    body.page-viaje-a-medida .contact-card .grupo-inferior{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.page-viaje-a-medida .contact-card .contact-card-datos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
    }

    body.page-viaje-a-medida .contact-card .contact-card-datos img{
        width: 16px;
        height: auto;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    body.page-viaje-a-medida .contact-card .contact-card-datos a,
body.page-viaje-a-medida .contact-card a{
        color: #FFFFFF;
        font-size: 11.5px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.2;
    }

    body.page-viaje-a-medida .trip-form{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px 14px 22px;
        gap: 0px;
        font-size: 16px;
    }

    body.page-viaje-a-medida .trip-form__title{
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    body.page-viaje-a-medida .trip-form__title-sub{
        font-size: 16px;
        margin-bottom: 12px;
        color: #043553;
        font-weight: 600;
    }

    body.page-viaje-a-medida .trip-form input,
body.page-viaje-a-medida .trip-form textarea{
        width: 100%;
        height: 48px;
        font-size: 15px;
        padding: 10px 14px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .trip-form textarea{
        min-height: 80px;
        height: auto;
    }

    body.page-viaje-a-medida .accordion-checkbox{
        width: 100%;
        box-sizing: border-box;
        margin: 12px 0;
    }

    body.page-viaje-a-medida .accordion-label{
        height: auto;
        padding: 12px 14px;
        font-size: 15px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .accordion-title{
        font-size: 14px;
        gap: 8px;
    }

    body.page-viaje-a-medida .accordion-content p{
        margin-left: 10px;
        font-size: 13px;
    }

    body.page-viaje-a-medida .form-grid{
        padding: 12px 10px;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .form-grid input{
        width: 100%;
        height: 44px;
        font-size: 14px;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .radio-group{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px 8px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 16px;
    }

    body.page-viaje-a-medida .radio-group label{
        font-family: kufam;
        font-size: 14px;
        padding-left: 28px;
        line-height: 20px;
        flex: 1 1 42%;
        box-sizing: border-box;
    }

    body.page-viaje-a-medida .trip-form__button{
        width: 100%;
        max-width: 220px;
        height: 48px;
        font-size: 18px;
        margin: 10px auto 0;
        display: block;
    }

    body.page-viaje-a-medida .trip-form__back{
        font-size: 16px;
        margin: 12px 0 16px;
    }
}


/* ===================================================
   PÁGINA: nosotros.html  (body.page-nosotros)
=================================================== */
/* ===================================================
   OXIGENA VIAJES - NOSOTROS STYLESHEET
   Clean, Optimized, No Duplicates
=================================================== */

body.page-nosotros{
    --primary: #00b8f3;
    --primary-dark: #00a8e8;
    --navy: #003854;
    --white: #ffffff;
    --light-bg: #ececec;
    --team-bg: #c6e7f4;
    --font-main: "Kufam", sans-serif;
}

body.page-nosotros{
    font-family: var(--font-main);
    overflow-x: hidden;
    background-color: #ffffff;
    color: var(--navy);
}

body.page-nosotros img{
    display: block;
    max-width: 100%;
}

body.page-nosotros .container{
    width: min(92%, 1400px);
    margin: auto;
}

/* ======================
   HERO
====================== */
body.page-nosotros .hero{
    position: relative;
    height: 494px;
    overflow: hidden;
}

body.page-nosotros .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.page-nosotros .overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.25)
    );
}

body.page-nosotros .hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

body.page-nosotros .hero h1{
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
    font-family: var(--font-main);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

/* ======================
   ABOUT / NOSOTROS
====================== */
body.page-nosotros .about{
    background: #ececec;
    padding: 110px 0;
    display: flex;
    justify-content: center;
}

body.page-nosotros .about-container{
    display: flex;
    gap: 60px;
    align-items: center;
    width: min(92%, 1400px);
    margin: auto;
}

body.page-nosotros .about-title-mobile{
    display: none;
}

body.page-nosotros .about-brand{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

body.page-nosotros .about-logo{
    width: 320px;
}

body.page-nosotros .about-content{
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 750px;
}

body.page-nosotros .about-title-desktop{
    color: var(--primary);
    font-family: var(--font-main);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

body.page-nosotros .about-intro{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.35;
}

body.page-nosotros .about-points{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.page-nosotros .point{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

body.page-nosotros .point .icon{
    width: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

body.page-nosotros .point .icon img{
    width: 24px;
    height: 24px;
    object-fit: contain;
}

body.page-nosotros .point p{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

body.page-nosotros .divider{
    height: 2px;
    background: #57b8e7;
    margin: 10px 0;
}

body.page-nosotros .about-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

body.page-nosotros .about-gallery img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

/* ======================
   EXPERIENCE
====================== */
body.page-nosotros .experience{
    background: #00a8e8;
    color: #ffffff;
    padding: 85px 0 95px;
}

body.page-nosotros .experience-container{
    width: min(92%, 1330px);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

body.page-nosotros .experience-copy{
    display: flex;
    max-width: 850px;
    flex-direction: column;
    gap: 25px;
    text-align: center;
}

body.page-nosotros .experience-title{
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 10px;
}

body.page-nosotros .experience-copy p{
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
}

body.page-nosotros .experience-features{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: min(92%, 1100px);
    margin: auto;
}

body.page-nosotros .feature{
    display: flex;
    align-items: center;
    gap: 20px;
}

body.page-nosotros .feature img{
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

body.page-nosotros .feature p{
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* ======================
   TEAM
====================== */
body.page-nosotros .team{
    background: #c6e7f4;
    padding: 90px 0 110px;
}

body.page-nosotros .team-container{
    width: min(92%, 1250px);
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 50px;
    align-items: start;
}

body.page-nosotros .team-main-photo{
    width: 100%;
}

body.page-nosotros .team-main-photo img{
    width: 100%;
    border-radius: 8px;
    display: block;
}

body.page-nosotros .team-content{
    display: flex;
    flex-direction: column;
}

body.page-nosotros .team-title{
    color: var(--primary);
    font-family: var(--font-main);
    font-size: 52px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 5px;
}

body.page-nosotros .team-subtitle{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 25px;
}

body.page-nosotros .team-collage{
    position: relative;
    width: 100%;
    height: 440px;
    margin-bottom: 30px;
}

body.page-nosotros .collage-top{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    border: 8px solid #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

body.page-nosotros .collage-left{
    position: absolute;
    bottom: 20px;
    left: 10px;
    width: 48%;
    border: 8px solid #ffffff;
    transform: rotate(-5deg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

body.page-nosotros .collage-right{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 48%;
    border: 8px solid #ffffff;
    transform: rotate(6deg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

body.page-nosotros .team-description{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

/* ======================
   LA PIÑA
====================== */
body.page-nosotros .la-pina{
    background: #ffffff;
    padding: 90px 0;
}

body.page-nosotros .la-pina-container{
    width: min(92%, 1250px);
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 60px;
    align-items: center;
}

body.page-nosotros .la-pina-title{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
}

body.page-nosotros .la-pina-text{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.page-nosotros .la-pina-text p{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
}

body.page-nosotros .la-pina-photo img{
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* ===================================================
   MOBILE OPTIMIZATIONS (< 768px)
=================================================== */
@media (max-width: 768px) {
    /* HERO */
    body.page-nosotros .hero{
        height: 205px;
    }

    body.page-nosotros .hero-content{
        padding-top: 65px;
    }

    body.page-nosotros .hero h1{
        font-size: 14.5px;
        line-height: 1.25;
        letter-spacing: 0.2px;
    }

    /* ABOUT */
    body.page-nosotros .about{
        padding: 30px 18px 24px;
        background: #f0f2f5;
    }

    body.page-nosotros .about-container{
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    body.page-nosotros .about-title-mobile{
        display: block;
        color: var(--primary);
        font-family: var(--font-main);
        font-size: 14px;
        font-weight: 900;
        text-align: center;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        text-transform: uppercase;
    }

    body.page-nosotros .about-brand{
        margin-bottom: 18px;
    }

    body.page-nosotros .about-logo{
        width: 95px;
    }

    body.page-nosotros .about-content{
        gap: 0;
        max-width: 100%;
    }

    body.page-nosotros .about-title-desktop{
        display: none;
    }

    body.page-nosotros .about-intro{
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 18px;
        color: var(--navy);
    }

    body.page-nosotros .about-points{
        gap: 14px;
        margin-bottom: 0;
    }

    body.page-nosotros .point{
        gap: 12px;
        margin-bottom: 0;
    }

    body.page-nosotros .point .icon{
        width: 18px;
        margin-top: 2px;
    }

    body.page-nosotros .point .icon img{
        width: 18px;
        height: 18px;
    }

    body.page-nosotros .point p{
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--navy);
    }

    body.page-nosotros .divider{
        height: 1px;
        background: #cce6f4;
        margin: 18px 0;
    }

    body.page-nosotros .about-gallery{
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    body.page-nosotros .about-gallery img{
        border-radius: 6px;
    }

    /* EXPERIENCE */
    body.page-nosotros .experience{
        padding: 30px 18px 26px;
        background: #00a8e8;
    }

    body.page-nosotros .experience-container{
        width: 100%;
        gap: 20px;
    }

    body.page-nosotros .experience-copy{
        gap: 12px;
        max-width: 100%;
        text-align: left;
    }

    body.page-nosotros .experience-title{
        font-size: 17px;
        font-weight: 800;
        text-align: left;
        text-transform: none;
        margin-bottom: 4px;
    }

    body.page-nosotros .experience-copy p{
        font-size: 11px;
        line-height: 1.4;
        font-weight: 500;
        text-transform: none;
        text-align: left;
    }

    body.page-nosotros .experience-features{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: 10px;
    }

    body.page-nosotros .feature{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    body.page-nosotros .feature img{
        width: 36px;
        height: 36px;
    }

    body.page-nosotros .feature p{
        font-size: 10px;
        line-height: 1.25;
        font-weight: 600;
        text-align: center;
    }

    /* TEAM */
    body.page-nosotros .team{
        padding: 22px 14px 20px;
        background: #c6e7f4;
    }

    body.page-nosotros .team-container{
        grid-template-columns: 46% 54%;
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }

    body.page-nosotros .team-main-photo{
        width: 100%;
        height: 100%;
    }

    body.page-nosotros .team-main-photo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        display: block;
    }

    body.page-nosotros .team-title{
        font-size: 13.5px;
        line-height: 1.1;
        margin-bottom: 2px;
        color: var(--primary);
        font-weight: 900;
        text-transform: uppercase;
    }

    body.page-nosotros .team-subtitle{
        font-size: 11px;
        line-height: 1.15;
        margin-bottom: 8px;
        color: var(--navy);
        font-weight: 800;
        text-transform: uppercase;
    }

    body.page-nosotros .team-collage{
        position: relative;
        width: 100%;
        height: 115px;
        margin-bottom: 12px;
    }

    body.page-nosotros .collage-top{
        position: absolute;
        top: 0;
        left: 6px;
        width: 75%;
        border: 2.5px solid #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        z-index: 1;
        transform: none;
    }

    body.page-nosotros .collage-left{
        display: none;
    }

    body.page-nosotros .collage-right{
        position: absolute;
        bottom: 0;
        right: 4px;
        width: 62%;
        border: 2.5px solid #ffffff;
        transform: rotate(4deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        z-index: 2;
    }

    body.page-nosotros .team-description{
        font-size: 9.5px;
        line-height: 1.32;
        font-weight: 700;
        color: var(--navy);
    }

    /* LA PIÑA */
    body.page-nosotros .la-pina{
        padding: 30px 18px 24px;
    }

    body.page-nosotros .la-pina-container{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    body.page-nosotros .la-pina-title{
        font-size: 17px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    body.page-nosotros .la-pina-text{
        gap: 12px;
    }

    body.page-nosotros .la-pina-text p{
        font-size: 11.5px;
        line-height: 1.35;
        font-weight: 700;
    }

    body.page-nosotros .la-pina-photo{
        margin-top: 18px;
        width: 100%;
    }

    body.page-nosotros .la-pina-photo img{
        width: 100%;
        height: 175px;
        border-radius: 0;
    }
}


/* ===================================================
   PÁGINA: contacto.html  (body.page-contacto)
=================================================== */
/* HERO */
body.page-contacto .hero{
    position: relative;
    height: 494px;
    overflow: hidden;
}

body.page-contacto .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.page-contacto .overlay,
body.page-contacto .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
}

body.page-contacto .hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

body.page-contacto .hero h1{
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
    font-family: var(--font-main);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

/* CONTACTO */
body.page-contacto .contacto{
    background: #00a8e8;
    padding: 70px 0 90px;
}

body.page-contacto .contacto__container{
    width: min(92%, 1300px);
    margin: auto;
}

body.page-contacto .contacto__header{
    text-align: center;
    margin-bottom: 40px;
}

body.page-contacto .contacto__title{
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 52px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
}

body.page-contacto .contacto__subtitle{
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: 500;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.4;
}

body.page-contacto .contacto__content{
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: stretch;
}

body.page-contacto .contacto-card{
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 25px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.page-contacto .contacto-card__image{
    position: relative;
    width: 100%;
    min-height: 280px;
    overflow: hidden;
    border-radius: 8px;
}

body.page-contacto .contacto-card__image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.page-contacto .contacto-card__form{
    padding: 10px 15px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.page-contacto .contacto-card__form h3{
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 18px;
}

body.page-contacto .contacto-card__form form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-contacto .contacto-card__form input,
body.page-contacto .contacto-card__form textarea{
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 14px;
    background: #ffffff;
    color: #333333;
    outline: none;
}

body.page-contacto .contacto-card__form textarea{
    height: 110px;
    resize: none;
}

body.page-contacto .contacto-card__form button{
    height: 48px;
    border: none;
    border-radius: 6px;
    background: #00b8f3;
    color: var(--navy);
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 5px;
    transition: background 0.2s;
}

body.page-contacto .contacto-card__form button:hover{
    background: #009ad0;
}

body.page-contacto .contacto-card__social{
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

body.page-contacto .contacto-card__social a img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}

body.page-contacto .contacto-info{
    background: var(--dark-box);
    border-radius: 12px;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
}

body.page-contacto .contacto-info__icon{
    text-align: center;
    margin-bottom: 20px;
}

body.page-contacto .contacto-info__icon img{
    width: 120px;
    margin: 0 auto;
}

body.page-contacto .contacto-info__phones{
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #b4eaff;
    font-size: 16px;
}

body.page-contacto .contacto-info__phones div{
    display: flex;
    flex-direction: column;
}

body.page-contacto .contacto-info__phones strong{
    font-size: 17px;
    color: #ffffff;
    margin-bottom: 3px;
}

body.page-contacto .contacto-info hr{
    margin: 20px 0;
    border: 0;
    height: 1px;
    background: rgba(180, 234, 255, 0.3);
}

body.page-contacto .contacto-info__footer{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-contacto .contacto-info__footer div{
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-contacto .contacto-info__footer img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}

body.page-contacto .contacto-info__footer a{
    color: #b4eaff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

body.page-contacto .contacto-mobile-info{
    display: none;
}

/* MAPA */
body.page-contacto .branches{
    background: #ffffff;
    padding: 40px 0 0;
    text-align: center;
}

body.page-contacto .branches-tabs{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

body.page-contacto .branches-tabs h3{
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 900;
    color: var(--navy);
    margin-right: 12px;
    text-transform: uppercase;
}

body.page-contacto .sucursal-btn{
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    padding: 8px 24px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

body.page-contacto .sucursal-btn:hover{
    opacity: 0.9;
}

body.page-contacto .sucursal-btn.active{
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px currentColor;
}

body.page-contacto .sucursal-btn[data-city="madrid"]{
    background: #ff5a5f;
}

body.page-contacto .sucursal-btn[data-city="murcia"]{
    background: #7b61ff;
}

body.page-contacto .sucursal-btn[data-city="alicante"]{
    background: #007dae;
}

body.page-contacto .contact-map{
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
}

body.page-contacto .map-wrapper{
    position: relative;
    width: 100%;
    height: 460px;
    background: #e5e3df;
}

body.page-contacto .map-frame{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

body.page-contacto .map-pin{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -96%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

/* MODAL */
body.page-contacto .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}

body.page-contacto .modal-backdrop.active{
    display: flex;
}

body.page-contacto .modal-dialog{
    position: relative;
    max-width: 540px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}

body.page-contacto .modal-close{
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 44, 66, 0.08);
    color: #002c42;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

body.page-contacto .modal-close:hover{
    background: rgba(0, 44, 66, 0.18);
    transform: scale(1.08);
}

body.page-contacto .modal-header{
    background: #ffffff;
    padding: 28px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-contacto .modal-header__logo{
    width: 165px;
    max-width: 100%;
    height: auto;
    display: block;
}

body.page-contacto .modal-header__tagline{
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 10px 0 0;
}

body.page-contacto .modal-banner{
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 297;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0081a7;
}

body.page-contacto .modal-banner__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-contacto .modal-banner__title{
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

body.page-contacto .modal-footer{
    background: #006791;
    padding: 24px 24px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

body.page-contacto .modal-footer__icon svg{
    display: block;
    width: 44px;
    height: 38px;
}

body.page-contacto .modal-footer__text{
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: 400;
    color: #00b8f3;
    line-height: 1.35;
    text-transform: uppercase;
    margin: 0;
    text-align: left;
}

@media (max-width: 768px) {
    body.page-contacto .hero{
        height: 205px;
    }

    body.page-contacto .hero-content{
        padding-top: 65px;
    }

    body.page-contacto .hero h1{
        font-size: 17px;
        line-height: 1.25;
    }

    body.page-contacto .contacto{
        padding: 25px 14px 28px;
    }

    body.page-contacto .contacto__container{
        width: 100%;
    }

    body.page-contacto .contacto__header{
        margin-bottom: 16px;
    }

    body.page-contacto .contacto__title{
        font-size: 28px;
        margin-bottom: 8px;
    }

    body.page-contacto .contacto__subtitle{
        font-size: 15px;
        line-height: 1.35;
        max-width: 320px;
    }

    body.page-contacto .contacto__content{
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.page-contacto .contacto-card{
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        border-radius: 10px;
    }

    body.page-contacto .contacto-card__image{
        min-height: 160px;
        border-radius: 6px;
    }

    body.page-contacto .contacto-card__form{
        padding: 0 2px;
        gap: 6px;
    }

    body.page-contacto .contacto-card__form h3{
        text-align: center;
        font-size: 16px;
        margin-bottom: 4px;
    }

    body.page-contacto .contacto-card__form input,
body.page-contacto .contacto-card__form textarea{
        padding: 10px 12px;
        font-size: 14px;
        height: auto;
    }

    body.page-contacto .contacto-card__form textarea{
        height: 80px;
    }

    body.page-contacto .contacto-card__form button{
        height: 40px;
        font-size: 15px;
    }

    body.page-contacto .contacto-card__social{
        margin-top: 6px;
        gap: 16px;
    }

    body.page-contacto .contacto-card__social a img{
        width: 28px;
        height: 28px;
    }

    body.page-contacto .contacto-info{
        display: none;
    }

    body.page-contacto .contacto-mobile-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--dark-box);
        border-radius: 8px;
        padding: 12px 14px;
        width: 100%;
        color: #ffffff;
        margin-top: 10px;
    }

    body.page-contacto .contacto-mobile-info__left{
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body.page-contacto .contacto-mobile-info__icon img{
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    body.page-contacto .contacto-mobile-info__text h3{
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 2px;
    }

    body.page-contacto .contacto-mobile-info__text p{
        font-size: 12px;
        color: #b4eaff;
        line-height: 1.2;
    }

    body.page-contacto .contacto-mobile-info__divider{
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 8px;
    }

    body.page-contacto .contacto-mobile-info__right{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    body.page-contacto .contacto-mobile-info__right a{
        display: flex;
        align-items: center;
        gap: 6px;
        color: #ffffff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-main);
    }

    body.page-contacto .contacto-mobile-info__right a img{
        width: 13px;
        height: 13px;
        object-fit: contain;
    }

    body.page-contacto .branches{
        padding: 18px 0 0;
    }

    body.page-contacto .branches-tabs{
        padding: 0 10px;
        gap: 6px;
        margin-bottom: 10px;
    }

    body.page-contacto .branches-tabs h3{
        font-size: 12px;
        margin-right: 4px;
    }

    body.page-contacto .sucursal-btn{
        font-size: 15px;
        padding: 3px 9px;
        border-radius: 5px;
    }

    body.page-contacto .map-wrapper{
        height: 330px;
    }

    body.page-contacto .map-pin svg{
        width: 42px;
        height: 56px;
    }

    body.page-contacto .modal-dialog{
        max-width: 92%;
        border-radius: 14px;
    }

    body.page-contacto .modal-close{
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    body.page-contacto .modal-header{
        padding: 18px 14px 14px;
    }

    body.page-contacto .modal-header__logo{
        width: 125px;
    }

    body.page-contacto .modal-banner__title{
        font-size: 20px;
    }

    body.page-contacto .modal-footer{
        padding: 16px 14px 18px;
        gap: 12px;
    }

    body.page-contacto .modal-footer__icon svg{
        width: 32px;
        height: 28px;
    }

    body.page-contacto .modal-footer__text{
        font-size: 15px;
    }
}

/* ===================================================
   PÁGINA: textos-legales.html  (body.page-textos-legales)
=================================================== */

body.page-textos-legales .legal-hero {
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 140px 20px 48px;
    background: linear-gradient(180deg, #007dae 0%, #00a8e8 100%);
    text-align: center;
}

body.page-textos-legales .legal-hero h1 {
    color: #ffffff;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

body.page-textos-legales .legal-hero p {
    margin-top: 10px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
}

body.page-textos-legales .legal-page {
    width: min(1100px, 92%);
    margin: 0 auto;
    padding: 40px 0 70px;
}

body.page-textos-legales .legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

body.page-textos-legales .legal-nav a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 8px;
    background: #c6e7f4;
    color: #003854;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

body.page-textos-legales .legal-nav a:hover,
body.page-textos-legales .legal-block:target ~ .legal-page .legal-nav a {
    background: #00b8f3;
}

body.page-textos-legales .legal-block {
    scroll-margin-top: 24px;
    background: #f4f8fa;
    border-radius: 12px;
    padding: 32px 28px;
    margin-bottom: 22px;
}

body.page-textos-legales .legal-block:target {
    outline: 2px solid #00b8f3;
    background: #e8f6fc;
}

body.page-textos-legales .legal-block h2 {
    color: #00b8f3;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 16px;
}

body.page-textos-legales .legal-block h3 {
    color: #003854;
    font-size: 18px;
    font-weight: 800;
    margin: 20px 0 8px;
}

body.page-textos-legales .legal-block p {
    color: #003854;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 12px;
}

body.page-textos-legales .legal-block a {
    color: #007dae;
    font-weight: 700;
}

/* Checkout: resumen + TPV + resultado */
:is(body.page-formulario-finalizar, body.page-formulario-pagos) .checkout-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #003854;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .checkout-edit {
    display: inline-block;
    margin-top: 8px;
    color: #0078AE;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-personales h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-personales h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-personales p,
:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-pago {
    font-size: 15px;
    line-height: 1.4;
    white-space: pre-line;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .valorpagar {
    font-size: 25px;
    font-weight: 600;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-titular {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

:is(body.page-formulario-finalizar, body.page-formulario-pagos) .datos-resumen-viaje {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
    margin-left: 12px;
}

body.page-formulario-finalizar .checkout-pay {
    border: 0;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #003854;
}

body.page-formulario-finalizar .checkout-pay legend {
    font-size: 20px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 4px;
}

body.page-formulario-finalizar .checkout-pay__hint {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 4px;
}

body.page-formulario-finalizar .payment-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #d7e6ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

body.page-formulario-finalizar .payment-choice:has(input:checked) {
    border-color: #0078AE;
    background: #f4fbfe;
}

body.page-formulario-finalizar .payment-choice input {
    margin-top: 4px;
    accent-color: #0078AE;
    width: auto;
    height: auto;
}

body.page-formulario-finalizar .payment-choice strong {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

body.page-formulario-finalizar .payment-choice table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

body.page-formulario-finalizar .payment-choice td {
    padding: 4px 0;
}

body.page-formulario-finalizar .payment-choice td:last-child {
    text-align: right;
    font-weight: 600;
}

body.page-formulario-finalizar .payment-choice tr.total td {
    padding-top: 8px;
    font-weight: 700;
    border-top: 1px solid #d7e6ee;
}

body.page-formulario-pagos .checkout-status {
    padding: 18px 16px;
    border-radius: 12px;
    margin-bottom: 8px;
}

body.page-formulario-pagos .checkout-status--ok {
    background: #e8f8ef;
    color: #0b5d2e;
}

body.page-formulario-pagos .checkout-status--error {
    background: #fdecec;
    color: #8a1f1f;
}

body.page-formulario-pagos .checkout-status__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.page-formulario-pagos .checkout-status h2 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 8px;
}

body.page-formulario-pagos .checkout-status .trip-form__button {
    margin-top: 12px;
}

body.page-formulario-tpv {
    min-height: 100vh;
    margin: 0;
    background: #0b3a52;
    font-family: Kufam, sans-serif;
    color: #003854;
}

body.page-formulario-tpv .tpv {
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 16px 48px;
}

body.page-formulario-tpv .tpv__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 20px;
    font-size: 14px;
}

body.page-formulario-tpv .tpv__bar span {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.page-formulario-tpv .tpv__card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

body.page-formulario-tpv .tpv__card h1 {
    font-size: 26px;
    margin: 0 0 8px;
}

body.page-formulario-tpv .tpv__merchant {
    margin: 0 0 20px;
    font-size: 14px;
    color: #3d6174;
}

body.page-formulario-tpv .tpv__data {
    margin: 0 0 20px;
    display: grid;
    gap: 12px;
}

body.page-formulario-tpv .tpv__data div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4eef3;
}

body.page-formulario-tpv .tpv__data dt {
    font-size: 13px;
    color: #3d6174;
}

body.page-formulario-tpv .tpv__data dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

body.page-formulario-tpv .tpv__hint {
    font-size: 13px;
    line-height: 1.45;
    color: #3d6174;
    margin: 0 0 22px;
}

body.page-formulario-tpv .tpv__actions {
    display: flex;
    gap: 12px;
}

body.page-formulario-tpv .tpv__actions a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 14px 12px;
    border-radius: 10px;
    font-weight: 700;
}

body.page-formulario-tpv .tpv__cancel {
    background: #eef3f6;
    color: #003854;
}

body.page-formulario-tpv .tpv__accept {
    background: #0078AE;
    color: #fff;
}

@media (max-width: 768px) {
    body.page-formulario-finalizar .payment-choice {
        padding: 14px 12px;
    }

    body.page-formulario-tpv .tpv__actions {
        flex-direction: column;
    }
}

.trip-form__button,
a.trip-form__button,
button.trip-form__button,
:is(
    body.page-formulario-datos,
    body.page-formulario-finalizar,
    body.page-formulario-pagos,
    body.page-formulario-solicita,
    body.page-viaje-a-medida
) :is(.trip-form__button, a.trip-form__button, button.trip-form__button) {
    min-width: 410px;
    width: auto;
    height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    background: var(--color-primary, #0078AE);
    color: #fff;
    font-family: Kufam, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.25s;
    box-sizing: border-box;
}

:is(
    body.page-formulario-datos,
    body.page-formulario-finalizar,
    body.page-formulario-pagos,
    body.page-formulario-solicita,
    body.page-viaje-a-medida
) :is(.trip-form__button, a.trip-form__button, button.trip-form__button):hover {
    background: #006392;
    color: #fff;
}

@media (max-width: 768px) {
    :is(
        body.page-formulario-datos,
        body.page-formulario-finalizar,
        body.page-formulario-pagos,
        body.page-formulario-solicita,
        body.page-viaje-a-medida
    ) :is(.trip-form__button, a.trip-form__button, button.trip-form__button) {
        min-width: 0;
        width: 100%;
        max-width: 410px;
        height: 60px;
        font-size: 20px;
    }
}

body.page-gracias .content-main{
    padding-bottom: 80px;
}

body.page-gracias .thanks-card{
    max-width: 720px;
    margin: 40px auto;
    align-items: center;
    text-align: center;
    gap: 22px;
}

body.page-gracias .thanks-card__logo{
    width: 160px;
}

body.page-gracias .thanks-card__banner{
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
}

body.page-gracias .thanks-card__text{
    color: #333;
    font-family: Kufam, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    max-width: 520px;
}

@media (max-width: 768px) {
    body.page-gracias .thanks-card{
        margin: 20px auto;
        padding: 24px 18px 28px;
    }

    body.page-gracias .thanks-card__text{
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    body.page-textos-legales .legal-hero {
        min-height: 200px;
        padding: 100px 16px 28px;
    }

    body.page-textos-legales .legal-block {
        padding: 22px 16px;
    }

    body.page-textos-legales .legal-nav a {
        font-size: 13px;
        padding: 8px 12px;
    }
}


/* Landings de catálogo distintas de esquí: mismo layout, fondo propio */
body.page-fin-de-curso.page-catalogo .trip-hero {
    background-image: url("../assets/img/fin-de-curso/seccion-cabecera.webp");
}
body.page-aventura.page-catalogo .trip-hero {
    background-image: url("../assets/img/aventura/fondo-aventura.webp");
}
body.page-inmersion-linguistica.page-catalogo .trip-hero {
    background-image: url("../assets/img/inmersion-linguistica/fondo-cabecera.webp");
}
body.page-parques-tematicos.page-catalogo .trip-hero {
    background-image: url("../assets/img/parques-tematicos/fondo-cabecera.webp");
}
body.page-fin-de-curso.page-catalogo .hero-character-box,
body.page-aventura.page-catalogo .hero-character-box,
body.page-inmersion-linguistica.page-catalogo .hero-character-box,
body.page-parques-tematicos.page-catalogo .hero-character-box {
    display: none;
}

:is(body.page-esqui, body.page-catalogo) .experiencia-texto h3 {
    color: var(--destinos-titulo-color, #fff);
}

body.page-formulario-tpv .tpv__actions button {
    flex: 1;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

body.page-formulario-finalizar .check-m-pago {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

body.page-formulario-tpv .tpv__actions button {
    text-align: center;
    padding: 14px 12px;
    border-radius: 10px;
    font-weight: 700;
}

/* Formulario de código y listado profesor (MI VIAJE) */
body.page-mi-viaje .mi-viaje-codigo {
    max-width: 640px;
    width: min(640px, 90%);
    margin: 8px auto 0;
    padding: 0 0 100px;
    box-sizing: border-box;
    font-family: Kufam, sans-serif;
}

body.page-mi-viaje .mi-viaje-codigo__intro {
    text-align: center;
    margin: 0 0 28px;
    color: #003854;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
}

body.page-mi-viaje .mi-viaje-codigo__intro strong {
    font-weight: 700;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 34px 34px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__group {
    margin-bottom: 18px;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__group label {
    display: block;
    margin-bottom: 10px;
    color: #003854;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__group input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 18px;
    color: #003854;
    font-family: Kufam, sans-serif;
    font-size: 18px;
    font-weight: 500;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__group input::placeholder {
    color: #7a93a3;
    font-weight: 400;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__group input:focus {
    box-shadow: 0 0 0 2px #1cb8ee;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__button,
body.page-mi-viaje .mi-viaje-codigo button.trip-form__button,
body.page-mi-viaje .mi-viaje-codigo a.trip-form__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 60px;
    margin: 10px 0 0;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #0078ae;
    color: #fff;
    font-family: Kufam, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

body.page-mi-viaje .mi-viaje-codigo .trip-form__button:hover,
body.page-mi-viaje .mi-viaje-codigo button.trip-form__button:hover {
    background: #b4eaff;
    color: #003854;
}

body.page-mi-viaje .mi-viaje-profesor {
    max-width: 1100px;
    width: min(1100px, 92%);
    margin: 8px auto 80px;
    font-family: Kufam, sans-serif;
    color: #003654;
}

body.page-mi-viaje .mi-viaje-profesor__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 22px;
}

body.page-mi-viaje .mi-viaje-profesor__destino {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
}

body.page-mi-viaje .mi-viaje-profesor__resumen {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

body.page-mi-viaje .mi-viaje-profesor__csv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;
    border-radius: 8px;
    background: #0078ae;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

body.page-mi-viaje .mi-viaje-profesor__csv:hover {
    background: #b4eaff;
    color: #003654;
}

body.page-mi-viaje .mi-viaje-profesor__tabla-wrap {
    overflow-x: auto;
    background: #f2f2f2;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

body.page-mi-viaje .mi-viaje-profesor__tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

body.page-mi-viaje .mi-viaje-profesor__tabla th,
body.page-mi-viaje .mi-viaje-profesor__tabla td {
    padding: 14px 16px;
    text-align: left;
    font-size: 15px;
}

body.page-mi-viaje .mi-viaje-profesor__tabla thead th {
    background: #003654;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

body.page-mi-viaje .mi-viaje-profesor__tabla tbody tr:nth-child(even) {
    background: #e8f6fd;
}

body.page-mi-viaje .mi-viaje-profesor__vacio {
    text-align: center;
    color: #5a7383;
    padding: 28px 16px;
}

@media (max-width: 768px) {
    body.page-mi-viaje .mi-viaje-codigo {
        width: 90%;
        margin-top: 0;
        padding-bottom: 72px;
    }

    body.page-mi-viaje .mi-viaje-codigo__intro {
        font-size: 16px;
        margin-bottom: 20px;
    }

    body.page-mi-viaje .mi-viaje-codigo .trip-form {
        padding: 22px 18px 26px;
    }

    body.page-mi-viaje .mi-viaje-codigo .trip-form__group label {
        font-size: 16px;
    }

    body.page-mi-viaje .mi-viaje-codigo .trip-form__group input {
        padding: 14px 16px;
        font-size: 16px;
    }

    body.page-mi-viaje .mi-viaje-codigo .trip-form__button,
    body.page-mi-viaje .mi-viaje-codigo button.trip-form__button {
        height: 56px;
        font-size: 18px;
    }
}