/* ALARIA — personalizá los colores y el estilo desde estas variables */
:root {
  --color-bg: #fbfbfb;
  --color-text: #0c1014;
  --color-muted: #77736f;
  --color-accent: #967969;
  --color-accent-dark: #755c50;
  --color-border: #e9e5e1;
  --color-soft: #f3efec;
  --color-white: #ffffff;
  --font-body: "DM Sans", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --content-width: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
.site-header { height: 82px; padding: 0 max(5vw, 24px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-border); background:rgba(251,251,251,.94); }
.brand { color:var(--color-text); text-decoration:none; font:600 31px var(--font-display); letter-spacing:-1.7px; }
.brand span { color:var(--color-accent); }
.header-actions { display:flex; align-items:center; gap:28px; }
.header-note { color:var(--color-muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.cart-button { border:1px solid var(--color-text); background:transparent; color:var(--color-text); border-radius:2px; padding:11px 15px; display:flex; align-items:center; gap:12px; font-size:13px; transition:.2s; }
.cart-button:hover { background:var(--color-text); color:white; }
.cart-count { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:50%; background:var(--color-accent); color:white; font-size:11px; }
main { max-width:var(--content-width); margin:auto; padding:0 28px; }
.intro { padding:84px 0 62px; text-align:center; }
.eyebrow { margin:0 0 17px; color:var(--color-accent); font-size:10px; font-weight:700; letter-spacing:.2em; }
h1 { margin:0; font:500 clamp(48px,7vw,76px)/.99 var(--font-display); letter-spacing:-2.5px; }
h1 em { color:var(--color-accent); font-weight:500; }
.intro-copy { margin:22px auto 0; max-width:390px; color:var(--color-muted); font-size:14px; line-height:1.7; }
.catalog-tools { border-top:1px solid var(--color-border); padding:25px 0 22px; }
.search-wrap { max-width:480px; height:48px; margin:0 auto 22px; display:flex; align-items:center; gap:12px; padding:0 15px; border:1px solid var(--color-border); background:white; }
.search-wrap svg { width:18px; height:18px; fill:none; stroke:var(--color-muted); stroke-width:1.5; }
.search-wrap input { width:100%; border:0; outline:0; background:transparent; color:var(--color-text); font-size:13px; }
.search-wrap input::placeholder { color:#aaa39d; }
.category-list { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.category-chip { border:1px solid var(--color-border); border-radius:30px; padding:8px 15px; background:transparent; color:var(--color-muted); font-size:12px; transition:.2s; }
.category-chip:hover, .category-chip.is-active { border-color:var(--color-accent); background:var(--color-accent); color:white; }
.results-line { display:flex; justify-content:space-between; align-items:center; margin-top:24px; color:var(--color-muted); font-size:11px; }
.text-button { border:0; padding:4px 0; background:none; color:var(--color-accent); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px 22px; padding:10px 0 100px; }
.product-card { min-width:0; }
.product-image-wrap { position:relative; overflow:hidden; aspect-ratio: .84; background:var(--color-soft); }
.product-image { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-image { transform:scale(1.035); }
.unavailable-label { position:absolute; left:12px; top:12px; padding:7px 9px; background:rgba(251,251,251,.94); color:var(--color-text); font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.product-info { padding:15px 1px 0; }
.product-category { margin:0 0 7px; color:var(--color-accent); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.product-name { margin:0; font:500 19px/1.25 var(--font-display); }
.product-description { min-height:34px; margin:8px 0 12px; color:var(--color-muted); font-size:11px; line-height:1.55; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-price { font-size:14px; font-weight:600; }
.product-code { display:block; margin-top:6px; color:#aaa39d; font-size:9px; letter-spacing:.06em; }
.add-button { border:1px solid var(--color-accent); background:transparent; color:var(--color-accent-dark); padding:8px 10px; font-size:10px; transition:.2s; white-space:nowrap; }
.add-button:hover:not(:disabled) { background:var(--color-accent); color:white; }
.add-button:disabled { border-color:var(--color-border); color:#aaa; cursor:not-allowed; }
.loading-state { grid-column:1/-1; padding:70px 0; text-align:center; color:var(--color-muted); font-size:13px; }
.empty-state { padding:10px 0 100px; text-align:center; }
.empty-state h2 { font:500 27px var(--font-display); }
.empty-state p { color:var(--color-muted); font-size:13px; }
.empty-mark { color:var(--color-accent); font-size:28px; }
.site-footer { border-top:1px solid var(--color-border); padding:38px 24px 28px; text-align:center; }
.footer-brand { font-size:26px; }
.site-footer p { margin:8px 0 20px; color:var(--color-muted); font:italic 14px var(--font-display); }
.site-footer small { color:#aaa39d; font-size:10px; }
.drawer-backdrop { position:fixed; inset:0; z-index:10; background:rgba(12,16,20,.35); }
.cart-drawer { position:fixed; z-index:11; top:0; right:0; width:min(440px,100%); height:100dvh; display:flex; flex-direction:column; padding:28px; background:var(--color-bg); box-shadow:-12px 0 45px rgba(0,0,0,.08); transform:translateX(105%); transition:transform .3s ease; }
.cart-drawer.is-open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:23px; border-bottom:1px solid var(--color-border); }
.drawer-header .eyebrow { margin-bottom:6px; }
.drawer-header h2 { margin:0; font:500 31px var(--font-display); }
.icon-button { border:0; background:none; color:var(--color-text); font-size:30px; line-height:1; }
.cart-items { flex:1; overflow:auto; padding:18px 0; }
.cart-empty { color:var(--color-muted); font-size:13px; text-align:center; padding:30px 0; }
.cart-row { display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--color-border); }
.cart-row img { width:58px; height:66px; object-fit:cover; background:var(--color-soft); }
.cart-row h3 { margin:0 0 5px; font:500 15px var(--font-display); }
.cart-row p { margin:0; color:var(--color-muted); font-size:11px; }
.quantity-control { display:flex; align-items:center; gap:8px; margin-top:8px; }
.quantity-control button { width:23px; height:23px; border:1px solid var(--color-border); background:white; color:var(--color-text); }
.quantity-control span { font-size:11px; }
.remove-item { border:0; background:none; color:var(--color-muted); font-size:17px; }
.cart-footer { border-top:1px solid var(--color-border); padding-top:18px; }
.cart-total { display:flex; justify-content:space-between; margin-bottom:18px; font-size:13px; }
.cart-total strong { font-size:17px; }
.customer-label { display:block; margin-bottom:7px; color:var(--color-muted); font-size:11px; }
.customer-input { width:100%; height:42px; border:1px solid var(--color-border); padding:0 11px; outline-color:var(--color-accent); background:white; font-size:12px; }
.whatsapp-button { width:100%; margin-top:13px; padding:14px; border:0; background:var(--color-accent); color:white; font-size:12px; transition:.2s; }
.whatsapp-button:hover:not(:disabled) { background:var(--color-accent-dark); }
.whatsapp-button:disabled { opacity:.45; cursor:not-allowed; }
.whatsapp-button span { margin-left:8px; }
.cart-disclaimer { color:var(--color-muted); font-size:10px; line-height:1.5; }
.toast { position:fixed; z-index:20; bottom:22px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:11px 16px; background:var(--color-text); color:white; font-size:12px; transition:.25s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 18px; } }
@media (max-width:620px) {
  .site-header { height:68px; padding:0 18px; }
  .brand { font-size:27px; }
  .header-note { display:none; }
  .cart-button { padding:9px 11px; }
  main { padding:0 17px; }
  .intro { padding:66px 0 47px; }
  h1 { letter-spacing:-1.5px; }
  .intro-copy { max-width:300px; font-size:13px; }
  .catalog-tools { padding-top:19px; }
  .search-wrap { margin-bottom:17px; }
  .category-list { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .category-chip { flex:0 0 auto; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 13px; padding-bottom:70px; }
  .product-name { font-size:17px; }
  .product-description { min-height:48px; font-size:10px; }
  .product-bottom { align-items:flex-start; flex-direction:column; }
  .add-button { width:100%; padding:9px; }
  .cart-drawer { padding:22px 18px; }
}