* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Jost", "Marcellus", sans-serif;
    list-style: none;
    text-decoration: none;
    user-select: none;
    line-height: 0;
    color: var(--negro);
}


@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus&display=swap');

@font-face {
    font-family: "Jost";
    src: url('/fuentes/Jost/Jost-Regular.woff2') format('woff2'),
        url('/fuentes/Jost/Jost-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('/fuentes/Jost/Jost-Bold.woff2') format('woff2'),
        url('/fuentes/Jost/Jost-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marcellus";
    src: url('/fuentes/Marcellus/Marcellus-Regular.woff2') format('woff2'),
        url('/fuentes/Marcellus/Marcellus-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --negro: #000000;
    --blanco: #fff;
    --gris: #525252;
    --gris-claro: #A7A7A7;
    --gris-azulado: #545358;
    --amarillo-H: #FDCD00;
    --amarillo: #FDDB47;
    --azul: #002250;
    --concreto: #F5F5F7;
}


/* ---- Letras ---- */

h1,
h2,
h3,
h4 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

h1 {
    font-size: 3.5rem;
}

.h1-pequeno {
    font-size: 2.5rem;
    margin: 0;
}

.caja-titulo .h1-pequeno {
    width: 100%;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.7rem;
    line-height: 1.1;
}

h4 {
    font-size: 1.25rem;
}

p,
b,
.boton,
.boton-1 {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.5;
}

p {
    color: var(--gris);
    font-weight: 400;
}

b {
    font-weight: 700;
}


/* ---- Barra Nav ----  */

nav {
    display: flex;
    height: 60px;
    margin: auto;
    padding: 0 20px;
    width: 100%;
    align-items: center;
    z-index: 99;
    position: fixed;
    font-family: "Jost", sans-serif;

    background-color: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

nav a {
    color: var(--gris-claro);
}

.nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 1.8rem;
    align-items: center;
}


.desp {
    position: relative;
    cursor: pointer;
}


.desp:hover .container-desp {
    display: flex;
    transition: all 1s ease-in;
}

.desp:hover .flecha-desp {
    transform: rotate(-180deg);
}

.item-desp {
    /* font-weight: 600; */
    transition: all 0.3s ease;
}

.item-desp.active .flecha-desp {
    transition: transform 0.3s ease;
}

.container-desp {
    position: absolute;
    left: -30px;
    display: none;
    flex-direction: column;
    border-radius: 10px;
    padding: 10px 10px;
    z-index: 100;
    min-width: 140px;
    text-align: left;
    min-width: 200px;
    white-space: nowrap;
    justify-content: space-around;
    align-items: center;


}

.opciones-desp {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    min-width: 150px;
    background-color: rgba(30, 30, 30, 0.92);
    min-height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.opcion-desp {
    padding: 10px 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.opcion-desp:hover {
    background-color: var(--negro);
}



.opcion-desp {
    padding: 20px 5px;
    width: 100%;
    border-radius: 5px;
    transition: all 0.3s ease;

    a {
        text-align: center;

    }
}

.opcion-desp:hover {
    background-color: var(--negro);

    a {
        color: var(--amarillo);
    }
}

.flecha-desp {
    display: inline-block;
    width: 15px;
    height: 13px;
    margin-left: 8px;
    clip-path: polygon(49% 78%, 100% 30%, 100% 51%, 49% 100%, 0 54%, 0 31%);
    background-color: var(--gris-claro)
}

.desp:hover .flecha-desp {
    transform: rotate(-180deg);
}

.activo,
ul>a:hover,
li>a:hover {
    color: var(--amarillo-H);
    transition: 0.2s ease-in;
}

.activo {
    font-weight: bold;
}

.burger,
.menu-check {
    display: none;
}

/* ---- Body ----  */

.boton,
.boton-1,
.boton-2,
.wtrvl-checkout_button,
.boton-verde-wetravel,
.whatsapp {
    background-color: var(--amarillo-H);
    padding: 10px 30px;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 1px;
    border-radius: 100px;
    margin: 2.5rem auto;
    line-height: normal;
    display: inline-block;
    cursor: pointer;
}

.wtrvl_checkout_button {
    -webkit-font-smoothing: antialiased;
    text-transform: capitalize;
}

.separacion-boton {
    margin: 2.5rem auto auto auto !important;
}

.boton-1 {
    border: 2px solid var(--amarillo);
    background-color: transparent;
}

.boton-1:hover {
    transition: 0.5s;
    background-color: var(--amarillo-H);
}

.boton:hover {
    transition: 0.5s;
    color: #343644;
    background-color: var(--amarillo);
}

button.boton {
    border: 2px solid #000;
    margin: 0 auto;
}

.boton-2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blanco);
    background-color: var(--negro);
    white-space: nowrap;
}

.boton-2:hover {
    transition: 0.5s;
    background-color: var(--gris-azulado);
}

.whatsapp {
    transition: 0.5s;
    margin: 10px auto 0;
    background-color: #25D366;
}

.whatsapp:hover {
    background-color: #2cb75f;
}

.boton-verde-wetravel {
    background-color: #33ae3f;
    color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 0px;
}

/* ---- Contenedores y cajas ----  */

.container,
.container-redondeado,
.container-redondeado-2,
.container-imagenes {
    max-width: 1920px;
    margin: 0 auto;
}

.container-imagenes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    gap: 40px;

    img {
        border-radius: 20px;
        min-width: 30vw;
    }
}

.container-redondeado,
.container-redondeado-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    padding-left: 10%;
    padding-right: 10%;
}

.container-redondeado-2 {
    padding-left: 5%;
    padding-right: 5%;
    container-type: inline-size;
}


.caja-redondeada,
.caja-redondeada-2,
.caja-redondeada-3,
.caja-redondeada-4 {
    width: auto;
    height: auto;
    align-items: center;
    max-width: 336px;
    border-radius: 20px;
    background-color: var(--concreto);
    box-shadow: 3px 3px 9px 2px rgba(97, 97, 97, 0.2);
    -webkit-box-shadow: 3px 3px 9px 2px rgba(97, 97, 97, 0.2);
    -moz-box-shadow: 3px 3px 9px 2px rgba(97, 97, 97, 0.2);
}

.caja-redondeada-2 {
    display: block;
    align-items: flex-start;
    max-width: 550px;
    width: 100%;
    padding: 50px;
    text-align: left;

    .contenido-caja-redondeada {
        padding: 0;

    }
}

img.caja-redondeada-2 {
    padding: 0;
}

.caja-redondeada img:not([src$=".svg"]),
.caja-redondeada-3 img {
    border-radius: 20px 20px 0 0;
}

.contenido-caja-redondeada {
    display: flex;
    flex-direction: column;
    padding: 0 1.8rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
}

.contenido-caja-redondeada>p>a {
    line-height: 2.4;
}

.caja-redondeada-2 .contenido-caja-redondeada {
    display: block;
    padding: 0 2rem;
}

.caja-redondeada-4 {
    display: block;
    max-width: 550px;
    width: 100%;
    padding: 50px;
    text-align: center;

    .contenido-caja-redondeada {
        padding: 0;
    }
}

@container (min-width: 1180px) {
    .caja-redondeada-4 {
        max-width: 1180px;
    }
}

.caja-titulo {
    text-align: center;
}

.caja-titulo h1 {
    width: 85%;
    margin: auto;
}

.caja-titulo p {
    max-width: 640px;
    margin: 0 auto;
}

.caja-img {
    flex: 1;
    text-align: center;
    margin-top: 80px;

    img {
        border-radius: 25px;
    }
}

.caja-fotos {
    flex: 1;
    text-align: center;
}

.caja-flex {
    display: flex !important;
    flex-direction: row;
    gap: 5px;
}

.caja-doble {
    display: flex;
    flex-direction: column;
}

.texto-descripcion {
    color: var(--gris-claro);
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1;
}

.caja-formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--amarillo);
    text-align: center;
    padding: 10rem 0;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 0 auto;
}

input,
textarea {
    background-color: var(--blanco);
    padding: 25px;
    min-width: 574px;
    border: none;
    border-radius: 10px;
    line-height: 1;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

textarea {
    resize: vertical;
    height: 150px;
}

.caja-terminos {
    padding-left: 5%;
    padding-right: 5%;
}


/* ---- Footer ---- */

.caja-footer {
    display: flex;
    justify-content: space-around;
    padding: 5rem 0;
    border-top: 2px solid var(--gris);
    background-color: var(--amarillo);
}

.creditos {
    text-align: center;
    background-color: var(--negro);

    p {
        font-weight: 300;
    }
}

.btn-whatsapp {
    display: block;
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 98;
}


/* ---- Recursos ---- */

.flecha,
.flecha-pequena {
    width: 22px;
    height: 15px;
    margin-left: 12px;
    background-color: var(--negro);
    display: inline-block;
    clip-path: polygon(58.287% 98.138%, 58.287% 98.138%, 58.06% 97.816%, 57.854% 97.474%, 57.671% 97.114%, 57.509% 96.737%, 57.372% 96.345%, 57.258% 95.941%, 57.168% 95.525%, 57.103% 95.1%, 57.064% 94.668%, 57.05% 94.231%, 57.05% 94.231%, 57.064% 93.793%, 57.103% 93.361%, 57.168% 92.937%, 57.258% 92.521%, 57.372% 92.117%, 57.509% 91.725%, 57.671% 91.348%, 57.854% 90.988%, 58.06% 90.646%, 58.287% 90.324%, 84.894% 55.529%, 4.902% 55.529%, 4.902% 55.529%, 4.567% 55.512%, 4.236% 55.46%, 3.911% 55.375%, 3.593% 55.258%, 3.284% 55.108%, 2.984% 54.928%, 2.696% 54.717%, 2.42% 54.476%, 2.158% 54.207%, 1.912% 53.91%, 1.912% 53.91%, 1.685% 53.588%, 1.479% 53.246%, 1.295% 52.885%, 1.134% 52.508%, 0.996% 52.116%, 0.881% 51.711%, 0.792% 51.295%, 0.727% 50.87%, 0.687% 50.438%, 0.674% 50%, 0.674% 50%, 0.687% 49.562%, 0.727% 49.13%, 0.792% 48.705%, 0.881% 48.289%, 0.996% 47.884%, 1.134% 47.493%, 1.295% 47.115%, 1.479% 46.755%, 1.685% 46.413%, 1.912% 46.091%, 1.912% 46.091%, 2.158% 45.793%, 2.42% 45.524%, 2.696% 45.284%, 2.984% 45.073%, 3.284% 44.892%, 3.593% 44.743%, 3.911% 44.625%, 4.236% 44.54%, 4.567% 44.489%, 4.902% 44.471%, 84.894% 44.471%, 58.287% 9.676%, 58.287% 9.676%, 58.165% 9.522%, 58.047% 9.361%, 57.936% 9.194%, 57.829% 9.021%, 57.728% 8.844%, 57.632% 8.661%, 57.542% 8.473%, 57.458% 8.28%, 57.379% 8.083%, 57.307% 7.882%, 57.307% 7.882%, 57.241% 7.677%, 57.181% 7.469%, 57.128% 7.258%, 57.081% 7.045%, 57.041% 6.829%, 57.008% 6.612%, 56.981% 6.393%, 56.961% 6.173%, 56.948% 5.951%, 56.942% 5.729%, 56.942% 5.729%, 56.942% 5.507%, 56.949% 5.285%, 56.963% 5.063%, 56.984% 4.843%, 57.012% 4.625%, 57.046% 4.408%, 57.087% 4.192%, 57.134% 3.979%, 57.188% 3.769%, 57.249% 3.561%, 57.249% 3.561%, 57.316% 3.356%, 57.389% 3.156%, 57.468% 2.959%, 57.553% 2.767%, 57.643% 2.58%, 57.74% 2.398%, 57.842% 2.221%, 57.949% 2.049%, 58.062% 1.882%, 58.179% 1.722%, 58.179% 1.722%, 58.302% 1.568%, 58.429% 1.421%, 58.561% 1.28%, 58.696% 1.147%, 58.836% 1.021%, 58.979% 0.902%, 59.126% 0.791%, 59.276% 0.688%, 59.429% 0.593%, 59.586% 0.505%, 59.586% 0.505%, 59.745% 0.426%, 59.906% 0.355%, 60.069% 0.293%, 60.233% 0.24%, 60.399% 0.195%, 60.566% 0.159%, 60.735% 0.132%, 60.904% 0.114%, 61.073% 0.104%, 61.244% 0.104%, 61.244% 0.104%, 61.414% 0.112%, 61.583% 0.129%, 61.751% 0.155%, 61.919% 0.19%, 62.085% 0.234%, 62.25% 0.286%, 62.413% 0.347%, 62.574% 0.417%, 62.733% 0.495%, 62.89% 0.581%, 62.89% 0.581%, 63.044% 0.676%, 63.194% 0.778%, 63.342% 0.889%, 63.485% 1.006%, 63.625% 1.131%, 63.761% 1.264%, 63.893% 1.403%, 64.02% 1.55%, 64.144% 1.703%, 64.262% 1.862%, 98.086% 46.093%, 98.086% 46.093%, 98.313% 46.415%, 98.518% 46.757%, 98.702% 47.117%, 98.863% 47.494%, 99.001% 47.886%, 99.115% 48.29%, 99.205% 48.706%, 99.269% 49.131%, 99.309% 49.563%, 99.322% 50%, 99.322% 50%, 99.309% 50.437%, 99.269% 50.87%, 99.205% 51.294%, 99.115% 51.71%, 99.001% 52.114%, 98.863% 52.506%, 98.702% 52.883%, 98.518% 53.243%, 98.313% 53.585%, 98.086% 53.907%, 64.262% 98.138%, 64.262% 98.138%, 64.016% 98.435%, 63.755% 98.704%, 63.479% 98.944%, 63.191% 99.155%, 62.891% 99.335%, 62.582% 99.484%, 62.264% 99.601%, 61.939% 99.686%, 61.609% 99.738%, 61.274% 99.755%, 61.274% 99.755%, 60.94% 99.738%, 60.61% 99.686%, 60.285% 99.601%, 59.967% 99.484%, 59.658% 99.335%, 59.358% 99.155%, 59.07% 98.944%, 58.794% 98.704%, 58.533% 98.435%, 58.287% 98.138%)
}

.flecha-pequena {
    width: 11px;
    height: 9px;
}

.boton-verde-wetravel>.flecha {
    background-color: #fff;
}

.cargando {
    display: none;
    width: 15px;
    height: 15px;
    border: 2.5px solid #000;
    border-radius: 100%;
    border-top-color: transparent;
    animation: rotacion 2s linear infinite;
    vertical-align: middle;
    margin-left: 10px;
}

@keyframes rotacion {
    100% {
        transform: rotate(360deg);
    }
}

.envio-formulario .flecha {
    display: none;
}

.envio-formulario .cargando {
    display: inline-block;
}

.XXL {
    padding-bottom: 10rem;
}

.XL {
    padding-top: 7.5rem;
}

.XL-b {
    padding-bottom: 7.5rem;
}

.L {
    padding-top: 5rem;
}

.M {
    padding-top: 2.5rem;
}

.S {
    padding-top: 1.25rem;
}

.XS {
    padding-top: 0.625rem;
}

.separacion-superior {
    padding-top: 60px;
    background-color: var(--negro) !important;
}

.separacion-inferior {
    padding-bottom: 40px;
}

.separacion,
.separacion-2 {
    display: flex;
    gap: 70px;
}

.separacion-2 {
    gap: 30px;
}

hr {
    margin: 2.5rem 0;
}

#logo {
    padding-right: 5%;
}

.txt-centrado {
    text-align: center;
}

.txt-izquierda {
    text-align: left;
}

.blanco {
    color: var(--blanco);
}

.concreto {
    color: var(--concreto);
}

.gris {
    color: var(--gris-claro);
}

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

.fondo-negro {
    background-color: var(--negro);
    color: var(--blanco);
}

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

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

.fondo-gris {
    background-color: var(--gris-azulado);
}

.comilla-abierta {
    align-self: flex-start;
}

.comilla-cerrada {
    align-self: flex-end;
}

body.resenas .contenido-caja-redondeada {
    height: 100%;
}

.mostrarArriba {
    animation: mostrarArriba 1s;
}

.animado {
    opacity: 0;
    transition: all 1s;
}

@keyframes mostrarArriba {
    0% {
        transform: translateY(60px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---- Media Queries ---- */

@media (max-width:1160px) {
    nav {
        justify-content: space-between;
    }

    .nav-links {
        width: 104%;
        height: 100vh;
        min-height: 100%;
        position: fixed;
        padding: 28px 80px 140px 80px;
        top: 58px;
        left: 102%;
        flex-direction: column;
        align-items: center;
        transition: transform 1s ease;
        background-color: rgba(30, 30, 30, 0.92);
    }

    .burger {
        display: block;
        position: relative;
        cursor: pointer;
    }

    .burger span {
        padding: 1px 20px;
        background: var(--amarillo);
        margin: 7px 0px;
        display: block;
        border-radius: 50px;
        transition: all 0.5s ease;
    }

    .nav-open {
        transform: translateX(-100%);
    }

    ul {
        transition: all 0.5s;
        padding-top: 25px;
    }

    .toggle .line1 {
        transform: rotateZ(45deg) translateY(300%);
        background: var(--amarillo);
    }

    .toggle .line2 {
        opacity: 0;
    }

    .toggle .line3 {
        transform: rotateZ(-45deg) translateY(-300%);
        background: var(--amarillo);
    }

    .mostrar-desp {
        display: flex !important;
    }

    .container-desp {
        position: relative;
        margin: 5px auto;
        top: 10px;
        display: none;
        width: 100%;
        padding: 0;
        gap: 0;
        background-color: transparent;
        height: auto;
    }

    .opciones-desp {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .item-desp {
        font-weight: 600;
        width: 100%;
        padding: 0;
        display: block;
        text-align: center;
    }

    .item-desp .flecha-desp {
        background-color: var(--gris-claro)
    }


    .desp:hover .container-desp {
        display: none;
    }

    .mostrar-desp+.flecha-desp {
        transition: transform 0.3s ease;
    }

    .container-redondeado {
        flex-direction: column;
        gap: 60px;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .container-redondeado-2 {
        flex-direction: row;
        gap: 40px;
        padding-left: 0;
        padding-right: 0;
    }

    .caja-redondeada-2,
    .caja-redondeada-4 {
        max-width: 440px;
    }

    @container (min-width: 920px) {
        .caja-redondeada-4 {
            max-width: 920px;
        }
        
    }

    .caja-redondeada {
        display: flex;
        width: 80%;
        min-width: 80%;
        justify-content: space-between;
    }

    .caja-redondeada {
        border-radius: 20px;
        max-height: 100%;
    }

    .caja-redondeada img:not([src$=".svg"]) {
        border-radius: 20px 0 0 20px;
    }

    .contenido-caja-redondeada {
        text-align: left;
        align-items: start;
        width: 55%;
        padding: 0 25px;
    }
    .caja-redondeada-4>.contenido-caja-redondeada {
        width: inherit;
        align-items: center;
    }

    body.resenas .contenido-caja-redondeada {
        align-items: center;
        width: 100%;
    }

    .caja-redondeada-2>.contenido-caja-redondeada {
        width: 100%;
        padding: 0;
    }

    .caja-redondeada-3>.contenido-caja-redondeada {
        width: 100%;
        border-radius: 0 0 20px 20px;
        min-height: 315px;
        justify-content: normal;
        align-items: center;
    }

}


@media screen and (max-width:900px) {

    h1,
    h2 {
        padding: 0 20px;
    }

    .XXL {
        padding-bottom: 7.5rem;
    }

    .container-redondeado {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .caja-redondeada {
        flex-direction: column;
        min-width: 336px;
    }

    .caja-redondeada img:not([src$=".svg"]) {
        border-radius: 20px 20px 0 0;
    }

    .contenido-caja-redondeada {
        align-items: start;
        text-align: left;
        width: 100%;
    }

    .caja-formulario {

        padding: 7.5rem 0;
    }

    .caja-footer {
        flex-direction: column;
        align-items: center;
        gap: 80px;
        text-align: center;

        div {
            justify-content: center;
        }
    }

    .container-imagenes,
    .caja-img {
        padding-left: 5%;
        padding-right: 5%;

    }

    .container-imagenes {
        flex-direction: column;
    }

    body.resenas .container-redondeado {
        align-items: stretch;
    }

    .caja-flex {
        flex-direction: column;
    }

}

@media screen and (max-width:769px) {

    input,
    textarea {
        min-width: 0;
        width: 100%;
    }

    input:placeholder-shown,
    textarea:placeholder-shown {
        font-size: 1.1rem;
    }

    form {
        width: 80%;
    }

    .caja-titulo,
    .container-redondeado {
        padding-left: 40px;
        padding-right: 40px;
    }

    .caja-formulario p,
    .caja-footer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .container-redondeado-2,
    .caja-img {
        padding-left: 5%;
        padding-right: 5%;
    }

    .caja-redondeada-2 {
        padding: 30px;
    }

    .nav-links {
        align-items: start;
    }

    .item-desp {
        text-align: left;
    }

    .container-desp {
        text-align: left;
    }

    .boton,
    .boton-1,
    .wtrvl-checkout_button,
    .boton-verde-wetravel,
    .whatsapp {
        padding: 10px 20px;
    }
}