/* ==========================================================================
   KORA — la tienda.

   Extiende kora.css, no lo sustituye: los tokens, la tipografía, el grano y
   el botón vienen de allí. Aquí solo vive lo que el home no necesitaba.

   La decisión que ordena todo lo demás: la ficha no es una tarjeta. No hay
   caja, ni borde, ni sombra. La foto ya viene sobre papel (el pipeline lleva
   el punto blanco al pergamino de la casa), así que cada pieza se lee como
   una placa apoyada sobre el cacao y la retícula respira sola.
   ========================================================================== */

/* La barra es fija y de dos alturas: el contenido empieza por debajo de su
   altura real, que publica shell.js en --bar-h. El clamp queda de reserva
   por si el módulo no carga. */
.page main{
  padding-top:calc(var(--bar-h, clamp(104px,20vw,168px)) + clamp(18px,3vw,40px));
}

/* ----------------------------------------------------------- migas de pan */
.crumbs{width:var(--shell);margin:0 auto var(--sp-m);}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;}
.crumbs li{display:flex;align-items:center;gap:10px;}
.crumbs li:not(:last-child)::after{content:"/";color:var(--theme-dim);opacity:.5;}
.crumbs a{
  display:inline-flex;align-items:center;min-height:32px;
  font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--theme-dim);transition:color .35s var(--ease-soft);
}
.crumbs a:hover{color:var(--theme-ink);}
.crumbs a[aria-current]{color:var(--theme-ink);}

/* ------------------------------------------------------ cabecera de página */
.phead{width:var(--shell);margin-inline:auto;display:grid;gap:var(--sp-s);}
/* "devoluciones" no cabe entera a 280 px y empujaba la columna fuera de la
   pantalla. Se deja partir con guion en vez de bajar la escala del titular. */
.phead__h{
  font-family:var(--display);font-size:var(--s-4);line-height:.94;max-width:16ch;
  overflow-wrap:break-word;hyphens:auto;
}
.phead__l{max-width:52ch;color:var(--theme-dim);font-size:var(--s-1);}
.phead__n{max-width:52ch;color:var(--theme-dim);font-size:var(--s--1);opacity:.85;}

/* ---------------------------------------------------- filtros y orden
   Los filtros no repintan nada: ocultan y reordenan las fichas que ya están
   en el HTML. Por eso la rejilla llega completa aunque el JS no cargue. */
.ctrl{
  width:var(--shell);margin:var(--sp-l) auto 0;
  display:flex;flex-wrap:wrap;gap:var(--sp-m);
  align-items:flex-end;justify-content:space-between;
  padding-bottom:var(--sp-s);border-bottom:1px solid var(--theme-line);
}
.ctrl__sets{display:grid;gap:var(--sp-s);min-width:0;}
.ctrl__set{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.ctrl__lb{
  flex:0 0 auto;font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--theme-dim);margin-right:4px;
}
.chip{
  display:inline-flex;align-items:center;min-height:38px;padding:0 16px;
  cursor:pointer;border:1px solid var(--theme-line);border-radius:999px;
  font-size:var(--s--1);letter-spacing:.06em;color:var(--theme-dim);
  transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft),
             background-color .35s var(--ease-soft);
}
.chip:hover{color:var(--theme-ink);border-color:var(--theme-ink);}
.chip[aria-pressed="true"]{
  background:var(--base-gold-lit);border-color:var(--base-gold-lit);
  color:var(--base-night);font-weight:600;
}
.ctrl__sort{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.ctrl__sort label{
  font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--theme-dim);
}
.ctrl__sort select{
  min-height:38px;padding:0 30px 0 12px;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23A2907E' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--theme-line);color:var(--theme-ink);
  font:inherit;font-size:var(--s--1);
  appearance:none;-webkit-appearance:none;border-radius:999px;
}
.ctrl__sort select:focus-visible{border-color:var(--base-gold-lit);}
.ctrl__sort option{background:var(--base-night);color:var(--base-parchment);}
.ctrl__n{
  width:var(--shell);margin:var(--sp-s) auto 0;
  font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--theme-dim);
}

/* ------------------------------------------------------------- la rejilla */
.grid{
  width:var(--shell);margin:var(--sp-m) auto 0;
  display:grid;gap:var(--sp-m) clamp(12px,1.8vw,26px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1180px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr));} }

.card{min-width:0;}
.card[hidden]{display:none;}
.card__a{display:grid;gap:4px;}
.card__im{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:1;margin-bottom:12px;
}
.card__im img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s var(--ease-soft),transform 1.1s var(--ease-expo);
}
.card__b{opacity:0;}
@media (hover:hover) and (pointer:fine){
  .card__a:hover .card__f,.card__a:focus-visible .card__f{transform:scale(1.04);}
  .card__a:hover .card__b,.card__a:focus-visible .card__b{opacity:1;transform:scale(1.04);}
}
.card__t{font-family:var(--display);font-size:var(--s-1);line-height:1.15;color:var(--theme-ink);}
.card__m{font-size:var(--s--1);color:var(--theme-dim);}
.card__p{font-size:var(--s--1);color:var(--theme-accent);margin-top:2px;}
/* Sin precio confirmado el dato baja de jerarquía en vez de desaparecer:
   quien mira la rejilla tiene que saber que existe y que se pregunta. */
.card__p--ask{color:var(--theme-dim);opacity:.8;}

.grid__none{
  width:var(--shell);margin:var(--sp-l) auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s);
  color:var(--theme-dim);
}

/* ----------------------------------------------------------------- botón */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;cursor:pointer;width:100%;
  background:var(--base-gold-lit);color:var(--base-night);
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-align:center;
  transition:background-color .4s var(--ease-soft),transform .2s var(--ease-soft);
}
.btn:hover{background:var(--base-parchment);}
.btn:active{transform:scale(.985);}
.btn--lg{min-height:58px;}
.btn--ghost{
  background:transparent;color:var(--theme-ink);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}
.btn--ghost:hover{background:transparent;color:var(--theme-accent);box-shadow:inset 0 0 0 1px var(--theme-accent);}
.btn[disabled]{opacity:.5;cursor:default;}

/* =============================================================== la ficha */
.pdp{width:var(--shell);margin-inline:auto;}
.pdp__top{display:grid;gap:var(--sp-l);align-items:start;}
@media (min-width:900px){
  .pdp__top{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,4vw,72px);}
}

/* Galería. En vertical es un carrusel con snap; desde 900 se apilan y el
   panel de compra queda pegado al margen. */
.pdp__slides{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-inline:calc(-1 * var(--gut));
  padding-inline:var(--gut);scroll-padding-inline:var(--gut);
}
.pdp__slides::-webkit-scrollbar{display:none;}
.pdp__slides li{flex:0 0 100%;scroll-snap-align:center;min-width:0;}
.pdp__slides img{width:100%;height:auto;object-fit:cover;aspect-ratio:1;}
.pdp__slides li:has(img[height="1125"]) img,
.pdp__slides img[width="900"][height="1125"]{aspect-ratio:4/5;}
.pdp__th{
  display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap;
}
.pdp__th button{
  display:block;padding:0;cursor:pointer;width:56px;height:56px;
  opacity:.45;transition:opacity .4s var(--ease-soft),box-shadow .4s var(--ease-soft);
}
.pdp__th button[aria-current]{opacity:1;box-shadow:0 2px 0 var(--theme-accent);}
.pdp__th img{width:100%;height:100%;object-fit:cover;}

/* Este bloque va después de .pdp__th a propósito: si se declara antes, la
   regla suelta de display:flex lo gana por orden y las miniaturas siguen
   apareciendo en escritorio, donde la galería ya está apilada entera. */
@media (min-width:900px){
  .pdp__slides{
    display:grid;grid-template-columns:1fr;gap:10px;
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .pdp__th{display:none;}
  .pdp__buy{position:sticky;top:180px;}
}

.pdp__buy{display:grid;gap:var(--sp-s);align-content:start;}
.pdp__h{font-family:var(--display);font-size:var(--s-4);line-height:.96;margin-top:6px;}
.pdp__sub{
  font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--theme-dim);margin-top:-6px;
}
.pdp__price{font-family:var(--display);font-size:var(--s-2);color:var(--theme-accent);}
.pdp__price--ask{font-size:var(--s-1);color:var(--theme-ink);display:grid;gap:4px;}
.pdp__price--ask span{
  font-family:var(--text);font-size:var(--s--1);color:var(--theme-dim);
}
.pdp__desc{color:var(--theme-dim);max-width:46ch;line-height:1.7;}

.pdp__opts{display:grid;gap:10px;}
.pdp__optl{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--theme-dim);}
.pdp__optl b{color:var(--theme-ink);font-weight:600;}
.pdp__optr{display:flex;flex-wrap:wrap;gap:8px;}
.opt{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  cursor:pointer;border:1px solid var(--theme-line);
  font-size:var(--s--1);color:var(--theme-dim);
  transition:color .3s,border-color .3s,background-color .3s;
}
.opt:hover{color:var(--theme-ink);border-color:var(--theme-ink);}
.opt[aria-pressed="true"]{
  background:var(--theme-ink);border-color:var(--theme-ink);color:var(--base-night);font-weight:600;
}

.pdp__act{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:var(--sp-xs);}
.pdp__qty{display:grid;gap:8px;flex:0 0 auto;}
.pdp__qty span{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--theme-dim);}
.pdp__qty input{
  width:78px;height:58px;padding:0 10px;text-align:center;
  background:transparent;border:1px solid var(--theme-line);
  color:var(--theme-ink);font:inherit;font-size:var(--s-0);
  font-variant-numeric:tabular-nums;
}
.pdp__qty input:focus-visible{border-color:var(--base-gold-lit);}
.pdp__act .btn{flex:1 1 14rem;width:auto;}
.pdp__hint{font-size:var(--s--1);color:var(--theme-accent);min-height:1.2em;}
.pdp__hint:empty{min-height:0;}

.pdp__ass{
  display:grid;gap:8px;margin-top:var(--sp-xs);
  padding-top:var(--sp-s);border-top:1px solid var(--theme-line);
}
.pdp__ass li{
  font-size:var(--s--1);color:var(--theme-dim);
  padding-left:18px;position:relative;
}
.pdp__ass li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--theme-accent);
}

.pdp__more{
  display:grid;gap:var(--sp-m) var(--sp-l);
  margin-top:var(--sp-xl);padding-top:var(--sp-m);
  border-top:1px solid var(--theme-line);
}
@media (min-width:760px){ .pdp__more{grid-template-columns:1fr 1fr;} }
.pdp__more section{display:grid;gap:var(--sp-s);align-content:start;}
.pdp__more h2{
  font-size:var(--s--1);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--theme-accent);
}
.pdp__more p{color:var(--theme-dim);max-width:52ch;line-height:1.7;}
.pdp__spec{display:grid;gap:0;}
.pdp__spec > div{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--sp-s);
  padding:12px 0;border-bottom:1px solid var(--theme-line);
}
.pdp__spec dt{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;}
.pdp__spec dd{font-size:var(--s--1);color:var(--theme-dim);}
.pdp__miss{font-size:var(--s--1);opacity:.8;}

.rel{margin-top:var(--sp-2xl);}
.rel .h2{width:var(--shell);margin-inline:auto;}

.also{
  width:var(--shell);margin:var(--sp-2xl) auto 0;
  padding-top:var(--sp-m);border-top:1px solid var(--theme-line);
}
.also h2{
  font-size:var(--s--1);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--theme-accent);margin-bottom:var(--sp-s);
}
.also ul{display:flex;flex-wrap:wrap;gap:10px 12px;}
.also a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--theme-line);border-radius:999px;
  font-size:var(--s--1);color:var(--theme-dim);
  transition:color .3s,border-color .3s;
}
.also a:hover{color:var(--theme-ink);border-color:var(--theme-ink);}

/* ============================================================ colecciones */
.colls{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-xl);}
.coll{display:grid;gap:var(--sp-m);align-items:center;}
@media (min-width:900px){
  .coll{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-l);}
  /* Se alterna el lado para que cinco bloques seguidos no se lean como una
     lista. Es la única variación: más sería ruido. */
  .coll:nth-child(even) .coll__b{order:2;}
}
.coll__b{display:grid;gap:12px;justify-items:start;}
.coll__h{font-family:var(--display);font-size:var(--s-3);line-height:1;}
.coll__l{color:var(--theme-dim);max-width:36ch;}
.coll__n{font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;color:var(--theme-accent);}
.coll__im{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media (min-width:600px){ .coll__im{grid-template-columns:repeat(4,1fr);} }
.coll__im img{width:100%;aspect-ratio:1;object-fit:cover;}
/* Escalonado leve: la fila deja de leerse como una retícula. */
@media (min-width:600px){
  .coll__im li:nth-child(2){margin-top:clamp(10px,2vw,26px);}
  .coll__im li:nth-child(4){margin-top:clamp(16px,3vw,38px);}
}

/* ================================================================= texto */
.prose{width:var(--shell);margin-inline:auto;margin-top:var(--sp-l);}
.prose--narrow{max-width:min(62ch, 100% - 2 * var(--gut));margin-inline:auto;}
.prose p{color:var(--theme-dim);line-height:1.75;margin-top:var(--sp-s);max-width:62ch;}
.prose__lead{font-family:var(--display);font-size:var(--s-2);line-height:1.3;color:var(--theme-ink);max-width:26ch;}
.prose h2{
  font-family:var(--display);font-size:var(--s-2);line-height:1.1;
  margin-top:var(--sp-l);
}
.prose a:not(.cta){color:var(--theme-ink);box-shadow:inset 0 -1px 0 var(--theme-accent);}
.prose a:not(.cta):hover{color:var(--theme-accent);}
.prose b{color:var(--theme-ink);font-weight:600;}
/* La fuente de esta foto no pasa de 768 px de ancho. Sin el tope, en un
   monitor de 1440 se pintaba a 1313 y se veía el pixel: la figura se limita
   a lo que la imagen puede dar, que además es un ancho de lectura cómodo. */
.prose__f{margin:var(--sp-l) 0 0;max-width:768px;}
/* La foto de la esmeralda es 16:9 y da 1266 px: puede pasar del ancho de
   lectura sin estirarse. */
.prose__f--wide{max-width:none;}
.prose__f img{width:100%;height:auto;}
.prose__f figcaption{
  margin-top:12px;font-size:var(--s--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--theme-dim);
}
.prose__note{
  padding-left:var(--sp-s);border-left:2px solid var(--theme-accent);
  font-size:var(--s--1);
}
.prose .cta{margin-top:var(--sp-s);}

/* Los cuatro pasos del oficio. */
.steps{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-l);}
.steps li{display:grid;gap:var(--sp-s);align-items:start;}
/* min-width:0 explícito. Por defecto un hijo de grid vale min-content, y para
   una imagen eso es su ancho intrínseco: la foto de 900 px no encogía dentro
   de su columna y sacaba la fila 157 px fuera de la pantalla a 768. */
.steps li > *{min-width:0;}
@media (min-width:760px){
  .steps li{grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-m);align-items:center;}
  /* El alternado se hace colocando cada hijo en su columna, no con order.
     Con order:-1 la foto caía en la primera pista, que es auto, y una pista
     auto se dimensiona por el contenido: la imagen reclamaba sus 900 px
     intrínsecos y sacaba la fila 157 px fuera de la pantalla a 768. */
  .steps li:nth-child(even){grid-template-columns:minmax(0,.85fr) auto minmax(0,1fr);}
  .steps li:nth-child(even) .steps__im{grid-column:1;}
  .steps li:nth-child(even) .steps__n{grid-column:2;}
  .steps li:nth-child(even) .steps__b{grid-column:3;}
}
.steps__n{
  font-size:var(--s--1);font-weight:600;letter-spacing:.24em;color:var(--theme-accent);
}
.steps__b h2{font-family:var(--display);font-size:var(--s-3);line-height:1;}
.steps__b p{margin-top:12px;color:var(--theme-dim);max-width:38ch;line-height:1.7;}
/* 480 es el ancho de la fuente más pequeña de las cuatro (la banda de
   filigrana da 486). Con el tope, ninguna foto de esta página se estira por
   encima de lo que tiene, y de paso la sección deja de ser tan alta. */
.steps__im{
  width:100%;max-width:480px;height:auto;aspect-ratio:1;object-fit:cover;
  justify-self:end;
}
@media (min-width:760px){
  .steps li:nth-child(even) .steps__im{justify-self:start;}
}

/* Visítanos. */
.visit{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-l);align-items:start;}
@media (min-width:900px){ .visit{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);} }
.visit__d{display:grid;gap:var(--sp-s);margin-top:var(--sp-m);}
.visit__d > div{padding-left:var(--sp-s);border-left:2px solid var(--theme-accent);display:grid;gap:5px;}
.visit__d dt{font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.visit__d dd{font-size:var(--s--1);color:var(--theme-dim);line-height:1.6;}
.visit__d dd a{
  display:inline-flex;align-items:center;min-height:36px;
  color:var(--theme-ink);box-shadow:inset 0 -1px 0 var(--theme-accent);
}
.contact__tel{display:grid;gap:0;}
.visit__im{margin:0;}
.visit__im img{width:100%;height:auto;}

/* Lista de definiciones, en envíos. */
.deflist{margin-top:var(--sp-m);display:grid;gap:0;}
@media (min-width:600px){ .deflist{grid-template-columns:1fr 1fr;column-gap:var(--sp-l);} }
.deflist > div{padding:var(--sp-s) 0;border-top:1px solid var(--theme-line);display:grid;gap:6px;}
.deflist dt{font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.deflist dd{font-size:var(--s--1);color:var(--theme-dim);line-height:1.6;}

/* Preguntas. */
.faq{width:min(62ch, var(--shell));margin:var(--sp-l) auto 0;}
.faq__i{border-top:1px solid var(--theme-line);}
.faq__i:last-child{border-bottom:1px solid var(--theme-line);}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s);
  padding:var(--sp-s) 0;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:var(--s-1);
}
.faq__i summary::-webkit-details-marker{display:none;}
.faq__i summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:1px solid var(--theme-accent);border-bottom:1px solid var(--theme-accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .4s var(--ease-expo);
}
.faq__i[open] summary::after{transform:rotate(225deg) translateY(-3px);}
.faq__i p{padding:0 0 var(--sp-s);color:var(--theme-dim);line-height:1.7;max-width:56ch;}

/* Contacto. */
.contact{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-l);align-items:start;}
@media (min-width:900px){ .contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-xl);} }
.contact__n{margin-top:var(--sp-m);font-size:var(--s--1);color:var(--theme-dim);}
.contact__n a{color:var(--theme-ink);box-shadow:inset 0 -1px 0 var(--theme-accent);}
.contact__f{display:grid;gap:var(--sp-s);}
.field{display:grid;gap:8px;}
.field label{font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;color:var(--theme-ink);}
.field input,.field textarea{
  width:100%;padding:14px 16px;min-height:52px;
  background:transparent;border:1px solid var(--theme-line);
  color:var(--theme-ink);font:inherit;font-size:var(--s-0);
}
.field textarea{resize:vertical;line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--base-gold-lit);}
.field__h{font-size:var(--s--1);color:var(--theme-dim);}
.contact__f .btn{width:auto;justify-self:start;padding-inline:40px;}

/* ============================================================== el carrito */
.cartp{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-l);align-items:start;}
@media (min-width:900px){ .cartp{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--sp-xl);} }
.cartp__side{
  display:grid;gap:var(--sp-s);
  padding:var(--sp-m);border:1px solid var(--theme-line);
  background:color-mix(in srgb, var(--base-parchment) 4%, transparent);
}
@media (min-width:900px){ .cartp__side{position:sticky;top:200px;} }
.cartp__side .h2{font-size:var(--s-2);}
.cartp__ass{display:grid;gap:8px;padding-top:var(--sp-s);border-top:1px solid var(--theme-line);}
.cartp__ass li{font-size:var(--s--1);color:var(--theme-dim);padding-left:18px;position:relative;}
.cartp__ass li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--theme-accent);
}

/* ====================================================== MÓDULOS DEL HOME
   Tres bloques nuevos dentro del recorrido aprobado. Cada uno usa una
   composición distinta de las que ya había: la lista tipográfica de "cuatro
   maneras", la tira escalonada de "a escala" y el carril del catálogo siguen
   siendo únicos, y estos no los repiten. */

/* El botón del hero convive con el enlace subrayado que ya estaba: uno pesa
   y el otro no, que es justo la jerarquía que hacía falta. */
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s) var(--sp-m);}
.btn--hero{width:auto;min-height:50px;padding-inline:32px;}

/* La selección: una pieza grande y cuatro alrededor. */
/* Sin padding arriba: el manifiesto ya cierra con sp-2xl y sumar los dos
   dejaba una pantalla entera en blanco entre el texto y la primera pieza. */
.pick{padding:0 0 var(--sp-2xl);}
.pick__head{width:var(--shell);margin-inline:auto;display:grid;gap:var(--sp-s);}
.pick__l{max-width:40ch;color:var(--theme-dim);}
.pick__grid{width:var(--shell);margin:var(--sp-l) auto 0;display:grid;gap:var(--sp-m);}
@media (min-width:900px){
  .pick__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;}
}
.pick__im{display:block;overflow:hidden;position:relative;aspect-ratio:1;}
.pick__im img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-expo);
}
@media (hover:hover){ .pick a:hover .pick__im img{transform:scale(1.04);} }
.pick__lead a{display:grid;gap:6px;}
.pick__lt{font-family:var(--display);font-size:var(--s-3);line-height:1;margin-top:14px;}
.pick__lm{font-size:var(--s--1);color:var(--theme-dim);}
.pick__rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s) clamp(10px,1.4vw,20px);}
.pick__i a{display:grid;gap:3px;}
.pick__t{font-family:var(--display);font-size:var(--s-1);line-height:1.15;margin-top:10px;}
.pick__m{font-size:var(--s--1);color:var(--theme-dim);}
/* Escalonado: la columna de cuatro deja de leerse como una retícula. */
@media (min-width:900px){
  .pick__rest{align-content:start;}
  .pick__i:nth-child(2),.pick__i:nth-child(4){margin-top:clamp(16px,2.4vw,42px);}
}
.pick__foot{width:var(--shell);margin:var(--sp-l) auto 0;}

/* Por dónde entrar: fotografía a sangre con el nombre encima. La joyería es
   la protagonista, nunca un icono genérico de arete. */
.cats{padding:var(--sp-l) 0 var(--sp-xl);}
.cats__h{width:var(--shell);margin-inline:auto;}
.cats__l{
  display:flex;gap:clamp(8px,1.2vw,16px);
  margin-top:var(--sp-m);padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;
}
.cats__l::-webkit-scrollbar{display:none;}
.cats__i{flex:0 0 clamp(200px,58vw,300px);scroll-snap-align:start;}
@media (min-width:760px){
  .cats__l{
    display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;
    width:var(--shell);margin-inline:auto;padding-inline:0;
  }
  .cats__i{flex:initial;}
}
.cats__i a{position:relative;display:block;overflow:hidden;isolation:isolate;}
.cats__i img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.2s var(--ease-expo);
}
.cats__i a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,11,8,0) 38%, rgba(18,11,8,.86) 100%);
}
@media (hover:hover){ .cats__i a:hover img{transform:scale(1.05);} }
.cats__t{
  position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(30px,3.4vw,44px);z-index:2;
  font-family:var(--display);font-size:var(--s-2);line-height:1;color:var(--base-parchment);
}
.cats__n{
  position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(12px,1.4vw,20px);z-index:2;
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--base-gold-lit);
}

/* ---------------------------------------------------------- movimiento */
@media (prefers-reduced-motion:reduce){
  .card__im img,.pdp__th button,.pick__im img,.cats__i img{transition:none;}
}