/* =========================================================
   «ASÍ SE CONSTRUYE TU ARGOLLA» (includes/obra_argolla.php)
   Bloque negro del home; mismos tokens en el panel y en la web (shop/tienda.css).
   Selectores reforzados: el panel pinta botones y campos por su cuenta.
   ========================================================= */
.obra{ padding:clamp(20px, 2.4vw, 32px); border-radius:var(--radio-lg, 20px); background:var(--fondo-joya, #141416); color:#fff; box-shadow:0 24px 60px rgba(11,11,12,.16); font-family:var(--sans); }
.obra[hidden]{ display:none !important; }
.obra *{ box-sizing:border-box; }
.obra-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.obra-eyebrow{ display:block; font-size:var(--fs-label, 11px); font-weight:600; letter-spacing:var(--ls-label, 1.5px); text-transform:uppercase; color:var(--oro, #AF9B1E); }
html body .obra .obra-titulo{ margin:6px 0 0; font-family:var(--serif); font-weight:400; font-size:clamp(28px, 1.8vw + 18px, 46px); line-height:1.05; color:#fff; }
html body .obra .obra-titulo em{ color:var(--oro, #AF9B1E); font-style:italic; }
.obra-intro{ margin:8px 0 0; font-size:var(--fs-sm, 13px); color:rgba(255,255,255,.6); max-width:52ch; }

/* selector de argolla */
.obra-pieza{ display:inline-flex; flex-wrap:wrap; padding:3px; border-radius:999px; border:1px solid rgba(255,255,255,.14); }
.obra-pieza[hidden]{ display:none !important; }
html body .obra .obra-pieza button.obra-b{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px !important; border-radius:999px !important; border:0 !important; background:transparent !important;
  color:rgba(255,255,255,.65) !important; cursor:pointer; font-family:var(--sans); font-size:var(--fs-label, 11px) !important; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:.2s; box-shadow:none !important; width:auto; }
html body .obra .obra-pieza button.obra-b[aria-checked="true"]{ background:var(--crema, #E8F0BD) !important; color:var(--negro, #0B0B0C) !important; }
.obra-sw{ width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

/* visor + ficha de la etapa */
.obra-grid{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(250px, 1fr); gap:18px; align-items:stretch; }
.obra-visor{ position:relative; margin:0; min-height:430px; border-radius:var(--radio, 16px); overflow:hidden;
  background:radial-gradient(circle at 50% 55%, rgba(232,240,189,.10), rgba(175,155,30,0) 60%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); }
.obra-visor canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.obra-etapa{ position:absolute; left:18px; top:16px; z-index:2; font-family:var(--serif); font-size:26px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); pointer-events:none; }
.obra-etapa small{ display:block; font-family:var(--sans); font-size:var(--fs-label, 11px); letter-spacing:var(--ls-label, 1.5px); text-transform:uppercase; color:var(--oro, #AF9B1E); margin-bottom:2px; }
.obra-hud{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:flex; flex-wrap:wrap; gap:8px; pointer-events:none; }
.obra-hud span{ padding:6px 12px; border-radius:999px; background:rgba(11,11,12,.6); border:1px solid rgba(175,155,30,.35); font-size:var(--fs-xs, 12px); color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; backdrop-filter:blur(6px); }
.obra-hud b{ color:var(--crema, #E8F0BD); font-weight:600; margin-left:6px; }
.obra-hud .ok{ background:rgba(31,111,58,.85); border-color:#3fa66a; color:#fff; font-weight:600; }
.obra-info{ display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:var(--radio, 16px); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.obra-n{ font-family:var(--serif); font-size:20px; color:var(--oro, #AF9B1E); letter-spacing:1px; }
html body .obra .obra-info h4{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(28px, 1.4vw + 16px, 38px); line-height:1.05; color:#fff; }
.obra-herr{ display:inline-flex; flex-direction:column; align-self:flex-start; padding:8px 14px; border-radius:12px; background:rgba(175,155,30,.12); border:1px solid rgba(175,155,30,.35); }
.obra-herr small{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.obra-herr b{ font-size:var(--fs-sm, 13px); font-weight:600; color:var(--crema, #E8F0BD); }
.obra-info p{ margin:0; font-size:15px; line-height:1.65; color:rgba(255,255,255,.8); }

/* las 11 etapas */
.obra-pasos{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(11, minmax(0, 1fr)); gap:6px; }
html body .obra .obra-pasos button.obra-b{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 10px 12px !important; border-radius:var(--radio-sm, 12px) !important;
  border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; color:rgba(255,255,255,.55) !important; cursor:pointer; text-align:left; overflow:hidden; transition:.25s;
  font-family:var(--sans); text-transform:none; letter-spacing:0; box-shadow:none !important; }
html body .obra .obra-pasos button.obra-b:hover{ border-color:rgba(175,155,30,.5) !important; color:#fff !important; }
.obra-pasos b{ font-family:var(--serif); font-size:20px; font-weight:500; line-height:1; color:rgba(255,255,255,.3); transition:color .25s; }
.obra-pasos span{ font-size:11px; font-weight:600; line-height:1.3; }
.obra-prog{ position:absolute; left:0; bottom:0; height:2px; width:calc(var(--p, 0) * 100%); background:var(--oro, #AF9B1E); transition:width .1s linear; }
html body .obra .obra-pasos button.obra-b.hecho b{ color:var(--oro, #AF9B1E); }
html body .obra .obra-pasos button.obra-b.activo{ border-color:var(--oro, #AF9B1E) !important; background:rgba(175,155,30,.12) !important; color:#fff !important; }
html body .obra .obra-pasos button.obra-b.activo b{ color:var(--oro, #AF9B1E); }

/* controles */
.obra-ctl{ display:flex; align-items:center; gap:14px; margin-top:16px; }
html body .obra button.obra-play{ width:44px; height:44px; flex:none; border-radius:50% !important; border:0 !important; background:var(--oro, #AF9B1E) !important; color:var(--negro, #0B0B0C) !important; font-size:13px; cursor:pointer; padding:0 !important; box-shadow:none !important; }
html body .obra button.obra-play:hover{ background:var(--crema, #E8F0BD) !important; }
.obra-ctl input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:22px; background:transparent; cursor:pointer; --p:0%; margin:0; border:0 !important; padding:0 !important; box-shadow:none !important; }
.obra-ctl input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:999px; background:linear-gradient(90deg, var(--oro, #AF9B1E) var(--p), rgba(255,255,255,.15) var(--p)); }
.obra-ctl input[type=range]::-moz-range-track{ height:4px; border-radius:999px; background:linear-gradient(90deg, var(--oro, #AF9B1E) var(--p), rgba(255,255,255,.15) var(--p)); }
.obra-ctl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%; background:#fff; border:2px solid var(--oro, #AF9B1E); }
.obra-ctl input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--oro, #AF9B1E); }
.obra-pct{ min-width:46px; text-align:right; font-size:var(--fs-xs, 12px); color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }
html body .obra button.obra-rep{ border:1px solid rgba(255,255,255,.25) !important; background:transparent !important; color:#fff !important; border-radius:999px !important; padding:9px 16px !important; cursor:pointer; box-shadow:none !important;
  font-family:var(--sans); font-size:var(--fs-label, 11px) !important; font-weight:600; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
html body .obra button.obra-rep:hover{ border-color:var(--oro, #AF9B1E) !important; color:var(--oro, #AF9B1E) !important; }

@media (max-width:1100px){ .obra-pasos{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
@media (max-width:900px){ .obra-grid{ grid-template-columns:minmax(0, 1fr); } .obra-visor{ min-height:340px; } }
@media (max-width:560px){ .obra-pasos{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .obra-visor{ min-height:300px; } html body .obra button.obra-rep{ display:none; } .obra-etapa{ font-size:20px; } }
@media (prefers-reduced-motion:reduce){ .obra *{ transition:none !important; } }

/* en la joyería de autor: dentro del bloque negro de la página */
.obra-autor{ background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.07); box-shadow:none; }
.obra-autor .obra-titulo{ font-size:var(--fs-seccion, clamp(32px, 2.4vw + 18px, 54px)) !important; }