@font-face {
    font-family: 'LetterMyFont';
    font-weight: normal;
    font-style: normal;
    src: url('../font/MiFuente.woff2') format('woff2');
    font-display: swap;
}

html {
    width: 100%;
    height: 100%;
}
body {
    font-family: LetterMyFont;
    /*font-family: 'Montserrat', sans-serif; /* o la que uses en tu theme */
}
a {
    text-decoration: none;
}
a.visually-hidden.focusable.skip-link {
    visibility: hidden;
    display: none;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ========================================== REGION HEADER =========================================== */
/* ---------------------------------------------------------------------------------------------------- */
/* ================ Region header ================ */
.region-header {
    display: flex;
    /*Elementos hijo se distribuyan en linea horizontal*/
    /*height: 100px; /* Altura fija del header*/
    width: 100%;
    /* Ocupa todo el ancho disponible */
    max-width: 85%;
    /* Máximo del ancho del contenedor header */
    justify-content: space-between;
    /* Espacia los elementos entre sí */
    /*align-items: flex-start; /* Centra verticalmente los elementos */
    align-items: center;
    /* Centra los elementos verticalmente */
    /*align-content: center; /* Centra varias filas si se generan */
    margin: 0 auto;
    /* Centra el contenedor horizontalmente */
    /*padding: 10px; /* Espacio interno del contenedor */
    background-color: white;
    padding: 15px;
}

.region-header .block a {
    color: #000000; /*Cambia el color del texto en el header*/
}

.region-header .block a:hover {
    color: #ED7A39; /*Cambia el color del texto en el header*/
}

/* ======= Bloque sitebranding (logo Conde travel) ======= */
.site-logo img {
    max-height: 80px;
    /* Ajusta este valor a lo que desees */
    height: auto;
    width: auto;
}

/* ============== Bloque contactinfoheader ============== */
#block-cusco-salkantay-trek-bloquecontactinfoheader {
    display: none;
}
/* =============== Bloque languageheader ================ */
.field--name-field-tblang-header-texticon-prg {
    display: flex;
    gap: 20px;
}
.field--name-field-tblang-header-texticon-prg img {
    width: 33px;
    height: auto;
}
/* ---------------------------------------------------------------------------------------------------- */
/* =========================================== REGION MENU ============================================ */
/* ---------------------------------------------------------------------------------------------------- */
.tbm-main {
    background-color: #31A598;
    width: 100%;
    display: flex;
    justify-content: center; /*Centra el menu em mobil*/
}
/* .region-menu .tbm-item.level-1 {
    background-color: transparent;
} */
/* .region-menu .tbm-item.level-1 .tbm-link-container a{
    color: black;
} */

/* ---------------------------------------------------------------------------------------------------- */
/* ========================================== REGION SLIDER =========================================== */
/* ---------------------------------------------------------------------------------------------------- */
#block-cusco-salkantay-trek-bloquehomeslider {
    position: relative;
}
.field--name-field-tb-home-slider-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    height: 700px;
}
.field--name-field-tb-home-slider-media {
    height: 700px;
}
.field--name-field-tb-home-slider-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.gr-tipo-bloque-home-slider {
    max-width: 100%;/* Limita el ancho máximo del bloque al 50% del contenedor padre */
    z-index: 2; /* Establece la posición en la pila de capas, para que se muestre sobre elementos con z-index menor */
    position: absolute; /* Posiciona el bloque respecto al contenedor más cercano con posición relativa o absoluta */
    top: 50%; /* Coloca la parte superior del bloque al 50% de la altura del contenedor */
    transform: translate(-50%, -50%); /* Desplaza el bloque hacia arriba y hacia la izquierda para centrarlo completamente en pantalla */
    left: 50%; /* Coloca el lado izquierdo del bloque al 50% del ancho del contenedor */
    color: #FFFFFF; /* Establece el color del texto en blanco */
    justify-content: left; /* Centra el contenido horizontalmente (solo tiene efecto si se usa en un contenedor flex) */
    background-position: center; /*Centra la imagen de fondo si se aplica una con background-image */
    text-align: center; /* Centra el texto dentro del bloque */
}
.field--name-field-tb-home-slider-tit-head h1 {
    font-size: 27px;
}
.field--name-body p {
    font-size: 16px;
}
/* Boton de slider */
.field--name-field-tb-home-slider-btn-link {
    text-align: center;
    /* Centrado */
    margin-top: 30px;
    /* Espacio superior */
}
.field--name-field-tb-home-slider-btn-link a {
    display: inline-block;
    /* Permite aplicar dimensiones */
    padding: 12px 35px;
    /* Espaciado interno */
    background-color: #ED7A39;
    /*Color de fondo del boton*/
    color: #ffffff;
    /* Color de texto blanco */
    font-weight: 700;
    /* El texto en negrita */
    letter-spacing: 2px;/* Espaciado entre letras */
    border-radius: 12px;/* Bordes muy redondeados */
    transition: all 0.3s ease;/* Transición suave */
    border: 1px solid #FFFFFF;/* Borde blanco */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    /* Sombra sutil */
}

.field--name-field-tb-home-slider-btn-link a:hover {
    background-color: #ffffff;
    /* Fondo transparente */
    color: #ED7A39;
    /* Color dorado en texto */
    font-weight: 700;
    /* El texto en negrita */
    border: 1px solid #ED7A39;
    /* Borde dorado */
    transform: translateY(-3px);
    /* Efecto de levitación */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    /* Sombra más pronunciada */
}
.field--name-field-tb-home-slider-btn-link a:active {
    transform: translateY(3px);
    /* Efecto de ser presionado */
}
/* ---------------------------------------------------------------------------------------------------- */
/* ========================================== REGION SIDEBAR ========================================== */
/* ---------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------- */
/* ======================================= REGION MAIN(CONTENT) ======================================= */
/* ---------------------------------------------------------------------------------------------------- */
.region-content {
    width: 100%;
    max-width: 95%;
    margin: auto;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ======================================= REGION RIGHT SIDEBAR ======================================= */
/* ---------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------- */
/* =========================================== REGION FOOTER ========================================== */
/* ---------------------------------------------------------------------------------------------------- */
/* Bloque grupo footer (sitebrading, more info, contact y find us) */
.region-footer #block-cusco-salkantay-trek-bloquecontactinfoheader {
    /*display: flex;*/
    display: block;
    gap: 20px;
}
.region-footer .paragraph--type--tipo-paragraphs-contact-info {
    display: flex;
    align-items: center;
    gap: 7px;
    /* padding: 12px; */
    /* border-right: 1px solid #ccc; */
}
.region-footer .field--name-field-tbci-header-text-icon-prg {
    display: flex;
    gap: 15px;
}
.region-footer .field--name-field-tpci-icon-img img {
    width: 20px;
    height: auto;
}
#block-cusco-salkantay-trek-bloquegrupofooter {
    background-color: #31A598;
    font-size: 16px;
}
.field--name-field-tb-grupo-footer-block {
    display: flex;
    flex-wrap: wrap;
    color: #FFFFFF;
    justify-content: space-around;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
}
/* Site branding */
.field--name-field-tbsb-footer-logo-img img {
    max-width: 150px;
    width: auto;    
    height: auto;
    padding: 30px;
}
/* Estilos css more information */
.field--name-field-tbmi-footer-text-link {
    display: flex;
    flex-direction: column;
    row-gap: 7px;
}
.field--name-field-tbmi-footer-text-link a {
    color: #FFFFFF;
    transition: background-color 0.3s ease;
    /* suaviza el cambio */
}
.field--name-field-tbmi-footer-text-link a:hover {
    color: #ED7A39;
    font-weight: bold;
}
/* Estilos css contact info */
.field--name-field-tpci-icon-img img {
    width: 20px;
    height: auto;
}
.field--name-field-tbci-footer-text-icon-prg {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 7px;
}
.field--name-field-tpci-text-link a:hover {
    color: #ED7A39;
    font-weight: bold
}
.region-footer .block a {
    color: #FFFFFF;
}
.region-footer .block a:hover {
    color: #000000;
}
/* Estilos css find us */
.field--name-field-tbfu-footer-text-icon-prg {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.field--name-field-tpsn-icon-img img {
    width: 33px;
    height: auto;
}
/* Bloque copyright footer */
#block-cusco-salkantay-trek-bloquecopyrightfooter {
    display: flex;
    color: #FFFFFF;
    justify-content: center;
    background-color: black;
    /* padding: 5px; */
    height: 80px;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ======================================= MAIN NAVIGATION BLOG ======================================= */
/* ---------------------------------------------------------------------------------------------------- */
/* Para ocultar la edición */
article.contextual-region.media.media--type-image.media--view-mode-image-full-screen .contextual {
    display: none !important;
}
/*  ================= View Slider ======================*/
/* Definir el tamaño de la portada */
#block-cusco-salkantay-trek-views-block-vista-tax-blogs-slider-block-1 {
    position: relative;
    width: 100%;
    height: 600px;
}
.views-field-field-tax-blogs-slider-media img {
    width: 100%;
    height: 550px;
    object-fit: cover;/*No se deforma el imagen*/
}
.views-field-field-tax-blogs-slider-media {
    position: relative;
    height: 550px;
}
/* La portada es de color oscuro*/
.region-slider .views-field-field-tax-blogs-slider-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* Color del titulo al centro de la portada */
.view-vista-tax-blogs-slider {
    position: relative;
}
/* Para posicionar le titulo en el centro de la portada */
.view-vista-tax-blogs-slider .fieldset-a {
    color: #ffffff;
    position: absolute;/* Posiciona el bloque respecto al contenedor más cercano con posición relativa o absoluta */
    top: 50%;/* Coloca la parte superior del bloque al 50% de la altura del contenedor */
    transform: translate(-50%, -50%);/* Desplaza el bloque hacia arriba y hacia la izquierda para centrarlo completamente en pantalla */
    left: 50%;/* Coloca el lado izquierdo del bloque al 50% del ancho del conten          edor */
    text-align: center;/* Centra el texto dentro del bloque */
    font-size: 27px;
    z-index: 2;/*El contenido lo sobrepone*/
    text-transform: uppercase;
}
/*  ================= View Main Blogs ======================*/
/* Contenedor general de la tarjeta */
.view-vista-tc-blogs .view-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    padding: 1rem;
}
.view-vista-tc-blogs .views-row {
    display: flex;/* Flex para organizar contenido en columna */
    flex-direction: column;
    background: #fff;/* Fondo blanco para destacar el contenido */
    border-radius: 12px;/* Bordes redondeados suaves */
    overflow: hidden;/* Oculta contenido que sobresalga (como imágenes) */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);/* Sombra suave para efecto flotante */
    transition: all 0.3s ease-in-out;/* Suaviza animaciones al pasar el mouse */
}
.views-field-field-tc-blog-thumb-media {
    height: 300px;/* Altura fija definida */
    overflow: hidden;/* Oculta el "crecimiento" hacia afuera */
    position: relative;
}
/* Definir el ancho de imagen de la tarjeta y la altura */
.views-field-field-tc-blog-thumb-media img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.4s ease;/* Suaviza la animación */
}
/* Al pasar cursos la imagen de la tarjeta aumenta */
.views-field-field-tc-blog-thumb-media:hover img {
    height: 300 px;
    transform: scale(1.03);/* Aumenta el tamaño de la imagen ligeramente */
}
/* Aplicar  padding al titulo, descripcion de la tarjeta */
.view-vista-tc-blogs .fieldset-a {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
/* Personalizar titulo de la tarjeta */
.view-vista-tc-blogs .views-field-title a {
    color: black;
    font-weight: bold;
    font-size: 27px;
}
/* Personaliza la descripcion de la tarjeta */
.view-vista-tc-blogs .views-field-body p {
    font-size: 0.95rem;
    color: blue;
    line-height: 1.5;
}
.view-vista-tc-blogs .views-field-view-node {
    text-align: center;
}
.view-vista-tc-blogs .views-field-view-node a {
    display: inline-block;
    font-size: 0.85rem;
    background-color: #ED7A38;
    /* Fondo violeta */
    color: white;
    /* Texto blanco */
    padding: 0.5rem 1rem;
    border-radius: 6px;
    /* Bordes suavizados */
    text-decoration: none;
    transition: background-color 0.3s ease;
}
/* Estilos de portada para cada blog */
.views-field-field-tc-blog-slider-media .field-content img {
    width: 100%;
    object-fit: cover;
    height: 550px;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ===================================== MAIN NAVIGATION ABOUT US ===================================== */
/* ---------------------------------------------------------------------------------------------------- */
/* Color el titulo al centro de la portada */
#block-cusco-salkantay-trek-views-block-vista-tc-about-slider-block-1 {
    position: relative;
    width: 100%;
    height: 600px;
}

.views-field-field-tc-about-slider-media img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    /*No se deforma el imagen*/
}

.views-field-field-tc-about-slider-media {
    height: 550px;
    position: relative;
    z-index: 0;
    /* Asegura que el ::after no cubra elementos por encima */
}

.views-field-field-tc-about-slider-media:after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* Color el titulo al centro de la portada */
.view-vista-tc-about-slider {
    position: relative;
}
.view-vista-tc-about-slider .views-field-title {
    color: #ffffff;
    position: absolute;
    /* Posiciona el bloque respecto al contenedor más cercano con posición relativa o absoluta */
    top: 50%;
    /* Coloca la parte superior del bloque al 50% de la altura del contenedor */
    transform: translate(-50%, -50%);
    /* Desplaza el bloque hacia arriba y hacia la izquierda para centrarlo completamente en pantalla */
    left: 50%;
    /* Coloca el lado izquierdo del bloque al 50% del ancho del conten          edor */
    text-align: center;
    /* Centra el texto dentro del bloque */
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
}

.region-content .node__content .clearfix.text-formatted.field.field--name-field-tc-about-content-txtflong.field--type-text-long.field--label-hidden.field__item {
    text-align: center;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ======================= MAIN NAVIGATION (SALKANTAY TOURS, ALTERNATIVE TOURS) ======================= */
/* ---------------------------------------------------------------------------------------------------- */
/*  ================= View Slider ======================*/
/* Definir el tamaño de la portada */
#block-cusco-salkantay-trek-views-block-vista-tax-tours-slider-block-1 {
    position: relative;
    width: 100%;
    height: 600px;
}

.views-field-field-tax-tours-slider-media img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    /*No se deforma el imagen*/
    object-position: center 65%;
}

.views-field-field-tax-tours-slider-media {
    position: relative;
    height: 550px;
}

.region-slider .views-field-field-tax-tours-slider-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Color el titulo al centro de la portada */
.view-vista-tax-tours-slider {
    position: relative;
}

.view-vista-tax-tours-slider .views-field-name {
    color: #ffffff;
    position: absolute;
    /* Posiciona el bloque respecto al contenedor más cercano con posición relativa o absoluta */
    top: 50%;
    /* Coloca la parte superior del bloque al 50% de la altura del contenedor */
    transform: translate(-50%, -50%);
    /* Desplaza el bloque hacia arriba y hacia la izquierda para centrarlo completamente en pantalla */
    left: 50%;
    /* Coloca el lado izquierdo del bloque al 50% del ancho del conten          edor */
    text-align: center;
    /* Centra el texto dentro del bloque */
    font-size: 54px;
    z-index: 2;
    text-transform: uppercase;
}