:root{
  --bone:#F6F3F4; --ink:#2A1F2E; --plum:#5C3D63; --rose:#B4657F; --rose-soft:#F3E6EB;
  --silver:#A9A6AE; --gris:#5E5463; --gris-suave:#6E6473; --line:#E4DDE0; --white:#fff; --wa:#25806a; --pagar:#9E4E68;
  --w:1180px; --dock:64px;
  /* Estrellas de reseñas: amarillas en todo el sitio (encargo de la ficha).
     El CSS le gana al atributo fill de cada <svg>. */
  --estrella:#F5B301;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);
  font:400 16px/1.55 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;margin:0;letter-spacing:.04em}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-suave);font-weight:400}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.vf{vertical-align:-2px;margin-left:3px}

/* barra de avisos rotativa · slides apilados en una celda:
   la altura la fija el aviso más largo, así ninguno se corta en pantallas de 360px */
.ann{background:var(--plum);color:#f4ecf6;min-height:38px}
.ann-track{display:grid}
/* display:block y no flex: con flex, cada trozo de texto y cada <b> eran ítems
   independientes y el aviso se partía en columnas raras al envolver. */
.ann-slide{grid-area:1/1;display:block;text-align:center;font-size:12.5px;letter-spacing:.05em;
  padding:10px 14px;line-height:1.35;min-height:38px;opacity:0;animation:annf 15s infinite}
.ann-slide:nth-child(1){animation-delay:0s}
.ann-slide:nth-child(2){animation-delay:-10s}
.ann-slide:nth-child(3){animation-delay:-5s}
.ann b{font-weight:500;color:#fff}
/* Un solo aviso, fijo: sin rotación. Es un enlace a la promo de la portada. */
.ann-slide:only-child{opacity:1;animation:none}
a.ann-slide{color:inherit;text-decoration:none}
.ann-slide:only-child b{font-weight:600;letter-spacing:.06em}
@keyframes annf{0%{opacity:0}4%,29%{opacity:1}33%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ann-slide{animation:none;opacity:0}
  .ann-slide:first-child{opacity:1}
}

/* encabezado */
.top{position:sticky;top:0;z-index:60;background:rgba(246,243,244,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--w);margin:0 auto;padding:0 16px;height:56px;
  display:flex;align-items:center;gap:20px}
.brand{font-family:'Cormorant Garamond',serif;font-size:21px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.brand em{font-style:italic;letter-spacing:.04em;color:var(--plum)}
.tnav{display:none;gap:22px;margin-left:auto;font-size:13px;letter-spacing:.06em}
.tnav a{text-decoration:none;color:var(--ink);opacity:.72;padding:4px 0;border-bottom:1px solid transparent}
.tnav a:hover{opacity:1;border-color:var(--rose)}

/* Lupa de la cabecera y su panel.
 *
 * El buscador que ya existía vive dentro del catálogo de charms y solo filtra
 * charms: quien buscaba «corazón pavé» —un brazalete— no encontraba nada, y
 * quien llegaba de un anuncio a media página no tenía dónde buscar sin volver
 * a subir. Este busca en los dos catálogos y está siempre a mano.
 *
 * Solo el icono, sin la palabra «Buscar»: la lupa es de los pocos símbolos que
 * no necesitan etiqueta, y la cabecera en móvil no tiene sitio para más. */
.top-lupa{margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid transparent;border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;flex:0 0 auto;transition:.16s}
@media(hover:hover){.top-lupa:hover{border-color:var(--line);background:var(--white)}}
.top-lupa[aria-expanded="true"]{border-color:var(--line);background:var(--white)}

/* Menú de secciones (☰), a la derecha de la lupa. */
.top-menu{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid transparent;border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;flex:0 0 auto;transition:.16s}
@media(hover:hover){.top-menu:hover{border-color:var(--line);background:var(--white)}}
.top-menu[aria-expanded="true"]{border-color:var(--line);background:var(--white)}

/* Panel del menú: mismo anclaje que `.busq` (cuelga de la cabecera, que es
   pegajosa, así que viaja con ella) y mismas piezas que traía la franja de
   atajos de la portada —Kits, Marvel, Brazaletes, Charms— más Envíos. */
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bone);
  border-bottom:1px solid var(--line);box-shadow:0 14px 34px rgba(42,31,46,.13);
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;max-width:640px;margin:0 auto;padding:6px 16px 10px}
.menu-panel[hidden]{display:none}
.menu-panel a{display:flex;flex-direction:column;gap:2px;padding:13px 4px;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.menu-panel a:last-child{border-bottom:none}
.menu-panel a b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:19px}
.menu-panel a small{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-suave)}

/* Cuelga de la cabecera, que es pegajosa, así que el panel viaja con ella. */
.busq{position:absolute;left:0;right:0;top:100%;background:var(--bone);
  border-bottom:1px solid var(--line);box-shadow:0 14px 34px rgba(42,31,46,.13);
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}
.busq[hidden]{display:none}
/* Más angosto que el resto de la página: a todo el ancho, el precio quedaba a
   media pantalla del nombre y la lista se leía como dos columnas sueltas. */
.busq-in{max-width:640px;margin:0 auto;padding:14px 16px 18px}
.busq-campo{position:relative}
.busq-campo input{width:100%;font:400 16px/1 Jost,sans-serif;padding:14px 40px 14px 40px;
  border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--ink)}
.busq-campo input::-webkit-search-cancel-button{-webkit-appearance:none}
.busq-campo>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gris-suave);pointer-events:none}
.busq-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:none;color:var(--gris-suave);font-size:15px;cursor:pointer;line-height:1}
.busq-x[hidden]{display:none}
.busq-nota{margin:11px 0 0;font-size:12.5px;color:var(--gris-suave)}
.busq-res{list-style:none;margin:10px 0 0;padding:0}
.busq-r{display:flex;align-items:center;gap:12px;width:100%;padding:9px 8px;
  border:0;border-radius:3px;background:none;font:inherit;color:var(--ink);
  text-align:left;cursor:pointer}
/* Sobre el <li>: los botones son hijos de uno cada uno y nunca son hermanos. */
.busq-res li+li{border-top:1px solid var(--line)}
@media(hover:hover){.busq-r:hover{background:var(--white)}}
.busq-r.is-marcado{background:var(--white)}
.busq-r img{width:44px;height:44px;border-radius:2px;background:#fff;object-fit:contain;flex:0 0 auto}
.busq-n{min-width:0;line-height:1.3;font-size:14px}
.busq-n small{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris-suave);margin-top:2px}
.busq-n small .out{color:var(--pagar)}
.busq-p{margin-left:auto;font-size:13.5px;white-space:nowrap}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:2px;border:1px solid var(--ink);background:var(--ink);
  color:var(--bone);text-decoration:none;font:400 13.5px/1 Jost;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--plum);border-color:var(--plum)}
/* `display` de .btn le ganaba a [hidden]: la ficha ofrecía «Pedir por
   encargo» en piezas con unidades y «Agregar» en brazaletes, que se eligen
   por talla. Misma familia que .pc[hidden] y .xs[hidden]. */
.btn[hidden]{display:none}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone)}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn--wa:hover{background:#1e6b58;border-color:#1e6b58}
/* Comprar. Rosa oscurecido a propósito: el rosa de marca (#B4657F) con texto
   blanco encima se queda en 3,6:1 y no pasa AA al tamaño de estos botones. */
.btn--pagar{background:var(--pagar);border-color:var(--pagar);color:#fff}
.btn--pagar:hover{background:#884057;border-color:#884057}
.btn--big{width:100%;padding:17px 22px;font-size:14px}
@media(min-width:700px){.btn--big{width:auto}}

/* 1 · hero banner — reemplaza el layout de dos columnas por un banner de
   ancho completo con foto de fondo. Rotación (cuando haya 2+ slides) usa
   el mismo truco 100% CSS que .ann: grid-area:1/1 + keyframes de opacity.
   Con un solo slide no hace falta animación. */
.hbanner{position:relative;overflow:hidden;height:56dvh;min-height:340px}
.hbanner-track{display:grid;height:100%}
.hbanner-slide{grid-area:1/1;position:relative}
.hbanner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hbanner-copy{position:relative;z-index:1;max-width:var(--w);margin:0 auto;padding:28px 16px 0}
.hbanner-copy .eyebrow{color:#fff}
.hbanner-copy h1,.hbanner-copy h2{font-size:clamp(30px,8vw,52px);line-height:1.08;margin:8px 0 10px;color:#fff}
.hbanner-copy h1 i,.hbanner-copy h2 i{font-style:italic;color:var(--rose-soft)}
.hbanner-sub{max-width:40ch;color:#f0e8ef;margin:0;font-size:14.5px}
/* Sobre la foto queda solo la prueba social. El botón y la línea de medios de
   pago viven en .cta-strip, debajo de los beneficios: encima de la imagen
   sumaban tres bloques de texto y obligaban a un degradado que se comía media
   foto en celular, que es justo donde más se compra. */
.hbanner-fixed{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top, rgba(42,31,46,.78), rgba(42,31,46,0) 92%);
  padding:26px 16px 14px}
.hbanner-fixed-in{max-width:var(--w);margin:0 auto}
.hbanner-fixed .hero-badges{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:13.5px;color:#fff}
.hbanner-fixed .hero-badges .stars{margin:0}
.hbanner-fixed .hero-badges .dot{color:#cbb9c9}
.hbanner-fixed .hero-badge-n{color:#e7dfe4}
.hbanner-fixed .hero-badges a{text-decoration:none;font-weight:400;color:#fff}
/* Rotación 100% CSS, mismo mecanismo que .ann/.ann-slide. Los porcentajes
   de abajo están calculados a mano para 2 slides (5s cada uno, 10s de
   ciclo total). Si se agrega un tercer slide, hay que recalcular: ciclo
   pasa a 15s, cada tramo a 1/3 del keyframe, y sumar un tercer
   animation-delay — no se ajusta solo. */
.hbanner-slide{opacity:0;animation:hbf 10s infinite}
.hbanner-slide:nth-child(1){animation-delay:0s}
.hbanner-slide:nth-child(2){animation-delay:-5s}
@keyframes hbf{0%{opacity:0}4%,46%{opacity:1}50%,100%{opacity:0}}
.hbanner-track.paused .hbanner-slide{animation-play-state:paused}
.hbanner-pause{position:absolute;top:14px;right:16px;z-index:3;width:34px;height:34px;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(42,31,46,.45);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hbanner-pause .ico-play{display:none}
.hbanner-pause[aria-pressed="true"] .ico-pause{display:none}
.hbanner-pause[aria-pressed="true"] .ico-play{display:block}

/* 2 · beneficios */
.bens{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.bens-in{max-width:var(--w);margin:0 auto;padding:8px 16px;display:grid;grid-template-columns:1fr}
.ben{display:flex;gap:12px;align-items:flex-start;padding:13px 2px;font-size:13.5px;
  color:#584a5c;line-height:1.5}
.ben+.ben{border-top:1px solid var(--line)}
.ben svg{flex:0 0 auto;margin-top:1px}
.ben b{font-weight:500;color:var(--ink)}

/* Promo de la portada: un solo recuadro (.promo-caja, al final del archivo). */
.promo{padding-top:34px;padding-bottom:34px}   /* sin tocar el lateral de .wrap */

/* secciones producto */
section{scroll-margin-top:64px}
.sec{padding:34px 0;border-top:1px solid var(--line)}
.sec-head{max-width:640px;margin:0 0 24px}
.sec-head h2{font-size:clamp(28px,7vw,42px);line-height:1.12;margin:8px 0 10px}
.sec-head p{margin:0;color:#6d6070;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.pc{background:var(--white);border:1px solid var(--line);border-radius:3px;
  display:flex;flex-direction:column;transition:border-color .2s}
.pc[hidden]{display:none}
@media(hover:hover){.pc:hover{border-color:var(--silver)}}
.pc.is-sel{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
/* Dije sugerido por un kit (ver `sug=` en tienda.js): mismo tratamiento que
   `is-sel`, en rosa para no confundirse con "ya está en tu carrito". */
.pc.is-sug{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.pc.is-sug .pc-img::after{content:'Sugerido';position:absolute;
  top:7px;right:7px;background:var(--pagar);color:#fff;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:2px}
.pc-img{position:relative;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:3px 3px 0 0}
.pc-img img{width:100%;height:100%;object-fit:contain}
.pc-mark{position:absolute;top:7px;left:7px;font-size:12px;letter-spacing:.1em;
  padding:3px 6px;border:1px solid var(--silver);color:var(--gris);
  background:rgba(255,255,255,.92);border-radius:1px;text-transform:uppercase}
.pc-mark--b{border-color:var(--rose);color:var(--pagar)}
.pc-body{padding:11px 12px 12px;display:flex;flex-direction:column;flex:1}
.pc-name{font-size:15.5px;line-height:1.22;margin:0 0 3px}
.pc-meta{font-size:12px;color:var(--gris-suave);letter-spacing:.05em;margin:0 0 9px;text-transform:uppercase}
/* Apilado, no en fila. En las tarjetas angostas (2 columnas en móvil, y el
   carrusel) el precio y el botón no caben juntos y el flex-wrap los partía
   dejando el botón suelto a media fila. Apilados quedan iguales en todas las
   tarjetas y el botón gana ancho de toque. */
.pc-foot{margin-top:auto;display:grid;gap:8px}
.pc-price{font-size:14.5px}
.pc-add{font:400 12px/1 Jost;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 11px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:2px;cursor:pointer;transition:.18s;min-height:32px}
@media(hover:hover){.pc-add:hover{background:var(--ink);color:var(--bone)}}
.pc.is-sel .pc-add{background:var(--plum);border-color:var(--plum);color:#fff}
.tier{margin-bottom:30px}
.tier-head{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.tier-price{font-family:'Cormorant Garamond',serif;font-size:25px}
.tier-count{font-size:12px;color:var(--gris-suave);letter-spacing:.08em;margin-left:auto}

/* catalogo completo plegado */
.more-wrap{text-align:center;margin-top:22px}
#full-cat{margin-top:26px}
#full-cat[hidden]{display:none}
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 12px;margin:0 -16px 14px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fbtn{flex:0 0 auto;font:400 12px/1 Jost;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--line);background:var(--white);color:#6d6070;
  border-radius:2px;cursor:pointer;transition:.18s;min-height:38px}
.fbtn:hover{border-color:var(--silver);color:var(--ink)}
.fgroup{flex:0 0 auto;align-self:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-suave);padding:0 4px 0 10px;border-left:1px solid var(--line)}
.fbtn.is-on{background:var(--ink);border-color:var(--ink);color:var(--bone)}


/* 6 · historia */
.story{padding:40px 0;border-top:1px solid var(--line)}
/* Sin foto al lado, el texto se lee como bloque centrado y no estirado de
   borde a borde: de ahí el max-width y el centrado, en vez de las dos
   columnas que tenía cuando había imagen. */
.story-in{display:grid;gap:26px;max-width:62ch;margin-inline:auto;text-align:center}
.story h2{font-size:clamp(28px,7vw,42px);line-height:1.14;margin:8px 0 14px}
.story h2 i{font-style:italic;color:var(--plum)}
.story p{color:#584a5c;margin:0 auto 14px;max-width:52ch}
.story p:last-of-type{margin-bottom:22px}
/* Carrusel de videos de clientas. Va fuera de .story-in a proposito: el texto
   se lee mejor en una columna angosta, pero los videos piden todo el ancho. */
.ugc-rail{margin-top:30px}
/* Un video por pantalla en celular, no tres miniaturas: a 220px el texto que
   viene quemado en el video no se leia y las tarjetas del borde quedaban
   cortadas. El 78vw deja asomar la siguiente, que es lo que le dice a la
   clienta que puede deslizar. El encaje pasa a mandatory para que cada
   deslizada caiga en un video completo y no a medias. */
.ugc-rail .rail{grid-auto-columns:78vw;align-items:start;scroll-snap-type:x mandatory}
/* contain y no cover: con cover, cualquier diferencia de proporcion recorta
   imagen, y estos videos llevan texto pegado a los bordes.
   El height:auto NO es decorativo. Los atributos width/height del <video>
   valen como estilo implicito, asi que sin esto el alto se queda clavado en
   los 1280px del atributo; aspect-ratio solo actua cuando una de las dos
   medidas es automatica, y el video quedaba pintado arriba con media pantalla
   de fondo debajo. El sitio ya tiene img{height:auto} global por lo mismo,
   pero esa regla no cubre a los <video>. */
.ugc-v{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:4px;
  background:var(--ink);display:block;scroll-snap-align:center}

/* 6a · autoridad plata 925 — mismo patrón que .story, columnas invertidas
   (texto en la 1.1fr, foto en la .9fr) para que la imagen quede a la derecha
   y alterne con .story, que la tiene a la izquierda. */
.plata{padding:40px 0;border-top:1px solid var(--line)}
/* El min-width:0 va en la regla base, no solo en escritorio: un hijo de
   rejilla no baja de su ancho mínimo de contenido, y el carrusel mide lo que
   suman sus cinco tarjetas (~814px). Sin esto, en celular la columna desborda
   la pantalla y la página se desliza a la derecha hacia un vacío blanco. */
.plata-in{display:grid;gap:26px}
.plata-in>*{min-width:0}
.plata h2{font-size:clamp(28px,7vw,42px);line-height:1.14;margin:8px 0 14px}
.plata h2 i{font-style:italic;color:var(--plum)}
.plata p{color:#584a5c;margin:0 0 14px;max-width:52ch}
.plata p:last-of-type{margin-bottom:22px}
/* Carrusel de piezas con segunda vista. Usa el mismo .rail de los otros
   carruseles; lo propio de acá es la tarjeta .cv, que cruza las dos fotos. */
.cv{text-decoration:none;color:inherit;display:block}
.cv-ph{position:relative;display:block;border:1px solid var(--line);background:var(--white);
  border-radius:3px;overflow:hidden}
.cv-ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.cv-b{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
@media(hover:hover){.cv:hover .cv-b{opacity:1}}
.cv-n{display:block;margin-top:8px;font-size:12.5px;color:#6d6070;text-align:center;line-height:1.35}
.rail>.cv{scroll-snap-align:start}

/* 7 · prueba social */
.social{padding:34px 0;border-top:1px solid var(--line)}
.case{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--rose);
  border-radius:3px;padding:26px 22px;margin-bottom:16px}
.case blockquote{margin:0 0 16px;font-family:'Cormorant Garamond',serif;
  font-size:clamp(21px,5.4vw,27px);line-height:1.4;font-style:italic;color:#40324a}
.case figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.stars{display:inline-flex;gap:2px;margin-bottom:10px}
.rev-name{font-size:14px;letter-spacing:.04em;font-weight:400}
.rev-city{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave)}
.revs{display:grid;grid-template-columns:1fr;gap:14px}
.rev{margin:0;background:var(--white);border:1px solid var(--line);border-radius:3px;padding:22px 20px}
.rev blockquote{margin:8px 0 14px;font-family:'Cormorant Garamond',serif;font-size:19px;
  line-height:1.45;font-style:italic;color:#40324a}
.rev figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.social-n{margin-top:18px;text-align:center;font-size:13.5px;color:#6d6070}
.social-n b{font-weight:500;color:var(--ink)}

/* 7b · fotos dentro de las reseñas */
.shot-b{display:block;width:100%;padding:0;border:0;background:none;line-height:0;
  border-radius:3px;overflow:hidden;cursor:zoom-in}
.shot-b img{width:100%;object-fit:cover;border-radius:3px;transition:transform .5s ease}
/* El zoom al pasar el cursor va detrás de hover:hover a propósito: en táctil
   no hay cursor y el navegador lo dispararía al tocar, dejando la foto
   agrandada de forma pegajosa. En celular el camino es tocar y abrir el visor. */
@media(hover:hover){.shot-b:hover img{transform:scale(1.06)}}
.ph-tag{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris-suave);
  margin:7px 0 0;display:flex;align-items:center;gap:5px;line-height:1.4}
.ph-tag svg{flex:0 0 auto}

/* Las fotos de clienta van en miniatura. A ancho completo cada reseña se comía
   una pantalla entera en celular; el visor de ampliar (.lb) ya existía, así
   que la miniatura no esconde nada: se toca y se ve grande. */
.case{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:18px;align-items:start}
.case .shot-b img{aspect-ratio:1}
.case-tx{display:flex;flex-direction:column;justify-content:center}
.rev .shot-b img{aspect-ratio:1}
.rev-ph{float:left;width:92px;margin:0 14px 10px 0}
.rev figcaption{clear:both}

/* visor de foto */
.lb{position:fixed;inset:0;z-index:120;background:rgba(42,31,46,.93);
  display:none;align-items:center;justify-content:center;padding:22px}
.lb.is-on{display:flex}
.lb img{max-width:min(92vw,560px);max-height:86vh;width:auto;border-radius:4px}
.lb-x{position:absolute;top:10px;right:14px;background:none;border:0;color:#f4ecf6;
  font-size:27px;line-height:1;padding:8px 12px;cursor:pointer}
@media(prefers-reduced-motion:reduce){
  .shot-b img{transition:none}.shot-b:hover img{transform:none}
}

/* 8 · confianza */
.trust-sec{padding:34px 0;border-top:1px solid var(--line)}
.trust{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  border-radius:3px;background:var(--white)}
.trust div{padding:15px 17px;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:#584a5c;line-height:1.5}
.trust div+div{border-top:1px solid var(--line)}
.trust svg{flex:0 0 auto;margin-top:1px}
.trust b{font-weight:500;color:var(--ink)}

/* Piezas con stock cuya foto todavía no llega. Se venden igual: esconderlas sería
   dejar de vender inventario real, y un <img> roto se ve peor que un marcador. */
.pc-img--nofoto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;background:linear-gradient(160deg,#f8f2f5,#ece2e7)}
.nofoto-m{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,11vw,52px);
  line-height:1;color:var(--plum);opacity:.5}
.nofoto-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9a8ea0}
.pc.is-out .pc-img--nofoto{opacity:.5}
.srow-nof{width:46px;height:46px;border-radius:2px;background:#3a2c40;color:#c3b4c6;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:20px}

/* ——— disponibilidad y tallas ——— */
/* Va en el cuerpo, no encima de la foto. Flotando sobre la imagen chocaba con
   «Ver detalle» en las tarjetas de 2 columnas: a 375 px de ancho las dos
   etiquetas no caben en la misma fila y se montaban una sobre otra. Además la
   disponibilidad es información de compra, y su sitio es junto al precio. */
.pc-stock{display:flex;align-items:center;gap:5px;margin:0 0 8px;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pagar);line-height:1.3}
.pc-stock::before{content:'';width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:0 0 auto}
.pc-stock--0{color:var(--gris)}
.pc.is-out .pc-img img{filter:grayscale(.85);opacity:.5}
.pc.is-out .pc-name{color:var(--gris)}
.pc-add[disabled],.pc-add[aria-disabled="true"]{border-color:var(--line);color:var(--gris-suave);
  background:transparent;cursor:not-allowed}
.pc-add[disabled]:hover,.pc-add[aria-disabled="true"]:hover{background:transparent;color:var(--gris-suave)}
/* Pedir por encargo lo agotado: la venta no se pierde, se mueve al chat */
.pc-encargo{justify-self:start;font-size:12px;letter-spacing:.04em;text-decoration:none;
  color:var(--plum);border-bottom:1px solid currentColor;white-space:nowrap;
  padding:6px 0;min-height:32px;display:inline-flex;align-items:center}

/* selector de tallas dentro de la tarjeta del brazalete */
.tallas{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.tallas[hidden]{display:none}
.tallas-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-suave);
  margin:0 0 7px}
.tallas-row{display:flex;flex-wrap:wrap;gap:6px}
.tbtn{font:400 12px/1 Jost;min-width:44px;min-height:38px;padding:9px 8px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:2px;
  transition:.16s}
.tbtn:hover{border-color:var(--plum)}
.tbtn.is-on{background:var(--plum);border-color:var(--plum);color:#fff}
/* Las tallas sin stock se ven, no se esconden: la clienta sabe que existen */
.tbtn[aria-disabled="true"]{color:#a9a3ae;background:#faf8f9;cursor:not-allowed;
  text-decoration:line-through;text-decoration-color:#cdc6d0}
.tbtn[aria-disabled="true"]:hover{border-color:var(--line)}
.tallas-ayuda{font-size:12px;color:#6d6070;margin:8px 0 0;line-height:1.5}
.tallas-ayuda a{color:var(--plum)}

/* grilla de iniciales */
/* La foto de las letras es apaisada: con aspect-ratio:1 dejaba media pantalla en blanco */
.pc--letras{grid-column:1/-1}
.pc--letras .pc-img{aspect-ratio:16/7}
.letras-ayuda{font-size:12.5px;color:#6d6070;margin:0 0 10px}
.letras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.lbtn{font:400 14px/1 Jost;min-height:42px;cursor:pointer;border:1px solid var(--line);
  background:var(--white);color:var(--ink);border-radius:2px;transition:.16s;text-transform:uppercase}
.lbtn:hover{border-color:var(--plum)}
.lbtn.is-on{background:var(--plum);border-color:var(--plum);color:#fff}
.lbtn[aria-disabled="true"]{color:#b3adb7;background:#faf8f9;cursor:not-allowed}
.lbtn[aria-disabled="true"]:hover{border-color:var(--line)}
.lbtn small{display:block;font-size:12px;letter-spacing:.02em;margin-top:2px;text-transform:none}

.fbtn--disp[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}

/* aviso de que el conteo es referencial, nunca una promesa */
.stock-nota{font-size:12px;color:var(--gris);text-align:center;margin:10px 0 0;line-height:1.5}
.sheet .stock-nota{color:#9b8ca0}

/* ——— calculadora de talla ——— */
.talla-sec{padding:34px 0;border-top:1px solid var(--line);background:var(--white)}
/* Calculadora plegable. Mismo marcador +/− que los desplegables de pagos, en
   vez del triangulo nativo, que se desalinea con un resumen de dos lineas. */
.talla-des{max-width:760px;margin:0 auto;border:1px solid var(--line);
  border-radius:3px;background:var(--bone);padding:16px 18px}
.talla-des>summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:2px 14px}
.talla-des>summary::-webkit-details-marker{display:none}
.talla-des>summary::after{content:'+';grid-column:2;grid-row:1/span 2;
  font-size:22px;line-height:1;color:var(--plum)}
.talla-des[open]>summary::after{content:'–'}
.talla-des-t{grid-column:1;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px}
.talla-des-r{grid-column:1;font-size:13px;color:#6d6070;line-height:1.45}
.talla-des-in{padding-top:18px;margin-top:16px;border-top:1px solid var(--line)}
.calc{display:grid;gap:20px;max-width:760px;margin:0 auto}
.calc-in{background:var(--rose-soft);border:1px solid #e9d3dc;border-radius:3px;padding:18px 20px}
.calc-in label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#6b5c70;margin-bottom:9px}
.calc-campo{display:flex;align-items:center;gap:9px}
.calc-campo input{flex:0 1 140px;font:400 26px/1 'Cormorant Garamond',Georgia,serif;
  padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--white);
  color:var(--ink);min-height:52px}
.calc-campo span{font-size:15px;color:#6b5c70}
.calc-hint{font-size:12px;color:var(--gris);margin:9px 0 0}
.calc-out{display:grid;gap:8px}
.calc-vacia{font-size:14px;color:var(--gris);text-align:center;padding:14px 0;margin:0}
.tfila{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;
  border:1px solid var(--line);border-radius:3px;padding:13px 15px;background:var(--white)}
.tfila-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1;
  grid-row:span 2;align-self:center}
.tfila-v{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.tfila-d{font-size:13.5px;color:#5f5364;line-height:1.5;margin:0}
.tfila-d b{font-weight:500;color:var(--ink)}
.tfila--best{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum);background:#fbf7fc}
.tfila--best .tfila-v{color:var(--plum)}
.tfila--ok .tfila-v{color:#476352}
.tfila--warn .tfila-v{color:#7A5A2E}
.tfila--bad{opacity:.62}
.tfila--bad .tfila-v{color:var(--gris)}
.tfila-ago{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-suave)}
.porque{max-width:640px;margin:28px auto 0;text-align:center;padding-top:22px;
  border-top:1px solid var(--line)}
.porque h3{font-size:21px;margin:0 0 8px}
.porque p{font-size:14.5px;color:#5f5364;margin:0;line-height:1.65}
.talla-link{display:inline-block;margin-top:9px;font-size:12px;color:var(--plum)}

/* ——— ficha de producto ——— */
.fx{position:fixed;inset:0;z-index:130;background:rgba(42,31,46,.93);
  display:flex;align-items:center;justify-content:center;padding:16px;
  overscroll-behavior:contain}
.fx[hidden]{display:none}
/* OJO CON `display:grid` AQUÍ: en móvil NO va, y esto es lo que hacía que la
   ficha pareciera trabada de verdad.
 *
 * Una rejilla con `max-height` dimensiona sus filas automáticas contra el
 * alto disponible, no contra su contenido. Con la ficha a 598 px, la foto
 * (358) y el texto (836) suman 1.194, pero las filas se apretaban hasta
 * sumar 864: cada elemento desbordaba SU fila y se pintaba encima de la
 * siguiente. El efecto en el teléfono es exactamente el reportado —la foto
 * se queda clavada arriba mientras el texto pasa por debajo y aparece
 * cortado—, y no es un fallo de scroll: el scroll funcionaba.
 *
 * En una sola columna no hay nada que rejillar: son dos bloques apilados, y
 * `block` los deja en flujo normal, con el alto real y un único scroll. La
 * rejilla se enciende solo en @media(min-width:700px), que es donde de
 * verdad hace falta para las dos columnas. */
.fx-box{background:var(--bone);border-radius:5px;max-width:760px;width:100%;
  max-height:90dvh;overflow-y:auto;position:relative;display:block;
  /* Sin esto, al llegar al final de la ficha el gesto sigue de largo y
     arrastra lo que haya detrás. */
  overscroll-behavior:contain}
.fx-x{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink);
  font-size:16px;cursor:pointer;line-height:1}
.fx-ph{background:#fff;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:14px;border-radius:5px 5px 0 0}
.fx-ph img{width:100%;height:100%;object-fit:contain}
.fx-ph .nofoto-m{font-size:64px}

/* Galería de la ficha.
 *
 * Varias piezas tienen detalle por delante, por detrás o de lado, y con una
 * sola foto ese detalle no se compra: no se ve. La tira rueda con el dedo
 * —scroll-snap, sin librería— y las miniaturas dan el salto directo en
 * escritorio, donde arrastrar es menos natural.
 *
 * Con una sola foto no se pinta nada de esto: ni tira, ni puntos, ni
 * miniaturas. Una galería de un elemento es ruido que promete algo que no hay. */
.fx-ph{position:relative;overflow:hidden}
/* `pan-x pan-y`: de lado pasa de lámina y hacia arriba o abajo mueve la
   página (o la ficha). Estuvo en `pan-x` solo, que hace justo lo contrario de
   lo que decía este comentario: el celular descarta el desliz vertical que
   empieza sobre la foto. En la página de la pieza la galería ocupa media
   pantalla y la página «no bajaba» (reportado 2026-10-02; lo vigila
   pruebas/regresion.js con toques reales). */
.fx-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  touch-action:pan-x pan-y;overscroll-behavior-x:contain;
  width:100%;height:100%;gap:0;scrollbar-width:none;-ms-overflow-style:none}
.fx-gal::-webkit-scrollbar{display:none}
.fx-gal>figure{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;
  align-items:center;justify-content:center;min-width:0}
.fx-gal img{width:100%;height:100%;object-fit:contain}
.fx-pts{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;
  gap:6px;pointer-events:none}
.fx-pts i{width:6px;height:6px;border-radius:50%;background:rgba(42,31,46,.22);transition:.2s}
.fx-pts i.is-on{background:var(--plum);width:16px;border-radius:3px}
.fx-mini{display:flex;gap:6px;padding:8px 10px 0;justify-content:center;flex-wrap:wrap}
/* Tercera vez que muerde lo mismo: display propio contra [hidden], y gana el
   display. Aquí dejaba las miniaturas del charm anterior puestas sobre una
   pieza que solo tiene una foto. La caza pruebas/regresion.js § 7. */
.fx-mini[hidden]{display:none}
.fx-mini button{width:46px;height:46px;padding:2px;border:1px solid var(--line);border-radius:3px;
  background:#fff;cursor:pointer;flex:0 0 auto}
.fx-mini button.is-on{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.fx-mini img{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.fx-gal{scroll-behavior:auto}}
/* El video de la pieza (grabado sobre el plato negro): llena la lámina, con
   la portada de fondo mientras llega el primer cuadro. */
.fx-gal>figure.fx-vid{padding:0}
.fx-vid video{width:100%;height:100%;object-fit:cover;border-radius:3px;background:#1d1a1f}
/* Su miniatura lleva un ▶ para que se lea como video y no como otra foto. */
.fx-mini button[data-video]{position:relative}
.fx-mini button[data-video]::after{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
/* Todo vertical, sin excepción (pedido del propietario, 2026-10-01): la
   galería de la ficha y la de la página de la pieza van en 4:5. Las fotos de
   estudio, cuadradas y sobre blanco, se ven enteras (contain) sobre el mismo
   blanco; los videos ya vienen grabados y recortados en 4:5. */
.fx-ph{aspect-ratio:4/5}
.pc--pp .pc-img{aspect-ratio:4/5}
.pp-gal .fx-gal{position:absolute;inset:0}
.pp-gal .fx-vid video{border-radius:0}
.pp-gal .pc-mark{z-index:2}
.pp-mini{padding:10px 12px 0}
.fx-tx{padding:20px 22px 24px}
.fx-tx h3{font-size:clamp(24px,6vw,31px);line-height:1.15;margin:6px 0 6px}
.fx-p{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;margin:0 0 4px}
.fx-est{font-size:12px;letter-spacing:.06em;margin:0 0 16px}
.fx-est--ok{color:#476352}
.fx-est--few{color:var(--pagar)}
.fx-est--out{color:var(--gris)}
.fx-specs{margin:0 0 12px;padding:0;border-top:1px solid var(--line)}
.fx-specs div{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.fx-specs dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave);
  margin:0}
.fx-specs dd{margin:0;font-size:14px;color:#4a3d4e;line-height:1.5}
.fx-nota{font-size:12px;color:var(--gris);margin:0 0 18px;line-height:1.5}
.fx-cta{display:grid;gap:9px}
.fx-cta .btn{width:100%}
.pc-img{cursor:pointer}
.pc-name{cursor:pointer}
/* Los estados de hover solo donde hay puntero. En una pantalla táctil el
   :hover se queda pegado después del toque: la tarjeta tocada se quedaba con
   el nombre subrayado y el borde encendido como si siguiera seleccionada. */
@media(hover:hover){
  .pc:hover .pc-name{text-decoration:underline;text-decoration-color:var(--line);
    text-underline-offset:3px}
}

/* ——— buscador ——— */
.buscar{position:relative;margin:0 0 14px}
.buscar input{width:100%;font:400 15px/1 Jost,sans-serif;padding:13px 40px 13px 38px;
  border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);
  min-height:48px;-webkit-appearance:none}
.buscar input::-webkit-search-cancel-button{-webkit-appearance:none}
.buscar svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--gris-suave);pointer-events:none}
.buscar-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:none;color:var(--gris-suave);font-size:15px;cursor:pointer;line-height:1}
.buscar-x[hidden]{display:none}
.sin-res{text-align:center;padding:28px 10px;color:#6d6070;font-size:14.5px}
.sin-res b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;
  font-weight:400;color:var(--ink);margin-bottom:6px}

/* Aviso de dijes sugeridos por un kit (ver mostrarBannerKit en tienda.js) */
.sug-banner{background:var(--rose-soft);border-radius:3px;padding:12px 14px;
  margin:0 0 16px;font-size:13.5px;color:var(--ink);line-height:1.5}
.sug-banner b{font-weight:600;color:var(--plum)}

/* ——— pagos y entrega ——— */
.pe{padding:34px 0;border-top:1px solid var(--line)}
.pe-grid{display:grid;gap:16px}
.pe-caja{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:20px 20px 22px}
.pe-caja h3{font-size:22px;margin:0 0 4px}
.pe-caja p{font-size:13.5px;color:#6d6070;margin:0 0 16px}
/* El marcador propio del navegador se oculta y se pone un +/− alineado a la
   derecha: el triángulo nativo se desalinea con un título de dos líneas. */
.pe-caja>summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:4px 14px}
.pe-caja>summary::-webkit-details-marker{display:none}
.pe-caja>summary::after{content:'+';grid-column:2;grid-row:1/span 2;
  font-size:22px;line-height:1;color:var(--plum)}
.pe-caja[open]>summary::after{content:'–'}
.pe-resumen{grid-column:1;font-size:13.5px;color:#6d6070}
.pe-detalle{padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}
.pe-detalle>p:first-child{margin-top:0}
.pe-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pe-lista li{font-size:12px;letter-spacing:.04em;border:1px solid var(--line);border-radius:2px;
  padding:8px 11px;color:#4a3d4e;background:var(--bone)}
/* Medios de pago con marca.
 *
 * Eran ocho <li> de texto plano, indistinguibles entre sí. Aquí la marca es
 * el dato —quien busca «Nequi» lo busca de un vistazo, no leyendo una lista—,
 * así que cada medio va en su ficha con el icono de su FAMILIA (billetera,
 * banco, tarjeta, cuotas, efectivo), no con su logotipo.
 *
 * Los iconos son genéricos a propósito. Dibujar de memoria una marca
 * registrada da un logotipo «casi» correcto, y un Visa casi correcto en una
 * franja de pago se lee como señal de fraude: justo lo contrario de lo que
 * esta franja existe para transmitir. Cuando estén los archivos oficiales en
 * `assets/pagos/`, cada .mp-ic se cambia por su <img> y el resto no se toca. */
.mp{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  /* Todas las filas al alto de la mayor. Las de tarjeta llevan dos logotipos
     debajo del nombre y crecen; sin esto la rejilla queda escalonada. */
  grid-auto-rows:1fr}
.mp li{display:flex;align-items:center;gap:9px;min-height:46px;
  border:1px solid var(--line);border-radius:3px;padding:9px 11px;background:var(--white)}
.mp-ic{flex:0 0 auto;width:44px;height:28px;display:grid;place-items:center;
  border-radius:3px;background:var(--bone);color:var(--plum)}
.mp-ic svg{display:block}
/* El logotipo se ajusta dentro del hueco sin deformarse ni recortarse: cada
   marca tiene su proporción —Nequi es una tira larga, PSE un círculo— y
   estirarlas para igualarlas es alterar la marca. Se les deja aire para que
   ninguna toque el borde de su caja. */
.mp-ic img{display:block;max-width:38px;max-height:22px;width:auto;height:auto;
  object-fit:contain}
/* Las tarjetas no son una marca sino dos redes, así que los logotipos van en
   el renglón de abajo, donde el texto decía «Visa · Mastercard». */
.mp-redes{display:flex;align-items:center;gap:8px;margin-top:4px}
.mp-redes img{display:block;height:15px;width:auto}
.mp-tx{min-width:0;line-height:1.25}
.mp-n{display:block;font-size:13px;color:var(--ink);letter-spacing:.01em}
.mp-d{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-suave);margin-top:2px}
/* Addi va con su logotipo y no con una ficha de la rejilla de arriba, porque
   no es lo mismo: los de arriba se pagan aquí, este se coordina por chat.
   Mezclarlos prometería un botón que no existe. */
.mp-addi{display:inline-block;height:19px;width:auto;vertical-align:-4px;margin:0 2px}
.pe-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.pe-tabla th,.pe-tabla td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);
  color:#4a3d4e;vertical-align:top}
.pe-tabla th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave);
  font-weight:400}
.pe-tabla td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.pe-pie{font-size:12.5px;color:#6d6070;margin:14px 0 0;line-height:1.55}

/* cabecera de sección centrada · tratamiento editorial de la referencia */
.sec-head--c{max-width:700px;margin:0 auto 26px;text-align:center}
.sec-head--c h2{font-size:clamp(21px,5vw,31px);letter-spacing:.15em;text-transform:uppercase;line-height:1.3}
.sec-head--c p{margin:11px auto 0;max-width:54ch}
.sec-top{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:20px}
.sec-top .sec-head{margin-bottom:0}
.link-all{flex:0 0 auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:1px solid var(--ink);border-radius:2px;
  padding:11px 16px;background:transparent;cursor:pointer;transition:.18s;font-family:inherit}
.link-all:hover{background:var(--ink);color:var(--bone)}

/* compra por categoría */

/* carrusel horizontal de producto */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(154px,1fr);gap:11px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin:0 -16px;padding:2px 16px 8px}
.rail::-webkit-scrollbar{display:none}
.rail>.pc{scroll-snap-align:start}
.rail-btn{display:none;position:absolute;top:calc(50% - 40px);z-index:5;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);
  color:var(--ink);cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(42,31,46,.1);transition:.18s}
.rail-btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.rail-btn[disabled]{opacity:.28;cursor:default}
.rail-btn--prev{left:-8px}
.rail-btn--next{right:-8px}
/* En la sección de Plata 925 el carrusel vive en la columna angosta de una
   rejilla de dos: con las flechas 8px por fuera se montarían sobre el texto
   de al lado, así que ahí van por dentro. */
.plata-rail .rail-btn--prev{left:4px}
.plata-rail .rail-btn--next{right:4px}
.rail-hint{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-suave);
  margin:4px 0 0;text-align:center}

/* franja de garantías */
.guar{background:var(--rose-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guar-in{max-width:var(--w);margin:0 auto;padding:28px 16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px 12px}
.guar-in>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.guar span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b5c70;
  line-height:1.6;max-width:18ch}

/* pie */
.foot{background:var(--ink);color:#cbbfd0;padding:44px 0 26px}
.foot .brand{color:var(--bone)}
.foot .brand em{color:#d7a9bd}
.foot a{color:#e3d6e7}
.foot-in{display:grid;grid-template-columns:1fr;gap:30px}
.foot h3{font-family:Jost,sans-serif;font-size:12px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot p{margin:0 0 9px;font-size:13.5px;line-height:1.6}
.foot-brand p{color:#a495a8;max-width:34ch;margin-top:14px}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:13.5px}
.foot-list a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.foot-list a:hover{border-color:#d7a9bd}
.foot-line{display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;font-size:13.5px;line-height:1.55}
.foot-line svg{flex:0 0 auto;margin-top:3px;opacity:.75}
.foot-bot{max-width:var(--w);margin:26px auto 0;padding:18px 16px 0;
  border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;gap:8px 18px;
  justify-content:space-between;font-size:12px;color:#bdb1c0;letter-spacing:.04em}
.foot-ig{display:inline-flex;align-items:center;gap:2px;text-decoration:none}

/* barra fija + hoja */
/* Botón flotante de WhatsApp. z-index por debajo del dock (80) y del visor de
   fotos (120) a propósito: si alguna vez se solapan, el que manda es el que
   cobra. El bottom se calcula sobre --dock para que suba si el dock crece. */
/* Solo el icono, sin texto: el banner del agente, mas arriba, ya explica para
   que sirve. Al no haber texto visible, el aria-label del enlace deja de ser
   un extra y pasa a ser la unica forma de saber que hace este boton con un
   lector de pantalla. */
/* .wa-float (botón flotante de WhatsApp) se retiró el 2026-10-02. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--bone);
  border-top:1px solid rgba(255,255,255,.14);height:var(--dock);
  display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer}
.dock-info{min-width:0;flex:1 1 auto}
.dock-n{font-size:12px;color:#a495a8;letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dock-p{font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.05}
/* nowrap y sin encogerse: a 375 px «Ver detalle» se partía en dos renglones y
   descuadraba la barra entera */
.dock-open{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:5px;
  font-size:12px;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;color:#c3b4c6;background:none;border:0;
  cursor:pointer;padding:8px 2px}
.dock-open svg{transition:transform .25s}
.dock .btn--wa{padding:11px 14px;font-size:12px;letter-spacing:.07em}
/* Barra de progreso hacia el envío gratis, pegada al borde superior del dock.
   Vive aquí y no solo dentro de la hoja porque el umbral solo servía a quien
   ya había abierto el detalle: el resto armaba sin saber que le faltaban
   $20.000 para no pagar envío. 3 px no le quitan altura a nada. */
.dock-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.12)}
.dock-bar i{display:block;height:100%;width:0;background:var(--rose,#B4657F);
  transition:width .35s ease}
.dock-bar.is-ok i{background:#3E9E7A}

/* Aviso de venta cruzada. Sale al fijar el brazalete y se va sola en cuanto
   llega a 3 charms, que es donde se activa el 30%. Nunca tapa el dock ni
   convive con la hoja abierta: ahí el mismo dato ya está en #desc-nota. */
.xs{position:fixed;left:12px;right:12px;bottom:calc(var(--dock) + 10px);z-index:79;
  background:var(--bone,#FBF7F4);border:1px solid rgba(92,61,99,.18);
  border-radius:10px;box-shadow:0 10px 30px rgba(20,12,24,.18);
  padding:12px 12px 12px 14px;display:flex;align-items:center;gap:10px;
  animation:xs-in .3s ease both}
@keyframes xs-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.xs{animation:none}.dock-bar i{transition:none}}
/* display:flex le gana al [hidden] del navegador y dejaba el aviso visible
   siempre — vacío antes de elegir brazalete, y sin irse al llegar a 3 charms.
   Mismo empate que ya resuelven .pc[hidden] y .tallas[hidden] más arriba. */
.xs[hidden]{display:none}
.xs-tx{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.45;color:#3B2A40}
.xs-tx b{color:#5C3D63}
.xs-go{flex:0 0 auto;padding:10px 13px;font-size:12px;letter-spacing:.06em;
  white-space:nowrap}
.xs-x{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--gris-suave);
  font-size:13px;line-height:1;padding:6px 2px}
body.sheet-open .xs{display:none}
@media(min-width:900px){.xs{left:auto;right:24px;width:380px}}
.veil{position:fixed;inset:0;background:rgba(20,12,24,.5);z-index:85;opacity:0;
  pointer-events:none;transition:opacity .25s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#231a27;color:var(--bone);
  border-radius:14px 14px 0 0;max-height:90dvh;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.32,.72,.29,1),visibility .3s;
  visibility:hidden;box-shadow:0 -18px 50px rgba(20,12,24,.45)}
body.sheet-open .veil{opacity:1;pointer-events:auto}
body.sheet-open .sheet{transform:none;visibility:visible}
/* El fondo se FIJA, no solo se le esconde el scroll: `overflow:hidden` a
   secas no bloquea en Safari de iOS y la ficha se siente trabada. `top` lo
   pone tienda.js con la posición guardada, y la devuelve al cerrar. */
body.sheet-open{overflow:hidden;position:fixed;width:100%;left:0;right:0}
.sheet-head{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;flex:0 0 auto}
.sheet-head b{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:400;letter-spacing:.03em}
.sheet-x{margin-left:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);
  border-radius:50%;background:none;color:var(--bone);font-size:17px;cursor:pointer;line-height:1}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);
  margin:9px auto 0;flex:0 0 auto}
/* La zona que rueda: piezas, forma de pago y desglose. Se le da un
   mínimo para que siempre se vean tres piezas aunque el resto crezca. */
.sheet-scroll{overflow-y:auto;flex:1 1 auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sheet-scroll::-webkit-scrollbar{width:4px}
.sheet-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:2px}
.sheet-scroll::-webkit-scrollbar-track{background:transparent}
.sheet-body{padding:4px 18px 0;min-height:96px}
.sheet-extras{padding:0 18px 8px}
/* «Te puede interesar», dentro de la hoja.
 *
 * Va entre las piezas y la forma de pago, que es donde encaja en la frase que
 * la clienta está leyendo: esto llevas → esto le pega → así lo pagas. Más
 * abajo no puede ir: pegado al botón de pagar, elegir pieza es
 * navegar, y navegar al pagar se come checkouts terminados.
 *
 * La tarjeta entera es el botón. En una hoja que se usa con el pulgar, un
 * botón de 11 px dentro de una tarjeta de 96 px es un blanco que se falla;
 * así el blanco es la tarjeta. El «+» de la esquina es la señal de que se
 * toca, y al tocarla se queda en verde en vez de desaparecer. */
.sug{padding:14px 18px 2px;margin-top:4px;border-top:1px solid rgba(255,255,255,.09)}
.sug-h{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0 0 8px}
.sug-h b{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:400;letter-spacing:.03em}
.sug-h span{font-size:12px;color:var(--silver)}
/* Sin barra de desplazamiento visible: en una hoja pequeña roba altura y la
   tarjeta cortada del borde ya dice que hay más a la derecha. */
.sug-tira{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sug-tira::-webkit-scrollbar{display:none}
.sug-c{flex:0 0 96px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.14);
  border-radius:3px;background:rgba(255,255,255,.04);padding:7px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;text-align:left;color:var(--bone);
  font:inherit;transition:border-color .16s,background .16s}
@media(hover:hover){.sug-c:hover{border-color:var(--rose);background:rgba(180,101,127,.16)}}
.sug-ph{position:relative;display:block}
.mono{display:grid;place-items:center;background:#fff;border-radius:2px;color:var(--plum);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1}
.sug-c .mono{height:64px}
.busq-r .mono{width:44px;height:44px;flex:0 0 auto}
/* La foto va con alto fijo en vez de cuadrada: dentro de la hoja cada píxel de
   alto se lo quita al desglose y a la forma de pago, que quedan debajo. Con
   object-fit:contain la pieza se sigue viendo entera, solo con algo más de
   blanco a los lados. */
.sug-c img{width:100%;height:64px;object-fit:contain;background:#fff;
  border-radius:2px;display:block}
.sug-mas{position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;border-radius:50%;
  background:var(--rose);color:#fff;font-size:14px;line-height:21px;text-align:center}
/* Dos líneas como tope: hay nombres de tres —«Escudo Capitán América»— y una
   sola tarjeta más alta estira las seis. */
.sug-n{font-size:12px;line-height:1.3;height:2.6em;overflow:hidden;color:#d9cede;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Empujado al fondo: los nombres van de una a tres líneas y sin esto cada
   precio quedaba a una altura distinta, que es lo que hace que una tira de
   tarjetas se lea como una lista desordenada. */
.sug-p{font-size:12px;margin-top:auto}
.sug-c.is-puesto{border-color:#7fc7ae;background:rgba(127,199,174,.14);cursor:default}
.sug-c.is-puesto .sug-mas{background:#7fc7ae}
.sug-c.is-puesto .sug-p{color:#7fc7ae}
.srow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.srow img{width:46px;height:46px;border-radius:2px;background:#fff;object-fit:contain;flex:0 0 auto}
.srow-n{font-size:14px;line-height:1.3;min-width:0}
.srow-n small{display:block;font-size:12px;color:#a495a8;letter-spacing:.05em;text-transform:uppercase}
.srow-p{margin-left:auto;font-size:13.5px;white-space:nowrap}
/* La pieza gratis de «lleva 4, paga 3»: precio tachado y GRATIS resaltado. */
.srow--gratis .srow-p{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.srow--gratis .srow-p s{font-size:12px;color:#a495a8}
.srow--gratis .srow-p b{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#1b3b30;
  background:#7fc7ae;border-radius:3px;padding:2px 7px;margin-top:2px}
.srow-x{width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);
  color:#d9cede;font-size:14px;cursor:pointer;flex:0 0 auto;line-height:1}
.srow-x:hover{background:var(--rose);color:#fff}
.s-empty{padding:22px 0;color:var(--gris);font-size:14px;text-align:center}
.sheet-tot{position:relative;flex:0 0 auto;padding:12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.14);background:#231a27}
/* Difumina el corte de arriba para que se lea que ahí sigue habiendo contenido
   y no que la lista se acaba justo donde empieza el total. */
.sheet-tot::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:22px;
  pointer-events:none;background:linear-gradient(to top,rgba(35,26,39,.92),rgba(35,26,39,0))}
.tot-row{display:flex;justify-content:space-between;font-size:13.5px;color:#c3b4c6;margin-bottom:5px}
.tot-row.save{color:#e39aae}
/* display:flex le ganaba al [hidden]: con solo el brazalete salía
   «Descuento promo − $0». Mismo empate que .pc[hidden] y .xs[hidden]. */
.tot-row[hidden]{display:none}
.ship-note{font-size:12px;color:#a495a8;margin:2px 0 0;line-height:1.45}
/* El aviso del siguiente tramo de descuento. Mismo tono discreto que el del
   envío: es información, no un empujón. Dice una cifra comprobable —lo que
   baja el descuento sobre lo que YA lleva— y nunca insinúa que el total baje,
   porque el charm que añada lo paga igual. */
.desc-nota{font-size:12px;color:#c9a5b6;margin:5px 0 0;line-height:1.45}
.desc-nota b{color:var(--bone);font-weight:400}
/* Escalera del descuento en barra, sobre el fondo oscuro de la hoja: los
   mismos tonos rosa y verde de las notas de Addi y del regalo. */
.hoja-dto-caja{margin:14px 18px 6px;padding:12px 14px 13px;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;background:rgba(255,255,255,.04)}
.hoja-dto-caja[hidden]{display:none}
.hoja-dto-t{margin:0 0 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.hoja-dto-caja .desc-nota{margin:10px 0 0;font-size:12.5px}
.hoja-dto{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:4px;list-style:none;margin:0;padding:0}
.hoja-dto[hidden]{display:none}
.hoja-dto li{font-size:12px;line-height:1.3;color:var(--silver);text-align:center;white-space:nowrap}
.hoja-dto li::before{content:"";display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.13);
  margin-bottom:4px;transition:background .3s ease}
.hoja-dto li.is-on::before{background:#e39aae}
.hoja-dto li.is-free{color:#f0c6d3;font-weight:600;letter-spacing:.06em}
.hoja-dto.is-max li.is-on::before{background:#7fc7ae}
.desc-nota.is-max,.desc-nota.is-max b{color:#7fc7ae}
@media(prefers-reduced-motion:reduce){.hoja-dto li::before{transition:none}}
.ship-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.13);margin:7px 0 2px;overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--rose);width:0;transition:width .3s}
.ship-ok{color:#7fc7ae}
/* Alcanzó el monto pero con contraentrega, que no lleva envío gratis. */
.ship-casi{color:#e0c48a}
.ship-cta{background:none;border:0;padding:0;font:inherit;color:#f0d9a8;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
@media(hover:hover){.ship-cta:hover{color:#fff}}
.tot-big{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 12px}
.tot-big span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.tot-big b{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:400}
.sheet-tot .btn--wa,.sheet-tot .btn--pagar{width:100%}
/* Sin salida a WhatsApp aquí a propósito: a esta altura la clienta ya decidió
   comprar, y una opción de menor compromiso justo al lado del botón de pagar
   se come checkouts terminados en vez de sumar pedidos. WhatsApp sigue en el
   resto de la página, y en el checkout aparece si algo falla — que es donde
   de verdad rescata una venta. */
.sheet-note{font-size:12px;color:var(--silver);text-align:center;margin:9px 0 0;line-height:1.5}
/* Los dos avisos que sí queremos que se lean usan los colores que esta hoja ya
   tiene asignados en el carrito oscuro: el menta es el de «Envío GRATIS»
   (.pb-gratis) y el rosa el de «Descuento promo» (.tot-row.save). Antes el
   enlace de Addi iba en `--plum` (#5C3D63) sobre el fondo #231a27 del carrito:
   1.6:1 de contraste, es decir, ilegible. */
.sheet-note--regalo{color:#7fc7ae}
.sheet-note--addi{color:#e39aae}
.sheet-note a{color:inherit;font-weight:500;text-decoration:underline;
  text-underline-offset:2px}
.sheet-info{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.09);
  display:grid;gap:10px}
.sheet-info .sheet-note{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:0}
.sheet-info svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Justo debajo del botón de pagar, que es donde aparece la duda de «¿esto es
   seguro?». Dice quién cobra —un nombre que la clienta reconoce— y no promete
   nada que la tienda no pueda sostener. */
.sheet-seguro{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--silver);margin:10px 0 0}
.sheet-seguro svg{flex:0 0 auto;opacity:.8}
.pago{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.pbtn{font:400 12.5px/1.3 Jost;text-align:left;padding:10px 12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:#c3b4c6;
  border-radius:2px;transition:.16s;min-height:52px}
@media(hover:hover){.pbtn:hover{border-color:rgba(255,255,255,.45)}}
.pbtn small{display:block;font-size:12px;color:var(--silver);margin-top:3px}
.pbtn.is-on{background:rgba(180,101,127,.18);border-color:var(--rose);color:var(--bone)}
.pbtn.is-on small{color:#e39aae}
/* El envío gratis del anticipado se ve aunque esa opción no esté elegida:
   es justo cuando hay que verlo, para que la comparación tenga sentido. */
.pbtn small.pb-gratis,.pbtn.is-on small.pb-gratis{color:#7fc7ae;font-weight:500;
  letter-spacing:.04em}

/* La navegación completa necesita ~800px con la lupa y el ☰ al lado: desde
   700px empujaba el ☰ 27px fuera de la pantalla y la página entera se
   deslizaba en tableta. Por debajo de esto el ☰ ya lleva a las secciones. */
@media(min-width:960px){
  .tnav{display:flex}
  /* Con la navegación a la vista es ella la que empuja a la derecha; si la
     lupa conservara su propio margen automático, el espacio libre se
     repartiría entre las dos y el menú quedaría flotando en el medio. */
  .top-lupa{margin-left:0}
}

/* escritorio */
@media(min-width:700px){
  .wrap{padding:0 24px}
  .top-in{padding:0 24px;height:60px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
  .hbanner{height:78dvh}
  .hbanner-copy{padding:48px 16px 0}
  .bens-in{grid-template-columns:repeat(4,1fr);gap:0 26px;padding:6px 24px}
  .ben+.ben{border-top:0}
  .plata-in{grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
  /* El .rail sangra 16px a cada lado para llegar al borde de la pantalla en
     celular. Dentro de una columna de escritorio eso se sale del contenedor,
     así que ahí se cancela. */
  .plata-rail .rail{margin:0;padding-left:0;padding-right:0}
  /* En escritorio caben tres videos completos sin encogerlos: el 78vw de
     celular aqui daria un video gigante y ridiculo. */
  .ugc-rail .rail{grid-auto-columns:300px;justify-content:center}
  .revs{grid-template-columns:repeat(2,1fr);gap:20px}
  .case{grid-template-columns:150px 1fr;gap:24px;padding:22px;align-items:center}
  .trust{grid-template-columns:repeat(3,1fr)}
  .trust div+div{border-top:0;border-left:1px solid var(--line)}
  .trust div:nth-child(n+4){border-top:1px solid var(--line)}
  .trust div:nth-child(4){border-left:0}
  .sec,.social,.trust-sec{padding:46px 0}
  .promo{padding-top:46px;padding-bottom:46px}
  .story,.plata{padding:52px 0}
  .sec-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}
  .talla-sec,.pe{padding:46px 0}
  .calc{grid-template-columns:300px 1fr;gap:26px;align-items:start;max-width:none}
  .fx-box{display:grid;grid-template-columns:1fr 1fr;max-height:82dvh}
  /* En dos columnas, la foto y sus miniaturas van juntas a la izquierda y el
     texto ocupa la derecha entero. Sin esto, el bloque de miniaturas se cuela
     en la segunda columna y empuja la descripción a la fila de abajo. */
  .fx-ph{aspect-ratio:auto;border-radius:5px 0 0 5px;min-height:340px;grid-column:1;grid-row:1}
  .fx-mini{grid-column:1;grid-row:2;padding-bottom:12px}
  .fx-tx{grid-column:2;grid-row:1/span 2}
  .fx-tx{padding:26px 28px 28px}
  .fx-cta{grid-template-columns:1fr 1fr}
  .pe-grid{grid-template-columns:1fr 1fr;gap:20px}
  .pe-caja{padding:26px 26px 28px}
  .pc--letras{flex-direction:row}
  .pc--letras .pc-img{flex:0 0 210px;aspect-ratio:auto;border-radius:3px 0 0 3px}
  .pc--letras .pc-body{flex:1;padding:18px 20px}
  .letras-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}
  .guar-in{grid-template-columns:repeat(4,1fr);padding:34px 24px}
  .rail{grid-auto-columns:minmax(200px,1fr);gap:16px;margin:0;padding:2px 0 10px}
  .rail-btn{display:flex}
  .rail-hint{display:none}
  .foot-in{grid-template-columns:1.3fr 1fr 1fr;gap:44px}
  .foot-bot{padding:18px 24px 0}
  .sheet{left:auto;right:24px;bottom:calc(var(--dock) + 12px);width:380px;border-radius:8px;
    max-height:min(78dvh,640px)}
  .dock{padding:0 24px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .hbanner-slide{animation:none;opacity:0}
  .hbanner-slide:first-child{opacity:1}
}

/* ═══ PÁGINAS DE COLECCIÓN ═══════════════════════════════════════════════
   Las páginas a las que apunta la pauta (coleccion-*.html, generadas por
   herramientas/gen_colecciones.py). Viven aquí y no en una hoja propia porque
   comparten variables, tipografía y componentes con la portada: una segunda
   hoja sería una segunda paleta que se desincroniza.

   Quien llega aquí viene de un anuncio y no conoce la tienda, así que el orden
   es portada → precio → piezas, sin nada que obligue a desplazarse antes de
   entender qué se vende y cuánto cuesta. */

/* Solo arriba y abajo: el lateral es el de .wrap. Un `padding` abreviado lo
   pisaba y el texto de las colecciones y de kits.html iba pegado al borde. */
.col-hero{padding-top:30px;padding-bottom:26px;text-align:center}
.col-hero h1{font-size:clamp(30px,8vw,52px);line-height:1.08;margin:10px 0 14px}
.col-entrada{margin:0 auto;max-width:54ch;color:#6d6070;font-size:15.5px;line-height:1.6}
.col-cta{display:flex;flex-direction:column;gap:10px;margin:22px auto 0;max-width:320px}
/* El envío gratis es de las pocas cosas que deciden una compra de tráfico
   frío, así que va sobre el pliegue y no enterrado en «Pagos y envío». */
.col-envio{margin:16px 0 0;font-size:13.5px;color:var(--plum)}

.col-combo{padding:28px 0;border-top:1px solid var(--line)}
.col-combo h2{font-size:clamp(24px,6vw,36px);line-height:1.15;margin:0 0 10px;text-align:center}
.col-sub{margin:0 auto 20px;max-width:56ch;color:#6d6070;font-size:14.5px;
  line-height:1.6;text-align:center}

/* La escalera de precio. Es el argumento de venta más fuerte que la tienda
   tiene programado —con brazalete, el tercer charm baja a la mitad— y hasta
   ahora no aparecía en ningún sitio donde una clienta pudiera verlo. */
.col-escalera{display:grid;gap:10px;margin:0 0 16px}
.col-paso{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:14px 16px}
.col-paso b{font-size:19px;font-weight:400;white-space:nowrap}
.col-paso-n{color:#6d6070;font-size:14px}
/* El tramo que se quiere vender, marcado como en la escalera de la portada. */
.col-paso--best{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose);
  flex-wrap:wrap}
.col-paso--best b{color:var(--plum)}
.col-paso-ahorro{flex-basis:100%;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pagar)}
.col-nota{margin:0;color:var(--gris-suave);font-size:12.5px;line-height:1.55;text-align:center}

/* Una sola pieza en la rejilla: sin esto se estira a todo el ancho de la
   columna y queda una tarjeta gigante al lado de un vacío. */
.grid--base{grid-template-columns:minmax(0,300px)}

.col-resto{padding:30px 0;border-top:1px solid var(--line);text-align:center}
.col-resto h2{font-size:clamp(21px,5vw,30px);margin:0 0 10px}

@media(min-width:700px){
  .col-hero{padding:48px 0 40px}
  .col-cta{flex-direction:row;justify-content:center;max-width:none}
  .col-cta .btn{min-width:210px}
  .col-escalera{grid-template-columns:repeat(3,1fr);gap:12px}
  .col-paso{flex-direction:column;align-items:center;text-align:center;gap:6px;
    padding:20px 14px}
  .col-paso b{font-size:22px}
  .col-paso-ahorro{flex-basis:auto}
}

/* La foto de portada de una coleccion. Va antes que el titulo a proposito: es
   lo que confirma que la pagina es la del anuncio en el que acaban de tocar. */
.col-foto{width:100%;height:auto;border-radius:3px;margin:0 0 18px;display:block}

/* ═══ PÁGINA DE KITS ══════════════════════════════════════════════════════
   Kits: combinaciones ya armadas. No tienen precio propio —lo calcula el
   mismo código que cobra— y lo que enseñan es la escalera que la tienda ya
   aplica sola, kit por kit. El escalón de 3 dijes va marcado porque es donde
   entra el 30% del brazalete además de la escala, y es a donde apunta la
   pauta. */

.kits-esc{padding:26px 0;border-top:1px solid var(--line);text-align:center}
.kits-esc h2{font-size:clamp(22px,5.5vw,32px);margin:0 0 10px}
.kits-esc-fila{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}
.kits-esc-p{background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.kits-esc-p span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-suave)}
.kits-esc-p b{font-size:17px;font-weight:400;color:var(--ink)}
.kits-esc-p i{display:block;font-style:normal;font-size:12px;color:var(--pagar)}
.kits-esc-p--best{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}

.kits{padding:28px 0;display:grid;gap:22px}
.kit{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:20px 16px}
.kit-head h3{font-size:clamp(21px,5vw,28px);line-height:1.15;margin:7px 0 6px}
.kit-lema{margin:0 0 8px;color:var(--plum);font-size:15px}
.kit-entrada{margin:0;color:#6d6070;font-size:14px;line-height:1.6}

/* Las piezas de verdad, cada una con su foto del catálogo. Nada de montajes:
   una imagen compuesta que no es el producto es una devolución esperando. */
.kit-piezas{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;align-items:center}
.kit-piezas img{width:66px;height:66px;object-fit:contain;background:var(--bone);
  border:1px solid var(--line);border-radius:3px}

.kit-tercer{margin:0 0 14px;font-size:14px;color:var(--ink);
  background:var(--rose-soft);border-radius:3px;padding:10px 12px}

.kit-escalera{display:grid;gap:8px}
.kit-paso{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:3px;
  padding:12px 14px;transition:border-color .15s,background .15s}
.kit-paso:hover{border-color:var(--plum);background:var(--bone)}
.kit-paso-n{font-size:14px}
.kit-paso-p{text-align:right;white-space:nowrap}
.kit-paso-p b{font-size:18px;font-weight:400}
.kit-paso-p s{margin-left:7px;color:var(--gris-suave);font-size:13px}
.kit-paso-d{grid-column:1/-1;font-size:12px;letter-spacing:.06em;color:var(--gris-suave)}
.kit-paso--best{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.kit-paso--best .kit-paso-p b{color:var(--plum)}
.kit-paso--best .kit-paso-d{color:var(--pagar);text-transform:uppercase;letter-spacing:.1em}
/* Una pieza del paso ya no tiene stock: no se puede prometer un carrito que
   el checkout va a rechazar, así que el paso pasa a pedir por WhatsApp. */
.kit-paso--agotado{border-color:var(--line);background:var(--bone)}
.kit-paso--agotado .kit-paso-p b{color:var(--gris);font-size:15px}
.kit-paso--agotado .kit-paso-p s{display:none}
.kit-paso--agotado .kit-paso-d{color:var(--gris);text-transform:none;letter-spacing:normal}

.kit-nota{margin:14px 0 0;font-size:12.5px;color:var(--gris-suave)}

@media(min-width:700px){
  .kits-esc-fila{grid-template-columns:repeat(4,1fr);gap:12px}
  .kits{grid-template-columns:repeat(2,1fr);gap:24px}
  .kit{padding:26px 22px}
  .kit-piezas img{width:76px;height:76px}
}


/* ── Página de producto (producto-<id>.html, generada por
   herramientas/gen_productos.py). La pieza es su tarjeta de la portada con la
   clase pc--pp: mismo botón, mismas tallas, mismas marcas de agotado. ── */
.migas{padding-top:14px;font-size:12px;letter-spacing:.04em;color:var(--gris-suave)}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.migas li+li::before{content:'›';margin-right:6px}
.migas a{color:#6d6070;text-decoration:none;border-bottom:1px solid transparent}
.migas a:hover{border-color:var(--rose)}
.migas [aria-current]{color:var(--ink)}
/* Solo arriba y abajo: el relleno lateral es el de .wrap, y un `padding`
   abreviado lo pisaba y dejaba la pieza pegada al borde de la pantalla. */
.pp{padding-top:12px;padding-bottom:30px}
/* En la página de un brazalete el panel de tallas ya sale abierto: «Elegir»
   sobraba, y tocarlo lo cerraba. La talla elegida la marca su propio botón. */
.pc--pp:has(.tallas) .pc-add[data-base]{display:none}
.pp-in{display:grid;gap:20px}
.pc--pp .pc-body{padding:16px 16px 18px}
.pc--pp .pc-name{font-size:clamp(28px,7.5vw,40px);line-height:1.08;margin:0 0 6px}
.pc--pp .pc-meta{font-size:12px;margin:0 0 14px}
.pc--pp .pc-price{font-size:22px}
.pc--pp .pc-add{min-height:46px;font-size:12px}
.pc--pp .pc-mark{font-size:12px;padding:4px 8px;top:10px;left:10px}
.pp-info .fx-est{margin:0 0 14px}
.pp-info .fx-est:empty{display:none}
.pp-envio{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--plum)}
@media(min-width:700px){
  .pp{padding-top:18px;padding-bottom:44px}
  /* La pieza a 440px como mucho: más ancha, la foto cuadrada empujaba nombre,
     precio y botón por debajo de la pantalla en escritorio. 440 es además el
     tamaño real de las fotos del catálogo: más grande, se estiraban. */
  .pp-in{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;align-items:start}
  .pp-info{padding-top:8px}
}

/* El nombre de la tarjeta enlaza a su página de producto, pero se ve igual que
   antes: el clic normal abre la ficha (tienda.js). */
.pc-name a{color:inherit;text-decoration:none}
.fx-pag{display:block;margin:14px 0 0;font-size:12.5px;letter-spacing:.04em;color:var(--plum);
  text-align:center;text-decoration:underline;text-underline-offset:3px}
.fx-pag[hidden]{display:none}
.letras-ver{display:inline-block;margin:8px 0 0;font-size:12px;color:var(--plum);
  text-decoration:underline;text-underline-offset:3px}
/* Las 27 iniciales, en la página de cada una. */
.pp-letras{padding-bottom:26px}
.pp-letras ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pp-letras a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);
  text-decoration:none;font-size:14px}
.pp-letras a[aria-current]{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum);color:var(--plum)}
@media(hover:hover){.pp-letras a:hover{border-color:var(--silver)}}
/* Foto de portada de colección en vertical: a lo ancho mediría más de una pantalla. */
.col-foto--vertical{max-height:460px;object-fit:cover;object-position:center 55%}

/* ── Suscripción por correo (ventana que abre tienda.js: abrirSusc) ── */
.susc{position:fixed;inset:0;z-index:90;background:rgba(42,31,46,.55);display:flex;
  align-items:flex-end;justify-content:center;padding:0}
.susc-box{position:relative;width:100%;max-width:440px;background:var(--bone);
  border-radius:12px 12px 0 0;padding:26px 20px 22px;box-shadow:0 -10px 40px rgba(42,31,46,.25)}
.susc-box h2{font-size:28px;line-height:1.12;margin:8px 0 8px;font-weight:400}
.susc-sub{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:#5a4d5e}
.susc-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;background:none;
  font-size:18px;color:var(--ink);cursor:pointer}
.susc-f{display:grid;gap:12px}
.susc-f input[type=email]{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);
  border-radius:2px;background:var(--white);color:var(--ink)}
.susc-trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.susc-ok{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#5a4d5e}
.susc-ok input{margin:3px 0 0;width:17px;height:17px;flex:0 0 auto}
.susc-ok a{color:var(--plum)}
.susc-f .btn{width:100%}
.susc-msg{margin:0;min-height:1em;font-size:13px;color:var(--pagar)}
.susc-listo{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
@media(min-width:700px){
  .susc{align-items:center;padding:16px}
  .susc-box{border-radius:6px;padding:30px 28px 26px}
}

/* Estrellas de reseñas, un solo color en todo el sitio (token --estrella). */
.stars svg,.estrellas svg{fill:var(--estrella)}

/* ── Ficha de producto que vende más (automatizaciones/tienda/ENCARGO-FICHA.md) ── */
/* El «Agregar» de la tarjeta queda repetido con el del bloque de compra. */
.pc--pp .pc-foot .pc-add[data-add]{display:none}
.pp-estrellas{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px;
  color:#5a4d5e;text-decoration:none}
.pp-estrellas[hidden],.pp-vendidas[hidden],.pp-agotado[hidden],.pp-compra[hidden]{display:none}
.estrellas svg.est-off{fill:#E4DDE0}
.pp-vendidas{margin:-6px 0 14px;font-size:13px;color:var(--plum)}
.pq{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px}
.pq-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-suave);margin:0 0 4px;padding:0}
.pq-o{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:12px 14px;
  background:var(--white);border:1px solid var(--line);border-radius:4px;cursor:pointer}
.pq--b .pq-o{grid-template-columns:1fr auto;cursor:default}
.pq-o input{margin:0;width:18px;height:18px;accent-color:var(--plum)}
.pq-o:has(input:checked){border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.pq-n{font-size:14.5px}
.pq-p{text-align:right;white-space:nowrap}
.pq-p s{color:var(--gris-suave);font-size:12.5px;margin-right:4px}
.pq-p b{font-weight:500;font-size:15.5px}
.pq-a{grid-column:1/-1;justify-self:end;font-size:12px;color:#1F7A5C;font-weight:500}
.pq--b .pq-a{grid-row:2;grid-column:2}
.pq-o--best{border-color:var(--rose)}
.pq-o--best .pq-n{font-weight:500;color:var(--pagar)}
.pq-nota{margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--gris)}
.pq-mas{margin-top:8px;padding:14px 0 6px;border-top:1px solid var(--line);display:grid;gap:10px}
.pq-mas[hidden]{display:none}
.pq-mas--b{margin-top:10px}
.pq-mas-t{margin:0;font-size:14px}
/* Compra: botones apilados a lo ancho, con aire entre cada grupo (pedido del
   propietario, 2026-09-26: la zona se veía «arrejuntada»). */
.pp-cta{display:grid;gap:10px;margin:18px 0 0}
.pp-cta .btn{width:100%;padding:16px 12px}
.pp-nota-t{margin:8px 0 0;font-size:12.5px;color:var(--gris)}
.pp-pago{margin:18px 0 0;padding:14px 14px 12px;border:1px solid var(--line);border-radius:4px;background:var(--white);
  text-align:center}
.pp-addi{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5a4d5e}
.pp-addi a,.pp-susc a{color:var(--plum)}
.pp-susc{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 14px;background:var(--rose-soft);
  border-radius:4px;font-size:13.5px;line-height:1.45;color:#4a3d4e}
.pp-susc svg{flex:0 0 auto;color:var(--pagar)}
.pp-agotado{margin:0 0 14px;padding:12px 14px;background:var(--rose-soft);border-radius:4px;font-size:14px}
.pp-agotado a{color:var(--plum)}
.pp-bens{list-style:none;margin:24px 0 8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pp-bens li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.4;color:#4a3d4e}
.pp-bens svg{flex:0 0 auto;color:var(--plum);margin-top:1px}
.pp-acc{border-bottom:1px solid var(--line)}
.pp-acc summary{list-style:none;cursor:pointer;padding:14px 0;font-size:14.5px;display:flex;justify-content:space-between}
.pp-acc summary::-webkit-details-marker{display:none}
.pp-acc summary::after{content:'+';color:var(--gris-suave);font-size:18px;line-height:1}
.pp-acc[open] summary::after{content:'−'}
.pp-acc-in{padding:0 0 14px;font-size:14px;line-height:1.6;color:#4a3d4e}
.pp-acc-in p{margin:0 0 8px}
.pp-acc-in .fx-specs{margin:0}
.tallas.is-pide{animation:pide 1.2s ease}
@keyframes pide{0%,100%{background:transparent}30%{background:var(--rose-soft)}}
/* Reseñas de la pieza */
.rp-resumen{display:flex;align-items:center;gap:8px;margin:6px 0 14px;font-size:14px;color:#5a4d5e}
.rp-resumen:empty{display:none}
.rp-lista{display:grid;gap:12px;margin:0 0 16px}
.rp-vacio{margin:0;font-size:14px;color:var(--gris)}
.rp-it{margin:0;padding:14px;background:var(--white);border:1px solid var(--line);border-radius:3px}
.rp-it blockquote{margin:8px 0;font-size:15px;line-height:1.55}
.rp-it figcaption{font-size:12.5px;color:var(--gris)}
.rp-ok{color:#1F7A5C}
.rp-fotos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.rp-foto{padding:0;border:0;background:none;line-height:0;cursor:zoom-in;border-radius:3px}
.rp-fotos img{display:block;width:76px;height:76px;object-fit:cover;border-radius:3px;background:var(--rose-soft)}
.rp-video{display:block;width:100%;max-width:300px;max-height:360px;margin:0 0 8px;border-radius:3px;background:#000}
.rp-form input[type=file]{font-size:13px;padding:8px 0;border:0;background:transparent}
.rp-escribir summary{display:inline-block;cursor:pointer;list-style:none;padding:12px 18px;border:1px solid var(--ink);
  border-radius:2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.rp-escribir summary::-webkit-details-marker{display:none}
.rp-form{display:grid;gap:12px;margin-top:14px;max-width:560px}
.rp-form label{display:grid;gap:5px;font-size:12.5px;color:#5a4d5e}
.rp-form textarea,.rp-form input:not([type=radio]){font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);
  border-radius:2px;background:var(--white);color:var(--ink)}
.rp-est{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.rp-est legend{font-size:12.5px;color:#5a4d5e;margin-bottom:6px;padding:0}
.rp-est label{display:flex;flex-direction:row;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--line);
  border-radius:2px;background:var(--white);font-size:14px;cursor:pointer}
.rp-est label::after{content:'★';color:var(--estrella)}
.rp-est label:has(input:checked){border-color:var(--plum)}
.rp-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* En el celular el formulario se ensanchaba a ~750 px al abrirlo (reporte del
   propietario, 2026-10-02): una celda de grid no encoge por debajo de su
   contenido, y cada campo de archivo mide lo que su texto («Seleccionar
   archivos · ningún archivo seleccionado»). Columnas que sí encogen, campos a
   todo el ancho de su celda, y en pantallas angostas uno debajo del otro. */
.rp-form{grid-template-columns:minmax(0,1fr)}
.rp-form>*,.rp-dos>*{min-width:0}
.rp-form textarea,.rp-form input:not([type=radio]){width:100%;min-width:0;box-sizing:border-box}
@media(max-width:520px){.rp-dos{grid-template-columns:minmax(0,1fr)}}
.rp-nota{margin:0;font-size:12px;color:var(--gris)}
.rp-msg{margin:0;min-height:1em;font-size:13px;color:var(--pagar)}
.rp-gracias{margin:0;font-size:15px}
@media(min-width:700px){ .pp-bens{grid-template-columns:1fr 1fr 1fr} }

/* ── Ajustes de la ficha pedidos por el propietario (2026-09-26) ── */
/* Vitrina: carrusel con pestañas por colección (tienda.js, «Vitrina»). */
.vit{display:grid;gap:10px;min-width:0}
.vit[hidden]{display:none}
.vit-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px;margin:0 -1px}
.vit-tabs::-webkit-scrollbar{display:none}
.vit-tab{flex:0 0 auto;font:400 12.5px/1 Jost;padding:9px 14px;min-height:36px;border:1px solid var(--line);
  border-radius:999px;background:var(--white);color:var(--ink);cursor:pointer;white-space:nowrap}
.vit-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.vit-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;min-height:236px}
.vit-it{position:relative;flex:0 0 136px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;padding:10px 8px;background:var(--white);border:1px solid var(--line);border-radius:4px}
.vit-it.is-sel{border-color:var(--plum)}
.vit-it[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:6px;right:6px;min-width:22px;
  padding:3px 6px;border-radius:999px;background:var(--plum);color:#fff;font-size:12px;line-height:1.2}
.vit-it img,.vit-nof{width:96px;height:96px;object-fit:contain}
.vit-n{font-size:12.5px;line-height:1.25;min-height:2.5em}
.vit .vit-it img,.vit .vit-n{cursor:pointer}
.vit-it small{color:var(--gris);font-size:12px}
.vit-add{width:100%;margin-top:auto;font:400 12px/1 Jost;letter-spacing:.06em;text-transform:uppercase;padding:9px 6px;
  min-height:36px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:2px;cursor:pointer}
.vit-it.is-sel .vit-add{background:var(--plum);border-color:var(--plum);color:#fff}
.vit-add[aria-disabled="true"]{cursor:default}
.vit-tallas{justify-content:center;gap:4px}
.vit-tallas[hidden]{display:none}
.vit-tallas .tbtn{min-width:34px;min-height:34px;padding:7px 4px;font-size:12px}
.vit-desliza{margin:0;font-size:12px;color:var(--gris)}
/* Kits: talla y charms en la misma tarjeta del kit. */
.kit-paso{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;background:transparent}
.kit-paso.is-on{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.kit-arma{display:grid;gap:10px;margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--line);min-width:0}
.kit-arma-t{margin:6px 0 0;font-size:14px;display:flex;align-items:center;gap:10px}
.kit-arma-t b{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:400}
.kit-arma-ayuda{margin:0;font-size:12px;color:#6d6070}
.kit-arma-ayuda a{color:var(--plum)}
.kit-tallas.is-pide{animation:pide 1.2s ease}
/* Medios de pago, sutiles, sobre la línea de Addi. */
.pp-pagos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin:0;opacity:.8}
.pp-pagos img{height:15px;width:auto}
.pp-lista{margin:0 0 8px;padding-left:18px}
.pp-lista li{margin:0 0 6px}
/* Botón de regalo: vuelve a abrir la suscripción si la clienta cerró la
   ventana. Al lado contrario del botón de WhatsApp, a la misma altura. */
.susc-fab{position:fixed;left:14px;bottom:calc(var(--dock) + 14px);z-index:70;width:52px;height:52px;
  border:0;border-radius:50%;background:var(--rose);color:#fff;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(42,31,46,.22)}
.susc-fab[hidden]{display:none}
/* En la página de una pieza, mientras se ven su nombre y su precio, el botón
   no se les pone encima (lo cambia tienda.js al hacer scroll). */
body.pp-precio-a-la-vista:not(.susc-recien-cerrada) .susc-fab{visibility:hidden}
@media(hover:hover){.susc-fab:hover{background:var(--pagar)}}

/* Bloques con foto o video de la ficha (ENCARGO-FICHA-2 § 1): en el celular,
   medio arriba y texto abajo; desde 760 px, lado a lado y alternados. */
.bv{background:var(--white)}
.bv-in{display:grid;gap:40px}
.bv-b{display:grid;gap:18px;align-items:center}
.bv-m{border-radius:4px;overflow:hidden;background:var(--rose-soft)}
.bv-m img,.bv-v{display:block;width:100%;height:auto}
.bv-t h2{font-size:clamp(22px,5.8vw,28px);line-height:1.2;margin:0 0 10px}
.bv-t h2 span{color:var(--pagar)}
.bv-t p{margin:0;font-size:15px;line-height:1.65;color:#4a3d4e}
.bv-t b{color:var(--ink);font-weight:500}
.bv-cta{margin-top:18px}
.bv-cta .btn{width:100%}
@media(min-width:760px){
  .bv-b{grid-template-columns:minmax(0,420px) 1fr;gap:48px}
  .bv-b:nth-child(even){grid-template-columns:1fr minmax(0,420px)}
  .bv-b:nth-child(even) .bv-m{order:2}
  .bv-cta .btn{width:auto;min-width:240px}
}

/* Menú «Categorías» (ENCARGO-FICHA-2 § 5): desplegable por clic en escritorio,
   acordeón dentro del menú en el celular. */
.tnav-cat{position:relative}
.tnav-cat-b{font:inherit;letter-spacing:inherit;color:var(--ink);opacity:.72;background:none;border:0;
  border-bottom:1px solid transparent;padding:4px 0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.tnav-cat-b:hover,.tnav-cat-b[aria-expanded="true"]{opacity:1;border-color:var(--rose)}
.tnav-cat-m{position:absolute;top:calc(100% + 10px);left:-16px;min-width:210px;display:grid;padding:8px 0;
  background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 28px rgba(42,31,46,.12);z-index:70}
.tnav-cat-m[hidden]{display:none}
.tnav .tnav-cat-m a{padding:9px 18px;opacity:.85;border:0;white-space:nowrap}
.tnav .tnav-cat-m a:hover{opacity:1;background:var(--bone)}
.tnav .tnav-cat-m a:first-child{color:var(--pagar);opacity:1;font-weight:500}
.menu-cat{border-bottom:1px solid var(--line)}
.menu-cat summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:13px 4px;position:relative}
.menu-cat summary::-webkit-details-marker{display:none}
.menu-cat summary::after{content:'+';position:absolute;right:6px;top:14px;color:var(--gris-suave);font-size:20px}
.menu-cat[open] summary::after{content:'−'}
.menu-cat summary b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:19px}
.menu-cat summary small{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-suave)}
.menu-cat-l{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:0 4px 12px}
.menu-panel .menu-cat-l a{display:block;padding:9px 0;border:0;font-size:15px;color:var(--ink);text-decoration:none}
.menu-panel .menu-cat-l a:first-child{grid-column:1/-1;color:var(--pagar);font-weight:500}

/* «Más vendidos»: la tarjeta de la vitrina, en cuadrícula. */
.mv{padding-top:8px;padding-bottom:28px}
.mv[hidden]{display:none}
.mv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mv-grid .mv-it{flex:none}
.mv-ir{display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none;width:100%}
.mv-ir img{width:100%;max-width:160px;height:auto;aspect-ratio:1;object-fit:contain}
.mv-sello{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:var(--pagar);color:#fff;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;z-index:1}
.mv-aviso,.mv-cargando{margin:0 0 14px;font-size:14px;color:#6d6070}
@media(min-width:760px){ .mv-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Fotos y videos sin «guardar imagen» al mantener presionado ni arrastre
   (ver tienda.js: el clic derecho se bloquea allí). */
img,video{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* ── Legibilidad (pedido del propietario, 2026-09-28) ──
   Precios y llamados a la acción con contraste marcado y seminegrita; nada
   de texto de 8–11 px (el piso es 12). Los colores de texto que no llegaban a
   4,5:1 sobre el fondo pasaron a --gris / --gris-suave / --pagar arriba. */
.btn{font-weight:600;font-size:14px;letter-spacing:.08em}
.pc-add,.vit-add{font-weight:600;font-size:12.5px}
.pc-price{font-size:16px;font-weight:600;color:var(--ink)}
.vit-it small{font-size:14px;font-weight:600;color:var(--ink)}
/* En la hoja del carrito (fondo oscuro) el precio hereda el color claro:
   solo más peso. Con color tinta desaparecía sobre el fondo. */
.sug-p{font-weight:600}
.pq-p b,.kit-paso-p b{font-weight:600;color:var(--ink)}
.fx-p,.dock-p{font-weight:600}
.pc-name{font-weight:500}
.eyebrow{font-weight:500}
p,li,dd,.pp-acc-in{line-height:1.55}

/* Etiqueta sobre la foto (Plata 925): legible a 12 px pero
   compactas, en tipo oración y con poco espaciado, para no tapar la joya. */
.pc-mark{text-transform:none;letter-spacing:.02em;font-weight:500;padding:2px 6px}

/* Videos: la portada también de fondo (la pone tienda.js), para que el
   recuadro nunca quede en blanco ni en negro mientras llega el primer cuadro;
   y un tono suave mientras llega la propia portada. */
.ugc-v,.bv-v{background-position:center;background-size:contain;background-repeat:no-repeat}
.bv-v{background-color:var(--rose-soft)}

/* «Lleva 4, paga 3» en un solo recuadro: portada (#promo) y fichas de
   producto, junto al precio. Reemplaza a la cuadrícula de tramos (.esc) y al
   selector de paquetes (.pq). */
.promo-caja{border:1px solid var(--rose);background:var(--rose-soft,#F3E6EB);border-radius:6px;
  padding:14px 16px;text-align:left}
.promo-caja p{margin:0}
.promo-caja-t{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin-bottom:6px!important}
.promo-caja-t b{font-weight:600;color:var(--ink)}
.promo-caja-x{font-size:14px;line-height:1.5;color:#4a3d4e}
.promo-caja-x b{font-weight:700;color:var(--pagar,#8E3B5C);letter-spacing:.04em}
.promo-caja-x span{color:var(--gris,#6d6070);font-size:13px}
#promo{padding-top:26px;padding-bottom:26px}
#promo .promo-caja{max-width:620px;margin:0 auto;padding:18px 20px}
.pp-compra .promo-caja{margin:0 0 14px}

/* Reseñas de la portada en carrusel: tarjetas iguales, foto arriba (cuadrada),
   estrellas, texto y nombre. Una tarjeta y un pedazo de la siguiente a la vista
   en el celular, para que se lea que se desliza. */
.tst-rail{grid-auto-columns:78%;gap:12px;align-items:stretch;scroll-snap-type:x mandatory}
.tst{margin:0;background:var(--white);border:1px solid var(--line);border-radius:4px;
  display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:start;position:relative}
.tst-ph{border-radius:0}
.tst-ph img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:0}
.tst-tx{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.tst .estrellas{display:flex;gap:2px;margin-bottom:8px}
.tst blockquote{margin:0 0 14px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:18px;line-height:1.35;color:var(--ink);flex:1}
.tst figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.tst-tag{position:absolute;top:10px;left:10px;margin:0;background:rgba(255,255,255,.92);
  padding:5px 8px;border-radius:2px;font-size:11px}
.tst-prom{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:14px;color:var(--gris)}
.tst-prom[hidden]{display:none}
.tst-pts{display:flex;justify-content:center;gap:7px;margin:12px 0 0}
.tst-pts i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s}
.tst-pts i.is-on{background:var(--plum)}
@media(min-width:700px){.tst-rail{grid-auto-columns:calc((100% - 24px)/3)}}

/* Contacto en el menú ☰ */
.menu-panel .menu-contacto-l{grid-template-columns:1fr}
.menu-panel .menu-contacto-l a,.menu-panel .menu-contacto-l a:first-child{display:flex;flex-direction:column;gap:2px;
  color:var(--pagar);font-weight:500;font-size:16px}
.menu-contacto-l a span{font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave)}
/* Brazaletes: el primer nivel a la vista y los demás tras «Ver más». */
#brazaletes:not(.ver-todos) .tier~.tier{display:none}
#brazaletes.ver-todos .b-mas-wrap{display:none}
.b-mas-wrap{margin-top:-6px}
/* Reseña de solo texto en el carrusel: en el lugar de la foto, un recuadro con
   comillas del mismo alto (4:3), para que las tarjetas sigan siendo iguales. */
.tst-ph--txt{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--rose-soft),#e9d6de)}
.tst-ph--txt span{font-family:'Cormorant Garamond',Georgia,serif;font-size:120px;line-height:.6;
  color:var(--rose);opacity:.55;padding-top:34px}
/* El formulario para reseñar, debajo del carrusel en las fichas. */
.social .rp-escribir{margin-top:22px}

/* ——— Carrito en paleta clara (pedido del propietario, 2026-10-04) ———
   El fondo ciruela oscuro no dejaba leer bien ni limpio. Mismos tonos de la
   página: fondo blanco, texto tinta, grises de la marca para lo secundario,
   el rosa de pagar en lo que se toca y el verde de «gratis» de siempre.
   Va al final para ganarle a las reglas oscuras de arriba sin reescribirlas;
   los grises claros (--silver) no pasan contraste sobre blanco, por eso aquí
   lo secundario es --gris-suave. */
.sheet{background:#fff;color:var(--ink);box-shadow:0 -10px 40px rgba(42,31,46,.16)}
.veil{background:rgba(42,31,46,.35)}
.sheet-grab{background:var(--line)}
.sheet-x{border-color:var(--line);color:var(--ink)}
.sheet-x:hover{border-color:var(--ink)}
.sheet-scroll{scrollbar-color:var(--line) transparent}
.sheet-scroll::-webkit-scrollbar-thumb{background:var(--line)}
.srow{border-bottom-color:var(--line)}
.srow img{border:1px solid var(--line)}
.srow-nof{background:var(--rose-soft);color:var(--plum)}
.srow-n small,.srow--gratis .srow-p s{color:var(--gris-suave)}
.srow--gratis .srow-p b{background:#1F7A5C;color:#fff}
.srow-x{background:var(--bone);color:var(--gris)}
.srow-x:hover{background:var(--pagar);color:#fff}
.s-empty{color:var(--gris-suave)}
.hoja-dto-caja{background:#F7EEE8;border-color:#EDE0D8}
.hoja-dto-t,.hoja-dto li{color:var(--gris-suave)}
.hoja-dto li::before{background:#E6DAD3}
.hoja-dto li.is-on::before{background:var(--pagar)}
.hoja-dto li.is-free{color:var(--pagar)}
.hoja-dto.is-max li.is-on::before{background:#1F7A5C}
.desc-nota{color:var(--gris)}
.desc-nota b{color:var(--pagar);font-weight:600}
.desc-nota.is-max,.desc-nota.is-max b{color:#1F7A5C}
.sug{border-top-color:var(--line)}
.sug-h span{color:var(--gris-suave)}
.sug-c{border-color:var(--line);background:#fff;color:var(--ink)}
@media(hover:hover){.sug-c:hover{border-color:var(--pagar);background:var(--rose-soft)}}
.sug-c img,.sug-c .mono{border:1px solid #F1ECEE}
.sug-mas{background:var(--pagar)}
.sug-n{color:var(--ink)}
.sug-c.is-puesto{border-color:#1F7A5C;background:#EAF5F0}
.sug-c.is-puesto .sug-mas{background:#1F7A5C}
.sug-c.is-puesto .sug-p{color:#1F7A5C}
.pbtn{border-color:var(--line);background:#fff;color:var(--ink)}
@media(hover:hover){.pbtn:hover{border-color:var(--gris-suave)}}
.pbtn small{color:var(--gris-suave)}
.pbtn.is-on{background:var(--rose-soft);border-color:var(--pagar);color:var(--ink);box-shadow:0 0 0 1px var(--pagar)}
.pbtn.is-on small{color:var(--pagar)}
.pbtn small.pb-gratis,.pbtn.is-on small.pb-gratis{color:#1F7A5C}
.tot-row{color:var(--gris)}
.tot-row.save{color:var(--pagar)}
.ship-note{color:var(--gris-suave)}
.ship-bar{background:var(--line)}
.ship-ok{color:#1F7A5C}
.ship-casi{color:#8a5a00}
.ship-cta{color:var(--pagar)}
@media(hover:hover){.ship-cta:hover{color:var(--ink)}}
.sheet-info{border-top-color:var(--line)}
.sheet-note{color:var(--gris)}
.sheet-note--regalo{color:#1F7A5C}
.sheet-note--addi{color:var(--pagar)}
.sheet .stock-nota{color:var(--gris-suave)}
.sheet-tot{background:#fff;border-top-color:var(--line)}
.sheet-tot::before{background:linear-gradient(to top,rgba(255,255,255,.95),rgba(255,255,255,0))}
.tot-big span{color:var(--gris-suave)}
.tot-big b{color:var(--ink)}
.sheet-seguro{color:var(--gris-suave)}