/* ============================================================
   ManekiTCG — Tema público "Washi & Hanko"
   Paleta: aka (rojo enso) · kin (dorado cascabel) · kinari (papel) · sumi (tinta)
   Tipografía: Zen Maru Gothic (display) + Zen Kaku Gothic New (cuerpo)
   ============================================================ */
:root {
  --aka:    #b5252b;
  --aka2:   #8f1b20;
  --kin:    #e2a23b;
  --kin2:   #c9882a;
  --kinari: #f7efdf;
  --washi:  #fffaf0;
  --sumi:   #171210;
  --sumi2:  #2b231e;
  --gris:   #7a6f63;
  --linea:  #e6d9c2;
  --ok:     #2e7d4f;
  --radius: 16px;
  --shadow: 0 4px 18px rgba(23,18,16,.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: var(--kinari);
  color: var(--sumi);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, .display { font-family: 'Zen Maru Gothic', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Patrón seigaiha (olas) sutil ---------- */
.seigaiha {
  background-color: var(--kinari);
  background-image: radial-gradient(circle at 50% 110%, transparent 38%, rgba(181,37,43,.06) 39%, rgba(181,37,43,.06) 43%, transparent 44%),
                    radial-gradient(circle at 0% 110%, transparent 38%, rgba(226,162,59,.07) 39%, rgba(226,162,59,.07) 43%, transparent 44%),
                    radial-gradient(circle at 100% 110%, transparent 38%, rgba(226,162,59,.07) 39%, rgba(226,162,59,.07) 43%, transparent 44%);
  background-size: 56px 28px;
}

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--sumi);
  border-bottom: 3px solid var(--kin);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.nav-logo img { height: 52px; width: auto; }
.nav-links { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav-link {
  color: var(--kinari); font-weight: 700; font-size: 14px;
  padding: 8px 14px; border-radius: 99px; transition: .2s;
}
.nav-link:hover { background: rgba(226,162,59,.18); color: var(--kin); }
.nav-link.active { background: var(--aka); color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--kinari); font-weight: 700; font-size: 14px;
  background: none; border: none; padding: 6px 10px; border-radius: 99px; transition: .2s;
}
.nav-btn:hover { background: rgba(255,255,255,.12); }
.nav-btn-dash { border: 1px solid var(--kin); color: var(--kin); }
.cart-badge {
  background: rgba(255,255,255,.25); color: #fff;
  font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 99px;
}
.cart-badge.has-items { background: var(--kin); color: var(--sumi); }

/* ---------- Hero ---------- */
.hero {
  max-width: 1200px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--aka); font-weight: 900; letter-spacing: .14em;
  font-size: 12px; text-transform: uppercase; margin-bottom: 14px;
}
.hero-kicker::before, .hero-kicker::after { content: "—"; color: var(--kin); }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; font-weight: 900; }
.hero h1 .rojo { color: var(--aka); }
.hero p { margin-top: 16px; font-size: 17px; color: var(--gris); max-width: 480px; }
.hero-jp { display: block; color: var(--kin2); font-size: 14px; letter-spacing: .4em; margin-top: 6px; font-weight: 700; }
.hero-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-img { position: relative; display: flex; justify-content: center; }
.hero-img img { width: min(380px, 90%); filter: drop-shadow(0 14px 30px rgba(143,27,32,.25)); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 15px;
  padding: 13px 26px; border-radius: 99px; border: none; transition: .2s;
}
.btn-aka { background: var(--aka); color: #fff; box-shadow: 0 6px 16px rgba(181,37,43,.32); }
.btn-aka:hover { background: var(--aka2); transform: translateY(-2px); }
.btn-kin { background: var(--kin); color: var(--sumi); }
.btn-kin:hover { background: var(--kin2); transform: translateY(-2px); }
.btn-ghost { background: transparent; border: 2px solid var(--sumi); color: var(--sumi); }
.btn-ghost:hover { background: var(--sumi); color: var(--kinari); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Sello hanko (firma visual) ---------- */
.hanko {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--aka);
  padding: 4px 10px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.55);
  outline: 2px solid var(--aka);
  transform: rotate(-3deg);
}
.hanko.kin { background: var(--kin); color: var(--sumi); outline-color: var(--kin); }
.hanko.midori { background: var(--ok); outline-color: var(--ok); }

/* ---------- Secciones ---------- */
.section { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 { font-size: 28px; font-weight: 900; }
.section-head .jp { color: var(--kin2); font-weight: 700; letter-spacing: .3em; font-size: 13px; }
.section-head .ver-todo { margin-left: auto; color: var(--aka); font-weight: 800; font-size: 14px; }
.section-head .ver-todo:hover { text-decoration: underline; }

/* ---------- Filtros catálogo ---------- */
.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; align-items: center;
}
.filtros input[type=search], .filtros select {
  font-family: inherit; font-size: 14px; padding: 10px 14px;
  border: 2px solid var(--linea); border-radius: 12px; background: var(--washi); color: var(--sumi);
  outline: none; transition: .2s;
}
.filtros input[type=search]:focus, .filtros select:focus { border-color: var(--kin); }
.filtros input[type=search] { flex: 1; min-width: 200px; }
.chip {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: 99px; border: 2px solid var(--linea);
  background: var(--washi); color: var(--sumi2); transition: .2s;
}
.chip:hover { border-color: var(--kin); }
.chip.active { background: var(--sumi); color: var(--kin); border-color: var(--sumi); }

/* ---------- Grid de productos ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.card {
  background: var(--washi); border: 1px solid var(--linea); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: .22s; position: relative;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--kin); }
.card-img {
  aspect-ratio: 1; background: var(--kinari);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .placeholder { font-size: 54px; opacity: .35; }
.card-sello { position: absolute; top: 10px; left: 10px; z-index: 2; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-juego { font-size: 11px; font-weight: 800; color: var(--kin2); letter-spacing: .08em; text-transform: uppercase; }
.card-nombre { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.3; }
.card-precio { font-size: 19px; font-weight: 900; color: var(--aka); margin-top: auto; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px;
  background: var(--kinari); color: var(--sumi2); border: 1px solid var(--linea);
}
.tag.low { background: #fdecec; color: var(--aka); border-color: #f3c2c4; }
.tag.fecha { background: #fdf3e1; color: var(--kin2); border-color: #f0ddb6; }
.tag.agotado { background: var(--sumi); color: var(--kinari); border-color: var(--sumi); }

.empty {
  grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--gris);
}
.empty .neko { font-size: 50px; margin-bottom: 10px; }

/* ---------- Detalle producto ---------- */
.detalle {
  max-width: 1000px; margin: 0 auto; padding: 40px 20px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: start;
}
.detalle-img {
  background: var(--washi); border: 1px solid var(--linea); border-radius: var(--radius);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.detalle-img img { width: 100%; height: 100%; object-fit: cover; }
.detalle-info h1 { font-size: 30px; font-weight: 900; line-height: 1.2; margin: 8px 0 12px; }
.detalle-precio { font-size: 32px; font-weight: 900; color: var(--aka); margin: 14px 0; }
.detalle-desc { color: var(--gris); line-height: 1.65; margin-bottom: 18px; }
.detalle-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.qty-row { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.qty {
  display: inline-flex; align-items: center; border: 2px solid var(--sumi); border-radius: 99px; overflow: hidden;
  background: var(--washi);
}
.qty button {
  width: 42px; height: 42px; border: none; background: none; font-size: 20px; font-weight: 900; color: var(--sumi);
}
.qty button:hover { background: var(--kinari); }
.qty input {
  width: 52px; text-align: center; border: none; background: none;
  font-family: 'Zen Maru Gothic', sans-serif; font-size: 17px; font-weight: 900; outline: none;
}
.aviso {
  background: #fdf3e1; border: 1px solid #f0ddb6; color: var(--kin2);
  padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; margin-top: 14px;
}

/* ---------- Carrito / Checkout ---------- */
.cart-wrap { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.cart-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  background: var(--washi); border: 1px solid var(--linea); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.cart-item-img {
  width: 84px; height: 84px; border-radius: 12px; background: var(--kinari);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item h3 { font-size: 15px; font-weight: 800; }
.cart-item .sub { font-size: 13px; color: var(--gris); margin-top: 2px; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-item .precio { font-weight: 900; color: var(--aka); font-size: 17px; }
.link-del { color: var(--gris); font-size: 13px; background: none; border: none; text-decoration: underline; }
.link-del:hover { color: var(--aka); }
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--sumi); color: var(--kinari); border-radius: var(--radius);
  padding: 18px 22px; margin: 18px 0; font-family: 'Zen Maru Gothic', sans-serif;
}
.cart-total .monto { font-size: 26px; font-weight: 900; color: var(--kin); }

.form-card {
  background: var(--washi); border: 1px solid var(--linea); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { font-weight: 800; font-size: 13px; }
.form-group label .req { color: var(--aka); }
.form-group input, .form-group select, .form-group textarea {
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 2px solid var(--linea); border-radius: 12px; background: var(--kinari);
  outline: none; transition: .2s; color: var(--sumi);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--kin); background: #fff; }
.form-group textarea { resize: vertical; min-height: 80px; }

/* ---------- Toast / mensajes ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--sumi); color: var(--kinari); padding: 14px 24px; border-radius: 99px;
  font-weight: 800; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: .35s; z-index: 200; border-left: 4px solid var(--kin);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-left-color: var(--aka); }

/* ---------- Footer ---------- */
.footer {
  background: var(--sumi); color: var(--kinari); margin-top: auto;
  border-top: 3px solid var(--aka);
}
.footer-top {
  max-width: 1200px; margin: 0 auto; padding: 44px 20px 30px;
  display: grid; grid-template-columns: 1.6fr 1.3fr 1fr 1.3fr; gap: 36px;
}
.footer-col h4 {
  color: var(--kin); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 14px; font-weight: 800;
}
.footer-col a {
  display: block; color: rgba(247,239,223,.72); font-size: 14px; text-decoration: none;
  padding: 4px 0; transition: color .15s;
}
.footer-col a:hover { color: var(--kin); }
.footer-marca img { height: 52px; margin-bottom: 10px; }
.footer-jp { color: var(--kin); letter-spacing: .15em; font-size: 12px; font-weight: 700; margin: 0 0 10px; }
.footer-desc { color: rgba(247,239,223,.6); font-size: 13.5px; line-height: 1.6; max-width: 320px; }
.footer-wa {
  display: inline-flex !important; align-items: center; gap: 8px; color: var(--kinari) !important;
  font-weight: 700; font-size: 15px; background: rgba(37,211,102,.14); border: 1px solid rgba(37,211,102,.4);
  padding: 8px 14px; border-radius: 10px; margin-bottom: 14px;
}
.footer-wa:hover { background: rgba(37,211,102,.24); color: #fff !important; }
.footer-wa svg { color: #25d366; }
.footer-ubic { display: flex; gap: 8px; color: rgba(247,239,223,.7); font-size: 13.5px; line-height: 1.55; }
.footer-ubic svg { color: var(--kin); flex-shrink: 0; margin-top: 2px; }
.footer-ubic em { color: rgba(247,239,223,.5); font-style: italic; }
.footer-bottom {
  border-top: 1px solid rgba(247,239,223,.12); max-width: 1200px; margin: 0 auto;
  padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.footer-bottom p { color: rgba(247,239,223,.55); font-size: 12.5px; margin: 0; }
.footer-cr { color: var(--kin) !important; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 36px; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-img { order: -1; }
  .hero-img img { width: min(240px, 70%); }
  .detalle { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 64px 1fr; }
  .cart-item-right { grid-column: 1/-1; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Encabezado de catálogo con breadcrumb ===== */
.cat-head { margin-bottom: 6px; }
.cat-head h1 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 42px);
  color: var(--sumi);
  margin: 0 0 8px;
  letter-spacing: -.5px;
}
.cat-head h1 .jp { font-size: 15px; color: var(--gris); font-weight: 700; margin-left: 10px; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; color: var(--gris);
}
.breadcrumb a { color: var(--gris); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--aka); }
.breadcrumb .sep { opacity: .55; }
.breadcrumb .actual { color: var(--sumi); font-weight: 700; }
.cat-desc { color: var(--gris); margin: 14px 0 20px; }

/* ===== Tarjetas de sección ===== */
.seccion-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 4px 0 26px;
}
.seccion-tile {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff;
  border: 1.5px solid rgba(23,18,16,.12);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--sumi);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.seccion-tile:hover {
  border-color: var(--aka);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(181,37,43,.12);
}
.seccion-tile .nombre { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 16px; }
.seccion-tile .conteo { font-size: 12px; color: var(--gris); }

/* ===== Encabezado de grupo (catálogo agrupado) ===== */
.grupo-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(23,18,16,.08);
}
.grupo-head:first-child { margin-top: 6px; }
.grupo-head h2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900; font-size: 22px; margin: 0; color: var(--sumi);
}
.grupo-head a { font-size: 13px; font-weight: 700; color: var(--aka); text-decoration: none; }
.grupo-head a:hover { text-decoration: underline; }

.breadcrumb-detalle { max-width: 1100px; margin: 22px auto 0; padding: 0 22px; }

/* ============================================================
   Catálogo v2 — barra de herramientas, chips, orden y vistas
   ============================================================ */
.toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(247,239,223,.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(23,18,16,.10);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 6px 0 16px;
}
.searchbox {
  flex: 1 1 320px;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1.5px solid rgba(23,18,16,.14);
  border-radius: 12px;
  padding: 0 12px;
  height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.searchbox:focus-within { border-color: var(--aka); box-shadow: 0 0 0 3px rgba(181,37,43,.12); }
.searchbox svg { width: 19px; height: 19px; color: var(--gris); flex-shrink: 0; }
.searchbox input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--sumi); min-width: 0;
}
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox .clear {
  border: 0; background: rgba(23,18,16,.06); color: var(--gris);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px;
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.searchbox .clear:hover { background: var(--aka); color: #fff; }

.toolbar-right { display: flex; align-items: center; gap: 12px; }
.sortbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.sortbox select {
  font-family: inherit; font-size: 14px; color: var(--sumi);
  background: #fff; border: 1.5px solid rgba(23,18,16,.14);
  border-radius: 10px; padding: 9px 12px; cursor: pointer; outline: none;
}
.sortbox select:focus { border-color: var(--aka); }

.viewtoggle { display: flex; background: #fff; border: 1.5px solid rgba(23,18,16,.14); border-radius: 10px; overflow: hidden; }
.viewtoggle button {
  border: 0; background: transparent; cursor: pointer;
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--gris);
  transition: background .15s, color .15s;
}
.viewtoggle button svg { width: 18px; height: 18px; }
.viewtoggle button.active { background: var(--aka); color: #fff; }

/* Chips de sección */
.chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(23,18,16,.16);
  background: #fff; color: var(--sumi);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--aka); color: var(--aka); }
.chip.active { background: var(--aka); border-color: var(--aka); color: #fff; box-shadow: 0 4px 12px rgba(181,37,43,.22); }
.chip .chip-n {
  font-size: 11px; font-weight: 800; opacity: .8;
  background: rgba(23,18,16,.08); padding: 1px 7px; border-radius: 999px;
}
.chip.active .chip-n { background: rgba(255,255,255,.25); }

/* Línea de resultados */
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.result-bar #resultCount { font-size: 13.5px; color: var(--gris); font-weight: 600; }
.link-reset {
  border: 0; background: transparent; color: var(--aka);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.link-reset:hover { color: var(--aka2); }

/* Vista en LISTA (tarjetas horizontales) */
.lista { display: flex; flex-direction: column; gap: 12px; }
.lista .card {
  display: grid; grid-template-columns: 132px 1fr; align-items: stretch;
  min-height: 132px;
}
.lista .card .card-img { height: 100%; min-height: 132px; border-radius: 14px 0 0 14px; }
.lista .card .card-body { padding: 16px 18px; }
.lista .card .card-sello { top: 10px; left: 10px; }
.lista .card .card-nombre { font-size: 17px; }
@media (max-width: 520px) {
  .lista .card { grid-template-columns: 96px 1fr; min-height: 96px; }
  .lista .card .card-img { min-height: 96px; }
}

@media (max-width: 640px) {
  .toolbar { gap: 10px; }
  .toolbar-right { width: 100%; justify-content: space-between; }
  .searchbox { flex-basis: 100%; }
}

/* ===== Checkout: datos de pago, dropzone de comprobante, términos ===== */
.pago-card {
  background: #fff; border: 1.5px solid rgba(23,18,16,.12);
  border-left: 5px solid var(--kin); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 20px;
}
.pago-card h3 { margin: 0 0 4px; font-family: 'Zen Maru Gothic', sans-serif; font-size: 17px; color: var(--sumi); }
.pago-card > p { color: var(--gris); font-size: 14px; margin: 0 0 12px; }
.pago-datos { display: flex; flex-direction: column; gap: 8px; }
.pago-row {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--kinari); border-radius: 9px; padding: 9px 13px; font-size: 14px;
}
.pago-row span { color: var(--gris); }
.pago-row strong { color: var(--sumi); font-weight: 800; }

.form-card h3 { font-family: 'Zen Maru Gothic', sans-serif; font-size: 17px; color: var(--sumi); }

.dropzone {
  display: block; cursor: pointer; text-align: center;
  border: 2px dashed rgba(181,37,43,.35); border-radius: 14px;
  padding: 22px 16px; transition: border-color .15s, background .15s;
  background: rgba(181,37,43,.03);
}
.dropzone:hover { border-color: var(--aka); background: rgba(181,37,43,.06); }
.dropzone.ok { border-style: solid; border-color: var(--midori, #3a8a4f); background: rgba(58,138,79,.07); }
.dz-idle, .dz-file { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dz-file { flex-direction: row; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dz-icon { font-size: 26px; }
.dz-idle span { font-weight: 700; color: var(--sumi); }
.dz-idle small { color: var(--gris); font-size: 12px; }
.dz-file span { font-weight: 700; color: var(--sumi); word-break: break-all; }
.dz-remove {
  border: 0; background: rgba(181,37,43,.12); color: var(--aka);
  font-family: inherit; font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.dz-remove:hover { background: var(--aka); color: #fff; }

.terminos-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 4px;
  font-size: 14px; color: var(--sumi); cursor: pointer;
}
.terminos-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--aka); flex-shrink: 0; cursor: pointer; }
.terminos-check a { color: var(--aka); font-weight: 700; }
.req { color: var(--aka); }

/* ===== Páginas legales ===== */
.legal {
  max-width: 820px; margin: 0 auto; padding: 30px 22px 60px;
  background: #fff; border-radius: 16px; margin-top: 24px; margin-bottom: 40px;
  border: 1.5px solid rgba(23,18,16,.08);
}
.legal-head { border-bottom: 2px solid rgba(23,18,16,.08); padding-bottom: 16px; margin-bottom: 22px; }
.legal-head h1 {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
  font-size: clamp(26px, 4vw, 36px); color: var(--sumi); margin: 0; letter-spacing: -.5px;
}
.legal-head .jp { color: var(--aka); font-weight: 700; font-size: 14px; }
.legal-fecha { color: var(--gris); font-size: 13px; margin: 8px 0 0; }
.legal h2 {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
  font-size: 19px; color: var(--aka); margin: 26px 0 8px;
}
.legal p { color: var(--sumi); line-height: 1.7; margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { color: var(--sumi); line-height: 1.7; margin-bottom: 5px; }
.legal-nota {
  font-size: 13px; color: var(--gris); font-style: italic;
  background: var(--kinari); border-radius: 10px; padding: 12px 15px; margin-top: 22px;
}

/* Enlaces legales en el footer */
.footer-legal { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.footer-legal a { color: var(--gris); font-size: 12.5px; text-decoration: none; }
.footer-legal a:hover { color: var(--kin); text-decoration: underline; }

/* ============================================================
   Cuentas de cliente: auth, panel "Mi cuenta", seguimiento
   ============================================================ */

/* Badges de estado (lado público) */
.badge {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 4px 11px;
  border-radius: 99px; white-space: nowrap;
}
.badge.Pendiente, .badge.Abonado  { background: #fbeed1; color: #8a5a12; }
.badge.Pagado, .badge.Entregado   { background: #e2f2e9; color: #1f7a4d; }
.badge.Preparado, .badge.Listo     { background: #e3eef7; color: #1d6695; }
.badge.Cancelado                   { background: #fbe9e8; color: var(--aka); }
.badge.vivo                        { background: #e2f2e9; color: #1f7a4d; }
.badge.preorden                    { background: #fbe9e8; color: var(--aka); }

/* Botones de cuenta en el nav */
.nav-btn-cuenta { background: var(--kin); color: var(--sumi); }
.nav-btn-cuenta:hover, .nav-btn-cuenta.active { background: var(--kin2); color: var(--sumi); }
.nav-btn-ghost { background: transparent; border: 1.5px solid rgba(247,239,223,.4); color: var(--kinari); }
.nav-btn-ghost:hover { border-color: var(--kin); color: var(--kin); background: rgba(255,255,255,.06); }

/* ---- Auth (login / registro) ---- */
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 40px 20px 70px; }
.auth-card {
  background: var(--washi); border: 1px solid var(--linea); border-radius: 22px;
  padding: 36px 32px; box-shadow: var(--shadow);
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-sello {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px;
  background: var(--aka); color: #fff; border-radius: 14px; font-size: 26px; font-weight: 900;
  font-family: 'Zen Maru Gothic', sans-serif; box-shadow: 0 6px 16px rgba(181,37,43,.3);
  transform: rotate(-4deg);
}
.auth-head h1 { font-size: 25px; font-weight: 900; color: var(--sumi); }
.auth-head p { color: var(--gris); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn { margin-top: 6px; }
.auth-error {
  background: #fbe9e8; color: var(--aka); border-radius: 12px;
  padding: 11px 15px; font-size: 13.5px; font-weight: 700; margin-bottom: 16px; text-align: center;
}
.auth-alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--gris); }
.auth-alt a { color: var(--aka); font-weight: 800; }
.auth-alt a:hover { text-decoration: underline; }

/* ---- Aviso de cuenta en checkout ---- */
.cuenta-aviso {
  background: var(--kinari); border: 1px solid var(--linea); border-left: 4px solid var(--kin);
  border-radius: 12px; padding: 13px 16px; font-size: 14px; color: var(--sumi2); line-height: 1.5;
}
.cuenta-aviso.ok { border-left-color: var(--ok); }
.cuenta-aviso a { color: var(--aka); font-weight: 800; }
.cuenta-aviso a:hover { text-decoration: underline; }

/* ---- Panel "Mi cuenta" ---- */
.cuenta-wrap { max-width: 920px; margin: 0 auto; padding: 32px 20px 70px; }
.cuenta-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cuenta-head h1 { font-size: 28px; font-weight: 900; color: var(--sumi); }
.cuenta-head p { color: var(--gris); font-size: 14px; margin-top: 2px; }
.cuenta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cuenta-stat {
  background: var(--washi); border: 1px solid var(--linea); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.cuenta-stat .n { display: block; font-family: 'Zen Maru Gothic', sans-serif; font-size: 30px; font-weight: 900; color: var(--sumi); line-height: 1; }
.cuenta-stat .l { display: block; font-size: 12px; color: var(--gris); font-weight: 700; margin-top: 6px; }

.cuenta-vacio {
  text-align: center; background: var(--washi); border: 1px dashed var(--linea2,#d8cfbe);
  border-radius: 18px; padding: 50px 24px;
}
.cuenta-vacio .emoji { font-size: 44px; }
.cuenta-vacio h3 { font-size: 20px; color: var(--sumi); margin: 12px 0 6px; }
.cuenta-vacio p { color: var(--gris); margin-bottom: 20px; }

/* ---- Tarjeta de orden + stepper ---- */
.orden-card {
  background: var(--washi); border: 1px solid var(--linea); border-radius: 18px;
  padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.orden-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23,18,16,.12); }
.orden-card.cancelada { opacity: .72; }
.orden-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.orden-cod { font-size: 14px; font-weight: 800; color: var(--sumi); }
.orden-fecha { display: block; font-size: 12.5px; color: var(--gris); margin-top: 3px; }
.orden-montos { text-align: right; font-size: 13px; color: var(--gris); display: flex; flex-direction: column; gap: 2px; }
.orden-montos strong { color: var(--sumi); font-size: 15px; }
.orden-montos .saldo strong { color: var(--aka); }

.stepper { display: flex; margin: 22px 0 18px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px;
  background: var(--linea); z-index: 0;
}
.step.done:not(:last-child)::after { background: var(--ok); }
.dot {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--washi); border: 2px solid var(--linea); color: var(--gris);
  font-weight: 800; font-size: 13px; position: relative; z-index: 1; transition: .2s;
}
.step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.next .dot { border-color: var(--aka); color: var(--aka); box-shadow: 0 0 0 4px rgba(181,37,43,.12); }
.step-label { font-size: 11px; color: var(--gris); font-weight: 700; text-align: center; max-width: 80px; line-height: 1.3; }
.step.done .step-label, .step.next .step-label { color: var(--sumi); }

.orden-cancelada {
  margin: 16px 0 4px; text-align: center; background: #fbe9e8; color: var(--aka);
  font-weight: 800; padding: 10px; border-radius: 12px; font-size: 14px;
}

.orden-items { border-top: 1px solid var(--linea); padding-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.orden-item { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.oi-nombre { font-weight: 700; color: var(--sumi); font-size: 14px; }
.oi-cant { color: var(--gris); font-weight: 700; }
.oi-meta { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.oi-entrega { font-size: 12px; color: var(--kin2); font-weight: 700; }

@media (max-width: 600px) {
  .cuenta-stats { grid-template-columns: 1fr; }
  .step-label { font-size: 10px; }
}

/* ===== Código de producto / captcha / confirmación de pedido ===== */
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.detalle-codigo { font-size: 13px; color: var(--gris); margin: 2px 0 10px; }
.detalle-codigo .mono { color: var(--kin2); font-weight: 700; }

.captcha-group {
  background: var(--kinari); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px;
}
.captcha-group label { color: var(--sumi2); }
.captcha-group strong { color: var(--aka); }

.confirma-card {
  background: var(--washi); border: 1px solid var(--linea); border-radius: 22px;
  padding: 40px 30px; text-align: center; box-shadow: var(--shadow); max-width: 520px; margin: 20px auto;
}
.confirma-icono {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 34px; font-weight: 900;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(46,125,79,.32);
}
.confirma-card h2 { font-size: 26px; font-weight: 900; color: var(--sumi); }
.confirma-card p { color: var(--gris); margin-top: 8px; line-height: 1.55; }
.confirma-codigo {
  margin: 22px auto; padding: 16px; background: var(--kinari); border: 1.5px dashed var(--kin);
  border-radius: 14px; display: inline-flex; flex-direction: column; gap: 4px; min-width: 240px;
}
.confirma-codigo span { font-size: 12px; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.confirma-codigo strong { font-size: 26px; color: var(--aka); font-weight: 800; letter-spacing: .02em; }
.confirma-nota { font-size: 13.5px; }
.confirma-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ============================================================
   INICIO rediseñado — hero con Maneki Neko, categorías, reveal
   ============================================================ */
.home { background: var(--kinari); }

/* Reveal al hacer scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero3 { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--washi), var(--kinari)); }
.hero3-waves {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 50% 110%, transparent 38%, rgba(181,37,43,.06) 39%, rgba(181,37,43,.06) 43%, transparent 44%),
    radial-gradient(circle at 0% 110%, transparent 38%, rgba(226,162,59,.08) 39%, rgba(226,162,59,.08) 43%, transparent 44%),
    radial-gradient(circle at 100% 110%, transparent 38%, rgba(226,162,59,.08) 39%, rgba(226,162,59,.08) 43%, transparent 44%);
  background-size: 56px 28px;
}
.hero3-inner {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 60px 20px 56px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center;
}
.hero3-copy { animation: subir-home .7s cubic-bezier(.2,.7,.3,1) both; }
.hero3-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--aka); font-weight: 900; letter-spacing: .04em; font-size: 13px; margin-bottom: 16px;
}
.kicker-sello {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--aka); color: #fff; font-family: 'Zen Maru Gothic', sans-serif; font-size: 14px;
  transform: rotate(-5deg); box-shadow: 0 3px 8px rgba(181,37,43,.3);
}
.hero3 h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.hero3 h1 .rojo { color: var(--aka); }
.hero3-jp { display: block; color: var(--kin2); font-size: 14px; letter-spacing: .42em; margin-top: 10px; font-weight: 700; }
.hero3 p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--gris); max-width: 490px; }
.hero3-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero3-juegos {
  margin-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 13px; color: var(--sumi2);
}
.hero3-juegos i { width: 5px; height: 5px; border-radius: 50%; background: var(--kin); display: inline-block; }

/* Arte del hero — imagen del Maneki Neko */
.hero3-art { position: relative; min-height: 440px; display: grid; place-items: center; animation: subir-home .8s cubic-bezier(.2,.7,.3,1) both; }
.maneki-halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,162,59,.22), transparent 68%);
  filter: blur(8px); z-index: 0;
}
.maneki-img {
  position: relative; z-index: 2; width: min(440px, 90%); height: auto;
  filter: drop-shadow(0 18px 26px rgba(143,27,32,.20));
  animation: maneki-flota 4.6s ease-in-out infinite;
}
@keyframes maneki-flota { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-12px) rotate(.6deg); } }

/* ---------- Categorías ---------- */
.categorias { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 16px; }
.cat-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 22px 20px 18px;
  min-height: 168px; display: flex; flex-direction: column; gap: 6px; color: #fff;
  box-shadow: 0 8px 22px rgba(23,18,16,.14); transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.cat-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.22), transparent 55%); }
.cat-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 16px 34px rgba(23,18,16,.22); }
.cat-kanji { font-size: 34px; line-height: 1; }
.cat-nombre { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 19px; margin-top: 6px; }
.cat-desc { font-size: 13px; color: rgba(255,255,255,.92); opacity: 1; }
.cat-go { margin-top: auto; font-weight: 800; font-size: 13px; color: #fff; opacity: 1; }
.cat-pkm  { background: linear-gradient(155deg, #e0413f, #a31c20); }
.cat-op   { background: linear-gradient(155deg, #3f74ab, #1f3d63); }
.cat-mtg  { background: linear-gradient(155deg, #8a5cb0, #4a2d6e); }
.cat-mesa { background: linear-gradient(155deg, #d99a2f, #a86a14); }

/* ---------- Por qué Maneki ---------- */
.porque { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.porque-item {
  background: var(--washi); border: 1px solid var(--linea); border-radius: 16px;
  padding: 24px 20px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.porque-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23,18,16,.12); }
.porque-sello { font-size: 16px; padding: 8px 12px; margin-bottom: 14px; }
.porque-item h3 { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 17px; margin-bottom: 6px; }
.porque-item p { color: var(--gris); font-size: 14px; line-height: 1.55; }

/* ---------- CTA final ---------- */
.cta-final {
  position: relative; overflow: hidden; margin-top: 30px;
  background: var(--sumi);
  background-image: radial-gradient(circle at 50% 120%, rgba(181,37,43,.35), transparent 60%);
}
.cta-final-inner { max-width: 720px; margin: 0 auto; padding: 64px 22px; text-align: center; color: var(--kinari); position: relative; }
.cta-enso {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 16px; background: var(--aka); color: #fff;
  font-family: 'Zen Maru Gothic', sans-serif; font-size: 32px; transform: rotate(-5deg);
  box-shadow: 0 8px 22px rgba(181,37,43,.45);
}
.cta-final h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 900; }
.cta-final p { margin-top: 12px; color: rgba(247,239,223,.78); font-size: 16px; }
.cta-final-btns { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-ghost-light { background: transparent; border: 2px solid rgba(247,239,223,.5); color: var(--kinari); }
.btn-ghost-light:hover { background: var(--kinari); color: var(--sumi); border-color: var(--kinari); }

/* ---------- Animaciones ---------- */
@keyframes subir-home { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes enso-in { from { opacity: 0; transform: rotate(0deg) scale(.85); } to { opacity: 1; transform: rotate(38deg) scale(1); } }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } }
.carta-1 { --r: -15deg; } .carta-2 { --r: -8deg; } .carta-3 { --r: 13deg; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero3-inner { grid-template-columns: 1fr; text-align: center; }
  .hero3-copy { order: 2; }
  .hero3-art { order: 1; min-height: 320px; }
  .hero3-kicker, .hero3-juegos, .hero3-cta { justify-content: center; }
  .hero3 p { margin-left: auto; margin-right: auto; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  .porque { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .categorias, .porque { grid-template-columns: 1fr; }
  .carta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .maneki-img, .hero3-copy, .hero3-art { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Cartas flotantes del hero (vuelven)
   ============================================================ */
.carta { position: absolute; width: 84px; height: 118px; border-radius: 12px; box-shadow: 0 12px 26px rgba(23,18,16,.20); z-index: 1; border: 3px solid rgba(255,255,255,.7); }
.carta::after { content: ""; position: absolute; inset: 7px; border-radius: 7px; border: 2px dashed rgba(255,255,255,.45); }
.carta-1 { top: 14px;    left: 0;     background: linear-gradient(150deg, #d6454b, #8f1b20); --r: -16deg; animation: flota 5.5s ease-in-out infinite; }
.carta-2 { bottom: 24px; left: 6%;    background: linear-gradient(150deg, #3a6ea5, #1e3a5f); --r: -7deg;  animation: flota 6.6s ease-in-out infinite .4s; }
.carta-3 { top: 40px;    right: 0;    background: linear-gradient(150deg, var(--kin), var(--kin2)); --r: 14deg; animation: flota 6s ease-in-out infinite .8s; }
.carta-1 { transform: rotate(-16deg); } .carta-2 { transform: rotate(-7deg); } .carta-3 { transform: rotate(14deg); }

/* ============================================================
   Botón "Agregar al carrito" en las tarjetas del catálogo
   ============================================================ */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.card-add {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--aka); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 12.5px;
  padding: 8px 12px; border-radius: 99px; transition: transform .15s, background .15s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(181,37,43,.28);
}
.card-add:hover { background: var(--aka2); transform: translateY(-2px); box-shadow: 0 7px 16px rgba(181,37,43,.36); }
.card-add:active { transform: translateY(0) scale(.96); }
.card-add svg { width: 15px; height: 15px; }
.card-add.added { background: var(--ok); box-shadow: 0 4px 12px rgba(46,125,79,.3); }

/* ============================================================
   Animación: producto "cae" en el carrito
   ============================================================ */
.fly-cart { position: fixed; z-index: 9999; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; transition: transform .78s linear; }
.fly-cart > div { width: 100%; height: 100%; display: grid; place-items: center; transition: transform .78s cubic-bezier(.55,.06,.68,.19), opacity .78s ease-in; }
.fly-cart img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 8px 20px rgba(23,18,16,.32); }

.cart-badge.bump { animation: cart-bump .55s ease; }
@keyframes cart-bump { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.55); } 55% { transform: scale(.85); } 78% { transform: scale(1.12); } }

/* Aviso flotante global */
.maneki-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(18px);
  background: var(--sumi); color: var(--kinari); padding: 12px 22px; border-radius: 99px;
  font-weight: 700; font-size: 14px; z-index: 10000; opacity: 0;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 12px 32px rgba(23,18,16,.28); max-width: 90vw; text-align: center;
}
.maneki-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.maneki-toast.err { background: var(--aka); color: #fff; }

/* Indicador "ya en el carrito" en la página de producto */
.en-carrito {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  background: rgba(46,125,79,.12); color: var(--ok); border: 1px solid rgba(46,125,79,.3);
  padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 13.5px;
}
.en-carrito a { color: var(--ok); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .carta { animation: none !important; }
  .fly-cart, .fly-cart > div { transition: none !important; }
}

/* ============================================================
   Nav responsive — menú hamburguesa (celular y tableta)
   ============================================================ */
.nav-inner { position: relative; }
.nav-menu { display: flex; align-items: center; gap: 18px; flex: 1; }
.nav-links { flex: 1; }
.nav-extra { display: flex; align-items: center; gap: 8px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-burger {
  display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; border-radius: 10px;
}
.nav-burger span { display: block; height: 2.5px; width: 100%; background: var(--kinari); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-burger:hover { background: rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-right { margin-left: auto; }
  .nav-menu {
    position: absolute; top: calc(100% + 3px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sumi); border-bottom: 3px solid var(--kin);
    padding: 0 16px; box-shadow: 0 18px 34px rgba(0,0,0,.34);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .32s ease, opacity .22s ease, padding .32s ease;
  }
  .nav.nav-open .nav-menu { max-height: 78vh; opacity: 1; pointer-events: auto; padding: 10px 16px 16px; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; flex-wrap: nowrap; }
  .nav-link { padding: 13px 14px; border-radius: 10px; font-size: 15px; }
  .nav-extra { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
  .nav-extra .nav-btn { justify-content: center; padding: 13px; font-size: 15px; }
  .nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 430px) {
  .nav-logo img { height: 42px; }
  .nav-cart-txt { display: none; }
  .nav-inner { padding: 8px 14px; gap: 10px; }
}

/* "Avísame cuando llegue" en producto agotado */
.aviso-stock { background: var(--kinari); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin-top: 14px; }
.avisame-form { display: flex; gap: 8px; }
.avisame-form input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--linea2); border-radius: 10px; font-family: inherit; font-size: 14px; background: #fff; }
.avisame-form input:focus { outline: none; border-color: var(--aka); }
.avisame-form .btn { white-space: nowrap; }
@media (max-width: 480px) { .avisame-form { flex-direction: column; } }

/* Galería de imágenes del producto */
.detalle-img-wrap { display: flex; flex-direction: column; gap: 12px; }
.detalle-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb { width: 64px; height: 64px; border: 2px solid var(--linea); border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; background: #fff; transition: border-color .15s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.active { border-color: var(--aka); }
.thumb:hover { border-color: var(--kin); }

/* Cupones en el carrito */
.cart-cupon { margin: 18px 0 6px; }
.cupon-form { display: flex; gap: 8px; }
.cupon-form input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--linea2); border-radius: 10px; font-family: inherit; font-size: 14px; background: #fff; }
.cupon-form input:focus { outline: none; border-color: var(--aka); }
.cupon-msg { font-size: 13px; margin-top: 7px; }
.cart-totales { margin: 14px 0; border-top: 1px solid var(--linea); padding-top: 12px; }
.ct-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 15px; }
.ct-desc { color: var(--ok); font-weight: 700; }
.ct-desc .link-del { font-size: 12px; margin-left: 6px; }
@media (max-width: 480px) { .cupon-form { flex-direction: column; } }

/* ---------- Ubicación (colaboración Avalon) ---------- */
.ubicacion {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: stretch;
}
.ubi-info {
  background: #fff; border: 1px solid var(--linea); border-radius: 18px;
  padding: 30px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  box-shadow: 0 10px 30px rgba(23,18,16,.05);
}
.ubi-colab {
  font-size: 12px; color: var(--gris); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ubi-logo { max-width: 300px; width: 100%; height: auto; }
.ubi-dir { display: flex; gap: 10px; font-size: 16px; line-height: 1.65; color: var(--sumi); }
.ubi-dir strong { color: var(--aka); font-size: 18px; }
.ubi-pin { font-size: 22px; line-height: 1.2; }
.ubi-nota { font-size: 14px; color: var(--gris); line-height: 1.6; margin-top: -4px; }
.ubi-info .btn { margin-top: 4px; }
.ubi-mapa {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--linea);
  min-height: 340px; box-shadow: 0 10px 30px rgba(23,18,16,.05);
}
.ubi-mapa iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
@media (max-width: 860px) {
  .ubicacion { grid-template-columns: 1fr; }
  .ubi-mapa { min-height: 280px; }
  .ubi-mapa iframe { min-height: 280px; }
}

/* ---------- Badge de idioma (sello washi & hanko, arriba a la derecha) ---------- */
.detalle-idioma {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--washi);
  background-image: radial-gradient(rgba(226,162,59,.10) 1px, transparent 1px);
  background-size: 9px 9px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 6px 13px 6px 7px;
  box-shadow: 0 6px 18px rgba(23,18,16,.16);
}
.detalle-idioma .di-sello {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 17px;
  color: #fff; background: var(--aka);
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.6);
  outline: 1.5px solid var(--aka);
  transform: rotate(-4deg);
  box-shadow: 0 2px 7px rgba(181,37,43,.4);
}
.detalle-idioma .di-texto { display: flex; flex-direction: column; line-height: 1.15; }
.detalle-idioma .di-label {
  font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kin2);
}
.detalle-idioma .di-nombre {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 800; font-size: 13px; color: var(--sumi);
}

/* ---------- Tag de idioma en las tarjetas del catálogo ---------- */
.tag.tag-idioma {
  background: var(--washi); border-color: var(--kin); color: var(--sumi); font-weight: 700;
}
.tag.tag-idioma b {
  color: var(--aka); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; margin-right: 2px;
}