:root{
  --bg:#050505; --surface:#0F0F0F; --ink:#F2F0EC; --muted:#9A9A96; --line:#F2F0EC26; --accent:#C2A878;
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Outfit",system-ui,sans-serif}
h1,h2,h3{font-weight:200;line-height:1;margin:0;letter-spacing:-.03em}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.vacio{grid-column:1/-1;color:var(--muted);margin:0}
 
/* barra de aviso y encabezado */
.promo{background:var(--accent);color:#050505;text-align:center;font-weight:500;font-size:.95rem;padding:9px 16px}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 32px;padding-top:22px;padding-bottom:22px}
.brand{font-weight:500;font-size:1.4rem;text-decoration:none;letter-spacing:-.02em}
nav{display:flex;gap:28px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--ink);border-color:var(--accent)}
 
/* botones */
.btn{display:inline-block;padding:14px 32px;border-radius:999px;text-decoration:none;font-weight:500;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn:hover{opacity:.82}
.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover{opacity:.45;cursor:not-allowed}
 
/* marcos de foto (placeholders) */
.ph,.arch{position:relative;overflow:hidden}
.arch{border-radius:999px 999px 0 0}
.ph::after,.arch::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0,#ffffff1c,transparent 60%)}
.g0{background:linear-gradient(#2A2A2A,#0B0B0B)}
.g1{background:linear-gradient(#3C3C3A,#121212)}
.g2{background:linear-gradient(#8C7650,#2B2212)}
.g3{background:linear-gradient(#2B3D35,#0C1210)}
 
/* portada */
.hero{padding:56px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.hero h1{font-size:clamp(4.5rem,15vw,12rem);margin-left:-.04em}
.hero p{margin:28px 0 36px;max-width:34ch;font-size:1.25rem;color:var(--muted)}
.hero .arch{height:clamp(320px,48vw,620px);animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
 
/* títulos de sección */
.sec{padding:88px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec h2{font-size:clamp(2.25rem,5vw,3.75rem)}
 
/* tres entradas */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.tile{text-decoration:none;display:block}
.tile:nth-child(2){margin-top:64px}
.tile .arch{aspect-ratio:3/4;margin-bottom:18px}
.tile h2{font-size:2rem}
.tile p{margin:6px 0 0;color:var(--muted)}
.tile:hover h2{color:var(--accent)}
 
/* pestañas y productos */
.tabs{display:flex;gap:24px}
.tab{font:inherit;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;padding:0 0 4px;cursor:pointer}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 20px}
.pl{display:block;text-decoration:none}
.pl:hover h3{color:var(--accent)}
.prod .ph{aspect-ratio:3/4;margin-bottom:14px}
.badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--bg);font-size:.8rem;font-weight:500;padding:4px 12px;border-radius:999px}
.prod h3{font-size:1.0625rem;font-weight:400;letter-spacing:0;line-height:1.3}
.price{margin:4px 0 10px;color:var(--muted)}
.buy{font-size:.95rem;color:var(--accent);text-underline-offset:4px}
 
/* detalle de producto */
.detalle{padding-top:40px;padding-bottom:88px}
.back{display:inline-block;margin-bottom:28px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.det{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gran{aspect-ratio:3/4}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{width:68px;aspect-ratio:3/4;padding:0;border:1px solid var(--line);border-radius:8px;opacity:.6;cursor:pointer;transition:opacity .2s,border-color .2s}
.thumb:hover{opacity:1}
.thumb[aria-pressed="true"]{opacity:1;border-color:var(--accent)}
.info h1{font-size:clamp(2.25rem,5vw,3.5rem)}
.info .price{margin:16px 0 24px;font-size:1.5rem}
.desc{margin:0 0 8px;max-width:46ch;color:var(--muted)}
.opts{margin-top:28px}
.opts h4{margin:0 0 12px;font-weight:500}
.optlist{display:flex;flex-wrap:wrap;gap:10px}
.opt[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.info .btn{display:block;margin-top:36px;text-align:center}
 
/* bloques editoriales */
.edits{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.edit{position:relative;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;text-decoration:none;overflow:hidden}
.edit::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#000000b3)}
.edit>*{position:relative}
.edit h2{font-size:clamp(2rem,4vw,3rem)}
.edit span{margin-top:12px;color:var(--accent)}
 
/* páginas de sección */
.page-head{padding:56px 0 40px}
.page-head h1{font-size:clamp(3.5rem,11vw,8rem)}
.page-head p{color:var(--muted);max-width:46ch;margin:20px 0 32px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:inherit;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 20px;cursor:pointer;transition:border-color .2s}
.chip:hover{border-color:var(--accent)}
.cat{border-top:1px solid var(--line);padding:64px 0}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.cat-head h2{font-size:clamp(2.25rem,5vw,3.5rem)}
.cat-head p{margin:0;color:var(--muted);max-width:40ch}
 
/* confianza y pie */
.trust{border-top:1px solid var(--line);background:var(--surface)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:40px;padding-bottom:40px}
.trust h3{font-size:1.25rem;font-weight:400;letter-spacing:0}
.trust p{margin:6px 0 0;color:var(--muted);font-size:.95rem}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:40px}
footer h4{margin:0 0 14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .brand{color:var(--ink)}
footer .about{color:var(--muted);max-width:30ch}
.copy{color:var(--muted);font-size:.9rem;padding-bottom:32px}
 
/* móvil */
@media (max-width:860px){
  .hero{padding:32px 0 64px}
  .hero .wrap,.edits,.trust .wrap,footer .wrap,.det{grid-template-columns:1fr}
  .hero .arch{height:340px}
  .sec{padding:64px 0}
  .tiles{grid-template-columns:1fr;gap:36px}
  .tile:nth-child(2){margin-top:0}
  .tile .arch{aspect-ratio:3/2}
  .prods{grid-template-columns:repeat(2,1fr)}
  .detalle{padding-top:24px;padding-bottom:64px}
  .det{gap:32px}
}
@media (prefers-reduced-motion:reduce){.hero .arch{animation:none}}