/* ============================================================
   RAWCO · DESIGN SYSTEM (B&W)
   Compartido por Catálogo, Checkout, Confirmación y Búsqueda
   ============================================================ */

:root{
  --bg:           #FFFFFF;
  --bg-alt:       #FFFFFF;
  --bg-soft:      #F4F4F4;
  --ink:          #000000;
  --ink-soft:     #2A2A2A;
  --ink-muted:    #8A8A8A;
  --line:         #E5E5E5;
  --line-strong:  #000000;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{ font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; letter-spacing:.01em; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.serif-it{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* ============== TOP BAR ============== */
.topbar{
  background:#000; color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em;
  text-align:center; padding:11px 16px; text-transform:uppercase;
}
.topbar span{ margin:0 14px; opacity:.78; }

/* ============== HEADER ============== */
.uyuni-head{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.uyuni-head__inner{
  max-width:1280px; margin:0 auto; padding:18px 28px;
  display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
}
.uyuni-nav{ display:flex; gap:28px; }
.uyuni-nav a{
  font-size:12px; font-weight:600; letter-spacing:.12em; color:#000;
  text-transform:uppercase; position:relative; padding-bottom:3px;
}
.uyuni-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:#000; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.uyuni-nav a:hover::after, .uyuni-nav a.is-active::after{ transform:scaleX(1); }
.uyuni-logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:.04em;
  color:#000; line-height:1;
}
.uyuni-logo .mark{ width:28px; height:28px; flex-shrink:0; color:#000; overflow:visible; }
.uyuni-logo .mark .wave-top,
.uyuni-logo .mark .wave-bot{
  transform-origin:575px 950px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.uyuni-logo:hover .mark .wave-top{ transform:translate(-14px,-10px) rotate(-2deg); }
.uyuni-logo:hover .mark .wave-bot{ transform:translate(8px,4px); }
.uyuni-tools{ display:flex; gap:18px; align-items:center; font-size:13px; color:#000; }
.uyuni-tools .ic{ width:18px; height:18px; }
.uyuni-tools a{ position:relative; transition:opacity .15s; display:inline-flex; align-items:center; gap:6px; }
.uyuni-tools a:hover{ opacity:.6; }
.uyuni-tools .badge{
  background:#000; color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:10px; padding:2px 6px;
}

/* ============== SECCIONES BASE ============== */
.shell{ max-width:1280px; margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em;
  color:var(--ink-muted); text-transform:uppercase;
}
.h-display{
  font-family:'Bebas Neue',sans-serif; font-weight:400;
  letter-spacing:.01em; text-transform:uppercase; line-height:.95; margin:0;
}

/* ============== BREADCRUMB ============== */
.crumbs{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em;
  color:var(--ink-muted); text-transform:uppercase;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.crumbs a{ color:var(--ink-muted); transition:color .15s; }
.crumbs a:hover{ color:#000; }
.crumbs .sep{ opacity:.4; }
.crumbs .here{ color:#000; }

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; background:#000; color:#fff; border:1px solid #000;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s;
}
.btn:hover{ background:#fff; color:#000; }
.btn--ghost{ background:#fff; color:#000; }
.btn--ghost:hover{ background:#000; color:#fff; }
.btn--lg{ padding:18px 28px; font-size:12px; }
.btn--block{ width:100%; }
.btn[disabled]{ background:#999; border-color:#999; color:#fff; cursor:not-allowed; }
.btn[disabled]:hover{ background:#999; color:#fff; }

/* ============== PRODUCT CARD (compartido) · editorial 3:5 ============== */
.prod{
  display:flex; flex-direction:column; position:relative;
  background:#fff; padding:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
  transition:background .2s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.prod:hover{ background:#fff; transform:translateY(-4px); }
.prod__img{ aspect-ratio:3/5; background:#F4F4F4; position:relative; overflow:hidden; margin-bottom:0; }
.prod__img-inner{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:grayscale(100%);
  transition:transform .6s ease, filter .5s ease;
}
.prod:hover .prod__img-inner{ transform:scale(1.03); filter:grayscale(0%); }
.prod__num{
  position:absolute; top:14px; left:14px; z-index:2;
  background:#fff; color:#000; padding:5px 9px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
}
.prod__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:#000; color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em;
  padding:6px 10px; text-transform:uppercase;
}
.prod__badge.sale{ background:#fff; color:#000; border:1px solid #000; }
.prod__fav{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid #000; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#000; transition:background .15s, color .15s;
}
.prod__fav:hover, .prod__fav.is-fav{ background:#000; color:#fff; }
.prod__fav svg{ width:15px; height:15px; }
.prod__fav.is-fav svg{ fill:currentColor; }
.prod__body{
  padding:20px 22px 22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.prod__cat{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em;
  color:var(--ink-muted); text-transform:uppercase; margin-bottom:2px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.prod__cat b{ color:#000; font-weight:500; }
.prod__name{
  font-family:'Bebas Neue',sans-serif; font-weight:400;
  font-size:26px; letter-spacing:.04em; line-height:1; text-transform:uppercase;
  margin:4px 0 4px; color:#000;
}
.prod__name em{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; }
.prod__excerpt{
  font-family:'Fraunces',serif; font-style:italic; font-size:13.5px;
  line-height:1.45; color:var(--ink-soft); margin:6px 0 0;
}
.prod__foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.prod__price{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:#000; }
.prod__old{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-muted); text-decoration:line-through; margin-left:8px; font-weight:400; }
.prod__cuotas{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--ink-muted); margin-top:4px; text-transform:uppercase; }
.prod__cta{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em;
  color:#000; text-transform:uppercase;
  border-bottom:1px solid #000; padding-bottom:2px;
}

/* ============== FOOTER ============== */
.foot{ background:#000; color:#fff; }
.foot__top{
  max-width:1280px; margin:0 auto; padding:80px 28px 48px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px;
}
.foot__brand-name{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Bebas Neue',sans-serif; font-size:48px; letter-spacing:.04em;
  margin-bottom:22px; line-height:1; color:#fff;
}
.foot__brand-name .mark{ width:42px; height:42px; color:#fff; }
.foot__manifest{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.7); max-width:380px; margin:0 0 22px; }
.foot__social{ display:flex; flex-wrap:wrap; gap:18px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.7); }
.foot__social a:hover{ color:#fff; }
.foot__head{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:18px;
}
.foot__col ul{ list-style:none; padding:0; margin:0; }
.foot__col li{ font-size:14px; line-height:2; color:rgba(255,255,255,.85); }
.foot__col li a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot__addr{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.85); margin-bottom:14px; font-style:normal; }
.foot__hours{ display:flex; flex-direction:column; gap:6px; max-width:200px; }
.foot__hours span{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:rgba(255,255,255,.65);
}
.foot__news{ border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.foot__news-inner{
  max-width:1280px; margin:0 auto; padding:36px 28px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
.foot__news-tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em;
  color:rgba(255,255,255,.55); margin-bottom:10px; text-transform:uppercase;
}
.foot__news p{
  margin:0; font-family:'Bebas Neue',sans-serif; font-size:32px;
  letter-spacing:.01em; line-height:1.05; color:#fff; max-width:520px; text-transform:uppercase;
}
.foot__news p em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; text-transform:none; }
.foot__news-form{ display:flex; gap:0; }
.foot__news-form input{
  background:transparent; border:1px solid rgba(255,255,255,.3); border-right:none;
  padding:16px 18px; color:#fff; font-size:14px; min-width:280px;
  font-family:inherit; outline:none; transition:border-color .15s;
}
.foot__news-form input:focus{ border-color:#fff; }
.foot__news-form input::placeholder{ color:rgba(255,255,255,.4); }
.foot__news-form button{
  background:#fff; color:#000; border:1px solid #fff; padding:16px 26px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em;
  cursor:pointer; text-transform:uppercase; transition:background .15s, color .15s;
}
.foot__news-form button:hover{ background:transparent; color:#fff; }
.foot__bot{
  max-width:1280px; margin:0 auto; padding:24px 28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ============== PAGE PREVIEW BANNER ============== */
.preview-bar{
  background:var(--ink); color:#fff; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.preview-bar .legend{ display:flex; gap:14px; flex-wrap:wrap; color:rgba(255,255,255,.65); }
.preview-bar .pill{ padding:4px 10px; border:1px solid rgba(255,255,255,.25); }
.preview-bar a{ color:rgba(255,255,255,.65); border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px; transition:color .15s, border-color .15s; }
.preview-bar a:hover{ color:#fff; border-color:#fff; }

/* ============== RESPONSIVE BASE ============== */
@media (max-width:980px){
  .uyuni-nav{ display:none; }
  .uyuni-head__inner{ grid-template-columns:auto 1fr auto; gap:18px; padding:14px 20px; }
  .foot__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot__news-inner{ grid-template-columns:1fr; }
  .foot__news-form input{ min-width:0; flex:1; }
}