html,body{margin:0;background:#EDEAE4} .pp-hero,.pp-foot{max-width:1280px;margin:auto;padding:28px 22px;color:#1C1A17;font-family:'EB Garamond',Georgia,serif}.pp-hero{display:grid;grid-template-columns:1fr;gap:28px;align-items:end}.pp-hero h1{font-size:clamp(32px,5vw,64px);line-height:1;margin:.2em 0}.pp-hero p{font-size:19px;max-width:35em}.pp-eyebrow{font:500 11px 'IBM Plex Mono',monospace!important;letter-spacing:.18em}.pp-hero aside{border:1px solid #D9D4CA;padding:20px;display:grid;gap:8px;background:#F6F4F0}.pp-hero strong{font-size:24px}.pp-hero span{font-size:17px}.pp-hero small{color:#6E6960;line-height:1.45}.pp-foot{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #D9D4CA;font-size:15px}.pp-foot p{margin:0}@media(max-width:700px){.pp-hero{grid-template-columns:1fr}.pp-foot{display:block}.pp-foot p+ p{margin-top:8px}}
/* FELICIANO JOYEROS · El Banco — configurador
   Todo cuelga de .gb-raiz para no pisar los estilos de Dawn. */
.gb-raiz{
 --gb-papel:#EDEAE4; --gb-tarjeta:#F6F4F0; --gb-tinta:#1C1A17; --gb-apagado:#6E6960;
 --gb-regla:#D9D4CA; --gb-bronce:#7A5C2E; --gb-bronce-sua:#EFE6D3; --gb-escena:#242219;
 background:var(--gb-papel); color:var(--gb-tinta);
 font:400 16px/1.6 "EB Garamond",Georgia,"Times New Roman",serif;
 -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){ .gb-raiz{
 --gb-papel:#151410; --gb-tarjeta:#1E1C17; --gb-tinta:#EAE6DD; --gb-apagado:#948D80;
 --gb-regla:#332F29; --gb-bronce:#C9A662; --gb-bronce-sua:#2A2519; --gb-escena:#100F0C;
}}
.gb-raiz *{box-sizing:border-box}
.gb-raiz .gb-mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.gb-raiz .gb-cab{border-bottom:1px solid var(--gb-regla);padding:14px 22px;
 display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.gb-raiz .gb-marca{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.20em;
 text-transform:uppercase;font-weight:500}
.gb-raiz .gb-marca span{color:var(--gb-bronce)}
.gb-raiz .gb-cab p{margin:0;color:var(--gb-apagado);font-size:15px;font-style:italic}

.gb-raiz .gb-banco{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:640px}
@media(max-width:860px){.gb-raiz .gb-banco{grid-template-columns:1fr;min-height:0}}

.gb-raiz .gb-escena{position:relative;background:var(--gb-escena);min-height:56vh;
 display:flex;align-items:center;justify-content:center;overflow:hidden}
@media(max-width:860px){.gb-raiz .gb-escena{min-height:58vh}}
.gb-raiz #gb-gl{width:100%;height:100%;position:absolute;inset:0;display:block;
 touch-action:none;cursor:grab}
.gb-raiz #gb-gl:active{cursor:grabbing}
.gb-raiz .gb-cota{position:absolute;left:20px;bottom:16px;z-index:2;pointer-events:none;
 font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
 color:rgba(240,236,226,.62);font-variant-numeric:tabular-nums}
.gb-raiz .gb-pista{position:absolute;right:20px;bottom:16px;z-index:2;pointer-events:none;
 font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.10em;
 color:rgba(240,236,226,.34)}
.gb-raiz .gb-lupa{position:absolute;top:14px;right:14px;z-index:2;display:flex;flex-direction:column;gap:5px}
.gb-raiz .gb-lupa button{width:30px;height:30px;border:1px solid rgba(240,236,226,.20);border-radius:2px;
 background:rgba(16,15,12,.45);color:rgba(240,236,226,.72);cursor:pointer;
 font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1;
 display:flex;align-items:center;justify-content:center;
 transition:border-color .15s,color .15s,background .15s}
.gb-raiz .gb-lupa button:hover{border-color:rgba(201,166,98,.85);color:#EFE6D3;background:rgba(16,15,12,.72)}
.gb-raiz .gb-escena.gb-soltando::after{content:"Suelta la foto aquí";position:absolute;inset:14px;z-index:3;
 border:1.5px dashed rgba(201,166,98,.75);border-radius:3px;
 display:flex;align-items:center;justify-content:center;
 font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
 text-transform:uppercase;color:#C9A662;background:rgba(16,15,12,.55)}

/* estado inicial y espera */
.gb-raiz .gb-vacio{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:18px;text-align:center;padding:28px;
 background:var(--gb-escena)}
.gb-raiz .gb-vacio h2{margin:0;font-size:27px;font-weight:400;color:#EFE6D3;
 text-wrap:balance;max-width:15em;line-height:1.25}
.gb-raiz .gb-vacio p{margin:0;max-width:26em;color:rgba(240,236,226,.52);font-size:15px}
.gb-raiz .gb-vacio[hidden]{display:none}
.gb-raiz .gb-giro{width:26px;height:26px;border:2px solid rgba(201,166,98,.25);
 border-top-color:#C9A662;border-radius:50%;animation:gb-vuelta .8s linear infinite}
@keyframes gb-vuelta{to{transform:rotate(360deg)}}
.gb-raiz .gb-puerta{position:absolute;inset:0;z-index:40;background:var(--gb-papel);
 display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.gb-raiz .gb-puerta[hidden]{display:none}
.gb-raiz .gb-puerta-caja{max-width:340px;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.gb-raiz .gb-puerta-caja input{font-family:"IBM Plex Mono",monospace;font-size:14px;
 padding:10px 12px;border:1px solid var(--gb-regla);border-radius:2px;background:var(--gb-tarjeta);
 color:var(--gb-tinta);text-align:center}
.gb-raiz .gb-puerta-caja input:focus{outline:1px solid var(--gb-bronce)}
@media(prefers-reduced-motion:reduce){.gb-raiz .gb-giro{animation-duration:2.4s}}

.gb-raiz .gb-rail{border-left:1px solid var(--gb-regla);background:var(--gb-tarjeta);
 padding:24px 22px 30px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}
@media(max-width:860px){.gb-raiz .gb-rail{border-left:0;border-top:1px solid var(--gb-regla)}}
.gb-raiz .gb-grupo{display:flex;flex-direction:column;gap:10px}
.gb-raiz .gb-grupo[hidden]{display:none}
.gb-raiz .gb-rot{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--gb-apagado);margin:0}
.gb-raiz .gb-ops{display:flex;flex-wrap:wrap;gap:6px}
.gb-raiz .gb-rail button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.gb-raiz .gb-op{font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:6px 10px;
 border:1px solid var(--gb-regla);border-radius:2px;background:var(--gb-papel);
 color:var(--gb-apagado);transition:border-color .15s,color .15s,background .15s}
.gb-raiz .gb-op:hover{border-color:var(--gb-bronce);color:var(--gb-tinta)}
.gb-raiz .gb-op[aria-pressed="true"]{border-color:var(--gb-bronce);background:var(--gb-bronce-sua);
 color:var(--gb-tinta);font-weight:500}
.gb-raiz :focus-visible{outline:2px solid var(--gb-bronce);outline-offset:2px}
.gb-raiz input[type=range]{width:100%;accent-color:var(--gb-bronce);margin:2px 0}
.gb-raiz .gb-valor{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--gb-tinta);
 font-variant-numeric:tabular-nums}
.gb-raiz .gb-valor b{font-weight:500;color:var(--gb-bronce)}
.gb-raiz .gb-accion{display:block;width:100%;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
 letter-spacing:.04em;padding:10px 12px;border:1px solid var(--gb-tinta);border-radius:2px;
 background:var(--gb-tinta);color:var(--gb-papel);text-align:center;cursor:pointer;
 text-decoration:none;transition:opacity .15s}
.gb-raiz .gb-accion:hover{opacity:.82}
.gb-raiz .gb-accion.gb-sec{background:none;color:var(--gb-tinta);border-color:var(--gb-regla)}
.gb-raiz .gb-accion.gb-sec:hover{border-color:var(--gb-bronce)}
.gb-raiz .gb-nota{font-size:14.5px;line-height:1.55;color:var(--gb-apagado);margin:0}
.gb-raiz hr{border:0;border-top:1px solid var(--gb-regla);margin:0}
.gb-raiz .gb-aviso{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--gb-bronce);
 min-height:1.3em;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.gb-raiz *{transition:none!important}}
/* espera mientras se talla la pieza */
.gb-raiz .gb-vacio.esperando h2,.gb-raiz .gb-vacio.esperando #gb-estado,
.gb-raiz .gb-vacio.esperando #gb-elegir,.gb-raiz .gb-vacio.esperando #gb-giro{display:none}
.gb-raiz .gb-espera{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:30em}
.gb-raiz .gb-espera[hidden]{display:none}
.gb-raiz .gb-med{position:relative;width:168px;height:168px}
.gb-raiz .gb-med svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gb-raiz .gb-anillo-f{fill:none;stroke:rgba(201,166,98,.16);stroke-width:2}
.gb-raiz .gb-anillo{fill:none;stroke:#C9A662;stroke-width:2.4;stroke-linecap:round;
 stroke-dasharray:351.9;stroke-dashoffset:351.9;transition:stroke-dashoffset .5s linear}
.gb-raiz .gb-med-foto{position:absolute;inset:14px;border-radius:50%;background:#8f8b84 center/cover no-repeat;
 filter:grayscale(1) contrast(.85) brightness(1.12) sepia(.08);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -8px 18px rgba(0,0,0,.35),0 6px 22px rgba(0,0,0,.35);
 animation:gb-respira 3.2s ease-in-out infinite}
.gb-raiz .gb-brillo{position:absolute;inset:14px;border-radius:50%;overflow:hidden;pointer-events:none}
.gb-raiz .gb-brillo::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
 transform:skewX(-14deg);animation:gb-barrido 2.8s ease-in-out infinite}
@keyframes gb-barrido{0%{left:-60%}60%,100%{left:130%}}
@keyframes gb-respira{50%{filter:grayscale(1) contrast(.95) brightness(1.2) sepia(.08)}}
.gb-raiz .gb-vacio .gb-fase{margin:0;color:#EFE6D3;font-size:21px;transition:opacity .35s}
.gb-raiz .gb-vacio .gb-horno{margin:0;color:#C9A662;font-size:15.5px;line-height:1.45}
.gb-raiz .gb-horno[hidden]{display:none}
.gb-raiz .gb-vacio .gb-dato{margin:0;color:rgba(240,236,226,.5);font-size:14.5px;font-style:italic;min-height:1.4em;transition:opacity .5s}
.gb-raiz .gb-vacio .gb-reloj{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:rgba(201,166,98,.6)}
@media(prefers-reduced-motion:reduce){.gb-raiz .gb-brillo::after,.gb-raiz .gb-med-foto{animation:none}}