:root{--v:#3f5943;--vd:#2e3f31;--vl:#506a55;--p:#b8c4bb;--pb:#d4ddd6;--g:#6b7280;--gc:#9ca3a8;--c:#f5f2ee;--w:#fafaf8;--s:rgba(63,89,67,0.15)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;font-weight:400;background:var(--w);color:var(--g);overflow-x:hidden}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(250,250,248,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--p)}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;letter-spacing:.35em;color:var(--vd);text-decoration:none}
nav ul{display:flex;gap:16px;list-style:none}
nav ul a{text-decoration:none;color:var(--g);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;transition:color .3s}
nav ul a:hover{color:var(--v)}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 24px 80px;background:linear-gradient(160deg,var(--vd) 0%,var(--v) 60%,var(--vl) 100%);position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(212,221,214,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:80px;background:var(--w);clip-path:ellipse(55% 100% at 50% 100%)}

.logo-ph{width:130px;height:130px;border:1.5px dashed rgba(212,221,214,.55);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--pb);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:36px;gap:8px;animation:fu 1s ease both}
.hero-eye{font-size:.68rem;letter-spacing:.38em;text-transform:uppercase;color:var(--p);margin-bottom:14px;animation:fu 1s .15s ease both;font-weight:300}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(5rem,12vw,9rem);font-weight:400;letter-spacing:.35em;color:var(--w);line-height:.95;animation:fu 1s .25s ease both}
.hero .tag{font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--pb);margin-top:20px;font-weight:400;animation:fu 1s .4s ease both}
.hero-cta{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;animation:fu 1s .55s ease both}

.btn{display:inline-block;padding:13px 32px;font-size:.73rem;letter-spacing:.22em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:400;text-decoration:none;cursor:pointer;border:none;transition:all .3s}
.btn-l{background:var(--w);color:var(--v)}.btn-l:hover{background:var(--c);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.btn-o{background:transparent;color:var(--w);border:1px solid rgba(255,255,255,.45)}.btn-o:hover{border-color:var(--w);transform:translateY(-2px)}

section{padding:96px 24px}
.ct{max-width:1160px;margin:0 auto}
.sl{display:block;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--p);margin-bottom:10px}
.st{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);font-weight:400;color:var(--vd);line-height:1.15}
.st em{font-style:italic;color:var(--v)}
.dv{width:56px;height:1px;background:linear-gradient(90deg,var(--v),var(--p));margin:20px 0 40px}

#productos{background:var(--w)}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{border:1px solid var(--p);background:var(--c);transition:transform .3s,box-shadow .3s;overflow:hidden;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 48px var(--s)}

.ci{height:280px;background:linear-gradient(145deg,var(--v) 0%,var(--vd) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(212,221,214,.65);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden}
.ci::before{content:'';position:absolute;inset:12px;border:1px dashed rgba(212,221,214,.28)}
.ci svg{opacity:.38}

.cbdg{position:absolute;top:0;left:0;background:var(--vd);color:var(--pb);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;padding:5px 14px}
.cb{padding:22px 24px 28px}
.cn{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;color:var(--vd);margin-bottom:4px;line-height:1.3}
.cv{font-size:.68rem;letter-spacing:.15em;color:var(--p);margin-bottom:12px;text-transform:uppercase}
.cd{font-size:.8rem;color:var(--g);line-height:1.75;margin-bottom:18px}
.cp{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:400;color:var(--v)}
.cp small{font-size:.72rem;font-family:'Jost',sans-serif;color:var(--gc);font-weight:400}
.cbtn{margin-top:18px;width:100%;background:var(--v);color:var(--w);padding:11px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;border:none;font-family:'Jost',sans-serif;font-weight:400;transition:background .3s}
.cbtn:hover{background:var(--vd)}

.cset{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;border:1px solid var(--p);overflow:hidden;background:var(--c);transition:box-shadow .3s}
.cset:hover{box-shadow:0 24px 64px var(--s)}
.cset .ci{height:100%;min-height:360px}
.cset .cb{padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.cset .cn{font-size:2rem;margin-bottom:8px}
.cset .cd{font-size:.85rem}
.cset .cp{font-size:2.6rem}
.inc{margin:16px 0;display:flex;flex-direction:column;gap:6px}
.inc span{font-size:.75rem;color:var(--gc);letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.inc span::before{content:'';width:4px;height:4px;background:var(--p);border-radius:50%;flex-shrink:0}

#ubicacion{background:var(--vd);color:var(--w)}
#ubicacion .st{color:var(--w)}
#ubicacion .sl{color:rgba(212,221,214,.55)}
#ubicacion .dv{background:linear-gradient(90deg,var(--pb),transparent)}
.uw{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:center}
.ui p{font-size:.88rem;line-height:1.95;color:var(--pb);margin-bottom:12px}
.ui a{color:var(--pb)}
.ui strong{font-weight:400;color:var(--w)}
.mf{overflow:hidden;border:1px solid rgba(184,196,187,.25)}
.mf iframe{width:100%;height:380px;border:none;display:block;filter:grayscale(15%) contrast(1.05)}

#historia{background:var(--c)}
.hw{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.him{aspect-ratio:4/5;background:linear-gradient(145deg,var(--v) 0%,var(--vd) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(212,221,214,.65);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;position:relative}
.him::before{content:'';position:absolute;inset:16px;border:1px dashed rgba(212,221,214,.28)}
.him svg{opacity:.38}
.ht p{font-size:.88rem;line-height:1.95;color:var(--g);margin-bottom:18px}

#testimonios{background:var(--w)}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.test{border:1px solid var(--p);overflow:hidden;background:var(--c);transition:transform .3s}
.test:hover{transform:translateY(-4px)}
.tim{height:240px;background:linear-gradient(145deg,var(--vl) 0%,var(--v) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(212,221,214,.65);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;position:relative}
.tim::before{content:'';position:absolute;inset:10px;border:1px dashed rgba(212,221,214,.28)}
.tim svg{opacity:.35}
.tb{padding:24px 26px 30px}
.tn{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--vd);margin-bottom:6px}
.tp{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.tq{font-size:.83rem;line-height:1.8;color:var(--g);font-style:italic}
.tq::before{content:'\201C';font-family:'Cormorant Garamond',serif;font-size:2.5rem;color:var(--p);line-height:0;vertical-align:-.6rem;margin-right:4px}

footer{background:var(--vd);color:var(--pb);padding:48px 24px;text-align:center}
.fn{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:400;letter-spacing:.4em;margin-bottom:16px;color:var(--w)}
.fl{display:flex;gap:28px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.fl a{text-decoration:none;color:var(--p);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;transition:color .3s}
.fl a:hover{color:var(--w)}
footer p{font-size:.72rem;color:rgba(184,196,187,.45);letter-spacing:.08em}

@keyframes fu{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  nav{padding:14px 24px}
  nav ul{gap:18px}
  .pg{grid-template-columns:1fr 1fr}
  .cset{grid-template-columns:1fr}
  .cset .ci{min-height:260px}
  .cset .cb{padding:32px 28px}
  .uw,.hw{grid-template-columns:1fr;gap:36px}
  .tg{grid-template-columns:1fr}
}
@media(max-width:600px){
  nav ul{display:none}
  .pg{grid-template-columns:1fr}
}

/* --- CART STYLES --- */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.cart-overlay.open { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; right:-100%; top:0; width:100%; max-width:400px; height:100vh; background:var(--c); z-index:999; transition:right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:flex; flex-direction:column; padding:24px; box-shadow:-5px 0 25px rgba(0,0,0,0.1); }
.cart-drawer.open { right:0; }
.cd-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--p); padding-bottom:16px; margin-bottom:16px; }
.cd-title { font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--vd); font-weight:300; }
.cd-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--g); transition:color 0.3s; }
.cd-close:hover { color:var(--vd); }
.cd-items { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.cd-item { display:flex; justify-content:space-between; align-items:center; background:var(--w); padding:16px; border:1px solid var(--p); border-radius:4px; }
.cd-item-info { flex:1; }
.cd-item-name { font-weight:400; color:var(--vd); margin-bottom:4px; font-size:0.9rem; }
.cd-item-price { font-size:0.8rem; color:var(--v); }
.cd-item-qty { font-size:0.75rem; color:var(--gc); margin-top:4px; }
.cd-item-remove { background:none; border:none; color:var(--g); cursor:pointer; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; text-decoration:underline; margin-left:12px; }
.cd-footer { border-top:1px solid var(--p); padding-top:16px; margin-top:16px; }
.cd-total { display:flex; justify-content:space-between; align-items:center; font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--vd); margin-bottom:16px; }
.cd-actions { display:flex; flex-direction:column; gap:8px; }
.nav-cart-btn { background:none; border:none; cursor:pointer; position:relative; display:flex; align-items:center; color:var(--g); transition:color 0.3s; }
.nav-cart-btn:hover { color:var(--v); }
.cart-badge { position:absolute; top:-6px; right:-10px; background:var(--v); color:var(--w); font-size:0.6rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:500; display:none; }
.empty-msg { text-align:center; color:var(--gc); font-style:italic; margin-top:40px; }