@media(max-width:768px){

    .hero{
        padding:80px 25px;
    }

    .hero-logo{
        width:110px;
    }

    .hero-names{
        font-size: 2.2rem;
    }

    .hero-names span {
        font-size: 40px;
    }

    .hero-date{
        font-size:2.5rem;
    }

    .hero-text{
        font-size:1rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

}

@media (max-width:768px){

    .celebracion{
        padding:60px 25px;
    }

    .celebracion-img{
        max-width:300px;
        margin-bottom:40px;
    }

    .celebracion-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .celebracion-card h3{
        font-size:1.3rem;
        letter-spacing: 1.3px;
    }

    .celebracion-card p{
        font-size:1.25rem;
        letter-spacing: 1.5px;
    }

    .celebracion-card span{
        font-size:1.05rem;
        letter-spacing: 1px;
    }

}

@media (max-width:768px){

    .como-llegar{
        padding:70px 25px;
    }

    .ruta{
        grid-template-columns:1fr;
        gap:40px;
    }

    .camino{
        width:220px;
        height:110px;
        margin:auto;
        transform:rotate(90deg);
    }

    .lugar img{
        width:220px;
    }

    .lugar:first-child img {
        width: 310px;
        text-align: center;
        margin-left: 10px;
    }

    .lugar h3{
        font-size:1.4rem;
    }

    .lugar p{
        font-size:1.2rem;
    }

}

@media(max-width:768px){

    .confirmacion{

        padding:80px 25px;

    }

    .transporte{

        flex-direction:column;

    }

}

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr 150px;
        column-gap:15px;
    }

    .persona h3{
        font-size:1.6rem;
        margin-left: 20px;
    }

    .persona p{
        font-size:1.25rem;
        margin-left: 20px;
    }

    .footer-perro img{
        width:200px;
        max-width:100%;
        margin-right:0;
    }

}

@media(max-width:768px){

    .footer-heading{
        margin-bottom:10px;
    }

    .footer-heading h2{
        font-size:1.3rem;
    }

    .footer-heading p{
        font-size:1.25rem;
        font-style: italic;
        color: #574f22;
        text-decoration: none;
    }



}

@media(max-width:768px){

.timeline{
padding:50px 15px;
}

.timeline::before{
left:50%;
top:95px;
bottom:95px;
}

.timeline-item{
grid-template-columns:1fr 50px 1fr;
min-height:130px;
}

.timeline-item{
    grid-template-columns:1fr 50px 1fr;
    min-height:220px;
    align-items:center;
}

.timeline-image{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-right:10px;
}

.timeline-image img{
    width:130px;
    height:130px;
    object-fit:contain;
}

.timeline-line{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}

.circle{
    width:16px;
    height:16px;
}

.circle{
width:16px;
height:16px;
}

.timeline-content{
padding-left:10px;
padding-top: 30px;
}

.timeline-content .subtitle{
font-size:1.2rem;
letter-spacing:1px;
margin-bottom:5px;
color: var(--verde-oscuro);
}

.timeline-content h3{
font-size:1.4rem;
font-weight: bold;
color: var(--burdeo-oscuro);
line-height:1.2;
margin-bottom:6px;
}

.timeline-content p{
font-size:1.25rem;
font-weight: bold;
color: var(--texto);
}

}

@media (max-width:768px){

.bus-item{
    flex-direction: column;
    gap: 5px;
    text-align:center;
}

.bus-image{
    justify-content:center;
}

.bus-image img{
    width:200px;
}

.bus-content{
    text-align:center;
}

.bus-divider{
    margin:15px auto;
}

.bus-subtitle{
    font-size:20px;
}

.bus-time{
    font-size:20px;
}

.persona a{
    font-family:'Cormorant';
    color:var(--verde-oscuro);
    font-size:1.4rem;
    font-weight:bold;
    text-decoration:none;
}


}

/* FIX CÍRCULO CEREMONIA MOBILE */

@media(max-width:768px){

    .circle-ceremonia{
        position:relative;
        left:8px;
        top: 5px;
    }

    .grandia img{
        width: 100%;
        text-align: center;
        padding: 0px 0px;
        margin: 0 auto;
    }

}