/* ============================================================
   JEWELSathome · portada nueva (octubre 2026) — home2.css
   ------------------------------------------------------------
   Escrita MÓVIL PRIMERO: lo de fuera de los @media es el teléfono.
   Todo cuelga de .jah-h2 / .jh-*, y va con el peso suficiente para
   ganar a las tres cosas de esta web que pisan a todo el mundo:
     · el tema fuerza Playfair con !important en p, span, div, a…
     · el kit de Elementor pinta todos los <button> de granate
     · una hoja en línea del tema pone los botones naranja !important
   Por eso las cajas propias llevan .caja (las saca del neutralizador
   de brand.css) y su fondo con !important.
   ============================================================ */
.jah-h2, .jh-hoja, .jh-barra{
  --jh-crema:#FEF5E8; --jh-banda:#FFF8F3; --jh-blanco:#fff;
  --jh-marca:#3E000D; --jh-granate:#990000; --jh-naranja:#D27541; --jh-naranja-osc:#B85A2E;
  --jh-texto:#1E1E1E; --jh-suave:#6F5E55; --jh-linea:#EADBC8;
  --jh-serif:"Playfair Display", Georgia, serif;
  --jh-sans:"Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jh-gutter:16px;
}

/* ---------- Letra: Hind para leer, Playfair para titular ---------- */
.jah-h2 :is(p,span,a,li,div,small,strong,b,em,label,summary,button,figure,s),
.jh-hoja :is(p,span,a,li,div,small,strong,b,em,label,button,s),
.jh-barra :is(span,a,strong){
  font-family:var(--jh-sans) !important;
}
.jah-h2 :is(h1,h2,h3), .jh-hoja :is(h2,h3),
.jah-h2 :is(h1,h2) em, .jh-hoja .jh-serif, .jah-h2 .jh-serif, .jah-h2 .jh-card-nombre{
  font-family:var(--jh-serif) !important;
}
/* El tema pone line-height:1.6 !important a los <em>: en un titular
   separa muchísimo las líneas en cursiva. Que hereden el del titular. */
.jah-h2 :is(h1,h2,h3) em, .jh-hoja :is(h2,h3) em{ line-height:inherit !important; }
.jah-h2 img, .jh-hoja img{ filter:none; max-width:100%; display:block; }

/* ---------- Contenedor ---------- */
/* A sangre: el tema topa su contenedor en 1140 px (y en el móvil le
   pone relleno). La portada ocupa la ventana entera, como .a-sangre;
   el body del tema lleva overflow-x:hidden y se come la media barra. */
.jah-pagina.jah-h2{ background:var(--jh-crema); color:var(--jh-texto); overflow-x:clip;
  width:100vw; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:0 !important; }
.jah-h2 .jh-sec{ padding:40px var(--jh-gutter) !important; }
.jah-h2 .jh-cab{ max-width:640px; margin:0 0 18px; }
.jah-h2 .jh-eyebrow{ font-size:11.5px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--jh-naranja-osc); font-weight:600; margin:0 0 10px; }
.jah-h2 h2{ font-size:32px !important; line-height:1.08 !important; color:var(--jh-marca) !important; font-weight:400 !important; margin:0 !important; letter-spacing:-.01em; }
.jah-h2 h2 em, .jah-h2 h1 em{ font-style:italic; color:var(--jh-naranja) !important; font-weight:400; }
.jah-h2 .jh-cab-sub{ margin-top:12px; color:var(--jh-suave); font-size:16px; line-height:1.5; }
.jah-h2 h3{ font-size:20px !important; line-height:1.2 !important; color:var(--jh-marca) !important; font-weight:400 !important; margin:0 !important; }
.jah-h2 p{ font-size:16px; line-height:1.55; margin:0; }

/* ---------- Botones ---------- */
.jah-h2 .jh-btn, .jh-hoja .jh-btn, .jh-barra .jh-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px !important; border-radius:4px !important;
  font-size:16px !important; font-weight:600 !important; letter-spacing:.01em;
  text-decoration:none !important; white-space:nowrap; transition:background-color .2s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.jah-h2 .jh-btn:active, .jh-hoja .jh-btn:active, .jh-barra .jh-btn:active{ transform:scale(.98); }
.jah-h2 .jh-btn svg, .jh-hoja .jh-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.jah-h2 .jh-btn-solido, .jh-hoja .jh-btn-solido, .jh-barra .jh-btn-solido{ background-color:var(--jh-naranja) !important; color:#fff !important; border:0 !important; }
.jah-h2 .jh-btn-solido:hover, .jh-hoja .jh-btn-solido:hover, .jh-barra .jh-btn-solido:hover{ background-color:var(--jh-naranja-osc) !important; color:#fff !important; }
.jah-h2 .jh-btn-claro{ background-color:var(--jh-crema) !important; color:var(--jh-marca) !important; border:0 !important; }

/* ============================================================
   HERO
   ============================================================ */
/* Un cartel, no una plantilla: la foto a sangre, debajo la tira de
   rayas de la caja, el precio en una chapa inclinada a caballo entre
   las dos y el titular grande sobre el granate de la marca. (La cinta
   de piedras que pasaba al pie se quitó el 22-10-2026.) */
.jah-h2 .jh-hero{ padding:0 !important; position:relative; display:grid; grid-template-columns:100%; background:var(--jh-marca); color:var(--jh-crema); overflow:hidden; }
.jah-h2 .jh-hero-foto{ position:relative; height:31svh; min-height:220px; max-height:380px; }
.jah-h2 .jh-hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 44%; }
.jah-h2 .jh-hero-foto::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:repeating-linear-gradient(90deg, var(--jh-naranja) 0 16px, #6B2014 16px 32px); }

/* La chapa del precio */
.jah-h2 .jh-chapa{ position:absolute; right:14px; bottom:-38px; z-index:2; width:104px; height:104px; border-radius:50%;
  background:var(--jh-naranja); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 !important; text-align:center; line-height:1; transform:rotate(-11deg); box-shadow:0 12px 26px rgba(20,0,4,.4); }
.jah-h2 .jh-chapa::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.6); }
.jah-h2 .jh-chapa span{ font-size:10.5px !important; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#fff; }
.jah-h2 .jh-chapa b, .jah-h2 .jh-chapa sup{ font-family:var(--jh-serif) !important; }
.jah-h2 .jh-chapa b{ font-size:38px; font-weight:700; line-height:.9; margin:3px 0 2px; letter-spacing:-.03em; color:#fff; }
.jah-h2 .jh-chapa sup{ font-size:.42em; vertical-align:top; position:relative; top:.32em; margin-left:1px; letter-spacing:0; }

.jah-h2 .jh-hero-txt{ padding:46px var(--jh-gutter) 32px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.jah-h2 .jh-hero h1{ font-size:clamp(40px, 12.4vw, 54px) !important; line-height:.98 !important; color:var(--jh-crema) !important;
  font-weight:500 !important; margin:0 !important; letter-spacing:-.025em; }
.jah-h2 .jh-hero h1 em{ color:#F2B48C !important; font-weight:400; }
.jah-h2 .jh-hero-lead{ color:rgba(254,245,232,.78); font-size:15.5px; line-height:1.5; max-width:400px; margin-top:4px; }
.jah-h2 .jh-hero-lead strong{ color:#fff; font-weight:600; }
.jah-h2 .jh-hero-ctas{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:6px; }
.jah-h2 .jh-hero .jh-btn{ width:100%; min-height:56px; font-size:17px !important; }
.jah-h2 .jh-hero-ver{ color:var(--jh-crema) !important; font-size:15px !important; text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:rgba(254,245,232,.45) !important; padding:6px 4px; }
.jah-h2 .jh-hero-ver:hover{ text-decoration-color:var(--jh-crema) !important; }

/* Ordenador: texto a la izquierda, foto a la derecha, las rayas en la
   costura y la chapa montada encima. La foto no dicta el alto. */
@media (min-width:1000px){
  .jah-h2 .jh-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-rows:minmax(0,1fr);
    height:min(720px, calc(100svh - var(--jah-header-h, 96px) - var(--jah-promo-h, 0px))); min-height:560px; }
  .jah-h2 .jh-hero-foto{ grid-column:2; grid-row:1; height:auto; max-height:none; min-height:0; }
  .jah-h2 .jh-hero-foto img{ position:absolute; inset:0; object-position:center 48%; }
  .jah-h2 .jh-hero-foto::after{ top:0; bottom:0; left:0; right:auto; width:14px; height:auto;
    background:repeating-linear-gradient(180deg, var(--jh-naranja) 0 18px, #6B2014 18px 36px); }
  .jah-h2 .jh-chapa{ right:auto; left:-60px; bottom:auto; top:14%; width:134px; height:134px; }
  .jah-h2 .jh-chapa b{ font-size:50px; }
  .jah-h2 .jh-chapa span{ font-size:12px !important; }
  .jah-h2 .jh-hero-txt{ grid-column:1; grid-row:1; justify-content:center; gap:20px;
    padding:32px 96px 32px max(40px, calc((100vw - 1180px) / 2)); }
  .jah-h2 .jh-hero h1{ font-size:clamp(44px, min(4.6vw, 8vh), 72px) !important; }
  .jah-h2 .jh-hero-lead{ font-size:17px; }
  .jah-h2 .jh-hero .jh-btn{ width:auto; }
  .jah-h2 .jh-hero-ctas{ flex-direction:row; width:auto; gap:22px; }
}

/* ---------- Ventajas: una tira que se desliza ---------- */
.jah-h2 .jh-ventajas{ list-style:none; margin:0 !important; padding:14px var(--jh-gutter) !important; display:flex; gap:10px;
  overflow-x:auto; scrollbar-width:none; border-block:1px solid var(--jh-linea); background:var(--jh-crema); scroll-snap-type:x proximity; }
.jah-h2 .jh-ventajas::-webkit-scrollbar{ display:none; }
.jah-h2 .jh-ventajas li{ flex:0 0 auto; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--jh-texto); scroll-snap-align:start; padding-right:6px; }
.jah-h2 .jh-ventajas b{ color:var(--jh-marca); font-weight:600; }
.jah-h2 .jh-ventajas svg{ width:22px; height:22px; flex:0 0 22px; fill:none; stroke:var(--jh-naranja-osc); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   REJILLA DE DISEÑOS (A)
   ============================================================ */
.jah-h2 .jh-rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:22px 12px; }
.jah-h2 .jh-card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.jah-h2 .jh-card-link{ display:block; color:inherit; -webkit-tap-highlight-color:transparent; }
.jah-h2 .jh-card-foto{ position:relative; display:block; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:#efe2d1; }
.jah-h2 .jh-card-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .25s; }
@media (hover:hover){ .jah-h2 .jh-card-link:hover .jh-card-img{ transform:scale(1.04); } }
.jah-h2 .jh-sello{ position:absolute; top:8px; left:8px; background:var(--jh-marca); color:#fff; font-size:10.5px !important; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 7px; border-radius:3px; }
.jah-h2 .jh-card-piedras{ position:absolute; left:6px; right:6px; bottom:6px; display:flex; justify-content:center; gap:3px;
  padding:5px; border-radius:40px; background:rgba(255,250,244,.92); }
.jah-h2 .jh-card-piedras img{ width:22px; height:22px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1.5px #fff; }
.jah-h2 .jh-card-txt{ display:block; padding:10px 2px 0; }
.jah-h2 .jh-card-nombre{ display:block; font-size:18px !important; line-height:1.15; color:var(--jh-marca); }
.jah-h2 .jh-card-para{ display:none; }
.jah-h2 .jh-card-pie{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 2px 0; }
.jah-h2 .jh-card-precio{ font-weight:600; font-size:15px !important; color:var(--jh-marca); white-space:nowrap; }
.jah-h2 .jh-card-color{ font-size:13px !important; color:var(--jh-suave); padding:2px 2px 0; }
.jah-h2 .jh-card-color .jh-cn{ color:var(--jh-texto); }

/* Muestras de color: 22 px de vista, 34 de dedo */
.jah-h2 .jh-sws{ display:flex; gap:0; margin-left:-6px; }
.jah-h2 button.jh-sw{ width:34px !important; height:34px !important; padding:6px !important; margin:0 !important; border:0 !important;
  background-color:transparent !important; border-radius:50% !important; cursor:pointer; display:grid !important; place-items:center; min-height:0 !important; }
.jah-h2 .jh-sw i, .jh-hoja .jh-sw i{ display:block; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3px transparent; transition:box-shadow .15s; }
.jah-h2 .jh-sw.on i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3.5px var(--jh-marca); }

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.jah-h2 .jh-pasos{ background:var(--jh-banda); }
.jah-h2 .jh-pasos-lista{ list-style:none; margin:0 calc(-1 * var(--jh-gutter)) !important; padding:0 var(--jh-gutter) 4px !important;
  display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.jah-h2 .jh-pasos-lista::-webkit-scrollbar{ display:none; }
.jah-h2 .jh-pasos-lista li{ scroll-snap-align:start; }
.jah-h2 .jh-pasos-lista figure{ margin:0 0 14px !important; aspect-ratio:4/5; border-radius:6px; overflow:hidden; }
.jah-h2 .jh-pasos-lista figure img{ width:100%; height:100%; object-fit:cover; }
.jah-h2 .jh-n{ display:block; font-size:13px !important; font-weight:600; color:var(--jh-naranja-osc); letter-spacing:.1em; margin-bottom:4px; }
.jah-h2 .jh-pasos-lista p{ color:var(--jh-suave); margin-top:6px; font-size:15px; }

/* ============================================================
   QUÉ INCLUYE
   ============================================================ */
.jah-h2 .jh-incluye{ display:grid; gap:24px; }
.jah-h2 .jh-incluye-foto{ border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.jah-h2 .jh-incluye-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.jah-h2 .jh-tres{ list-style:none; margin:22px 0 0 !important; padding:0 !important; display:grid; gap:12px; }
.jah-h2 .jh-tres li{ display:flex; gap:14px; align-items:center; background:var(--jh-blanco); border:1px solid var(--jh-linea); border-radius:8px; padding:12px; }
.jah-h2 .jh-tres img{ width:64px; height:64px; flex:0 0 64px; border-radius:6px; object-fit:cover; background:#FFF9F3; }
.jah-h2 .jh-tres p{ font-size:14.5px; color:var(--jh-suave); margin-top:2px; line-height:1.45; }
.jah-h2 .jh-tres h3{ font-size:18px !important; }
.jah-h2 .jh-nota{ font-size:14px !important; color:var(--jh-suave); margin-top:16px !important; }

/* ============================================================
   GALERÍA
   ============================================================ */
.jah-h2 .jh-carril{ display:flex; gap:10px; overflow-x:auto; margin:0 calc(-1 * var(--jh-gutter)); padding:0 var(--jh-gutter); scroll-snap-type:x mandatory; scrollbar-width:none; }
.jah-h2 .jh-carril::-webkit-scrollbar{ display:none; }
.jah-h2 .jh-carril img{ flex:0 0 42%; aspect-ratio:264/520; object-fit:cover; border-radius:6px; scroll-snap-align:start; }

/* ============================================================
   PREGUNTAS
   ============================================================ */
.jah-h2 .jh-faq{ background:var(--jh-banda); }
.jah-h2 .jh-faq-lista{ max-width:760px; border-top:1px solid var(--jh-linea); }
.jah-h2 .jh-faq details{ border-bottom:1px solid var(--jh-linea); }
.jah-h2 .jh-faq summary{ list-style:none; cursor:pointer; padding:18px 36px 18px 0; position:relative; font-size:17px !important; color:var(--jh-marca); font-weight:500; }
.jah-h2 .jh-faq summary::-webkit-details-marker{ display:none; }
.jah-h2 .jh-faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--jh-naranja-osc); transition:transform .2s; }
.jah-h2 .jh-faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.jah-h2 .jh-faq details p{ padding:0 0 18px; color:var(--jh-suave); }

/* ---------- Cierre ---------- */
.jah-h2 .jh-cierre{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; padding-bottom:110px !important; }
.jah-h2 .jh-cierre h2{ font-size:36px !important; }

/* ============================================================
   BARRA DE COMPRA FIJA (solo móvil)
   ============================================================ */
.jh-barra{ position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--jh-gutter) calc(10px + env(safe-area-inset-bottom)); background:rgba(254,245,232,.97);
  border-top:1px solid var(--jh-linea); box-shadow:0 -6px 24px rgba(62,0,13,.08);
  transform:translateY(110%); transition:transform .28s ease; }
.jh-barra.visible{ transform:none; }
.jh-barra .jh-barra-txt{ font-size:14px; color:var(--jh-suave); }
.jh-barra .jh-barra-txt strong{ display:block; font-family:var(--jh-serif) !important; font-size:21px; color:var(--jh-granate); font-weight:600; line-height:1.1; }
.jh-barra .jh-btn{ flex:1 1 auto; max-width:240px; min-height:48px; }
.jh-barra .jh-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   ESCAPARATE (B) — hoja a pantalla completa en el móvil
   ============================================================ */
html.jh-hoja-abierta, html.jh-hoja-abierta body{ overflow:hidden !important; }
.jh-hoja{ position:fixed; inset:0; z-index:100000; display:flex; align-items:flex-end; justify-content:center; padding:0 !important; }
.jh-hoja[hidden]{ display:none !important; }
.jh-hoja .jh-fondo{ position:absolute; inset:0; background:rgba(30,10,5,.55); opacity:0; transition:opacity .25s; }
.jh-hoja.in .jh-fondo{ opacity:1; }
.jh-hoja .jh-panel{ position:relative; width:100%; height:100%; background:var(--jh-crema); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.jh-hoja.in .jh-panel{ transform:none; }
@media (prefers-reduced-motion:reduce){ .jh-hoja .jh-panel, .jh-hoja .jh-fondo, .jh-barra{ transition:none; } }
.jh-hoja .jh-scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.jh-hoja button.jh-cerrar{ position:absolute; top:calc(10px + env(safe-area-inset-top)); right:10px; z-index:3; width:44px !important; height:44px !important;
  border-radius:50% !important; background-color:rgba(255,255,255,.92) !important; border:0 !important; padding:0 !important;
  display:grid !important; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.15); color:var(--jh-marca) !important; cursor:pointer; min-height:0 !important; }
.jh-hoja .jh-cerrar svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* Fotos: carril con imán, puntos debajo */
.jh-hoja .jh-fotos{ position:relative; background:#efe2d1; }
.jh-hoja .jh-fotos-carril{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:10/9; }
.jh-hoja .jh-fotos-carril::-webkit-scrollbar{ display:none; }
.jh-hoja .jh-fotos-carril img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; }
.jh-hoja .jh-puntos{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.jh-hoja .jh-puntos i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .2s; }
.jh-hoja .jh-puntos i.on{ background:#fff; width:18px; border-radius:4px; }
.jh-hoja .jh-fotos .jh-sello{ position:absolute; top:calc(16px + env(safe-area-inset-top)); left:12px; background:var(--jh-marca); color:#fff; font-size:11px !important; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 8px; border-radius:3px; }

.jh-hoja .jh-info{ padding:20px var(--jh-gutter) 28px; display:flex; flex-direction:column; gap:20px; }
.jh-hoja h2{ font-size:30px !important; line-height:1.08 !important; color:var(--jh-marca) !important; font-weight:400 !important; margin:0 !important; }
.jh-hoja .jh-para{ font-style:italic; color:var(--jh-suave); margin-top:6px !important; font-size:16px; }
.jh-hoja .jh-precio-g{ font-size:22px !important; font-weight:600; color:var(--jh-marca); margin-top:10px !important; }
.jh-hoja .jh-precio-g small{ font-size:13px !important; font-weight:400; color:var(--jh-suave); margin-left:6px; }
.jh-hoja .jh-bloque-t{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px !important; }
.jh-hoja .jh-bloque-t h3{ font-size:19px !important; color:var(--jh-marca) !important; font-weight:400 !important; margin:0 !important; }
.jh-hoja .jh-bloque-t span{ font-size:13px !important; color:var(--jh-suave); }

/* Colores: píldoras con nombre — en un móvil, un punto sin nombre no se entiende */
.jh-hoja .jh-colores{ display:flex; flex-wrap:wrap; gap:8px; }
.jh-hoja button.jh-color{ display:inline-flex !important; align-items:center; gap:8px; min-height:44px !important; padding:0 16px 0 8px !important;
  border-radius:40px !important; border:1.5px solid var(--jh-linea) !important; background-color:#fff !important; color:var(--jh-texto) !important;
  font-size:15px !important; font-weight:500 !important; cursor:pointer; }
.jh-hoja button.jh-color i{ width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.jh-hoja button.jh-color.on{ border-color:var(--jh-marca) !important; background-color:#fff !important; box-shadow:0 0 0 1px var(--jh-marca); }

/* Las piedras, en grande */
.jh-hoja .jh-piedras{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px; background:#fff; border:1px solid var(--jh-linea); border-radius:10px; padding:16px 12px; }
.jh-hoja .jh-piedra{ text-align:center; font-size:13px !important; line-height:1.25; color:var(--jh-texto); }
.jh-hoja .jh-piedra img{ width:100%; max-width:96px; aspect-ratio:1; margin:0 auto 7px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--jh-linea); }
.jh-hoja .jh-piedras.cambia{ animation:jhLatido .35s ease; }
@keyframes jhLatido{ from{ opacity:.35; transform:scale(.985); } to{ opacity:1; transform:none; } }

.jh-hoja .jh-lista3{ list-style:none; margin:0 !important; padding:0 !important; display:grid; gap:10px; }
.jh-hoja .jh-lista3 li{ display:flex; gap:12px; align-items:center; font-size:15px; color:var(--jh-texto); }
.jh-hoja .jh-lista3 b{ display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--jh-marca); color:#fff; font-size:13px !important; font-weight:600; }
.jh-hoja .jh-lista3-nota{ font-size:14px !important; color:var(--jh-suave); margin-top:10px !important; }
.jh-hoja .jh-confianza{ display:grid; gap:8px; font-size:14px; color:var(--jh-suave); padding:14px; border-radius:8px; background:var(--jh-banda); border:1px solid var(--jh-linea); }

/* Pie fijo con el botón */
.jh-hoja .jh-pie{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:12px var(--jh-gutter) calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--jh-linea); box-shadow:0 -6px 20px rgba(62,0,13,.07); }
.jh-hoja .jh-pie-precio{ font-size:12.5px !important; color:var(--jh-suave); line-height:1.2; }
.jh-hoja .jh-pie-precio strong{ display:block; font-size:21px !important; color:var(--jh-marca); font-weight:600; }
.jh-hoja .jh-pie .jh-btn{ flex:1 1 auto; }

/* ============================================================
   TABLETA Y ORDENADOR
   ============================================================ */
@media (min-width:700px){
  .jah-h2, .jh-hoja, .jh-barra{ --jh-gutter:32px; }
  .jah-h2 .jh-rejilla{ grid-template-columns:repeat(3,1fr); gap:26px 22px; }
  .jah-h2 .jh-card-para{ display:block; font-size:14px !important; font-style:italic; color:var(--jh-suave); margin-top:4px; }
  .jah-h2 .jh-card-nombre{ font-size:21px !important; }
  .jah-h2 .jh-card-piedras img{ width:30px; height:30px; }
  .jah-h2 .jh-card-piedras{ gap:5px; left:10px; right:10px; bottom:10px; padding:6px; }
  .jah-h2 .jh-pasos-lista{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; overflow:visible; margin:0 !important; padding:0 !important; gap:26px; }
  .jah-h2 .jh-carril img{ flex-basis:23%; }
  .jah-h2 h2{ font-size:38px !important; }
}
@media (min-width:1000px){
  .jah-h2 .jh-sec{ padding:56px max(40px, calc((100% - 1180px) / 2)) !important; }
  .jah-h2 .jh-cierre{ padding-bottom:64px !important; }
  .jah-h2 .jh-ventajas{ justify-content:center; gap:40px; overflow:visible; }
  .jah-h2 .jh-incluye{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .jah-h2 .jh-incluye-foto{ aspect-ratio:4/5; }
  .jah-h2 .jh-faq-lista{ margin:0 auto; }
  .jah-h2 .jh-faq .jh-cab{ text-align:center; margin-inline:auto; }
  /* En el ordenador la barra es una cápsula flotante, centrada abajo. */
  .jh-barra{ left:50%; right:auto; bottom:20px; width:auto; gap:28px; padding:10px 10px 10px 28px; border:1px solid var(--jh-linea);
    border-radius:60px; transform:translate(-50%, 140%); box-shadow:0 12px 34px rgba(62,0,13,.18); }
  .jh-barra.visible{ transform:translate(-50%, 0); }
  .jh-barra .jh-btn{ border-radius:40px !important; max-width:none; }
  .jh-barra .jh-barra-txt strong{ display:inline; margin-left:4px; }

  /* El escaparate deja de ser una hoja y pasa a ventana de dos columnas */
  .jh-hoja{ align-items:center; padding:24px !important; }
  .jh-hoja .jh-panel{ max-width:1080px; height:auto; max-height:min(860px, calc(100vh - 48px)); border-radius:12px;
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; transform:translateY(24px); opacity:0; transition:transform .3s, opacity .25s; }
  .jh-hoja.in .jh-panel{ opacity:1; }
  .jh-hoja .jh-scroll{ display:contents; }
  .jh-hoja .jh-fotos{ grid-row:1 / 3; grid-column:1; }
  .jh-hoja .jh-fotos-carril{ aspect-ratio:auto; height:100%; }
  .jh-hoja .jh-info{ grid-column:2; grid-row:1; overflow-y:auto; padding:36px 36px 24px; }
  .jh-hoja .jh-pie{ grid-column:2; grid-row:2; padding:16px 36px; box-shadow:none; }
  .jh-hoja .jh-piedras{ grid-template-columns:repeat(5,1fr); }
  .jh-hoja h2{ font-size:36px !important; }
}

/* Cinco diseños en dos columnas dejan uno huérfano: el último ocupa la
   fila entera, más apaisado, en vez de dejar un hueco. Solo en móvil. */
@media (max-width:699px){
  .jah-h2 .jh-card:last-child:nth-child(odd){ grid-column:1 / -1; }
  .jah-h2 .jh-card:last-child:nth-child(odd) .jh-card-foto{ aspect-ratio:16/11; }
  .jah-h2 .jh-card:last-child:nth-child(odd) .jh-card-img{ object-position:center 35%; }
}

/* Ordenador: la foto del hero no puede dictar el alto (con su
   proporción vertical, la portada medía 912 px en una pantalla de 900);
   y la última fila de la rejilla, con dos diseños, va centrada. */
@media (min-width:700px){
  .jah-h2 .jh-rejilla{ display:flex; flex-wrap:wrap; justify-content:center; }
  .jah-h2 .jh-rejilla > .jh-card{ width:calc((100% - 44px) / 3); }
}
@media (min-width:1000px){
}

/* ---------- Escaparate: pasar de un diseño a otro ---------- */
.jh-hoja .jh-nav{ position:absolute; top:calc(10px + env(safe-area-inset-top)); left:10px; z-index:3; display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.92); border-radius:40px; padding:0 2px; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.jh-hoja button.jh-nav-b{ width:42px !important; height:44px !important; min-height:0 !important; padding:0 !important; border:0 !important;
  background-color:transparent !important; color:var(--jh-marca) !important; display:grid !important; place-items:center; cursor:pointer; border-radius:40px !important; }
.jh-hoja .jh-nav-b svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.jh-hoja .jh-nav-n{ font-size:13px !important; font-weight:600; color:var(--jh-marca); min-width:34px; text-align:center; }
/* El sello baja: arriba ya están las flechas y la equis. */
.jh-hoja .jh-fotos .jh-sello{ top:auto; bottom:28px; }

.jh-hoja .jh-otros-carril{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0 calc(-1 * var(--jh-gutter)); padding:2px var(--jh-gutter) 6px; }
.jh-hoja .jh-otros-carril::-webkit-scrollbar{ display:none; }
.jh-hoja button.jh-otro{ flex:0 0 42%; max-width:180px; display:flex !important; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:0 !important; border:0 !important; background-color:transparent !important; color:var(--jh-texto) !important; cursor:pointer;
  scroll-snap-align:start; white-space:normal !important; min-height:0 !important; }
.jh-hoja .jh-otro img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; margin-bottom:6px; }
.jh-hoja .jh-otro-n{ font-family:var(--jh-serif) !important; font-size:16px !important; line-height:1.15; color:var(--jh-marca); }
.jh-hoja .jh-otro-p{ font-size:13px !important; color:var(--jh-suave); }
.jh-hoja .jh-otro-sw{ display:flex; gap:4px; margin-top:4px; }
.jh-hoja .jh-otro-sw i{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
@media (min-width:1000px){
  .jh-hoja button.jh-otro{ flex-basis:30%; }
}

/* ============================================================
   ALICATES DE REGALO (10-10-2026)
   Un regalo solo vende si se ve donde se decide: junto al precio y
   junto al botón. Mismo sello en todas partes —el lazo y «De regalo»—
   para que se reconozca de un vistazo.
   ============================================================ */
.jah-h2 .jh-regalo, .jh-hoja .jh-regalo{ display:flex; align-items:center; gap:10px; margin:2px 0 0 !important; padding:10px 14px;
  border:1.5px dashed rgba(242,180,140,.7); border-radius:8px; background:rgba(242,180,140,.12);
  color:var(--jh-crema); font-size:15px !important; line-height:1.3; width:100%; max-width:420px; }
.jah-h2 .jh-regalo svg, .jh-barra small svg{ width:22px; height:22px; flex:0 0 22px; fill:none; stroke:#F2B48C; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.jah-h2 .jh-regalo b{ color:#F2B48C; font-weight:700; }
/* La versión sobre fondo claro (el cierre). */
.jah-h2 .jh-regalo-claro{ border-color:var(--jh-naranja); background:#FFF1E6; color:var(--jh-marca); width:auto; }
.jah-h2 .jh-regalo-claro svg{ stroke:var(--jh-naranja-osc); }
.jah-h2 .jh-regalo-claro b{ color:var(--jh-naranja-osc); }

/* Tira de ventajas: el regalo va primero y resaltado. */
.jah-h2 .jh-ventajas li.jh-v-regalo{ background:var(--jh-naranja); color:#fff; padding:5px 12px 5px 9px; border-radius:40px; }
.jah-h2 .jh-ventajas li.jh-v-regalo b{ color:#fff; }
.jah-h2 .jh-ventajas li.jh-v-regalo svg{ stroke:#fff; }
.jah-h2 .jh-cab-regalo{ color:var(--jh-naranja-osc); font-weight:600; }

/* Qué incluye: el cuarto, marcado como regalo. */
.jah-h2 .jh-tres li.jh-tres-regalo{ border:1.5px dashed var(--jh-naranja); background:#FFF6EE; }
.jah-h2 .jh-tag{ display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 8px; border-radius:40px; background:var(--jh-naranja);
  color:#fff; font-size:11px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; }

/* Barra fija: la línea del regalo debajo del precio. */
.jh-barra .jh-barra-txt small{ display:flex; align-items:center; gap:4px; font-size:12.5px !important; color:var(--jh-naranja-osc); font-weight:600; margin-top:1px; white-space:nowrap; }
.jh-barra small svg{ width:15px; height:15px; flex-basis:15px; stroke:var(--jh-naranja-osc); }
@media (min-width:1000px){
  .jh-barra .jh-barra-txt{ display:flex; align-items:center; gap:12px; }
  .jh-barra .jh-barra-txt small{ margin:0; padding-left:12px; border-left:1px solid var(--jh-linea); }
}

/* Escaparate: el regalo bajo el precio y en el pie. */
.jh-hoja .jh-hoja-regalo{ display:flex; align-items:center; gap:12px; margin-top:12px !important; padding:8px 12px 8px 8px;
  border:1.5px dashed var(--jh-naranja); border-radius:10px; background:#FFF6EE; }
.jh-hoja .jh-hoja-regalo img{ width:56px; height:56px; flex:0 0 56px; border-radius:6px; object-fit:cover; background:#fff; }
.jh-hoja .jh-hoja-regalo span{ font-size:14px !important; line-height:1.35; color:var(--jh-texto); }
.jh-hoja .jh-hoja-regalo b{ display:block; color:var(--jh-naranja-osc); font-weight:700; font-size:12px !important; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.jh-hoja .jh-pie-precio em{ display:block; font-style:normal; font-size:12px !important; line-height:1.3 !important; color:var(--jh-naranja-osc); font-weight:600; white-space:nowrap; }

/* ===================================================================
   EL CARRUSEL DE DISEÑOS (12-10-2026) · como el del prototipo
   Una fila que se desliza: en el móvil se ve una tarjeta y media (78 %),
   en tableta tres y en el ordenador cuatro, con flechas a los lados.
   =================================================================== */
.jah-h2 .jh-carrusel{ position:relative; margin:0 calc(-1 * var(--jh-gutter)); }
.jah-h2 .jh-c2-carril{
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding:0 var(--jh-gutter); scrollbar-width:none;
  padding:0 var(--jh-gutter) 6px;
}
.jah-h2 .jh-c2-carril::-webkit-scrollbar{ display:none; }
.jah-h2 .jh-c2{ flex:0 0 78%; scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; }

.jah-h2 .jh-c2-fotos{ position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:#E9E4DE; }
.jah-h2 .jh-c2-pista{
  display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-tap-highlight-color:transparent;
}
.jah-h2 .jh-c2-pista::-webkit-scrollbar{ display:none; }
.jah-h2 .jh-c2-pista img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:start; display:block; }
.jah-h2 .jh-c2-sello{
  position:absolute; top:12px; left:12px; padding:7px 12px; border-radius:2px;
  background:#FFFDFB; color:var(--jh-marca); font-size:12px !important; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  pointer-events:none;
}
.jah-h2 button.jh-c2-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:32px !important; height:32px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:0 !important; border-radius:50% !important; background:rgba(255,253,251,.9) !important; color:var(--jh-marca) !important;
  font-size:19px !important; line-height:1 !important; display:grid; place-items:center; cursor:pointer;
  opacity:0; transition:opacity .2s;
}
.jah-h2 .jh-c2-nav.ant{ left:8px; }
.jah-h2 .jh-c2-nav.sig{ right:8px; }
.jah-h2 .jh-c2-fotos:hover .jh-c2-nav, .jah-h2 .jh-c2-nav:focus-visible{ opacity:1; }
@media (hover:none){ .jah-h2 .jh-c2-nav{ display:none !important; } }
.jah-h2 a.jh-c2-mas{
  position:absolute; right:12px; bottom:12px; z-index:2; width:40px; height:40px; border-radius:50%;
  background:#FFFDFB; color:var(--jh-marca) !important; font-size:24px; line-height:1; text-decoration:none !important;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.12); transition:transform .2s;
}
.jah-h2 a.jh-c2-mas:hover{ transform:scale(1.08); }
.jah-h2 .jh-c2-puntos{ display:flex; justify-content:center; gap:5px; margin-top:10px; }
.jah-h2 .jh-c2-puntos i{ width:5px; height:5px; border-radius:50%; background:#D8CCC1; }
.jah-h2 .jh-c2-puntos i.on{ background:var(--jh-marca); }
.jah-h2 a.jh-c2-txt{ display:grid; gap:3px; padding:8px 2px 0; color:inherit; text-decoration:none !important; }
.jah-h2 .jh-c2-nombre{ font-family:Hind, system-ui, sans-serif !important; font-weight:500; font-size:14px !important; letter-spacing:.06em; text-transform:uppercase; color:var(--jh-marca); }
.jah-h2 .jh-c2-para{ font-size:13.5px !important; line-height:1.35; color:var(--jh-suave); }
.jah-h2 .jh-c2-precio{ font-size:14px !important; color:var(--jh-marca); }

.jah-h2 button.jh-c2-flecha{
  position:absolute; top:calc((min(100vw, 1180px) - 2 * var(--jh-gutter)) * .39); transform:translateY(-50%); z-index:3;
  width:40px !important; height:40px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:1px solid var(--jh-marca) !important; border-radius:50% !important; background:rgba(248,243,238,.94) !important;
  color:var(--jh-marca) !important; display:none; place-items:center; cursor:pointer; transition:opacity .2s;
}
.jah-h2 button.jh-c2-flecha svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.jah-h2 button.jh-c2-flecha:disabled{ opacity:.25; pointer-events:none; }
.jah-h2 .jh-c2-flecha.ant{ left:2px; }
.jah-h2 .jh-c2-flecha.sig{ right:2px; }

@media (min-width:700px){
  .jah-h2 .jh-c2{ flex-basis:calc((100% - 2 * var(--jh-gutter) - 28px) / 3); }
}
@media (min-width:761px){
  .jah-h2 button.jh-c2-flecha{ display:grid; top:38%; }
}
@media (min-width:1024px){
  .jah-h2 .jh-c2-carril{ gap:20px; }
  .jah-h2 .jh-c2{ flex-basis:calc((100% - 2 * var(--jh-gutter) - 60px) / 4); }
  .jah-h2 .jh-c2-flecha.ant{ left:-6px; }
  .jah-h2 .jh-c2-flecha.sig{ right:-6px; }
}
/* Las flechas, dentro de la fila: con la tarjeta que asoma por la
   derecha, la de «siguiente» quedaba fuera de la pantalla. */
@media (min-width:761px){
  .jah-h2 .jh-c2-flecha.ant{ left:6px !important; }
  .jah-h2 .jh-c2-flecha.sig{ right:6px !important; }
}

/* ===================================================================
   EL PLAZO DE ENTREGA (22-10-2026, Gonzalo: «que sea un motivo de compra»)
   En el escaparate, justo debajo del regalo. El asterisco va pegado.
   =================================================================== */
.jh-hoja .jh-hoja-envio{ display:flex; align-items:flex-start; gap:12px; margin-top:10px !important; padding:10px 12px;
  border-radius:10px; background:#EEF4EC; border:1px solid #CFE0CB; }
.jh-hoja .jh-hoja-envio 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; }
.jh-hoja .jh-hoja-envio span{ font-size:14px !important; line-height:1.35; color:var(--jh-texto); }
.jh-hoja .jh-hoja-envio b{ display:block; color:#2F6B3A; font-weight:700; font-size:15px !important; }
.jh-hoja .jh-hoja-envio small{ display:block; margin-top:3px; font-size:12px !important; line-height:1.4 !important; color:var(--jh-suave); }

/* ===================================================================
   DE DÓNDE NACE JEWELSathome (22-10-2026): la marca madre, abajo del todo.
   Móvil: foto arriba y texto debajo; ordenador: foto a la izquierda.
   =================================================================== */
.jah-h2 .jh-origen{ display:grid; gap:24px; }
.jah-h2 .jh-origen-foto{ border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.jah-h2 .jh-origen-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; }
.jah-h2 .jh-origen-txt p{ margin:14px 0 0 !important; font-size:16px !important; line-height:1.6 !important; color:var(--jh-texto); }
.jah-h2 .jh-origen-txt p b{ color:var(--jh-marca); font-weight:600; }
.jah-h2 .jh-origen-datos{ list-style:none; margin:22px 0 0 !important; padding:16px 0 0 !important; border-top:1px solid var(--jh-linea);
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.jah-h2 .jh-origen-datos li{ font-size:13px !important; line-height:1.3; color:var(--jh-suave); }
.jah-h2 .jh-origen-datos b{ display:block; font-family:var(--jh-serif) !important; font-size:28px !important; line-height:1.1; color:var(--jh-naranja) !important; font-weight:400; }
.jah-h2 .jh-origen-link{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:15px !important; color:var(--jh-marca) !important;
  text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:var(--jh-naranja) !important; padding:6px 0; }
.jah-h2 .jh-origen-link svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:1000px){
  .jah-h2 .jh-origen{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .jah-h2 .jh-origen-foto{ aspect-ratio:4/5; }
}

/* La etiqueta «Entorno de pruebas» tapaba la barra de compra en el móvil (22-10-2026). */
@media (max-width:760px){ body:has(.jah-h2) .preview-flag{ display:none !important; } }

/* ---------- Tablet en vertical (700–999 px), 22-10-2026 ----------
   Hasta aquí la tablet heredaba el móvil tal cual: el botón del hero a
   todo lo ancho (730 px) y el escaparate a pantalla completa con una foto
   de 768 px de alto que dejaba el precio y «Elegir este kit» muy abajo.
   El escaparate pasa a ventana centrada y la foto, a apaisada. */
@media (min-width:700px) and (max-width:999px){
  .jah-h2 .jh-hero-ctas{ flex-direction:row; align-items:center; width:auto; gap:22px; }
  .jah-h2 .jh-hero .jh-btn{ width:auto; padding-left:34px !important; padding-right:34px !important; }
  .jh-hoja{ align-items:center; padding:32px !important; }
  .jh-hoja .jh-panel{ max-width:680px; height:calc(100vh - 64px); border-radius:14px; }
  .jh-hoja .jh-fotos-carril{ aspect-ratio:4/3; }
}