/* ============================================================
   Tienda BRB — hoja única
   Lenguaje de color: ORO = Black Ring · NARANJA = Amazon.
   Si un botón es naranja, te lleva a Amazon. Sin excepción.
   ============================================================ */

:root{
  --tinta:#0B0B0C;
  --grafito:#141417;
  --placa:#1A1A1F;
  --humo:#25252C;
  --oro:#C9A227;
  --oro-luz:#F0D67A;
  --amazon:#FF9900;
  --amazon-hov:#FFAD33;
  --hueso:#EDE9E2;
  --ceniza:#8A8A93;
  --verde:#4ADE80;

  --display:"Archivo",system-ui,sans-serif;
  --texto:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ancho:1220px;
  --rail:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinta);color:var(--hueso);
  font-family:var(--texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

.envoltura{max-width:var(--ancho);margin:0 auto;padding-inline:var(--rail)}

/* ── tipografía ─────────────────────────────────────────── */
.display{
  font-family:var(--display);font-weight:800;
  font-stretch:118%;letter-spacing:-.03em;line-height:.93;
  text-transform:uppercase;margin:0;
}
.rotulo{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ceniza);
}
.rotulo--oro{color:var(--oro)}

/* ── barra superior ─────────────────────────────────────── */
.cinta{
  background:var(--oro);color:#15130A;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:9px 16px;font-weight:600;
}
.barra{
  position:sticky;top:0;z-index:60;background:rgba(11,11,12,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--humo);
}
.barra__fila{display:flex;align-items:center;gap:28px;height:68px}
.marca{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:800;font-stretch:118%;letter-spacing:.04em;font-size:15px;text-transform:uppercase}
.anillo{width:20px;height:20px;border:2.5px solid var(--oro);border-radius:50%;flex:none}
.barra nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.barra nav a{font-size:14px;color:var(--ceniza);transition:color .18s}
.barra nav a:hover{color:var(--hueso)}
@media(max-width:760px){.barra nav a.ocultar-movil{display:none}}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px);position:relative}
.hero::after{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--humo) 20%,var(--humo) 80%,transparent);
  top:0;
}
.hero h1{font-size:clamp(2.35rem,8.6vw,6.4rem);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--amazon)}
.hero__bajada{
  margin:26px 0 0;max-width:52ch;font-size:clamp(1.05rem,2vw,1.24rem);
  color:#C4C0B9;line-height:1.55;
}
.hero__bajada b{color:var(--hueso);font-weight:600}

/* ── LA RUTA — elemento firma ───────────────────────────── */
.ruta{
  margin-top:clamp(44px,7vw,72px);border:1px solid var(--humo);
  background:linear-gradient(180deg,var(--grafito),#101013);
  border-radius:3px;padding:clamp(24px,4vw,38px) clamp(20px,4vw,40px) clamp(30px,4vw,42px);
}
.ruta__enc{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:38px}
.ruta__pista{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ruta__linea{
  position:absolute;top:13px;left:12.5%;right:12.5%;height:2px;
  background:var(--humo);overflow:hidden;
}
.ruta__linea::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--oro),var(--amazon),transparent);
  animation:recorrido 4.2s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes recorrido{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

.nodo{position:relative;text-align:center;padding-top:0}
.nodo__punto{
  width:28px;height:28px;border-radius:50%;margin:0 auto 16px;
  border:2px solid var(--humo);background:var(--tinta);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;
  color:var(--ceniza);position:relative;z-index:2;
}
.nodo--brb .nodo__punto{border-color:var(--oro);color:var(--oro)}
.nodo--amz .nodo__punto{border-color:var(--amazon);color:var(--amazon)}
.nodo h3{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:14px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 6px;
}
.nodo p{margin:0;font-size:13.5px;color:var(--ceniza);line-height:1.5}
.nodo__quien{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:9px;
}
.nodo--brb .nodo__quien{color:var(--oro)}
.nodo--amz .nodo__quien{color:var(--amazon)}

/* En pantallas angostas los 4 pasos en fila quedan ilegibles. Se apilan en dos
   columnas y la línea desaparece: ya no habría una fila que recorrer. */
@media(max-width:720px){
  .ruta__pista{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .ruta__linea{display:none}
  .nodo{text-align:left}
  .nodo__punto{margin:0 0 12px}
  .ruta__enc{margin-bottom:26px}
}
@media(max-width:400px){
  .ruta__pista{grid-template-columns:1fr;gap:22px}
}

/* el nodo que cuelga fuera de la línea: el punto de la página */
.ruta__fuera{
  margin-top:34px;padding-top:26px;border-top:1px dashed var(--humo);
  display:flex;gap:16px;align-items:flex-start;
}
.ruta__fuera .tacha{
  flex:none;width:28px;height:28px;border-radius:50%;border:2px dashed #3A3A44;
  display:grid;place-items:center;color:#55555F;font-size:15px;line-height:1;
}
.ruta__fuera p{margin:0;font-size:14px;color:var(--ceniza);max-width:70ch}
.ruta__fuera b{color:var(--hueso);font-weight:600}

/* ── sellos de garantía ─────────────────────────────────── */
.sellos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--humo);border:1px solid var(--humo);margin:clamp(48px,7vw,80px) 0}
.sello{background:var(--tinta);padding:26px 24px}
.sello h4{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;margin:12px 0 7px}
.sello p{margin:0;font-size:13.5px;color:var(--ceniza);line-height:1.55}
.sello svg{width:22px;height:22px;stroke:var(--oro);fill:none;stroke-width:1.6}

/* ── catálogo ───────────────────────────────────────────── */
.seccion{padding:clamp(40px,6vw,72px) 0}
.seccion__enc{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:20px;border-bottom:1px solid var(--humo)}
.seccion__enc h2{font-size:clamp(1.8rem,4.4vw,2.9rem)}

.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filtro{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--humo);color:var(--ceniza);
  background:transparent;cursor:pointer;transition:.18s;border-radius:2px;
}
.filtro:hover{border-color:#3A3A44;color:var(--hueso)}
.filtro[aria-current="true"]{border-color:var(--oro);color:var(--oro);background:rgba(201,162,39,.07)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}

/* la ficha se lee como una declaración de embarque, no como un card genérico */
.ficha{
  border:1px solid var(--humo);background:var(--grafito);border-radius:3px;
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .2s;
}
.ficha:hover{border-color:#3A3A44;transform:translateY(-2px)}
.ficha__tira{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--humo);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#5E5E68;
}
.ficha__tira .ok{color:var(--verde);display:flex;align-items:center;gap:5px}
.ficha__tira .ok::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--verde)}
/* flex:none — si no, la rejilla estira la foto y las fichas de una fila
   quedan con el texto a distintas alturas. */
.ficha__foto{background:#F7F7F5;aspect-ratio:1;flex:none;display:grid;place-items:center;padding:20px}
.ficha__foto img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.ficha__cuerpo{padding:16px 15px 15px;display:flex;flex-direction:column;gap:11px;flex:1}
.ficha__marca{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--oro)}
.ficha__titulo{
  font-size:14.5px;line-height:1.42;margin:0;color:var(--hueso);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ficha__estrellas{font-family:var(--mono);font-size:11px;color:var(--ceniza);display:flex;gap:7px;align-items:center}
.ficha__estrellas .star{color:var(--amazon)}
.ficha__precio{margin-top:auto;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ficha__precio .n{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.55rem;letter-spacing:-.02em}
.ficha__precio .antes{font-size:12.5px;color:#5E5E68;text-decoration:line-through}
.ficha__precio .sin{font-size:12.5px;color:var(--ceniza)}

.a-amazon{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--amazon);color:#1A1206;font-weight:700;font-size:14px;
  padding:12px 16px;border-radius:2px;transition:background .18s;text-align:center;
}
.a-amazon:hover{background:var(--amazon-hov)}
.a-amazon svg{width:15px;height:15px;flex:none}
.pie-boton{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#5E5E68;text-align:center;margin:8px 0 0;
}

/* ── ficha de producto ──────────────────────────────────── */
.detalle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);
  padding:clamp(36px,6vw,64px) 0}
@media(max-width:860px){.detalle{grid-template-columns:1fr}}
.detalle__foto{background:#F7F7F5;padding:38px;display:grid;place-items:center;border-radius:3px;aspect-ratio:1}
.detalle__foto img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.detalle h1{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.22;letter-spacing:-.01em;
  font-family:var(--texto);font-weight:600;text-transform:none;margin:14px 0 0}
.precio-grande{font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.03em;margin:22px 0 4px;line-height:1}
.datos{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--humo)}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--humo);font-size:13.5px}
.datos dt,.datos .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ceniza)}

/* ── varios ─────────────────────────────────────────────── */
.vacio{border:1px dashed var(--humo);padding:clamp(36px,6vw,60px);text-align:center;border-radius:3px}
.vacio h3{font-family:var(--display);font-weight:700;font-stretch:112%;text-transform:uppercase;
  font-size:1.2rem;margin:0 0 10px;letter-spacing:.01em}
.vacio p{margin:0 auto;max-width:52ch;color:var(--ceniza);font-size:14.5px}

.pie{border-top:1px solid var(--humo);padding:44px 0 56px;margin-top:40px}
.pie__fila{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.pie p{margin:0;font-size:13px;color:var(--ceniza);max-width:62ch;line-height:1.6}
.pie a{color:var(--oro)}
.aviso-afiliado{
  border-left:2px solid var(--oro);padding:14px 0 14px 18px;margin-top:26px;
  font-size:12.5px;color:var(--ceniza);max-width:76ch;line-height:1.6;
}

.wa{
  position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:9px;
  background:var(--grafito);border:1px solid var(--humo);color:var(--hueso);
  padding:11px 16px;border-radius:2px;font-size:13.5px;font-weight:500;
  transition:border-color .18s;box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.wa:hover{border-color:var(--oro)}
.wa svg{width:16px;height:16px;fill:var(--verde)}
@media(max-width:520px){.wa span{display:none}.wa{padding:13px}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}