/* ==========================================================
   LETZIA — Identidad visual
   Paleta: espresso #2B1D14, cuero curtido #8A5A38, latón #B8935B,
           hueso #F1E9DD, negro cálido #171210
   Tipografía: Fraunces (display) + Work Sans (texto/UI)
   ========================================================== */

:root{
  --espresso:#2B1D14;
  --leather:#8A5A38;
  --brass:#B8935B;
  --bone:#F1E9DD;
  --ink:#171210;
  --line: rgba(23,18,16,0.12);
  --radius: 2px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Announce bar ---------- */
.announce-bar{
  background: var(--espresso);
  color: var(--bone);
  text-align:center;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 12px;
}

/* ---------- Header ---------- */
.site-header{
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 40;
}
.site-header__inner{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  gap: 24px;
}
.logo{
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--espresso);
}
.main-nav{ display:flex; gap: 28px; flex:1; justify-content:center; }
.main-nav a{
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.main-nav a:hover{ border-color: var(--brass); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.cart-link{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:6px;
}
.cart-count{
  background: var(--espresso); color:var(--bone);
  border-radius: 50%; width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
.menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(23,18,16,0) 40%, rgba(23,18,16,.55) 100%), var(--espresso);
  background-size: cover; background-position:center;
  color: var(--bone);
}
.hero__content{ padding: 60px; max-width: 620px; }
.hero__eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; color: var(--brass); margin-bottom: 14px; }
.hero__title{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 26px;
}
.btn{
  display:inline-block;
  padding: 14px 32px;
  background: var(--bone);
  color: var(--espresso);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  border: 1px solid var(--bone);
  transition: background .2s, color .2s;
  cursor:pointer;
}
.btn:hover{ background: transparent; color: var(--bone); }
.btn--dark{ background: var(--espresso); color: var(--bone); border-color: var(--espresso); }
.btn--dark:hover{ background: transparent; color: var(--espresso); }
.btn--outline{ background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn--outline:hover{ background: var(--espresso); color: var(--bone); }
.btn--block{ display:block; width:100%; text-align:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Section headings ---------- */
.section{ padding: 72px 24px; max-width: 1280px; margin: 0 auto; }
.section-head{ text-align:center; margin-bottom: 44px; }
.section-head__eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color: var(--leather); }
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  margin: 8px 0 0;
}

/* ---------- Category strip ---------- */
.cat-strip{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.cat-card{
  position:relative; aspect-ratio: 3/4;
  background: var(--espresso);
  display:flex; align-items:flex-end; padding: 20px;
  color: var(--bone);
  overflow:hidden;
}
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; transition: transform .5s; }
.cat-card:hover img{ transform: scale(1.06); }
.cat-card span{ position:relative; font-family: var(--font-display); font-size:1.3rem; }

/* ---------- Product grid ---------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px 22px;
}
.product-card{ position:relative; }
.product-card__img{
  position:relative; aspect-ratio: 3/4; background:#e7ddcd; overflow:hidden; margin-bottom: 14px;
}
.product-card__img img{ width:100%; height:100%; object-fit:cover; }
.product-card__img .img-b{ position:absolute; inset:0; opacity:0; transition: opacity .35s; }
.product-card:hover .img-b{ opacity:1; }
.badge{
  position:absolute; top:10px; left:10px;
  background: var(--espresso); color:var(--bone);
  font-size:.65rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 4px 9px;
}
.product-card__name{ font-size:.92rem; margin: 0 0 4px; }
.product-card__name a{ color: var(--ink); }
.product-price{ font-size:.9rem; }
.product-price .old{ text-decoration: line-through; color:#8a7d6f; margin-right:8px; }
.product-card .btn{ margin-top:10px; font-size:.72rem; padding: 10px 18px; }

/* ---------- Promo banners ---------- */
.promo{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 0 24px 72px; max-width:1280px; margin:0 auto;
}
.promo-panel{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  display:flex; align-items:flex-end;
  background: var(--leather);
  color: var(--bone); padding: 32px;
}
.promo-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promo-panel .promo-copy{ position:relative; z-index:1; }
.promo-panel .promo-copy small{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }
.promo-panel .promo-copy h3{ font-family: var(--font-display); font-size:2rem; margin:6px 0 16px; }

/* ---------- Features ---------- */
.features{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 30px; text-align:center;
}
.features h4{ font-family: var(--font-display); font-size:1.05rem; margin: 4px 0 6px; }
.features p{ font-size:.85rem; color:#5c5148; margin:0; }

/* ---------- Product detail ---------- */
.product-detail{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  padding: 56px 24px; max-width: 1280px; margin:0 auto;
}
.product-gallery__main{ aspect-ratio: 3/4; background:#e7ddcd; margin-bottom:12px; overflow:hidden; }
.product-gallery__main img{ width:100%; height:100%; object-fit:cover; }
.product-gallery__thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
.product-gallery__thumbs img{ width:64px; height:80px; object-fit:cover; cursor:pointer; opacity:.6; }
.product-gallery__thumbs img.active{ opacity:1; outline: 1px solid var(--espresso); }

.product-info__category{ text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color:var(--leather); }
.product-info h1{ font-family: var(--font-display); font-size: 2.2rem; margin: 8px 0 12px; }
.product-info__price{ font-size:1.2rem; margin-bottom: 20px; }
.product-info__desc{ line-height:1.7; color:#463c33; margin-bottom: 26px; }

.option-group{ margin-bottom: 22px; }
.option-group label{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.option-group select, .qty-input{
  width:100%; max-width:260px; padding: 12px 14px;
  border:1px solid var(--line); background: var(--bone); font-family: var(--font-body); font-size: .9rem;
}

.info-block{ border-top:1px solid var(--line); padding-top:18px; margin-top:18px; font-size:.85rem; color:#5c5148; }

/* ---------- Cart page ---------- */
.cart-page{ max-width: 960px; margin: 0 auto; padding: 56px 24px; }
.cart-row{
  display:grid; grid-template-columns: 90px 1fr auto auto; gap: 18px; align-items:center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-row img{ width:90px; height:110px; object-fit:cover; }
.cart-empty{ text-align:center; padding: 80px 20px; }
.cart-summary{ margin-top: 30px; text-align:right; }
.cart-summary .total{ font-size:1.3rem; font-family: var(--font-display); margin-bottom: 16px; }
.free-shipping-note{ text-align:center; font-size:.85rem; color: var(--leather); margin-bottom: 24px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--espresso); color: var(--bone); margin-top: 40px; }
.site-footer__inner{
  max-width:1280px; margin:0 auto; padding: 64px 24px 32px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.logo--footer{ color: var(--bone); margin-bottom: 14px; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--brass); margin: 0 0 16px; }
.footer-col li{ margin-bottom: 10px; font-size:.88rem; opacity:.9; }
.footer-col a:hover{ text-decoration: underline; }
.site-footer__bottom{
  text-align:center; font-size:.75rem; opacity:.65;
  padding: 18px 24px; border-top: 1px solid rgba(241,233,221,.12);
}

/* ---------- Simple pages ---------- */
.simple-page{ max-width: 780px; margin:0 auto; padding: 64px 24px; line-height:1.8; }
.simple-page h1{ font-family: var(--font-display); margin-bottom: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .main-nav{ position:fixed; inset: 0 0 0 auto; width:78%; max-width:320px; background:var(--bone);
    flex-direction:column; padding: 90px 28px; gap:22px; transform: translateX(100%); transition: transform .3s; }
  .main-nav.open{ transform: translateX(0); }
  .menu-toggle{ display:block; }
  .promo{ grid-template-columns: 1fr; }
  .product-detail{ grid-template-columns: 1fr; gap: 30px; }
  .site-footer__inner{ grid-template-columns: 1fr 1fr; }
  .cart-row{ grid-template-columns: 70px 1fr; grid-template-areas: "img name" "img actions"; }
}