@font-face{font-family:"Gloock";src:url(/fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --arena:#CDB394;      /* fondo: el tono de las fotos de catálogo, un paso más profundo */
  --arena-claro:#DCC7AC;
  --hueso:#F6F1EA;      /* paneles: carrito y detalle */
  --tinta:#1E1915;
  --tinta-2:#4A3E33;
  --oro:#9C7330;
  --acero:#7B8086;
  --linea:rgba(30,25,21,.18);
  --serif:"Gloock", "Times New Roman", serif;
  --sans:"Outfit", system-ui, sans-serif;
  --arco:999px 999px 18px 18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--arena);color:var(--tinta);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--hueso);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* Aviso superior (editable desde el panel) */
.aviso{background:var(--tinta);color:var(--hueso);text-align:center;font-size:14px;padding:9px 16px;line-height:1.35}

/* Encabezado */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,48px);background:rgba(205,179,148,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.brand img{height:22px;width:auto}
.cats{display:flex;gap:22px;margin-left:auto}
.cats a{text-decoration:none;font-size:15px;color:var(--tinta-2)}
.cats a:hover{color:var(--tinta)}
.cart-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--tinta);background:transparent;border-radius:999px;padding:8px 14px 8px 12px;font-size:15px}
.cart-btn svg{width:20px;height:20px}
.cart-btn b{min-width:22px;height:22px;border-radius:999px;background:var(--tinta);color:var(--hueso);font-size:12px;font-weight:500;display:grid;place-items:center;padding:0 6px}
.cart-btn.bump b{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:calc(100svh - 70px);gap:clamp(24px,5vw,72px);padding:clamp(32px,6vw,80px) clamp(16px,4vw,48px) 40px;max-width:1280px;margin:0 auto}
.hero h1{font:400 clamp(42px,5.6vw,80px)/1 var(--serif);letter-spacing:-.01em;margin:0 0 24px;max-width:13ch}
.hero p{max-width:44ch;color:var(--tinta-2);margin:0 0 32px;font-size:18px}
.hero-arch{position:relative;margin:0;justify-self:end;width:min(100%,440px,calc((100svh - 190px) * .75))}
.hero-arch img:first-child{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--arco);box-shadow:0 30px 60px -30px rgba(60,40,20,.45)}
.hero-arch .badge{position:absolute;left:-36px;bottom:48px;width:96px;height:96px;border-radius:50%;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--tinta);color:var(--hueso);border:0;border-radius:999px;padding:14px 26px;font-size:16px;font-weight:500;text-decoration:none;transition:transform .15s var(--ease),background .15s}
.btn:hover{background:#000}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--tinta);border:1px solid var(--tinta)}

/* Cómo comprar */
.steps{max-width:1280px;margin:0 auto;padding:24px clamp(16px,4vw,48px) 8px}
.steps h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.steps ol{list-style:none;counter-reset:s;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.steps li::before{content:counter(s);grid-row:span 2;font:400 34px/1 var(--serif);color:var(--tinta)}
.steps strong{font-weight:500}
.steps span{color:var(--tinta-2);font-size:15px}

/* Filtros */
.toolbar{position:sticky;top:69px;z-index:15;display:flex;justify-content:center;padding:18px 16px 10px;pointer-events:none}
.tono{pointer-events:auto;display:flex;gap:4px;background:var(--hueso);border-radius:999px;padding:4px;box-shadow:0 8px 24px -14px rgba(60,40,20,.5)}
.tono button{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:999px;padding:8px 16px;font-size:15px;color:var(--tinta-2)}
.tono button[aria-pressed="true"]{background:var(--tinta);color:var(--hueso)}
.sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.sw-dorado{background:linear-gradient(135deg,#E9C77A,#9C7330)}
.sw-plateado{background:linear-gradient(135deg,#F1F2F3,#7B8086)}
.sw-blanco{background:#FBFAF7;box-shadow:inset 0 0 0 1px rgba(30,25,21,.25)}
.sw-rosa-gold{background:linear-gradient(135deg,#F3C9B6,#B76E5A)}

/* Catálogo */
#catalog{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 80px}
.cat{padding-top:56px}
.cat-head{display:flex;flex-direction:column;align-items:center;margin-bottom:36px;text-align:center}
.cat-head::before{content:"";width:1px;height:44px;background:var(--tinta);margin-bottom:14px}
.cat-head h2{font:400 clamp(52px,8vw,96px)/1 var(--serif);margin:0;letter-spacing:-.01em}
.cat-head p{margin:10px 0 0;color:var(--tinta-2);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.card{display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0}
.ph-btn{all:unset;cursor:pointer;display:block;border-radius:var(--arco)}
.ph-btn:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}
.card .ph{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--arco);overflow:hidden;background:var(--arena-claro)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card.out .ph img{filter:grayscale(.6) opacity(.6)}
.card .tag{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:var(--hueso);border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px}
.card .nm{font-weight:500;font-size:16px;line-height:1.3}
.card .pr{font:400 19px/1 var(--serif);white-space:nowrap}
.card .sub{display:flex;align-items:center;gap:7px;color:var(--tinta-2);font-size:14px;margin-top:4px}
.card .add{margin-top:12px;align-self:flex-start;border:1px solid var(--tinta);background:transparent;border-radius:999px;padding:7px 16px;font-size:14px}
.card .add:hover{background:var(--tinta);color:var(--hueso)}
.empty{text-align:center;color:var(--tinta-2);padding:40px 0}

/* Paneles (dialog) */
dialog{border:0;padding:0;color:var(--tinta);background:var(--hueso)}
dialog::backdrop{background:rgba(30,25,21,.45);backdrop-filter:blur(2px)}
.x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(30,25,21,.06);font-size:24px;line-height:1}
.sheet{width:min(920px,calc(100% - 32px));border-radius:28px;overflow:hidden}
.sheet[open]{display:grid;grid-template-columns:1fr 1fr;animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.p-media{background:var(--arena-claro);padding:28px}
.p-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--arco)}
.p-info{padding:48px 36px 36px;display:flex;flex-direction:column}
.p-cat{margin:0;color:var(--tinta-2);font-size:14px}
.p-info h3{font:400 40px/1.05 var(--serif);margin:6px 0 12px}
.p-price{font:400 28px/1 var(--serif);margin:0 0 14px}
.p-mat{display:flex;align-items:center;gap:8px;color:var(--tinta-2);margin:0 0 20px}
.variants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.variants button{border:1px solid var(--linea);background:transparent;border-radius:999px;padding:8px 14px;font-size:14px}
.variants button[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:var(--hueso)}
.qty-row{display:flex;gap:12px;margin-top:auto;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--tinta);border-radius:999px}
.qty button{width:40px;height:44px;border:0;background:none;font-size:20px}
.qty output{min-width:24px;text-align:center}
.qty-row .btn{flex:1}

.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100%);max-width:100%}
.drawer[open]{display:flex;flex-direction:column;animation:slide .3s var(--ease)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.drawer-head{position:relative;padding:22px 24px 16px;border-bottom:1px solid var(--linea)}
.drawer-head h2{font:400 32px/1 var(--serif);margin:0}
.drawer .x{top:16px}
#cartBody{flex:1;overflow:auto;display:flex;flex-direction:column}
.lines{list-style:none;margin:0;padding:8px 24px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--linea);align-items:center}
.line img{width:64px;height:80px;object-fit:cover;border-radius:999px 999px 8px 8px}
.line .nm{font-weight:500;line-height:1.25}
.line .vr{font-size:13px;color:var(--tinta-2)}
.line .mini{display:flex;align-items:center;gap:6px;margin-top:6px}
.line .mini button{width:28px;height:28px;border-radius:50%;border:1px solid var(--linea);background:none}
.line .mini .rm{width:auto;height:auto;border-radius:0;border:0;background:none;font-size:13px;color:var(--tinta-2);text-decoration:underline;padding:0;margin-left:8px}
.line .tot{font:400 18px/1 var(--serif)}
.cart-empty{margin:auto;text-align:center;padding:40px 24px;color:var(--tinta-2)}
.cart-empty .btn{margin-top:16px}
.checkout{padding:20px 24px 28px;border-top:1px solid var(--linea);background:#EFE7DC}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sum b{font:400 30px/1 var(--serif)}
.note{font-size:13px;color:var(--tinta-2);margin:0 0 18px}
fieldset{border:0;margin:0 0 16px;padding:0}
legend,.lbl{font-weight:500;font-size:15px;margin-bottom:8px;display:block}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--linea);border-radius:14px;padding:12px 14px;background:var(--hueso);cursor:pointer}
.opt:has(input:checked){border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.opt input{accent-color:var(--tinta);margin-top:4px}
.opt small{display:block;color:var(--tinta-2);font-size:13px}
input[type=text],textarea{width:100%;border:1px solid var(--linea);border-radius:12px;padding:12px 14px;background:var(--hueso);font:inherit;font-size:16px}
textarea{resize:vertical;min-height:64px}
.field{margin-bottom:14px}
.err{color:#8A2A1A;font-size:14px;margin:0 0 10px}
.checkout .btn{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ts{display:flex;justify-content:center}
.ts:empty{display:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--tinta);color:var(--hueso);padding:12px 18px;border-radius:999px;font-size:15px;transition:.25s var(--ease);pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}

.foot{text-align:center;padding:56px 16px 64px;border-top:1px solid var(--linea);color:var(--tinta-2)}
.foot img{margin:0 auto 10px;height:20px;width:auto}
.foot p{margin:4px 0}
.foot .links a{margin:0 10px}

@media (max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  body{font-size:16px}
  .cats{display:none}
  .cart-btn{margin-left:auto}
  .hero{grid-template-columns:1fr;padding-top:28px;min-height:0}
  .hero-arch{justify-self:center;width:min(78%,320px);order:-1}
  .hero-arch .badge{left:-8px;width:76px;height:76px}
  .steps ol{grid-template-columns:1fr;gap:14px}
  .grid{grid-template-columns:repeat(2,1fr);gap:32px 14px}
  .toolbar{justify-content:flex-start;padding-left:0;padding-right:0}
  .tono{max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 16px}
  .tono button{padding:8px 12px;white-space:nowrap;flex:none}
  .card .meta{flex-direction:column;gap:4px}
  .sheet[open]{grid-template-columns:1fr;max-height:92dvh;overflow:auto}
  .p-media{padding:16px 16px 0}
  .p-media img{max-height:44dvh;aspect-ratio:auto;width:auto;margin:0 auto}
  .p-info{padding:20px 20px 24px}
  .p-info h3{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
.agotado{color:#8A2A1A;font-size:13px;font-weight:500}
.enviado{display:flex;flex-direction:column;align-items:center;gap:10px}
.enviado h3{font:400 34px/1 var(--serif);color:var(--tinta);margin:4px 0 0}
.enviado .nro{font-weight:500;color:var(--tinta);margin:0}
.enviado p{margin:0;max-width:32ch}
.enviado .btn{margin-top:8px}
.ok-icon{width:64px;height:64px;border-radius:50%;background:#2F6B3F;color:#fff;display:grid;place-items:center;font-size:30px}
.link-sm{border:0;background:none;text-decoration:underline;color:var(--tinta-2);font-size:14px;padding:6px}