/* ============================================================
   JEWELSathome — CAPA DE MARCA
   ------------------------------------------------------------
   Se carga DESPUÉS de style.css y shop.css y alinea el proceso
   de compra con lo que jewelsandwine.com renderiza de verdad.

   Medido sobre la web en producción (24-08-2026):
     fondo         #FEF5E8
     banda suave   #FFF8F3
     texto marca   #3E000D
     texto corrido #1E1E1E
     botón         #D27541 · radio 4px · 15px/400 · caja normal
     tipografía    Playfair Display (títulos y texto)
                   Hind (definida en el kit de Elementor como
                         tipografía "text/accent")

   Este archivo es la única pieza que hay que tocar cuando
   llegue el manual de marca. Todo lo demás lee de aquí.
   ============================================================ */

:root{
  /* --- Paleta (ya coincidía con la web; se fija aquí como fuente única) --- */
  --base:#FEF5E8;
  --base-alt:#FFF8F3;          /* bandas de sección de la web */
  --marca:#3E000D;
  --secundario:#6D220A;
  --tinta:#1E1E1E;             /* texto corrido de la web */
  --acento:#D27541;            /* color de botón de la web */
  --acento-ink:#9C4A1B;        /* variante legible a tamaño pequeño (5,6:1) */

  /* --- Tipografía de la marca --- */
  --font-display:'Playfair Display','Times New Roman',Georgia,serif;
  --font-sans:'Playfair Display','Times New Roman',Georgia,serif;
  /* Hind es la tipografía "text/accent" del kit de Elementor. La usamos
     solo donde Playfair no rinde: etiquetas pequeñas, cifras y campos. */
  --font-ui:'Hind','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* --- Forma --- */
  --radius:4px;                /* el radio de botón de la web */
}

/* ============================================================
   Texto
   ============================================================ */
body{font-family:var(--font-display);color:var(--tinta);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--tinta);
  font-weight:600;
}
h1,h2{letter-spacing:.04em;}
h3{font-weight:700;letter-spacing:-0.02em;}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--secundario);}

p{font-family:var(--font-display);}

/* ============================================================
   Botones — copiados de los de Elementor de la web
   #D27541 · radio 4px · 15px/400 Playfair · sin versalitas
   ============================================================ */
.btn{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  border-radius:var(--radius);
  padding:15px 25px;
  gap:9px;
  /* Respuesta al pulsar: la web no la tiene, y se nota en un
     configurador donde se pulsa constantemente. */
  transition:background-color .2s ease, color .2s ease,
             border-color .2s ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.btn:active{transform:scale(.97);}
.btn-sm{padding:11px 19px;font-size:13.5px;}

/* Primario: el naranja tostado de la web */
.btn-solid{background:var(--acento);color:var(--base);border:1px solid var(--acento);}
.btn-solid:hover{background:var(--secundario);border-color:var(--secundario);color:var(--base);}
.btn-accent{background:var(--acento);color:var(--base);border:1px solid var(--acento);}
.btn-accent:hover{background:var(--secundario);border-color:var(--secundario);}

/* Secundario */
.btn-outline{background:transparent;color:var(--marca);border:1px solid var(--marca);}
.btn-outline:hover{background:var(--marca);color:var(--base);}

.btn:disabled,.btn[disabled]{opacity:.45;}
.btn:disabled:active,.btn[disabled]:active{transform:none;}

@media (prefers-reduced-motion: reduce){
  .btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
  .btn:active{transform:none;}
}

/* ============================================================
   Micro-etiquetas
   La web no usa versalitas espaciadas en ningún sitio: era un
   manierismo del prototipo. Pasan a Hind en caja normal.
   ============================================================ */
.eyebrow,
.shop-progress-label,
.people-opt .t,
.pick .coll,
.filter,
.person-chip .who,
.rline .rwho,
.f label,
.foot-col h4,
.nav-links,
.tracked,
.step-edit,
.shop-exit,
.tools-art figcaption,
.rail-bar .rb-label,
.seg button,
.tools-answer b,
.guide-link,
.preview-flag{
  font-family:var(--font-ui);
  text-transform:none;
  letter-spacing:.01em;
  font-weight:600;
}
.eyebrow{font-size:12.5px;color:var(--acento-ink);}
.shop-progress-label{font-size:11.5px;}
.people-opt .t{font-size:11.5px;}
.pick .coll{font-size:11.5px;}
.filter{font-size:13px;padding:9px 17px;}
.person-chip .who{font-size:11.5px;}
.rline .rwho{font-size:12px;}
.f label{font-size:12px;}
.rail-bar .rb-label{font-size:11.5px;}
.preview-flag{font-size:11.5px;letter-spacing:.02em;}
.seg button{font-size:13.5px;padding:13px 24px;}
.tools-answer b{font-size:14.5px;}
.step-edit,.shop-exit{font-size:13px;}
.tools-art figcaption{font-size:12px;}

/* Nombres de kit: la web escribe los nombres propios en caja normal */
.pick .name,
.kit-card .name,
.col-card .name{text-transform:none;letter-spacing:0;font-weight:600;}

/* ============================================================
   Interfaz densa en Hind — Playfair no rinde bien a 11-14px
   en campos, cifras y textos de apoyo.
   ============================================================ */
.field-num,
.f input,
.stepper .val,
.rline .rprice,
.rail-line .rl-price,
.rail-line .rl-meta,
.trow,
.pick .price,
.stepper-price,
.step-hint,
.strip-caption,
.rec-line,
.r-legal,
.rail-note,
.rail-sub,
.pdp-summary-row,
.presave-summary-list li{font-family:var(--font-ui);}

/* Cifras siempre tabulares para que las columnas de precio cuadren */
.num{font-family:var(--font-ui);font-variant-numeric:tabular-nums;}

/* ============================================================
   Superficies
   ============================================================ */
.bstep,.review-lines,.rail-lines,.rline,.rail-line{border-color:color-mix(in srgb, var(--marca) 12%, transparent);}
.order-rail,.reserve,.done-card,.tools-art{background:var(--base-alt);}
.order-rail{border-radius:var(--radius);}
.opt,.pick .frame,.stepper,.seg,.field-num{border-radius:var(--radius);}
.person-chip .thumb,.rline .rthumb,.rail-line .rl-thumb{border-radius:var(--radius);}

/* Estado seleccionado: el naranja de marca, no el granate */
.opt.on{background:var(--acento);border-color:var(--acento);color:var(--base);}
.people-opt.on .t{color:color-mix(in srgb, var(--base) 82%, transparent);}
.seg button.on{background:var(--acento);color:var(--base);}
.filter.on{background:var(--acento);border-color:var(--acento);color:var(--base);}
.pick.on .frame{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento);}
.pick .tick{background:var(--acento);}
.person-chip.on .thumb{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento);}
.bstep.is-active .step-num{color:var(--acento);}
.shop-progress-step.current .shop-progress-bar::after{background:var(--acento);}
.done-card .mark{background:var(--acento);}

/* Títulos de paso con la escala de la web (h2 36 / h3 28) */
.bstep.is-active .step-title{font-size:29px;font-weight:600;letter-spacing:.02em;color:var(--tinta);}
.step-title{font-size:22px;color:var(--tinta);}
.shop-intro h1{font-size:40px;font-weight:600;letter-spacing:.03em;color:var(--tinta);}
.order-rail h2{letter-spacing:.02em;}

/* Cuerpo de texto en el tono de la web */
.step-lead,.shop-intro p,.note,.reserve p.r-body{color:var(--marca);}

@media (max-width:980px){
  .shop-intro h1{font-size:30px;}
  .bstep.is-active .step-title{font-size:24px;}
  .step-title{font-size:20px;}
}

/* ============================================================
   Rejillas que no revientan
   `1fr` equivale a minmax(auto,1fr), y ese "auto" no baja del
   min-content del contenido. Con las fotos ya cargadas, la imagen
   impone su ancho intrínseco y la rejilla se sale de la pantalla.
   minmax(0,1fr) sí permite encoger. Vale para todos los tamaños.
   ============================================================ */
/* El tema pone white-space:nowrap en los <button>. Las tarjetas de kit,
   las opciones y los chips de persona SON botones: sin esto, el nombre
   y el precio no parten línea y se salen de la tarjeta (el tema los
   recorta en silencio, así que no se ve el error, se ve texto cortado). */
/* ============================================================
   NEUTRALIZAR EL BOTÓN GLOBAL DE ELEMENTOR
   ------------------------------------------------------------
   El kit de Elementor (post-5.css) aplica a TODOS los <button>:
     .elementor-kit-5 button{ background:#93230C; color:#fff;
       border:1px solid #93230C; border-radius:4px; padding:15px 25px }
   Especificidad (0,1,1) y carga DESPUÉS que estas hojas, así que
   ganaba a casi todas nuestras reglas de componente: las tarjetas de
   kit salían con fondo granate, y los controles como recuadros.

   Lo neutralizamos con un selector de ID o de doble clase (que sí le
   gana) y justo debajo cada componente recupera su caja propia.
   ============================================================ */
#shopApp button:not(.btn):not(.caja),
.jah-pagina button:not(.btn):not(.caja){
  background:none;
  color:inherit;
  border:0;
  border-radius:0;
  padding:0;
  font-family:inherit;
  font-weight:inherit;
}

/* …y los que sí llevan caja propia, con la misma especificidad */
#shopApp button.opt{
  background:var(--base);
  border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);
  color:var(--marca);
}
#shopApp button.opt.on{background:var(--acento);border-color:var(--acento);color:var(--base);}
#shopApp button.people-opt{padding:20px 8px 16px;}
#shopApp button.finish-big{padding:16px 26px 16px 20px;}
#shopApp button.tools-answer{padding:15px 24px;}
#shopApp button.pf-opt{padding:8px 16px;}
#shopApp button.filter{
  padding:9px 17px;
  border:1px solid var(--line-marca);
  border-radius:999px;
  background:var(--base);
  color:var(--text-soft);
}
#shopApp button.filter.on{background:var(--acento);border-color:var(--acento);color:var(--base);}
#shopApp .seg button{padding:13px 24px;background:var(--base);color:var(--text-soft);}
#shopApp .seg button.on{background:var(--acento);color:var(--base);}
#shopApp .seg button + button{border-left:1px solid var(--line-marca-strong);}
#shopApp button.step-head{padding:30px 0;}
#shopApp .stepper button{width:46px;height:46px;color:var(--marca);}
#shopApp button.disclosure,
#shopApp .browse-link button{border-bottom:1px solid var(--line-marca-strong);padding-bottom:2px;}
#shopApp button.pm-close,
#shopApp button.pf-opt{border:1px solid var(--line-marca-strong);border-radius:var(--radius);}

.jah-pagina button.faq-q{padding:24px 0;}
.jah-pagina button.kit-acc-q{padding:20px 2px;}
.jah-pagina button.btn-review-pill{
  padding:14px 28px;border:1px solid var(--line-marca-strong);border-radius:999px;color:var(--marca);
}

@media (max-width:980px){
  #shopApp button.step-head{padding:26px 0;}
}
@media (max-width:640px){
  #shopApp button.people-opt{width:calc(33.333% - 7px);}
  #shopApp .seg button{padding:13px 10px;}
}

/* El tema pone white-space:nowrap en TODOS los <button>. Hasta ahora esto
   solo cubría el configurador, y las preguntas del FAQ —que también son
   botones— no partían línea: en móvil medían 384 px dentro de 274 y
   arrastraban toda la página a scroll horizontal. */
#shopApp button,#shopApp button *,
.jah-pagina button,.jah-pagina button *{white-space:normal;}
#shopApp .btn,
.jah-pagina .btn{white-space:nowrap;}   /* los botones de acción sí van en una línea */
.pick,.pick *,.opt,.opt *,.person-chip,.person-chip *{white-space:normal;}
.pick{display:flex;flex-direction:column;}

.pick,.pick .frame,.person-chip,.person-chip .thumb{min-width:0;}
.pick .frame img,.person-chip .thumb img,.rline .rthumb img,.rail-line .rl-thumb img{max-width:100%;}
.shop-layout{grid-template-columns:minmax(0,1fr) 372px;}
@media (max-width:1180px){ .shop-layout{grid-template-columns:minmax(0,1fr) 320px;} }
@media (max-width:980px){  .shop-layout{grid-template-columns:minmax(0,1fr);} }

/* La rejilla de kits se adapta al ancho que le toque, no a un número fijo
   de columnas. Dentro del contenedor del tema la columna de contenido baja
   a ~616px, y cuatro columnas dejaban las fotos en 125px. */
@media (min-width:641px){
  .kit-pick{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));}
}
@media (max-width:640px){
  .kit-pick{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Empotrado: el tema ya limita el ancho, así que le devolvemos el margen
   lateral y recuperamos 80px para el contenido. */
.jah-embed .shop-layout{padding-left:0;padding-right:0;}

/* ============================================================
   Empotrado dentro de WordPress
   El tema ya pone su propio margen lateral. Si además ponemos el
   nuestro, en un móvil de 375px el contenido se queda en 274 y la
   rejilla de kits sale ahogada. Aquí cedemos el margen al tema.
   ============================================================ */
@media (max-width:760px){
  .jah-embed .shop-layout{padding-left:0;padding-right:0;}
  /* La barra de pasos sí conserva un poco de aire propio */
  .jah-embed .shop-head-in{padding-left:0;padding-right:0;}
}

/* ============================================================
   CAPA DE RESCATE  ·  2026-08-25
   ------------------------------------------------------------
   Elementor aplica estilos globales a TODOS los <button> y a los
   encabezados del sitio. Hasta ahora intentaba ganarle subiendo
   especificidad, y en algunos puntos seguía perdiendo (el FAQ y los
   acordeones salían como bloques naranjas macizos).

   Aquí uso !important a propósito y solo para NEUTRALIZAR estilos
   globales de terceros sobre elementos que son nuestros. Es el caso
   en el que !important es la herramienta correcta: no estoy pisando
   diseño propio, estoy impidiendo que un plugin pinte encima.
   ============================================================ */

/* ---------- 1. Fuera el título de página del tema ----------
   Salía "Privado: JEWELSathome — configurador" encima del hero,
   chocando con el menú. Nuestras páginas traen su propio titular. */
.page-header,
h1.entry-title,
.entry-header,
.elementor-page-title{ display:none !important; }

/* ---------- 2. El hero, a sangre ----------
   El tema lo encajaba en su contenedor (1012 px dentro de 1265) y
   quedaba una foto pequeña flotando con márgenes a los lados. */
.jah-pagina .hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.jah-pagina .hero-content{ padding-left:max(40px, calc(50vw - 610px)) !important; }

/* Texto del hero SIEMPRE claro: va sobre foto oscura */
.jah-pagina .hero-copy h1,
.jah-pagina .hero-copy h1 *,
.jah-pagina .hero-collection h1{ color:var(--base) !important; }
.jah-pagina .hero-copy h1 em{ color:var(--acento) !important; }
.jah-pagina .hero-copy .lead{ color:color-mix(in srgb, var(--base) 92%, transparent) !important; }
.jah-pagina .scroll-cue{ color:color-mix(in srgb, var(--base) 80%, transparent) !important; }

/* ---------- 3. Ningún botón nuestro es un botón de Elementor ----------
   Regla única que devuelve los <button> a su estado neutro. Los
   componentes que sí quieren caja la recuperan más abajo. */
.jah-pagina button:not(.btn):not(.elementor-button):not(.caja),
#shopApp button:not(.btn):not(.elementor-button):not(.caja){
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:inherit !important;
  box-shadow:none !important;
  font-family:inherit;
}

/* ---------- 4. Desplegables: FAQ y acordeón de ficha ----------
   Como los de vuestra web: filete fino, pregunta en serif, signo a la
   derecha. Nada de bloques macizos. */
.jah-pagina .faq,
.jah-pagina .kit-accordion{ border-top:1px solid var(--line-marca); }

.jah-pagina .faq-item,
.jah-pagina .kit-acc-item{
  border-bottom:1px solid var(--line-marca);
  background:transparent;
}

.jah-pagina .faq-q,
.jah-pagina .kit-acc-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 4px !important;
  text-align:left;
  font-family:var(--font-display);
  font-size:17.5px;
  line-height:1.4;
  color:var(--marca) !important;
  cursor:pointer;
  transition:color .2s ease;
}
.jah-pagina .faq-q:hover,
.jah-pagina .kit-acc-q:hover{ color:var(--acento-ink) !important; }

.jah-pagina .faq-q > span:first-child,
.jah-pagina .kit-acc-q > span:first-child{ flex:1 1 auto; }

/* El signo + / − : círculo de filete, no un cuadro relleno */
.jah-pagina .faq-q .toggle,
.jah-pagina .kit-acc-q .toggle{
  flex:0 0 auto;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:50% !important;
  font-family:var(--font-ui);
  font-size:16px; font-weight:400; line-height:1;
  color:var(--marca);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.jah-pagina .faq-q:hover .toggle,
.jah-pagina .kit-acc-q:hover .toggle{
  border-color:var(--acento) !important;
  color:var(--acento-ink);
}
.jah-pagina .faq-item.open .faq-q .toggle,
.jah-pagina .kit-acc-item.open .kit-acc-q .toggle{
  background:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base);
}

/* Contenido desplegado
   Se anima con grid-template-rows (0fr → 1fr), no con max-height: no
   provoca recálculo de maquetación y, sobre todo, el tiempo se ajusta a
   la altura REAL del contenido. Con max-height la animación se calculaba
   sobre una altura fantasma y las respuestas cortas se abrían con un
   tempo raro.
   Requiere un único hijo: .faq-a-inner y .kit-acc-a-inner. */
.jah-pagina .faq-a,
.jah-pagina .kit-acc-a{
  display:grid !important;
  grid-template-rows:0fr;
  max-height:none !important;
  overflow:hidden;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.jah-pagina .faq-item.open .faq-a,
.jah-pagina .kit-acc-item.open .kit-acc-a{ grid-template-rows:1fr; }
.jah-pagina .faq-a > *,
.jah-pagina .kit-acc-a > *{ overflow:hidden; min-height:0; }
@media (prefers-reduced-motion: reduce){
  .jah-pagina .faq-a,
  .jah-pagina .kit-acc-a{ transition:none; }
}

.jah-pagina .faq-a p,
.jah-pagina .kit-acc-a-inner p,
.jah-pagina .kit-acc-a-inner li{
  font-family:var(--font-ui);
  font-size:15px; line-height:1.7;
  color:var(--text-soft);
  max-width:62ch;
}
.jah-pagina .faq-a-inner,
.jah-pagina .kit-acc-a-inner{ padding:0 !important; }
.jah-pagina .faq-a-inner > *,
.jah-pagina .kit-acc-a-inner > *{ padding-left:4px; padding-right:4px; }
.jah-pagina .faq-a-inner > *:last-child,
.jah-pagina .kit-acc-a-inner > *:last-child{ padding-bottom:26px; }
.jah-pagina .faq-a-inner p + p{ margin-top:12px; }

.jah-pagina .kit-acc-a-inner p + p{ margin-top:12px; }
.jah-pagina .kit-acc-a-inner ul{ margin:14px 0 0; padding-left:20px; }
.jah-pagina .kit-acc-a-inner li + li{ margin-top:8px; }
.jah-pagina .kit-acc-a-inner strong,
.jah-pagina .faq-a strong{ color:var(--marca); font-weight:600; }

/* ---------- 6. La ficha de kit: texto alineado y respirando ---------- */
.jah-pagina .pdp-info h1{ color:var(--tinta) !important; }
.jah-pagina .pdp-info .desc{
  font-family:var(--font-ui); font-size:15.5px; line-height:1.7;
  color:var(--text-soft); max-width:52ch; margin-top:16px;
}
.jah-pagina .pdp-trust{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-marca);
  display:flex; flex-direction:column; gap:10px;
}
.jah-pagina .pdp-trust .item{
  font-family:var(--font-ui); font-size:13.5px; line-height:1.5;
  color:var(--text-soft); display:block;
}
.jah-pagina .pdp-trust .item b{ color:var(--marca); font-weight:600; }
.jah-pagina .kit-accordion{ margin-top:34px; }
.jah-pagina .pdp-price{ margin-top:18px; }
.jah-pagina .pdp-price .per-kit{
  display:block; margin-top:6px; font-family:var(--font-ui);
  font-size:12.5px; color:var(--text-soft);
}

/* ============================================================
   ESPACIO PARA LA CABECERA FIJA
   ------------------------------------------------------------
   La cabecera de Elementor es position:fixed. Al ocultar el título
   de página del tema se perdió el hueco que empujaba el contenido
   por debajo de ella, y el hero se metía detrás del menú: texto
   oscuro sobre foto oscura, ilegible.

   La altura real la mide shop.js y la publica en --jah-header-h,
   porque cambia con el ancho y con la barra de administración.
   El valor de reserva cubre el caso de que el JS no llegue.
   ============================================================ */
/* --jah-promo-h: la franja fija de «alicates de regalo», si la hay. */
.jah-pagina{ padding-top:calc(var(--jah-header-h, 96px) + var(--jah-promo-h, 0px)); }

/* El hero arranca justo debajo de la cabecera, no detrás */
.jah-pagina > section:first-child{ margin-top:0; }

/* En la página de compra el aire lo pone su propia cabecera de pasos */
.jah-compra{ padding-top:calc(var(--jah-header-h, 96px) + var(--jah-promo-h, 0px) + 8px); }

/* ============================================================
   EL ASISTENTE DE COMPRA
   ------------------------------------------------------------
   Antes era un acordeón de cinco secciones con barra lateral:
   demasiada maquinaria a la vista para cinco decisiones. Ahora es
   una pregunta por pantalla, con el progreso arriba y, siempre a
   la vista, lo que llevas y el botón para avanzar.

   Todo va prefijado con #shopApp porque Elementor estiliza cada
   <button> del sitio y hay que ganarle.
   ============================================================ */
#shopApp .wiz{
  max-width:900px;
  margin:0 auto;
  padding:0 24px 96px;
}

/* ---------- Progreso ---------- */
#shopApp .wiz-steps{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:0;
  margin:0 0 52px;
  padding:0;
  list-style:none;
}
#shopApp button.wiz-step{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  position:relative;
  padding:0 !important;
  background:transparent !important;
  cursor:pointer;
}
#shopApp button.wiz-step[disabled]{ cursor:default; }

/* La línea que une las marcas.
   Antes era un ::before por paso: cinco tramos independientes que, según
   dónde cayeran horizontalmente, redondeaban a un píxel distinto y hacían
   que la línea saliera escalonada. Ahora es un solo elemento que cruza de
   punta a punta, con un relleno encima que marca lo recorrido. Al ser uno
   solo, no puede desalinearse consigo mismo.
   El raíl va del centro de la primera marca al de la última: con N pasos
   de igual ancho, ese centro está a 50%/N de cada extremo. */
#shopApp .wiz-rail{
  position:absolute;
  top:0; height:31px;
  left:calc(50% / var(--wiz-n, 5));
  right:calc(50% / var(--wiz-n, 5));
  display:flex; align-items:center;
  pointer-events:none;
}
#shopApp .wiz-rail::before{
  content:"";
  position:absolute; left:0; right:0;
  height:1px;
  background:var(--line-marca);
}
#shopApp .wiz-rail-fill{
  position:relative;
  width:100%;
  height:1px;
  background:var(--acento);
  /* Se escala, no se ensancha: animar width obliga a recalcular la
     maquetación en cada fotograma, y transform no toca el layout. */
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce){
  #shopApp .wiz-rail-fill{ transition:none; }
}

#shopApp .wiz-dot{
  position:relative;
  z-index:1;
  width:31px; height:31px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-marca-strong);
  border-radius:50%;
  background:var(--base);
  font-family:var(--font-ui);
  font-size:13.5px; font-weight:600;
  color:var(--text-soft);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
#shopApp .wiz-dot svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

#shopApp button.wiz-step.hecho .wiz-dot{
  background:var(--acento); border-color:var(--acento); color:var(--base);
}
#shopApp button.wiz-step.actual .wiz-dot{
  background:var(--marca); border-color:var(--marca); color:var(--base);
}
#shopApp button.wiz-step:not([disabled]):hover .wiz-dot{ border-color:var(--marca); }

#shopApp .wiz-label{
  font-family:var(--font-ui);
  font-size:12px; font-weight:600;
  color:var(--text-soft);
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
  transition:color .25s ease;
}
#shopApp button.wiz-step.actual .wiz-label{ color:var(--marca); }
#shopApp button.wiz-step[disabled] .wiz-label{ opacity:.5; }

/* ---------- La pregunta ---------- */
#shopApp .wiz-q{ animation:wizEntra .42s cubic-bezier(.16,1,.3,1); }
@keyframes wizEntra{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  #shopApp .wiz-q{ animation:none; }
}

#shopApp .wiz-title{
  font-family:var(--font-display);
  font-size:36px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--tinta);
  margin:0 0 4px;
}
#shopApp .wiz-body .step-lead{
  font-family:var(--font-ui);
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-soft);
  max-width:58ch;
  margin:12px 0 34px;
}
#shopApp .wiz-body .step-body-pad,
#shopApp .wiz-body{ padding:0 !important; }

/* ---------- El pie: volver · lo que llevas · continuar ---------- */
#shopApp .wiz-foot{
  margin-top:46px;
  padding-top:24px;
  border-top:1px solid var(--line-marca);
}
#shopApp .wiz-foot-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
#shopApp button.wiz-back{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  color:var(--text-soft);
  padding:10px 4px !important;
  transition:color .2s ease;
}
#shopApp button.wiz-back:hover{ color:var(--marca); }
#shopApp button.wiz-back svg{ width:15px; height:15px; }
#shopApp .wiz-back-hueco{ flex:0 0 auto; width:1px; }

#shopApp .wiz-total{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center;
}
#shopApp .wiz-resumen{
  font-family:var(--font-ui); font-size:12.5px; color:var(--text-soft);
}
#shopApp .wiz-cifra{
  font-family:var(--font-display); font-size:23px; color:var(--marca);
}
#shopApp .btn.wiz-next{ min-width:172px; justify-content:center; }

#shopApp .wiz-pista{
  margin:14px 0 0;
  font-family:var(--font-ui); font-size:13px;
  color:var(--text-soft);
  text-align:right;
}

/* ---------- Adaptación ---------- */
@media (max-width:760px){
  #shopApp .wiz{ padding:0 18px 84px; }
  #shopApp .wiz-steps{ margin-bottom:38px; }
  #shopApp .wiz-label{ display:none; }          /* en móvil basta la marca */
  #shopApp .wiz-rail{ height:31px; }
  #shopApp .wiz-title{ font-size:27px; }
  #shopApp .wiz-body .step-lead{ font-size:15px; margin-bottom:26px; }

  /* El pie se ancla abajo: el total y el avance siempre a mano */
  #shopApp .wiz-foot{
    position:sticky; bottom:0;
    margin-top:36px;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    margin-left:-18px; margin-right:-18px;
    background:var(--base);
    border-top:1px solid var(--line-marca-strong);
    box-shadow:0 -10px 26px -22px rgba(62,0,13,.55);
    z-index:20;
  }
  #shopApp .wiz-foot-in{ gap:12px; }
  #shopApp .wiz-total{ align-items:flex-start; text-align:left; }
  #shopApp .wiz-cifra{ font-size:20px; }
  #shopApp .btn.wiz-next{ min-width:0; padding:14px 20px; }
  #shopApp button.wiz-back{ padding:10px 0 !important; }
  #shopApp button.wiz-back span{ display:none; }
  #shopApp .wiz-pista{ display:none; }
}

/* ============================================================
   ESTADOS DEL PAGO Y DEL STOCK
   ============================================================ */

/* Aviso de existencias en el paso del acabado */
#shopApp .aviso-stock{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:22px; padding:14px 18px;
  border-left:2px solid var(--acento);
  background:color-mix(in srgb, var(--acento) 9%, transparent);
  font-family:var(--font-ui); font-size:13.5px; line-height:1.6;
  color:var(--marca); max-width:62ch;
}
#shopApp .aviso-stock svg{
  width:15px; height:15px; flex:0 0 auto; margin-top:3px;
  stroke:var(--acento-ink); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
#shopApp .aviso-stock strong{ font-weight:600; }

/* Mensaje del botón de pago */
#shopApp .pago-msg{
  display:block; min-height:20px; margin-top:12px;
  font-family:var(--font-ui); font-size:13.5px; line-height:1.5;
  color:var(--text-soft);
}
#shopApp .pago-msg.error{ color:var(--err); }

/* El aviso de pedido a medias. No es una línea de texto más: es lo que
   impide cobrar de menos, así que se ve como un bloque y trae encima los
   botones para arreglarlo. Un aviso que dice "falta algo" y no dice
   dónde obliga a buscarlo entre seis pantallas por persona. */
#shopApp .pago-msg.pedido-incompleto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--err);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--err) 6%, var(--base));
  text-align:left;
}
#shopApp .pedido-incompleto .pi-texto{ color:var(--err); }
#shopApp button.pi-ir{
  padding:9px 15px !important;
  border:1px solid var(--err) !important;
  border-radius:999px !important;
  background:var(--base) !important;
  color:var(--err) !important;
  font-family:var(--font-ui);
  font-size:13px;
  cursor:pointer;
}
#shopApp button.pi-ir:hover{
  background:var(--err) !important;
  color:var(--base) !important;
}
#shopApp .pedido-incompleto > button.pi-ir + button.pi-ir{ margin-top:-4px; }

/* El botón de pago manda en su bloque */
#shopApp .reserve .btn{ margin-top:26px; width:100%; justify-content:center; }

/* ============================================================
   LA TIRA DE PERSONAS
   ------------------------------------------------------------
   Dentro de WordPress, Elementor ignora el display y el width que
   shop.css le da a nuestros <button>: la ficha de persona pasaba de
   92px a ocupar los 900px del contenedor y la foto salía gigante,
   con barras de scroll y sin poder desplazarse a las otras personas.
   Aquí se fija con la especificidad necesaria para que no la pise.
   ============================================================ */
#shopApp .people-strip{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 16px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
#shopApp button.person-chip{
  display:flex !important;
  flex:0 0 auto !important;
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  flex-direction:column;
  gap:8px;
  padding:0 !important;
  scroll-snap-align:start;
}
#shopApp .person-chip .thumb{
  display:block !important;
  width:96px !important;
  height:120px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  border-radius:var(--radius);
  background:var(--wash,#f3ece4);
  border:1px solid var(--line-marca-strong);
  position:relative;
}
#shopApp .person-chip.empty .thumb{ border-style:dashed; }
#shopApp .person-chip .thumb img{
  display:block !important;
  width:96px !important;
  height:120px !important;
  max-width:none !important;
  object-fit:cover !important;
}
#shopApp .person-chip .thumb .plus{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; font-weight:300;
  color:var(--line-marca-strong);
}
#shopApp .person-chip.on .thumb{
  border-color:var(--acento) !important;
  box-shadow:0 0 0 1px var(--acento);
}
#shopApp .person-chip .who{
  display:block; font-family:var(--font-ui); font-size:11.5px;
  font-weight:600; color:var(--text-soft); line-height:1.3;
}
#shopApp .person-chip.on .who{ color:var(--marca); }
#shopApp .person-chip .what{
  display:block; margin-top:2px;
  font-family:var(--font-display); font-size:12.5px; color:var(--marca);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* El envío se calcula en el checkout, no aquí */
#shopApp .envio-pend{
  font-family:var(--font-ui); font-size:13px; font-weight:400;
  color:var(--text-soft); text-align:right;
}

/* ============================================================
   AJUSTES 2026-08-25 — paso 1, selección y home
   ============================================================ */

/* ---------- El naranja se reserva para avanzar ----------
   Marcar lo elegido en naranja y además pintar de naranja el botón de
   continuar dejaba dos naranjas compitiendo en la misma pantalla, y
   ninguno de los dos leía como "esto es lo que has elegido". Lo elegido
   pasa a granate de marca; el naranja queda solo para la acción. */
#shopApp button.opt.on,
.opt.on{
  background:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
}

/* ---------- Paso 1 · cuántas personas ---------- */
#shopApp .people-row{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  margin:4px 0 10px;
}
#shopApp button.people-opt{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:auto;
  min-width:0;
  aspect-ratio:1 / 1;
  padding:0 6px !important;
  overflow:hidden;
  transition:border-color .18s ease, background-color .18s ease,
             color .18s ease, transform .18s ease;
}
#shopApp button.people-opt:hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
}
#shopApp button.people-opt.on:hover{ transform:translateY(-2px); }

#shopApp .people-opt .p-n{
  font-family:var(--font-display);
  font-size:clamp(24px, 3.4vw, 34px);
  line-height:1;
  font-weight:500;
}
#shopApp .people-opt .p-t{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-soft);
  transition:color .18s ease;
}
#shopApp .people-opt.on .p-t{ color:color-mix(in srgb, var(--base) 78%, transparent); }

/* La marca de elegido: además del color, un signo que se ve sin color */
#shopApp .people-opt .p-check,
#shopApp .people-more .p-check{
  position:absolute;
  top:7px; right:7px;
  width:15px; height:15px;
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease, transform .18s ease;
}
#shopApp .people-opt.on .p-check,
#shopApp .people-more.on .p-check{ opacity:1; transform:none; }
#shopApp .people-opt .p-check svg,
#shopApp .people-more .p-check svg{
  width:100%; height:100%;
  stroke:currentColor; fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

/* "Somos más de seis": una barra ancha, no una ficha más */
#shopApp button.people-more{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:10px;
  width:100%;
  padding:15px 18px !important;
  text-align:left;
  font-family:var(--font-ui);
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
#shopApp button.people-more:hover{ border-color:var(--marca) !important; }
#shopApp .people-more .pm-t{ font-size:14px; font-weight:600; }
#shopApp .people-more .pm-hint{
  font-size:12px;
  color:var(--text-soft);
  transition:color .18s ease;
}
#shopApp .people-more.on .pm-hint{ color:color-mix(in srgb, var(--base) 76%, transparent); }

#shopApp .people-more-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
#shopApp .people-more-row label{
  font-family:var(--font-ui);
  font-size:13.5px;
  color:var(--text-soft);
}
#shopApp .field-num{
  width:96px;
  padding:11px 14px;
  border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);
  background:var(--base);
  color:var(--marca);
  font-family:var(--font-ui);
  font-size:16px;
}

/* El eco de la elección, en palabras */
#shopApp .people-eco{
  display:flex;
  align-items:center;
  gap:9px;
  margin:20px 0 0;
  font-family:var(--font-ui);
  font-size:13.5px;
  color:var(--text-soft);
}
#shopApp .people-eco svg{
  flex:0 0 auto;
  width:15px; height:15px;
  stroke:var(--acento); fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:640px){
  #shopApp .people-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  #shopApp button.people-more{ padding:14px 16px !important; flex-direction:column; align-items:flex-start; gap:2px; }
}

/* ============================================================
   HOME · "Qué incluye"
   La rejilla de dos columnas tenía la segunda vacía y dentro de la
   primera se apretaban tres ilustraciones con el rótulo en nowrap:
   cada celda medía 130 px y su contenido hasta 206 px, así que los
   nombres se salían y se pisaban. Reparto nuevo.
   ============================================================ */
/* Las reglas de .incluye* vivían aquí. La sección se rehízo el
   2026-09-03 como .necesario (ver el bloque TODO LO NECESARIO al final).
   Las de .crear-* siguen abajo: las ilustraciones no se tocan. */

/* ---------- Lo que podréis crear ----------
   A ancho completo y con las ilustraciones grandes: son dibujos de
   línea hechos para la marca y a 80 px no se veían. */
.jah-pagina .crear{ margin-top:88px; }
.jah-pagina .crear-head{
  margin:0 0 26px;
  text-align:center;
}
.jah-pagina .crear-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:34px;
}
.jah-pagina .crear-card{
  margin:0;
  min-width:0;
  text-align:center;
}
.jah-pagina .crear-marco{
  display:block;
  aspect-ratio:1 / 1;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  /* Las tres ilustraciones son PNG opacos con su propio fondo crema
     (#fcf3e9 / #fcf1e6 / #fbf0e4). El marco lleva ese mismo tono para que
     no se vea la costura entre la caja y el dibujo. */
  background:#FCF1E6;
  overflow:hidden;
}
.jah-pagina .crear-marco img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.jah-pagina .crear-card figcaption{
  display:block;
  margin-top:16px;
}
.jah-pagina .crear-titulo{
  display:block;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--marca);
}
.jah-pagina .crear-pie{
  display:block;
  margin-top:6px;
  font-family:var(--font-ui);
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-soft);
  white-space:normal;
}
.jah-pagina .crear-cola{
  margin:30px 0 0;
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-size:14.5px;
  color:var(--text-soft);
}

@media (max-width:900px){
  .jah-pagina .crear{ margin-top:60px; }
  .jah-pagina .crear-grid{ gap:20px; }
  .jah-pagina .crear-titulo{ font-size:14.5px; }
  .jah-pagina .crear-pie{ font-size:11.5px; }
}
@media (max-width:560px){
  .jah-pagina .crear-grid{ grid-template-columns:1fr; gap:24px; }
  .jah-pagina .crear-card{
    display:grid;
    grid-template-columns:96px minmax(0, 1fr);
    gap:18px;
    align-items:center;
    text-align:left;
  }
  .jah-pagina .crear-card figcaption{ margin-top:0; }
}


/* ===== PASO 2 · KITS Y COLECCIONES ===== */

/* ---------- Filtro de colección: se mira, no solo se lee ----------
   Antes eran cuatro píldoras de texto. No decían qué había dentro de cada
   colección ni cuántos kits eran. */
#shopApp .col-filtro{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:0 0 34px;
}
#shopApp button.cf-card{
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--line-marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#shopApp button.cf-card:hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
}
#shopApp button.cf-card.on{
  border-color:var(--marca) !important;
  box-shadow:0 0 0 1px var(--marca);
}
#shopApp .cf-foto{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--base-alt);
}
#shopApp .cf-foto > img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
#shopApp button.cf-card:hover .cf-foto > img{ transform:scale(1.05); }

/* "Todas": las tres colecciones en un mosaico de tres tiras */
#shopApp .cf-todas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  width:100%; height:100%;
}
#shopApp .cf-todas img{ width:100%; height:100%; object-fit:cover; display:block; }

#shopApp .cf-txt{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:11px 13px 12px;
}
#shopApp .cf-name{
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.2;
  color:var(--marca);
}
#shopApp .cf-n{
  flex:0 0 auto;
  font-family:var(--font-ui);
  font-size:11.5px;
  color:var(--text-soft);
}
#shopApp button.cf-card.on .cf-txt{ background:var(--marca) !important; }
#shopApp button.cf-card.on .cf-name{ color:var(--base); }
#shopApp button.cf-card.on .cf-n{ color:color-mix(in srgb, var(--base) 72%, transparent); }

/* ============================================================
   PASO 2 — el recorrido por persona
   ------------------------------------------------------------
   Estos botones llevan "caja", así que el reseteo de más arriba los
   deja pasar y hay que darles su caja aquí, con especificidad de ID.
   Sin esto se quedan con el botón de Elementor: naranja macizo.

   El color sigue la regla de la casa: el naranja es de la acción, y lo
   elegido va en granate de marca.
   ============================================================ */

/* ---------- Kit · Cadena · Pendientes ---------- */
#shopApp .pz-paso button.caja{
  display:flex !important;
  align-items:center;
  gap:7px;
  padding:7px 13px !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--text-soft) !important;
  font-family:var(--font-ui);
  font-size:13px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
#shopApp .pz-paso button.caja:disabled{ opacity:.4; cursor:default; }
#shopApp .pz-paso button.caja:not(:disabled):hover{ border-color:var(--line-marca-strong) !important; }
#shopApp .pz-paso.hecho button.caja{ color:var(--marca) !important; }
#shopApp .pz-paso.on button.caja{
  background:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
}

/* Con seis pasos no caben seis rótulos en un móvil: 365 píxeles de
   contenido en 295 de ancho, y el último se salía sin que nada indicara
   que existía. Se quedan los números, y el rótulo solo del paso que
   estás haciendo. Sigue diciendo dónde estás y cuántos quedan, que es
   para lo que sirve el raíl. */
@media (max-width:560px){
  #shopApp .pz-paso button.caja{ padding:6px 7px !important; }
  /* El rótulo se va poniendo el cuerpo a cero y devolviéndoselo al
     número: es texto suelto dentro del botón y no hay forma de
     seleccionarlo aparte. */
  #shopApp .pz-paso:not(.on) button.caja{ font-size:0; gap:0; }
  #shopApp .pz-paso:not(.on) button.caja .pz-n{ font-size:12px; }
  #shopApp .pz-paso.on button.caja{
    font-size:12px;
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
  }
}

/* ---------- La tira de personas ---------- */
#shopApp button.pz-chip{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 8px !important;
  border:1px solid var(--line-marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  font-family:var(--font-ui);
  font-size:13px;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#shopApp button.pz-chip:disabled{ opacity:.4; cursor:default; }
#shopApp button.pz-chip:not(:disabled):hover{ border-color:var(--marca) !important; }
/* La persona que se está montando: anillo de marca, sin macizo. */
#shopApp button.pz-chip.on{
  border-color:var(--marca) !important;
  box-shadow:0 0 0 1px var(--marca);
}
/* Ya resuelta: se aparta. Fondo lavado y texto suave — está hecha, no
   hay que volver, y no tiene por qué competir con la que toca ahora. */
#shopApp button.pz-chip.lista:not(.on){
  background:var(--wash, #F6EFE7) !important;
  border-color:var(--line-marca) !important;
}
#shopApp button.pz-chip.lista:not(.on) .pz-chip-n,
#shopApp button.pz-chip.lista:not(.on) .pz-chip-q{ color:var(--text-soft) !important; }
#shopApp button.pz-chip.lista:not(.on) .pz-chip-foto img{ opacity:.72; }
#shopApp .pz-chip .pz-chip-q{ color:var(--text-soft); }

/* ---------- Dorado o plateado ---------- */
#shopApp button.pz-ac{ padding:11px 18px !important; }

/* ---------- Las tarjetas de cadena y pendientes ---------- */
#shopApp button.pz-carta{
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--line-marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#shopApp button.pz-carta:hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
}
#shopApp button.pz-carta.on{
  border-color:var(--marca) !important;
  box-shadow:0 0 0 1px var(--marca);
}
/* La foto va sobre blanco de verdad: son piezas recortadas sobre fondo
   claro y cualquier tinte de la marca detrás se les nota. */
#shopApp .pz-carta .pz-foto{ background:#FFF8F3; }

/* ---------- Los charms ---------- */
/* Todos estos llevan .caja, así que se libran del reseteo de Elementor
   y hay que darles su propia caja aquí; si no, se los queda el botón
   naranja del tema. */
#shopApp button.ch-mas{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  padding:8px 8px 10px !important;
  border:1px solid var(--line-marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#shopApp button.ch-mas:not(:disabled):hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
}
/* Con alguno puesto: anillo granate, como el resto de lo elegido. */
#shopApp .ch-carta.on button.ch-mas{
  border-color:var(--marca) !important;
  box-shadow:0 0 0 1px var(--marca);
}
#shopApp button.ch-mas:disabled{ opacity:.45; cursor:default; }
/* Agotado y sin sitio se ven distinto de "ya no caben más": el primero
   es del almacén y el segundo es del pedido, y quien mira tiene que
   poder distinguirlos sin abrir nada. */
#shopApp .ch-carta.no .ch-estado{ color:var(--marca) !important; opacity:.75; }

/* En el charm del kit se elige uno: anillo granate y marca, igual que
   en la cadena o los pendientes. El anillo ya lo pone .ch-carta.on. */
#shopApp .ck-marca svg{ stroke:currentColor; fill:none; }

/* El − de cada entrada del resumen. */
#shopApp button.ch-grupo-menos{
  width:22px !important;
  height:22px !important;
  min-height:0 !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:15px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-marca) !important;
  border-radius:50% !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  cursor:pointer;
}
#shopApp button.ch-grupo-menos:hover{
  border-color:var(--marca) !important;
  background:var(--wash, #F6EFE7) !important;
}

/* El + de la tarjeta, gemelo del −. */
#shopApp button.ch-mas-uno{
  width:22px !important;
  height:22px !important;
  min-height:0 !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:15px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--marca) !important;
  border-radius:50% !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  cursor:pointer;
}
#shopApp button.ch-mas-uno:hover{ background:var(--wash, #F6EFE7) !important; }
#shopApp button.ch-mas-uno:disabled{ opacity:.35; cursor:default; }

/* Los dos botones del aviso de mezcla: el de volver manda —es el que
   arregla lo que se está avisando—, el de seguir es la salida. */
#shopApp button.ch-aviso-b{
  padding:9px 16px !important;
  border:1px solid var(--marca) !important;
  border-radius:var(--radius) !important;
  background:var(--marca) !important;
  color:var(--base) !important;
  font-family:var(--font-ui);
  font-size:13px;
  cursor:pointer;
}
#shopApp button.ch-aviso-b:hover{ opacity:.9; }
#shopApp button.ch-aviso-ok{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* El nombre de cada entrada del resumen, en una línea y cortado si no
   cabe: en shop.css pierde contra una regla de página, y dos líneas
   hacían la entrada un cincuenta por ciento más alta que la de al lado. */
#shopApp .ch-grupo-n{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#shopApp .ch-grupo .metal{ width:13px; height:13px; flex:0 0 auto; }
/* Y el de la fila de una letra, por lo mismo: dentro de la tarjeta el
   punto solo tiene que distinguir el metal, no enseñarlo. */
#shopApp .lt-fila .metal{ width:13px; height:13px; flex:0 0 13px; }

#shopApp button.ch-menos{
  /* Medidas aquí y no solo en shop.css: el tema le impone su propia
     altura y el círculo salía como un óvalo. */
  width:22px !important;
  height:22px !important;
  min-height:0 !important;
  line-height:1 !important;
  font-size:16px;
  border:1px solid var(--marca) !important;
  border-radius:50% !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  padding:0 !important;
  font-family:var(--font-ui);
  cursor:pointer;
}
#shopApp button.ch-menos:hover{ background:var(--wash, #F6EFE7) !important; }

/* Cada hueco lleno es su propio botón de quitar. */
#shopApp .ch-hueco button{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:4px 10px !important;
  border:1px solid var(--line-marca) !important;
  border-radius:8px !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .18s ease;
}
#shopApp .ch-hueco button:hover{ border-color:var(--marca) !important; }
#shopApp .ch-hueco button:hover .ch-hueco-x{ opacity:1; }

/* Lleva .caja porque si no el reseteo le come el subrayado, y por
   llevarla se la queda el botón naranja de Elementor. Así que aquí se
   le devuelve el aspecto de enlace que le toca: es una salida menor,
   no la acción de la pantalla. */
/* El nombre del charm, en una línea y cortado si no cabe. En shop.css
   pierde contra una regla de página: dos líneas hacían el hueco un
   cincuenta por ciento más alto que el de al lado. */
#shopApp .ch-hueco-n{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* "Verlo" lleva al acabado que de verdad está elegido. Enlace y no
   botón: es un atajo, no la acción de la pantalla. */
/* Los ± de las perlas, como los de los charms: brand.css deja sin
   borde a todo <button> que no sea .caja, y estos lo son, así que sin
   esto se los comería el estilo de botón de Elementor. */
/* El desplegable de la letra. El tema pone Playfair hasta en los
   campos de formulario; una lista de veintiséis letras sueltas se lee
   mejor con la tipografía de interfaz. */
#shopApp select.lt-sel{
  min-width:0;
  padding:5px 6px !important;
  border:1px solid var(--marca) !important;
  border-radius:var(--radius) !important;
  background:#fff !important;
  color:var(--marca) !important;
  font-family:var(--font-ui) !important;
  font-size:15px;
  line-height:1.3;
  cursor:pointer;
}
/* "+ Otra letra": va debajo de los desplegables de la tarjeta, y hace
   lo mismo que pulsar la tarjeta entera. Se escribe porque, con una
   letra ya elegida y su desplegable ocupando el hueco, nadie adivina
   que la foto de arriba sigue sumando. */
#shopApp button.lt-otra{
  width:100%;
  padding:5px 6px !important;
  border:1px dashed var(--line-marca) !important;
  border-radius:var(--radius) !important;
  background:transparent !important;
  color:var(--marca) !important;
  font-family:var(--font-ui) !important;
  font-size:12px;
  line-height:1.3;
  cursor:pointer;
}
#shopApp button.lt-otra:hover{
  border-style:solid !important;
  background:var(--base-alt) !important;
}

#shopApp select.lt-sel:focus-visible{
  outline:2px solid var(--marca);
  outline-offset:2px;
}

/* La i de "Detalle" de un charm: la misma de los kits, pero centrada
   y más pequeña —aquí va debajo de un nombre de 12 px, no de 20—. */
#shopApp button.ch-info{
  align-self:center !important;
  margin-top:5px !important;
  font-size:11.5px;
  gap:4px;
}
#shopApp button.ch-info svg{ width:13px; height:13px; }

/* La salida al resumen. Borde y no relleno: el relleno es de
   "Continuar", que es la acción de esta pantalla mientras quede algo
   por elegir. Esto es la puerta, no el camino. */
#shopApp button.pz-salida-b{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:13px 16px !important;
  text-align:left;
  border:1px solid var(--marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  cursor:pointer;
}
#shopApp button.pz-salida-b:hover{ background:var(--wash, #F6EFE7) !important; }

#shopApp button.pl-mas,
#shopApp button.pl-menos{
  /* Que no los encoja la fila: lo que puede partirse es el texto de al
     lado, no el botón que hay que pulsar. */
  flex:0 0 auto !important;
  width:32px !important;
  height:32px !important;
  min-height:0 !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:18px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--marca) !important;
  border-radius:50% !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  cursor:pointer;
}
#shopApp button.pl-mas:hover,
#shopApp button.pl-menos:hover{ background:var(--wash, #F6EFE7) !important; }
#shopApp button.pl-mas:disabled,
#shopApp button.pl-menos:disabled{ opacity:.35; cursor:default; }

#shopApp button.ck-quitar,
#shopApp button.ck-ver{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
/* El punto de metal del charm del kit. Antes iba en `.ck-elegido`, una
   frase suelta que ya no existe: ahora lo que llevas puesto sale en una
   pastilla `.ch-grupo`, la misma que usan los charms de la cadena, y el
   punto lo dimensiona la regla de ahí arriba. */

#shopApp button.ch-vaciar{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:12.5px;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* Una pieza agotada se queda apagada, pero legible: hay que poder leer
   cuál es la que no está para no volver a buscarla. */
#shopApp button.pz-carta.agotada{ opacity:.5; }
#shopApp button.pz-carta.agotada:hover{ transform:none; }

/* ---------- Copiar la persona anterior entera ---------- */
#shopApp button.pz-todo-b{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:12px 18px !important;
  border:1px solid var(--marca) !important;
  border-radius:var(--radius) !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  font-family:var(--font-ui);
  cursor:pointer;
  transition:background-color .18s ease, box-shadow .18s ease;
}
#shopApp button.pz-todo-b:hover{
  background:var(--wash, #F6EFE7) !important;
  box-shadow:0 0 0 1px var(--marca);
}

/* ---------- Copiar de la persona anterior ---------- */
#shopApp .pz-copiar button{
  color:var(--marca) !important;
  font-family:var(--font-ui);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ---------- Tarjeta de kit ----------
   En rejilla con filas nombradas. Antes la tarjeta no llegaba a ser
   contenedor flex y los tres textos se apilaban unos sobre otros encima
   de la foto. */
#shopApp .kit-pick{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:26px 20px;
}
#shopApp .pick-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}
#shopApp .kit-pick button.pick{
  display:grid !important;
  grid-template-rows:auto auto auto auto;
  justify-items:start;
  gap:0;
  width:100%;
  min-width:0;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  text-align:left;
  cursor:pointer;
  color:var(--marca) !important;
}
#shopApp .kit-pick .pick .frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base-alt);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#shopApp .kit-pick .pick .frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
#shopApp .kit-pick .pick:hover .frame{ border-color:var(--line-marca-strong); }
#shopApp .kit-pick .pick:hover .frame img{ transform:scale(1.045); }
#shopApp .pick-wrap.on .frame{
  border-color:var(--marca) !important;
  box-shadow:0 0 0 1px var(--marca);
}

/* La marca de elegido va DENTRO del marco, sobre la foto */
#shopApp .kit-pick .pick .tick{
  position:absolute;
  top:9px; left:9px;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--marca);
  color:var(--base);
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease, transform .18s ease;
}
#shopApp .pick-wrap.on .tick{ opacity:1; transform:none; }
#shopApp .kit-pick .pick .tick svg{
  width:13px; height:13px;
  stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

#shopApp .kit-pick .pick .coll{
  display:block;
  width:100%;
  margin-top:13px;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.3;
  color:var(--acento-ink);
}
#shopApp .kit-pick .pick .name{
  display:block;
  width:100%;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:1.25;
  color:var(--marca);
}
#shopApp .kit-pick .pick .price{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:100%;
  margin-top:5px;
  font-family:var(--font-ui);
  font-size:14.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
}
#shopApp .kit-pick .pick .price s{
  font-size:12.5px;
  font-weight:400;
  color:var(--text-soft);
  opacity:.75;
}

/* El botón de detalle: hermano del de elegir, no anidado */
#shopApp button.pick-info{
  align-self:flex-start;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin-top:9px;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  font-family:var(--font-ui);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-soft) !important;
  cursor:pointer;
  transition:color .18s ease;
}
#shopApp button.pick-info:hover{ color:var(--marca) !important; }
#shopApp button.pick-info span{ border-bottom:1px solid var(--line-marca-strong); }
#shopApp button.pick-info svg{
  width:15px; height:15px;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Ficha rápida del kit ---------- */
#shopApp ~ .kit-ficha,
.kit-ficha{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  /* lleva la clase .jah-pagina para heredar la marca, y esa clase reserva
     hueco para la cabecera fija: aquí sobra, la ficha flota sobre todo. */
  padding:24px !important;
}
.kit-ficha .kf-fondo{
  position:absolute;
  inset:0;
  background:color-mix(in srgb, #3E000D 58%, transparent);
  animation:kfFondo .22s ease both;
}
@keyframes kfFondo{ from{ opacity:0 } to{ opacity:1 } }

.kit-ficha .kf-caja{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  width:min(840px, 100%);
  max-height:min(560px, calc(100vh - 48px));
  overflow:hidden;
  border-radius:6px;
  background:var(--base);
  box-shadow:0 30px 80px -30px rgba(62,0,13,.55);
  animation:kfEntra .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kfEntra{
  from{ opacity:0; transform:translateY(12px) scale(.985) }
  to  { opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  .kit-ficha .kf-fondo,
  .kit-ficha .kf-caja{ animation:none; }
}

.kit-ficha .kf-foto{ overflow:hidden; background:var(--base-alt); }
.kit-ficha .kf-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

.kit-ficha .kf-cuerpo{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:36px 38px;
  overflow-y:auto;
}
.kit-ficha .kf-coll{
  margin:0;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--acento-ink);
}
.kit-ficha .kf-name{
  margin:6px 0 0;
  font-family:var(--font-display);
  font-size:29px;
  font-weight:500;
  line-height:1.15;
  color:var(--marca);
}
.kit-ficha .kf-desc{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.6;
  color:var(--text-soft);
}
.kit-ficha .kf-incluye{
  margin:16px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line-marca);
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.6;
  color:var(--text-soft);
}
.kit-ficha .kf-incluye strong{ color:var(--marca); font-weight:600; }

/* Las tres piezas del kit. Ocupa el hueco y el alto que ocupaba la
   fila de acabados —mismo gap, mismo margen— para que la caja no
   cambie de tamaño.

   Sin píldoras y sin ticks a propósito: eso es lo que hacía que se
   leyera como dos botones. Un numeral dentro de un círculo de filete
   suave se lee como un índice. Y numerar aquí no es adorno: son las
   tres dinámicas en su orden, las mismas 01/02/03 de la página. */
.kit-ficha .kf-piezas{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  margin-top:18px;
}
/* El rótulo, separado de la lista y no como un elemento más de ella. */
.kit-ficha .kf-piezas .kf-rotulo{
  margin:0 0 1px;
}
.kit-ficha .kf-pieza{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-ui);
  font-size:12.5px;
  color:var(--marca);
}
.kit-ficha .kf-pieza i{
  flex:0 0 20px;
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-marca);
  border-radius:50%;
  background:var(--base-alt);
  font-family:var(--font-display);
  font-style:normal;
  font-size:11.5px;
  line-height:1;
  color:var(--marca);
}

.kit-ficha .kf-acabados{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.kit-ficha .kf-rotulo{
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-soft);
  margin-right:2px;
}
.kit-ficha .kf-acab{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border:1px solid var(--line-marca-strong);
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:12.5px;
  color:var(--marca);
}
.kit-ficha .kf-acab svg{
  width:12px; height:12px;
  stroke:var(--acento); fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.kit-ficha .kf-acab.agotado{ color:var(--text-soft); opacity:.65; }

.kit-ficha .kf-precio{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:22px 0 0;
  font-family:var(--font-ui);
  font-size:24px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
}
.kit-ficha .kf-precio s{ font-size:15px; font-weight:400; color:var(--text-soft); }

.kit-ficha .kf-elegir{ margin-top:18px; align-self:flex-start; }

.kit-ficha button.kf-cerrar{
  position:absolute;
  top:12px; right:12px;
  z-index:2;
  width:36px; height:36px;
  display:flex !important;
  align-items:center; justify-content:center;
  padding:0 !important;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:50% !important;
  background:var(--base) !important;
  color:var(--marca) !important;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.kit-ficha button.kf-cerrar:hover{
  background:var(--marca) !important;
  color:var(--base) !important;
}
.kit-ficha button.kf-cerrar svg{ width:16px; height:16px; }

@media (max-width:1100px){
  #shopApp .kit-pick{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:820px){
  #shopApp .col-filtro{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kit-ficha .kf-caja{
    grid-template-columns:minmax(0, 1fr);
    max-height:calc(100vh - 40px);
  }
  .kit-ficha .kf-foto{ aspect-ratio:16 / 10; }
  .kit-ficha .kf-cuerpo{ padding:26px 24px 30px; }
  .kit-ficha .kf-name{ font-size:25px; }
}
@media (max-width:640px){
  #shopApp .kit-pick{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 14px; }
  #shopApp .kit-pick .pick .name{ font-size:16px; }
  #shopApp .kit-pick .pick .price{ font-size:13.5px; }
  #shopApp .cf-txt{ padding:9px 11px 10px; }
  #shopApp .cf-name{ font-size:14px; }
  .kit-ficha{ padding:12px; }
}


/* ===== COLECCIONES: NAVEGACIÓN Y CATÁLOGO ABIERTO ===== */

/* ---------- Tira de colecciones ----------
   Va bajo el hero en la home y bajo el de cada colección. Misma pieza en
   los dos sitios: siempre se ve dónde estás y qué más hay. */
.jah-pagina .col-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  width:min(1140px, calc(100% - 80px));
  /* El margen de abajo no es decoración: debajo viene la banda burdeos,
     que ocupa el contenedor entero y sobresale 40 px por cada lado de
     estas tarjetas. Sin aire, ese sobrante se pega al borde inferior de
     las tarjetas y parece un error de montaje. */
  margin:56px auto 72px;
}

.jah-pagina .cn-item{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base);
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jah-pagina .cn-item:hover{
  border-color:var(--marca);
  transform:translateY(-3px);
  box-shadow:0 16px 34px -26px rgba(62,0,13,.5);
}
.jah-pagina .cn-item.on{
  border-color:var(--marca);
  box-shadow:0 0 0 1px var(--marca);
}
.jah-pagina .cn-foto{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--base-alt);
}
.jah-pagina .cn-foto > img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.jah-pagina .cn-item:hover .cn-foto > img{ transform:scale(1.05); }

/* "Todas" enseña las tres colecciones en un mosaico */
.jah-pagina .cn-mosaico{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  width:100%; height:100%;
  gap:1px;
}
.jah-pagina .cn-mosaico img{ width:100%; height:100%; object-fit:cover; display:block; }

.jah-pagina .cn-txt{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 13px;
}
.jah-pagina .cn-name{
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.2;
  color:var(--marca);
}
.jah-pagina .cn-n{
  flex:0 0 auto;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-soft);
}
.jah-pagina .cn-item.on .cn-txt{ background:var(--marca); }
.jah-pagina .cn-item.on .cn-name{ color:var(--base); }
.jah-pagina .cn-item.on .cn-n{ color:color-mix(in srgb, var(--base) 72%, transparent); }

/* ---------- Catálogo abierto ---------- */
/* La miga de pan es una tira, no una sección: sin el padding de 112
   que le da la regla general a todo <section>. El aire de verdad lo
   pone el catálogo justo debajo. */
.jah-pagina .jah-kits-cab{ padding:32px 0 0; }
.jah-pagina .jah-kits-cab .breadcrumb{ margin-bottom:0; }

.jah-pagina .jah-catalogo{ padding:44px 0 8px; }

.jah-pagina .cat-filtros{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:40px 0 42px;
}
.jah-pagina button.cat-f{
  padding:10px 22px !important;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:999px !important;
  background:var(--base) !important;
  color:var(--text-soft) !important;
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jah-pagina button.cat-f:hover{
  border-color:var(--marca) !important;
  color:var(--marca) !important;
}
.jah-pagina button.cat-f.on{
  background:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
}

/* ---------- De qué va cada colección ----------
   Sale entre las pestañas y la rejilla, y solo con una colección
   elegida. Sin caja ni fondo: un filete arriba y el texto centrado,
   como el resto de las entradillas de la web. */
.jah-pagina .cat-intro{
  max-width:860px;
  margin:-14px auto 40px;
  padding-top:26px;
  border-top:1px solid var(--line-marca);
  text-align:center;
}
.jah-pagina .cat-intro[hidden],
.jah-pagina .cat-intro-p[hidden]{ display:none !important; }
.jah-pagina .cat-intro-p h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.2;
  color:var(--marca);
}
.jah-pagina .cat-intro-p p{
  margin:0;
  font-family:var(--font-ui);
  font-size:15.5px;
  line-height:1.65;
  color:var(--text-soft);
}
.jah-pagina .cat-intro-nota{
  margin-top:10px !important;
  font-size:12.5px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--acento-ink) !important;
}

@media (max-width:700px){
  .jah-pagina .cat-intro{ margin:-6px auto 30px; padding-top:22px; }
  .jah-pagina .cat-intro-p h3{ font-size:19px; }
  .jah-pagina .cat-intro-p p{ font-size:13.5px; }
}

/* Flex y no grid: al filtrar quedan tres o cinco tarjetas y grid las
   deja pegadas a la izquierda con el hueco entero a la derecha. Flex
   centra la fila que no llega a llenarse, que es lo que se espera de
   una rejilla de producto. El ancho va calculado para que sigan siendo
   cuatro por fila. */
.jah-pagina .cat-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:38px 24px;
}
.jah-pagina .cat-card{ width:calc((100% - 72px) / 4); }
/* Sin esto el filtro no filtra: el display de aquí abajo le gana a la
   regla del navegador para [hidden] y las tarjetas ocultas se siguen
   viendo. */
.jah-pagina .cat-card[hidden]{ display:none !important; }
.jah-pagina .cat-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-decoration:none;
}
.jah-pagina .cat-card .frame{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base-alt);
  transition:border-color .2s ease;
}
.jah-pagina .cat-card .frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.jah-pagina .cat-card:hover .frame{ border-color:var(--line-marca-strong); }
.jah-pagina .cat-card:hover .frame img{ transform:scale(1.045); }

.jah-pagina .cat-col{
  display:block;
  margin-top:14px;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--acento-ink);
}
.jah-pagina .cat-name{
  display:block;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  line-height:1.25;
  color:var(--marca);
}
.jah-pagina .cat-desc{
  display:block;
  margin-top:6px;
  font-family:var(--font-display);
  font-size:14px;
  line-height:1.55;
  color:var(--text-soft);
}
.jah-pagina .cat-precio{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:9px;
  font-family:var(--font-ui);
  font-size:14.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
}
.jah-pagina .cat-precio s{
  font-size:12.5px;
  font-weight:400;
  color:var(--text-soft);
  opacity:.75;
}

.jah-pagina .cat-vacio{
  margin:0;
  padding:40px 0;
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--text-soft);
}

.jah-pagina .cat-cierre{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:60px 0 0;
  text-align:center;
}
.jah-pagina .cat-cierre-nota{
  font-family:var(--font-ui);
  font-size:12.5px;
  color:var(--text-soft);
}

@media (max-width:1100px){
  .jah-pagina .cat-card{ width:calc((100% - 48px) / 3); }
  .jah-pagina .cat-intro{ max-width:720px; }
}
@media (max-width:860px){
  .jah-pagina .col-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:calc(100% - 48px);
    margin-top:40px;
    margin-bottom:48px;
    gap:12px;
  }
  .jah-pagina .jah-catalogo{ padding-top:36px; }
  .jah-pagina .jah-kits-cab{ padding:26px 0 0; }
  .jah-pagina .cat-intro-p p{ font-size:14.5px; }
}
@media (max-width:640px){
  .jah-pagina .cat-grid{ gap:28px 14px; }
  .jah-pagina .cat-card{ width:calc((100% - 14px) / 2); }
  .jah-pagina .cat-intro{ padding-top:20px; margin-bottom:30px; }
  .jah-pagina .cat-name{ font-size:16px; }
  .jah-pagina .cat-desc{ display:none; }   /* en dos columnas estrechas sobra */
  .jah-pagina .cn-name{ font-size:14.5px; }
  .jah-pagina .cn-txt{ padding:10px 11px 11px; }
  .jah-pagina button.cat-f{ padding:9px 16px !important; font-size:12.5px; }
}


/* ===== ENCABEZADO, PASO 1 Y PASO 3 ===== */

/* ============================================================
   1 · ENCABEZADO
   ------------------------------------------------------------
   style.css arrastra del prototipo un bloque header{position:fixed;
   background:transparent} sin prefijar que acaba aplicándose al
   encabezado de Elementor. De ahí que se quedara fijo, transparente y
   sin poder leerse sobre la foto. Estas reglas lo gobiernan a propósito.
   ============================================================ */
/* Quien dejaba fija la cabecera del tema era, sin querer, el bloque
   header{} del prototipo. Ahora que ese bloque va prefijado, hay que
   declararlo aquí y sin depender de .jah-body, que la pone el JS: si se
   esperase, la primera pintada saldría con la cabecera en el flujo y el
   contenido daría un salto. brand.css solo se carga en las páginas
   JEWELSathome, así que esto no sale de ellas. */
body > header.elementor-location-header{
  position:fixed;
  top:var(--jah-top, 0px);
  left:0; right:0;
  z-index:200;
}

.jah-body .elementor-location-header{
  position:fixed;
  top:var(--jah-top, 0px);
  left:0; right:0;
  z-index:200;
  background:transparent;
  transition:transform .32s cubic-bezier(.4, 0, .2, 1),
             background-color .28s ease,
             box-shadow .28s ease;
}

/* Posada = ya no estamos en el hero, así que necesita fondo para leerse */
.jah-body.jah-header-posada .elementor-location-header{
  background:var(--base);
  box-shadow:0 1px 0 var(--line-marca), 0 12px 30px -26px rgba(62, 0, 13, .55);
}

/* Apartada mientras se baja. Vuelve en cuanto se sube un poco. */
.jah-body.jah-header-oculta .elementor-location-header{
  transform:translateY(calc(-100% - var(--jah-top, 0px)));
}

@media (prefers-reduced-motion: reduce){
  .jah-body .elementor-location-header{ transition:none; }
}

/* Con el menú abierto en móvil no se aparta: sería atrapar al visitante */
.jah-body.jah-menu-abierto .elementor-location-header{ transform:none !important; }


/* ============================================================
   2 · PASO 1 · CUÁNTAS PERSONAS
   ------------------------------------------------------------
   El tema inyecta en línea, y con !important, un fondo naranja para
   TODOS los <button>. Los botones con caja quedaron fuera del
   neutralizador, así que ese naranja volvió a ganar y las seis fichas
   salían naranjas. Cada caja propia tiene que declararse con !important.
   ============================================================ */
#shopApp button.opt,
#shopApp button.cf-card,
#shopApp button.people-more,
#shopApp .seg button,
#shopApp .stepper button{
  background-color:var(--base) !important;
  color:var(--marca) !important;
}
#shopApp button.opt{
  border:1px solid var(--line-marca-strong) !important;
  border-radius:var(--radius) !important;
}

/* Lo elegido: granate lleno. El naranja queda solo para "continuar". */
#shopApp button.opt.on,
#shopApp button.people-more.on,
#shopApp .seg button.on,
.opt.on{
  background-color:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
}

/* Las fichas, más presentes y con el número como protagonista */
#shopApp .people-row{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
  margin:6px 0 12px;
}
#shopApp button.people-opt{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:auto;
  min-width:0;
  aspect-ratio:1 / 1;
  padding:0 6px !important;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease,
             color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#shopApp button.people-opt:hover{
  border-color:var(--marca) !important;
  transform:translateY(-3px);
  box-shadow:0 14px 26px -22px rgba(62, 0, 13, .55);
}
#shopApp button.people-opt.on{
  box-shadow:0 14px 30px -20px rgba(62, 0, 13, .6);
}
#shopApp .people-opt .p-n{
  font-family:var(--font-display);
  font-size:clamp(26px, 3.6vw, 38px);
  line-height:1;
  font-weight:500;
}
#shopApp .people-opt .p-t{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-soft);
  transition:color .18s ease;
}
#shopApp .people-opt.on .p-t{ color:color-mix(in srgb, var(--base) 80%, transparent); }
#shopApp .people-opt.on .p-n{ color:var(--base); }


/* ============================================================
   3 · PASO 3 · EL ACABADO
   ------------------------------------------------------------
   Eran dos botones de texto, uno naranja y otro granate, sin ninguna
   relación con el metal que representan; y la elección por persona
   colgaba a la derecha como dos botones sueltos. Ahora se ve el metal.
   ============================================================ */

/* Los dos metales, en grande */
#shopApp .finish-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  max-width:520px;
  margin:4px 0 0;
}
#shopApp button.finish-big{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:16px 18px !important;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:var(--radius) !important;
  background-color:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease,
             color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#shopApp button.finish-big:hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
}
#shopApp button.finish-big.on{
  background-color:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
  box-shadow:0 14px 30px -20px rgba(62, 0, 13, .6);
}

/* La muestra de metal: un degradado que imita el pulido, no un color plano */
.jah-pagina .metal{
  flex:0 0 auto;
  display:block;
  width:38px; height:38px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(62, 0, 13, .18);
}
.jah-pagina .metal-gold{
  background:linear-gradient(140deg, #F6E4BC 0%, #D9AE62 32%, #A87A2C 62%, #E8D3A2 100%);
}
.jah-pagina .metal-silver{
  background:linear-gradient(140deg, #F4F4F2 0%, #C9CBC9 32%, #8E9391 62%, #E4E5E3 100%);
}
#shopApp button.finish-big.on .metal{
  box-shadow:inset 0 0 0 1px rgba(254, 245, 232, .35),
             0 0 0 2px color-mix(in srgb, var(--base) 45%, transparent);
}

#shopApp .finish-big .fb-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#shopApp .finish-big .fb-name{
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.2;
}
#shopApp .finish-big .fb-sub{
  font-family:var(--font-ui);
  font-size:11.5px;
  color:var(--text-soft);
  transition:color .18s ease;
}
#shopApp button.finish-big.on .fb-sub{ color:color-mix(in srgb, var(--base) 78%, transparent); }
#shopApp .finish-big .fb-check{
  margin-left:auto;
  width:18px; height:18px;
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease, transform .18s ease;
}
#shopApp button.finish-big.on .fb-check{ opacity:1; transform:none; }
#shopApp .finish-big .fb-check svg{
  width:100%; height:100%;
  stroke:currentColor; fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
#shopApp button.finish-big[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- "El mismo para todas" / "Uno para cada una" ---------- */
#shopApp .finish-modo{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:32px 0 0;
  padding-top:26px;
  border-top:1px solid var(--line-marca);
}
#shopApp .finish-modo .fm-rotulo{
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--text-soft);
}

/* ---------- Una fila por persona ---------- */
#shopApp .pf-lista{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:22px 0 0;
}
#shopApp .pf-fila{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base-alt);
}
#shopApp .pf-foto{
  width:44px; height:44px;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--base);
}
#shopApp .pf-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
#shopApp .pf-quien{ display:flex; flex-direction:column; gap:1px; min-width:0; }
#shopApp .pf-persona{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-soft);
}
#shopApp .pf-kit{
  font-family:var(--font-display);
  font-size:15.5px;
  color:var(--marca);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#shopApp .pf-opts{ display:flex; gap:8px; }

/* Las muestras pequeñas: círculo de metal, sin texto, con marca al elegir */
#shopApp button.pf-opt{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 7px !important;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:999px !important;
  background-color:var(--base) !important;
  color:var(--marca) !important;
  font-family:var(--font-ui);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
#shopApp button.pf-opt .metal{ width:22px; height:22px; }
/* Dentro de un hueco de charm la muestra es una marca, no un botón: a
   38 píxeles hacía el hueco más alto que los vacíos de al lado. */
#shopApp .ch-hueco .metal{ width:13px; height:13px; flex:0 0 auto; }
#shopApp button.pf-opt:hover{ border-color:var(--marca) !important; }
#shopApp button.pf-opt.on{
  background-color:var(--marca) !important;
  border-color:var(--marca) !important;
  color:var(--base) !important;
}
#shopApp button.pf-opt[disabled]{ opacity:.45; cursor:not-allowed; }

@media (max-width:640px){
  #shopApp .people-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  #shopApp .finish-row{ grid-template-columns:1fr; max-width:none; }
  #shopApp .pf-fila{
    grid-template-columns:40px minmax(0, 1fr);
    row-gap:10px;
  }
  #shopApp .pf-opts{ grid-column:1 / -1; }
  #shopApp button.pf-opt{ flex:1 1 0; justify-content:center; }
}


/* ===== GUÍA DEL KIT ===== */
/* La página que se abre con el QR del kit. Se diseña pensando en un
   móvil sujeto con una mano mientras la otra sostiene la pieza: nada
   que requiera precisión, texto grande y una sola cosa en pantalla. */

/* Cinturón y tirantes: cualquier <header> del contenido JEWELSathome va
   en el flujo normal. Las cabeceras de sección de la guía son <header> y
   heredaban el bloque fijo del prototipo. */
.jah-pagina header{
  position:static;
  top:auto; left:auto; right:auto;
  z-index:auto;
  background:none;
  border-bottom:0;
  transition:none;
}

/* La barra de secciones se pega, y para pegarse necesita que <body> no
   sea un contenedor de scroll. El tema le pone overflow-x:hidden, que lo
   convierte en uno y deja muerto todo position:sticky de dentro. clip
   recorta igual sin crear contenedor. La clase la pone guia.js, así que
   esto no toca ninguna otra página. */
body.jah-guia-pagina{
  overflow-x:clip;
  overflow-y:visible;
}

/* El hueco de arriba lo pone la guía como todas las demás páginas: la
   cabecera del sitio es fija y sin este hueco la barra de secciones
   arrancaba por debajo de ella. */
.jah-guia{ padding-top:var(--jah-header-h, 88px) !important; }

/* ---------- Barra de secciones ----------
   Pegajosa: se pasa mucho rato dentro de un tutorial, y volver a los
   demás no debería obligar a subir hasta arriba. */
.jah-guia .gv-nav{
  position:sticky;
  /* Justo debajo de la cabecera del sitio, contando la barra de
     administración de WordPress cuando la hay. */
  top:calc(var(--jah-top, 0px) + var(--jah-header-h, 88px));
  z-index:30;
  transition:transform .32s cubic-bezier(.4, 0, .2, 1);
  background:color-mix(in srgb, var(--base) 94%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-marca);
}
.jah-guia .gv-nav-in{
  display:flex;
  align-items:center;
  gap:24px;
  max-width:1140px;
  margin:0 auto;
  padding:12px 24px;
}
.jah-guia .gv-marca{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.02em;
  color:var(--marca);
}
.jah-guia .gv-marca em{ font-style:italic; color:var(--acento-ink); }

.jah-guia .gv-nav-links{
  display:flex;
  gap:4px;
  margin-left:auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.jah-guia .gv-nav-links::-webkit-scrollbar{ display:none; }

.jah-guia button.gv-nav-b{
  flex:0 0 auto;
  padding:9px 16px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--text-soft) !important;
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.jah-guia button.gv-nav-b:hover{ color:var(--marca) !important; }
.jah-guia button.gv-nav-b.on{
  background:var(--marca) !important;
  color:var(--base) !important;
}

/* Se aparta con la cabecera y vuelve con ella. Sube su propio alto más
   todo lo que tiene encima, que es exactamente lo que la deja fuera de
   pantalla; el mismo cálculo que usa la cabecera del tema. */
.jah-body.jah-header-oculta .jah-guia .gv-nav{
  transform:translateY(calc(-100% - var(--jah-top, 0px) - var(--jah-header-h, 88px)));
}

/* Con el menú del móvil desplegado no se mueve ninguna de las dos: sería
   dejar el menú abierto y sin forma de cerrarlo. */
.jah-body.jah-menu-abierto .jah-guia .gv-nav{
  transform:none !important;
}

@media (prefers-reduced-motion: reduce){
  .jah-guia .gv-nav{ transition:none; }
}

/* ============================================================
   LA PORTADA
   ============================================================ */

/* Las tarjetas de colección. Sus dos mitades son <span> dentro de un
   <a>, o sea cajas en línea, y a una caja en línea no le afectan ni el
   alto ni aspect-ratio ni overflow. La foto salía a tamaño natural
   —275 × 549 en vez de 275 × 275— y el texto se quedaba fuera de la
   tarjeta, 119 px dentro de la sección de abajo. Poniendo la tarjeta en
   columna, sus hijos pasan a ser cajas de bloque y las reglas que ya
   había en style.css empiezan a aplicarse. */
.jah-pagina .col-card{
  display:flex;
  flex-direction:column;
}
.jah-pagina .col-card .photo{
  display:block;
  width:100%;
}
.jah-pagina .col-card .meta{
  width:100%;
}

/* WordPress subraya todos los enlaces desde su hoja global:
   a:where(:not(.wp-element-button)){text-decoration:underline}. Aquí las
   tarjetas y los botones son enlaces enteros, así que el subrayado caía
   sobre el título, el lema y el botón de cada uno. Los subrayados
   puestos a propósito llevan más clases y ganan a esta regla. */
/* Con "body" delante a propósito. Sin él empata en peso con
   ".page-content a{text-decoration:underline}" de theme.css, que carga
   después y ganaba por orden. Los subrayados puestos a propósito
   (.includes-link, .reviews-count) llevan dos clases y siguen ganando a
   esta regla, que es lo que se busca. */
body .jah-pagina a,
body .jah-pagina a:hover,
body .jah-pagina a:focus{
  text-decoration:none;
}

/* ---------- Hero ---------- */
.jah-guia .gv-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(72vh, 560px);
  overflow:hidden;
}
.jah-guia .gv-hero-media{ position:absolute; inset:0; }
.jah-guia .gv-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.jah-guia .gv-hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--marca) 20%, transparent) 0%,
    color-mix(in srgb, var(--marca) 78%, transparent) 100%);
}
.jah-guia .gv-hero-txt{
  position:relative;
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 24px 56px;
  color:var(--base);
}
.jah-guia .gv-hero-txt h1{
  max-width:16ch;
  margin:12px 0 0;
  font-family:var(--font-display);
  font-size:clamp(32px, 6vw, 52px);
  font-weight:500;
  line-height:1.08;
  color:var(--base) !important;
}
.jah-guia .gv-hero-txt p{
  max-width:44ch;
  margin:16px 0 0;
  font-family:var(--font-display);
  font-size:clamp(15.5px, 2.2vw, 18px);
  line-height:1.6;
  color:color-mix(in srgb, var(--base) 90%, transparent);
}
.jah-guia .gv-hero .gv-etiqueta{ color:color-mix(in srgb, var(--base) 82%, transparent); }
.jah-guia button.gv-empezar{ margin-top:28px; }

.jah-guia .gv-etiqueta{
  display:block;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento-ink);
}

/* ---------- Cómo funciona ---------- */
.jah-guia .gv-comofunciona{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
  margin:64px 0 0;
  padding:0;
  list-style:none;
}
.jah-guia .gv-comofunciona li{ min-width:0; }
.jah-guia .gv-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--marca);
  color:var(--base);
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
}
.jah-guia .gv-comofunciona h3{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  color:var(--marca);
}
.jah-guia .gv-comofunciona p{
  margin:7px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-soft);
}

.jah-guia .gv-atajo{
  margin:56px 0 0;
  padding-top:28px;
  border-top:1px solid var(--line-marca);
  text-align:center;
  font-family:var(--font-ui);
  font-size:14.5px;
  color:var(--text-soft);
}
.jah-guia button.gv-enlace{
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:var(--acento-ink) !important;
  font-family:var(--font-ui);
  font-size:14.5px;
  font-weight:600;
  border-bottom:1px solid currentColor !important;
  border-radius:0 !important;
  cursor:pointer;
}

/* ---------- Cabecera de vista ---------- */
.jah-guia .gv-vista{ padding:56px 0 88px; }
.jah-guia .gv-vista[data-vista="inicio"]{ padding-top:0; }
.jah-guia .gv-cab{ max-width:640px; margin:0 0 44px; }
.jah-guia .gv-cab h2{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-size:clamp(26px, 4vw, 36px);
  font-weight:500;
  line-height:1.15;
  color:var(--marca);
}
.jah-guia .gv-cab p{
  margin:12px 0 0;
  font-size:16px;
  line-height:1.65;
  color:var(--text-soft);
}

/* ---------- Las tres piezas ---------- */
.jah-guia .gv-piezas{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:26px;
}
.jah-guia .gv-pieza{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:26px 24px 26px;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base-alt);
}
.jah-guia .gv-pieza-foto{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  margin-bottom:18px;
  overflow:hidden;
  border-radius:var(--radius);
  background:#FCF1E6;
}
.jah-guia .gv-pieza-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.jah-guia .gv-bolsa{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  background:var(--marca);
  color:var(--base);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
}
.jah-guia .gv-pieza h3{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  color:var(--marca);
}
.jah-guia .gv-pieza p{
  margin:8px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-soft);
}
.jah-guia .gv-cuantos{
  margin-top:10px !important;
  font-family:var(--font-ui);
  font-size:12.5px;
  color:var(--acento-ink) !important;
}
.jah-guia button.gv-ver{ margin-top:18px; }

/* ---------- Dinámicas y opciones ---------- */
.jah-guia .gv-dinamica{
  padding:36px 0;
  border-top:1px solid var(--line-marca);
  transition:background-color .5s ease;
}
.jah-guia .gv-dinamica:first-of-type{ border-top:0; padding-top:0; }
.jah-guia .gv-dinamica.gv-destacado{
  background:color-mix(in srgb, var(--acento) 8%, transparent);
}
.jah-guia .gv-din-cab{ max-width:620px; margin-bottom:24px; }
.jah-guia .gv-din-num{
  display:block;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--acento-ink);
}
.jah-guia .gv-din-cab h3{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-size:clamp(22px, 3.2vw, 29px);
  font-weight:500;
  color:var(--marca);
}
.jah-guia .gv-din-cab p{
  margin:9px 0 12px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-soft);
}

.jah-guia .gv-opciones{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.jah-guia button.gv-opcion{
  display:flex !important;
  align-items:center;
  gap:16px;
  width:100%;
  padding:14px 16px !important;
  border:1px solid var(--line-marca-strong) !important;
  border-radius:var(--radius) !important;
  background-color:var(--base) !important;
  color:var(--marca) !important;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.jah-guia button.gv-opcion:hover{
  border-color:var(--marca) !important;
  transform:translateY(-2px);
  box-shadow:0 14px 28px -22px rgba(62, 0, 13, .55);
}
.jah-guia .gv-opcion-foto{
  flex:0 0 auto;
  width:58px; height:58px;
  overflow:hidden;
  border-radius:var(--radius);
  background:#FCF1E6;
}
.jah-guia .gv-opcion-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.jah-guia .gv-opcion-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.jah-guia .gv-opcion-nombre{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.25;
}
.jah-guia .gv-opcion-lema{
  font-family:var(--font-ui);
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-soft);
}
.jah-guia .gv-opcion-ir{
  flex:0 0 auto;
  margin-left:auto;
  width:20px; height:20px;
  color:var(--acento);
}
.jah-guia .gv-opcion-ir svg{ width:100%; height:100%; }

/* ---------- Un tutorial ---------- */
.jah-guia button.gv-volver{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  margin-bottom:26px;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:var(--text-soft) !important;
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}
.jah-guia button.gv-volver:hover{ color:var(--marca) !important; }
.jah-guia .gv-volver svg{ width:17px; height:17px; }

/* El <header> de cada tutorial nunca tuvo reglas propias: se apoyaba en
   el bloque del prototipo. Ahora se declara. */
.jah-guia .gv-tut-cab{ max-width:640px; margin:0; }

.jah-guia .gv-migas{
  margin:0;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--acento-ink);
}
.jah-guia .gv-tut-titulo{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-size:clamp(28px, 4.4vw, 40px);
  font-weight:500;
  line-height:1.1;
  color:var(--marca);
}
.jah-guia .gv-tut-lema{
  margin:10px 0 0;
  font-size:16.5px;
  line-height:1.6;
  color:var(--text-soft);
}

.jah-guia .gv-tut-cuerpo{
  display:grid;
  grid-template-columns:minmax(0, 340px) minmax(0, 1fr);
  gap:40px;
  align-items:start;
  margin-top:36px;
}

/* El vídeo es vertical: se ve en el móvil, con la pieza en la mano */
.jah-guia .gv-video{
  position:sticky;
  top:calc(var(--jah-top, 0px) + var(--jah-header-h, 88px) + var(--jah-nav-h, 66px) + 16px);
  aspect-ratio:9 / 16;
  overflow:hidden;
  border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);
  background:var(--base-alt);
}
.jah-guia .gv-video-hueco{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:100%;
  padding:28px 24px;
  text-align:center;
}
.jah-guia .gv-play{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px; height:58px;
  border:1px solid var(--line-marca-strong);
  border-radius:50%;
  color:var(--acento);
}
.jah-guia .gv-play svg{ width:26px; height:26px; }
.jah-guia .gv-video-nota{
  margin:6px 0 0;
  font-family:var(--font-display);
  font-size:15.5px;
  line-height:1.5;
  color:var(--marca);
}
.jah-guia .gv-video-pista{
  margin:0;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--text-soft);
}

.jah-guia .gv-pasos-titulo{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  color:var(--marca);
}
.jah-guia .gv-pasos{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:gvpaso;
}
.jah-guia .gv-paso{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr);
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-marca);
}
.jah-guia .gv-paso::before{
  content:counter(gvpaso);
  counter-increment:gvpaso;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--line-marca-strong);
  border-radius:50%;
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  color:var(--marca);
}
.jah-guia .gv-paso-txt{
  font-size:15.5px;
  line-height:1.65;
  color:var(--tinta);
}

.jah-guia .gv-pendiente{
  padding:24px 26px;
  border:1px dashed var(--line-marca-strong);
  border-radius:var(--radius);
  background:var(--base-alt);
}
.jah-guia .gv-pendiente p{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.65;
  color:var(--text-soft);
}
.jah-guia .gv-pendiente p:last-child{ margin-bottom:0; }
.jah-guia .gv-pendiente strong{ color:var(--marca); }

.jah-guia .gv-tut-pie{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line-marca);
}
.jah-guia .gv-ayuda{
  margin:0;
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--text-soft);
}

/* ---------- Cuidados ---------- */
.jah-guia .gv-consejos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}
.jah-guia .gv-consejo{
  padding:24px 26px;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base-alt);
}
.jah-guia .gv-consejo h3{
  margin:0;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  color:var(--marca);
}
.jah-guia .gv-consejo p{
  margin:8px 0 0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-soft);
}
.jah-guia .gv-comparte{
  margin-top:40px;
  padding:32px 30px;
  border-radius:var(--radius);
  background:var(--marca);
  text-align:center;
}
.jah-guia .gv-comparte h3{
  margin:0;
  font-family:var(--font-display);
  font-size:23px;
  font-weight:500;
  color:var(--base) !important;
}
.jah-guia .gv-comparte p{
  margin:10px auto 0;
  max-width:46ch;
  font-size:15.5px;
  line-height:1.65;
  color:color-mix(in srgb, var(--base) 86%, transparent);
}
.jah-guia .gv-comparte strong{ color:var(--base); }

/* ============================================================
   Móvil — es donde se va a usar de verdad
   ============================================================ */
@media (max-width:900px){
  .jah-guia .gv-tut-cuerpo{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .jah-guia .gv-video{
    position:static;
    max-width:320px;
    margin:0 auto;
  }
  .jah-guia .gv-piezas{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .jah-guia .gv-comofunciona{ grid-template-columns:1fr; gap:26px; margin-top:44px; }
  .jah-guia .gv-consejos{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  /* Fuera el rótulo. Ocupaba 101 px de los 343 que hay, dejaba dos de
     las cuatro pestañas fuera de pantalla, y pegado a ellas y con su
     mismo tono se leía como una pestaña más que al tocarla no hacía
     nada. La marca sigue arriba, en el logo del sitio. */
  .jah-guia .gv-marca{ display:none; }
  .jah-guia .gv-nav-in{ padding:10px 16px; gap:0; }
  .jah-guia .gv-nav-links{
    width:100%;
    margin-left:0;
    gap:0;
    justify-content:space-between;
  }
  .jah-guia button.gv-nav-b{ padding:8px 13px !important; font-size:13px; }
  .jah-guia .gv-hero{ min-height:auto; padding-top:52vw; }
  /* Por debajo de 380 los cuatro botones no caben a 13 px con 13 de aire
     a cada lado. Se aprieta el relleno antes que dejarlos desbordar. */
  @media (max-width:380px){
    .jah-guia .gv-nav-in{ padding:10px 12px; }
    .jah-guia button.gv-nav-b{ padding:8px 9px !important; font-size:12.5px; }
  }
  .jah-guia .gv-hero-txt{ padding:0 16px 36px; }
  .jah-guia .gv-vista{ padding:36px 0 64px; }
  .jah-guia .gv-piezas{ grid-template-columns:1fr; }
  .jah-guia .gv-pieza{ padding:20px 18px; }
  .jah-guia .gv-pieza-foto{ aspect-ratio:16 / 9; }
  .jah-guia .gv-opciones{ grid-template-columns:1fr; }
  .jah-guia button.gv-opcion{ padding:12px 14px !important; gap:13px; }
  .jah-guia .gv-opcion-foto{ width:50px; height:50px; }
  .jah-guia .gv-paso{ grid-template-columns:28px minmax(0, 1fr); gap:13px; padding:15px 0; }
  .jah-guia .gv-paso::before{ width:28px; height:28px; font-size:12.5px; }
  .jah-guia .gv-comparte{ padding:26px 20px; }
  .jah-guia .gv-atajo{ margin-top:40px; }
}

@media (prefers-reduced-motion: reduce){
  .jah-guia *{ transition:none !important; }
}


/* ============================================================
   REPASO RESPONSIVE — 2026-08-29
   Va al final a propósito: son ajustes de tamaño sobre reglas ya
   escritas más arriba, y aquí ganan sin necesidad de !important.
   ============================================================ */

/* ---------- Escritorio ---------- */

/* Las tarjetas de pieza no crecen sin freno. Una foto de cadena a 380
   de ancho deja de leerse como producto y empieza a leerse como cartel;
   además, cuatro tarjetas anchas obligan a bajar la vista para
   compararlas, que es justo lo que esta pantalla evita. */
#shopApp .pz-rejilla{ max-width:1000px; }

/* La tira de personas, cuando son cinco o seis, no se estira de lado a
   lado: se queda con el resto del contenido. */
#shopApp .pz-tira{ max-width:1000px; }

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .jah-pagina .jah-comprar .section-head{ padding-top:36px; }
  .jah-pagina .jah-comprar .section-head h2{ font-size:30px; }
}

/* ---------- Móvil ---------- */
@media (max-width:560px){
  /* El titular de la página, más contenido: se entra a hacer algo, no a
     leer una portada. */
  .jah-pagina .section-head h2{ font-size:25px; line-height:1.2; }
  .jah-pagina .section-head p{ font-size:14px; line-height:1.55; }
  .jah-pagina .section-head{ margin-bottom:32px; }
  .jah-pagina .jah-comprar .section-head{ padding-top:26px; }

  /* Página de kits: cabecera y panel de colección al tamaño del móvil. */
  .jah-pagina .jah-kits-cab{ padding:20px 0 0; }
  .jah-pagina .jah-catalogo{ padding-top:28px; }
  .jah-pagina .cat-intro{ padding-top:18px; margin:0 auto 26px; }
  .jah-pagina .cat-intro-p h3{ font-size:18px; margin-bottom:8px; }
  .jah-pagina .cat-intro-p p{ font-size:13.5px; line-height:1.55; }
  .jah-pagina .cat-intro-nota{ font-size:11.5px !important; margin-top:8px !important; }
}

/* Las cuatro pestañas, dos por fila. Sueltas caben tres y la cuarta se
   queda sola debajo, que parece un fallo; en rejilla es una decisión, y
   de paso el área de toque crece. */
@media (max-width:520px){
  .jah-pagina .cat-filtros{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
    margin:26px 0 28px;
  }
  .jah-pagina button.cat-f{ width:100%; text-align:center; }
}

/* Debajo de 400 el recorrido por persona se queda sin sitio: las
   tarjetas de pieza bajan a una columna, porque dos de 150 ya no dejan
   ver ni la foto ni el nombre. */
@media (max-width:400px){
  #shopApp .pz-rejilla-3,
  #shopApp .pz-rejilla-4{ grid-template-columns:minmax(0,1fr); }
  #shopApp .pz-foto{ aspect-ratio:16/10; }
}

/* ---------- Móvil: área de toque ----------
   Medido a 390: los ± de los charms salían a 22 px y los enlaces de
   "Detalle" y "copiar" a 21 de alto, que es la altura de la letra. Se
   agrandan sin moverlos de sitio ni cambiar cómo se ven. */
@media (max-width:560px){
  #shopApp button.ch-menos,
  #shopApp button.ch-mas-uno,
  #shopApp button.ch-grupo-menos{
    width:30px !important;
    height:30px !important;
    font-size:17px;
  }
  #shopApp button.pl-mas,
  #shopApp button.pl-menos{
    width:36px !important;
    height:36px !important;
  }
  /* El desplegable de la letra es el único control de su tarjeta: en
     móvil tiene que poder pulsarse sin apuntar. */
  #shopApp select.lt-sel{
    min-height:34px;
    font-size:16px;   /* 16 o menos y Safari hace zoom al abrirlo */
  }
  /* Enlaces con relleno: el subrayado sigue donde estaba, pero se puede
     pulsar sin apuntar. */
  #shopApp .pz-copiar button,
  #shopApp button.ck-quitar,
  #shopApp button.ck-ver,
  #shopApp button.ch-vaciar{
    padding:8px 2px !important;
  }
  /* Con 'button' delante: enfrente está #shopApp button.pick-info con
     padding:0 !important, y entre dos !important gana el más
     específico, no el que va después. Sin el tipo, esto no se aplicaba. */
  #shopApp button.pick-info{
    padding:7px 10px !important;
  }
  /* La de los charms va dentro de una tarjeta estrecha: relleno vertical
     para el dedo, y horizontal el justo para no desbordarla. */
  #shopApp button.ch-info{
    padding:7px 4px !important;
  }
}

/* ============================================================
   A SANGRE · secciones que rompen el contenedor de 1140 del tema
   ============================================================
   El body lleva overflow-x:hidden, así que los ~7 px que sobran por
   lado (media barra de scroll) se recortan solos y no sale barra
   horizontal. Comprobado en la web, no supuesto. */
.jah-pagina .a-sangre{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* Romper el contenedor sin ensanchar el contenido no arregla nada:
   solo mueve el recuadro. El carril interior crece con la pantalla
   hasta 1680 y ahí se para. */
.jah-pagina .a-sangre > .wrap,
.jah-pagina .a-sangre > .nc-rejilla{
  width:100%;
  max-width:min(1680px, 100% - 112px);
  margin-left:auto; margin-right:auto;
  padding-left:0; padding-right:0;
}

/* ---------- «Cómo funciona», ahora que su carril es más ancho ----------
   ⚠️ Los tamaños en píxeles de style.css estaban medidos contra un
   carril de 1060 que ya no existe. Aquí se miden contra el contenedor
   real con «cqw», que es lo único que no miente cuando el carril crece
   con la pantalla pero se para en un tope. La cuenta sigue siendo la
   misma: el titular admite como mucho el ancho de su columna × 0,163, y
   su columna es el 30,9 % del carril → 5,04 cqw. Se usa 4,7 para dejar
   holgura, y un tope en px para pantallas absurdas.

   Si el navegador no entiende «cqw» descarta estas reglas enteras y se
   queda con las de style.css, que están medidas y funcionan. */
@supports (width: 1cqw){
  .jah-pagina .cf-rejilla{ container-type:inline-size; }
  .jah-pagina .cf-titular h2{ font-size:min(4.7cqw, 84px); }
  .jah-pagina .cf-cifra-n{ font-size:min(13cqw, 220px); }
  .jah-pagina .cf-n{ font-size:min(3cqw, 52px); }
  .jah-pagina .cf-rotulo h3{ font-size:clamp(15px, 1.35cqw, 19px); }
  .jah-pagina .cf-nota{ font-size:clamp(12.5px, 1.05cqw, 15px); }
  /* El desnivel de la columna del medio también es proporción, no una
     medida: era 70 px sobre un carril de 1060. */
  .jah-pagina .cf-paso-2{ margin-top:min(6.6cqw, 110px); }
  /* Y el hueco bajo el 03 va con el cuerpo del 03: el 3 de Playfair es
     descendente y baja ~0,15 em de la línea base. */
  .jah-pagina .cf-cifra-pie{ margin-top:min(3.4cqw, 58px); }
}
/* Apilada, manda la ventana otra vez: no hay columnas que respetar. */
@media (max-width: 1120px){
  .jah-pagina .a-sangre > .wrap,
  .jah-pagina .a-sangre > .nc-rejilla{ max-width:min(1680px, 100% - 40px); }
  @supports (width: 1cqw){
    .jah-pagina .cf-titular h2{ font-size:clamp(32px, 6.4vw, 52px); }
    .jah-pagina .cf-cifra-n{ font-size:clamp(62px, 13vw, 104px); }
    .jah-pagina .cf-cifra-pie{ margin-top:22px; }
    .jah-pagina .cf-n{ font-size:32px; }
    .jah-pagina .cf-rotulo h3{ font-size:16.5px; }
    .jah-pagina .cf-paso-2{ margin-top:clamp(36px, 5vw, 56px); }
  }
}

@media (max-width: 860px){
  @supports (width: 1cqw){
    .jah-pagina .cf-paso-2{ margin-top:0; }
  }
}

/* ============================================================
   TODO LO NECESARIO · la sección de «qué incluye», rehecha
   ============================================================
   Dos mitades a sangre: la foto pegada al borde izquierdo de la
   pantalla y el texto en el crema de la página. Sin recuadro y sin
   franjas vacías a los lados, que es lo que se pedía. */
.jah-pagina .necesario{ padding:0; }
.jah-pagina .nc-rejilla{
  display:grid;
  grid-template-columns:1.58fr 1fr;
  /* La separación entre foto y texto la da la rejilla, no el relleno
     del texto: así el texto acaba alineado con el borde del carril,
     igual que las ilustraciones de más abajo. */
  gap:clamp(28px, 3.6vw, 72px);
  align-items:stretch;
  container-type:inline-size;
}

/* ---------- La foto ---------- */
.jah-pagina .nc-foto{ margin:0; position:relative; }
.jah-pagina .nc-marco{
  position:relative;
  display:block;
  width:100%; height:100%;
  /* La proporción la fija el panel, no la foto: la original trae abajo una
     franja de crema vacío que sin recortar dejaba 336 px muertos.
     760/700 la corta justa. Si la columna de texto creciera y el panel se
     estirara, height:100% gana y los rótulos siguen valiendo, porque el
     recorte «cover» escala SIEMPRE por el ancho. */
  aspect-ratio:760 / 700;
  /* Contenedor propio para que los rótulos se anclen a la IMAGEN. */
  container-type:inline-size;
  overflow:hidden;
  background:var(--base-alt,#FFF8F3);
}
.jah-pagina .nc-foto img{
  /* Absoluta: la proporción del panel la fija .nc-marco, no la foto. */
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
}

/* ---------- Los rótulos sobre la foto ----------
   Cada uno se ancla en el punto que señala (--x/--y) y de ahí sale un
   filete horizontal hasta el texto. El punto va sobre la pieza; el
   texto, apartado, donde no la tapa. */
.jah-pagina .nc-rotulo{
  /* ⚠️ ANCLADOS A LA IMAGEN, NO AL PANEL. Con object-fit:cover y
     object-position:top, la foto se escala por ancho: un punto de la
     foto original (760 px de ancho) cae siempre en la misma posición
     relativa, mida lo que mida de alto el panel. Por eso --y es el
     PÍXEL de la foto original, no un porcentaje: si fuera un %, cada
     cambio de texto en la otra columna movería los rótulos fuera de la
     pieza que señalan. */
  position:absolute;
  left:var(--x);
  top:calc(var(--y) / 760 * 100cqw);
  display:flex; align-items:center; gap:0;
  font-size:clamp(11px, 1.05cqw, 14px);
  line-height:1.3;
  color:var(--marca);
  white-space:nowrap;
  pointer-events:none;
}
/* El puntito que marca la pieza exacta. */
.jah-pagina .nc-rotulo::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:var(--marca);
  flex:0 0 auto;
}
.jah-pagina .nc-rotulo-txt{
  position:relative;
  padding:3px 9px;
  background:color-mix(in srgb, var(--base) 88%, transparent);
}
/* El filete que une el punto con el texto. */
.jah-pagina .nc-rotulo-txt::before{
  content:"";
  position:absolute; top:50%;
  width:clamp(26px, 4cqw, 62px); height:1px;
  background:color-mix(in srgb, var(--marca) 55%, transparent);
}
.jah-pagina .nc-izq{ transform:translate(-100%, -50%); flex-direction:row-reverse; }
.jah-pagina .nc-izq .nc-rotulo-txt::before{ right:0; transform:translateX(100%); }
.jah-pagina .nc-izq .nc-rotulo-txt{ margin-right:clamp(26px, 4cqw, 62px); }
.jah-pagina .nc-der{ transform:translate(0, -50%); }
.jah-pagina .nc-der .nc-rotulo-txt::before{ left:0; transform:translateX(-100%); }
.jah-pagina .nc-der .nc-rotulo-txt{ margin-left:clamp(26px, 4cqw, 62px); }

/* ---------- La mitad de texto ---------- */
.jah-pagina .nc-texto{
  /* Su propio contenedor: el titular tiene que medirse contra la columna
     que lo sostiene (558 px), no contra la rejilla entera (1440). Medido
     con 4,35cqw de la rejilla salía a 62 px y se partía en CUATRO líneas
     dentro de 414 px de hueco. */
  container-type:inline-size;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px, 4cqw, 64px) 0;
}
.jah-pagina .nc-texto h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:min(8.9cqw, 62px);   /* «Todo lo necesario.» cabe hasta 53 px en 414 */
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--marca);
}
.jah-pagina .nc-lead{
  margin:clamp(16px, 4.4cqw, 28px) 0 0;
  max-width:34ch;
  font-size:clamp(15px, 3.5cqw, 19px);
  line-height:1.6;
  color:var(--text-soft);
}
.jah-pagina .nc-lead strong{ color:var(--marca); font-weight:600; }

.jah-pagina .nc-datos{
  list-style:none;
  margin:clamp(26px, 7.2cqw, 46px) 0 0;
  padding:0;
  display:flex; flex-direction:column;
  gap:clamp(12px, 3.4cqw, 20px);
}
.jah-pagina .nc-datos li{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(14px, 3.2cqw, 17px);
  color:var(--marca);
}
.jah-pagina .nc-datos svg{ flex:0 0 auto; color:var(--marca); }

.jah-pagina .nc-acciones{ margin:clamp(26px, 7.2cqw, 44px) 0 0; }
/* El botón del mockup es un bloque burdeos de esquina viva, no la
   píldora en versalitas del resto de la web. */
.jah-pagina a.nc-cta{
  display:inline-block;
  padding:17px 44px;
  border-radius:2px;
  background:var(--marca);
  border:1px solid var(--marca);
  color:var(--base);
  font-family:var(--font-display);
  font-size:clamp(15px, 3.35cqw, 18px);
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  text-decoration:none;
  transition:background .25s ease, border-color .25s ease, transform .16s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .jah-pagina a.nc-cta:hover{ background:var(--secundario); border-color:var(--secundario); }
}
.jah-pagina a.nc-cta:active{ transform:scale(.985); }

.jah-pagina .nc-nota{
  margin:clamp(16px, 4.1cqw, 26px) 0 0;
  font-size:clamp(13px, 2.8cqw, 15px);
  color:var(--text-soft);
}

/* La tira de rótulos solo aparece cuando desaparecen de la foto. */
.jah-pagina .nc-tira{ display:none; }

/* Las tres ilustraciones vuelven al carril normal de la página. */
.jah-pagina .necesario > .wrap{ padding-top:clamp(56px, 6vw, 96px); padding-bottom:clamp(56px, 6vw, 96px); }

/* ---------- Estrecho ----------
   Dos mitades dejan de tener sentido: la foto pasa arriba a lo ancho y
   el texto debajo. Y los rótulos salen de encima de la foto, donde a
   este tamaño se taparían entre ellos, y pasan a una tira legible. */
@media (max-width: 860px){
  /* El carril sigue mandando aquí (la regla de «.a-sangre >» gana por
     especificidad), y así la foto queda alineada con las ilustraciones
     y con las fichas de los universos en vez de ir a sangre ella sola. */
  .jah-pagina .nc-rejilla{ grid-template-columns:1fr; gap:0; }
  .jah-pagina .nc-marco{ aspect-ratio:16 / 11; }
  .jah-pagina .nc-foto img{ object-position:center 42%; }
  .jah-pagina .nc-rotulo{ display:none; }
  .jah-pagina .nc-tira{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:10px 22px;
    list-style:none;
    margin:0; padding:18px 20px 0;
    font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-soft);
  }
  .jah-pagina .nc-tira li{ display:flex; align-items:center; gap:8px; }
  .jah-pagina .nc-tira li::before{
    content:""; width:4px; height:4px; border-radius:50%;
    background:var(--acento);
  }
  .jah-pagina .nc-texto{ padding:clamp(34px,7vw,56px) 0; }
  .jah-pagina .nc-texto h2{ font-size:clamp(28px, 6.6vw, 44px); }
  .jah-pagina .nc-lead{ font-size:16px; max-width:38ch; }
  .jah-pagina .nc-datos li{ font-size:15px; }
  .jah-pagina a.nc-cta{ font-size:16px; padding:15px 36px; }
  .jah-pagina .nc-nota{ font-size:13.5px; }
}

/* ============================================================
   LOS TRES UNIVERSOS · la sección de colecciones, rehecha
   ============================================================
   Antes: tres tarjetas iguales en fila, con foto arriba y botón debajo.
   Ahora: el titular ocupa la primera celda y cada colección es una
   ficha de foto + datos, con la primera partiendo columna a la
   izquierda y las otras dos apiladas a la derecha, como el mockup. */
/* Con #colecciones a proposito: style.css lleva
   «.jah-pagina #colecciones{padding:52px 0 64px}» y un id gana a una
   clase. La seccion tiene las dos cosas; sin el id, esto no se aplicaba. */
.jah-pagina #colecciones.universos{ padding:clamp(64px, 6vw, 104px) 0 clamp(56px, 5vw, 88px); }

/* El filete de cabecera, hermano del de «cómo funciona». */
.jah-pagina .uv-regla{ display:flex; align-items:center; gap:24px; margin-bottom:clamp(30px,3vw,48px); }
.jah-pagina .uv-hilo{ flex:1 1 auto; height:1px; background:color-mix(in srgb, var(--marca) 22%, transparent); }
.jah-pagina .uv-meta{
  flex:0 0 auto; font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--marca);
}
.jah-pagina .uv-marca{ flex:0 0 auto; font-size:16px; font-weight:600; color:var(--marca); }
.jah-pagina .uv-marca em{ font-style:italic; font-weight:400; }

/* La rejilla. Dos columnas: a la izquierda el titular y la primera
   colección (que ocupa el doble de alto); a la derecha, las otras dos. */
.jah-pagina .uv-rejilla{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(28px, 3vw, 52px);
  row-gap:clamp(28px, 3vw, 46px);
  align-items:start;
  container-type:inline-size;
}
.jah-pagina .uv-titular{
  grid-column:1; grid-row:1;
  margin:0 0 clamp(10px,1.4cqw,26px);
  font-family:var(--font-display);
  font-weight:400;
  font-size:min(4.4cqw, 62px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--marca);
}
.jah-pagina .uv-1{ grid-column:1; grid-row:2; }
.jah-pagina .uv-2{ grid-column:2; grid-row:1 / span 1; }
.jah-pagina .uv-3{ grid-column:2; grid-row:2; }

/* Cada ficha: foto a un lado, datos al otro. */
.jah-pagina .uv-uno{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px, 2cqw, 34px);
  align-items:start;
}
.jah-pagina .uv-foto{
  display:block;
  aspect-ratio:5 / 6;
  overflow:hidden;
  background:var(--base-alt,#FFF8F3);
}
/* Las tres fotos comparten la proporcion de arriba (5/6). La primera
   llevaba 5/7 para salir mas alta, como el boceto, pero entonces la ficha
   de abajo a la izquierda acababa 61 px por debajo de la de su derecha y
   la fila quedaba descuadrada. Simetria antes que efecto. */
.jah-pagina .uv-foto img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){
  .jah-pagina .uv-uno:hover .uv-foto img{ transform:scale(1.04); }
}

.jah-pagina .uv-ficha{ display:flex; flex-direction:column; min-width:0; }
.jah-pagina .uv-n{
  margin:0;
  font-family:var(--font-display); font-weight:300;
  font-size:min(3.1cqw, 46px); line-height:1;
  letter-spacing:-.02em; color:var(--marca);
}
.jah-pagina .uv-nombre{
  margin:6px 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:min(2.4cqw, 34px); line-height:1.1;
  color:var(--marca);
}
.jah-pagina .uv-lema{
  margin:9px 0 0;
  font-size:clamp(12.5px, 1.05cqw, 15px); line-height:1.5;
  color:var(--text-soft);
}
/* Los tres filetes finos que separan los datos, como en el mockup. */
.jah-pagina .uv-materia,
.jah-pagina .uv-precio{
  border-top:1px solid color-mix(in srgb, var(--marca) 20%, transparent);
}
.jah-pagina .uv-materia{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:clamp(12px,1.3cqw,20px) 0 0; padding-top:clamp(10px,1.1cqw,16px);
  font-size:clamp(11.5px, .95cqw, 13.5px); color:var(--text-soft);
}
.jah-pagina .uv-puntos{ display:flex; gap:6px; }
.jah-pagina .uv-puntos span{
  width:15px; height:15px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--marca) 14%, transparent);
}
.jah-pagina .uv-dato{
  display:flex; align-items:center; gap:9px;
  margin:clamp(10px,1.1cqw,15px) 0 0;
  font-size:clamp(11.5px, .95cqw, 13.5px); color:var(--text-soft);
}
.jah-pagina .uv-dato svg{ flex:0 0 auto; color:var(--acento); }
.jah-pagina .uv-precio{
  margin:clamp(12px,1.3cqw,20px) 0 0; padding-top:clamp(10px,1.1cqw,16px);
  font-family:var(--font-display);
  font-size:clamp(15px, 1.4cqw, 20px); color:var(--marca);
}
.jah-pagina .uv-cuantos{
  font-family:var(--font-ui,inherit);
  font-size:clamp(11px, .9cqw, 13px); color:var(--text-soft);
}

/* Botón de contorno, no relleno: el relleno es del botón principal de
   la página y aquí compiten tres a la vez. */
.jah-pagina a.uv-boton{
  align-self:flex-start;
  margin-top:clamp(13px,1.5cqw,22px);
  padding:11px 20px;
  border:1px solid var(--marca);
  border-radius:2px;
  background:transparent;
  color:var(--marca);
  font-size:clamp(10.5px, .85cqw, 12px);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background .22s ease, color .22s ease, transform .16s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .jah-pagina a.uv-boton:hover{ background:var(--marca); color:var(--base); }
}
.jah-pagina a.uv-boton:active{ transform:scale(.97); }

.jah-pagina .uv-cola{
  margin:clamp(34px,3.4vw,56px) 0 0;
  text-align:center;
}
.jah-pagina .uv-cola a{
  font-family:var(--font-display);
  font-size:clamp(16px,1.6vw,21px);
  color:var(--marca);
  text-decoration:none;
  border-bottom:1px solid var(--marca);
  padding-bottom:4px;
  transition:color .22s ease, border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .jah-pagina .uv-cola a:hover{ color:var(--acento); border-color:var(--acento); }
}

/* ---------- Estrecho ----------
   Una sola columna y las tres fichas seguidas. Por debajo de 620 la
   ficha deja de ir al lado de la foto y se pone debajo: a ese ancho
   media columna son 130 px y «Explorar Boho Chic» no cabe. */
@media (max-width: 860px){
  .jah-pagina .uv-rejilla{ grid-template-columns:1fr; }
  .jah-pagina .uv-titular,
  .jah-pagina .uv-1,.jah-pagina .uv-2,.jah-pagina .uv-3{ grid-column:1; grid-row:auto; }
  .jah-pagina .uv-titular{ font-size:clamp(28px, 6.2vw, 46px); }
  .jah-pagina .uv-n{ font-size:34px; }
  .jah-pagina .uv-nombre{ font-size:26px; }
  .jah-pagina .uv-lema,
  .jah-pagina .uv-materia,
  .jah-pagina .uv-dato{ font-size:13.5px; }
  .jah-pagina .uv-precio{ font-size:18px; }
  .jah-pagina a.uv-boton{ font-size:11.5px; }
}
@media (max-width: 620px){
  .jah-pagina .uv-uno{ grid-template-columns:1fr; gap:16px; }
  .jah-pagina .uv-foto{ aspect-ratio:4 / 3; }
  .jah-pagina .uv-regla{ gap:14px; }
  .jah-pagina .uv-marca{ font-size:14px; }
  .jah-pagina .uv-meta{ font-size:10.5px; letter-spacing:.14em; }
}

/* ============================================================
   LA PORTADA, MAS JUNTA
   ============================================================
   Los huecos salian dobles porque cada bloque ponia el suyo y nadie
   miraba la suma. Entre las pastillas de coleccion y «como funciona»
   habia 72 px de margen MAS 96 px de relleno: 168 px de crema seguidos.
   Entre la foto del kit y «lo que podreis crear», 86 + 88 = 174.

   Aqui la suma se decide a proposito: unos 100 px entre bloques en
   ordenador y unos 68 en movil, y siempre la misma, para que la pagina
   se lea como una sola cosa.

   ⚠️ Todo cuelga de .jah-home, que solo lleva la portada. Estas clases
   las comparten kits, guia y colecciones, y lo que se pidio fue la
   portada. Si algun dia se quiere en todas, se cambia .jah-home por
   .jah-pagina aqui y ya esta.

   ⚠️ El hero no aparece en esta lista: manda su min-height, asi que
   tocarle el relleno no mueve nada. */

/* Pastillas de coleccion: 56/72 -> 32/36 */
.jah-home .col-nav{
  margin-top:clamp(28px, 2.2vw, 32px);
  margin-bottom:clamp(30px, 2.5vw, 36px);
}

/* Como funciona: 96/104 -> 64/72 */
.jah-home .comofunciona{
  padding-top:clamp(40px, 4.4vw, 64px);
  padding-bottom:clamp(44px, 5vw, 72px);
}

/* Todo lo necesario: el carril de las ilustraciones, 86/86 -> 44/48 */
.jah-home .necesario > .wrap{
  padding-top:clamp(34px, 3.1vw, 44px);
  padding-bottom:clamp(36px, 3.3vw, 48px);
}
/* y lo que separa la foto de «lo que podreis crear»: 88 -> 52 */
.jah-home .crear{ margin-top:clamp(36px, 3.6vw, 52px); }

/* Los tres universos: 52/64 -> 52/60. Con el id, como arriba. */
.jah-home #colecciones.universos{
  padding-top:clamp(30px, 3.6vw, 52px);
  padding-bottom:clamp(34px, 4.2vw, 60px);
}

/* Preguntas frecuentes: heredaba 112/112 de la regla generica de
   «section», y ahora ademas cierra la pagina porque detras ya no hay
   nada. El relleno de abajo es el que despide. */
.jah-home #faq{
  padding-top:clamp(34px, 3.3vw, 48px);
  padding-bottom:clamp(44px, 5.3vw, 76px);
}

/* ============================================================
   PASO «KIT» CON DISEÑOS Y COLORES (octubre 2026)
   ------------------------------------------------------------
   Una tarjeta por diseño; dentro, sus colores como botones con
   nombre (pulsar uno = elegir el kit) y las piedras de ese color.
   Móvil primero: foto a la izquierda y texto a la derecha, para que
   en un teléfono quepan dos diseños por pantalla y no uno.
   Los botones llevan .caja y fondo con !important: si no, se los come
   el neutralizador de arriba o el naranja en línea del tema.
   ============================================================ */
#shopApp .dz-lista{ display:grid; gap:14px; margin-top:6px; }
#shopApp .dz-card{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; padding:12px;
  background:#fff; border:1.5px solid var(--line-marca, #EADBC8); border-radius:10px; transition:border-color .2s, box-shadow .2s; }
#shopApp .dz-card.on{ border-color:var(--marca); box-shadow:0 0 0 1px var(--marca); }
#shopApp .dz-foto{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:#efe2d1; align-self:start; }
#shopApp .dz-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
#shopApp .dz-sello{ position:absolute; top:6px; left:6px; background:var(--marca); color:#fff; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 6px; border-radius:3px; font-family:var(--font-ui, Hind, sans-serif) !important; }
#shopApp .dz-tick{ position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%; background:var(--marca); color:#fff; display:grid; place-items:center; }
#shopApp .dz-tick svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#shopApp .dz-cuerpo{ min-width:0; display:flex; flex-direction:column; gap:8px; }
#shopApp .dz-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
#shopApp h3.dz-nombre{ font-size:19px !important; line-height:1.15 !important; margin:0 !important; color:var(--marca) !important; font-weight:400 !important; }
#shopApp .dz-precio{ font-size:15px; font-weight:600; color:var(--marca); white-space:nowrap; font-family:Hind, sans-serif !important; }
#shopApp .dz-para{ font-size:13.5px !important; line-height:1.4; font-style:italic; color:var(--ink-soft, #6F5E55); margin:0 !important; display:none; }
#shopApp .dz-colores{ display:flex; flex-wrap:wrap; gap:6px; }
#shopApp button.dz-color{ display:inline-flex !important; align-items:center; gap:6px; min-height:38px !important; padding:0 12px 0 6px !important;
  border-radius:40px !important; border:1.5px solid var(--line-marca, #EADBC8) !important; background-color:#fff !important; color:var(--ink, #1E1E1E) !important;
  font-size:14px !important; font-weight:500 !important; cursor:pointer; white-space:nowrap !important; font-family:Hind, sans-serif !important; }
#shopApp button.dz-color i{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
#shopApp button.dz-color.on{ border-color:var(--marca) !important; box-shadow:0 0 0 1px var(--marca); background-color:#fff !important; }
#shopApp .dz-piedras{ display:flex; flex-wrap:wrap; gap:5px; }
#shopApp .dz-piedras > img{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line-marca, #EADBC8); }
#shopApp .dz-piedras-n{ font-size:12.5px !important; line-height:1.35 !important; color:var(--ink-soft, #6F5E55); margin:0 !important; font-family:Hind, sans-serif !important; }
#shopApp .dz-piedra{ display:inline-flex; flex-direction:column; align-items:center; width:52px; text-align:center; }
#shopApp .dz-piedra img{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line-marca, #EADBC8); }
#shopApp .dz-piedra small{ font-size:10.5px !important; line-height:1.15; color:var(--ink-soft, #6F5E55); margin-top:4px; font-family:Hind, sans-serif !important; }
#shopApp button.dz-detalle{ align-self:flex-start; display:inline-flex !important; align-items:center; gap:6px; padding:6px 0 !important; min-height:32px;
  background-color:transparent !important; border:0 !important; color:var(--marca) !important; font-size:13.5px !important; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-family:Hind, sans-serif !important; }
#shopApp button.dz-detalle svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; }
#shopApp .kit-ficha .kf-colores{ margin:4px 0 2px; }
#shopApp .kit-ficha .kf-piedras{ margin:6px 0; }
#shopApp .kit-ficha .kf-piedras-g{ display:flex; flex-wrap:wrap; gap:10px 6px; margin-top:8px; }
#shopApp .kit-ficha .kf-piedras-g .dz-piedra{ width:68px; }
#shopApp .kit-ficha .kf-piedras-g .dz-piedra img{ width:52px; height:52px; }
@media (min-width:700px){
  #shopApp .dz-lista{ grid-template-columns:1fr 1fr; gap:18px; }
  #shopApp .dz-card{ grid-template-columns:150px minmax(0,1fr); padding:14px; }
  #shopApp .dz-para{ display:block; }
}

/* Alicates de regalo (10-10-2026): en el resumen, la línea del regalo
   no enseña «0,00 €» sino una etiqueta. */
.rline .rprice.rregalo{
  align-self:center; padding:4px 10px; border-radius:40px;
  background:var(--jh-naranja, #D27541); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}

/* Las fichas (kit y charm) se cortaban: la caja tiene alto máximo y
   overflow:hidden, pero la fila de la rejilla crecía con el contenido,
   así que el cuerpo nunca llegaba a tener scroll y lo de abajo —el
   precio y el botón de elegir— quedaba fuera. (10-10-2026)
   · Ordenador: el cuerpo lleva su propio tope y baja por dentro.
   · Móvil (una columna): baja la caja entera, foto incluida. */
.kit-ficha .kf-cuerpo{ min-height:0; max-height:min(560px, calc(100vh - 48px)); overscroll-behavior:contain; }
.kit-ficha.charm-ficha .kf-cuerpo{ max-height:min(680px, calc(100vh - 48px)); }
@media (max-width:820px){
  .kit-ficha .kf-caja{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .kit-ficha .kf-cuerpo, .kit-ficha.charm-ficha .kf-cuerpo{ max-height:none; overflow:visible; }
  /* Al bajar por la ficha la X se iba con el contenido: se queda fija. */
  .kit-ficha button.kf-cerrar{ position:fixed; top:22px; right:22px; z-index:3; }
}


/* ===== GUÍA DEL KIT · CARTEL Y PROGRESO (octubre 2026) ===== */
/* Escrito MÓVIL PRIMERO, con el mismo peso que home2.css para ganar a
   lo que esta web pisa en todas partes: el tema fuerza Playfair con
   !important en p, span, div…, Elementor pinta los <button> de granate
   y una hoja en línea los pone naranja con !important. Los botones
   propios llevan .caja (fuera del neutralizador) y fondo !important. */
.gz{
  --gz-crema:#FEF5E8; --gz-banda:#FFF8F3; --gz-marca:#3E000D; --gz-naranja:#D27541;
  --gz-naranja-osc:#B85A2E; --gz-rayas:#6B2014; --gz-texto:#1E1E1E; --gz-suave:#6F5E55;
  --gz-linea:#EADBC8; --gz-verde:#2F7D4E;
  --gz-serif:"Playfair Display", Georgia, serif;
  --gz-sans:"Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gz-gutter:16px;
  --gz-ancho:1120px;
  background:var(--gz-crema); color:var(--gz-texto);
  /* A sangre, como la portada: el tema topa el contenedor en 1140 px. */
  width:100vw; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:0 !important;
  overflow-x:clip;
}
.gz :is(p,span,a,li,div,small,strong,b,em,label,button){ font-family:var(--gz-sans) !important; }
.gz :is(h1,h2,h3), .gz :is(h1,h2,h3) em, .gz .gz-serif{ font-family:var(--gz-serif) !important; }
.gz :is(h1,h2,h3) em{ line-height:inherit !important; font-style:italic; color:var(--gz-naranja) !important; font-weight:400; }
.gz :is(h1,h2,h3){ font-weight:400 !important; margin:0 !important; letter-spacing:-.01em; }
.gz p{ margin:0; }
/* style.css pone padding a todo <section> de .jah-pagina (44–112 px). */
.gz section.gz-vista, .gz section.gz-pasos-caja{ padding:0 !important; scroll-margin-top:0; }
.gz ol{ margin:0; padding:0; list-style:none; }
.gz img{ display:block; max-width:100%; filter:none; }
.gz button{ -webkit-tap-highlight-color:transparent; cursor:pointer; text-align:left; }
.gz :is(.gz-chapa b, .gz-prog-fila strong, .gz-nav-prog, .gz-letra, .gz-paso-n, .gz-consejo, .gz-tab-l){ font-variant-numeric:lining-nums; }
.gz .gz-i{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gz :focus-visible{ outline:2px solid var(--gz-naranja) !important; outline-offset:3px; }

.gz .gz-sec{ padding:32px var(--gz-gutter) !important; max-width:var(--gz-ancho); margin:0 auto; }
.gz .gz-eyebrow{ font-size:11.5px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--gz-naranja-osc); font-weight:600; margin:0 0 8px; }
.gz .gz-h2{ font-size:28px !important; line-height:1.08 !important; color:var(--gz-marca) !important; margin:0 0 18px !important; }
.gz .gz-rayas{ height:10px; background:repeating-linear-gradient(90deg, var(--gz-naranja) 0 16px, var(--gz-rayas) 16px 32px); }

/* ---------- Botones ---------- */
.gz .gz-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 24px !important; border-radius:4px !important; border:0 !important;
  font-size:16px !important; font-weight:600 !important; letter-spacing:.01em; line-height:1.2;
  text-decoration:none !important; transition:background-color .2s, transform .1s;
}
.gz .gz-btn:active{ transform:scale(.98); }
.gz .gz-btn-solido{ background-color:var(--gz-naranja) !important; color:#fff !important; }
.gz .gz-btn-solido:hover{ background-color:var(--gz-naranja-osc) !important; color:#fff !important; }
.gz .gz-btn-claro{ background-color:var(--gz-crema) !important; color:var(--gz-marca) !important; box-shadow:inset 0 0 0 1px var(--gz-linea); }

/* ---------- Barra de secciones ----------
   Pegajosa bajo la cabecera del sitio y se aparta con ella (la misma
   cuenta que usa la cabecera del tema). A la derecha, el 1/3. */
.gz .gz-nav{
  position:sticky; top:calc(var(--jah-top, 0px) + var(--jah-header-h, 88px)); z-index:30;
  background:color-mix(in srgb, var(--gz-crema) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gz-linea);
  transition:transform .32s cubic-bezier(.4, 0, .2, 1);
}
.jah-body.jah-header-oculta .gz .gz-nav{ transform:translateY(calc(-100% - var(--jah-top, 0px) - var(--jah-header-h, 88px))); }
.jah-body.jah-menu-abierto .gz .gz-nav{ transform:none !important; }
.gz .gz-nav-in{ display:flex; align-items:center; gap:4px; max-width:var(--gz-ancho); margin:0 auto; padding:8px var(--gz-gutter); }
.gz button.gz-nav-b{
  padding:9px 12px !important; border:0 !important; border-radius:999px !important;
  background:transparent !important; color:var(--gz-suave) !important;
  font-size:14.5px !important; font-weight:600 !important; white-space:nowrap; min-height:40px;
}
.gz button.gz-nav-b.on{ background:var(--gz-marca) !important; color:var(--gz-crema) !important; }
.gz .gz-nav-prog{
  margin-left:auto; display:inline-flex; align-items:baseline; gap:1px;
  font-size:13px !important; color:var(--gz-suave); font-weight:600;
  padding:6px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--gz-linea);
}
.gz .gz-nav-prog b{ font-size:15px !important; color:var(--gz-marca); }
.gz .gz-nav-prog.gz-con{ background:var(--gz-marca); box-shadow:none; color:#E5C8B9; }
.gz .gz-nav-prog.gz-con b{ color:#fff; }

/* ============================================================
   INICIO · el cartel
   ============================================================ */
.gz .gz-hero{ position:relative; background:var(--gz-marca); color:var(--gz-crema); display:grid; grid-template-columns:100%; overflow:hidden; }
.gz .gz-hero-foto{ position:relative; height:34svh; min-height:230px; max-height:400px; }
.gz .gz-hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.gz .gz-hero-foto::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:repeating-linear-gradient(90deg, var(--gz-naranja) 0 16px, var(--gz-rayas) 16px 32px); }
.gz .gz-chapa{
  position:absolute; right:14px; top:calc(clamp(230px, 34svh, 400px) - 62px); z-index:2;
  width:104px; height:104px; border-radius:50%; background:var(--gz-naranja); color:#fff;
  display:grid; place-content:center; text-align:center; transform:rotate(-9deg);
  box-shadow:0 12px 22px -12px rgba(0,0,0,.55);
}
.gz .gz-chapa b{ font-family:var(--gz-serif) !important; font-weight:400; font-size:38px !important; line-height:1; }
.gz .gz-chapa span{ font-size:10.5px !important; letter-spacing:.08em; text-transform:uppercase; font-weight:600; line-height:1.2; }
.gz .gz-hero-txt{ padding:30px var(--gz-gutter) 28px; }
.gz .gz-hero-txt .gz-eyebrow{ color:#F3B38E; }
.gz .gz-hero-txt h1{ font-size:clamp(40px, 12vw, 52px) !important; line-height:1.02 !important; color:var(--gz-crema) !important; margin:6px 0 14px !important; }
.gz .gz-hero-sub{ color:#EBD9CF; font-size:16px !important; line-height:1.5; max-width:30em; margin-bottom:22px !important; }
.gz .gz-cta{ width:100%; }
.gz button.gz-hero-otro{
  display:block; margin:12px auto 0; padding:6px 10px !important; border:0 !important; background:transparent !important;
  color:#D9BFB2 !important; font-size:15px !important; text-decoration:underline; text-underline-offset:3px; text-align:center;
}

/* ---------- Progreso ---------- */
.gz .gz-sec-prog{ padding-top:28px !important; }
.gz .gz-prog{ background:#fff; border:1px solid var(--gz-linea); border-radius:8px; padding:16px; margin:0 0 30px; }
.gz .gz-prog-fila{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.gz .gz-prog-fila span{ font-size:12px !important; letter-spacing:.12em; text-transform:uppercase; color:var(--gz-suave); font-weight:600; }
.gz .gz-prog-fila strong{ font-family:var(--gz-serif) !important; font-weight:400; font-size:22px !important; color:var(--gz-marca); }
.gz .gz-barra{ height:8px; border-radius:4px; background:#F1E4D3; margin:10px 0 12px; overflow:hidden; }
.gz .gz-barra i{ display:block; height:100%; background:var(--gz-naranja); border-radius:4px; transition:width .5s cubic-bezier(.2, .8, .2, 1); }
.gz .gz-prog-nota{ font-size:14.5px !important; line-height:1.45; color:var(--gz-suave); }
.gz button.gz-reiniciar{ display:inline; padding:0 !important; border:0 !important; background:transparent !important; color:var(--gz-marca) !important;
  font-size:14.5px !important; text-decoration:underline; text-underline-offset:3px; min-height:0; }

/* ---------- Las tres bolsas ---------- */
.gz .gz-bolsas{ display:grid; gap:10px; }
.gz button.gz-bolsa{
  display:grid !important; grid-template-columns:96px minmax(0,1fr) 20px; gap:14px; align-items:center;
  width:100%; padding:10px !important; border-radius:8px !important;
  background:#fff !important; border:1px solid var(--gz-linea) !important; color:var(--gz-marca) !important;
  transition:border-color .2s, box-shadow .2s;
}
.gz button.gz-bolsa:hover{ border-color:#D8BFA2 !important; }
.gz .gz-bolsa.gz-toca{ border-color:var(--gz-naranja) !important; box-shadow:0 12px 24px -18px rgba(184,90,46,.8); }
.gz .gz-bolsa-foto{ position:relative; display:block; height:96px; border-radius:5px; overflow:hidden; background:var(--gz-banda); }
.gz .gz-bolsa-foto img{ width:100%; height:100%; object-fit:cover; }
.gz .gz-letra{ position:absolute; left:6px; top:6px; width:28px; height:28px; border-radius:50%;
  background:var(--gz-marca); color:var(--gz-crema); display:grid; place-content:center;
  font-family:var(--gz-serif) !important; font-size:16px !important; }
.gz .gz-bolsa.gz-hecha .gz-letra{ background:var(--gz-verde); }
.gz .gz-bolsa-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gz .gz-bolsa-nombre{ font-family:var(--gz-serif) !important; font-size:20px !important; line-height:1.15; }
.gz .gz-bolsa-lema{ font-size:14px !important; line-height:1.35; color:var(--gz-suave); }
.gz .gz-estado{ align-self:flex-start; margin-top:4px; font-size:11.5px !important; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gz-naranja-osc); }
.gz .gz-estado-hecha{ color:var(--gz-verde); }
.gz .gz-estado-hecha::before{ content:"✓ "; }
.gz .gz-estado-toca{ background:var(--gz-naranja); color:#fff; padding:3px 8px; border-radius:999px; }
.gz .gz-bolsa-ir{ color:var(--gz-naranja-osc); }

/* ---------- Cuidados y compartir, al pie ---------- */
.gz .gz-tiras{ padding-top:0 !important; display:grid; gap:12px; }
.gz button.gz-tira{
  display:grid !important; grid-template-columns:20px minmax(0,1fr) 20px; gap:12px; align-items:center; width:100%;
  padding:16px !important; border-radius:8px !important; border:1px solid var(--gz-linea) !important;
  background:var(--gz-banda) !important; color:var(--gz-marca) !important;
}
.gz .gz-tira strong{ display:block; font-family:var(--gz-serif) !important; font-weight:400; font-size:18px !important; }
.gz .gz-tira span span{ font-size:14px !important; color:var(--gz-suave); }
.gz .gz-comparte{ padding:6px 2px 0; }
.gz .gz-comparte-txt{ font-size:15.5px !important; line-height:1.5; color:var(--gz-marca); }
.gz .gz-comparte-caja{ margin-top:24px; padding:18px 16px; border-radius:8px; background:var(--gz-marca); }
.gz .gz-comparte-caja .gz-eyebrow{ color:#F3B38E; }
.gz .gz-comparte-caja .gz-comparte-txt{ color:var(--gz-crema); }

/* ============================================================
   TUTORIALES · cabecera granate con las bolsas en pestañas
   ============================================================ */
.gz .gz-oscuro{ background:var(--gz-marca); color:var(--gz-crema); }
.gz .gz-oscuro-in{ max-width:var(--gz-ancho); margin:0 auto; padding:26px var(--gz-gutter) 18px; }
.gz .gz-oscuro .gz-eyebrow{ color:#F3B38E; }
.gz .gz-h1{ font-size:36px !important; line-height:1.05 !important; color:var(--gz-crema) !important; }
.gz .gz-oscuro-sub{ color:#EBD9CF; font-size:15.5px !important; line-height:1.5; margin-top:10px !important; max-width:34em; }
.gz .gz-tabs{ display:flex; max-width:var(--gz-ancho); margin:0 auto; padding:0 var(--gz-gutter); gap:4px; }
.gz button.gz-tab{
  flex:1 1 auto; display:inline-flex !important; align-items:center; justify-content:center; gap:6px; min-width:0;
  padding:12px 2px 13px !important; border:0 !important; border-radius:0 !important; background:transparent !important;
  color:#D9BFB2 !important; font-size:14px !important; font-weight:600 !important;
  box-shadow:inset 0 -3px 0 transparent; white-space:nowrap; transition:color .2s, box-shadow .2s;
}
.gz button.gz-tab.on{ color:#fff !important; box-shadow:inset 0 -3px 0 var(--gz-naranja); }
.gz .gz-tab-l{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-content:center; font-size:12.5px !important;
  background:rgba(255,255,255,.12); color:inherit; }
.gz .gz-tab.on .gz-tab-l{ background:var(--gz-naranja); color:#fff; }
.gz .gz-tab-ok{ color:#8FD3A8; display:inline-flex; }
.gz .gz-tab-ok[hidden]{ display:none; }
.gz .gz-tab-ok .gz-i{ width:16px; height:16px; stroke-width:2.4; }

/* La cabecera granate de las bolsas se queda solo con las pestañas:
   el título de cada bolsa ya va en su presentación, justo debajo. */
.gz .gz-oscuro-corto{ padding-top:6px; }

/* ============================================================
   UNA BOLSA POR DENTRO: presentación y partes
   ============================================================ */
.gz .gz-panel > *{ max-width:var(--gz-ancho); margin-left:auto; margin-right:auto; }

/* Presentación: la foto de la joya y qué es. */
.gz .gz-intro{ display:grid; grid-template-columns:100%; }
.gz .gz-intro-foto{ position:relative; aspect-ratio:16 / 10; max-height:320px; overflow:hidden; background:var(--gz-banda); }
.gz .gz-intro-foto img{ width:100%; height:100%; object-fit:cover; }
.gz .gz-letra-xl{ left:auto; right:14px; top:auto; bottom:-24px; width:56px; height:56px; font-size:28px !important;
  border:3px solid var(--gz-crema); z-index:1; }
.gz .gz-intro-foto{ overflow:visible; }
.gz .gz-intro-foto img{ border-radius:0; }
.gz .gz-intro-txt{ padding:22px var(--gz-gutter) 6px; }
.gz .gz-intro-txt h2{ font-size:34px !important; line-height:1.05 !important; color:var(--gz-marca) !important; }
.gz .gz-intro-lema{ font-family:var(--gz-serif) !important; font-style:italic; font-size:19px !important; color:var(--gz-naranja-osc); margin-top:4px !important; }
.gz .gz-intro-p{ font-size:16.5px !important; line-height:1.55; color:var(--gz-texto); margin-top:12px !important; max-width:36em; }

/* Qué trae la bolsa y lo de antes de empezar. */
.gz .gz-intro-cols{ display:grid; gap:14px; padding:18px var(--gz-gutter) 8px; }
.gz .gz-trae{ background:#fff; border:1px solid var(--gz-linea); border-radius:8px; padding:16px 16px 6px; }
.gz .gz-trae h3{ font-size:20px !important; color:var(--gz-marca) !important; margin-bottom:6px !important; }
.gz .gz-trae ul{ list-style:none; margin:0; padding:0; }
.gz .gz-trae li{ display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; padding:9px 0; border-top:1px solid #F3E8DA;
  font-size:15px !important; line-height:1.35; color:var(--gz-marca); }
.gz .gz-trae li:first-child{ border-top:0; }
.gz .gz-trae-foto{ position:relative; width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--gz-banda); box-shadow:0 0 0 1px var(--gz-linea); }
.gz .gz-trae-foto img{ width:100%; height:100%; object-fit:cover; }
.gz .gz-trae-foto.gz-recorte img{ padding:16%; }
.gz .gz-antes{ display:grid; gap:14px; align-content:start; }
.gz .gz-recuerda{ display:grid; grid-template-columns:22px 1fr; gap:12px; padding:14px 16px; border-radius:8px;
  background:var(--gz-banda); border:1px dashed #D8BFA2; color:var(--gz-marca); }
.gz .gz-recuerda .gz-i{ width:22px; height:22px; color:var(--gz-naranja-osc); margin-top:1px; }
.gz .gz-recuerda p{ font-size:14.5px !important; line-height:1.5; }
.gz .gz-mapa{ background:var(--gz-marca); color:var(--gz-crema); border-radius:8px; padding:14px 14px 8px; }
.gz .gz-mapa-tit{ font-size:11.5px !important; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#F3B38E; margin-bottom:4px !important; }
.gz button.gz-mapa-b{ display:grid !important; grid-template-columns:30px 1fr 18px; gap:12px; align-items:center; width:100%;
  min-height:50px; padding:6px 0 !important; border:0 !important; border-top:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important; background:transparent !important; color:var(--gz-crema) !important; }
.gz .gz-mapa li:first-child .gz-mapa-b{ border-top:0 !important; }
.gz .gz-mapa-n{ width:30px; height:30px; border-radius:50%; background:var(--gz-naranja); color:#fff; display:grid; place-content:center;
  font-family:var(--gz-serif) !important; font-size:16px !important; font-variant-numeric:lining-nums; }
.gz .gz-mapa-t{ font-family:var(--gz-serif) !important; font-size:18px !important; line-height:1.2; }
.gz .gz-mapa-t em{ font-family:var(--gz-sans) !important; font-style:normal; font-size:13.5px !important; color:#D9BFB2; }
.gz .gz-mapa-b .gz-i{ width:18px; height:18px; color:#F3B38E; }

/* Cada parte: su número, su pregunta y sus opciones. */
.gz .gz-parte{ padding:30px var(--gz-gutter) 10px; scroll-margin-top:120px; border-radius:10px; transition:box-shadow .6s ease, background-color .6s ease; }
.gz .gz-parte + .gz-parte{ border-top:1px solid var(--gz-linea); border-radius:0; margin-top:14px; }
.gz .gz-parte.gz-destacada{ background:color-mix(in srgb, var(--gz-naranja) 7%, var(--gz-crema)); }
.gz .gz-parte-cab{ margin:0 0 16px; max-width:40em; }
.gz .gz-parte-cab h3{ font-size:26px !important; line-height:1.12 !important; color:var(--gz-marca) !important; }
.gz .gz-parte-cab p:not(.gz-eyebrow){ font-size:15.5px !important; line-height:1.5; color:var(--gz-suave); margin-top:8px !important; }
.gz .gz-sin-opcional{ margin-top:16px !important; padding:14px 16px; border-radius:8px; background:var(--gz-banda); border:1px solid var(--gz-linea);
  font-size:15px !important; line-height:1.5; color:var(--gz-marca); }
.gz button.gz-enlace{ display:inline-flex !important; align-items:center; gap:6px; padding:4px 0 !important; border:0 !important;
  background:transparent !important; color:var(--gz-naranja-osc) !important; font-size:15px !important; font-weight:600 !important;
  text-decoration:underline; text-underline-offset:3px; min-height:0; }
.gz button.gz-enlace .gz-i{ width:16px; height:16px; }
.gz .gz-paneles{ padding-bottom:36px; }

/* Las opciones: dos por fila; con tres, la primera ocupa todo el ancho. */
.gz .gz-vars{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gz .gz-vars-3 > .gz-var:first-child{ grid-column:1 / -1; flex-direction:row; }
.gz .gz-vars-3 > .gz-var:first-child .gz-var-foto{ width:50%; flex:none; }
.gz button.gz-var{
  display:flex !important; flex-direction:column; width:100%; padding:0 !important; overflow:hidden;
  border-radius:8px !important; border:1px solid var(--gz-linea) !important; background:#fff !important; color:var(--gz-marca) !important;
  transition:border-color .2s, transform .15s;
}
.gz button.gz-var:hover{ border-color:#D8BFA2 !important; }
.gz button.gz-var:active{ transform:scale(.985); }
.gz .gz-var-foto{ position:relative; display:block; aspect-ratio:1 / 1; background:var(--gz-banda); overflow:hidden; }
.gz .gz-var-foto img{ width:100%; height:100%; object-fit:cover; }
.gz .gz-recorte{ background:#fff; }
.gz .gz-recorte img{ object-fit:contain; padding:14%; }
.gz .gz-var-txt{ display:flex; flex-direction:column; gap:4px; padding:12px 12px 14px; flex:1; }
.gz .gz-var-nombre{ font-family:var(--gz-serif) !important; font-size:19px !important; line-height:1.15; }
.gz .gz-var-lema{ font-size:13.5px !important; line-height:1.38; color:var(--gz-suave); }
.gz .gz-var-pie{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:12px !important; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gz-naranja-osc); }
.gz .gz-var-pie .gz-i{ width:16px; height:16px; }
.gz .gz-hecho-marca{ position:absolute; right:8px; top:8px; width:30px; height:30px; border-radius:50%;
  background:var(--gz-verde); color:#fff; display:none; place-content:center; }
.gz .gz-hecho-marca .gz-i{ width:17px; height:17px; stroke-width:2.4; }
.gz .gz-var.gz-hecho .gz-hecho-marca{ display:grid; }

/* Sin foto todavía: la tira de la caja con el nombre encima. */
.gz .gz-sinfoto{ position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, var(--gz-naranja) 0 14px, var(--gz-rayas) 14px 28px); }
.gz .gz-sinfoto span{ background:var(--gz-crema); color:var(--gz-marca); padding:6px 12px; border-radius:2px;
  font-family:var(--gz-serif) !important; font-size:17px !important; }

/* ============================================================
   UN TUTORIAL
   ============================================================ */
/* El texto alineado con el cuerpo de debajo, que va en una columna de
   --gz-ancho con su margen: el mismo hueco por los lados, sin envoltorio. */
.gz .gz-tut-cab{ background:var(--gz-marca); color:var(--gz-crema);
  padding:16px max(var(--gz-gutter), calc((100% - var(--gz-ancho)) / 2 + var(--gz-gutter))) 22px; }
.gz button.gz-volver{
  display:flex !important; align-items:center; gap:6px; padding:8px 0 !important; border:0 !important; background:transparent !important;
  color:#E5C8B9 !important; font-size:14.5px !important; font-weight:500 !important; min-height:40px; width:100%;
}
.gz .gz-volver .gz-i{ width:18px; height:18px; }
.gz .gz-tut-cab h2{ font-size:36px !important; line-height:1.05 !important; color:var(--gz-crema) !important; margin-top:8px !important; }
.gz .gz-tut-cab p{ color:#EBD9CF; font-size:16px !important; line-height:1.45; margin-top:8px !important; }
.gz .gz-tut-cuerpo{ max-width:var(--gz-ancho); margin:0 auto; padding:20px var(--gz-gutter) 40px; display:grid; gap:20px; }
.gz .gz-tut-foto{ position:relative; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:var(--gz-banda); border:1px solid var(--gz-linea); }
.gz .gz-tut-foto img{ width:100%; height:100%; object-fit:cover; }
.gz .gz-tut-foto.gz-recorte img{ padding:16% 20%; }
.gz .gz-video{ border-radius:8px; overflow:hidden; background:#000; aspect-ratio:9 / 16; max-height:78vh; margin:0 auto; }
.gz .gz-video video{ width:100%; height:100%; object-fit:contain; }
.gz .gz-pasos-caja h3{ font-size:24px !important; color:var(--gz-marca) !important; margin-bottom:12px !important; }
.gz .gz-pasos{ display:grid; gap:10px; }
.gz .gz-pasos li{ display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; font-size:17px !important; line-height:1.5;
  background:#fff; border:1px solid var(--gz-linea); border-radius:8px; padding:14px; }
.gz .gz-paso-n{ width:36px; height:36px; border-radius:50%; background:var(--gz-marca); color:var(--gz-crema); display:grid; place-content:center;
  font-family:var(--gz-serif) !important; font-size:17px !important; }
.gz .gz-pronto{ display:grid; grid-template-columns:24px 1fr; gap:12px; padding:16px; border-radius:8px;
  background:var(--gz-banda); border:1px dashed #D8BFA2; color:var(--gz-marca); }
.gz .gz-pronto .gz-i{ width:24px; height:24px; color:var(--gz-naranja-osc); }
.gz .gz-pronto p{ font-size:15.5px !important; line-height:1.5; }
.gz .gz-pronto p + p{ margin-top:6px !important; color:var(--gz-suave); }

.gz .gz-tut-acciones{ display:grid; gap:12px; }
.gz .gz-marcar{ width:100%; }
.gz .gz-marcar.gz-marcado{ background-color:var(--gz-verde) !important; }
.gz .gz-marcar.gz-marcado:hover{ background-color:#276A42 !important; }
.gz .gz-siguiente{ display:grid; gap:10px; padding:16px; border-radius:8px; background:var(--gz-marca); color:var(--gz-crema); text-align:center; }
.gz .gz-siguiente[hidden]{ display:none; }
.gz .gz-siguiente span{ font-family:var(--gz-serif) !important; font-size:22px !important; }
.gz .gz-siguiente .gz-btn{ width:100%; }
.gz button.gz-enlace-claro{ justify-content:center; color:#E5C8B9 !important; font-weight:500 !important; }
.gz .gz-tut-parte{ font-size:12px !important; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#F3B38E; margin-top:6px !important; }
.gz a.gz-ayuda{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; min-height:48px; line-height:1.4;
  color:var(--gz-suave) !important; font-size:15px !important; text-decoration:none !important; text-align:center; }
.gz a.gz-ayuda strong{ color:var(--gz-marca); text-decoration:underline; text-underline-offset:3px; }
.gz a.gz-ayuda .gz-i{ color:var(--gz-verde); }

.gz .gz-otras{ border-top:1px solid var(--gz-linea); padding-top:18px; display:grid; gap:8px; }
.gz button.gz-otra{
  display:flex !important; justify-content:space-between; align-items:center; width:100%; min-height:52px;
  padding:0 14px !important; border-radius:6px !important; border:1px solid var(--gz-linea) !important;
  background:#fff !important; color:var(--gz-marca) !important; font-family:var(--gz-serif) !important; font-size:17px !important;
}
.gz .gz-otra .gz-i{ color:var(--gz-naranja-osc); }

/* ============================================================
   CUIDADOS
   ============================================================ */
.gz .gz-consejos{ display:grid; gap:12px; counter-reset:consejo; }
.gz .gz-consejo{ counter-increment:consejo; background:#fff; border:1px solid var(--gz-linea); border-radius:8px; padding:16px 16px 18px 64px; position:relative; }
.gz .gz-consejo::before{ content:counter(consejo); position:absolute; left:16px; top:16px; width:34px; height:34px; border-radius:50%;
  background:var(--gz-naranja); color:#fff; display:grid; place-content:center; font-family:var(--gz-serif); font-size:17px; }
.gz .gz-consejo h3{ font-size:20px !important; color:var(--gz-marca) !important; line-height:1.2 !important; }
.gz .gz-consejo p{ font-size:15.5px !important; line-height:1.5; color:var(--gz-suave); margin-top:6px !important; }

/* ============================================================
   ORDENADOR
   ============================================================ */
@media (min-width:900px){
  .gz{ --gz-gutter:32px; }
  .gz .gz-sec{ padding:48px var(--gz-gutter) !important; }
  .gz .gz-h2{ font-size:36px !important; }

  /* El cartel en dos columnas: la foto a la izquierda, el texto en el
     granate y una columna de rayas entre los dos. */
  .gz .gz-hero{ grid-template-columns:minmax(0, 1.05fr) 14px minmax(0, 1fr); min-height:min(560px, 76vh); }
  .gz .gz-hero::before{ content:""; grid-column:2; grid-row:1;
    background:repeating-linear-gradient(180deg, var(--gz-naranja) 0 16px, var(--gz-rayas) 16px 32px); }
  .gz .gz-hero-foto{ grid-column:1; grid-row:1; height:auto; max-height:none; }
  .gz .gz-hero-foto::after{ display:none; }
  .gz .gz-hero-txt{ grid-column:3; grid-row:1; align-self:center; padding:48px 56px; max-width:560px; }
  .gz .gz-hero-txt h1{ font-size:clamp(44px, min(4.6vw, 8vh), 70px) !important; }
  .gz .gz-cta{ width:auto; }
  .gz button.gz-hero-otro{ margin:14px 0 0; padding-left:0 !important; }
  .gz .gz-chapa{ top:28px; right:auto; left:calc(51% - 52px); width:120px; height:120px; }
  .gz .gz-chapa b{ font-size:44px !important; }

  .gz .gz-sec-prog{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); column-gap:40px; align-items:start; }
  .gz .gz-prog{ grid-row:1 / span 3; margin:0; position:sticky; top:calc(var(--jah-header-h, 88px) + var(--jah-nav-h, 56px) + 20px); }
  .gz .gz-sec-prog > :not(.gz-prog){ grid-column:2; }
  .gz .gz-bolsas{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .gz button.gz-bolsa{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:12px; align-items:start; padding:10px 10px 16px !important; }
  .gz .gz-bolsa-foto{ height:auto; aspect-ratio:4 / 3; }
  .gz .gz-bolsa-ir{ display:none; }
  .gz .gz-tiras{ grid-template-columns:1fr 1fr; align-items:center; }

  .gz .gz-h1{ font-size:48px !important; }

  /* La bolsa por dentro: foto y presentación en dos columnas, debajo lo
     que trae al lado del recordatorio y el mapa de partes. */
  .gz .gz-intro{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:48px; align-items:center; padding:36px var(--gz-gutter) 0; }
  .gz .gz-intro-foto{ aspect-ratio:4 / 3; max-height:none; border-radius:8px; }
  .gz .gz-intro-foto img{ border-radius:8px; }
  .gz .gz-intro-txt{ padding:0; }
  .gz .gz-intro-txt h2{ font-size:52px !important; }
  .gz .gz-intro-lema{ font-size:22px !important; }
  .gz .gz-intro-p{ font-size:17.5px !important; }
  .gz .gz-intro-cols{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:48px; padding-top:36px; }
  .gz .gz-parte{ padding-top:44px; }
  .gz .gz-parte-cab h3{ font-size:34px !important; }
  .gz .gz-oscuro-in{ padding-top:40px; }
  .gz .gz-tabs{ justify-content:flex-start; gap:24px; }
  .gz button.gz-tab{ flex:0 0 auto; padding:14px 2px 15px !important; font-size:15.5px !important; }
  .gz .gz-vars{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
  .gz .gz-vars-2{ grid-template-columns:repeat(2, minmax(0, 340px)); }
  .gz .gz-vars-3 > .gz-var:first-child{ grid-column:auto; flex-direction:column; }
  .gz .gz-vars-3 > .gz-var:first-child .gz-var-foto{ width:auto; }
  .gz .gz-var-foto{ aspect-ratio:4 / 3; }

  .gz .gz-tut-cab h2{ font-size:48px !important; }
  .gz .gz-tut-cuerpo{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); column-gap:48px; align-items:start; padding-top:36px; }
  .gz .gz-tut-foto, .gz .gz-video{ grid-row:1 / span 3; position:sticky; top:calc(var(--jah-header-h, 88px) + var(--jah-nav-h, 56px) + 20px); }
  .gz .gz-otras{ grid-column:2; }

  .gz .gz-consejos{ grid-template-columns:1fr 1fr; gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  .gz .gz-nav, .gz .gz-barra i, .gz button.gz-var{ transition:none; }
}
/* ===== FIN GUÍA DEL KIT · CARTEL Y PROGRESO ===== */

/* ===================================================================
   EL PIE DEL CONFIGURADOR, SIEMPRE A LA VISTA (octubre 2026)
   -------------------------------------------------------------------
   Gonzalo: «Continuar» tiene que estar siempre a mano, como el «Empieza
   a diseñar» de la portada, que acompaña al bajar.
   · En el móvil el pie ya era `position:sticky`, pero NO se pegaba: el
     tema pone overflow-x:hidden en <body>, eso lo convierte en
     contenedor de scroll y deja muerto todo sticky de dentro (lo mismo
     que pasó con la guía). clip recorta igual sin crear contenedor.
   · En ordenador el pie no se pegaba nunca: ahora es una cápsula
     flotante abajo, como la barra de la portada.
   Al llegar al final del paso se queda en su sitio, debajo de las
   opciones, sin tapar nada.
   =================================================================== */
body:has(#shopApp .wiz){
  overflow-x:clip !important;
  overflow-y:visible !important;
}
@media (min-width:761px){
  #shopApp .wiz-foot{
    position:sticky;
    bottom:18px;
    z-index:20;
    margin-top:46px;
    padding:12px 12px 12px 20px;
    border:1px solid var(--line-marca-strong);
    border-radius:16px;
    background:var(--base) !important;
    box-shadow:0 16px 38px -20px rgba(62,0,13,.5);
  }
  #shopApp .wiz-pista{ margin:8px 8px 2px; }
}
/* La etiqueta «Entorno de pruebas» va abajo a la izquierda: en el móvil
   caía encima del «Atrás» de la barra. */
@media (max-width:760px){
  body:has(#shopApp .wiz) .preview-flag{ display:none !important; }
}

/* ===================================================================
   LAS TRES PIEZAS (12-10-2026) · como el prototipo del equipo
   Pestañas de persona, pestañas de pieza (Tu kit · Pieza 1 Collar de
   hilo · Pieza 2 Collar con cadena · Pieza 3 Pendientes), titular con el
   acabado a la derecha, bloques numerados a la izquierda y el dibujo de
   la pieza a la derecha, fijo mientras se baja. En el móvil el dibujo va
   arriba, pequeño, al lado de su leyenda.
   =================================================================== */
#shopApp .pz-cab{ display:flex; flex-direction:column; gap:18px; margin-bottom:6px; }
#shopApp .pzh-piezas{
  display:grid; grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line-marca);
}
#shopApp button.pzh-pz{
  display:grid !important; gap:3px; align-content:start;
  padding:12px 8px 14px !important; margin:0 0 -1px !important;
  background:none !important; border:0 !important; border-bottom:2px solid transparent !important;
  border-radius:0 !important; box-shadow:none !important;
  text-align:left; color:var(--text-soft) !important; cursor:pointer;
}
#shopApp button.pzh-pz small{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-ui); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
}
#shopApp button.pzh-pz b{
  font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#shopApp button.pzh-pz.es-kit b{ font-size:15px; }
#shopApp button.pzh-pz.on{ border-bottom-color:var(--marca) !important; color:var(--marca) !important; }
#shopApp button.pzh-pz.hecho{ color:var(--marca) !important; }
#shopApp .pzh-pz-ok{ display:inline-flex; width:15px; height:15px; border-radius:50%; background:var(--acento); color:#fff; align-items:center; justify-content:center; }
#shopApp .pzh-pz-ok svg{ width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:3; }

#shopApp .pzh-cab{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin:26px 0 28px;
}
#shopApp .pzh-eb{
  display:block; margin-bottom:10px;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acento-ink);
}
#shopApp h2.pzh-h{
  margin:0 !important; font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px, 5vw, 56px); line-height:1.02; letter-spacing:-.01em; color:var(--marca);
}
#shopApp .pzh-lead{ margin:12px 0 0 !important; max-width:560px; font-size:16.5px; color:var(--tinta); }
#shopApp .pzh-acabado{ display:flex; align-items:center; gap:12px; }
#shopApp .pzh-acabado-t{ font-family:var(--font-ui); font-size:14px; color:var(--text-soft); }
#shopApp .pzh-acabado-n{ font-family:var(--font-ui); font-size:14px; color:var(--marca); min-width:62px; }
#shopApp .pzh-metales{ display:flex; gap:12px; }
#shopApp button.pzh-metal{
  width:38px !important; height:38px !important; min-height:0 !important; padding:0 !important;
  border-radius:50% !important; border:0 !important; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) !important; transition:box-shadow .2s ease;
}
#shopApp button.pzh-metal.oro{ background:radial-gradient(circle at 35% 30%,#F3D48A,#C9973E 55%,#9C7128) !important; }
#shopApp button.pzh-metal.plata{ background:radial-gradient(circle at 35% 30%,#F5F5F5,#BDBDBD 55%,#8E8E8E) !important; }
#shopApp button.pzh-metal.on{ box-shadow:0 0 0 3px var(--base),0 0 0 4.5px var(--marca) !important; }

#shopApp .pzh-lay{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,.72fr);
  gap:34px; align-items:start;
}
#shopApp .pzh-pila{ display:grid; gap:34px; min-width:0; }
#shopApp .pzh-pila > * + *{ border-top:1px solid var(--line-marca); padding-top:30px; }
#shopApp .pzh-bloque{ display:grid; gap:16px; min-width:0; }
#shopApp .pzh-bt{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
#shopApp .pzh-bt h3{ margin:0 !important; font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--marca); }
#shopApp .pzh-num{ font-family:var(--font-ui); font-weight:700; font-size:16px; color:var(--acento); }
#shopApp .pzh-bt p{ flex-basis:100%; margin:0 !important; font-size:15px; color:var(--text-soft); }
#shopApp .pzh-bloque .ck-tit{ display:none; }

/* Las tarjetas grandes: cierres y pendientes */
#shopApp .pzh-cierres{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#shopApp .pzh-cierres.pzh-tres{ grid-template-columns:repeat(3,minmax(0,1fr)); }
#shopApp button.pzh-cierre{
  display:grid !important; gap:12px; padding:10px !important; text-align:left; cursor:pointer;
  border:1px solid var(--line-marca-strong) !important; border-radius:14px !important;
  background:#FFFDFB !important; color:var(--marca) !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#shopApp button.pzh-cierre:hover{ border-color:var(--marca) !important; }
#shopApp button.pzh-cierre.on{ border-color:var(--marca) !important; box-shadow:inset 0 0 0 1px var(--marca) !important; }
#shopApp button.pzh-cierre.agotada{ opacity:.5; }
#shopApp .pzh-cierre-foto{
  display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden;
  border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px var(--line-marca);
}
#shopApp .pzh-cierre-foto.cuadrada{ aspect-ratio:1/1; }
#shopApp .pzh-cierre-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
#shopApp .pzh-cierre-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px 2px; }
#shopApp .pzh-cierre-txt{ display:grid; gap:2px; min-width:0; }
#shopApp .pzh-cierre-txt b{ font-family:var(--font-ui); font-weight:600; font-size:16px; color:var(--marca); }
#shopApp .pzh-cierre-txt small{ font-size:13px; color:var(--text-soft); }

/* El círculo de elegir, como en el prototipo */
#shopApp .pzh-radio{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-marca-strong); display:grid; place-items:center;
}
#shopApp .on .pzh-radio{ border-color:var(--marca); }
#shopApp .on .pzh-radio::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--marca); }

/* Filas: las cadenas */
#shopApp .pzh-filas{ display:grid; gap:10px; }
#shopApp button.pzh-fila{
  display:grid !important; grid-template-columns:110px minmax(0,1fr) 24px; gap:16px; align-items:center;
  padding:9px 16px 9px 9px !important; text-align:left; cursor:pointer;
  border:1px solid var(--line-marca-strong) !important; border-radius:12px !important;
  background:#FFFDFB !important; color:var(--marca) !important;
}
#shopApp button.pzh-fila:hover{ border-color:var(--marca) !important; }
#shopApp button.pzh-fila.on{ border-color:var(--marca) !important; box-shadow:inset 0 0 0 1px var(--marca) !important; }
#shopApp button.pzh-fila.agotada{ opacity:.5; }
#shopApp .pzh-fila-foto{ aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:#F4EDE6; }
#shopApp .pzh-fila-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
#shopApp .pzh-fila-txt{ display:grid; gap:3px; }
#shopApp .pzh-fila-txt b{ font-family:var(--font-ui); font-weight:600; font-size:17px; color:var(--marca); }
#shopApp .pzh-fila-txt b small{ font-weight:400; font-size:13px; color:var(--text-soft); margin-left:4px; }
#shopApp .pzh-fila-txt > span{ font-size:14px; color:var(--tinta); }

/* Grandes / pequeños y «sin charm» */
#shopApp .pzh-ctrl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#shopApp .pzh-seg{ display:inline-flex; padding:3px; border:1px solid var(--line-marca-strong); border-radius:99px; background:#FFFDFB; }
#shopApp .pzh-seg button{
  padding:8px 18px !important; min-height:0 !important; border:0 !important; border-radius:99px !important;
  background:none !important; color:var(--marca) !important; font-family:var(--font-ui); font-size:14px; cursor:pointer;
}
#shopApp .pzh-seg button.on{ background:var(--marca) !important; color:#fff !important; }
#shopApp button.pzh-sin{
  display:inline-flex !important; align-items:center; gap:9px; padding:8px 16px 8px 10px !important; min-height:0 !important;
  border:1px solid var(--line-marca-strong) !important; border-radius:99px !important;
  background:#FFFDFB !important; color:var(--marca) !important; font-family:var(--font-ui); font-size:14px; cursor:pointer;
}
#shopApp button.pzh-sin.on{ border-color:var(--marca) !important; }
#shopApp .pzh-sin .pzh-radio{ width:18px; height:18px; }
#shopApp .pzh-sin.on .pzh-radio::after{ width:10px; height:10px; }
#shopApp .pzh-nota{ margin:0 !important; font-size:14px; color:var(--tinta); }
#shopApp button.pzh-enlace{
  display:inline !important; padding:0 !important; min-height:0 !important; border:0 !important; background:none !important;
  color:var(--marca) !important; font-family:var(--font-ui); font-size:14px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* Los siete huecos de la cadena, en su orden en la cadena */
#shopApp .pzh-huecos{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#shopApp .pzh-hueco{
  width:44px; height:44px; border-radius:50%; border:1.5px dashed var(--line-marca-strong);
  display:grid; place-items:center; overflow:hidden; background:#FFFDFB;
  font-family:var(--font-display); font-size:16px; color:var(--marca);
}
#shopApp .pzh-hueco.lleno{ border:1.5px solid var(--marca); background:#fff; }
#shopApp .pzh-hueco img{ width:78%; height:78%; object-fit:contain; }
#shopApp .pzh-huecos-n{ margin:0 6px 0 4px; font-family:var(--font-ui); font-size:15px; color:var(--marca); }
#shopApp .pzh-huecos-n b{ font-weight:700; font-size:17px; }
#shopApp .pzh-bloque .ch-carta{ position:relative; }
#shopApp .pzh-insignia{
  position:absolute; top:6px; right:6px; z-index:2; width:22px; height:22px; border-radius:50%;
  background:var(--marca); color:#fff; font-family:var(--font-ui); font-size:12px; font-weight:700;
  display:grid; place-items:center; pointer-events:none;
}

/* La columna del dibujo */
#shopApp .pzh-mapa{
  position:sticky; top:calc(var(--jah-header-h, 80px) + 18px);
  display:grid; gap:12px; padding:18px; border-radius:14px; background:#F3E9E1;
}
#shopApp .pzh-dibujo svg{ display:block; width:100%; height:auto; }
#shopApp .pzh-pend{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#fff; }
#shopApp .pzh-pend img{ width:84%; height:84%; object-fit:contain; }
#shopApp .pzh-pend-vacio{ padding:20px; text-align:center; font-size:14px; color:var(--text-soft); }
#shopApp .pzh-leyenda{ display:grid; gap:4px; }
#shopApp button.pzh-ley{
  display:flex !important; align-items:center; gap:10px; padding:7px 8px !important; min-height:0 !important;
  border:0 !important; border-radius:8px !important; background:none !important; text-align:left; cursor:pointer;
  color:var(--text-soft) !important; font-family:var(--font-ui); font-size:14px;
}
#shopApp button.pzh-ley:hover{ background:#FFFDFB !important; }
#shopApp button.pzh-ley i{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor;
  display:grid; place-items:center; font-style:normal; font-size:12px;
}
#shopApp button.pzh-ley i svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.6; }
#shopApp button.pzh-ley.ok{ color:var(--marca) !important; }
#shopApp button.pzh-ley b{ display:block; font-weight:600; color:inherit; }
#shopApp button.pzh-ley em{ font-style:normal; font-size:13px; }

@media (max-width:900px){
  #shopApp .pzh-lay{ grid-template-columns:minmax(0,1fr); gap:24px; }
  #shopApp .pzh-mapa{ position:static; order:-1; grid-template-columns:150px minmax(0,1fr); align-items:center; padding:12px 14px; }
}
@media (max-width:600px){
  #shopApp .pzh-piezas{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  #shopApp button.pzh-pz{ padding:10px 4px 12px !important; }
  #shopApp button.pzh-pz small{ font-size:10px; letter-spacing:.05em; }
  #shopApp button.pzh-pz b,
  #shopApp button.pzh-pz.es-kit b{ font-size:13px; white-space:normal; }
  #shopApp .pzh-cab{ margin:18px 0 20px; gap:14px; }
  #shopApp .pzh-lead{ font-size:15px; }
  #shopApp .pzh-mapa{ grid-template-columns:118px minmax(0,1fr); gap:10px; }
  #shopApp .pzh-bt h3{ font-size:22px; }
  #shopApp .pzh-cierres{ gap:10px; }
  #shopApp .pzh-cierres.pzh-tres{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  #shopApp .pzh-cierres.pzh-tres .pzh-cierre-txt small{ display:none; }
  #shopApp button.pzh-cierre{ padding:7px !important; gap:8px; }
  #shopApp .pzh-cierre-txt b{ font-size:14.5px; }
  #shopApp button.pzh-fila{ grid-template-columns:82px minmax(0,1fr) 22px; gap:12px; }
  #shopApp .pzh-fila-txt b{ font-size:15.5px; }
  #shopApp .pzh-fila-txt > span{ font-size:13px; }
  #shopApp .pzh-hueco{ width:36px; height:36px; }
  #shopApp .pzh-pila{ gap:26px; }
  #shopApp .pzh-pila > * + *{ padding-top:24px; }
}

/* Las tres piezas necesitan más ancho que las preguntas del asistente:
   la columna del dibujo se quedaba en 250 px y sus rótulos no se leían. */
#shopApp .wiz:has(.pzh-lay){ max-width:1180px; }
@media (min-width:901px){
  #shopApp .pzh-lay{ grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); }
  #shopApp .pzh-bloque .ch-rejilla{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:600px){
  /* El botón dice «Siguiente» a secas: la pieza ya se lee arriba. */
  #shopApp .wiz-next-mas{ display:none; }
  #shopApp .wiz:has(.pzh-lay) .wiz-resumen{ display:none; }
  /* El dibujo, arriba y a lo ancho; la leyenda en dos columnas debajo. */
  #shopApp .pzh-mapa{ grid-template-columns:minmax(0,1fr); padding:12px; gap:6px; }
  #shopApp .pzh-dibujo{ max-width:250px; width:100%; margin:0 auto; }
  #shopApp .pzh-leyenda{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #shopApp button.pzh-ley{ font-size:13px; padding:5px 4px !important; gap:7px; align-items:flex-start; }
  #shopApp button.pzh-ley i{ width:20px; height:20px; font-size:11px; }
  #shopApp button.pzh-ley em{ font-size:12px; }
}

/* EL DIBUJO A ESCALA (12-10-2026): la Fina larga cae más y el dibujo
   crece hacia abajo; que nunca se salga de la pantalla. */
#shopApp .pzh-dibujo svg{ max-height:min(68vh, 560px); }

/* ===================================================================
   EL PLAZO DE ENTREGA EN EL CONFIGURADOR (22-10-2026, Gonzalo)
   Primera pantalla (elegir kit), antes de «Personalizar el kit».
   Mismo dibujo que el escaparate de la portada (home2.css).
   =================================================================== */
#shopApp .wiz-body .envio-48{ display:flex; align-items:flex-start; gap:12px; margin:-10px 0 22px !important; padding:10px 14px;
  max-width:560px; border-radius:10px; background:#EEF4EC; border:1px solid #CFE0CB; }
#shopApp .wiz-body .envio-48 svg{ width:26px; height:26px; flex:0 0 26px; margin-top:1px; fill:none; stroke:#2F6B3A; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#shopApp .wiz-body .envio-48 span{ font-size:14px !important; line-height:1.35 !important; color:#1E1E1E; }
#shopApp .wiz-body .envio-48 b{ display:block; color:#2F6B3A; font-weight:700; font-size:15px !important; }
#shopApp .wiz-body .envio-48 small{ display:block; margin-top:3px; font-size:12px !important; line-height:1.4 !important; color:#6F5E55; }

/* ============================================================
   TABLET: zona de toque en los enlaces pequeños (22-10-2026)
   El relleno para el dedo de «Detalle», «Quitar», «Ver»… solo se ponía
   hasta 560 px; en una tablet (768) «Detalle» de los charms medía 21 px
   de alto. Ahora va con cualquier pantalla táctil, sea del ancho que sea.
   ============================================================ */
@media (pointer:coarse){
  #shopApp .pz-copiar button,
  #shopApp button.ck-quitar,
  #shopApp button.ck-ver,
  #shopApp button.ch-vaciar{ padding:8px 2px !important; }
  #shopApp button.pick-info{ padding:7px 10px !important; }
  #shopApp button.ch-info{ padding:7px 4px !important; }
}