*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Source Sans 3',sans-serif;
background:#f7f4ef;
color:#291605;
line-height:1.6;
}

/* ─── HEADER ─── */

.header{
position:sticky;
top:0;
z-index:999;
height:75px;
background:#a39284;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
}

.logo{
color:white;
font-size:1.5rem;
letter-spacing:2px;
}

.logo-block{
display:flex;
flex-direction:column;
gap:2px;
}

.logo-sub{
color:rgba(255,255,255,.95);
font-family:'Raleway',sans-serif;
font-size:0.62rem;
letter-spacing:5.2px;
text-transform:uppercase;
font-weight:400;
display:block;
}

/* ─── FAQ ─── */

.faq-section{
padding:100px 8%;
background:#ede8e2;
}

.faq-list{
max-width:820px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:0;
}

.faq-item{
border-bottom:1px solid #c4b3a8;
}

.faq-item:first-child{
border-top:1px solid #c4b3a8;
}

.faq-question{
width:100%;
background:none;
border:none;
text-align:left;
padding:24px 0;
font-family:'Source Sans 3',sans-serif;
font-size:1.25rem;
font-weight:600;
color:#3d1a00;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
transition:.3s;
}

.faq-question:hover{
opacity:.75;
}

.faq-icon{
font-size:1.6rem;
font-weight:300;
color:#291605;
transition:transform .3s ease;
flex-shrink:0;
}

.faq-item.open .faq-icon{
transform:rotate(45deg);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease, padding .3s ease;
}

.faq-item.open .faq-answer{
max-height:300px;
padding-bottom:24px;
}

.faq-answer p{
font-family:'Libre Baskerville',serif;
font-size:1rem;
line-height:1.85;
color:#291605;
font-style:italic;
font-weight:400;
}

.nav{
display:flex;
gap:30px;
}

.nav a{
color:white;
text-decoration:none;
font-size:1.1rem;
transition:.3s;
}

.nav a:hover{
opacity:.75;
}

.menu-toggle{
display:none;
background:none;
border:none;
color:white;
font-size:1.8rem;
cursor:pointer;
}

/* ─── HERO: foto ancho completo, texto debajo ─── */

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

.hero-image{
width:100%;
}

.hero-image img{
width:100%;
height:75vh;
object-fit:cover;
display:block;
}

.hero-text{
padding:50px 8%;
max-width:860px;
}

.hero-text p{
font-family:'Libre Baskerville',serif;
font-size:1.2rem;
font-style:italic;
font-weight:400;
line-height:1.9;
color:#291605;
}

/* ─── STATEMENT ─── */

.statement-section{
background:#ede8e2;
padding:80px 8%;
}

.statement-inner{
display:grid;
grid-template-columns:280px 1fr;
gap:70px;
align-items:center;
max-width:1100px;
margin:0 auto;
}

.statement-photo img{
width:100%;
height:480px;
object-fit:cover;
object-position:top;
display:block;
}

.statement-body{
display:flex;
flex-direction:column;
gap:0;
}

.statement-text{
font-family:'Libre Baskerville',serif;
font-size:1.2rem;
font-style:italic;
font-weight:400;
line-height:1.9;
color:#291605;
}

.statement-firma{
margin-top:36px;
}

.statement-firma img{
height:60px;
width:auto;
opacity:.85;
}

/* ─── SECCIONES ─── */

.section{
padding:100px 8%;
}

.section-title{
font-family:'Libre Baskerville',serif;
font-size:2.6rem;
font-style:italic;
font-weight:400;
margin-bottom:50px;
}

/* ─── GALERÍA ─── */

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.art-card{
cursor:pointer;
overflow:hidden;
}

.art-card img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
display:block;
transition:transform .6s ease;
max-height:260px;
}

.art-card:hover img{
transform:scale(1.03);
}

.card-title{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}

.card-number{
font-size:0.85rem;
color:#291605;
}

.card-name{
font-family:'Libre Baskerville',serif;
font-size:1rem;
font-style:italic;
font-weight:400;
}

/* ─── PAGINACIÓN ─── */

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:50px;
}

.page-btn{
background:none;
border:1px solid #a39284;
color:#291605;
font-family:'Source Sans 3',sans-serif;
font-size:1.1rem;
width:40px;
height:40px;
cursor:pointer;
transition:.3s;
}

.page-btn:hover:not(.disabled){
background:#a39284;
color:white;
}

.page-btn.active{
background:#a39284;
color:white;
}

.page-btn.disabled{
opacity:.35;
cursor:default;
}

/* ─── SOBRE MI ─── */

.about{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
padding:120px 8%;
}

.about-image img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
display:block;
}

.about-content h2{
font-family:'Libre Baskerville',serif;
font-size:2.6rem;
font-weight:700;
margin-bottom:20px;
}

.about-content p{
font-size:1.4rem;
margin-bottom:20px;
}

/* ─── CONTACTO ─── */

.contact{
padding:120px 8%;
}

.contact h2{
font-family:'Libre Baskerville',serif;
font-size:2.6rem;
font-weight:700;
margin-bottom:12px;
}

.contact > p{
font-size:1.3rem;
margin-bottom:50px;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 260px;
gap:60px;
align-items:start;
}

.contact-form{
display:flex;
flex-direction:column;
gap:20px;
}

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

.form-group label{
font-size:1rem;
font-weight:500;
letter-spacing:.5px;
color:#291605;
}

.form-group input,
.form-group textarea{
font-family:'Source Sans 3',sans-serif;
font-size:1.15rem;
color:#291605;
background:transparent;
border:none;
border-bottom:1px solid #c4b3a8;
padding:8px 0;
outline:none;
transition:border-color .3s;
resize:none;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
color:#c4b3a8;
font-style:italic;
}

.form-group input:focus,
.form-group textarea:focus{
border-bottom-color:#a39284;
}

.form-submit{
align-self:flex-start;
margin-top:10px;
padding:14px 42px;
background:#a39284;
color:white;
font-family:'Source Sans 3',sans-serif;
font-size:1.1rem;
letter-spacing:1px;
border:none;
cursor:pointer;
transition:.3s;
}

.form-submit:hover{
opacity:.85;
}

.contact-aside{
display:flex;
flex-direction:column;
gap:16px;
padding-top:28px;
}

.whatsapp-main,
.whatsapp-btn,
.instagram-link-aside{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 28px;
color:white;
text-decoration:none;
font-size:1.1rem;
transition:.3s;
border:none;
}

.whatsapp-main,
.instagram-link-aside{
background:#a39284;
}

.whatsapp-btn{
background:#a39284;
margin-top:30px;
}

.whatsapp-main:hover,
.whatsapp-btn:hover,
.instagram-link-aside:hover{
opacity:.85;
}

/* ─── MODAL ─── */

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(163,146,132,.95);
z-index:9999;
animation:fadeIn .3s ease;
}

.modal.active{
display:flex;
justify-content:center;
align-items:center;
}

.modal-content{
width:92%;
height:90vh;
background:#f7f4ef;
display:grid;
grid-template-columns:55% 45%;
position:relative;
overflow:hidden;
}

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

.modal-left img{
width:100%;
max-height:65vh;
object-fit:contain;
transition:opacity .35s ease;
cursor:zoom-in;
}

.modal-left img:hover{
opacity:.92;
}

.thumbs{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:25px;
flex-wrap:wrap;
}

.thumbs img{
width:70px;
height:70px;
object-fit:cover;
cursor:pointer;
border:2px solid transparent;
transition:.3s;
}

.thumbs img:hover{
transform:scale(1.05);
}

.thumbs img.active{
border-color:#a39284;
}

.modal-right{
padding:60px;
display:flex;
flex-direction:column;
justify-content:center;
}

.art-title-row{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}

.art-number{
font-size:1.1rem;
display:none;
}

.modal-right h2{
font-family:'Libre Baskerville',serif;
font-size:1.3rem;
font-style:italic;
font-weight:400;
line-height:1.4;
}

.art-info p{
font-size:1.3rem;
margin-bottom:10px;
}

.arrow{
position:absolute;
top:45%;
transform:translateY(-50%);
width:50px;
height:50px;
border:none;
border-radius:50%;
background:white;
color:#a39284;
font-size:24px;
cursor:pointer;
z-index:10;
}

.prev{left:15px;}
.next{right:50px;}

.close-btn{
position:absolute;
top:15px;
right:15px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:white;
color:#a39284;
font-size:30px;
font-weight:bold;
cursor:pointer;
z-index:10000;
}

.art-author{
margin-top:10px;
}

/* ─── ZOOM OVERLAY ─── */

.zoom-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(247,244,239,.97);
z-index:99999;
justify-content:center;
align-items:center;
flex-direction:column;
}

.zoom-overlay.active{
display:flex;
}

.zoom-container{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
overflow:hidden;
}

.zoom-container img#zoomImage{
max-width:90vw;
max-height:86vh;
object-fit:contain;
display:block;
user-select:none;
-webkit-user-drag:none;
will-change:transform;
}

.zoom-close{
position:absolute;
top:18px;
right:20px;
background:rgba(163,146,132,.18);
border:none;
color:#291605;
font-size:2rem;
width:48px;
height:48px;
border-radius:50%;
cursor:pointer;
z-index:100000;
transition:.25s;
}

.zoom-close:hover{
background:rgba(163,146,132,.35);
}

.zoom-hint{
position:absolute;
bottom:22px;
left:50%;
transform:translateX(-50%);
color:rgba(102,51,0,.45);
font-family:'Source Sans 3',sans-serif;
font-size:1rem;
font-style:italic;
letter-spacing:.5px;
pointer-events:none;
white-space:nowrap;
}

/* ─── FOOTER ─── */

.footer{
background:#a39284;
padding:30px 8%;
}

.footer-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.footer-logo{
height:50px;
width:auto;
object-fit:contain;
filter:brightness(0) invert(1);
}

.footer-copy{
color:rgba(255,255,255,.75);
font-size:0.95rem;
font-style:italic;
letter-spacing:.3px;
text-align:center;
}

.footer-instagram{
color:white;
font-size:1.8rem;
text-decoration:none;
transition:.3s;
}

.footer-instagram:hover{
opacity:.7;
transform:scale(1.1);
}

/* ─── ANIMACIONES ─── */

@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* ─── RESPONSIVE ─── */

@media(max-width:900px){

.hero-image img{
height:55vw;
min-height:260px;
}

.hero-text{
padding:40px 6%;
}

.gallery{
grid-template-columns:repeat(2,1fr);
}

.about{
grid-template-columns:1fr;
padding:80px 6%;
}

.contact-grid{
grid-template-columns:1fr;
}

.contact-aside{
flex-direction:row;
flex-wrap:wrap;
padding-top:0;
}

.modal-content{
grid-template-columns:1fr;
height:95vh;
overflow-y:auto;
}

.modal-left img{
max-height:50vh;
}

.next{
right:15px;
}

.nav{
display:none;
flex-direction:column;
position:absolute;
top:75px;
left:0;
right:0;
background:#a39284;
padding:20px 40px;
gap:20px;
z-index:998;
}

.nav.open{
display:flex;
}

.menu-toggle{
display:block;
}

.section-title,
.about-content h2,
.contact h2{
font-size:2.4rem;
}

.statement-text{
font-size:1.2rem;
}

.statement-inner{
grid-template-columns:1fr;
}

.statement-photo img{
height:320px;
width:100%;
}

}

@media(max-width:600px){
.gallery{
grid-template-columns:1fr;
}
}