/* Compra en línea de collares. Usa las variables y los formularios de /styles.css */
.tienda{max-width:1100px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,5vw,64px) 72px}
.cargando{text-align:center;padding:60px 0}
.tienda h1{font-size:clamp(30px,4.6vw,46px)}
.tienda h1 span{color:var(--oro)}
.tienda .intro{max-width:60ch;margin:14px 0 30px}
.rejilla{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.bloque{background:var(--carbon-claro);border:1px solid var(--borde);border-radius:14px;padding:22px;margin-bottom:16px}
.bloque h2{font-size:20px;margin-bottom:16px}
.bloque > label,.bloque > .fila,.bloque > fieldset{margin-bottom:14px}
.bloque > :last-child{margin-bottom:0}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:13.5px;font-weight:600;color:var(--crema-apagado);padding:0;margin-bottom:6px}

.collar-item{position:relative}
.collar-item .cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.collar-item .cab h2{margin:0}
.quitar{background:none;border:0;color:var(--gris);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;padding:4px}
.quitar:hover{color:var(--rojo)}
.muestra{font-family:var(--titulo);font-weight:700;font-size:clamp(26px,6vw,40px);letter-spacing:.12em;color:var(--crema);background:var(--casi-negro);border:1px dashed var(--borde);border-radius:10px;padding:14px;text-align:center;min-height:72px;display:grid;place-items:center;overflow-wrap:anywhere;margin-bottom:14px}
.muestra.vacia{color:var(--gris);font-size:15px;letter-spacing:0;font-family:var(--cuerpo);font-weight:400}

.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcion{position:relative;display:block;cursor:pointer;font-weight:500}
.opcion input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.opcion span{display:flex;flex-direction:column;gap:2px;height:100%;border:1px solid var(--borde);border-radius:10px;padding:12px 14px;background:var(--casi-negro);color:var(--crema-apagado);font-size:14px;line-height:1.35}
.opcion b{color:var(--crema);font-family:var(--titulo);font-size:16px}
.opcion em{font-style:normal;color:var(--oro);font-weight:700}
.opcion input:checked + span{border-color:var(--oro);box-shadow:inset 0 0 0 1px var(--oro)}
.opcion input:focus-visible + span{outline:2px solid var(--oro);outline-offset:3px}
.colores{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.colores button{background:var(--casi-negro);border:1px solid var(--borde);border-radius:99px;color:var(--crema-apagado);font:inherit;font-size:13.5px;padding:6px 12px;cursor:pointer}
.colores button:hover{border-color:var(--oro);color:var(--crema)}
.agregar{width:100%;margin-bottom:16px}

.resumen{position:sticky;top:92px;background:var(--casi-negro);border:1px solid var(--borde);border-radius:14px;padding:22px}
.resumen h2{font-size:20px;margin-bottom:14px}
.resumen ul{list-style:none;padding:0;margin:0 0 14px}
.resumen li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14.5px}
.resumen li span:first-child{min-width:0;overflow-wrap:anywhere}
.resumen li b{color:var(--crema);white-space:nowrap}
.linea{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.linea.total{font-family:var(--titulo);font-size:22px;color:var(--crema);font-weight:700}
.linea.anticipo b{color:var(--oro)}
.resumen .btn{width:100%;margin-top:16px}
.resumen .nota{margin-top:12px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check a{color:var(--oro)}

.listo{max-width:640px;margin:0 auto;text-align:center}
.listo .folio{font-family:var(--titulo);font-weight:700;font-size:clamp(26px,6vw,38px);color:var(--oro);letter-spacing:.04em;margin:10px 0 4px}
.listo .bloque{text-align:left;margin-top:22px}
.listo ol{padding-left:20px;margin:0}
.listo li{margin-bottom:8px}
.listo .btn{margin-top:20px}

.legal{max-width:760px}
.legal h2{font-size:20px;margin:28px 0 8px}
.legal p,.legal li{max-width:70ch}

@media (max-width:860px){
  .rejilla{grid-template-columns:1fr}
  .resumen{position:static}
}
@media (max-width:480px){.opciones{grid-template-columns:1fr}}