/* ============================================================
   HOBBIAR — sistema visual
   Blanco dominante · rojo japonés · grotesca pesada · beige por bandas
   ============================================================ */

:root {
  --ink: #141418;
  --ink-soft: #2c2c33;
  --paper: #ffffff;        /* fondo primario — blanco */
  --sand: #f4f1ea;         /* beige para bandas puntuales */
  --sand-2: #efeae1;
  --paper-2: #ffffff;      /* cards sobre blanco */
  --paper-3: #ecebe6;
  --muted: #76757b;
  --muted-2: #a9a8ad;
  --line: rgba(20, 20, 24, 0.12);
  --line-soft: rgba(20, 20, 24, 0.06);

  /* acento (lo setea el JS según tweak) — rojo japonés por defecto */
  --accent: #e0231c;
  --accent-deep: #b41410;
  --accent-ink: #ffffff;

  --rail: 64px;
  --topbar: 78px;

  --ff-display: "Archivo", system-ui, sans-serif;
  --ff-body: "Archivo", system-ui, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1320px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* mono micro-label */
.kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker--accent { color: var(--accent); }

.display {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app { min-height: 100vh; }

/* ---- LEFT RAIL ---- */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.rail__mark {
  height: var(--topbar);
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--accent);
  transition: background .3s;
}
.rail__vert {
  margin-top: 26px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rail__spacer { flex: 1; }
/* 17 px de separación y no 9: con el área táctil de 24 px de abajo, dos puntos vecinos se pisarían
   —y un área que se solapa con la de al lado cuenta como área insuficiente igual—. */
.rail__dots { display: flex; flex-direction: column; gap: 17px; margin-bottom: 18px; }
.rail__dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .2s, transform .2s;
}
/* EL ÁREA PARA TOCARLO, invisible. El punto se ve de 7 px porque el diseño es ése; lo que se agranda
   es la zona que responde al dedo. 7 + 8,5×2 = 24 px, que es el mínimo que pide la pauta. */
.rail__dot::after {
  content: "";
  position: absolute;
  inset: -8.5px;
  border-radius: 50%;
}
.rail__dot.is-on { background: var(--accent); transform: scale(1.25); }
.rail__social {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 22px;
  color: var(--muted);
}
.rail__social a { transition: color .2s, transform .2s; }
.rail__social a:hover { color: var(--accent); transform: translateY(-2px); }

/* ---- TOP BAR ---- */
.topbar {
  position: fixed;
  top: 0; left: var(--rail); right: 0;
  height: var(--topbar);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 55;
  display: flex;
  align-items: center;
  padding: 0 34px;
  gap: 30px;
}
.topbar__logo { height: 30px; width: auto; }
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 20px;
}
.navlink {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.navlink::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent);
  transition: right .25s ease;
}
.navlink:hover { color: var(--ink); }
.navlink:hover::after, .navlink.is-active::after { right: 0; }
.navlink.is-active { color: var(--ink); }

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.iconbtn {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .18s, color .18s;
  position: relative;
}
.iconbtn:hover { background: rgba(20,20,24,0.06); }
.iconbtn--accent:hover { background: var(--accent); color: var(--accent-ink); }
.cart-count {
  position: absolute; top: 3px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper);
  transform: scale(0);
  transition: transform .22s cubic-bezier(.2,1.4,.4,1);
}
.cart-count.is-on { transform: scale(1); }

.topbar__cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: 11px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.topbar__cta:hover { background: var(--accent); transform: translateY(-1px); }

/* ---- MAIN ---- */
.main {
  margin-left: var(--rail);
  padding-top: var(--topbar);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: 13px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform .18s, background .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 26px -12px var(--accent); }
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--accent); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { transform: translateY(-2px); background: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--sm { height: 44px; padding: 0 18px; font-size: 13px; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }

/* ============================================================
   HERO (común)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--topbar));
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.hero__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-soft) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%);
  opacity: .8;
  pointer-events: none;
}
/* anillos concentricos desvaídos -> profundidad (ref. 3) */
.hero__rings {
  position: absolute; z-index: 0;
  right: 4%; top: 50%;
  width: 820px; height: 820px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 38px,
      rgba(20,20,24,0.04) 38px 39px);
  -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 60%, transparent 72%);
  pointer-events: none;
}
/* forma roja rasgada (hinomaru / pincelada) detras del producto */
.hero__shape {
  position: absolute; z-index: 1;
  background: var(--accent);
  pointer-events: none;
  transition: background .3s;
}
.hero__shape--torn {
  width: 380px; height: 500px;
  top: 50%; left: 50%;
  /* El diseño original venía de React y ponía el transform inline; acá va en el CSS para que la
     forma se centre y se incline aunque el JS no llegue a correr. El parallax (que se mueva al
     hacer scroll) lo suma el JS encima; sin él la forma se ve igual, sólo que quieta. */
  transform: translate(-50%, -50%) rotate(-3deg);
  clip-path: polygon(
    12% 2%, 64% 0, 58% 9%, 88% 6%, 80% 17%, 100% 22%,
    90% 40%, 99% 55%, 86% 64%, 96% 82%, 78% 86%, 84% 99%,
    52% 94%, 30% 100%, 36% 88%, 8% 92%, 18% 74%, 2% 64%,
    14% 48%, 0 36%, 16% 24%, 4% 12%);
}
.hero__shape--sun {
  width: 460px; height: 460px;
  right: 9%; top: 46%;
  border-radius: 50%;
}
.hero__shape::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(58% 58% at 32% 28%, rgba(255,255,255,.22), transparent 60%);
}
.hero__inner {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 40px 0;
  display: grid;
  align-items: center;
}
.hero__catlabel {
  position: absolute;
  left: -4px; top: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateX(50%);
  transform-origin: center;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--muted-2);
}

/* ghost wordmark behind product */
.hero__ghost {
  position: absolute;
  z-index: 1;
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--ink);
  opacity: 0.045;
  letter-spacing: -0.04em;
  line-height: .8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* product image */
/* EL REPARTO DE LA COLUMNA DERECHA.
   El stage tiene que ocupar el alto que sobra —así `place-items:center` centra la foto de verdad y
   no queda pegada arriba— pero SIN comerse el lugar de las miniaturas: con `height:100%` se llevaba
   los 562 px enteros y los thumbs terminaban fuera del hero, tapados. Con la columna en flex, el
   stage toma lo que queda (`flex:1`) y las miniaturas conservan el suyo.
   `min-height:0` es lo que permite que el stage se ACHIQUE cuando la ventana es baja: sin eso, un
   hijo flex nunca baja de su tamaño de contenido y vuelve a empujar. */
.hero__stage { position: relative; display: grid; place-items: center; flex: 1 1 auto; min-height: 0; }
.hero__prod {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 560px;
  /* TECHO DE ALTURA, EN ALTO DE PANTALLA. Con `max-height:100%` el techo dependía de que el stage
     tuviera un alto definido, y en la columna flex no lo tiene: el 100% valía «nada», el ancho
     mandaba, y un recorte VERTICAL (la guitarra eléctrica: angosto y alto) salía con 560 px de
     ancho y más de dos pantallas de alto — el hero medía tres ventanas (2026-09-14). En `vh` el
     techo resuelve siempre; `object-fit` la achica sin deformarla. */
  max-height: min(72vh, 660px);
  object-fit: contain;
  filter: drop-shadow(0 44px 54px rgba(20,20,24,0.34));
  animation: floaty 7s ease-in-out infinite;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .hero__prod { animation: none; } }

.hero__prod.swap-out { opacity: 0; transform: translateY(22px) scale(.94) rotate(-1deg); }

/* La capa transparente que hace que la foto del hero lleve a su producto. Va DEBAJO de las tarjetas
   (z-index 6) para no robarles el clic a la flecha ni al carrito, y encima de la foto (3). */
.hero__stagelink { position: absolute; inset: 0; z-index: 5; border-radius: 26px; }

/* thumbnails carousel */
.thumbs { display: flex; gap: 12px; align-items: center; }
.thumb {
  width: 70px; height: 70px;
  border-radius: 13px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  padding: 8px;
  transition: border-color .2s, transform .2s;
  position: relative;
}
/* CON TOPE EN LOS DOS LADOS. Estaba sólo el alto: una foto apaisada mantenía su ancho natural y
   se salía de la casilla de 70 px (se ve en el hero, tanto en el teléfono como en la PC). */
.thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.thumb:hover { transform: translateY(-3px); border-color: var(--muted-2); }
.thumb.is-active { border-color: var(--accent); }
.thumb.is-active::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 13px;
  border: 1.5px solid var(--accent);
  /* EL MARCO NO PUEDE TAPAR EL NÚMERO. El `::after` es hermano de `.thumb__n` y se pinta
     DESPUÉS (mismo z-index `auto` → gana el orden del documento), así que el borde rojo
     pasaba por encima del círculo con el 01. Se ordenan explícitamente, y el marco deja de
     comerse el click: es decoración. */
  z-index: 1; pointer-events: none;
}
.thumb__n {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}

/* rating stars */
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }

/* framed info cards (estilo recuadros derecha) */
.infocard {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 18px 40px -28px rgba(22,22,26,.45);
}

/* ============================================================
   HERO A — vitrina editorial
   ============================================================ */
.heroA .hero__inner { grid-template-columns: 0.92fr 1.08fr; gap: 20px; }
.heroA__left { position: relative; z-index: 4; max-width: 540px; }
.heroA__title {
  font-size: clamp(48px, 6.4vw, 104px);
  margin: 18px 0 0;
}
.heroA__title .l2 { color: var(--ink); display: block; }
.heroA__title .dot { color: var(--accent); }
.heroA__blurb {
  margin: 22px 0 0;
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 400px;
}
/* EL BLOQUE DEL PRECIO: arriba los tres números en una línea (tachado, precio, −%), abajo los «perks»
   (transferencia, envío gratis) como chips. Antes iba todo seguido en una fila, sin estilo propio: los estilos
   del descuento estaban en la hoja de la tienda y la portada no los cargaba. */
.heroA__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.heroA__prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.heroA__price { font-family: var(--ff-display); font-weight: 800; font-size: 34px; line-height: 1; }
.heroA__old { color: var(--muted-2); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; font-size: 15px; font-weight: 600; }
.heroA__desc { display: inline-flex; align-items: baseline; gap: 5px; background: var(--accent); color: #fff; border-radius: 8px; padding: 5px 9px; line-height: 1; align-self: center; }
.heroA__desc b { font-family: var(--ff-display); font-weight: 800; font-size: 15px; }
.heroA__desc small { font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.heroA__desc[hidden], .heroA__old[hidden] { display: none; }
.heroA__perks { display: flex; gap: 8px; flex-wrap: wrap; }
.heroA__perk { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
.heroA__perk b { color: var(--accent); font-weight: 800; }
.heroA__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.heroA__right { position: relative; height: 100%; min-height: 460px; display: flex; flex-direction: column; }
.heroA__cards {
  position: absolute; z-index: 6; right: 0; top: 6%;
  display: flex; flex-direction: column; gap: 12px;
  width: 224px;
}
.heroA__scorecard { display: flex; align-items: center; justify-content: space-between; }
.heroA__score { font-family: var(--ff-display); font-weight: 800; font-size: 30px; }
.heroA__thumbs { position: absolute; z-index: 6; left: 0; bottom: 4%; }
/* Las miniaturas van LEVANTADAS del piso del hero, más o menos a la altura de los botones de la
   izquierda: pegadas abajo quedaban contra la cinta roja y parecían de otra sección. Como la columna
   es flex, subirlas con un margen le devuelve ese alto al stage, que se reparte solo. */
.heroA__right > .thumbs { margin-bottom: clamp(40px, 13vh, 150px); }

/* ============================================================
   HERO B — contraste dramático
   ============================================================ */
.heroB .hero__inner { grid-template-columns: 1fr; }
.heroB__blade {
  position: absolute;
  z-index: 1;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: var(--accent);
  right: 16%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .92;
}
.heroB__blade::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.28), transparent 60%);
}
.heroB__vert {
  position: absolute; z-index: 2; left: 1.5%; top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(64px, 10.5vw, 168px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.heroB__vert .l2 { color: var(--accent); }
.heroB__vert .dot { color: var(--accent); }
.heroB__vert.on-blade .l2 { color: var(--ink); }
.heroB__stagewrap {
  position: relative; z-index: 3;
  display: grid; place-items: center end;
  padding-right: clamp(20px, 7vw, 130px);
  min-height: calc(100vh - var(--topbar) - 250px);
}
.heroB__strip {
  position: relative; z-index: 6;
  margin: 0 auto;
  width: 100%;
  max-width: var(--maxw);
  padding: 0 40px 26px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.heroB__info { display: flex; gap: 40px; align-items: flex-end; }
.heroB__kv .k { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.heroB__kv .v { font-weight: 700; font-size: 15px; margin-top: 4px; }
.heroB__price { font-family: var(--ff-display); font-weight: 800; font-size: 34px; }
.heroB__buy { display: flex; border-radius: 13px; overflow: hidden; border: 1.5px solid var(--ink); }
.heroB__buy button { padding: 0 22px; height: 50px; font-weight: 700; font-size: 13px; transition: background .2s,color .2s; }
.heroB__buy .b1 { background: var(--accent); color: var(--accent-ink); }
.heroB__buy .b2 { background: transparent; color: var(--ink); }
.heroB__buy .b2:hover { background: var(--ink); color: #fff; }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(90px, 11vw, 150px) 40px; }
.section--tight { padding-top: 60px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(48px, 6vw, 84px); flex-wrap: wrap; }
.section__title { font-family: var(--ff-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 68px); letter-spacing: -0.025em; line-height: .94; }
.section__title em { font-style: normal; color: var(--accent); }
.section__sub { color: var(--muted); font-size: 15px; max-width: 360px; margin-top: 12px; line-height: 1.55; }

/* ---- categorías: índice editorial interactivo ---- */
/* sección más compacta que el resto: el índice es denso, no monumental */
#categorias.section { padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(70px, 8vw, 110px); }
#categorias .section__head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.catindex {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: stretch;
}
.catindex__list { display: flex; flex-direction: column; justify-content: center; }
.catindex__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: clamp(14px, 1.7vw, 22px) 4px;
  border-top: 1px solid var(--line);
  text-align: left;
  background: none;
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.catindex__list .catindex__row:last-child { border-bottom: 1px solid var(--line); }
.catindex__row::before {
  content: ""; position: absolute; left: -40px; top: 0; bottom: 0;
  width: 4px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.catindex__row.is-active { padding-left: 20px; }
.catindex__row.is-active::before { transform: scaleY(1); }
.catindex__num {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--muted-2); transition: color .3s;
}
.catindex__row.is-active .catindex__num { color: var(--accent); }
.catindex__name {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(21px, 2.5vw, 34px);
  letter-spacing: -0.02em; line-height: 1.0;
  color: var(--ink); transition: color .3s, opacity .3s;
}
.catindex__row.is-active .catindex__name { color: var(--accent); }
.catindex__sub {
  display: block; font-family: var(--ff-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 7px; font-weight: 400;
}
.catindex__go {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  opacity: 0; transform: translateX(-10px) rotate(-45deg);
  transition: opacity .3s, transform .3s, background .3s, color .3s, border-color .3s;
}
.catindex__row.is-active .catindex__go {
  opacity: 1; transform: translateX(0) rotate(-45deg);
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.catindex__row.soon .catindex__name { color: var(--muted-2); }
.catindex__row.soon.is-active .catindex__name { color: var(--ink); }
.catindex__soonpill {
  display: inline-block; vertical-align: middle; margin-left: 12px;
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 3px 9px;
  position: relative; top: -4px;
}

/* stage del preview (producto flotando sobre forma roja) */
.catindex__stage {
  position: sticky;
  top: calc(var(--topbar) + 30px);
  height: min(480px, calc(100vh - var(--topbar) - 60px));
  align-self: start;
  display: grid; place-items: center;
  overflow: visible;
}
.catindex__shape {
  position: absolute; z-index: 1;
  width: clamp(250px, 26vw, 360px); aspect-ratio: 1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--accent); border-radius: 50%;
  transition: background .3s;
}
.catindex__shape::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(58% 58% at 34% 28%, rgba(255,255,255,.22), transparent 60%);
}
.catindex__ring {
  position: absolute; z-index: 0; inset: 0;
  background: repeating-radial-gradient(circle at center, transparent 0 30px, var(--line-soft) 30px 31px);
  -webkit-mask-image: radial-gradient(circle at center, #000 52%, transparent 70%);
          mask-image: radial-gradient(circle at center, #000 52%, transparent 70%);
}
.catindex__shots { position: absolute; inset: 0; z-index: 2; }
.catindex__shot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.92) translateY(14px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.catindex__shot.is-active { opacity: 1; transform: none; }
.catindex__shot img {
  max-height: 78%; max-width: 80%; width: auto; object-fit: contain;
  filter: drop-shadow(0 36px 44px rgba(20,20,24,.34));
}
.catindex__soon {
  position: relative; z-index: 3; text-align: center; color: #fff;
}
.catindex__soon .big { font-family: var(--ff-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; }
.catindex__soon .small { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-top: 8px; opacity: .85; }
.catindex__tag {
  position: absolute; left: 0; bottom: 14px; z-index: 4;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- filtros + grilla ---- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  height: 40px; padding: 0 18px; border-radius: 11px;
  border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: all .18s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--muted-2); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
/* La TARJETA DE PRODUCTO vive en `hobbiar-cards.css`, que cargan las dos hojas del tema. Estaba
   definida acá Y en `hobbiar.css`, y quedaron distintas: sin `margin: 0` en el `<h3>` del nombre, la
   misma tarjeta medía 362 px en la portada y 334 en el catálogo. Lo que sigue es sólo lo que es
   propio de esta pantalla. */
.pcard__add {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--paper); border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  transition: all .18s;
}
.pcard__add:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); }
.pcard__add.added { background: var(--ink); color: #fff; border-color: var(--ink); }

.rate-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }

/* ============================================================
   ZONAS full-bleed (ritmo blanco / beige)
   ============================================================ */
.zone { position: relative; }
.zone--sand { background: var(--sand); }
.zone--sand + .zone--sand { border-top: 1px solid var(--line-soft); }

/* hairline divisor con marca japonesa (cuadrado rojo al centro) */
.rule { position: relative; height: 1px; background: var(--line); max-width: var(--maxw); margin: 0 auto; }

/* ============================================================
   MARQUEE cinético
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: background .3s;
}
.marquee--ink { background: var(--ink); color: #fff; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: 0.01em; text-transform: uppercase;
  padding: 0 26px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 26px;
}
.marquee__item::after {
  content: "◆"; font-size: .5em; opacity: .7;
}
.marquee--ink .marquee__item span { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   SCROLL PROGRESS (barra superior)
   ============================================================ */
.progress {
  position: fixed; top: 0; left: var(--rail); right: 0; height: 3px;
  z-index: 70; background: transparent;
}
.progress__bar {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: width .08s linear;
}

/* ============================================================
   REVEAL on scroll (robusto: visible si no hay JS)
   ============================================================ */
.js-reveal { opacity: 0; transform: translateY(34px); will-change: opacity, transform; }
.js-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.js-reveal-clip { clip-path: inset(0 100% 0 0); }
.js-reveal-clip.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.76,0,.24,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ============================================================
   BANDA EDITORIAL (oscura)
   ============================================================ */
/* ====== MANIFIESTO oscuro (post-hero) — aire editorial ====== */
.band {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.band__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(86px, 10vw, 152px) 40px;
  position: relative; z-index: 2;
}
.band__ghost {
  position: absolute; right: -1%; top: 8%;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(200px, 30vw, 460px); color: #fff; opacity: .035;
  line-height: .8; pointer-events: none; letter-spacing: -.04em; z-index: 1;
}
.band__top {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  min-height: 440px;
}
.band__title {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(48px, 7.4vw, 120px);
  letter-spacing: -0.03em; line-height: .9;
}
.band__title em { font-style: normal; }
.band__title .dot { color: var(--accent); }
.band__lead {
  color: #c9c8cd; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  max-width: 420px; margin-top: 26px;
}
.band__lead b { color: #fff; font-weight: 700; }

/* stage: producto flotando sobre círculo rojo */
.band__stage { position: relative; min-height: 440px; display: grid; place-items: center; }
.band__shape {
  position: absolute; z-index: 1;
  width: clamp(300px, 30vw, 440px); aspect-ratio: 1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--accent); border-radius: 50%;
  transition: background .3s;
}
.band__shape::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(58% 58% at 34% 28%, rgba(255,255,255,.24), transparent 60%);
}
.band__ring {
  position: absolute; z-index: 0; inset: -10% ;
  background: repeating-radial-gradient(circle at center, transparent 0 32px, rgba(255,255,255,.05) 32px 33px);
  -webkit-mask-image: radial-gradient(circle at center, #000 50%, transparent 70%);
          mask-image: radial-gradient(circle at center, #000 50%, transparent 70%);
}
.band__prod {
  position: relative; z-index: 2;
  max-height: 86%; max-width: 84%; width: auto; object-fit: contain;
  filter: drop-shadow(0 40px 52px rgba(0,0,0,.55));
  animation: floaty 7.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .band__prod { animation: none; } }

/* La pieza de «La diferencia Hobbiar» lleva a su ficha. Capa transparente sobre el stage —igual
   que en el hero— para no tocar el lugar ni el tamaño de la foto. Va sobre la foto (z 2) y sobre
   la etiqueta «Create · Build · Collect» no hay nada que clickear. */
.band__link { position: absolute; inset: 0; z-index: 3; }
.band__tag {
  position: absolute; left: 0; bottom: 6px; z-index: 3;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #87868c;
}

/* puntos del manifiesto: fila editorial */
.band__points {
  position: relative;
  margin-top: clamp(48px, 6vw, 86px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
}
.band__pt {
  padding: 32px 34px 0 0;
  border-right: 1px solid rgba(255,255,255,.10);
}
.band__pt:last-child { border-right: none; padding-right: 0; }
/* AIRE DESPUÉS DE LA LÍNEA. El diseño original define `border-right` y ningún `padding-left`: la
   línea de una columna queda pegada al "01" y al texto de la siguiente, y se lee apretado. Se
   separa a partir de la segunda (la primera no tiene línea a su izquierda). */
.band__pt + .band__pt { padding-left: 30px; }
.band__pt .num {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent);
}
.band__pt .h {
  font-family: var(--ff-display); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.01em; line-height: 1.05; margin-top: 16px;
}
.band__pt .d { color: #a9a8ad; font-size: 14px; margin-top: 12px; line-height: 1.55; }


/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.footer { background: #111114; color: var(--paper); }
.news {
  max-width: var(--maxw); margin: 0 auto;
  padding: 70px 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.news__title { font-family: var(--ff-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1; }
.news__form { display: flex; gap: 10px; }
.news__input {
  flex: 1; height: 54px; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  padding: 0 18px; color: #fff; font-size: 15px; font-family: inherit;
  transition: border-color .2s;
}
.news__input::placeholder { color: #87868c; }
.news__input:focus { outline: none; border-color: var(--accent); }
.news__ok { color: var(--accent); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }

.foot {
  max-width: var(--maxw); margin: 0 auto;
  padding: 56px 40px 30px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.foot__logo { height: 30px; margin-bottom: 18px; }
.foot__about { color: #9a999f; font-size: 13.5px; line-height: 1.6; max-width: 280px; }
.foot__col h4, .foot__col .foot__t { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #87868c; margin: 0 0 16px; }
.foot__col a { display: block; color: #c9c8cd; font-size: 14px; padding: 6px 0; transition: color .2s; }
.foot__col a:hover { color: var(--accent); }
.foot__bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding: 22px 40px 40px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: #7a797f; font-size: 12.5px; font-family: var(--ff-mono); letter-spacing: .04em;
}

/* ============================================================
   MINI CART
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(18,18,22,.42);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(420px, 92vw);
  background: var(--paper-2);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .36s cubic-bezier(.4,0,.1,1);
  display: flex; flex-direction: column;
}
.cart.is-on { transform: translateX(0); }
/* Con "reducir movimiento", el cajón aparece de una. No es sólo cortesía: si la transición no llega
   a correr, el panel se queda fuera de la pantalla y ningún click de adentro le llega (el JS tiene
   además una red de seguridad, ver abrirCajon en js/store/hobbiar.js). */
@media (prefers-reduced-motion: reduce) {
  .cart { transition: none; }
  .scrim { transition: none; }
}
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.cart__head h3 { font-family: var(--ff-display); font-weight: 800; font-size: 20px; margin: 0; }
.cart__items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.citem { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.citem__media { width: 72px; height: 72px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; padding: 8px; flex-shrink: 0; }
.citem__media img { max-height: 100%; object-fit: contain; }
.citem__name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.citem__cat { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
.citem__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); transition: background .15s; }
.qty button:hover { background: var(--paper); }
.qty span { width: 30px; text-align: center; font-weight: 700; font-size: 13px; }
.citem__price { font-family: var(--ff-display); font-weight: 800; font-size: 15px; }
.citem__rm { color: var(--muted-2); font-size: 11px; font-family: var(--ff-mono); letter-spacing: .06em; transition: color .2s; }
.citem__rm:hover { color: var(--accent); }

/* BLANCOS TÁCTILES DEL CARRITO. Acá los +/− eran de 28×28: con el dedo no se aciertan (el mínimo
   razonable es 44) y el cajón parecía no responder. Se agranda el área, no el dibujo. */
@media (pointer: coarse) {
  .qty button { width: 44px; height: 44px; font-size: 18px; }
  .qty span { width: 38px; font-size: 15px; }
  .citem__rm { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 12px; }
}
.cart__empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px; gap: 14px; }
.cart__foot { padding: 22px 24px 26px; border-top: 1px solid var(--line); }
.cart__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cart__total .l { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cart__total .v { font-family: var(--ff-display); font-weight: 800; font-size: 28px; }
.cart__note { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* ============================================================
   QUICK VIEW
   ============================================================ */
.qv {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 28px;
  opacity: 0; pointer-events: none;
  transition: opacity .26s;
}
.qv.is-on { opacity: 1; pointer-events: auto; }
.qv__card {
  position: relative;
  width: min(880px, 100%);
  background: var(--paper-2);
  border-radius: 22px;
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.5);
  transform: translateY(24px) scale(.97);
  transition: transform .3s cubic-bezier(.2,1,.3,1);
}
.qv.is-on .qv__card { transform: translateY(0) scale(1); }
.qv__media {
  position: relative;
  background: radial-gradient(120% 100% at 50% 20%, #fff, var(--paper) 78%);
  display: grid; place-items: center; padding: 40px; min-height: 380px;
}
.qv__media::before { content:""; position:absolute; inset:0; background-image: radial-gradient(var(--line-soft) 1.3px, transparent 1.3px); background-size: 22px 22px; opacity:.6; }
.qv__media img { position: relative; max-height: 320px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(22,22,26,.28)); }
.qv__body { padding: 38px 36px; display: flex; flex-direction: column; }
.qv__cat { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.qv__name { font-family: var(--ff-display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; line-height: 1; margin: 12px 0 0; }
.qv__brand { color: var(--muted); font-size: 14px; margin-top: 10px; }
.qv__blurb { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin-top: 18px; }
.qv__spec { display: flex; gap: 26px; margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qv__spec .k { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.qv__spec .v { font-weight: 700; font-size: 14px; margin-top: 5px; }
.qv__buy { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 16px; }
.qv__price { font-family: var(--ff-display); font-weight: 800; font-size: 34px; }
.qv__close {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  transition: background .2s, color .2s, transform .2s;
}
.qv__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 120;
  transform: translateX(-50%) translateY(30px);
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* tweak: fondo plano (sin patrón de puntos) */
.app.flat .hero__pattern { opacity: 0; }
.app.flat .pcard__media::before { opacity: 0; }
.app.flat .hero__rings, .app.flat .catindex__ring, .app.flat .band__ring { opacity: 0; }

/* tweak: sin bandas beige -> todo blanco */
.app.no-beige .zone--sand { background: var(--paper); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .heroA .hero__inner { grid-template-columns: 1fr; gap: 30px; padding-top: 24px; }
  .heroA__right { min-height: 380px; order: -1; }
  .heroA__cards { position: static; width: auto; flex-direction: row; margin-bottom: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .catindex { grid-template-columns: 1fr; gap: 30px; }
  /* SIN EL CORRIMIENTO DEL HOVER. En escritorio la fila elegida se corre 20 px acompañando a la
     barra roja del costado; en el teléfono no hay mouse, la barra queda fuera de la pantalla
     (`left:-40px`) y lo único que se ve es una fila desalineada respecto de las otras. El color
     de acento alcanza para señalar cuál está elegida. */
  .catindex__row.is-active { padding-left: 4px; }
  .catindex__stage { order: -1; min-height: 320px; }
  .band__top { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .band__stage { min-height: 340px; order: -1; }
  .band__points { grid-template-columns: 1fr; }
  .band__pt { border-right: none; border-top: 1px solid rgba(255,255,255,.10); padding: 24px 0 0; }
  /* EL 02 Y EL 03 QUEDABAN SANGRADOS. `.band__pt + .band__pt { padding-left: 30px }` separa las
     columnas de la línea vertical en escritorio, y es MÁS ESPECÍFICA que la regla de acá arriba:
     apilados en una columna, el 01 arrancaba contra el borde y los otros dos 30 px adentro. */
  .band__pt + .band__pt { padding-left: 0; }
  .band__pt:first-child { border-top: none; }
  .news, .foot { grid-template-columns: 1fr; }
  .foot { gap: 28px; }
  .qv__card { grid-template-columns: 1fr; }
  .qv__media { min-height: 260px; }
}
@media (max-width: 720px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .topbar { padding: 0 18px; gap: 14px; }
  .topbar__nav { display: none; }
  .topbar__cta span { display: none; }
  .section { padding: 64px 22px; }
  .band__inner { padding: 64px 22px; }
  .grid { grid-template-columns: 1fr; }
  .heroA__title { font-size: 52px; }
  .heroB__vert { font-size: 64px; }
  .heroB__blade { width: 320px; height: 320px; right: 8%; }
  .news, .foot, .foot__bottom { padding-left: 22px; padding-right: 22px; }
}

/* Los puntos del riel llevan a su sección: se marcan al pasar el mouse y se esconden
   en el teléfono, donde el riel no se muestra. */
.rail__dot{display:block}
.rail__dot:hover{background:var(--muted-2);transform:scale(1.25)}
@media(max-width:900px){.rail__dots{display:none}}

/* El ancho del logo del pie sale de su proporción, no del ancho de la columna. Con `width` fijo en
   el HTML y `height:30px` en el CSS, `max-width:100%` lo llevaba al ancho del contenedor (318 px) y
   lo aplastaba a 30 de alto: quedaba estirado a lo ancho. */
.foot__logo{width:auto}