/*@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

/*
Theme Name: Nuevo Tema TNR
Author: Jul Díaz Otero y Xavier Rodríguez Prieto
Author URI: http://www.ecosistema3d.net/tournride
Description: Tema actualizado en 2022
Version: 1.0
License: All Rights Reserved
*/

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
    background-color: #fff;
    position: relative;
}

/** CABECERA XAVI */
.barra-azul {
    transition: .3s;
    position: relative;
    z-index: 10;
    display: flex;
}

.cabecera_row {
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
    color: white !important;
    flex-grow: 1;
    transition: .5s;
    width: 100%;
    background-color: rgba(50, 50, 50, .3);
    position: fixed;
}

.header_no_frontpage {
    background: linear-gradient(#000000, #11111188);
    color: white;
}

.header_no_frontpage a {
    color: white;
}

.navbar {
    display: flex;
    justify-content: space-between;
}

.div-menu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    border-bottom: 1px solid #cccccc;
}

.div-menu a {
    color: white;
}

.div-menu-hamburger {
    display: none;
}

.menu {
    display: inline;
    font-family: Lato, sans-serif;
    font-weight: bold;
    font-size: large;
}

.menu li {
    margin-bottom: 3px;
    display: inline-block;
    position: relative;
    float: right;
    padding: .8rem;
    -webkit-transition: color .5s ease-in;
    -o-transition: color 1s ease-in;
    text-decoration: none;
}

.menu li:hover {
    margin-bottom: -3px;
}

.menu li :after {
    font-family: "Material Icons", serif;
    content: "expand_more ";
    font-size: 14px;
    color: #adb5bd;
    border: 0 solid transparent;
    font-weight: 900;
    line-height: 1.3;
    transition: .3s;
    margin-left: 4px;
}

.main_nav ul {
    display: inline;
}

.menu li a {
    padding-right: 12px;
    text-decoration: none;
}

.menu li:hover {
    border-bottom: 3px solid #97ccf5;
    text-decoration: none;
    cursor: pointer;
}

.menu li a:hover {

}

ul {
    margin-top: 1.5rem;
}

.post_list {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}

.post_card {
    display: flex;
    gap: 1rem;
    border: 1px solid #cccccc;
    border-radius: 15px;
    background: #e7f1f4;
    padding: 0 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para la elevación */
    transition: box-shadow 0.2s ease; /* Transición suave para la sombra */
}

.post_card .post_thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post_card .post_thumbnail img {
    border-radius: 10px;
    width: auto;
    height: 80%;
    aspect-ratio: auto;
}

.post_card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al pasar el ratón */
}

.post_card > div > p {
    font-style: italic;
    color: dimgray;
}

.site-content > h1 {
    line-height: 2.5rem !important;
}

.promo_left {
    font-family: Lato, sans-serif;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    z-index: 5;
    /* Asegura que solo ocupe el espacio necesario */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.promo_left h1,
.promo_left h2 {
    margin: 0;
    padding: 0;
}
.bike_rental {
    font-size: 7rem;
}
.for_the_camino {
    font-size: 3rem;
}
.check_out {
    font-size: 2rem;
}
.yamaha {
    font-size: 4rem;
}

/* Todos los textos animados comparten estas propiedades */
.texto_animado1,
.texto_animado2,
.texto_animado3,
.texto_animado4,
.texto_animado5 {
    position: absolute; /* Posición absoluta para superponerlos */
    top: 0;
    opacity: 0; /* Todos empiezan invisibles */
    text-align: center;
    white-space: nowrap; /* Evita saltos de línea no deseados */
    animation-fill-mode: both; /* Aplica estilos antes y después */
}

/* Estilos específicos para cada texto */
.texto_animado1 {
    display: flex;
    flex-flow: row nowrap;
    animation: coming_out 24s infinite linear;
    animation-delay: 0s;
}

.texto_animado2 {
    animation: coming_out 24s infinite linear;
    animation-delay: 5s;
}
.texto_animado2 h2 {
    font-size: 3rem;
}

.texto_animado3 {
    font-size: 4rem;
    animation: coming_out 24s infinite linear;
    animation-delay: 9.5s;
}

.texto_animado4 {
    animation: coming_out 24s infinite linear;
    animation-delay: 14s;
}

.texto_animado5 {
    font-size: 5rem;
    animation: coming_out 24s infinite linear;
    animation-delay: 18s;
}
@keyframes coming_out {
    0% {
        opacity: 0.8;
        filter: blur(10px);
        transform: scale(.5);
    }
    2.5% {
        opacity: 0.9;
        filter: blur(5px);
        transform: scale(.7);
    }
    5% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(.9);
    }
    7.5% {
        opacity: 1;
        transform: scale(1);
    }
    13% {
        opacity: 1;
    }
    16% {
        opacity: .8;
    }
    17% {
        opacity: .7;
    }
    18% {
        opacity: .4;
    }
    19% {
        opacity: .2;
    }
    20% {
        opacity: 0;
    }
}

/* Contact Form */
.form-group {
    display: flex;
    gap: 1rem;
    align-items: flex-start; /* Alinea los elementos verticalmente al centro */
    justify-content: center;
    margin-bottom: 1rem; /* Espacio entre los grupos de formulario */
}

.form-group span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.form-group .bigicon {
    font-size: 24px; /* Ajusta el tamaño del icono */
}

.form-group div {
    /*flex-grow: 1; !* Permite que los campos de entrada ocupen el espacio disponible *!*/
}

.form-group .button {
    justify-content: center; /* Centra el botón de enviar */
}

.form-group .button div {
    text-align: center; /* Centra el texto del botón */
}

.etapa_container {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
}

.etapa_item {
    overflow: hidden;
    width: 330px;
}

.etapa_imagen {
    width: 330px;
    height: 250px;
}

.etapa_imagen img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

@media screen and (max-width: 1435px) {
    .cabecera_row {
        padding-right: .2rem;
    }

    .div-menu-hamburger {
        display: inline-block !important;
        text-decoration: none;
        color: #8D7F68;
        font-size: x-large;
        transition: color linear 0.15s;
    }

    .div-menu-hamburger:hover, .div-menu-hamburger.active {
        text-decoration: none;
        color: #8D7F68;
    }

    .div-menu {
        display: flex;
        justify-content: flex-end;
        position: relative;
        border: none;
    }

    .menu li:hover {
        border: none;
        background-color: #308ec5;
    }

    .main_nav ul {
        display: none;
        list-style-type: circle !important;
        position: absolute;
        border-radius: 0 0 10px 10px;
        top: 80%;
        left: -11rem;
        padding: .5rem 1rem .5rem 1rem;
        background: #fff;
        width: 15rem;
    }

    .main_nav li {
        display: block;
        float: none;
    }

    .menu li a {
        color: black;
    }

    .wpml-ls-legacy-list-horizontal {
        border: none !important;
        padding: 0;
    }

    .wpml-ls-legacy-list-horizontal > ul {
        flex-flow: row wrap !important;
    }

    .contenedor_pie {
        gap: 0;
    }

    .promo_left {
        top: 12%;
    }
}

#contenedor_opiniones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-content: center;
    max-width: 1200px; /* Ajusta el ancho máximo según tus necesidades */
    margin: 0 auto; /* Centra el contenedor */
}

/* Estilo para cada item de opinión */
.opinion-item {
    display: flex;
    flex-direction: column;
}
/* Estilo para las tarjetas */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Estilo para el cuerpo de la tarjeta */
.card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Estilo para el título de la tarjeta */
.card-title {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 10px;
    align-self: flex-start;
}

/* Estilo para el texto de la tarjeta */
.card-text {
    color: #666;
    font-size: 1rem;
    margin-bottom: 10px;
    align-self: flex-start;
}

/* Estilo para la fecha de publicación */
.text-muted {
    color: #999 !important;
    font-size: 0.9rem;
}
.source {
    color: #999;
    font-size: 0.9rem;
    margin-top: auto;
    align-self: flex-end;
}
.source i {
    margin-right: 5px; /* Añade un margen a la derecha del icono */
}
/* Estilo para las estrellas de calificación */
.stars {
    color: #ffc107;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

@media screen and (max-width: 500px) {
    .cabecera_row {
        padding-left: 0;
    }

    .navbar {
        flex-flow: row-reverse nowrap;
        justify-content: flex-end;
    }

    .navbar .div-menu {
        margin-right: 1rem;
    }

    .promo_left {
        top: 15%;
        width: 90%;
    }

    .bike_rental {
        font-size: 3rem;
    }
    .for_the_camino {
        font-size: 2rem;
    }
    .check_out {
        font-size: 1.5rem;
    }
    .yamaha {
        font-size: clamp(.5rem, 90%, 1.6rem);
    }

    .texto_animado1,
    .texto_animado2,
    .texto_animado3,
    .texto_animado4,
    .texto_animado5 {
        max-width: 100%;
    }
    .texto_animado1 {
        flex-flow: column nowrap;
    }

    .texto_animado2 h2 {
        font-size: 2.5rem;
    }
    .texto_animado3 {
        font-size: 2rem;
    }
    .texto_animado4 {
        font-size: 2rem;
    }
    .texto_animado5 {

    }

    .wp-block-media-text .promo-text {
        top: 6% !important;
    }

    .wp-block-media-text .promo-text-left {
        left: 75% !important;
    }

    .div-menu-hamburger {
        color: white !important;
    }

    .header_no_frontpage {
        background: linear-gradient(#000000, #11111188);
        color: black;
    }

    .header_no_frontpage a {
        color: black;
    }

    .etapa_container {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: 2rem;
    }

    .site-content {
        margin-top: 60px;
        font-size: 1rem !important;
        line-height: 1.3rem !important;
        max-width: 100% !important;
        padding: 1rem .1rem 0 !important;
    }

    .form-group {
        gap: .2rem;
        align-items: flex-start; /* Alinea los elementos verticalmente al centro */
        justify-content: center;
        margin-bottom: 1rem; /* Espacio entre los grupos de formulario */
    }

    .post_card .post_thumbnail {
        display: none;
    }
}

/** FIN CABECERA */
.content-area {
    display: flex;
    align-items: center;
    /*padding-top: 90px;*/
    flex-flow: column wrap;
    width: 100%;
}

.site-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 70vh;
}

.site-content {
    font-size: 1.2rem;
    line-height: 1.5rem;
    max-width: 1120px;
    padding: 71px 20px 0;
}

.site-content a {
    color: #1C5C99;
    text-decoration: none;
}

.footer {
    flex: 0 0 auto;
}


.app_tnr {
    position: relative;
}

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.wp-block-embed__wrapper iframe {
    width: 100%;
    height: 100%;
}

.accesos_rapidos {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.accesos_rapidos .acceso {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Lato, sans-serif;
    font-size: 2rem;
    width: 10vw;
    height: 10vh;
    background: #6496c8;
    color: white;
    border-radius: 15px;
    padding: 2rem;
}

.wp-block-media-text {
    position: relative;
}

.wp-block-media-text .promo-text {
    position: absolute;
    top: 20%; /* Ajusta la posición vertical del texto */
    left: 20px; /* Ajusta la posición horizontal del texto */
    background-color: #308ec5; /* Color de fondo del texto promocional */
    color: white; /* Color del texto */
    padding: 5px 10px; /* Espaciado interno del texto */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Grosor del texto */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 10; /* Asegura que el texto esté por encima de la imagen */
    opacity: 0; /* Inicialmente invisible */
    transform: scale(0.5); /* Inicialmente escalado al 50% */
    transition: transform 1.5s ease, opacity 0.5s ease; /* Transición suave */
}


@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tnr_widget_reservas {
    padding: 10px 5px 0;
    background: rgb(48, 142, 197);
    height: 300px;
}

.menu-menu-principal-spanish-container ul {
    display: flex;
    flex-flow: row nowrap;
}

.wpml-ls-legacy-list-horizontal > ul {
    display: flex;
    flex-flow: row nowrap;
}

.col-md-12 {
    display: flex;
    flex-flow: row nowrap;
}

.nav-header.nav-header-classic .navbar {
    flex-grow: 1;
    justify-content: space-between;
}

.menu .current_page_item > a, .menu .current_page_ancestor > a, .menu .current-menu-item > a, .menu .current-menu-ancestor > a {
    color: #57a2cd;
}

.sidebar-container {
    position: relative;
    z-index: 1;
}

.tnr-wp-client {
    display: flex;
    flex-flow: column wrap;
    color: black !important;
    background-color: #f9f9f9;
    font-size: 16px;
    margin-top: 71px;
    width: 100%;
}


.wpcf7 form.init .wpcf7-response-output {
    display: none
}

/*
    PIE - FOOTER
 */
.contenedor_pie {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 5rem;
    background: linear-gradient(#FFFFFF, #00000044);
}

.pie_columna {
    width: 250px;
}

.parrafoFooter {
    font-family: Lato, sans-serif;
    font-weight: bold;
    font-size: 1.4rem;
}

.link_footer {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    text-decoration: none;
}
.link_footer ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
}
.link_footer a {
    text-decoration: none;
    color: #308ec5;
}

.prefooter {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
}

.subprefooter {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
}

.texto_footer a {
    text-decoration: none;
    color: #308ec5;
}

.nombre_empresa {
    font-family: Lato sans-serif;
    font-weight: bold;
    font-size: large;
}

@media screen and (max-width: 500px) and (max-height: 650px) {
    .app_tnr {
        margin-top: 70px;
    }
}

@media screen and (max-width: 1300px) and (max-height: 900px) {
    .promo_left {
        top: 100px;
    }
}
.joinchat__button {
    background: #308ec5 var(--joinchat-ico) 50%/60% no-repeat!important;
}