* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url(../fonts/Montserrat-Light.ttf);
}

@font-face {
    font-family: 'Cormorant';
    src: url(../fonts/Cormorant-Light-Garamond.ttf);
}

@font-face {
    font-family: 'Cinzel';
    src: url(../fonts/Cinzel-Black.otf);
}

@font-face {
    font-family: 'Lora';
    src: url(../fonts/Lora.ttf);
}

@font-face {
    font-family: 'Pinyon';
    src: url(../fonts/Pinyon.ttf);
}


:root {
    --burdeo-oscuro: #762629;
    --burdeo-claro: #c86963;
    --verde-oscuro: #574f22;
    --verde-claro: #b8a87d;
    --salmon-claro: #e49972;
    --naranja: #c46c3a;
    --crema: #f8f6f1;
    --texto: #4b433d;
}

html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    position:relative;
    color:var(--verde-oscuro);
    background-image:url(../img/rayas\ verdes.jpeg);
    background-repeat:repeat;
    background-size:450px auto;
}

img{
    max-width:100%;
}


.hero-subtitle{
    font-family:'Cinzel', serif;
    letter-spacing:6px;
    text-transform:uppercase;
}


.hero{
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:120px 20px;
}

.hero-container{
    max-width:850px;
    width:100%;
    text-align:center;
}

.hero-container img{
    margin-bottom: 30px;
    margin-top: -20px;
    width: 250px;
}

.hero-names{
    font-size: 5.8rem;
    font-weight:300;
    line-height:1.10;
    color:var(--burdeo-oscuro);
    font-family: 'Pinyon';
}

.hero-names > .separacion_y {
    font-size:2.2rem;
    margin:10px 0;
    color:var(--verde-oscuro);
}

.hero-text {
    font-family:'Cormorant', sans-serif;
    max-width:520px;
    margin:60px auto;
    font-size:1.2rem;
    line-height:1.8;
    color:var(--texto);
}

.hero-subtitle {
    font-family:'Cinzel', serif;
    margin-top:30px;
    letter-spacing:8px;
    font-size:1.1rem;
    color:var(--verde-oscuro);
}

.hero-date {
    margin:30px 0;
    font-family:'Pinyon', serif;
    font-size:3.4rem;
    font-weight:300;
    color:var(--burdeo-oscuro);
}

.divider {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
}

.divider span {
    width:90px;
    height:1px;
    background:var(--verde-claro);
}

.divider img {
    width:16px;
    padding-top: 18px;
}

.celebracion{
    padding:80px 20px;
}

.section-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 1.8rem;
    padding-bottom: 40px;
    font-family: 'Cinzel';
}

.celebracion-container{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.celebracion-img{
    width:100%;
    max-width:420px;
    display:block;
    margin:0 auto 50px;
}

.celebracion-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:80px;
}

.celebracion-card h3{
    font-family:'Cinzel';
    font-size:1.2rem;
    font-weight:400;
    color:var(--verde-oscuro);
    letter-spacing:2px;
    margin-bottom:18px;
}

.star{
    color:var(--burdeo-oscuro);
    font-size:1.3rem;
    margin-bottom:18px;
}

.celebracion-card p{
    font-family:'Cormorant';
    font-size:1.45rem;
    line-height:1.5;
    color:var(--texto);
    margin-bottom:15px;
}

.celebracion-card span{
    font-family:'Cormorant';
    font-weight: bold;
    font-size:1.35rem;
    font-style: italic;
    color:var(--burdeo-oscuro);
}

.como-llegar{
    padding:100px 20px;
}

.como-llegar .container{
    max-width:1100px;
    margin:auto;
}

.ruta{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:40px;
}

.lugar{
    text-align:center;
    margin-top: 50px;
}

.lugar img{
    width:320px;
    margin-bottom:10px;
    mask-image: linear-gradient(
        black 80%, 
        transparent
    );
}

.lugar h3{
    font-family:'Cormorant';
    font-size:1.7rem;
    color:var(--texto);
    margin-bottom:10px;
}

.lugar p{
    font-family:'Cormorant';
    line-height:1.6;
    color:var(--texto);
}

.lugar span a {
    color: var(--burdeo-oscuro);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Cormorant';
    font-style: italic;


}


.road{
    fill:none;
    stroke:var(--verde-oscuro);
    stroke-width:5;
    stroke-linecap:round;
    stroke-dasharray:12 10;
}

.road-tag{
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);
    background:var(--verde-oscuro);
    color:white;
    padding:6px 14px;
    border-radius:20px;
    font-size:.85rem;
    font-family:'Montserrat-Light';
}

.road-start{
    position:absolute;
    bottom:24px;
    left:10px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--burdeo-oscuro);
}

.confirmacion{
    padding:120px 20px;
}

.confirmacion-container{
    max-width:700px;
    margin:auto;
}

.confirmacion .section-title{
    text-align:center;
    margin-bottom:70px;
}

.campo{
    margin-bottom:35px;
}

.campo label{
    display:block;
    margin-bottom:12px;
    font-family:'Cinzel';
    font-size:.9rem;
    color:var(--verde-oscuro);
    letter-spacing:2px;
}

.campo input,
.campo textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--verde-claro);
    padding:12px 0;
    font-family:'Montserrat-Light';
    font-size:1rem;
    color:var(--texto);
    outline:none;
}

.campo textarea{
    resize:none;
    min-height:90px;
}

.campo input:focus,
.campo textarea:focus{
    border-color:var(--burdeo-oscuro);
}

.acompanante{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:.4s;
}

.acompanante.activo{
    max-height:300px;
    opacity:1;
}

.check{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-family:'Montserrat-Light';
    margin-bottom:35px;
}

.check input{
    display:none;
}

.checkmark{
    width:20px;
    border-radius: 50%;
    height:20px;
    border:1px solid var(--verde-oscuro);
    position:relative;
}

.check input:checked + .checkmark::after{
    content:"";
    position:absolute;
    inset:4px;
    background:var(--verde-oscuro);
    border-radius: 50%;
}

.subtitulo{
    margin:50px 0 25px;
    text-align:center;
    font-family:'Cinzel';
    color:var(--verde-oscuro);
    font-size:1rem;
    letter-spacing:3px;
}

.transporte{
    display:flex;
    gap:20px;
    margin-bottom:45px;
}



.opcion{
    flex:1;
    cursor:pointer;
}

.opcion input{
    display:none;
}

.opcion span{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    border-radius: 40px;
    border:1px solid var(--burdeo-oscuro);
    transition:.3s;
    font-family:'Montserrat-Light';
}

.opcion input:checked + span{
    background:var(--burdeo-oscuro);
    color:white;
    border-color:var(--burdeo-oscuro);
}

button{
    width:100%;
    margin-top:20px;
    padding:18px;
    border:none;
    background:var(--burdeo-oscuro);
    color:white;
    font-family:'Cinzel';
    letter-spacing:2px;
    cursor:pointer;
    transition:.3s;
    border-radius: 40px;
}

button:hover{
    background:var(--burdeo-claro);
}

.footer{
    padding:70px 20px 30px;
    border-top:1px solid var(--verde-claro);
}

.footer-container{

    max-width:600px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 180px;
    align-items:center;
    column-gap:20px;
}

.footer-contacto{
    text-align:left;
}

.persona{
    margin-bottom:35px;
}

.persona:last-child{
    margin-bottom:0;
}

.persona h3{
    font-family:'Cormorant';
    color:var(--burdeo-oscuro);
    font-size:2rem;
    font-weight:400;
    margin-bottom:8px;

}

.persona p{
    font-family:'Cormorant';
    color:var(--texto);
    font-size:1.5rem;
    white-space:nowrap;

}

.footer-perro{
    display:flex;
    justify-content:flex-end;
}

.footer-perro img{
    width:180px;
    display:block;
}

.footer-heading{
    max-width:650px;
    margin:0 auto 60px;
    text-align:center;
}

.footer-heading h2{
    font-family:'Cinzel';
    font-size:1.2rem;
    letter-spacing:5px;
    color:var(--burdeo-oscuro);
    margin-bottom:18px;
}

.footer-heading p{
    font-family:'Cormorant';
    font-size:1.6rem;
    line-height:1.6;
    color:var(--texto);
}

.webyboda {
    background-color: var(--verde-oscuro);
    color: var(--crema);
    padding: 10px;
    text-align: center;
    font-family: 'Cormorant';
    letter-spacing: 1.25px;

}

.webyboda a {
    text-decoration: none;
    color: var(--crema);

}

.timeline{
    padding:120px 20px;
}

.timeline-container{
    max-width:700px;
    margin:auto;
    text-align:center;

}


.timeline-item{
    position:relative;
    margin-bottom:80px;
    padding:0 20px;
}

.timeline-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--burdeo-oscuro);
    margin:0 auto 18px;
    position:relative;
    z-index:2;
}

.timeline-hour{
    display:block;
    font-family:'Cinzel';
    color:var(--burdeo-oscuro);
    letter-spacing:2px;
    font-size:1rem;
    margin-bottom:10px;
}

.timeline-item h3{
    font-family:'Cormorant';
    font-size:2rem;
    color:var(--burdeo-oscuro);
    margin-bottom:10px;
}

.timeline-item p{
    font-family:'Montserrat-Light';
    line-height:1.6;
    color:var(--texto);
}

.mensaje-confirmacion{
    text-align: center;
    margin: 20px;
    color: var(--verde-oscuro);
    font-weight: bold;
    font-family: 'Cormorant';
    letter-spacing: 1.2px;
}

/**/

.timeline{
position:relative;
max-width:1100px;
margin:0 auto;
padding-top: 70px;
padding-left: 20px;
padding-right: 20px;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:100px;
bottom:100px;
width:2px;
background:#c8a18d;
transform:translateX(-50%);
}

.timeline-item{
display:grid;
grid-template-columns:1fr 80px 1fr;
align-items:center;
min-height:145px;
position:relative;
}

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

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

.timeline-line{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:2;
}

.circle{
width:18px;
height:18px;
border:2px solid #c8a18d;
background:#fff;
border-radius:50%;
position:relative;
}

.timeline-content{
display:flex;
flex-direction:column;
justify-content:center;
padding-left:20px;
}

.timeline-content .subtitle{
font-size:15px;
letter-spacing:2px;
color:#8d6655;
margin-bottom:8px;
font-family:"Cinzel";
}

.timeline-content h3{
font-family:"Cormorant";
font-size:2rem;
font-weight:400;
color:#7d5b4c;
margin-bottom:10px;
}

.timeline-content p{
font-family:"Cormorant";
font-size:1.5rem;
font-style:italic;
color:#6f5346;
}

.timeline-buses {
    margin-top:80px;
}

.bus-item{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.bus-image{

    display:flex;
    justify-content:flex-end;

}

.bus-image img{

    width:320px;
    max-width:100%;

}

.bus-content{

    text-align:left;

}

.bus-title{

    display:block;

    font-size:15px;

    letter-spacing:3px;

    color:#8d6655;

    margin-bottom:12px;

    font-weight:600;

}

.bus-subtitle{

    display:block;

    font-family:"Cormorant Garamond", serif;

    font-size:11px;

    color:#7d5b4c;

}

.bus-divider{

    width:55px;
    height:1px;

    background:#b98d74;

    margin:15px 0;

}

.bus-time{

    font-family:"Cormorant Garamond", serif;

    font-size:30px;

    color:#6f5346;

}

.img-line-corazon {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: -130px;
    margin-top: -120px;
}

.img-line-corazon img {
    width: 320px;
}

.img-line-grandia {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: -80px;
}

.img-line-grandia img {
    width: 320px;

}

/* LOADER BOTÓN FORMULARIO */

#btnEnviar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.loader{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.5);
    border-top:2px solid white;
    border-radius:50%;
    display:none;
    animation:girar .8s linear infinite;
}

#btnEnviar.cargando .loader{
    display:block;
}

#btnEnviar.cargando{
    opacity:.8;
    pointer-events:none;
}

@keyframes girar{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* FIX SAFARI TELEFONOS */

a[href^="tel"],
.persona p{
    color:var(--verde-oscuro)!important;
    text-decoration:none!important;
    font-weight:bold!important;
    -webkit-text-fill-color:var(--verde-oscuro);
}

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

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


.grandia img{
    width: 60%;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 50px 80px;
}

.lugar img  {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.8) 8%,
        black 25%,
        black 75%,
        rgba(0,0,0,0.8) 90%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.8) 8%,
        black 25%,
        black 75%,
        rgba(0,0,0,0.8) 90%,
        transparent 100%
    );
}

.grandia img  {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.8) 8%,
        black 25%,
        black 80%,
        rgba(0,0,0,0.8) 90%,
        transparent 120%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.8) 8%,
        black 25%,
        black 80%,
        rgba(0,0,0,0.8) 90%,
        transparent 120%
    );
}