@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@300;400;500;600&display=swap');
:root{--bg:#080706;--rose:#e8bfa8;--rose2:#c99479;--text:#f3e7df;--muted:#bca99e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 15%,#1a110d,#080706 48%,#050404);color:var(--text);font-family:Montserrat,Arial;font-weight:300}.announcement{height:28px;background:var(--rose);color:#100b09;text-align:center;font-size:11px;letter-spacing:1.5px;font-weight:600;padding:7px}header{height:76px;border-bottom:1px solid #30231e;display:flex;align-items:center;padding:0 5%;gap:35px;position:sticky;top:0;z-index:20;background:#090807f2}.brand{width:240px}.brand img{width:215px;height:62px;object-fit:contain;mix-blend-mode:screen}nav{display:flex;gap:25px;flex:1}nav a{color:#eadbd2;text-decoration:none;font-size:11px;letter-spacing:1px}nav a:hover,nav .active{color:var(--rose)}header button{background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}#cartBtn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  transition:all .3s ease;
}

#cartBtn svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:var(--rose);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:all .3s ease;
}

#cartBtn:hover svg{
  stroke:#f3d5c4;
  transform:scale(1.08);
}

#cartBtn #count{
  position:absolute;
  top:1px;
  right:0;
  min-width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  background:var(--rose);
  color:#160d09;
  border-radius:50%;
  font-size:8px;
  font-weight:600;
  line-height:1;
}header b{background:var(--rose);color:#160d09;border-radius:50%;font-size:9px;padding:3px 5px}.hero{min-height:535px;padding:65px 10%;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid #241a16}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 50%,#e8bfa815,transparent 35%);pointer-events:none}.hero>div{z-index:1}.hero p:first-child{color:var(--rose);letter-spacing:3px;font-size:11px}.hero h1{font-family:"Cormorant Garamond";font-size:68px;line-height:.85;font-weight:500;color:#f1d4c3;letter-spacing:2px}.hero h1 em{font-style:normal;color:#dca88e}.hero span{color:var(--rose)}.desc{color:#cdbdb4;max-width:500px;line-height:1.8;font-size:13px}.btn{display:inline-block;margin-top:15px;border:1px solid var(--rose2);background:transparent;color:var(--rose);padding:14px 28px;font-size:10px;letter-spacing:1.6px;cursor:pointer;text-decoration:none}.btn:hover{background:var(--rose);color:#120b08}.hero-logo{width:min(510px,95%);height:390px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 35px #e8bfa81a)}section{padding:55px 10%}.title{text-align:center;color:var(--rose);font:500 25px "Cormorant Garamond";letter-spacing:2px;margin-bottom:28px}.cats,.products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cats a{border:1px solid #76503f;min-height:92px;padding:18px;display:grid;grid-template-columns:55px 1fr;text-decoration:none;color:var(--rose);font-size:35px;align-items:center}.cats span,.cats small{grid-column:2}.cats span{font:500 18px "Cormorant Garamond";color:var(--text)}.cats small{font-size:9px;color:#a88e81}.card{background:#0d0b0a;border:1px solid #33251f}.pic{height:280px;background:radial-gradient(circle at 50% 35%,#5c4035,#1c1411 42%,#0b0908);display:flex;align-items:center;justify-content:center;color:#8f6958;font:500 35px "Cormorant Garamond";position:relative}.tag{position:absolute;top:12px;left:12px;background:var(--rose);color:#160e0b;font-size:9px;padding:6px}.body{padding:15px}.body h3{font:500 18px "Cormorant Garamond";margin:0}.body p{font-size:10px;color:#a9968c;min-height:28px}.price{color:var(--rose);font-size:13px}.add{float:right;background:none;border:0;color:var(--rose);font-size:18px;cursor:pointer}.center{text-align:center}.statement{text-align:center;border-top:1px solid #201815;border-bottom:1px solid #201815;background:#0d0a09;padding:90px}.statement p{letter-spacing:5px;color:#a88e81;font-size:11px}.statement h2{font:400 58px "Cormorant Garamond";color:var(--rose);margin:10px}.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:80px 15%}.about h2{font:400 55px/0.9 "Cormorant Garamond";color:var(--rose)}.about p{line-height:2;color:#b9a79e;font-size:13px}footer{text-align:center;padding:55px;border-top:1px solid #30231e;background:#050404}footer img{width:190px;height:80px;object-fit:contain;mix-blend-mode:screen}footer p{font-size:10px;letter-spacing:3px;color:var(--rose)}footer small{color:#67564e}#cart{position:fixed;right:-430px;top:0;width:390px;height:100vh;background:#0c0a09;border-left:1px solid #5e4033;z-index:50;padding:35px;transition:.3s;box-shadow:-20px 0 50px #000}#cart.open{right:0}#close{float:right;background:none;border:0;color:var(--rose);font-size:26px}#cart h2{font:400 34px "Cormorant Garamond";color:var(--rose)}.row{display:flex;justify-content:space-between;border-bottom:1px solid #2e211c;padding:14px 0;font-size:12px}.total{display:flex;justify-content:space-between;padding:25px 0;font-size:11px}.total b{color:var(--rose);font-size:17px}@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr}.hero-logo{position:absolute;right:-90px;opacity:.35}.cats,.products{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr}}@media(max-width:520px){.cats,.products{grid-template-columns:1fr}#cart{width:100%}}
/* =========================
VENTANA MI CUENTA
========================= */

.account-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(30,20,15,.55);
  align-items:center;
  justify-content:center;
  padding:20px;
}

.account-modal.open{
  display:flex;
}

.account-box{
  position:relative;
  width:min(440px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fffaf7;
  padding:42px 36px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.account-close{
  position:absolute;
  top:12px;
  right:16px;
  border:0;
  background:none;
  font-size:30px;
  cursor:pointer;
  color:#6f5b52;
}

.account-header{
  text-align:center;
  margin-bottom:28px;
}

.account-header p{
  margin:0 0 8px;
  letter-spacing:4px;
  font-size:12px;
}

.account-header h2{
  margin:0 0 10px;
  font-weight:400;
  font-size:28px;
}

.account-header span{
  display:block;
  color:#8b7770;
  font-size:13px;
  line-height:1.5;
}

.account-form{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.account-form label{
  font-size:12px;
  letter-spacing:1px;
  margin-top:8px;
}

.account-form input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d9cbc4;
  background:#fff;
  padding:13px;
  font:inherit;
  outline:none;
}

.account-form input:focus{
  border-color:#8b7165;
}

.account-form .btn{
  margin-top:16px;
  width:100%;
}

.account-message{
  min-height:20px;
  margin:5px 0;
  color:#a34b3f;
  font-size:13px;
  text-align:center;
}

.account-switch{
  text-align:center;
  margin-top:16px;
  color:#8b7770;
  font-size:13px;
}

.account-switch button{
  border:0;
  background:none;
  padding:0;
  margin-left:5px;
  cursor:pointer;
  text-decoration:underline;
  font:inherit;
  color:#5d4941;
}
/* =========================
ACCESO ELEGANTE A MI CUENTA
========================= */

#accountBtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 4px;
  background:none;
  border:0;
  color:var(--rose);
  cursor:pointer;
  transition:all .3s ease;
}

#accountBtn svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--rose);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:all .3s ease;
}

#accountBtn #accountLabel{
  font-family:Montserrat,Arial,sans-serif;
  font-size:9px;
  letter-spacing:1.5px;
  color:#eadbd2;
  white-space:nowrap;
}

#accountBtn:hover svg{
  stroke:#f3d5c4;
  transform:scale(1.08);
}

#accountBtn:hover #accountLabel{
  color:var(--rose);
}
/* =========================
PANEL MI ESPACIO NESHAMÁ
========================= */

#accountDashboard{
  display:none;
}

.account-welcome{
  text-align:center;
  padding:8px 0 22px;
}

.account-welcome span{
  display:block;
  margin-bottom:8px;
  color:#b98d7b;
  font-size:18px;
}

.account-welcome h3{
  margin:0 0 7px;
  font-size:20px;
  font-weight:400;
  letter-spacing:.5px;
}

.account-welcome p{
  margin:0;
  color:#8b7770;
  font-size:13px;
}

.account-option{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:15px 16px;
  margin-top:8px;
  border:1px solid #e3d5ce;
  background:#fff;
  color:#4f403a;
  text-align:left;
  cursor:pointer;
  transition:all .25s ease;
}

.account-option span{
  font-family:Montserrat,Arial,sans-serif;
  font-size:12px;
  letter-spacing:1px;
}

.account-option small{
  color:#9a8780;
  font-size:12px;
}

.account-option:hover{
  border-color:#b98d7b;
  background:#fffaf7;
  transform:translateY(-1px);
}

.account-logout{
  width:100%;
  margin-top:22px;
  padding:13px;
  border:1px solid #d5c4bc;
  background:transparent;
  color:#6f5b52;
  font-family:Montserrat,Arial,sans-serif;
  font-size:10px;
  letter-spacing:1.5px;
  cursor:pointer;
  transition:all .25s ease;
}

.account-logout:hover{
  background:#6f5b52;
  color:#fffaf7;
}
/* Mejorar legibilidad de Mi Cuenta */

.account-header h2{
  color:#3f302b;
}

.account-header span{
  color:#6f5b52;
}

.account-form label{
  color:#4f403a;
}

.account-form input{
  color:#3f302b;
}

.account-switch{
  color:#6f5b52;
}

.account-switch button{
  color:#3f302b;
}

.account-welcome h3{
  color:#3f302b;
}

.account-welcome p{
  color:#6f5b52;
}

.account-option span{
  color:#3f302b;
}

.account-option small{
  color:#6f5b52;
}

.account-logout{
  color:#4f403a;
}
/* =========================
PEDIDOS DE LA CLIENTA
========================= */

.account-subpanel{
  display:none;
  margin-top:12px;
}

.account-subpanel.open{
  display:block;
}

#ordersList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#ordersList > p{
  margin:12px 0;
  text-align:center;
  color:#6f5b52;
  font-size:13px;
}

.order-card{
  padding:16px;
  border:1px solid #e3d5ce;
  background:#fff;
}

.order-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}

.order-top strong{
  color:#3f302b;
  font-size:12px;
  letter-spacing:1px;
}

.order-top span{
  color:#8b6c5d;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.order-card > small{
  color:#8b7770;
  font-size:11px;
}

.order-products{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #eee3de;
}

.order-product{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  color:#5b4942;
  font-size:12px;
}

.order-product strong{
  color:#3f302b;
  white-space:nowrap;
}

.order-total{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #e3d5ce;
  color:#6f5b52;
  font-size:10px;
  letter-spacing:1.5px;
}

.order-total strong{
  color:#3f302b;
  font-size:13px;
  letter-spacing:0;
}
