/* Espejo del Atelier — probador virtual */
.kelo-espejo-entrada { margin: 0.4rem 0 1.4rem; }
.kelo-espejo-entrada__texto { font-size: 0.78rem; color: #6b6458; letter-spacing: 0.04em; margin: 0 0 0.45rem; }
.kelo-espejo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 240px;
	padding: 0.9rem 1.6rem; background: transparent; color: #7a5f2c; border: 1px solid #b8975a; border-radius: 0;
	font-family: Jost, "Helvetica Neue", Arial, sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
	cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.kelo-espejo-btn:hover, .kelo-espejo-btn:focus-visible { background: #f7f5f1; color: #5e4920; border-color: #9c7d45; outline: none; }
.kelo-espejo-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #b8975a; }
.kelo-espejo-btn__icono { width: 20px; height: 20px; flex: none; }

/* Ventana */
.ke-abierto { overflow: hidden; }
.ke { position: fixed; inset: 0; z-index: 100000; background: rgba(17,17,17,.72); display: flex; align-items: center; justify-content: center; font-family: Jost, "Helvetica Neue", Arial, sans-serif; font-weight: 300; color: #111; }
.ke[hidden] { display: none; }
.ke__caja { background: #fff; width: min(980px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 760px) { .ke__caja { width: 100%; height: 100%; } }
.ke__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e6e3de; }
.ke__titulo { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 500; margin: 0; letter-spacing: .02em; }
.ke__cab-acciones { display: flex; gap: 0.4rem; align-items: center; }
.ke__x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #111; padding: 0.2rem 0.5rem; }
.ke__cuerpo { flex: 1; min-height: 0; overflow: auto; }
.ke__pie { padding: 0.55rem 1rem; border-top: 1px solid #e6e3de; font-size: 0.72rem; color: #6b6458; text-align: center; letter-spacing: .03em; }

/* Botones */
.ke-b { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.7rem 1rem; border: 1px solid #111; background: #fff; color: #111; font: 500 0.68rem/1.2 Jost, Arial, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; text-decoration: none; border-radius: 0; }
.ke-b:hover { background: #f7f5f1; color: #111; }
.ke-b--negro { background: #111; color: #fff; }
.ke-b--negro:hover { background: #b8975a; color: #111; border-color: #b8975a; }
.ke-b--oro { border-color: #b8975a; color: #7a5f2c; }
.ke-b--ig { border-color: #b8975a; box-shadow: inset 0 0 0 1px #f3e7cc; }
.ke-b svg { width: 16px; height: 16px; flex: none; }
.ke-b[disabled] { opacity: .45; cursor: default; }
.ke-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px dashed #b8975a; background: #fbf8f2; color: #6b5427; font-size: .72rem; letter-spacing: .06em; cursor: pointer; }
.ke-chip[aria-pressed="true"] { border-style: solid; background: #f3e7cc; }

/* Inicio */
.ke-inicio { max-width: 520px; margin: 0 auto; padding: 2rem 1.2rem; text-align: center; }
.ke-inicio h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 500; margin: 0 0 .6rem; }
.ke-inicio p { color: #3a3a3a; margin: 0 0 1.4rem; }
.ke-inicio__op { display: grid; gap: .6rem; }
.ke-inicio__op .ke-b { padding: 1rem; }
.ke-inicio__nota { margin-top: 1.4rem !important; font-size: .78rem; color: #6b6458 !important; }

/* Probar */
.ke-probar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: 100%; }
@media (max-width: 760px) { .ke-probar { grid-template-columns: 1fr; height: auto; } }
.ke-lienzo { background: #ece6dd; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.ke-lienzo canvas { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; touch-action: none; cursor: grab; }
@media (max-width: 760px) { .ke-lienzo canvas { height: auto; max-height: 62vh; } }
.ke-ctrl { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); display: flex; gap: .3rem; background: rgba(255,255,255,.92); padding: .3rem; }
.ke-ctrl button { width: 36px; height: 36px; border: 1px solid #e6e3de; background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; color: #111; }
.ke-panel { display: flex; flex-direction: column; gap: .9rem; padding: 1rem; overflow: auto; }
.ke-info__nombre { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 500; margin: 0; line-height: 1.1; }
.ke-info__precio { margin: .25rem 0 0; font-size: 1rem; }
.ke-info__stock { margin: .15rem 0 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #2f5d50; }
.ke-info__stock--ultimas { color: #8a5a12; }
.ke-info__acc { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.ke-etq { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: #8d8a85; margin: 0 0 .4rem; font-weight: 500; }
.ke-tira { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
.ke-tira button { flex: none; width: 76px; scroll-snap-align: start; border: 1px solid #e6e3de; background: #f7f5f1; padding: 4px; cursor: pointer; text-align: center; }
.ke-tira button[aria-pressed="true"] { border-color: #b8975a; box-shadow: inset 0 0 0 1px #b8975a; }
.ke-tira img { width: 100%; height: 56px; object-fit: contain; display: block; }
.ke-tira span { display: block; font-size: .6rem; line-height: 1.2; margin-top: 3px; color: #3a3a3a; }
.ke-guardar { display: grid; gap: .4rem; margin-top: auto; }

/* Looks y comparación */
.ke-looks { padding: 1rem; }
.ke-looks__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.ke-look { position: relative; border: 1px solid #e6e3de; background: #f7f5f1; }
.ke-look[aria-selected="true"] { border-color: #b8975a; box-shadow: inset 0 0 0 2px #b8975a; }
.ke-look img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; cursor: pointer; }
.ke-look__pie { padding: .4rem .5rem; font-size: .7rem; line-height: 1.3; }
.ke-look__acc { position: absolute; top: .35rem; right: .35rem; display: flex; gap: .25rem; }
.ke-look__acc button { width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: .9rem; color: #111; }
.ke-look__acc button[aria-pressed="true"] { color: #b8975a; }
.ke-looks__barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ke-vacio { text-align: center; color: #6b6458; padding: 3rem 1rem; }
.ke-vista { padding: 1rem; display: grid; gap: .9rem; justify-items: center; }
.ke-vista img { max-width: 100%; max-height: 52vh; border: 1px solid #e6e3de; }
.ke-vista__acc { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.ke-vista__tip { font-size: .74rem; color: #6b6458; margin: 0; text-align: center; }
.ke-aviso { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); background: #111; color: #fff; padding: .5rem .9rem; font-size: .74rem; letter-spacing: .06em; z-index: 3; }

/* Sello sobre la foto (computadora) */
.ke-con-sello { position: relative; }
.kelo-espejo-sello { position: absolute; left: 16px; top: 16px; z-index: 6; min-width: 0; padding: 0.6rem 1.05rem; background: rgba(255,255,255,.96); border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.18em; }
.kelo-espejo-sello .kelo-espejo-btn__icono { width: 18px; height: 18px; }
.woocommerce-product-gallery:hover .kelo-espejo-sello { background: #b8975a; color: #111; border-color: #b8975a; }
@media (max-width: 760px) { .kelo-espejo-sello { display: none !important; } }

/* Barra fija (celular) */
.kelo-espejo-barra { display: none; }
@media (max-width: 760px) {
	.kelo-espejo-barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid #e6e3de; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
	.kelo-espejo-barra .kelo-espejo-barra__espejo { flex: 1; min-width: 0; border: 0; border-right: 1px solid #e6e3de; padding: 1.05rem 0.5rem; font-size: 0.68rem; }
	.kelo-espejo-barra__carrito { flex: 1.45; display: flex; align-items: center; justify-content: center; background: #111; color: #fff !important; border: 0; font: 500 0.68rem/1 Jost, Arial, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
	.kelo-espejo-barra__carrito:hover { background: #b8975a; color: #111 !important; }
	body.ke-con-barra { padding-bottom: 64px; }
	body.ke-con-barra .kelo-wa { bottom: 80px; }
	body.ke-con-barra .kelo-uat-aviso { bottom: auto; }
}

/* Cámara en vivo */
.ke-disparo { position: absolute; left: 50%; bottom: 4.2rem; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; background: rgba(184,151,90,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.ke-disparo span { display: block; width: 46px; height: 46px; margin: auto; border-radius: 50%; background: #fff; }
.ke-disparo:hover span { background: #f3e7cc; }
.ke-envivo { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); margin: 0; background: rgba(17,17,17,.7); color: #fff; font-size: .68rem; letter-spacing: .06em; padding: .35rem .7rem; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.ke-aros { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ke-aros .ke-etq { margin: 0 .3rem 0 0; }
.ke-aros .ke-b { padding: .55rem .8rem; touch-action: none; user-select: none; }

/* Invitación a ingresar antes de usar el Espejo */
.ke-cuenta { position: fixed; inset: 0; z-index: 100000; background: rgba(17,17,17,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ke-cuenta[hidden] { display: none; }
.ke-cuenta__caja { position: relative; background: #fff; max-width: 420px; width: 100%; padding: 36px 28px 30px; text-align: center; border: 1px solid #e6e3de; }
.ke-cuenta__titulo { font-size: 1.25rem; letter-spacing: .06em; margin: 0 0 12px; }
.ke-cuenta__caja p { margin: 0 0 12px; color: #444; line-height: 1.55; }
.ke-cuenta__nota { font-size: .85rem; color: #8d8a85 !important; }
.ke-cuenta__boton { display: inline-block; margin-top: 8px; background: #111; color: #fff; text-decoration: none; padding: 12px 22px; letter-spacing: .06em; font-size: .9rem; }
.ke-cuenta__boton:hover, .ke-cuenta__boton:focus { background: #2f5d50; color: #fff; }
.ke-cuenta__cerrar { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #555; }