:root{

--bg:#faf8f5;

--white:#ffffff;

--primary:#8b7355;

--primary-hover:#705c44;

--text:#2e2e2e;

--light:#6d6d6d;

--border:#ece7e0;

--shadow:0 10px 30px rgba(0,0,0,.08);

}


*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;

}


img{

width:100%;

display:block;

object-fit:cover;

}


.container{

width:min(1200px,92%);

margin:auto;

}


/* HEADER */

header{

position:sticky;

top:0;

z-index:1000;

background:#ffffffea;

backdrop-filter:blur(10px);

border-bottom:1px solid var(--border);

}


.navbar{

height:75px;

display:flex;

align-items:center;

justify-content:space-between;

}


.logo{

font-size:1.3rem;

font-weight:700;

}


#menu-toggle{

display:none;

}


.menu-icon{

font-size:28px;

cursor:pointer;

}


nav{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:white;

padding:20px;

}


nav a{

display:block;

padding:12px;

text-decoration:none;

color:var(--text);

font-weight:600;

}


#menu-toggle:checked~nav{

display:block;

}


/* HERO */

.hero{

padding:60px 0;

display:grid;

gap:40px;

align-items:center;

}


.tag{

display:inline-block;

padding:8px 14px;

background:#efe9e2;

border-radius:30px;

margin-bottom:20px;

}


.hero h1{

font-family:'Playfair Display',serif;

font-size:3rem;

line-height:1.1;

margin-bottom:25px;

}


.hero p{

color:var(--light);

font-size:1.1rem;

}


.hero-buttons{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}


.btn{

padding:14px 26px;

background:var(--primary);

color:white;

text-decoration:none;

border-radius:50px;

font-weight:600;

}


.btn:hover{

background:var(--primary-hover);

}


.btn-outline{

background:transparent;

color:var(--primary);

border:2px solid var(--primary);

}


/* SECCIONES */

section{

padding:80px 0;

}


.titulo{

text-align:center;

font-size:2.3rem;

margin-bottom:50px;

font-family:'Playfair Display',serif;

}


/* GALERIA */

.galeria{

display:grid;

gap:25px;

}


.card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}


.card:hover{

transform:translateY(-8px);

}


.card img{

height:260px;

}


.info{

padding:25px;

}


.categoria{

font-size:.8rem;

background:#f3efe9;

padding:6px 12px;

border-radius:20px;

display:inline-block;

margin-bottom:15px;

}


.info h3{

margin-bottom:10px;

}


/* BLOG */

.blog{

display:grid;

gap:25px;

}


.post{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

}


.post h3{

margin-bottom:15px;

}


/* SOBRE MI */

.about{

display:grid;

gap:40px;

align-items:center;

}


.about img{

border-radius:25px;

}


.about h2{

font-family:'Playfair Display',serif;

font-size:2.5rem;

margin-bottom:20px;

}


/* FOOTER */

footer{

background:#222;

padding:60px 0;

text-align:center;

color:white;

}


footer h3{

margin-bottom:20px;

}


/* TABLET */

@media(min-width:768px){

.menu-icon{

display:none;

}

nav{

display:flex;

position:static;

width:auto;

padding:0;

gap:25px;

}

nav a{

padding:0;

}

.galeria{

grid-template-columns:repeat(2,1fr);

}

.blog{

grid-template-columns:repeat(3,1fr);

}

}


/* PC */

@media(min-width:1024px){

.hero{

grid-template-columns:1fr 1fr;

}

.galeria{

grid-template-columns:repeat(4,1fr);

}

.about{

grid-template-columns:1fr 1fr;

}

.hero h1{

font-size:4.8rem;

}

}