/*
Theme Name: Magic Trip Mx Web
Text Domain: magictrip.com.mx
Version: 1.0
Description: Fancy viaje blog
Tags: responsive, fancy
Author: Luis J. Jimenez
Author URI: https://360webstudio.com.mx
*/
/* Optimización de scroll para mejor rendimiento */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  html {
    scroll-behavior: smooth;
  }
body{
    padding: 0;
    margin: 0;
    
}
h1,h2,h3,h4,h5,h6{
    padding: 0;
    margin: 0;
    
}
h1{
    text-transform: uppercase;
}
h2{
    font-size: 2.5rem;
    font-weight: bold;
}
ul{
    padding: 0;
    margin: 0;
}
.link{
    color: black;
    text-decoration: none;
}
.link:hover{
  text-decoration: none;
}
button{
    font-size: 1.8rem;
    color: white;
    background-color: #0A1A2A;
    
}
button:hover{
    cursor: pointer;
}
.hero-text{
    
    height: 420px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    background-color: #0000006d;
    z-index: 100;
    text-align: center;
    text-shadow: 2px 2px 2px black;
}
.hero-section{
    
}
.title{
    color: white;
    text-shadow: 5px 2px 5px black;
    font-size: 1.412rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    
    
    width: 100%;
}
.single-title{
    max-width: 842px;
    color: black;
    
    
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    
    
    width: 100%;
}
.single-entry-title{
    font-size: 2.5rem;
}
.top-content{
    display: flex;
    
    justify-content: center;
    position: relative;
    align-items: center;
    
    text-align: left;
}
.dr-image{
    width: 420px;
    translate: 10px;
    position: relative;
    z-index: 10;
}
.subtitle h2{
    color: white;
    padding: 1.5rem 0;
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 4px 5px black;
    
}

.top-section{
    background-image: linear-gradient(#00000000,#00000000), url("assets/images/heroXuxul.jpg");
    
    width: 100%;
    
    
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  center;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.574);
    
}
.hero-content {
    position: relative;
    max-width: 800px;
    padding: 20px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.565);
    border-radius: 15px;
}
.hero-title{
    text-shadow: 2px 2px 2px black;
}
.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-shadow: 2px 2px 2px blakc;
}
.single-hero-text{
    height: 620px;
    text-align: center;
    background-image: linear-gradient(#1244866b,#12448672), url("assets/images/bgCombi.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.single-top-content{
    
}
a.btn{
    text-shadow: 1px 3px 2px black;
    font-family: 'Montserrat', sans-serif;
    margin-top: 1.8rem;
    
}

.btn{
    background-color: #124486;
    font-size: 1.2rem;
    color: white;
    padding: 1rem;
    width: fit-content;
    text-decoration: none;
    border-radius: 10px;
    box-shadow:  6px 6px 6px black;
}
.btn:hover{

}
.btn a{
    color: white;
    padding: 1rem;
    text-decoration: none;
}
.icon-container{
    display: flex;
    
}

.icon-container .icon-activity {
    color: #ff0000; /* Color rojo */
  }
.about-card{
    border-radius: 10px;
    min-width: 20rem;
    margin-bottom: 4.3rem;
    background-color: rgba(23,55,97,0.15);
    grid-column: 2/-2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", Sans-serif;
    padding: 1.5rem 0;
    border: 1px solid #124486;
    box-shadow: -9px 14px 10px #124486;
}
.about-card:hover{
    cursor: pointer;
    translate: 0 -15px;
    box-shadow: -4px 24px 10px #124486;
    transition-duration: .5s;
}
.cards{
    grid-column: 2/-2;   
}
.content-card ul li{
    list-style: none;
    border-top: 1px solid #124486;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 1.5rem;
    color: #666 ;
    font-size: 1.2rem;
}
.li-long{
    text-align: center;
}
.img-card{
}
.horizontal-line{
    width: 100%;
    margin: 1.2rem 0;
    color: #124486;
    background-color: #124486;
    text-align: center;
}

.title-card{
    padding: 1.5rem 0;
    color: #124486;
    font-size: 1.5rem;
    font-weight: bold;
}
.content-card{
    
}
ul li:hover{
    color: #124486;
    cursor: pointer;
}
.about-section{
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
}

.title-about-section{
    text-align: center;
    grid-column: 2/-2;
    color: #124486;
    font-family: "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
}
.dr-section{
    margin-top: 4.5rem;
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
}
.dr-img{
    background-image: url("assets/images/welcome.png");
    margin-top: 1.8rem;
    margin-bottom: 3.5rem;
    height: 465px;
    grid-column: 2/-2;
    background-repeat: no-repeat;
    border-radius: 10%;
    overflow: hidden;
    background-position: center  ;
}
.dr-subtitle{
    grid-column: 2/-2;
    color: #124486;
    font-family: "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
    
}
.dr-name{
    grid-column: 2/-2;
    margin-bottom: 1.5rem;
    font-family: "Montserrat", Sans-serif;
}
.dr-presentation{
    grid-column: 2/-2;
}
.dr-content{
    grid-column: 2/-2;
    color: #000000;
    font-family: "Montserrat", Sans-serif;
    font-size: 1.125rem;
    line-height: 1.8rem;
}
.dr-btn-content {
    grid-column: 2/-2;
    margin-top: 62px;
    display: flex;
    justify-content: center;
}
.btn-container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo-container-wrapper{
    grid-column: 2/-2;
    display: flex;
    justify-content: center;
    gap: 4.5rem;
    margin: 5.5rem 0;
}
.logo-container{
    margin-top: 4.5rem;
    grid-column: 2/-2;
    display: flex;
    flex-direction: column;
    
    align-items: center;
}
.logo{
    grid-column: 2/-2;
    width: 29%;
    display: flex;
    justify-content: center;
    
}
.logo-upaep{
    max-width: 120px;
}
.logo-uat{
    
    height: auto;
    max-width: 84px;
    
}
.logo-content{
    text-align: center;
}
.dr-experience{
    padding-top: 4.5rem;
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
    background-color: #124486;
    
}
.dr-experience-wrapper{
    grid-column: 2/-2;
    
}
.dr-experience-content{
    grid-column: 2/-2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 4.375rem;
    padding-bottom: 8.5rem;
}

.dr-price-section{
    
    background-image:linear-gradient(#00000098,#0000008c), url("assets/images/maguey.png");
    font-family: 'Montserrat', sans-serif;
    padding: 4.5rem;
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top  center;
    height: 600px;
    
}
.dr-price-title{
    color: white;
    text-align: center;
    font-size: 2.5rem;
    text-shadow: 10px 4px 9px black;
}
.counter{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.counter-content{
    font-size: 1.875rem;
    font-weight: 500;
    text-align: center;
}
.dr-price{
    grid-column: 2/-2;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    align-items: center;
    
}
.current-menu-item{
    color: #dc9d2b;
}
.price{
    color: #dc9d2b;
    font-size: 4.5rem;
    text-shadow: 6px 6px 6px black;
}
.dr-service-section{
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
    padding: 4.5rem 0;

}
.dr-service-content{
    grid-column: 2/-2;
    
}
.dr-service-title{
    text-align: center;
    
    color: #124486;
    font-family: "Montserrat", Sans-serif;
    font-size: 22px;
    font-weight: 600;
}


.dr-service-check{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    padding-bottom: 1.8rem;
    
    
    align-items: baseline;
    gap: .4rem;
    color: #000000;
    font-family: "Montserrat", Sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
}
.dr-service-img{
    padding-bottom:4.5rem ;
    width: 100%;
}
.dr-service-img img{
    width: 100%;
    border-radius: 15px;
}

.galery-section{
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
    padding: 4.5rem 0;
}
.galery-img{
    grid-column: 2/-2;
    
}
.galery-img img{
    width: 100%;
    height: 420px;
    border-radius: 10px;
}
.hidden{
    display: none;
}
.hidden-effect{
    opacity: 0;
    transition: 1s;
}
.btn-section{
    grid-column: 2/-2;
    text-align: center;
    padding-bottom: 5.5rem;
    translate: 0 -45px;
}
.pre{
    border-radius: 50px;
    
}
.pre:hover{
    background-color: #124486;
    color: white;
    cursor: pointer;
}
.next{
    border-radius: 50px;
}
.next:hover{
    background-color: #124486;
    color: white;
    cursor: pointer;
}
.contact-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.data-container{
    display: flex;
    justify-content: space-around;
    margin-left: auto;
    width: 940px;
    margin-right: auto;
}
.contact-data{
    display: flex;
}
.review-section{
    background-image: url("/img/review.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
    padding: 4.5rem 0;
    
}
.title-section{
    text-align: center;
    grid-column: 2/-2;
    color: #124486;
    font-family: "Montserrat", Sans-serif;
    font-size: 1.375rem;
    padding: 5.5rem 0;
    font-weight: bolder;
    text-shadow: 1px 2px 1px #00000038;
    
}
.map-container{
    
}
.review-container{
    background-color: #ffffff;
    background-image: url("/img/review-txt.png");
    background-repeat: no-repeat;
    height: 420px;
    
    background-position: top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition-duration: 0.4s;
    transition-property: background-color, border-color;
    grid-column: 2/-2;

}
.personal-review{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.4;
    
    height: 100%;
    justify-content: center;
    align-items: center;
}
.map-section{
    width: 100%;
}
.map{
    width: 100%;
}
.ubicacion-tel {
    color: #124486;
    text-decoration: none;
}
.coatzacoalcos{
    margin-bottom: 1.5rem;
}
.footer{
    font-family: 'Montserrat', sans-serif;
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 970px) minmax(1em, 1fr);
    background-color: black;
    font-size: 1.5rem;
    padding-bottom: 4.5rem;
    
    
}
.footer-logo{
    grid-column: 2/-2;
    background-image: url("/img/logo-dr-mendoza.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 50px;
    background-position: center;
    height: 74px;
    margin: 1.5rem;
    border-radius: 10px;

}
.footer-title{
    grid-column: 2/-2;
    color: #ffffff;
    font-size: 1.5rem;
    
}
.footer-contact{
    
    
}

.footer-contact a{
    color: #ffffff;
    font-family: "Roboto", Sans-serif;
    font-size: 1.2rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-weight: 300;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 1.9em;
    margin-bottom: 1rem;
    
    
}
.footer-schedule{
    grid-column: 2/-2;
    
    
    
}
.footer-schedule a{
    text-decoration: none;
    display: flex;
    justify-content: center;
}
.footer-schedule h3{
    
    color: #ffffff;
    margin-top: 4.5rem;
}
.footer-contact h3{
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 2px black;
    text-align: center;
}
.footer-schedule ul li{
    
    border-bottom: 1px solid #ffffff;
    list-style: none;
    border-top: 1px solid #124486;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    
    padding: 1.2rem .5rem;
    
    font-size: 1.2rem;
    
    
}
.footer-schedule ul li span{
    font-family: "Roboto", Sans-serif;
    display: flex;
    justify-content: space-between;
    color:  #ffffff;
}
.h{
    display: none;
}


.latest-posts{
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:550px){
    .top-section{
        display: flex;
        width: 100%;
        background-position: bottom;
        height: 620px;
        justify-content: center;
        align-items: center;
    }
    .latest-posts{
        flex-direction: row;
    }
    .latest-posts-container{
        flex-direction: column;
    }
    .post-item{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-schedule{
        display: flex;
        justify-content: space-around;
        flex-direction: row;
    }
}

@media (max-width: 1270px) {
    .latest-posts{
        flex-direction: row;
        max-width: 1200px;
    }
    .top-section{
        
        height: 720px;
        background-position: bottom;
    }
    .top-content{
        
        
        
    }
    .title{
        font-size: 2rem;
    }
    .subtitle{
        font-size: 1.8rem;
    }
    .about-section{
        
        grid-template-columns: minmax(1em, 1fr) minmax(0px, 1800px) minmax(1em, 1fr);
    }
    .about-card{
        
        min-width: 24.5rem;
    }

    .cards{
        
        grid-column: 2/-2;
        display: flex;
        justify-content: space-around;
    }
    .dr-section{
        grid-template-columns: minmax(1em, 1fr) minmax(0px, 1800px) minmax(1em, 1fr);
        
    }
    .dr-subtitle{
        text-align: center;
    }
    .dr-name{
        text-align: center;
    }
    .dr-presentation{
        display: flex;
        justify-content: center;
        width: 90%;
        gap: 5.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    .dr-img{
        width: 100%;
        max-width: 600px;
    }
    .dr-content{
        width: 90%;
        max-width: 550px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
    }
    .dr-content a{
        margin-left: auto;
        margin-right: auto;
    }
    .dr-experience{
        
        grid-template-columns: minmax(1em, 1fr) minmax(0px, 1300px) minmax(1em, 1fr);
        
        
    }
    .dr-experience-wrapper{
        display: flex;
        justify-content: space-around;
    }
    .dr-service-section{
        grid-template-columns: minmax(1em, 1fr) minmax(0px, 1300px) minmax(1em, 1fr);
    }
    .dr-service-wrapper{
        display: flex;
        width: 100%;
        flex-flow: row-reverse;
        align-items: center;
        margin-bottom: 4.5rem;
        overflow: hidden;
        border-radius: 10px;
    }
    .dr-service-text{
        display: flex;
        flex-direction: column;
        translate: 120px;
        
    }
    .dr-service-img{
        width: 100%;
        translate: 173px;
        overflow: hidden;
        
    }
    .dr-price-section{
        background-position: center;
    }
    .footer{
        display: flex;
        margin-left: auto;
        /* grid-template-columns: minmax(1em, 1fr) minmax(0px, 1300px) minmax(1em, 1fr); */
        margin-right: auto;
        
    }
    .footer-schedule{
        
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .footer-contact{
        max-width: 30rem;
    }
    .h{
        display: block;
    }
    .post-thumbnail{
        max-width: 800px;
    
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    
    }
    
    
}

/* Estilos para el post individual */
.single-post-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
    translate: 0 -130px;
}

.entry-header {
    margin-bottom: 20px;
}

.post-thumbnail {
    margin-bottom: 20px;
}

.entry-title {
    
    margin-bottom: 10px;
}

.entry-meta {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}

.entry-content {
    font-size: 18px;
    line-height: 1.6;
}

.entry-footer {
    margin-top: 30px;
    font-size: 14px;
    color: #999;
}

.post-categories,
.post-tags {
    margin-bottom: 10px;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.post-navigation a {
    text-decoration: none;
    color: #0073aa;
}

.post-navigation a:hover {
    text-decoration: underline;
}
.posts-container{
    max-width: 840px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-top: 4.5rem;
    margin-right: auto;
}
/* Estilos para el menú de navegación */
.main-navigation {
    background-color: #c50000;
    padding: 10px 0;
}

.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0 15px;
}

.nav-menu li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.nav-menu li a:hover {
    text-decoration: underline;
}

.blog-post{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    margin-left: auto;
    flex-direction: column;
    margin-bottom: 4.5rem;
    margin-right: auto;
    
}

.blog-img-post{
    display: flex;
    justify-content: center;
    width: 720px;
    overflow: hidden;
    border-radius: 15px;
    
}
.blog-post-image{
  
}
.home-post{
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.post{
    
}
.data{
    translate: 0 -100px;
    width: 663px;
}
.title-container{
    background-color: #0073ffa9;
    padding: 1rem 2rem;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    
}
.blog-title{
    color: #40e0ff;
    text-shadow: 2px 3px 4px #000b17
}
.blog-title-content{
    text-align: center;
}
.subtitle-blog{
    text-align: center;
}

.meta-data{
    border: 1px solid;
    width: 662px;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    background-color: white;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top: none;
}
.post-title{
    padding-bottom: 1rem;
}
.post-excerpt{
    height: 120px;
}
.post-item a{
    text-decoration: none;
}

.hero {
    background-image: url('<?php echo get_template_directory_uri(); ?>/images/bgCombi.png');
    background-size: cover;
    background-position: center;
    height: 700px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero h1 {
    font-size: 50px;
}
.content {
    padding: 20px;
}
.section-title {
    text-align: center;
    font-weight: bold;
    line-height: 50px;
    font-size: 44px;
    margin-top: 40px;
    text-align: center;
    margin-bottom: 20px;
}
.article-preview {
    background-color: white;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.article-preview h2 {
    margin-top: 0;
}

.content p {
    
    
    
    color: #555;

    margin-bottom: 40px;
    font-size: 20px;
    DISPLAY: flex;
    color: #555;
    align-items: center;
    justify-content: center;
    /* margin: 10px 10px; */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.destinations-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    
}
.destination-item {
    position: relative;
    width: 300px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.destination-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.destination-item:hover img {
    transform: scale(1.05);
  }
  
.destination-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}
#latest-project {
padding: 40px 0;
background-color: #f9f9f9;
}

#latest-project h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 20px;
}

.latest-posts-container {
display: flex;

justify-content: space-around;
}

.post-item {
background: white;
margin: 10px;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.post-item:hover {
transform: scale(1.05);
}

.post-thumbnail img {
width: 100%;
height: auto;
display: block;
}

.post-meta {
margin: 10px 0;
font-size: 0.9em;
color: #777;
}

.post-title {
font-size: 1.2em;
margin: 10px 0;
}

.post-excerpt {
font-size: 0.9em;
color: #555;
}

.read-more {
display: block;
margin-top: 10px;
text-align: right;
font-weight: bold;
color: #ffffff;
}

#ultimos-posts {
padding: 40px 0;
background-color: #f9f9f9;
}

#ultimos-posts h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 20px;
}

.ultimos-posts-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.ultimos-post-item {
position: relative;
margin: 10px;
width: 48%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}

.wide-post {
width: 100%;
}

.ultimos-post-item:hover {
transform: scale(1.05);
}

.ultimos-post-thumbnail img {
width: 100%;
height: auto;
display: block;
}

.ultimos-post-details {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
}

.ultimos-post-category {
background-color: #ff0000;
padding: 5px 10px;
font-size: 0.9em;
text-transform: uppercase;
}

.ultimos-post-title {
font-size: 1.5em;
margin: 10px 0;
}

.ultimos-post-date {
font-size: 0.9em;
color: #fff;
}

.banner-section{

}

.banner{
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#00000000,#00000000), url("assets/images/Beachbanner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    margin-bottom: 2rem;
}
.banner-content{
    height: 100%;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.banner-text{
    text-align: center;
}
.banner-maguey{
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#00000000,#00000000), url("assets/images/maguey.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    margin-bottom: 2rem;
}
.banner-gastronomy{
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#00000000,#00000000), url("assets/images/gastronomyBanner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    margin-bottom: 2rem;
}
.banner-section{
    max-width: 840px;
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
    margin-left: auto;
    margin-right: auto;
}
.banner-img{
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#00000000,#00000000), url("assets/images/welcome.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 420px;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 5px rgb(86, 184, 255);
    margin-bottom: 2rem;
}
.banner-subtitle{
    text-align: center;
}
.banner-name{
    text-align: center;
}

.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5em;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.success-message {
    color: green;
    font-weight: bold;
    margin-bottom: 15px;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}

.submit-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #45a049;
}

.story-section {
    
    height: 50vh;
    background-size: cover;
    background-position: center;
    display: flex;
    margin: 100px 0;
  }
.story-image {
    background-image: url("assets/images/bgCombi.png");
    width: 100%; /* Ajusta al ancho del contenedor */
    max-width: 600px; /* O un tamaño máximo deseado */
    margin: 20px auto; /* Centra horizontalmente */
  }

  
  
  /* Estilos base */
  #latest-project {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  #latest-project h2 {
      font-size: 2.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 3rem;
      color: #000;
      position: relative;
  }
  
  #latest-project h2::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: #ffc107;
      border-radius: 2px;
  }
  
  .latest-posts-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      align-items: stretch;
  }
  
  .post-item {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      
      border: 1px solid #e9ecef;
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  
  .post-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
      border-color: yellow;
  }
  
  .post-thumbnail {
      position: relative;
      overflow: hidden;
      height: 200px;
  }
  
  .post-thumbnail a {
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .post-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  }
  
  .post-item:hover .post-thumbnail img {
      transform: scale(1.05);
  }
  
  .post-content {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
  }
  
  .post-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      font-size: 0.85rem;
      color: #666;
  }
  
  .post-author {
      font-weight: 600;
      color: #000;
  }
  
  .post-date {
    
      color: #ffc107;
      font-weight: 600;
  }
  
  .post-title {
      margin-bottom: 1rem;
      flex-shrink: 0;
  }
  
  .post-title a {
      color: #000;
      text-decoration: none;
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.4;
      display: block;
      transition: color 0.3s ease;
  }
  
  .post-title a:hover {
      color: #ffc107;
  }
  
  .post-excerpt {
      color: #666;
      line-height: 1.6;
      margin-bottom: 1.5rem;
      flex: 1;
  }
  
  .read-more {
      display: inline-block;
      background: #000;
      color: white;
      padding: 0.75rem 1.5rem;
      text-decoration: none;
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.3s ease;
      text-align: center;
      margin-top: auto;
  }
  
  .read-more:hover {
      background: #ffc107;
      color: #000;
      transform: translateY(-2px);
      text-decoration: none;
  }
  
  .no-posts {
      text-align: center;
      color: #666;
      font-size: 1.2rem;
      grid-column: 1 / -1;
      padding: 3rem;
  }
  
  /* Responsive Design */
  @media (max-width: 992px) {
      .latest-posts-container {
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
      }
  }
  
  @media (max-width: 768px) {
      #latest-project {
          padding: 2rem 1rem;
      }
  
      #latest-project h2 {
          font-size: 2rem;
          margin-bottom: 2rem;
      }
  
      .latest-posts-container {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
      }
  
      .post-item {
          width: 100%;
      }
  
      .post-thumbnail {
          height: 180px;
      }
      
  }
  @media (max-width:600px){
    .travel-post-card{
      flex-direction: column;
      width: 306px;

    }

  }
  @media (max-width: 480px) {
      #latest-project h2 {
          font-size: 1.75rem;
      }
  
      .post-content {
          padding: 1rem;
      }
  
      .post-title a {
          font-size: 1.1rem;
      }
  
      .post-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.25rem;
      }
  }
  
  /* Animaciones */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  .post-item {
      animation: fadeInUp 0.6s ease forwards;
  }
  
  .post-item:nth-child(1) { animation-delay: 0.1s; }
  .post-item:nth-child(2) { animation-delay: 0.2s; }
  .post-item:nth-child(3) { animation-delay: 0.3s; }
  .post-item:nth-child(4) { animation-delay: 0.4s; }
  .post-item:nth-child(5) { animation-delay: 0.5s; }
  .post-item:nth-child(6) { animation-delay: 0.6s; }

  .banner-section-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem;
    background-color: #f2f2f2;
  }

  .banner-box-v2 {
    position: relative;
    overflow: hidden;
    height: 250px;
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .banner-box-v2:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  .banner-box-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
  }

  .banner-box-v2:hover::before {
    background: rgba(0, 0, 0, 0.6);
  }

  .banner-text-v2 {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    z-index: 2;
    transition: transform 0.3s ease;
  }

  .banner-box-v2:hover .banner-text-v2 {
    transform: translateY(-5px);
  }

  .banner-v2-pueblos-magicos {
    background-image: url('assets/images/IglesiaCholula.png');
    background-size: cover;
    background-position: center;
  }

  .banner-v2-cervecerias {
    background-image: url('assets/images/brewery.jpg');
    
    background-size: cover;
    background-position: center;
  }

  .banner-v2-gastro {
    background-image: url('assets/images/gastronomyBanner.png');
    background-size: cover;
    background-position: center;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 768px) {
    .banner-section-v2 {
      grid-template-columns: 1fr;
    }
  }



  .hero-sectionV2 {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  
  .hero-videoV2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.6);
  }
  
  .hero-contentV2 {
    position: relative;
    text-align: center;
    padding: 20px;
    animation: fadeInUp 1.5s ease-out forwards;
    opacity: 0;
    max-width: 800px;
  }
  
  .hero-titleV2 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    animation: slideInTop 1s ease-out forwards;
  }
  
  .hero-subtitleV2 {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    animation: fadeIn 2s ease-in forwards;
  }
  
  .cta-buttonV2 {
    display: inline-block;
    padding: 14px 28px;
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: background 0.3s ease;
    animation: fadeIn 2.5s ease-in forwards;
  }
  
  .cta-buttonV2:hover {
    background: #e25500;
  }
  
  /* Animaciones */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideInTop {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  .hero-sectionV3 {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0 20px;
  }
  .hero-sectionV3-cerveceria {
    position: relative;
    overflow: hidden;
    
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding:140px;
  }
  .hero-section-about {
    position: relative;
    overflow: hidden;
    padding: 4.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    
  }
  .hero-sectionV3-index {
    position: relative;
    overflow: hidden;
    
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 100px 20px;
  }
  
  .hero-videoV3 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.5);
  }
  
  .hero-contentV3 {
    position: relative;
    max-width: 800px;
    z-index: 1;
    animation: fadeInUp 1.5s ease-out forwards;
    opacity: 0;
  }
  
  .hero-titleV3 {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    animation: slideInTop 1s ease-out forwards;
color: black;
    color: #ff9d1a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.609);
   
    text-transform: uppercase;
  }
  
  .hero-subtitleV3 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    animation: fadeIn 2s ease-in forwards;
  }
  
  /* Buscador */
  .v3-search-wrapper {
    margin-bottom: 2rem;
    animation: fadeIn 2.2s ease-in forwards;
  }
  
  .v3-search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    overflow: hidden;
    padding: 5px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .v3-search-input {
    flex: 1;
    padding: 12px 20px;
    font-size: 1rem;
    background: transparent;
    border: none;
    color: white;
    outline: none;
    width: 100%;
    ::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }
  }
  
  .v3-search-button {
    background-color: black;
    color: #ffe165;
    
    border: none;
    
    padding: 12px 20px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 0 40px 40px 0;
    transition: background 0.3s ease;
  }
  
  .v3-search-button:hover {
    background: #e25600;
  }
  #search::placeholder{
    color:white;
    text-shadow:2px 2px 2px black;
    font-size:1.4rem
  }
  /* CTA */
  .cta-buttonV3 {
    display: inline-block;
    padding: 14px 28px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: background 0.3s ease;
    animation: fadeIn 2.5s ease-in forwards;


    background: linear-gradient(100deg, #fff1a0 10%, #ff5e5e 75%, #ff9d1a 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
  }
  
  .cta-buttonV3:hover {
    background-color: #e25600;
  }
  
  /* Animaciones */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideInTop {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  


  .explore-sectionV3 {
    padding: 80px 20px;
    background: #f7f7f7;
    animation: fadeInUp 1.2s ease forwards;
  }
  
  .contentV3 {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .section-titleV3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
    text-transform: uppercase;
    animation: slideInTop 1s ease-out forwards;
  }
  
  .intro-textV3,
  .description-textV3 {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 1rem;
    line-height: 1.6;
    animation: fadeIn 1.5s ease forwards;
  }
  
  .destinations-gridV3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
  
  .destination-itemV3 {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInCard 1.5s ease forwards;
  }
  
  .destination-itemV3:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
  }
  
  .img-wrapperV3 {
    height: 160px;
    overflow: hidden;
  }
  
  .img-wrapperV3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .destination-itemV3:hover img {
    transform: scale(1.05);
  }
  
  .destination-titleV3 {
    padding: 16px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #222;
  }
  
  /* Animaciones */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeInCard {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes slideInTop {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  




  .destinations-gridV3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    justify-items: center;
  }
  
  /* For screens <= 600px: 1 column centered */
  @media (max-width: 600px) {
    .destinations-gridV3 {
      grid-template-columns: 1fr;
    }
  }
  
  /* Prevent single item being left alone in a row by centering last item */
  @media (min-width: 601px) {
    .destination-itemV3:nth-last-child(1):nth-child(odd) {
      grid-column: span 2;
      justify-self: center;
    }
  }



  .explore-sectionV4 {
    padding: 80px 20px;
    background: #f9f9f9;
  }
  
  .contentV4 {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .section-titleV4 {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    color: #222;
  }
  
  .intro-textV4,
  .description-textV4 {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  .destinations-gridV4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
    justify-items: center;
  }
  
  .destination-itemV4 {
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
  }
  
  .destination-itemV4:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  .img-wrapperV4 {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
  }
  
  .img-wrapperV4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  
  .destination-itemV4:hover img {
    transform: scale(1.05);
  }
  
  .destination-titleV4 {
    position: absolute;
  }  

.categories{
    margin-bottom: 4.5rem;
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
}

.V3-container {
    max-width: 1200px;
    margin: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .V3-featured-post {
    position: relative;
    width: 100%;
    
    border-radius: 12px;
  }
  
  .V3-featured-post img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  
  .V3-overlay {
    position: absolute;
    bottom: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 70%);
    color: #fff;
    width: 100%;
  }
  .V3-category-section{
    max-width: 900px;
    margin-left:auto;
    margin-right: auto;
  }
  .V3-category-badge,
  .V3-category-small {
    background-color: #ffe165;
    color: #000000;
    
    
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
  }
  
  .V3-meta, .V3-meta-small {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #ffe165;
    text-shadow: 2px 2px 5px black;
  }
  
  .V3-read-more {
    display: inline-block;
    margin-top: 0.8rem;
    color: #fff;
    
    
    font-weight: bold;
    text-transform: none;
  }
  
  .V3-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .V3-secondary-post {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .V3-secondary-post img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .V3-post-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .V3-post-item {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  
  .V3-post-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
  }
  
  .V3-text-content h4 {
    font-size: 1rem;
    margin: 0;
  }



/* Estilos para la sección "Los más leídos" */
.v3-most-read {
    margin-bottom: 60px;
    padding: 40px 0;
  }
  
  .v3-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .v3-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #2c3e50;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .v3-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 2px;
  }
  
  .v3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 40px;
  }
  
  .v3-card {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    text-decoration: none;
    height: 400px;
    cursor: pointer;
    will-change: transform;
  }
  
  .v3-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  }
  
  .v3-card-image {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  
  .v3-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.1) 0%,
      rgba(0,0,0,0.3) 50%,
      rgba(0,0,0,0.8) 100%
    );
    z-index: 2;
    
  }
  
  .v3-card:hover .v3-card-image::before {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.2) 0%,
      rgba(0,0,0,0.4) 50%,
      rgba(0,0,0,0.9) 100%
    );
  }
  
  .v3-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    will-change: transform;
  }
  
  .v3-card:hover .v3-card-image img {
    transform: scale(1.05);
  }
  
  .v3-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px;
    z-index: 3;
    color: white;
  }
  
  .v3-card-meta .post-category {
    background:#ffe165;
    color:black;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .v3-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    opacity: 0.9;
    flex-wrap: wrap;
  }
  
  .v3-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .v3-card-meta .meta-separator {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
  }
  
  .v3-post-title {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 12px 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.2s ease;
    will-change: transform;
  }
  
  .v3-card:hover .v3-post-title {
    transform: translateY(-3px);
  }
  
  .v3-excerpt {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  

  .travel-blog-container {
    display: flex
;
    flex-direction: row-reverse;
    align-items: flex-start;
    
    padding: 2rem;
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .main-posts {
    flex: 3;
  }
  
  .section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .travel-post-card {
    display: flex;
    margin-bottom: 2rem;
    gap: 1rem;
    align-items: center;
  }
  
  .travel-post-thumb img {
    border-radius: 10px;
    
    height: 140px;
    object-fit: cover;
  }
  /* ========== Responsive ========== */
@media screen and (min-width: 800px) {
  .travel-post-thumb img  {
    
    width: 200px;
  }
}
  
  .travel-post-content {
    flex: 1;
  }
  
  .travel-category {
    font-size: 0.9rem;
    color: #ff9700;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  .travel-post-content h3 {
    margin: 0.3rem 0;
  }
  
  .travel-post-content p {
    color: #444;
  }
  
  
  

  .travel-sidebar {
    flex: 1;
    position: sticky;
    top: 2rem;
  }
  
  .sidebar-inner {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  }
  
  .author-box {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .author-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
  }
  
  .author-name {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  .author-bio {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
  }
  
  .recent-posts-box {
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
  }
  
  .recent-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .recent-post-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .recent-post-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
  }
  
  .recent-post-link:hover .recent-title-text {
    color: #0099cc;
  }
  
  .recent-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 0.8rem;
  }
  
  .recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .recent-title-text {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
  }
  
  /* ========== Sidebar Travel v2 ========== */
.travel-sidebar-v2 {
  flex: 1;
  position: sticky;
  top: 2rem;
  max-width: 350px;
}

.sidebar-inner-v2 {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  min-width: 200px;
}

/* Autor */
.author-box-v2 {
  text-align: center;
  margin-top: .6rem;
  margin-bottom: .8rem;
}

.authors-avatar-v2 {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.category-image{
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 1rem;
}
.image-area{
  position: relative;
}
.category-name{
  position: absolute;
  color:white;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.link {
  text-decoration: none;

}
    
.author-name-v2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.author-bio-v2 {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.4;
  margin: 0 auto;
}

/* Últimos posts */
.recent-posts-box-v2 {
  border-top: 1px solid #eee;
  padding-top: 1.5rem;
}

.recent-title-v2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.recent-posts-list-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-post-item-v2 {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.recent-post-link-v2 {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.recent-post-link-v2:hover .recent-title-text-v2 {
  color: #0099cc;
}

.recent-thumb-v2 {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 0.8rem;
}

.recent-thumb-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-title-text-v2 {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ========== Responsive ========== */
@media screen and (max-width: 800px) {
  .travel-blog-container {
    flex-direction: column;
    align-items: center;

  }

  .travel-sidebar-v2 {
    position: relative;
    top: 0;
    max-width: 100%;
    margin-top: 2rem;
  }

  .recent-post-item-v2 {
    flex-direction: row;
  }

  .recent-title-text-v2 {
    font-size: 0.95rem;
  }
}

.main-posts-v2 {
  flex: 3;
}

.section-title-v2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0.5rem;
}

.posts-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.travel-post-card-v2 {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}

.travel-post-card-v2:hover {
  transform: translateY(-5px);
}

.card-thumb-v2 img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content-v2 {
  padding: 1.2rem;
}

.card-category-v2 {
  font-size: 0.75rem;
  color: #0099cc;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.card-title-v2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.card-title-v2 a {
  color: #222;
  text-decoration: none;
}

.card-title-v2 a:hover {
  color: #0099cc;
}

.card-excerpt-v2 {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.read-more-v2 {
  font-weight: 600;
  font-size: 0.9rem;
  color: #0099cc;
  text-decoration: underline;
  display: inline-block;
  margin-top: auto;
}
.category-wrapper{
  list-style: none;
}
/* Responsivo */
@media screen and (min-width: 768px) {
  .posts-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-thumb-v2 img {
    height: 180px;
  }
}

@media screen and (min-width: 1024px) {
  .card-thumb-v2 img {
    height: 200px;
  }
}





.form-busqueda-propiedades {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
}

.form-busqueda-propiedades .campo-busqueda {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

.form-busqueda-propiedades label {
    font-weight: bold;
    margin-bottom: 5px;
}

.form-busqueda-propiedades input,
.form-busqueda-propiedades select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.btn-buscar {
    background: #ff6f00;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.btn-buscar:hover {
    background: #e65c00;
}




.search-container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .search-title {
            text-align: center;
            color: #333;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: #000000;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .search-subtitle {
            text-align: center;
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

       

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-input, .form-select {
            padding: 15px 18px;
            border: 2px solid #e1e8ed;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .search-btn {
            padding: 15px 30px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .search-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }

        .search-btn:active {
            transform: translateY(-1px);
        }

        .quick-filters {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .quick-filter {
            padding: 8px 16px;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border: 1px solid rgba(102, 126, 234, 0.2);
            border-radius: 25px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quick-filter:hover {
            background: rgba(102, 126, 234, 0.2);
            transform: translateY(-2px);
        }

        @media (max-width: 8008px) {
            
            .search-title {
                font-size: 2rem;
            }
            
            .search-container {
                padding: 20px;
                margin: 10px;
            }
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            vertical-align: middle;
        }
      





.price-badge {
    position: absolute;
    bottom: -8px;
    background: black;
    right: -4px;
    backdrop-filter: blur(15px);
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

.price-amount {
    font-weight: 800;
    font-size: 1.1rem;
    color: #dddddd;
    text-shadow:2px 2px 2px black;
    display: block;
}

.badge-type {
    background: rgba(0, 0, 0, 0.9);
    color: white;
}

.search-hero{
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 800px) {
  aside{
    display: flex
;
    flex-direction: column;
    align-items: center;
  }
  .info{
    display: flex;
    flex-direction:column-reverse
  }
}
 



@media screen and (max-width: 800px) {
  
 .imagen-unica-aside{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
.hero-contentS{
  position: relative;
      z-index: 2;
      justify-content: center;
      align-items: center;
      height: 100%;
      
      color: #fff;
      text-align: center;
      /* padding: 20px; */
      margin-left: auto;
      margin-right: auto;
      
}

.search-form{
  justify-content: center;
    display: flex
;
    flex-direction: column;
}
.view-toggle{
    display:none;
  }
}
.imagen-aside{
  width: 100%;
 }
@media screen and (min-width: 800px) {
  
.search-hero{
  display: flex;
  flex-direction: row;
  gap: 10px;
}

  .search-form {
    display: flex;
    
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    
}
.info{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  gap: 10px;
  
}

.info-propiedad{
  width: 85%;
  position: relative;
}
aside{
  
  display: flex;
  flex-direction: column;
  align-items: center;
  

  flex: 1;
    
    top: 20px; /* Fijo con un pequeño margen */
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
}

.article{
  display: flex;
}



 /* Aside */
  aside {
    color: white;
    flex: 1;
    position: sticky;
    top: 20px;
    background:#0A1A2A;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
    text-align: center;
  }


}

  /* Foto del agente */
  .agent-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ff9800;
    margin-bottom: 10px;
  }
  .agent-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ff9800;
    margin-bottom: 10px;
  }

  /* Botones CTA */
  .cta-btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
  }

  .reserve-btn {
    background: #000000;
    color: white;
  }

  .contact-btn {
    background: #007BFF;
    color: white;
  }

  /* Redes sociales */
  .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }

  .social-links a {
    text-decoration: none;
    color: white;
    background: #555;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
  }

  .social-links a:hover {
    background: #ff9800;
  }

  .property-location {
   display: flex
;
    align-items: flex-start;
    gap: 8px;
    color: #000000;
    margin-bottom: 18px;
    font-size: 0.95rem;
    flex-direction: column;
    font-weight: 500;
}


.ciudad{
    color: black;
    text-align:left;
    margin-top:1rem;
}
.city{
  font-weight:bold;
  margin-left:1.6rem;
}