/* =========================================================
   VARIABLES
========================================================= */
:root{

--gold-900:#7a4d00;
--gold-700:#b8860b;
--gold-500:#e0b44a;

--bg:#fffaf1;
--muted:#5a6570;

--radius:14px;

--shadow-soft:0 8px 30px rgba(0,0,0,.08);
--shadow-hover:0 14px 40px rgba(0,0,0,.15);

}

/* =========================================================
RESET
========================================================= */

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

body{

font-family:Inter,system-ui;
background:linear-gradient(180deg,#fffaf1,#fff3dc);
color:#1f2933;

}

/* =========================================================
TOPBAR
========================================================= */

.topbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:14px 5vw;

position:sticky;
top:0;

background:rgba(255,255,255,.75);
backdrop-filter:blur(10px);

z-index:50;

}

.brand{

display:flex;
gap:12px;
align-items:center;

}

.logo img{

width:52px;
height:52px;

object-fit:cover;

border-radius:10px;

}

.brand h1{

font-family:Merriweather,serif;
font-size:1.1rem;
color:var(--gold-900);

}

.brand p{

font-size:.75rem;
color:var(--muted);

}

/* NAV */

.main-nav{

display:flex;
gap:20px;

}

.main-nav a{

text-decoration:none;
font-weight:600;
font-size:.9rem;

color:#333;

padding:6px 10px;
border-radius:6px;

transition:.2s;

}

.main-nav a:hover{

background:rgba(0,0,0,.05);

}

/* =========================================================
HERO
========================================================= */

.hero{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;

gap:50px;

padding:80px 5vw;

align-items:center;

}

.hero-left h2{

font-family:Merriweather,serif;

font-size:2.6rem;

margin-bottom:14px;

line-height:1.15;

}

.lead{

color:var(--muted);

margin-bottom:22px;

}

/* BOTONES */

.actions{

display:flex;
gap:12px;

}

.btn{

padding:12px 18px;

border-radius:10px;

font-weight:600;

text-decoration:none;

transition:.25s;

}

.btn-primary{

background:var(--gold-700);
color:white;

}

.btn-primary:hover{

background:var(--gold-900);

}

.btn-outline{

border:2px solid var(--gold-700);
color:var(--gold-900);

}

.btn-outline:hover{

background:var(--gold-700);
color:white;

}

/* =========================================================
CARRUSEL
========================================================= */

.carousel{

overflow:hidden;

border-radius:16px;

box-shadow:var(--shadow-soft);

position:relative;

}

.slides{

display:flex;

transition:transform .6s ease;

}

.slide{

min-width:100%;

}

.slide img{

width:100%;
height:380px;

object-fit:cover;

}

/* controles */

.controls{

position:absolute;

top:50%;

width:100%;

display:flex;

justify-content:space-between;

transform:translateY(-50%);

padding:0 10px;

}

.ctrl-btn{

border:none;

background:rgba(0,0,0,.45);
color:white;

font-size:18px;

padding:6px 12px;

border-radius:6px;

cursor:pointer;

}

/* =========================================================
PERFILES
========================================================= */

.profiles-section{

max-width:1100px;

margin:60px auto;

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

padding:0 5vw;

}

.profile-card{

width:260px;

background:white;

padding:20px;

border-radius:16px;

box-shadow:var(--shadow-soft);

text-align:center;

transition:.3s;

}

.profile-card:hover{

transform:translateY(-6px);
box-shadow:var(--shadow-hover);

}

.profile-card img{

width:100%;
height:260px;

object-fit:cover;

border-radius:12px;

margin-bottom:10px;

}

.profile-card .name{

font-weight:700;
margin-bottom:4px;

}

.profile-card .description{

font-size:.9rem;
color:var(--muted);

}

/* =========================================================
QUICK FACTS
========================================================= */

.quick-facts{

display:flex;

justify-content:space-between;

gap:20px;

background:white;

padding:20px;

border-radius:14px;

box-shadow:var(--shadow-soft);

max-width:600px;

margin:30px auto;

}

/* =========================================================
PRODUCTOS
========================================================= */

.products{

max-width:1100px;
margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

padding:20px 5vw;

}

.product{

background:white;

padding:24px;

border-radius:14px;

box-shadow:var(--shadow-soft);

transition:.25s;

}

.product:hover{

transform:translateY(-5px);
box-shadow:var(--shadow-hover);

}

.price{

font-weight:700;
color:var(--gold-700);

}

/* =========================================================
GALERIA
========================================================= */

.gallery{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(160px,1fr));

gap:10px;

padding:20px 5vw;

}

.gallery img{

width:100%;
height:120px;

object-fit:cover;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.gallery img:hover{

transform:scale(1.05);

}

/* =========================================================
FOOTER
========================================================= */

.site-footer{

margin-top:60px;

padding:40px 5vw;

background:#2b2b2b;

color:white;

}

.socials{

display:flex;
gap:14px;

}

.socials a{

color:white;
text-decoration:none;

}

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

@media(max-width:900px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.slide img{

height:280px;

}

.actions{

justify-content:center;

}

}

@media(max-width:600px){

.hero{

padding:60px 6vw;

}

.hero-left h2{

font-size:2rem;

}

.slide img{

height:220px;

}

.profile-card{

width:90%;

}