/* configurador: fragmento de interfaz (data-ui); aquí los bordes son del control */
.conf *{min-width:0}
.phone h4{margin:12px 0 4px}
.phone .note{margin-top:4px}

/* configurador */
.conf{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
/* teléfono: qué → cuál → color → foto+diagrama → grabado → base → largo → agregados → total (Karly 27-oct 08:48) */
@media (min-width:900px){.conf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a p" "b p" "t p"}.conf .steps-a{grid-area:a}.conf .steps-b{grid-area:b}.conf .preview{grid-area:p;position:sticky;top:72px}.conf .total{grid-area:t}}
.preview{background:#fff;border:1px solid var(--steel);padding:18px;position:sticky;top:calc(64px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.preview{position:static}}
.mainphoto{margin:0 0 8px;background:transparent;display:grid;gap:4px}
.mainphoto img{width:100%;aspect-ratio:4/3;object-fit:contain;background:transparent}
.mainphoto .compose{position:relative;width:100%;background:var(--bg);overflow:hidden} /* crema: así se ve el borde blanco del recorte */
.mainphoto .compose img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:top;aspect-ratio:auto}
.mainphoto .compose img.tag,.mainphoto .compose svg.tag{position:absolute;inset:auto;height:auto}
.mainphoto .compose img.outl{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.mainphoto .compose.solo{aspect-ratio:auto;display:flex;justify-content:center;align-items:center;padding:4%}
.mainphoto .compose.solo img.only{position:static;width:auto;height:auto;max-width:100%;max-height:min(60vh,440px);object-fit:contain;aspect-ratio:auto}
.mainphoto figcaption{font-size:var(--step-small);color:var(--muted)}
.mainphoto .nofoto.big{aspect-ratio:4/3;width:100%;height:auto;display:grid;place-items:center;background:var(--steel);font-family:var(--font-display)}
.stage{background:var(--surface);aspect-ratio:4/2.6;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage svg{width:100%;height:100%;display:block}
.steps{display:grid;gap:16px}
.step{background:#fff;border:1px solid var(--steel);padding:16px 18px}
.step .t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.step .t h3{font-size:1rem;font-family:var(--font-display);font-weight:500}
.step .t .ui{font-size:var(--step-small);color:var(--muted)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{font-family:var(--font-text);font-size:1rem;border:1px solid var(--steel);background:#fff;padding:8px 12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:44px}
.opt[aria-pressed="true"]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt .sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.opt .price{color:var(--muted)}
.opt .stock{font-size:var(--step-small);padding:1px 6px;border-radius:999px;border:1px solid}
.stock.ok{color:var(--ok)}.stock.low{color:var(--warn)}.stock.out{color:var(--bad)}
.opt[disabled]{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:6px}
.field label{font-family:var(--font-text);font-size:var(--step-small);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.field input[type=text],.field input[type=number]{color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--ink);font-family:var(--font-text);font-size:16px;padding:10px 12px;border:1px solid var(--steel);background:#fff;width:100%;min-width:0}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fonts{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.fonts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.fonts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fontbtn{border:1px solid var(--steel);background:#fff;padding:10px 12px;cursor:pointer;text-align:left;display:grid;gap:2px;min-width:0}
.fontbtn[aria-pressed="true"]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
.fontbtn .sample{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fontbtn .nm{font-family:var(--font-text);font-size:var(--step-small);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.total{background:var(--ink);color:var(--bg);padding:18px 20px;display:grid;gap:10px}
.total .big{font-family:var(--font-display);font-size:var(--step-head);font-weight:600;font-variant-numeric:tabular-nums}
.total .bs{font-family:var(--font-text);font-size:14px;color:#BDB3A0}
.lines{font-family:var(--font-text);font-size:var(--step-small);display:grid;gap:4px;color:#D9D1BF}
.lines div{display:flex;justify-content:space-between;gap:12px}
.cta{display:grid;gap:8px;margin-top:6px}
.cta .btn{width:100%}
.cta .btn.ghost{background:transparent;color:var(--bg);outline:2px solid var(--bg);outline-offset:-2px}
@media (max-width:420px){.cta{grid-template-columns:1fr}}
.msgbox{background:#fff;border:1px solid var(--steel);padding:12px 14px;font-family:var(--font-text);font-size:var(--step-small);white-space:pre-wrap;line-height:1.45;color:var(--ink)}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.copyrow button{font-family:var(--font-display);font-size:.875rem;padding:10px 14px;min-height:44px;border:0;background:var(--ink);color:var(--bg);cursor:pointer}
.toast{font-family:var(--font-text);font-size:var(--step-small);color:var(--ok)}
.xcard{border:1px solid var(--steel);background:var(--bg);padding:12px 14px;display:grid;gap:8px}
.xcard .xh{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--font-text);font-size:var(--step-small)}
.xcard .xh b{font-family:var(--font-display);font-size:var(--step-small)}
.xcard .rm{font-family:var(--font-text);font-size:var(--step-small);border:1px solid var(--steel);background:#fff;padding:4px 8px;cursor:pointer}
.xcard .lbl{font-family:var(--font-text);font-size:var(--step-small);color:var(--muted)}
.xcard .opts .opt{padding:6px 10px;min-height:32px;font-size:var(--step-small)}
.xcard input[type=text]{color:var(--ink);-webkit-text-fill-color:var(--ink);font-family:var(--font-text);font-size:15px;padding:8px 10px;border:1px solid var(--steel);background:#fff;width:100%;min-width:0}


.conf .total{background:var(--field-dark);color:var(--field-dark-ink)}
.conf .step{background:#FBF8F1}
.conf .field input{font-size:1.1rem;min-height:48px}
.conf .fit{margin-top:6px}
.conf .ok{color:var(--ok,#2E7D4F)}.conf .low{color:#8A5A00}.conf .out{color:var(--field-red)}

/* tira de fotos reales de lo elegido */
.fotos{display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:4px}
.fotos figure{margin:0;flex:0 0 96px;display:grid;gap:4px}
.fotos img,.fotos .nofoto{width:96px;height:96px;object-fit:cover;background:var(--steel)}
.fotos img[src*='/cut/'],.fotos img[src*='/fb/'],.fotos img[src*='/birth/'],.fotos img[src*='/dijes/'],.fotos img[src*='/iniciales/']{object-fit:contain;background:#fff;padding:6px}
.fotos figure > svg{width:96px;height:96px;background:#fff;padding:6px;box-sizing:border-box}
.fotos .nofoto{display:grid;place-items:center;text-align:center;font-size:var(--step-small);color:var(--steel-ink);padding:6px}
.fotos figcaption{font-size:var(--step-small);color:var(--muted);line-height:1.2}

/* banco de símbolos */
.symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;margin-top:8px}
.sym{background:#fff;border:1px solid var(--steel);padding:6px;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;min-height:44px}
.sym img{max-width:100%;max-height:100%;object-fit:contain}
.sym[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:-2px;background:var(--surface)}
[hidden]{display:none!important}

/* ---- 27-oct 11:xx: iconitos, foto con grabado, cara de atrás al lado, total fijo ---- */
.opt .ico{width:30px;height:30px;flex:none;object-fit:contain;color:var(--ink)}
.opt img.ico.ch{object-fit:cover;object-position:50% 100%}
.opt[disabled] .ico{opacity:.5}
.duo{display:grid;gap:10px}
.duo.split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:stretch}
.duo.split .stage{aspect-ratio:auto;height:100%;min-height:200px;background:var(--surface)}
.duo.over:not(.split) .stage{aspect-ratio:auto;height:auto}
.duo.over:not(.split) .stage svg{width:100%;height:auto;max-height:240px}
.duo.over:not(.split) .stage{padding:6px 0}
.mainphoto .compose.zoom{position:relative;width:100%;background:var(--bg);overflow:hidden}
.mainphoto .compose.zoom > img,.mainphoto .compose.zoom > svg{position:absolute;height:auto;max-width:none;aspect-ratio:auto;object-fit:fill}
.mainphoto .compose.solo svg.only{width:auto;height:auto;max-width:100%;max-height:min(52vh,420px)}
.special{margin-top:16px;display:grid;gap:10px}
.special .opt{display:grid;justify-items:start;gap:2px;text-align:left;width:100%}
.specialbox{display:grid;gap:10px}
.specialbox .btn{width:100%}
.crumbs{margin:0 0 .5rem;color:var(--muted)}
.crumbs a{color:inherit}
.total .sums{display:grid;gap:4px}
.total .bsbig{font-family:var(--font-display);font-size:1.25rem;font-weight:500;color:var(--field-dark-ink)}
.sticky-total{display:none}
@media (max-width:899px){
  .sticky-total{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--field-dark);color:var(--field-dark-ink);transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.8,.2,1);font-family:var(--font-display)}
  .sticky-total.show{transform:none}
  .sticky-total b{font-size:1.25rem}
  .sticky-total #stickyBs{font-family:var(--font-text);font-size:.95rem;opacity:.85;margin-left:6px}
  .sticky-total .btn{min-height:44px;padding:0 1rem;background:var(--field-dark-ink);color:var(--field-dark)}
}
@media (prefers-reduced-motion:reduce){.sticky-total{transition:none}}

/* v22: en «¿Con qué va?» cada sub-bloque (estilo, grosor, metal de la cadena) va en su propia fila */
#colorOpts{display:block}
#colorOpts .sublabel{margin:14px 0 6px}

/* v23 (Karly 27-oct 13:56): «¿Qué le grabamos?» va justo debajo de la previa; en compu la columna de la previa se desplaza sola si no cabe */
.preview #stepGrabado{margin-top:12px;border-color:var(--steel)}
@media (min-width:900px){.conf .preview{position:static}} /* con el grabado dentro ya no cabe fija en pantalla: va a todo su alto */
/* nota de material sobre el total */
.matnote{border:1px solid var(--steel);background:#FBF8F1;padding:14px 16px;display:grid;gap:6px;font-size:var(--step-small);line-height:1.5}
.matnote p{margin:0}
.matnote a{font-family:var(--font-display);font-size:.9rem;color:var(--ink)}
@media (min-width:900px){.conf{grid-template-areas:"a p" "b p" "m p" "t p"}.conf .matnote{grid-area:m}}

/* v24: alerta de grabado (solo cuando no cabe) y ayuda de talla */
.fitwarn{margin:-2px 0 10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);font-size:var(--step-small);line-height:1.35}
.fitwarn[hidden]{display:none}
.sizehelp{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 14px;border:1px solid var(--ink);border-radius:0;min-height:44px;font-size:var(--step-small);text-decoration:none;color:var(--ink);background:#fff}
.sizehelp::before{content:"?";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--font-display);font-size:12px;font-weight:600}
.sizehelp:hover{background:color-mix(in srgb,currentColor 6%,transparent)}

/* v24: checkout «Concretar mi pedido» */
.ck .ckgrid{display:grid;gap:18px;margin-top:1.25rem}
@media (min-width:960px){.ck .ckgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}.ck .cksum{position:sticky;top:88px}}
.ck .cksum{background:#FBF8F1;border:1px solid var(--steel);padding:16px 18px}
.ck .cktot{margin:.75rem 0 .25rem}
.ckform{display:grid;gap:12px}
.ckform .step{background:#FBF8F1}
.ckform .t h3{display:flex;align-items:center;gap:10px}
.ckform .t .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.8rem;flex:none}
.ckform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ckpays .opt,.ckform [data-entregas] .opt{flex-direction:column;align-items:flex-start;gap:0;text-align:left;padding:8px 12px;flex:1 1 140px}
.ckpays .opt .price,.ckform [data-entregas] .opt .price{font-size:var(--step-small)}
.ckfields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.ckfields .wide{grid-column:1/-1}
.ckform .field input,.ckform .field select,.ckform .field textarea{font-family:var(--font-text);font-size:16px;padding:10px 12px;border:1px solid var(--steel);background:#fff;width:100%;min-width:0;min-height:48px;color:var(--ink)}
.ckform .field textarea{min-height:84px;resize:vertical}
.ckform .field input:focus-visible,.ckform .field select:focus-visible,.ckform .field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ckced{display:grid;grid-template-columns:64px 1fr;gap:6px}
.ckform .note{margin-top:8px}
.ckform .lbl{margin:12px 0 6px;font-size:var(--step-small);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.ckpanel{margin-top:12px}
.paybox{margin-top:12px;padding:12px 14px;background:#fff;border:1px solid var(--steel)}
.payamt{margin:0 0 6px}
.paydata{margin:8px 0 0;display:grid;gap:6px}
.paydata div{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:10px;align-items:center}
.paydata dt{color:var(--muted);font-size:var(--step-small)}
.paydata dd{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;word-break:break-word}
.paydata .copy{font:inherit;font-size:.85rem;border:1px solid var(--steel);background:var(--bg);padding:2px 10px;cursor:pointer;min-height:32px}
.ckfile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer}
.ckfile input{position:absolute;opacity:0;width:1px;height:1px}
.ckfile-b{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--ink);color:var(--bg);font-family:var(--font-display);font-size:.9rem}
.ckfile input:focus-visible + .ckfile-b{outline:2px solid var(--accent);outline-offset:2px}
.ckfile-n{color:var(--muted);font-size:var(--step-small);word-break:break-all}
.ckthumb{margin-top:10px;max-height:180px;width:auto;border:1px solid var(--steel)}
.ckcheck{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:var(--step-small);cursor:pointer}
.ckcheck input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--ink)}
.ckerr{margin:10px 0 0;padding:8px 12px;background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);font-size:var(--step-small)}
.ckerr[hidden]{display:none}
.cksend{display:grid;gap:8px}
.cksend .btn{width:100%;min-height:58px}
.cksend .btn[disabled]{opacity:.6;cursor:wait}
.ckdone{background:#FBF8F1;border:1px solid var(--steel);padding:22px 20px;display:grid;gap:12px}
.ckdone h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);max-width:none}
.ckdone p{margin:0}
@media (min-width:960px){.ckdone{grid-column:1/-1;max-width:760px}}

/* v26: un solo botón para el capture. El input va encima del botón, transparente: el toque cae directo en él (iPhone y Android) */
.ckup{position:relative;display:block;width:100%}
.ckup-b{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:10px 18px;background:var(--ink);color:var(--bg);font-family:var(--font-display);font-size:1rem}
.ckup-b small{font-family:var(--font-text);font-size:.8rem;opacity:.75}
.ckup input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.ckup:has(input:focus-visible) .ckup-b{outline:2px solid var(--accent);outline-offset:2px}
.ckfile-n{margin:8px 0 0}
.ckfile-n:empty{display:none}
/* v26: miniatura de cada pieza en «Mi pedido» */
.ck .ckitems li{grid-template-columns:76px minmax(0,1fr) auto;align-items:start}
.ck .ckitems li .link{grid-column:2/-1}
.ckmini{width:76px;height:76px;grid-row:span 2;background:var(--bg);border:1px solid var(--steel);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ckmini > img{width:100%;height:100%;object-fit:contain;padding:4px}
.ckmini .mainphoto{margin:0;display:block;flex:none}
.ckmini .mainphoto svg.atlas{width:100%;display:block}
.ckmini .mainphoto .compose.solo{padding:2px}
.ckmini .mainphoto .compose.solo img.only,.ckmini .mainphoto .compose.solo svg.only{max-height:70px}
.ckmini .mainphoto > svg,.ckmini .mainphoto > img{width:100%;height:auto;display:block}
.ckmini.ini{font-family:var(--font-display);font-size:1.6rem;color:var(--muted)}

/* v29 (Karly 27-oct 15:55): «¿Le agregamos algo?» más grande y con iconito por categoría */
.steps-b .step:has(#extraAdd) .t h3{font-size:1.3rem}
#extraAdd{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px} /* 28-oct: las cajas cortaban «+ Birthstone» */
#extraAdd .opt{min-height:76px;padding:10px 12px;align-items:center;gap:10px;width:100%}
#extraAdd .opt .ico{width:42px;height:42px;object-fit:contain}
#extraAdd .xadd{display:grid;gap:2px;text-align:left}
#extraAdd .xadd b{font-family:var(--font-display);font-weight:500;font-size:1.05rem}
#extraAdd .xadd .price{font-size:.85rem;line-height:1.25}
.xcard .opts .opt .ico{width:28px;height:28px;object-fit:contain}
@media (max-width:560px){#extraAdd{grid-template-columns:1fr}#extraAdd .opt{min-height:68px}}
#extraAdd .xadd b{white-space:normal;overflow-wrap:anywhere}
/* agregado principal (birthstone / inicial / dije) justo debajo de la foto */
.xcard.xmain{border:0;padding:0;background:transparent}
.xcard.xmain .xh:empty{display:none}
#mainCharmStep{margin-top:14px}
/* 28-oct 11:05: la capa propia (will-change/translateZ) hacía DESAPARECER la cadena entera en Chromium (capa enorme fuera de la ventana); el borde blanco de la cadena ahora va horneado en canvas (personalizar.js bakeOutline) y no hay filtro */

/* 28-oct 13:11 (Karly): la foto real del nombre en corte va en caja blanca completa, sin marco crema */
.mainphoto .compose.solo.real{background:#fff;padding:0;aspect-ratio:1/1;max-height:min(60vh,440px)}
.mainphoto .compose.solo.real img.only{width:100%;height:100%;max-height:none;object-fit:contain}

/* 28-oct 15:39 (Karly): todas las fotos del configurador en crema dentro del marco blanco (también la foto real del nombre en corte); las JPG de fondo blanco se funden en el crema por CSS */
.mainphoto .compose.solo.real{background:var(--bg)}
.mainphoto .compose{isolation:isolate}
.mainphoto .compose img[src$='.jpg'],.mainphoto .compose img[src*='.jpg?']{mix-blend-mode:multiply}