/* ============================================================
   HOBBIAR — shop.css
   Shell compartido de las páginas de tienda (Tienda, Carrito,
   Checkout, Gracias). Mismo sistema visual que la web principal.
   ============================================================ */
:root{
  --ink:#141418; --ink-soft:#2c2c33;
  --paper:#ffffff; --paper-2:#ffffff; --sand:#f4f1ea;
  --muted:#76757b; --muted-2:#a9a8ad;
  --line:rgba(20,20,24,.12); --line-soft:rgba(20,20,24,.06);
  --accent:#e0231c; --accent-deep:#b41410; --accent-ink:#ffffff;
  --rail:64px; --topbar:78px; --maxw:1320px;
  --ff-display:"Archivo",system-ui,sans-serif;
  --ff-mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-display);-webkit-font-smoothing:antialiased}
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:#fff}

.kicker{font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.kicker--accent{color:var(--accent)}
.dot-r{color:var(--accent)}

/* ---------- 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)}
.rail__vert{margin-top:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ff-mono);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted-2)}
.rail__spacer{flex:1}
.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)}

/* ---------- TOPBAR ---------- */
.topbar{position:fixed;top:0;left:var(--rail);right:0;height:var(--topbar);background:rgba(255,255,255,.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:.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,.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:#fff;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{margin-left:var(--rail);padding-top:var(--topbar);min-height:100vh}

/* ---------- BOTONES / CHIPS ---------- */
.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:.01em;transition:transform .18s,background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn--accent{background:var(--accent);color:#fff;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)}
.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;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--muted-2)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- SECCIONES ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,7vw,100px) 40px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,4.5vw,60px);flex-wrap:wrap}
.stitle{font-family:var(--ff-display);font-weight:800;font-size:clamp(34px,4.6vw,68px);letter-spacing:-.025em;line-height:.94;margin:0}
.stitle em{font-style:normal;color:var(--accent)}
.ssub{color:var(--muted);font-size:15px;max-width:380px;line-height:1.55}
.zone--sand{background:var(--sand)}
.zone--ink{background:var(--ink);color:var(--paper)}

/* ---------- CARD DE PRODUCTO (idéntica al catálogo) ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* La TARJETA DE PRODUCTO vive en `hobbiar-cards.css`: estaba definida acá y en `hobbiar-home.css`,
   y quedaron distintas. Ver el comentario de esa hoja. */
.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}
.stars{display:inline-flex;gap:2px;color:var(--accent);font-size:15px;letter-spacing:2px}

/* ---------- FORMULARIOS ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{height:50px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);padding:0 16px;font-size:14.5px;font-family:inherit;color:var(--ink);transition:border-color .2s;width:100%}
/* Observaciones del envío: mismo cuadro, pero crece. `padding` con top porque no hay altura fija. */
.field textarea{border-radius:12px;border:1.5px solid var(--line);background:var(--paper);padding:14px 16px;font-size:14.5px;font-family:inherit;line-height:1.5;color:var(--ink);transition:border-color .2s;width:100%;resize:vertical;min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .2s,background .2s;background:var(--paper)}
.opt:hover{border-color:var(--muted-2)}
.opt.is-on{border-color:var(--accent)}
.opt input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.opt .t{font-weight:700;font-size:14px}
.opt .d{font-size:12px;color:var(--muted);margin-top:2px}
.opt .pr{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--paper)}
.qty button{width:34px;height:38px;display:grid;place-items:center;color:var(--ink);font-size:16px;transition:background .15s}
.qty button:hover{background:var(--sand)}
.qty span{width:32px;text-align:center;font-weight:700;font-size:13.5px}

/* resumen (carrito / checkout) */
.sumcard{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:26px 28px;position:sticky;top:calc(var(--topbar) + 24px)}
.sumcard h3{font-weight:800;font-size:19px;letter-spacing:-.01em;margin:0 0 18px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:14px;color:var(--ink-soft)}
.sumrow .l{color:var(--muted)}
.sumrow--total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.sumrow--total .l{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sumrow--total .v{font-family:var(--ff-display);font-weight:800;font-size:26px}
.sumrow .free{color:var(--accent);font-weight:700}
.sumnote{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px}

/* ---------- CONTACTO ----------
   Dos columnas: el formulario manda, los datos acompañan. `.ct-err` usa el mismo lenguaje que el
   error del checkout (`.co-error`) para que un error se vea igual en toda la tienda. */
.ct-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:34px}
.ct-form{display:grid;gap:14px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-err{background:#fdecea;border:1px solid var(--accent);color:var(--accent-deep);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600}
.ct-side{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:clamp(22px,3vw,30px)}
.ct-lead{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0}
.ct-datos{margin-top:22px;display:grid;gap:12px}
.ct-dato{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.ct-dato:last-child{border-bottom:none;padding-bottom:0}
.ct-dato span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ct-dato b{font-size:14.5px;font-weight:700}
.ct-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* las redes con el color de su marca: blancas sobre la tarjeta blanca no se veían (29/09/2026) */
.ct-links a{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:11px 18px;color:#fff;border:0;box-shadow:0 8px 18px -10px rgba(22,22,26,.55);transition:transform .15s,filter .2s}
.ct-links a:hover{transform:translateY(-2px);filter:brightness(1.07);color:#fff}
.ct-red--wa{background:#128C7E}
.ct-red--ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.ct-red--fb{background:#1877F2}
.ct-ok{text-align:center;max-width:560px;margin:40px auto 0}
.ct-ok p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:16px 0 0}
.ct-ok__tick{width:78px;height:78px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;font-size:34px;background:var(--accent);color:#fff}
@media(max-width:1080px){.ct-grid{grid-template-columns:1fr}}
@media(max-width:560px){.frow2{grid-template-columns:1fr}}

/* ---------- 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:-.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}

/* ---------- 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;background:rgba(18,18,22,.32)}
.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:-.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)}
.qv__page{font-size:13px;font-weight:700;color:var(--accent);margin-top:14px;display:inline-flex;gap:6px;align-items:center}
.qv__page:hover{text-decoration:underline}

/* ---------- 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 .d{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- REVEAL ---------- */
.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)}
@media(prefers-reduced-motion:reduce){.js-reveal{opacity:1!important;transform:none!important}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .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-left:22px;padding-right:22px}
  .grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .news,.foot,.foot__bottom{padding-left:22px;padding-right:22px}
}


/* ============================================================
   Páginas servidas por el panel que el shop.css del diseño no cubre:
   hero de la tienda, barra de filtros, ficha de producto y beneficios.
   Salen del shop.css que el panel ya usaba — mismo sistema visual.
   ============================================================ */
.pcard__add.is-added{background:var(--accent);color:#fff;border-color:var(--accent)}
.shop-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.shop-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 80% 20%,#000 30%,transparent 75%);mask-image:radial-gradient(120% 100% at 80% 20%,#000 30%,transparent 75%);opacity:.8;pointer-events:none}
.shop-hero__ghost{position:absolute;right:-1%;top:-16%;font-family:var(--ff-display);font-weight:800;font-size:clamp(120px,17vw,250px);color:var(--ink);opacity:.04;letter-spacing:-.04em;line-height:.8;pointer-events:none;user-select:none}
.shop-hero .section{position:relative}
.toolbar{max-width:var(--maxw);margin:0 auto;padding:20px clamp(22px,4vw,40px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.toolbar__sort{margin-left:auto;display:flex;align-items:center;gap:10px}
.toolbar__sort label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.toolbar__sort select{height:40px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper);padding:0 14px;font-size:13px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer}
.toolbar__sort select:focus{outline:none;border-color:var(--accent)}
.count{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard__ph{position:relative;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pcard__badge--soon{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.pdp__media{position:relative;border:1px solid var(--line);border-radius:22px;background:radial-gradient(120% 100% at 50% 18%,#fff,var(--sand) 82%);aspect-ratio:1/1;display:grid;place-items:center;padding:40px;overflow:hidden}
.pdp__media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line-soft) 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.5}
/* Mismo criterio que las tarjetas. `.pdp__media` también saca su altura de un `aspect-ratio`, así que
   un `height:100%` acá se descarta igual: se usan `max-*` contra la caja absoluta. */
.pdp__img{position:absolute;inset:40px;margin:auto;max-width:calc(100% - 80px);max-height:calc(100% - 80px);width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(22,22,26,.24))}
.pdp__cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pdp__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;line-height:1;margin:12px 0 0}
.pdp__price{font-family:var(--ff-display);font-weight:800;font-size:34px;margin:22px 0 6px}
.pdp__stock{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.pdp__stock .b{width:8px;height:8px;border-radius:50%;background:#1e9e5a}
.pdp__stock.is-out .b{background:var(--muted-2)}
/* la descripción ocupa el ancho de la columna (pedido del usuario, 27/09/2026) */
.pdp__desc{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:22px 0 0;max-width:none}
.pdp__cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.pdp__meta{margin-top:30px;border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px}
.pdp__kv{display:flex;justify-content:space-between;gap:16px;font-size:13.5px}
.pdp__kv .k{color:var(--muted)}
.pdp__kv .v{font-weight:600}
.breadcrumb{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.breadcrumb a:hover{color:var(--accent)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{display:flex;gap:15px;align-items:flex-start;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.benefit .ic{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.benefit .h{font-weight:800;font-size:15px;letter-spacing:-.01em}
.benefit .d{color:var(--muted);font-size:13px;line-height:1.5;margin-top:4px}
@media(max-width:840px){.pdp{grid-template-columns:1fr}}
@media(max-width:1080px){.benefits{grid-template-columns:1fr}}
@media(max-width:720px){.shop-hero .section,.toolbar{padding-left:22px;padding-right:22px}}

/* ============================================================
   Ajustes del tema servido por el panel
   ============================================================ */
/* La foto de la tarjeta va dentro de un <a> (la card linkea a la ficha, y el botón de vista
   rápida no puede ir dentro de un enlace). Ese <a> pasa a ser el hijo de la grilla, así que sin
   esto quedaba de 0×0 y la imagen no se pedía nunca: catálogo entero sin fotos. */
/* `inset:0` y no `height:100%`: el porcentaje se resolvía contra un padre cuya altura viene de
   `aspect-ratio`, y CSS no acepta eso para resolver porcentajes — se descartaba en silencio y la
   foto salía a su altura natural (medido: caja de 287 px, imagen de 1125). Con `absolute` la caja
   queda definida y el `max-height` de la imagen sí tiene contra qué medirse. */
.pcard__media > a{position:absolute;inset:0;display:grid;place-items:center;padding:inherit;box-sizing:border-box}
/* OJO: esta regla le GANA a `.pcard__img` (más específica), así que el tamaño se define ACÁ.
   `max-*` con `auto` y no `width/height:100%`: así la foto conserva su proporción y entra entera,
   sea alta o apaisada. El `<a>` de arriba le da la caja contra la que medirse. */
.pcard__media > a img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* El "+" del carrito cuando no hay stock es un enlace a la ficha: mismo aspecto que el botón. */
a.pcard__add{text-decoration:none;font-size:18px}

/* ============================================================
   Carrito · Checkout · Gracias
   Sacado de los archivos del diseño (Carrito.html / Checkout.html / Gracias.html),
   donde vivía suelto en cada página.
   ============================================================ */
/* --- carrito --- */
.cartgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.citem{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.citem:first-child{border-top:1px solid var(--line)}
.citem__media{width:104px;height:104px;border-radius:14px;background:radial-gradient(120% 100% at 50% 18%,#fff,var(--sand) 85%);border:1px solid var(--line);display:grid;place-items:center;padding:12px;flex-shrink:0}
.citem__media img{max-height:100%;object-fit:contain}
.citem__cat{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.citem__name{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.15;margin-top:4px}
.citem__name a:hover{color:var(--accent)}
.citem__sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.citem__oos{color:var(--accent);font-size:12px;font-weight:700;margin-top:4px}
.citem__row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
/* El precio y «Quitar», uno debajo del otro y contra el borde derecho. Antes «Quitar» era un
   hermano suelto abajo del renglón: sumaba 54 px por línea (con el blanco táctil de 44) y en el
   teléfono cada producto ocupaba 265 px. */
.citem__end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.citem__price{font-family:var(--ff-display);font-weight:800;font-size:17px}
.citem__rm{color:var(--muted-2);font-size:11px;font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;transition:color .2s}
.citem__rm:hover{color:var(--accent)}

/* BLANCOS TÁCTILES DEL CARRITO.
   Con el mouse, un botón de 34×38 se acierta siempre. Con el dedo no: "Quitar" quedaba en 18 px de
   alto y +/− en 34 de ancho, bastante menos que los 44 que recomienda cualquier guía táctil — se
   tocaba y no pasaba nada, y desde afuera parece que el botón está roto.
   Se agranda el ÁREA, no el dibujo: `pointer:coarse` es el dedo, no el ancho de pantalla (una tablet
   grande también toca). */
@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}
}
.empty{text-align:center;padding:clamp(60px,8vw,110px) 20px}
.empty .stage{position:relative;width:200px;height:200px;margin:0 auto 28px;display:grid;place-items:center}
.empty .ring{position:absolute;inset:-30%;background:repeating-radial-gradient(circle at center,transparent 0 26px,var(--line-soft) 26px 27px);-webkit-mask-image:radial-gradient(circle at center,#000 50%,transparent 72%);mask-image:radial-gradient(circle at center,#000 50%,transparent 72%)}
.empty h2{font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;margin:0 0 10px}
.empty p{color:var(--muted);font-size:15px;margin:0 0 26px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.empty svg.die{animation:floaty 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.empty svg.die{animation:none}}

/* --- checkout --- */
.cogrid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
/* BARRA DE PAGO DEL TELÉFONO. En escritorio no existe: ahí el botón del resumen está a la vista
   todo el tiempo, al costado. */
.co-bar{display:none}
@media(max-width:720px){
  .co-bar{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -10px 30px -20px rgba(22,22,26,.6)
  }
  .co-bar__t{display:flex;flex-direction:column;line-height:1.1}
  .co-bar__t .l{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .co-bar__t .v{font-family:var(--ff-display);font-weight:800;font-size:19px}
  .co-bar .btn{flex:1;justify-content:center}
  /* El pie tiene que poder verse entero: sin esto la barra tapa los últimos 66 px de la página. */
  .cogrid{padding-bottom:76px}
}
.fblock{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:clamp(22px,3vw,32px);margin-bottom:22px}
.fblock__head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.fblock__head .num{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.fblock__head h2{font-weight:800;font-size:21px;letter-spacing:-.015em;margin:0}
.fields{display:grid;gap:14px}
.mini{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.mini:last-of-type{border-bottom:none}
.mini__media{width:54px;height:54px;border-radius:11px;background:radial-gradient(120% 100% at 50% 18%,#fff,var(--sand) 85%);border:1px solid var(--line);display:grid;place-items:center;padding:6px;flex-shrink:0;position:relative}
.mini__media img{max-height:100%;object-fit:contain}
.mini__q{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--ff-mono);font-size:10px;font-weight:700;display:grid;place-items:center}
.mini__name{font-weight:700;font-size:13.5px;line-height:1.2}
.mini__cat{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mini__pr{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}
.secure{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px;color:var(--muted);font-size:12px;text-align:center;line-height:1.5}
.co-error{background:#fdecea;border:1px solid var(--accent);color:var(--accent-deep);border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:14px;font-weight:600}
.req{color:var(--accent);margin-left:2px}

/* --- gracias --- */
.thanks{position:relative;overflow:hidden;display:grid;place-items:center;padding:clamp(50px,7vw,90px) 24px}
.thanks__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(100% 100% at 50% 40%,#000 30%,transparent 78%);mask-image:radial-gradient(100% 100% at 50% 40%,#000 30%,transparent 78%);opacity:.8;pointer-events:none}
.thanks__in{position:relative;text-align:center;max-width:640px}
.thanks__stage{position:relative;width:230px;height:230px;margin:0 auto 30px;display:grid;place-items:center}
.thanks__rings{position:absolute;inset:-45%;background:repeating-radial-gradient(circle at center,transparent 0 30px,var(--line-soft) 30px 31px);-webkit-mask-image:radial-gradient(circle at center,#000 50%,transparent 72%);mask-image:radial-gradient(circle at center,#000 50%,transparent 72%)}
.thanks__shape{position:absolute;width:190px;height:190px;border-radius:50%;background:var(--accent)}
.thanks__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%)}
.thanks__die{position:relative;z-index:2;filter:drop-shadow(0 24px 30px rgba(20,20,24,.35));animation:floaty 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.thanks__die{animation:none}}
.thanks h1{font-weight:800;font-size:clamp(38px,5.5vw,68px);letter-spacing:-.025em;line-height:.95;margin:0 0 14px}
.thanks__lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:460px}
.thanks__num{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px 22px;margin-bottom:30px;background:var(--paper)}
.thanks__num .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.thanks__num .v{font-family:var(--ff-mono);font-weight:700;font-size:15px}
.thanks__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:1080px){
  .cartgrid,.cogrid{grid-template-columns:1fr}
  .sumcard{position:static}
  .cogrid .sumcard{order:-1}
}

/* En el iPhone, un campo con letra menor a 16px hace que Safari ACERQUE la pantalla al tocarlo y
   deje la página corrida. En el checkout eso es plata: el comprador escribe su mail con la pantalla
   saltando. Misma regla que usa el panel en mobile.css. */
@media(max-width:768px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* ============================================================
   Cinta de categorías, barra de progreso y cajón del carrito
   Estaban sólo en la hoja de la home; ahora el cajón del carrito y la cinta se usan en
   todas las páginas, así que se traen tal cual del diseño.
   ============================================================ */
.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);}
.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;}
.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.is-on{transform: translateX(0);}
.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;}
.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;}
.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 los botones de adentro no reciben ningún click
   (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}
}
/* El cajón del carrito muestra su propia miniatura: la de la página del carrito es más grande. */
.cart .citem{padding:16px 0}
.cart .citem__media{width:72px;height:72px;padding:8px}

/* Barra de "te faltan $X para el envío gratis" (del Carrito.html del diseño). */
.freebar .t{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.freebar .t b{color:var(--ink)}
.freebar .bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.freebar .fill{height:100%;background:var(--accent);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}

/* Cupón del carrito (del Carrito.html del diseño). */
.coupon{display:flex;gap:10px;margin-top:18px}
.coupon input{flex:1;height:46px;border-radius:12px;border:1.5px solid var(--line);padding:0 14px;font-size:13.5px;font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
.coupon input:focus{outline:none;border-color:var(--accent)}
.coupon button{height:46px;padding:0 18px;border-radius:12px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;transition:background .2s}
.coupon button:hover{background:var(--accent)}
.coupon__msg{font-size:12px;margin-top:8px;display:none}

/* FICHAS DE CUPÓN. Antes había UN código y alcanzaba con el cuadro de texto; ahora puede haber más
   de uno y hay que ver cuáles están puestos y poder sacar uno sin sacar el otro. */
.cupchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cupchips:empty{display:none}
.cupchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 6px 4px 11px;
  font-size:12.5px;font-weight:700;border:1.5px solid currentColor;line-height:1.4}
.cupchip--ok{color:var(--accent)}
.cupchip--no{color:var(--muted,#8a8a8a);opacity:.9}
.cupchip b{font-weight:800;letter-spacing:.02em}
.cupchip small{font-weight:500;opacity:.85}
.cupchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;
  padding:0 3px;opacity:.7}
.cupchip button:hover{opacity:1}


/* Cross-sell del carrito: "va bien con lo tuyo". Cards chicas, para que no le compitan al resumen
   ni empujen el botón de pagar fuera de la pantalla. */
.xsell{margin-top:clamp(34px,4vw,52px);border-top:1.5px solid var(--line);padding-top:26px}
.xsell__head h2{font-family:var(--ff-display,inherit);font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.02em;margin:12px 0 20px;line-height:1.1}
.xsell__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.xcard{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;transition:border-color .2s}
.xcard:hover{border-color:var(--muted-2)}
.xcard__media{display:grid;place-items:center;aspect-ratio:1;background:var(--paper-2,#f6f6f4);overflow:hidden}
.xcard__media img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.xcard:hover .xcard__media img{transform:scale(1.05)}
.xcard__body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.xcard__cat{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.xcard__name{font-size:13px;font-weight:700;line-height:1.3;
  /* Dos líneas y corta: los títulos largos descuadraban la grilla entera. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xcard__foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.xcard__pr{font-size:14px;font-weight:800}
.xcard__add{height:32px;padding:0 12px;border-radius:9px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;transition:background .2s}
.xcard__add:hover{background:var(--accent)}

/* Gracias: ondas, número de pedido y los tres pasos (del Gracias.html del diseño). */
.thanks__ripple{position:absolute;top:50%;left:50%;width:190px;height:190px;border-radius:50%;border:1.5px solid rgba(224,35,28,.28);transform:translate(-50%,-50%) scale(.6);animation:ripple 4.5s ease-out infinite}
.thanks__ripple:nth-child(3){animation-delay:1.5s}
.thanks__ripple:nth-child(4){animation-delay:3s}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:.6}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.thanks__ripple{animation:none;opacity:.2}}
.thanks__num .tot{font-weight:800;font-size:15px;padding-left:14px;border-left:1px solid var(--line)}
.tsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:left;border-top:1px solid var(--line);margin-bottom:34px}
.tstep{padding:20px 22px 0 0;border-right:1px solid var(--line-soft)}
.tstep:last-child{border-right:none}
.tstep .num{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.tstep .h{font-weight:800;font-size:14.5px;letter-spacing:-.01em;margin-top:10px}
.tstep .d{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:6px}
@media(max-width:720px){.tsteps{grid-template-columns:1fr}.tstep{border-right:none;border-bottom:1px solid var(--line-soft);padding-bottom:16px}}

/* ============================================================
   PRODUCTO DESTACADO (landing por publicación)
   Anatomía del "Landing Star Destroyer.html" del diseño. Todo con las variables del tema: la
   landing tiene que verse parte del sitio, no una pieza pegada.
   ============================================================ */
.fx-hero{position:relative;overflow:hidden;background:var(--sand);padding:clamp(50px,7vw,110px) 0 clamp(40px,5vw,80px)}
.fx-hero__pattern{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(20,20,24,.13) 1px,transparent 0);background-size:26px 26px}
.fx-hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.fx-hero__title{font-size:clamp(38px,6.4vw,86px);font-weight:900;letter-spacing:-.035em;line-height:.94;margin:16px 0 0}
.fx-hero__claim{font-size:clamp(15px,1.6vw,19px);line-height:1.55;color:var(--muted);max-width:46ch;margin:18px 0 0}
.fx-hero__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.fx-hero__price{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.02em}
.fx-tag{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--muted)}
.fx-tag--hot{border-color:var(--accent);color:var(--accent)}
.fx-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fx-hero__stage{position:relative;display:grid;place-items:center;aspect-ratio:1}
.fx-hero__shape{position:absolute;inset:8%;border-radius:50%;background:var(--paper);
  box-shadow:0 40px 80px -30px rgba(20,20,24,.35)}
.fx-hero__prod{position:relative;width:100%;height:100%;object-fit:contain;padding:6%}

.fx-ink{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(56px,7vw,112px) 0}
.fx-ink__ghost{position:absolute;right:-2%;bottom:-14%;font-family:var(--ff-display);font-size:clamp(160px,26vw,380px);
  font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.045);line-height:1;pointer-events:none}
.fx-ink__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.fx-ink__title{font-size:clamp(28px,4.6vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1.04;max-width:18ch}
.fx-ink__lead{margin-top:22px;font-size:clamp(14.5px,1.5vw,17.5px);line-height:1.65;color:rgba(255,255,255,.68);max-width:62ch}

.fx-gal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.fx-gal__it{margin:0;border-radius:16px;overflow:hidden;background:var(--sand);aspect-ratio:1;display:grid;place-items:center}
.fx-gal__it--big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.fx-gal__it img{width:100%;height:100%;object-fit:contain;padding:14px}

.fx-steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px;margin-top:24px}
.fx-step{border-top:2px solid var(--ink);padding-top:16px}
.fx-step__n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.fx-step h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:10px 0 7px;line-height:1.25}
.fx-step p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

.fx-specs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5px;margin-top:24px;
  background:var(--line);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.fx-spec{background:var(--paper);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.fx-spec__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fx-spec__v{font-size:17px;font-weight:800;letter-spacing:-.01em}

.fx-revs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.fx-rev{margin:0;border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--paper)}
.fx-rev p{font-size:15px;line-height:1.6;margin:0}
.fx-rev footer{margin-top:14px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.fx-desc__body{max-width:70ch;font-size:15px;line-height:1.75;color:var(--muted)}

.fx-cta{background:var(--sand);padding:clamp(50px,6vw,96px) 0;text-align:center}
.fx-cta__inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.fx-cta h2{font-size:clamp(30px,4.6vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1}
.fx-cta__meta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.fx-cta__price{font-size:clamp(24px,2.8vw,34px);font-weight:900;letter-spacing:-.02em}
.fx-cta__note{margin-top:16px;font-size:12.5px;color:var(--muted)}

@media(max-width:900px){
  .fx-hero__inner{grid-template-columns:1fr}
  /* La foto primero: en el teléfono el producto tiene que verse sin scrollear. */
  .fx-hero__right{order:-1}
  .fx-gal__grid{grid-template-columns:repeat(2,1fr)}
  .fx-gal__it--big{grid-column:span 2;grid-row:auto;aspect-ratio:1}
}

/* Acceso a la landing desde la ficha: una barra ancha, no un botón más entre los otros —si compite
   con "Agregar al carrito" le roba clicks a la compra. */
.pdp__fx{display:flex;flex-direction:column;gap:5px;margin-top:18px;padding:16px 20px;border-radius:14px;
  background:var(--ink);color:#fff;transition:background .2s,transform .2s}
.pdp__fx:hover{background:var(--accent);transform:translateY(-2px)}
.pdp__fx__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.pdp__fx__t{font-size:15px;font-weight:800;letter-spacing:-.01em}
.pdp__fx .arr{display:inline-block;transition:transform .2s}
.pdp__fx:hover .arr{transform:translateX(4px)}

/* El resto de la línea, dentro de la landing de destacado: una landing de "rascadores" no vende un
   rascador, vende la línea — el que entra tiene que poder elegir cuál sin volver al catálogo. */
.fx-linea__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:24px}
.fx-lcard{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;transition:border-color .2s,transform .25s}
.fx-lcard:hover{border-color:var(--muted-2);transform:translateY(-3px)}
.fx-lcard__media{aspect-ratio:1;background:var(--sand);display:grid;place-items:center;overflow:hidden}
.fx-lcard__media img{width:100%;height:100%;object-fit:contain;padding:14px}
.fx-lcard__body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.fx-lcard__name{font-size:14px;font-weight:800;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-lcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:9px}
.fx-lcard__pr{font-weight:900;font-size:15px}
.fx-lcard__add{height:32px;padding:0 13px;border-radius:9px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;transition:background .2s}
.fx-lcard__add:hover{background:var(--accent)}

/* Etiquetas calculadas (App\Store\Promo): el descuento pesa más que el resto, así que se destaca;
   la urgencia va en tinta y lo informativo, discreto. Se apilan sin taparse. */
.pcard__badge--promo{background:var(--accent);color:#fff}
/* EL DESCUENTO: cartel rojo a la DERECHA de la foto (las otras etiquetas van a la izquierda), con la palabra */
.pcard__desc{position:absolute;top:12px;right:12px;z-index:2;background:var(--accent);color:#fff;border-radius:12px;padding:6px 10px 5px;text-align:center;line-height:1;box-shadow:0 4px 14px rgba(224,35,28,.35)}
.pcard__desc b{display:block;font-family:var(--ff-display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.pcard__desc small{display:block;font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;opacity:.95}
.pcard__etq--desc{background:var(--accent);color:#fff;border-color:var(--accent)}
/* el precio de lista, tachado en rojo */
.pcard__price .antes,.pdp__old,.heroA__old{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.pdp__price.has-desc{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp__old{font-size:18px;color:var(--muted);font-weight:600}
/* El cartel del DESCUENTO en la ficha es `.pdp__dto`, NO `.pdp__desc`: ése es el párrafo de la DESCRIPCIÓN. Con el
   mismo nombre, esta regla pintaba la descripción entera como un cartel rojo en mayúsculas (27/09/2026). */
.pdp__dto,.heroA__desc{display:inline-flex;align-items:baseline;gap:5px;background:var(--accent);color:#fff;border-radius:10px;padding:5px 10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.pdp__dto b,.heroA__desc b{font-family:var(--ff-display);font-size:16px;letter-spacing:0}
.heroA__desc[hidden],.heroA__old[hidden]{display:none}
/* «X% extra pagando por transferencia»: la misma frase en catálogo, ficha, hero y carrito */
.pago-promo{font-size:13px;color:var(--ink);background:rgba(224,35,28,.07);border:1px solid rgba(224,35,28,.25);border-radius:10px;padding:8px 12px;margin:0 0 14px}
.pago-promo b{color:var(--accent)}
.pago-promo--pdp{margin:6px 0 10px}.pago-promo--cart{margin:12px 0 0;font-size:12.5px}
.heroA__pago{color:var(--accent);font-weight:700}
.pcard__badge--urgente{background:var(--ink);color:#fff}
.pcard__badge--info{background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line)}
.pcard__badge--manual{background:var(--sand);color:var(--ink)}
/* Precio anterior tachado, al lado del vigente. */
.pcard__price .antes{font-size:12.5px;color:var(--muted);margin-right:7px;font-weight:600}

/* Video del producto: mismo ancho que la foto, sin recorte. `aspect-ratio` reserva el lugar antes
   de que cargue, así la página no salta cuando aparece. */
.pdp__video{margin-top:14px;border-radius:16px;overflow:hidden;background:var(--ink);position:relative}
.pdp__video video,.pdp__video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--ink)}
.pdp__video__t{display:block;padding:9px 14px;font-size:12.5px;color:var(--muted);background:var(--paper)}
/* En cuántas cuotas: debajo del precio, discreto pero visible. */
.pdp__cuotas{margin-top:8px;font-size:14px;font-weight:700;color:var(--accent)}


/* Miniaturas de la ficha. La grande cambia al tocarlas: todas las fotos del producto, no sólo la
   portada, que es lo que el comprador necesita para decidir. */
/* VISOR DE FOTOS A PANTALLA COMPLETA.
   La foto de la ficha entra en un cuadrado de 540 px como mucho: para mirar el detalle de una pieza
   —que es de lo que se trata este catálogo— hacía falta verla grande. Se abre tocándola.
   `visibility` además de `opacity`: con sólo `opacity:0` el panel sigue estando y se come los
   clicks de la página que hay debajo. */
.lbx{position:fixed;inset:0;z-index:1200;background:rgba(14,14,17,.94);
     display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:20px;
     opacity:0;visibility:hidden;transition:opacity .2s}
.lbx.is-open{opacity:1;visibility:visible}
.lbx__img{max-width:100%;max-height:88vh;width:auto;margin:0 auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lbx__nav,.lbx__x{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;
     border-radius:12px;display:grid;place-items:center;transition:background .2s}
.lbx__nav{width:52px;height:52px}
.lbx__nav:hover,.lbx__x:hover{background:rgba(255,255,255,.22)}
.lbx__x{position:absolute;top:16px;right:16px;width:44px;height:44px;z-index:2}
.lbx__n{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;opacity:.7;
     font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em}
/* Con una sola foto no hay a dónde ir: los botones se esconden en vez de quedar inertes. */
.lbx.is-solo .lbx__nav{display:none}
/* La foto de la ficha se toca: que se note. */
.pdp__media{cursor:zoom-in}
@media(max-width:720px){
  /* En el teléfono las flechas van ABAJO, sobre la foto: a los costados se comen el ancho útil y
     encima quedan justo donde va el pulgar al deslizar. */
  .lbx{grid-template-columns:1fr;padding:12px}
  .lbx__nav{position:absolute;bottom:52px;width:46px;height:46px}
  .lbx__nav--prev{left:16px}
  .lbx__nav--next{right:16px}
  .lbx__img{max-height:78vh}
}
.pdp__thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.pdp__thumb{width:66px;height:66px;border-radius:11px;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;padding:6px;overflow:hidden;transition:border-color .2s,transform .2s}
.pdp__thumb:hover{transform:translateY(-2px)}
.pdp__thumb.is-on{border-color:var(--ink)}
.pdp__thumb img{max-width:100%;max-height:100%;object-fit:contain}

/* PUNTOS DE SECCIÓN del riel — mismos que la portada (los del diseño original).
   Van abajo, arriba de las redes, y SIN texto: en 64 px de riel una etiqueta se monta sobre el
   lema vertical. El nombre viaja en `title`/`aria-label`. */
.rail__dots{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:18px}
.rail__dot{width:7px;height:7px;border-radius:50%;background:var(--line);display:block;
  transition:background .2s,transform .2s}
.rail__dot:hover{background:var(--muted-2);transform:scale(1.25)}
.rail__dot.is-on{background:var(--accent);transform:scale(1.25)}
/* En el teléfono el riel se esconde: los puntos con él. */
@media(max-width:900px){.rail__dots{display:none}}

/* El ancho del logo del pie sale de su proporción: la altura ya la fija el diseño (30px).
   Con `width`/`height` fijos en el HTML el navegador lo estiraba. */
.foot__logo{width:auto}

/* ─────────────────── NOTA DE CATEGORÍA (al pie del catálogo) ───────────────────
   El texto propio de la categoría —lo único que esta página tiene y Mercado Libre no—. Estaba arriba
   y era un muro que había que atravesar antes de ver un producto; acá abajo no estorba y Google lo
   lee igual. Lo que penaliza un buscador es el texto ESCONDIDO, no el que está más abajo. */
.catnota{margin-top:clamp(44px,5vw,68px);padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--line)}
.catnota__t{font-family:var(--ff-head);font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
/* Dos columnas cuando hay lugar: un texto de 60 caracteres de ancho a lo largo de toda la pantalla
   es ilegible, y una sola columna angosta deja la mitad de la página vacía. */
.catnota__c{columns:2;column-gap:clamp(28px,4vw,56px);max-width:110ch;color:var(--muted);font-size:14.5px;line-height:1.75}
@media (max-width:820px){.catnota__c{columns:1}}
.catnota__c p{margin:0 0 14px;break-inside:avoid}
.catnota__c ul{margin:0 0 14px;padding-left:18px;break-inside:avoid}
.catnota__c li{margin:0 0 7px}
.catnota__c b{color:var(--ink);font-weight:700}

/* ============================================================
   NIVEL DE ARMADO, ENVÍO Y FICHA TÉCNICA
   La dificultad sale de la ficha del fabricante (ver App\Store\Rasgos) y se dibuja como una barra de
   cinco escalones, que es la escala impresa en las cajas. Como texto plano —una fila más de la tabla
   técnica, en gris, abajo de todo— nadie la veía, y es el dato que decide si alguien que nunca armó
   uno se anima.
   ============================================================ */

/* La etiqueta técnica de la tarjeta: rectángulo negro de puntas redondeadas, arriba a la izquierda.
   Hereda todo de `.pcard__badge` salvo el radio: las de promo son píldoras y ésta no, para que se
   distinga de un vistazo que dice una CARACTERÍSTICA y no una oferta. */
.pcard__badge--ficha{background:var(--ink);color:#fff;border-radius:7px;letter-spacing:.08em}

/* La barra de nivel. Cinco escalones; el medio existe de verdad (hay cajas marcadas con dos
   estrellas y media) y redondearlo sería falsear un dato del fabricante. */
.dbar{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.dbar > i{display:block;width:15px;height:5px;border-radius:3px;background:var(--line, rgba(22,22,26,.16))}
.dbar > i.on{background:var(--accent)}
/* El medio escalón se pinta con un degradado duro: media barra llena, media vacía. */
.dbar > i.half{background:linear-gradient(90deg,var(--accent) 0 50%,var(--line, rgba(22,22,26,.16)) 50% 100%)}
.dbar--sm > i{width:10px;height:4px}

/* En la tarjeta: donde antes iban las estrellas de la calificación (que estaba vacía). */
.pcard__dif{display:inline-flex;align-items:center;gap:8px;margin:2px 0 4px}
.pcard__dif .t{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Los chips de nivel del catálogo, debajo de los de categoría. */
.difchips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.difchips__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* LOS BOTONES DE NIVEL NO SON LOS DE CATEGORÍA. Eran idénticos y se leían como más categorías.
   Van más chicos, con la barrita de escalones adentro —la misma de la tarjeta y de la ficha—,
   así se entiende de un vistazo que es una escala y cuál es más difícil que cuál. */
.chip--dif{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;font-size:12px;border-radius:9px}
.chip--dif .n{opacity:.55;font-size:.85em;margin-left:4px}
.dbar--xs > i{width:7px;height:3px;border-radius:2px}
/* Marcado: los escalones apagados tienen que verse sobre el fondo oscuro del chip activo. */
.chip--dif.is-on .dbar > i{background:rgba(255,255,255,.32)}
.chip--dif.is-on .dbar > i.on{background:#fff}
.difchips__q{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.difchips__q:hover{color:var(--ink)}

/* En la ficha del producto: bloque propio, no una fila de tabla. */
.pdp__dif{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.pdp__dif__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pdp__dif__h .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp__dif__q{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pdp__dif__q:hover{color:var(--ink)}
.pdp__dif__b{display:flex;align-items:center;gap:14px;margin-top:8px}
.pdp__dif__n{font-weight:700;font-size:18px;line-height:1}
.pdp__dif__d{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}

/* El aviso de envío, arriba del botón: es la pregunta que más carritos deja por la mitad cuando la
   respuesta aparece recién en el checkout. */
/* El ícono y el TEXTO ENTERO: dos hijos, no cinco. En flex cada hijo es una columna, y con los
   `<strong>` sueltos el aviso salía partido en cuatro columnitas de dos renglones cada una. */
.pdp__envio{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;
  border-radius:12px;background:var(--sand);font-size:13.5px;line-height:1.55;color:var(--ink)}
.pdp__envio svg{flex:0 0 auto;margin-top:2px;color:var(--accent)}
.pdp__envio b{font-weight:700}
.pdp__envio__b{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}

/* El cartel de Mercado Pago pasó a la columna de las fotos. */
.pdp__pagos{margin-top:18px}

/* LA FICHA TÉCNICA, EN LA COLUMNA DE LAS FOTOS. En la derecha hacía una torre de veinte filas que
   empujaba el precio y el botón fuera de la pantalla; acá llena el hueco que quedaba debajo de la
   foto. Como la columna es angosta, va en UNA sola columna de datos. */
.pdp__tec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pdp__tec__t{font-size:clamp(22px,2.4vw,30px);margin:0 0 18px}
.pdp__tec__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.pdp__hl{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pdp__hl .k{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp__hl .v{display:block;margin-top:4px;font-weight:600;font-size:15px}
.pdp__tec .pdp__kv{break-inside:avoid}
.pdp__tec__top{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.pdp__tec__t{font-size:clamp(19px,2vw,23px)}

/* La vista rápida ahora respeta el fondo de la foto igual que la tarjeta (ver `openQV`). */
.qv__media--cut{background:linear-gradient(160deg,var(--sand),var(--paper))}

/* Cuando el envío gratis SE ALCANZA, la barra tiene que cambiar de estado. Antes sólo cambiaba la
   frase, en el mismo gris de siempre: el logro pasaba desapercibido justo cuando conviene que se
   note. */
.freebar.is-free{padding:12px 14px;border-radius:12px;background:var(--sand)}
.freebar.is-free .t{color:var(--ink)}
.freebar.is-free .t b{color:var(--accent)}
.freebar.is-free .bar{background:rgba(0,0,0,.07)}


/* El envío al lado del precio del hero. Estaba en una tarjeta propia entre las de datos y era
   demasiado peso para un dato de una línea. */
.heroA__envio{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:5px 11px;
  border-radius:99px;background:var(--sand);font-size:12.5px;color:var(--muted);white-space:nowrap}
.heroA__envio b{color:var(--ink);font-weight:700}
@media (max-width:720px){ .heroA__envio{margin-left:0;margin-top:8px} }

/* VENTA CRUZADA al pie de la ficha. Deliberadamente más chicas que las del catálogo: acompañan, no
   compiten con la pieza que se está mirando. */
.pdp__mas{margin-top:clamp(44px,5vw,72px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line)}
.pdp__mas__h h2{margin:10px 0 0;font-size:clamp(22px,2.6vw,32px)}
.pdp__mas__g{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pdp__mas__i a{display:block;color:inherit;text-decoration:none}
.pdp__mas__im{display:grid;place-items:center;aspect-ratio:1/1;border-radius:13px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line)}
.pdp__mas__im.is-cut{background:linear-gradient(160deg,var(--sand),var(--paper))}
.pdp__mas__im img{max-width:80%;max-height:80%;width:auto;height:auto;object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pdp__mas__i a:hover .pdp__mas__im img{transform:scale(1.06)}
.pdp__mas__c{display:block;margin-top:10px;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp__mas__n{display:block;margin-top:3px;font-weight:600;font-size:13.5px;line-height:1.35}
.pdp__mas__p{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}

/* ============================================================
   VISTA EN LISTA — también en escritorio
   El botón grilla/lista se dibujaba en el catálogo pero al tocarlo no pasaba nada en PC: el JS sí
   ponía la clase `is-list`, pero TODAS las reglas de esa clase vivían adentro del
   `@media (max-width:720px)` de la hoja del teléfono — que además en escritorio ni se carga. O sea
   un control visible que no hacía nada.
   Acá está la versión de escritorio, con la foto más grande porque hay lugar. El teléfono sigue
   ajustando lo suyo encima (96 px de foto, sin categoría, una sola etiqueta).
   ============================================================ */
.hbview{display:inline-flex;gap:4px}
.hbview button{width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.hbview button:hover{border-color:var(--ink)}
.hbview button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.grid.is-list{grid-template-columns:1fr;gap:12px}
/* DOS COLUMNAS CUANDO SOBRA ANCHO. Con una sola fila por producto, en un monitor quedaba media
   pantalla vacía y el botón de agregar a un palmo del precio. Desde 1000 px entran dos. */
@media (min-width:1000px){.grid.is-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid.is-list .pcard{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:stretch}
/* LA FOTO OCUPA TODO EL ALTO DE LA FILA. Con `aspect-ratio:1/1` la caja de la imagen era
   cuadrada y la fila más alta que ella: quedaban dos bandas blancas, arriba y abajo. Estirada
   al alto de la fila, la misma foto se ve más grande sin que la fila crezca ni un píxel. */
.grid.is-list .pcard__media{aspect-ratio:auto;min-height:132px;padding:10px;border-radius:18px 0 0 18px}
.grid.is-list .pcard__body{padding:14px 18px;display:flex;flex-direction:column;justify-content:center}
.grid.is-list .pcard__name{font-size:16px}
/* EL BOTÓN, AL LADO DEL PRECIO. En la fila el pie se estiraba a lo ancho y el «+» terminaba
   contra el borde derecho, lejísimos de lo que se está mirando. */
.grid.is-list .pcard__foot{margin-top:8px;justify-content:flex-start;gap:14px}
/* EN LA FILA, LAS ETIQUETAS NO VAN SOBRE LA FOTO. Con 132 px de miniatura, el cartelito negro
   la tapaba entera —y es la foto lo que se está mirando—. Se ocultan las de la imagen y se muestran
   las gemelas que la tarjeta ya trae en el texto, debajo del nombre. En la grilla, al revés. */
.grid.is-list .pcard__media .pcard__badge{display:none}
.pcard__etqs{display:none}
.grid.is-list .pcard__etqs{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.pcard__etq{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
            font-weight:700;padding:3px 8px;border-radius:999px;background:var(--sand);color:var(--ink)}
.pcard__etq--promo{background:var(--accent);color:#fff}
.pcard__etq--urgente{background:var(--ink);color:#fff}
.pcard__etq--info{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.pcard__etq--ficha{background:var(--ink);color:#fff;border-radius:7px}
.pcard__etq--soon{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
/* La vista rápida es un hover sobre la foto: en la fila chica no hay dónde ponerla. */
.grid.is-list .pcard__quick{display:none}