/* ======================================================
   CONTACTO – ESTILO EDITORIAL SALMÓN
   ====================================================== */

.contact-page{
font-family:'Lora',serif;
color:#2b2b2b;
line-height:1.7;
}


/* ======================================================
   INTRO
   ====================================================== */

.contact-intro{
max-width:1100px;
margin:5rem auto 4rem;
padding:0 1rem;
}

.contact-intro-wrapper{
display:flex;
align-items:center;
gap:3rem;
}

.contact-illustration img{
max-width:360px;
height:auto;
}

.contact-intro-text{
max-width:600px;
}

.contact-intro-text h2{
font-family:'Dancing Script',cursive;
font-size:3rem;
color:#5b3a1a;
margin-bottom:1rem;
}

.contact-intro-text p{
text-align:justify;
font-size:1.05rem;
}



/* ======================================================
   UBICACIÓN
   ====================================================== */

.contact-location{
max-width:1100px;
margin:3rem auto 5rem;
padding:0 1rem;
}

.contact-location h2{
font-family:'Dancing Script',cursive;
font-size:2.6rem;
text-align:center;
color:#5b3a1a;
margin-bottom:2rem;
}

.location-grid{
display:flex;
gap:3rem;
}

.location-box{
flex:1;
background:#F6D7D3;
border-radius:24px;
padding:2.2rem;
box-shadow:0 14px 30px rgba(0,0,0,0.10);
transition:transform .3s ease, box-shadow .3s ease;
}

.location-box:hover{
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.location-box img{
display:block;
margin:0 auto 1.2rem;
max-width:220px;
}

.location-box h3{
font-family:'Dancing Script',cursive;
font-size:1.8rem;
text-align:center;
color:#5b3a1a;
margin-bottom:1rem;
}

.location-box p{
text-align:justify;
margin-bottom:.8rem;
}



/* ======================================================
   FAQ
   ====================================================== */

.faq-section{
max-width:900px;
margin:0 auto 5rem;
padding:0 1rem;
}

.faq-section h2{
font-family:'Dancing Script',cursive;
font-size:2.6rem;
color:#5b3a1a;
text-align:center;
margin-bottom:2rem;
}

.faq-container{
display:flex;
flex-direction:column;
gap:1rem;
}

.faq-item{
background:#F6D7D3;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 22px rgba(0,0,0,0.10);
transition:transform .25s ease;
}

.faq-item:hover{
transform:translateY(-2px);
}

.faq-question{
width:100%;
text-align:left;
padding:1rem 1.4rem;
font-family:'Lora',serif;
font-size:1rem;
border:none;
background:none;
cursor:pointer;
color:#5b3a1a;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
padding:0 1.4rem;
}

.faq-answer p{
margin-bottom:1rem;
text-align:justify;
}



/* ======================================================
   CIERRE
   ====================================================== */

.contact-cta{
max-width:850px;
margin:0 auto 5rem;
text-align:center;
padding:0 1rem;
}

.contact-cta p{
text-align:justify;
margin-bottom:2rem;
}

.contact-buttons{
display:flex;
justify-content:center;
gap:1rem;
flex-wrap:wrap;
}


/* BOTONES */

.btn-primary,
.btn-secondary{
font-family:'Lora',serif;
padding:.7rem 1.8rem;
border-radius:28px;
text-decoration:none;
font-size:.95rem;
transition:all .3s ease;
}

.btn-primary{
background:#4e2f0e;
color:#F6D7D3;
}

.btn-secondary{
border:1.5px solid #4e2f0e;
color:#4e2f0e;
}

.btn-primary:hover,
.btn-secondary:hover{
background:#3c240b;
color:#F6D7D3;
}



/* ======================================================
   DEGRADÉ LATERAL SUAVE
   ====================================================== */

.page-background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
90deg,
#f7d7d2 0%,
#ffffff 18%,
#ffffff 82%,
#f7d7d2 100%
);
z-index:-1;
}



/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:900px){

.contact-intro-wrapper{
flex-direction:column;
text-align:center;
}

.contact-intro-text p{
text-align:justify;
}

.location-grid{
flex-direction:column;
}

.contact-illustration img{
max-width:260px;
}

}