/* ══════════════════════════════════════════════════════════════════
COLORA · Estudio (solo escritorio)
Sistema visual coherente: un radio, un acento (violeta de marca) y
vidrio claro con borde fino. Todo cuelga de html.studio, que añade
js/studio.js únicamente en pantallas de escritorio.
══════════════════════════════════════════════════════════════════ */
html.studio {
--st-accent: #8B5CF6;
--st-accent-h: #7C3AED;
--st-accent-soft: rgba(139, 92, 246, .10);
--st-ink: #17171f;
--st-ink-2: #4b4b57; /* texto secundario: contraste ≥ 7:1 sobre blanco */
--st-ink-3: #6b6b78; /* texto terciario: contraste ≥ 5:1 */
--st-glass: rgba(255, 255, 255, .78);
--st-line: rgba(15, 15, 25, .09);
--st-r: 16px;
--st-shadow: 0 12px 36px -14px rgba(40, 24, 90, .28), 0 2px 8px rgba(40, 24, 90, .06);
}
/* ── Escenario: el visor ocupa toda el área de trabajo ───────────── */
html.studio .editor { overflow: clip !important; } /* clip: no es un contenedor de scroll, nada puede desplazarlo */
html.studio .workspace { position: relative; }
html.studio #viewer3d-wrap {
position: absolute !important;
inset: 0 !important;
z-index: 50;
background:
radial-gradient(90% 70% at 50% 34%, #ffffff 0%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, #f6f5fa 0%, #ecebf3 62%, #e4e2ee 100%) !important;
overflow: hidden;
}
/* suelo: un velo suave bajo la prenda */
html.studio #viewer3d-wrap::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
background: linear-gradient(to top, rgba(139, 92, 246, .07), rgba(139, 92, 246, 0));
pointer-events: none;
}
/* rejilla de puntos: solo si se activa "Rejilla" */
html.studio.rejilla-on #viewer3d-wrap::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(60, 55, 90, .28) 1px, transparent 1px);
background-size: 24px 24px;
}
html.studio .workspace { background-image: none !important; background-color: transparent !important; }
/* cabecera flotando sobre el escenario */
html.studio .topbar { position: relative; z-index: 10050; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.studio .topbar-isla {
background: var(--st-glass) !important; border: 1px solid var(--st-line) !important; border-radius: 999px !important; box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
html.studio #tab-list .editor-tab {
background: var(--st-glass) !important; border: 1px solid var(--st-line) !important; box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
/* ── Ocultar lo que reemplaza el dock ────────────────────────────── */
html.studio .bottom-controls,
html.studio .zoom-floating,
html.studio .floating-buttons,
html.studio .precio-burbuja:not(.en-dock) { display: none !important; }
html.studio body.modo-3d-activo #barra-vista,
html.studio.modo3d #barra-vista { display: none !important; }
html.studio .submenu > .btn-continuar-global { display: none !important; }
html.studio body:not(.modo-3d-activo) .dock-vistas,
html.studio body:not(.modo-3d-activo) .dock-luz-wrap { display: none; }
/* ── Dock inferior ───────────────────────────────────────────────── */
html.studio .dock {
position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
z-index: 10020; display: flex; align-items: center; gap: 6px;
padding: 8px 8px 8px 12px; border-radius: 22px;
background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
font-family: 'Poppins', system-ui, sans-serif; white-space: nowrap;
}
html.studio .dock-g { display: flex; align-items: center; gap: 2px; }
html.studio .dock-sep { width: 1px; height: 22px; background: var(--st-line); margin: 0 6px; flex-shrink: 0; }
html.studio .dock .dock-btn,
html.studio .dock .accion-btn,
html.studio .dock .herramienta-btn {
width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: transparent;
color: var(--st-ink); display: grid; place-items: center; cursor: pointer; box-shadow: none;
transition: background .15s, color .15s, transform .12s;
}
html.studio .dock .dock-btn:hover,
html.studio .dock .accion-btn:hover,
html.studio .dock .herramienta-btn:hover { background: var(--st-accent-soft); color: var(--st-accent); }
html.studio .dock .dock-btn:active,
html.studio .dock .accion-btn:active { transform: scale(.94); }
html.studio .dock .dock-btn:disabled,
html.studio .dock .herramienta-btn:disabled { opacity: .32; cursor: default; background: transparent; color: var(--st-ink); }
html.studio .dock svg { width: 18px; height: 18px; stroke-width: 1.8; }
html.studio .dock-vistas { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(15, 15, 25, .055); }
html.studio .dock-vistas button {
border: 0; background: transparent; padding: 7px 13px; border-radius: 10px;
font: 500 12px/1 'Poppins', system-ui, sans-serif; color: var(--st-ink-2); cursor: pointer;
transition: background .18s, color .18s, box-shadow .18s;
}
html.studio .dock-vistas button:hover { color: var(--st-ink); }
html.studio .dock-vistas button.on { background: #fff; color: var(--st-ink); box-shadow: 0 1px 3px rgba(20, 15, 50, .14); }
html.studio .dock-luz-wrap { position: relative; }
html.studio .dock-luz.abierto { background: var(--st-accent-soft); color: var(--st-accent); }
/* CTA: «Continuar · $22.000» */
html.studio .dock-cta { position: relative; margin-left: 4px; }
html.studio .dock #btn-continuar-global {
display: inline-flex !important; align-items: center; gap: 9px;
width: auto !important; margin: 0 !important; padding: 0 22px !important; height: 40px;
border-radius: 13px !important; border: 0 !important;
background: var(--st-accent) !important; color: #fff !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
font: 600 13.5px/1 'Poppins', system-ui, sans-serif !important; letter-spacing: .1px;
box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .55) !important;
transition: background .18s, transform .12s, box-shadow .18s !important;
}
html.studio .dock #btn-continuar-global:hover { background: var(--st-accent-h) !important; transform: translateY(-1px); }
html.studio .dock #btn-continuar-global .cta-sep { opacity: .55; font-weight: 400; }
html.studio .dock #btn-continuar-global .cta-p { font-variant-numeric: tabular-nums; }
/* desglose de precio: aparece al pasar sobre el botón (reemplaza la tarjeta suelta) */
html.studio .dock-cta .precio-burbuja.en-dock {
display: block !important; position: absolute !important; left: auto !important; top: auto !important;
right: 0; bottom: calc(100% + 14px); width: 230px; padding: 14px 16px; border-radius: var(--st-r);
background: var(--st-glass) !important; color: var(--st-ink) !important;
border: 1px solid var(--st-line) !important; box-shadow: var(--st-shadow) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity .18s, transform .18s;
}
html.studio .dock-cta:hover .precio-burbuja.en-dock,
html.studio .dock-cta:focus-within .precio-burbuja.en-dock { opacity: 1; transform: none; }
html.studio .precio-burbuja.en-dock .precio-burbuja-label { color: var(--st-ink-2) !important; }
html.studio .precio-burbuja.en-dock .precio-burbuja-valor { color: var(--st-ink) !important; }
html.studio .precio-burbuja.en-dock .precio-burbuja-divisor { background: var(--st-line) !important; }
/* ── Popover (luz y menú) ────────────────────────────────────────── */
html.studio .st-pop {
position: absolute; z-index: 10030; bottom: calc(100% + 14px); left: 50%; width: 280px;
transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
padding: 16px; border-radius: var(--st-r); background: var(--st-glass);
border: 1px solid var(--st-line); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
font-family: 'Poppins', system-ui, sans-serif; color: var(--st-ink);
transition: opacity .18s, transform .18s;
}
html.studio .st-pop.abierto { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
html.studio .st-pop h4 { margin: 0 0 12px; font: 600 11px/1 'Poppins', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--st-ink-3); }
html.studio .luz-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
html.studio .luz-presets button {
border: 1px solid var(--st-line); background: #fff; color: var(--st-ink-2); cursor: pointer;
padding: 6px 11px; border-radius: 999px; font: 500 12px/1 'Poppins', sans-serif; transition: all .15s;
}
html.studio .luz-presets button:hover { border-color: rgba(139, 92, 246, .45); color: var(--st-ink); }
html.studio .luz-presets button.on { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
html.studio .luz-fila { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--st-ink-2); }
html.studio .luz-fila output { font-variant-numeric: tabular-nums; color: var(--st-ink-3); }
html.studio .luz-fila input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--st-accent); margin: 0; }
html.studio .luz-reset { border: 0; background: none; color: var(--st-ink-3); font: 500 12px 'Poppins', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
html.studio .luz-reset:hover { color: var(--st-ink); }
/* ── Barra de herramientas contextual ────────────────────────────── */
html.studio .herramientas-verticales {
left: 22px !important; top: 50% !important; transform: translateY(-50%) !important;
padding: 6px !important; gap: 2px !important; border-radius: 18px !important;
background: var(--st-glass) !important; border: 1px solid var(--st-line);
box-shadow: var(--st-shadow) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.6) !important; backdrop-filter: blur(22px) saturate(1.6) !important;
z-index: 10010;
}
html.studio .herramientas-verticales .herramienta-sep { display: none !important; }
html.studio .herramientas-verticales .herramienta-btn {
width: 40px; height: 40px; border-radius: 12px; color: var(--st-ink) !important; background: transparent;
display: grid; place-items: center; position: relative;
}
html.studio .herramientas-verticales .herramienta-btn:hover { background: var(--st-accent-soft) !important; color: var(--st-accent) !important; }
html.studio .herramientas-verticales .herramienta-peligro:hover { background: rgba(239, 68, 68, .1) !important; color: #dc2626 !important; }
html.studio .herramientas-verticales svg { stroke-width: 1.8; }
html.studio .ht-prim { display: none; flex-direction: column; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--st-line); }
html.studio.hay-sel .ht-prim { display: flex; animation: stIn .22s cubic-bezier(.2,.8,.2,1); }
html.studio .ht-masbtn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--st-ink); cursor: pointer; display: grid; place-items: center; }
html.studio .ht-masbtn:hover, html.studio .ht-masbtn.abierto { background: var(--st-accent-soft); color: var(--st-accent); }
html.studio .ht-menu {
position: absolute; left: calc(100% + 12px); top: auto; bottom: 0; width: 244px; padding: 8px;
border-radius: var(--st-r); background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .18s, transform .18s;
font-family: 'Poppins', system-ui, sans-serif;
}
html.studio .ht-menu.abierto { opacity: 1; transform: none; pointer-events: auto; }
html.studio .ht-menu .herramienta-btn {
width: 100%; height: 38px; display: flex !important; align-items: center; gap: 10px; justify-content: flex-start;
padding: 0 10px; border-radius: 10px; font: 500 13px/1 'Poppins', sans-serif; color: var(--st-ink) !important;
}
html.studio .ht-menu .herramienta-btn .ht-lbl { flex: 1; text-align: left; }
html.studio .ht-menu .herramienta-btn.activo { color: var(--st-accent) !important; }
html.studio .ht-menu .herramienta-btn kbd, html.studio .ht-prim kbd { margin-left: auto; font: 500 11px 'Poppins', sans-serif; color: var(--st-ink-3); }
html.studio .ht-menu .ht-div { height: 1px; background: var(--st-line); margin: 6px 4px; }
/* tooltips de las acciones principales */
html.studio .herramientas-verticales [data-tip]:hover::after {
content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
background: var(--st-ink); color: #fff; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
font: 500 12px 'Poppins', sans-serif; pointer-events: none; z-index: 10040;
}
/* ── Zona de suelta y estado vacío ───────────────────────────────── */
html.studio .st-drop {
position: absolute; inset: 14px; z-index: 10015; border-radius: 24px;
border: 2px dashed rgba(139, 92, 246, .75); background: rgba(139, 92, 246, .09);
display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
pointer-events: none; font-family: 'Poppins', system-ui, sans-serif; color: var(--st-accent-h);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html.studio.arrastrando .st-drop { display: flex; animation: stIn .15s ease-out; }
html.studio .st-drop strong { font-size: 19px; font-weight: 600; }
html.studio .st-drop span { font-size: 13px; color: var(--st-ink-2); }
html.studio .st-vacio {
position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 10012;
display: none; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px;
background: var(--st-glass); border: 1px dashed rgba(139, 92, 246, .55); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
font-family: 'Poppins', system-ui, sans-serif; color: var(--st-ink); pointer-events: none;
}
html.studio.sin-diseno.listo-3d:not(.arrastrando) .st-vacio { display: flex; animation: stIn .35s .4s both cubic-bezier(.2,.8,.2,1); }
html.studio .st-vacio b { font-weight: 600; font-size: 13.5px; display: block; line-height: 1.2; }
html.studio .st-vacio small { font-size: 12px; color: var(--st-ink-2); }
html.studio .st-vacio button {
pointer-events: auto; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 11px;
background: var(--st-accent); color: #fff; font: 600 12.5px 'Poppins', sans-serif; transition: background .15s;
}
html.studio .st-vacio button:hover { background: var(--st-accent-h); }
/* ── Cabecera: chips en vidrio + «Ayuda» ─────────────────────────── */
html.studio .topbar-isla { gap: 6px; }
html.studio .topbar-isla #btn-float-wpp, html.studio .topbar-isla #btn-float-ig {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px;
background: var(--st-accent-soft); color: var(--st-accent-h); text-decoration: none; border: 0;
font: 600 12.5px/1 'Poppins', sans-serif; width: auto; box-shadow: none; transition: background .15s;
}
html.studio .topbar-isla #btn-float-wpp:hover, html.studio .topbar-isla #btn-float-ig:hover { background: rgba(139, 92, 246, .18); }
html.studio .topbar-isla #btn-float-wpp img, html.studio .topbar-isla #btn-float-ig img { width: 15px; height: 15px; filter: none; opacity: .9; }
/* ── Panel izquierdo: jerarquía, contraste y zona de subida ──────── */
html.studio .submenu label, html.studio .submenu .titulo-seccion, html.studio .submenu .opciones-titulo { color: var(--st-ink-3) !important; }
html.studio .submenu .color-nombre { margin-left: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-ink); }
html.studio .submenu .btn-subir {
border: 1.5px dashed rgba(139, 92, 246, .55) !important; background: var(--st-accent-soft) !important;
color: var(--st-accent-h) !important; border-radius: var(--st-r) !important; flex-wrap: wrap;
padding: 12px 14px !important; transition: background .15s, border-color .15s;
}
html.studio .submenu .btn-subir:hover { background: rgba(139, 92, 246, .16) !important; border-color: var(--st-accent) !important; }
html.studio .submenu-content { animation: stPanelIn .3s cubic-bezier(.2, .8, .2, 1); }
/* ── Cargador tipo esqueleto ─────────────────────────────────────── */
html.studio #viewer3d-loader { position: absolute !important; }
html.studio #viewer3d-loader > div {
background: transparent !important; box-shadow: none !important; flex-direction: column; gap: 14px !important; padding: 0 !important;
}
html.studio #viewer3d-loader > div > div:first-child { display: none !important; } /* sin ruleta */
html.studio #viewer3d-loader > div::before {
content: ''; width: 56px; height: 12px; order: -1;
background:
radial-gradient(circle, #18181b 50%, transparent 52%) 0 50% / 8px 8px no-repeat,
radial-gradient(circle, #18181b 50%, transparent 52%) 50% 50% / 8px 8px no-repeat,
radial-gradient(circle, #18181b 50%, transparent 52%) 100% 50% / 8px 8px no-repeat;
animation: stDots 1.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
html.studio #v3d-stage { font-size: 11.5px !important; color: #71717a !important; font-weight: 300 !important; letter-spacing: .14em; text-transform: uppercase; }
/* ── Movimiento ──────────────────────────────────────────────────── */
@keyframes stIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stPanelIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes stDots {
0%,100% { background-size: 3px 3px, 3px 3px, 3px 3px; opacity: .55; }
16% { background-size: 8px 8px, 4px 4px, 3px 3px; opacity: 1; }
50% { background-size: 4px 4px, 8px 8px, 4px 4px; opacity: 1; }
83% { background-size: 3px 3px, 4px 4px, 8px 8px; opacity: 1; }
}
@keyframes stShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
html.studio *, html.studio *::before, html.studio *::after { animation: none !important; transition: none !important; }
}
/* ── Paleta de colores: cuadrados redondeados con relieve sutil ──────
Reemplaza los círculos planos con borde. Selección = anillo con hueco blanco y check
que se adapta al color (claro/oscuro). El nombre se muestra en la etiqueta, no en un
tooltip (que el contenedor colapsado recortaría). */
html.studio .colores-wrapper { margin-top: 38px !important; }
html.studio .colores-wrapper .label-talla { color: var(--st-ink-3) !important; display: flex; align-items: baseline; }
html.studio .color-opciones { display: grid !important; grid-template-columns: repeat(auto-fill, 34px); gap: 10px !important; justify-content: space-between; padding: 4px 4px 6px; margin: -4px; }
html.studio .color-opciones.opciones-collapsed { max-height: none !important; overflow: visible; }
html.studio #colores-wrapper .opciones-more-btn { display: none !important; }
html.studio .color-circle {
width: 34px !important; height: 34px !important; border-radius: 11px !important; border: 0 !important; position: relative;
box-shadow: inset 0 0 0 1px rgba(15, 15, 25, .13), inset 0 9px 12px -9px rgba(255, 255, 255, .45), inset 0 -9px 12px -9px rgba(0, 0, 0, .22);
transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s;
}
html.studio .color-circle:hover {
transform: translateY(-2px) scale(1.07); border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(15, 15, 25, .18), inset 0 9px 12px -9px rgba(255, 255, 255, .5), inset 0 -9px 12px -9px rgba(0, 0, 0, .25), 0 10px 18px -8px rgba(30, 20, 70, .45);
}
html.studio .color-circle.selected {
box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--st-accent), inset 0 0 0 1px rgba(15, 15, 25, .13);
transform: none;
}
html.studio .color-circle.selected::after {
content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; top: 0; left: 0;
border-radius: 0; background: var(--ck, #fff); box-shadow: none;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ── minimalismo: sin botones morados ── */
html.studio .dock #btn-continuar-global {
background: #18181b !important; box-shadow: none !important; border-radius: 12px !important; height: 38px; padding: 0 18px !important;
}
html.studio .dock #btn-continuar-global:hover { background: #3f3f46 !important; }
html.studio .st-vacio {
background: transparent !important; border: 0 !important; box-shadow: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; gap: 8px; color: var(--st-ink-2);
}
html.studio .st-vacio button { display: none !important; }
html.studio .st-vacio svg { width: 16px; height: 16px; }
html.studio .st-vacio b { font-weight: 500; font-size: 13px; display: inline; }
html.studio .st-vacio small { display: none; }
/* fondo plano y neutro + puntos del área de trabajo siempre visibles */
html.studio #viewer3d-wrap { background: #f5f5f7 !important; inset: auto !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; }
html.studio #viewer3d-wrap::after { display: none !important; }
html.studio #viewer3d-wrap::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(0, 0, 0, .16) 1px, transparent 1px);
background-size: 24px 24px;
}
html.studio .editor { position: relative !important; }
html.studio #viewer3d-wrap { transform: none !important; translate: none !important; }
html.studio #btn-float-wpp, html.studio #btn-float-ig { display: none !important; }
/* estado vacío: marca discreta sobre el pecho de la prenda */
html.studio .st-vacio {
left: 50%; top: 41%; bottom: auto; transform: translate(-50%, -50%);
flex-direction: column; gap: 8px; width: 92px; height: 92px; justify-content: center; text-align: center;
border: 1.5px dashed rgba(24, 24, 27, .28) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .28) !important;
color: rgba(24, 24, 27, .62) !important; animation: none;
}
html.studio.sin-diseno.listo-3d:not(.arrastrando) .st-vacio { animation: stIn .35s .4s both cubic-bezier(.2,.8,.2,1); }
html.studio .st-vacio svg { width: 20px; height: 20px; }
html.studio .st-vacio b { font-size: 11px; line-height: 1.25; display: block; font-weight: 500; }
html.studio #viewer3d-wrap::before { z-index: 0; }
html.studio #viewer3d-wrap > canvas { position: relative; z-index: 1; }
html.studio .st-vacio { display: none !important; }
html.studio .dock-subir {
display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
background: transparent; color: var(--st-ink); font: 500 13px 'Poppins', system-ui, sans-serif; cursor: pointer; transition: background .15s;
}
html.studio .dock-subir:hover { background: rgba(0, 0, 0, .06); }
html.studio .dock { gap: 2px !important; padding: 6px 8px !important; }
html.studio .dock .dock-btn, html.studio .dock .accion-btn, html.studio .dock #btn-favorito { width: 34px !important; height: 34px !important; padding: 0 !important; }
html.studio .dock-sep { margin: 0 4px !important; }
html.studio .dock-vistas button { padding: 0 10px !important; }
html.studio .dock-vistas button { padding: 0 13px !important; height: 32px !important; white-space: nowrap; }
html.studio .dock-vistas { gap: 2px; }
/* ══ Sistema tipográfico: Geist, pesos ligeros, escala única ══ */
html.studio, html.studio body, html.studio button, html.studio input, html.studio select,
html.studio .dock, html.studio .dock *, html.studio .st-pop, html.studio .st-pop *, html.studio .ht-menu, html.studio .ht-menu * {
font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif !important;
}
html.studio body { font-weight: 400; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; font-feature-settings: 'tnum' 1, 'ss01' 1; }
html.studio .label-talla {
font-size: 11px !important; font-weight: 400 !important; letter-spacing: .08em !important; text-transform: uppercase;
color: #71717a !important; margin: 0 0 12px !important; display: flex; gap: 6px; align-items: baseline;
}
html.studio .label-talla .nombre-color, html.studio .label-talla span { color: #18181b; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
html.studio .dock, html.studio .dock button { font-weight: 400 !important; font-size: 12.5px !important; letter-spacing: 0 !important; }
html.studio .dock #btn-continuar-global { font-weight: 500 !important; font-size: 13px !important; }
html.studio .dock-vistas button.on, html.studio .dock-vistas button.activo { font-weight: 500 !important; }
html.studio .editor-tab, html.studio .topbar-isla, html.studio .topbar-isla * { font-weight: 400 !important; font-size: 12px !important; }
html.studio .precio-burbuja, html.studio .precio-burbuja * { font-weight: 400 !important; }
html.studio .precio-burbuja .total, html.studio .precio-burbuja *:last-child { font-weight: 500 !important; }
/* ══ Tallas: segmentos conectados ══ */
html.studio .tallas-opciones { display: inline-flex !important; gap: 0 !important; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: #fff; flex-wrap: nowrap !important; max-height: none !important; }
html.studio .tallas-opciones > * {
min-width: 42px; height: 36px; padding: 0 10px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
box-shadow: none !important; font-size: 12.5px !important; font-weight: 400 !important; color: #52525b !important;
border-right: 1px solid rgba(0,0,0,.08) !important; transition: background .15s, color .15s;
}
html.studio .tallas-opciones > *:last-child { border-right: 0 !important; }
html.studio .tallas-opciones > *:hover { background: #f4f4f5 !important; }
html.studio .tallas-opciones > .seleccionada, html.studio .tallas-opciones > .activa, html.studio .tallas-opciones > .selected, html.studio .tallas-opciones > .activo {
background: #18181b !important; color: #fff !important;
}
html.studio .tallas-wrapper .opciones-more-btn, html.studio .tallas-wrapper > svg { display: none !important; }
/* ══ Cantidad compacta ══ */
html.studio .cantidad-ctrl { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; background: #fff; overflow: hidden; }
html.studio .cantidad-btn { width: 36px !important; height: 36px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-weight: 300 !important; font-size: 17px !important; color: #52525b; }
html.studio .cantidad-btn:hover { background: #f4f4f5 !important; }
html.studio .cantidad-num { min-width: 36px; text-align: center; font-size: 13px !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
/* ══ Panel izquierdo: ritmo uniforme ══ */
html.studio .color-opciones { margin-bottom: 26px !important; }
html.studio .tallas-wrapper, html.studio .cantidad-wrapper { margin-bottom: 26px !important; }
html.studio .upload-btn, html.studio [for="inputImagen"] { font-weight: 400 !important; }
html.studio .tallas-opciones { display: flex !important; width: 100%; }
html.studio .tallas-opciones > * { flex: 1 1 0; min-width: 0 !important; padding: 0 !important; }
/* ══ medidas, atajos, noche ══ */
html.studio .st-medida {
position: absolute; z-index: 10020; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s;
padding: 3px 9px; border-radius: 8px; background: #18181b; color: #fff; font: 400 11px 'Geist', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
}
html.studio .st-ayuda {
position: absolute; right: 22px; bottom: 28px; z-index: 10020; width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--st-line); background: var(--st-glass); color: #52525b; font: 400 13px 'Geist', sans-serif; cursor: pointer;
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html.studio .st-atajos {
position: absolute; right: 22px; bottom: 66px; z-index: 10021; width: 220px; padding: 14px 16px; border-radius: 14px;
background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow); font: 400 12px 'Geist', sans-serif; color: #3f3f46;
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(6px); pointer-events: none; transition: .18s;
}
html.studio .st-atajos.abierto { opacity: 1; transform: none; pointer-events: auto; }
html.studio .st-atajos b { display: block; font-weight: 500; margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
html.studio .st-atajos div { display: flex; justify-content: space-between; padding: 4px 0; }
html.studio .st-atajos kbd { font: 400 11px 'Geist Mono', monospace; color: #71717a; }
html.studio.st-noche #viewer3d-wrap { background: #151517 !important; }
html.studio.st-noche #viewer3d-wrap::before { background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px); }
html.studio #viewer3d-wrap, html.studio #viewer3d-wrap::before { transition: background-color .35s; }
/* ══ notificaciones + estado ══ */
html.studio #toast-descarga { display: none !important; }
html.studio .st-toasts { position: absolute; left: 22px; bottom: 96px; z-index: 10030; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
html.studio .st-toast {
pointer-events: auto; max-width: 300px; display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; cursor: pointer;
background: rgba(24, 24, 27, .92); color: #f4f4f5; font: 300 12.5px/1.45 'Geist', sans-serif; letter-spacing: 0;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
html.studio .st-toast.on { opacity: 1; transform: none; }
html.studio .st-toast-p { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; margin-top: 6px; }
html.studio .st-guardado { position: absolute; left: 190px; top: 22px; z-index: 10051; display: flex; align-items: center; gap: 7px; height: 28px; font: 300 11.5px 'Geist', sans-serif; color: #71717a; pointer-events: none; }
html.studio .st-guardado i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; transition: background .2s; }
html.studio .st-guardado.trabajando i { background: #f59e0b; animation: stPulso .8s ease-in-out infinite; }
html.studio.st-noche .st-guardado { color: #a1a1aa; }
@keyframes stPulso { 50% { opacity: .35; } }
/* paleta minimalista: sin verde ni naranja ni morado en los indicadores */
html.studio .st-guardado i { background: #18181b; }
html.studio .st-guardado.trabajando i { background: #a1a1aa; }
html.studio.st-noche .st-guardado i { background: #f4f4f5; }
html.studio .st-toast-p { background: #a1a1aa; }
/* ══ Barra lateral: línea fina, activo neutro ══ */
html.studio .menu li { color: #a1a1aa !important; gap: 5px; transition: color .15s, background .15s; position: relative; }
html.studio .menu li span { font: 400 10px 'Geist', sans-serif !important; letter-spacing: .02em; }
html.studio .menu li:hover { color: #3f3f46 !important; background: transparent !important; }
html.studio .menu li.active, html.studio .menu li[data-panel].active { background: #f4f4f5 !important; color: #18181b !important; }
html.studio .menu li.active::before { content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: #18181b; }
html.studio .soporte { color: #a1a1aa !important; display: flex; flex-direction: column; align-items: center; font: 400 10px 'Geist', sans-serif !important; }
html.studio .soporte:hover { color: #3f3f46 !important; }
html.studio .sidebar, html.studio .submenu { border-radius: 16px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px -12px rgba(0,0,0,.14) !important; border: 1px solid rgba(0,0,0,.05) !important; }
html.studio .submenu { background: #fcfcfd !important; }
/* ══ Ritmo vertical (escala 8 px) ══ */
html.studio .colores-wrapper { margin-top: 24px !important; }
html.studio .tallas-wrapper, html.studio .cantidad-wrapper { margin-top: 24px !important; margin-bottom: 0 !important; }
html.studio .color-opciones { margin-bottom: 0 !important; }
/* ══ Color activo: código ══ */
html.studio .st-hex { margin-left: auto; font: 400 11px 'Geist Mono', monospace; font-style: normal; letter-spacing: .04em; color: #a1a1aa; text-transform: none; }
/* ══ Barra contextual: discreta cuando no hay diseño ══ */
html.studio:not(.hay-sel) .herramientas-verticales { padding: 4px !important; border-radius: 12px !important; opacity: .7; transition: opacity .2s; }
html.studio:not(.hay-sel) .herramientas-verticales:hover { opacity: 1; }
html.studio .herramientas-verticales { border: 1px solid var(--st-line) !important; background: var(--st-glass) !important; box-shadow: var(--st-shadow) !important; }
/* ══ Tooltips propios ══ */
.st-tip {
position: fixed; z-index: 100000; pointer-events: none; padding: 5px 9px; border-radius: 8px; background: #18181b; color: #f4f4f5;
font: 400 11.5px 'Geist', sans-serif; white-space: nowrap; display: flex; gap: 8px; align-items: center;
opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s;
}
.st-tip.on { opacity: 1; transform: none; }
.st-tip kbd { font: 400 10.5px 'Geist Mono', monospace; color: #a1a1aa; }
/* ══ Foco accesible ══ */
html.studio :focus-visible { outline: 2px solid #18181b; outline-offset: 2px; border-radius: 8px; }
html.studio.st-noche .dock :focus-visible { outline-color: #fff; }
/* ══ Cabecera alineada: logo, pestaña y estado a una misma línea ══ */
html.studio .topbar { align-items: center; }
html.studio .st-guardado { top: 26px; left: 196px; }
/* ══ Carga de miniaturas ══ */
html.studio .submenu img:not([src]), html.studio .submenu img[src=""] { background: linear-gradient(100deg, #f4f4f5 30%, #ececee 50%, #f4f4f5 70%) 0 0 / 220% 100%; animation: stShimmer 1.3s linear infinite; }
html.studio .submenu img { transition: opacity .25s; }
html.studio .color-circle.selected { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px #18181b, inset 0 0 0 1px rgba(15,15,25,.13); }
html.studio .tab-dirty { background: #18181b !important; }
html.studio .st-hex:empty { display: none; }
/* ══ Panel de capas ══ */
html.studio .dock-capas { position: relative; width: auto !important; padding: 0 9px !important; display: inline-flex; align-items: center; gap: 5px; }
html.studio .dock-capas .n { font: 400 10.5px 'Geist', sans-serif; color: #71717a; font-variant-numeric: tabular-nums; }
html.studio .st-capas {
position: absolute; right: 22px; bottom: 96px; z-index: 10040; width: 250px; max-height: 340px; overflow: auto; padding: 12px;
border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 400 12.5px 'Geist', sans-serif; color: #3f3f46;
opacity: 0; transform: translateY(6px); pointer-events: none; transition: .18s;
}
html.studio .st-capas.abierto { opacity: 1; transform: none; pointer-events: auto; }
html.studio .cap-t { display: block; margin: 2px 4px 8px; font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
html.studio .cap-v { margin: 6px 4px 4px; color: #a1a1aa; }
html.studio .cap-f { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; cursor: pointer; }
html.studio .cap-f:hover { background: rgba(0,0,0,.04); }
html.studio .cap-f.sel { background: rgba(24,24,27,.07); }
html.studio .cap-th { flex: none; width: 28px; height: 28px; border-radius: 7px; background: #f4f4f5 center / contain no-repeat; border: 1px solid rgba(0,0,0,.08); display: grid; place-items: center; font-size: 11px; color: #71717a; }
html.studio .cap-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.studio .cap-f button { flex: none; width: 22px; height: 22px; border: 0; background: transparent; border-radius: 6px; color: #71717a; cursor: pointer; display: grid; place-items: center; opacity: 0; }
html.studio .cap-f:hover button, html.studio .cap-f.sel button { opacity: 1; }
html.studio .cap-f button:hover:not(:disabled) { background: rgba(0,0,0,.07); color: #18181b; }
html.studio .cap-f button:disabled { opacity: .25 !important; cursor: default; }
html.studio .dock .dock-capas { flex-direction: row !important; width: auto !important; min-width: 44px; white-space: nowrap; } html.studio .dock-capas svg { flex: none; }
html.studio .dock .dock-capas { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 12px !important; }
/* ══ Paneles Imágenes / Diseños / Texto / Formas / Precio ══ */
html.studio .submenu .btn-subir {
background: #18181b !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
font: 400 13px 'Geist', sans-serif !important; height: 40px; transition: background .15s;
}
html.studio .submenu .btn-subir:hover { background: #3f3f46 !important; }
html.studio .dropzone { border: 1px dashed rgba(0,0,0,.2) !important; border-radius: 14px !important; background: transparent !important; color: #71717a !important; font: 300 12.5px 'Geist', sans-serif !important; transition: border-color .15s, background .15s; }
html.studio .dropzone:hover { border-color: #18181b !important; background: rgba(0,0,0,.02) !important; }
html.studio .dropzone svg, html.studio .dropzone img { color: #71717a; opacity: .7; }
html.studio .submenu .tx-sec-title, html.studio .submenu .text-section > span, html.studio .submenu h3, html.studio .submenu h4 { font: 400 11px 'Geist', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #71717a !important; }
html.studio .tx-input, html.studio .submenu select, html.studio .submenu input[type="text"] {
border: 1px solid rgba(0,0,0,.1) !important; border-radius: 10px !important; background: #fff !important; font: 400 13px 'Geist', sans-serif !important; box-shadow: none !important; height: 38px; color: #18181b;
}
html.studio .tx-input:focus, html.studio .submenu select:focus { border-color: #18181b !important; outline: none; }
html.studio .disenos-grid { gap: 10px !important; }
html.studio .diseno-item { border: 1px solid rgba(0,0,0,.08) !important; border-radius: 12px !important; background: #fff; box-shadow: none !important; transition: transform .15s, border-color .15s; }
html.studio .diseno-item:hover { transform: translateY(-2px); border-color: #18181b !important; }
html.studio .precio-wrapper { background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 14px !important; box-shadow: none !important; color: #18181b !important; padding: 4px 6px; }
html.studio .precio-wrapper .precio-item { color: #3f3f46 !important; }
html.studio .precio-wrapper .label { color: #71717a !important; font-weight: 300 !important; }
html.studio .precio-wrapper .valor { color: #18181b !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
html.studio .precio-wrapper .precio-contador, html.studio .precio-wrapper #lista-elementos-precio { color: #71717a !important; }
html.studio .precio-wrapper .precio-total, html.studio .precio-wrapper .total { color: #18181b !important; font-weight: 500 !important; }
html.studio .precio-wrapper hr { border-color: rgba(0,0,0,.08) !important; }
html.studio .boton-cambiar, html.studio .submenu-content > button { font: 400 13px 'Geist', sans-serif !important; color: #3f3f46 !important; }
/* ══ Contraste: grises pequeños más oscuros ══ */
html.studio .menu li, html.studio .soporte, html.studio .menu li span { color: #71717a !important; }
html.studio .menu li:hover, html.studio .soporte:hover { color: #18181b !important; }
html.studio .menu li.active { color: #18181b !important; }
html.studio .st-hex, html.studio .st-guardado, html.studio .st-medida + *, html.studio .label-talla { color: #71717a; }
html.studio .dock-btn:disabled, html.studio .dock-btn[disabled] { opacity: .4; }
/* ══ MODO NOCHE completo ══ */
html.studio.st-noche body, html.studio.st-noche .editor { background: #0e0e10 !important; }
html.studio.st-noche { --st-glass: rgba(30,30,34,.78); --st-line: rgba(255,255,255,.09); --st-ink: #f4f4f5; }
html.studio.st-noche .sidebar, html.studio.st-noche .submenu { background: #17171a !important; border-color: rgba(255,255,255,.07) !important; box-shadow: none !important; color: #f4f4f5 !important; }
html.studio.st-noche .menu li, html.studio.st-noche .soporte, html.studio.st-noche .menu li span { color: #a1a1aa !important; }
html.studio.st-noche .menu li:hover, html.studio.st-noche .soporte:hover { color: #fff !important; }
html.studio.st-noche .menu li.active { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html.studio.st-noche .menu li.active::before { background: #fff; }
html.studio.st-noche .submenu, html.studio.st-noche .submenu * { --tx: #f4f4f5; }
html.studio.st-noche .submenu .label-talla, html.studio.st-noche .st-hex, html.studio.st-noche .submenu .tx-sec-title { color: #a1a1aa !important; }
html.studio.st-noche .label-talla span { color: #f4f4f5; }
html.studio.st-noche .tallas-opciones, html.studio.st-noche .cantidad-ctrl, html.studio.st-noche .tx-input, html.studio.st-noche .submenu select, html.studio.st-noche .precio-wrapper, html.studio.st-noche .diseno-item { background: #1f1f23 !important; border-color: rgba(255,255,255,.1) !important; color: #f4f4f5 !important; }
html.studio.st-noche .tallas-opciones > * { color: #d4d4d8 !important; border-right-color: rgba(255,255,255,.08) !important; }
html.studio.st-noche .tallas-opciones > *:hover, html.studio.st-noche .cantidad-btn:hover { background: rgba(255,255,255,.07) !important; }
html.studio.st-noche .tallas-opciones > .seleccionada, html.studio.st-noche .tallas-opciones > .activa, html.studio.st-noche .tallas-opciones > .selected, html.studio.st-noche .tallas-opciones > .activo { background: #f4f4f5 !important; color: #18181b !important; }
html.studio.st-noche .cantidad-btn, html.studio.st-noche .cantidad-num, html.studio.st-noche .precio-wrapper .valor, html.studio.st-noche .precio-wrapper .total { color: #f4f4f5 !important; }
html.studio.st-noche .boton-cambiar, html.studio.st-noche .submenu-content > button { background: #1f1f23 !important; color: #d4d4d8 !important; border-color: rgba(255,255,255,.1) !important; }
html.studio.st-noche .submenu .btn-subir { background: #f4f4f5 !important; color: #18181b !important; }
html.studio.st-noche .dropzone { border-color: rgba(255,255,255,.2) !important; color: #a1a1aa !important; }
html.studio.st-noche .dock, html.studio.st-noche .topbar-isla, html.studio.st-noche #tab-list .editor-tab, html.studio.st-noche .herramientas-verticales { color: #f4f4f5; }
html.studio.st-noche .dock button, html.studio.st-noche .dock-vistas button { color: #d4d4d8 !important; }
html.studio.st-noche .dock-vistas button.on, html.studio.st-noche .dock-vistas button.activo { background: rgba(255,255,255,.12) !important; color: #fff !important; }
html.studio.st-noche .dock #btn-continuar-global { background: #f4f4f5 !important; color: #18181b !important; }
html.studio.st-noche .editor-tab, html.studio.st-noche .editor-tab * { color: #f4f4f5 !important; }
html.studio.st-noche .st-capas, html.studio.st-noche .st-atajos { color: #d4d4d8; }
html.studio.st-noche .tab-dirty { background: #f4f4f5 !important; }
/* tarjeta de precio del panel: clara, sin bloque negro */
html.studio .precio-detalles { background: #fff !important; box-shadow: none !important; border: 1px solid rgba(0,0,0,.08) !important; backdrop-filter: none !important; }
html.studio .precio-detalles .precio-item .label { color: #71717a !important; font-weight: 300 !important; }
html.studio .precio-detalles .precio-item .valor { color: #18181b !important; font-weight: 400 !important; }
html.studio .precio-detalles .precio-total { border-top: 1px solid rgba(0,0,0,.08) !important; }
html.studio .precio-detalles .precio-total .label { color: #3f3f46 !important; }
html.studio .precio-detalles .precio-total .valor { color: #18181b !important; font-weight: 500 !important; font-size: 16px !important; }
html.studio .precio-detalles p, html.studio .precio-detalles li { color: #71717a !important; }
html.studio .precio-wrapper { border: 0 !important; padding: 0 !important; background: transparent !important; }
html.studio.st-noche .precio-detalles { background: #1f1f23 !important; border-color: rgba(255,255,255,.1) !important; }
html.studio.st-noche .precio-detalles .precio-item .label { color: #a1a1aa !important; }
html.studio.st-noche .precio-detalles .precio-item .valor, html.studio.st-noche .precio-detalles .precio-total .valor { color: #f4f4f5 !important; }
html.studio.st-noche .precio-detalles .precio-total { border-top-color: rgba(255,255,255,.1) !important; }
/* controles del panel de texto: neutros */
html.studio .submenu input[type="range"] { accent-color: #18181b; }
html.studio .submenu input[type="range"]::-webkit-slider-thumb { background: #18181b !important; border-color: #18181b !important; }
html.studio .submenu input[type="range"]::-webkit-slider-runnable-track { background: rgba(0,0,0,.1) !important; }
html.studio .tx-sec { border: 1px solid rgba(0,0,0,.07) !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important; }
html.studio .btn-agregar-texto { background: #18181b !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font: 400 13px 'Geist', sans-serif !important; }
html.studio .btn-agregar-texto:hover { background: #3f3f46 !important; }
html.studio .tx-sec button { border-radius: 9px !important; font-family: 'Geist', sans-serif !important; }
html.studio .submenu .btn-subir { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 40px !important; padding: 0 !important; box-sizing: border-box; }
/* ══ Checkout (pasos de pago): mismo sistema tipográfico y neutro ══ */
html.studio .co-screen, html.studio .co-screen * { font-family: 'Geist', 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; }
html.studio .co-titulo { font-size: 26px !important; font-weight: 400 !important; letter-spacing: -.02em !important; margin-bottom: 6px !important; }
html.studio .co-subtitulo { font-size: 13.5px !important; font-weight: 300 !important; color: #a1a1aa !important; margin: 0 0 22px !important; }
html.studio .co-precio-row { display: flex !important; align-items: baseline; gap: 10px; margin: 0 0 20px !important; }
html.studio .co-precio-label { font-size: 12px !important; font-weight: 300 !important; letter-spacing: .08em !important; text-transform: uppercase; color: #a1a1aa !important; }
html.studio .co-precio-num { font-size: 40px !important; font-weight: 300 !important; letter-spacing: -.03em !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
html.studio .co-precio-cur { font-size: 12px !important; font-weight: 300 !important; color: #a1a1aa !important; }
html.studio .co-opciones-row { display: flex !important; align-items: center; gap: 12px; margin: 0 0 22px !important; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
html.studio .co-swatch { width: 26px !important; height: 26px !important; border-radius: 8px !important; flex: none; }
html.studio .co-op-label, html.studio .co-talla-label { font-size: 12px !important; font-weight: 300 !important; color: #a1a1aa !important; margin: 0 !important; }
html.studio .co-opciones-row .co-qty-ctrl { margin-left: auto; }
html.studio .co-opciones-row .co-qty-ctrl + .co-op-label { margin-left: 0; }
html.studio .co-qty-btn { width: 28px !important; height: 28px !important; border-radius: 8px !important; font-weight: 300 !important; background: rgba(255,255,255,.08) !important; }
html.studio .co-qty-num { font-weight: 400 !important; min-width: 22px; text-align: center; }
html.studio .co-tallas-sect { margin-bottom: 20px; }
html.studio .co-talla-label { margin-bottom: 10px !important; text-transform: uppercase; letter-spacing: .08em !important; font-size: 11px !important; }
html.studio .co-talla-row { display: flex !important; gap: 6px !important; flex-wrap: wrap; }
html.studio .co-talla-row > * { height: 34px !important; min-width: 44px; padding: 0 12px !important; border-radius: 9px !important; font-size: 12.5px !important; font-weight: 400 !important; border: 1px solid rgba(255,255,255,.14) !important; background: transparent !important; color: #d4d4d8 !important; }
html.studio .co-talla-row > .activo, html.studio .co-talla-row > .seleccionada, html.studio .co-talla-row > .selected { background: #f4f4f5 !important; color: #18181b !important; border-color: #f4f4f5 !important; }
html.studio .co-domicilio-check { border-radius: 12px !important; border: 1px solid rgba(255,255,255,.1) !important; background: transparent !important; font-weight: 300 !important; font-size: 13px !important; padding: 12px 14px !important; }
html.studio .co-domicilio-precio { color: #f4f4f5 !important; font-weight: 400 !important; }
html.studio .co-desglose { border: 0 !important; background: rgba(255,255,255,.04) !important; border-radius: 12px !important; }
html.studio .co-desglose-fila { font-size: 13px !important; font-weight: 300 !important; font-variant-numeric: tabular-nums; }
html.studio .co-desglose-total { font-size: 15px !important; font-weight: 400 !important; }
html.studio .co-btn-cta { border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; height: 48px; padding: 0 28px !important; background: #f4f4f5 !important; color: #18181b !important; }
html.studio .co-btn-cta:hover { background: #fff !important; }
html.studio .co-btn-back { font-size: 12.5px !important; font-weight: 300 !important; color: #a1a1aa !important; }
html.studio .co-screen input[type="text"], html.studio .co-screen input[type="email"], html.studio .co-screen input[type="tel"], html.studio .co-screen select, html.studio .co-screen textarea { border-radius: 10px !important; font-weight: 300 !important; font-size: 14px !important; }
html.studio .co-screen label { font-weight: 300 !important; }
/* ══ Diálogo propio ══ */
.st-modal { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; background: rgba(10,10,12,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.st-modal.on { opacity: 1; }
.st-modal-c { width: min(380px, calc(100vw - 32px)); padding: 24px; border-radius: 18px; background: #fff; color: #18181b; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); font-family: 'Geist', system-ui, sans-serif; transform: translateY(8px); transition: transform .2s; }
.st-modal.on .st-modal-c { transform: none; }
.st-modal-c h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.st-modal-c p { margin: 0 0 20px; font-size: 13.5px; font-weight: 300; color: #71717a; line-height: 1.5; }
.st-modal-b { display: flex; gap: 8px; justify-content: flex-end; }
.st-modal-b button { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #18181b; font: 400 13px 'Geist', sans-serif; cursor: pointer; }
.st-modal-b button.s { background: #18181b; color: #fff; border-color: #18181b; }
.st-modal-b button:hover { opacity: .88; }
/* ══ Guía de primera visita ══ */
html.studio .st-guia { position: absolute; z-index: 10035; right: 22px; top: 84px; width: 270px; padding: 16px 18px; border-radius: 16px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 300 13px 'Geist', sans-serif; color: #3f3f46; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .3s; }
html.studio .st-guia.on { opacity: 1; transform: none; pointer-events: auto; }
html.studio .st-guia b { display: block; font-weight: 500; font-size: 14px; margin-bottom: 10px; color: #18181b; }
html.studio .st-guia ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
html.studio .st-guia li { display: flex; gap: 10px; align-items: center; }
html.studio .st-guia li span { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: grid; place-items: center; font-size: 11px; color: #3f3f46; }
html.studio .st-guia button { width: 100%; height: 34px; border: 0; border-radius: 9px; background: #18181b; color: #fff; font: 400 12.5px 'Geist', sans-serif; cursor: pointer; }
/* ══ Escritorio compacto (≤1380 px): isla más corta ══ */
@media (min-width: 769px) and (max-width: 1380px) {
html.studio .dock-subir span, html.studio .dock-capas .n { display: none; }
html.studio .dock-subir { padding: 0 9px; width: 36px; justify-content: center; }
html.studio .dock .dock-capas { padding: 0 !important; width: 34px !important; min-width: 34px; }
html.studio .dock-vistas button { padding: 0 9px !important; font-size: 12px !important; }
html.studio .dock { max-width: calc(100% - 32px); }
html.studio .dock #btn-continuar-global { padding: 0 14px !important; }
html.studio .st-ayuda { bottom: 92px; right: 18px; }
html.studio .st-atajos { bottom: 130px; right: 18px; }
html.studio .st-capas { bottom: 92px; }
}
html.studio.st-noche .topbar-isla, html.studio.st-noche .topbar-isla * { color: #d4d4d8 !important; }
html.studio.st-noche .topbar-isla { background: rgba(30,30,34,.78) !important; }
html.studio .st-guardado { position: static !important; margin: 0 0 0 14px; height: 32px; align-self: center; padding: 0 12px 0 10px; border-radius: 999px; background: var(--st-glass); border: 1px solid var(--st-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: auto; }
/* ══ Recorrido guiado ══ */
.st-tour { position: fixed; inset: 0; z-index: 100002; opacity: 0; transition: opacity .4s; font-family: 'Geist', system-ui, sans-serif; }
.st-tour.on { opacity: 1; }
.tour-velo {
position: absolute; inset: 0; background: rgba(12, 12, 16, .42);
-webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9);
transition: clip-path .55s cubic-bezier(.65, 0, .25, 1);
}
.tour-aro {
position: absolute; border-radius: 16px; pointer-events: none; border: 1px solid rgba(255,255,255,.75);
box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 18px 60px -12px rgba(0,0,0,.35);
transition: all .55s cubic-bezier(.65, 0, .25, 1), opacity .3s;
}
.tour-card {
position: absolute; width: 340px; padding: 20px 22px 18px; border-radius: 20px;
background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.06); color: #18181b;
transition: left .55s cubic-bezier(.65, 0, .25, 1), top .55s cubic-bezier(.65, 0, .25, 1);
}
.tour-card.in > * { animation: tourIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.tour-card.in > *:nth-child(2) { animation-delay: .04s; } .tour-card.in > *:nth-child(3) { animation-delay: .08s; }
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tour-n { font: 400 11px 'Geist Mono', monospace; letter-spacing: .06em; color: #71717a; }
.tour-x { border: 0; background: transparent; font: 300 12px 'Geist', sans-serif; color: #71717a; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tour-x:hover { color: #18181b; background: rgba(0,0,0,.05); }
.tour-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.tour-card p { margin: 0 0 16px; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: #52525b; }
.tour-barra { height: 2px; border-radius: 2px; background: rgba(0,0,0,.08); margin-bottom: 14px; overflow: hidden; }
.tour-barra i { display: block; height: 100%; background: #18181b; border-radius: 2px; transition: width .5s cubic-bezier(.65, 0, .25, 1); }
.tour-pie { display: flex; justify-content: space-between; align-items: center; }
.tour-pie button { height: 38px; padding: 0 18px; border-radius: 11px; font: 400 13px 'Geist', sans-serif; cursor: pointer; transition: background .15s, opacity .15s; }
.tour-atras { border: 1px solid rgba(0,0,0,.12); background: transparent; color: #3f3f46; }
.tour-atras:hover { background: rgba(0,0,0,.05); }
.tour-sig { border: 0; background: #18181b; color: #fff; font-weight: 500 !important; }
.tour-sig:hover { background: #3f3f46; }
.st-ver-guia { display: block; width: 100%; margin-top: 10px; padding: 8px 0 2px; border: 0; border-top: 1px solid rgba(0,0,0,.08); background: transparent; font: 300 12px 'Geist', sans-serif; color: #3f3f46; cursor: pointer; text-align: left; }
.st-ver-guia:hover { color: #18181b; }
@media (prefers-reduced-motion: reduce) { .tour-velo, .tour-aro, .tour-card { transition: none !important; } }
/* indicador junto a la pestaña (mismo aspecto) */
html.studio #tab-list .st-guardado { position: static !important; margin: 0 0 0 8px !important; padding: 0 12px 0 10px !important; display: inline-flex; align-items: center; gap: 7px; font: 400 12px 'Geist', sans-serif !important; letter-spacing: 0; color: #3f3f46; vertical-align: middle; }
html.studio #tab-list { align-items: center; }
/* ══ Medidor gráfico ══ */
html.studio .st-medidor { margin-top: 24px; padding: 14px 14px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; font-family: 'Geist', sans-serif; }
html.studio .md-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
html.studio .md-h span { font: 400 11px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
html.studio .md-cara { font: 400 11px 'Geist Mono', monospace; font-style: normal; color: #18181b; background: #f4f4f5; padding: 2px 8px; border-radius: 999px; }
html.studio .md-svg { width: 100%; height: auto; display: block; overflow: visible; }
html.studio .md-marco { fill: #fafafa; stroke: rgba(0,0,0,.14); stroke-width: 1; }
html.studio .md-eje { stroke: rgba(0,0,0,.1); stroke-dasharray: 2 3; }
html.studio .md-t { stroke: rgba(0,0,0,.3); stroke-width: 1; }
html.studio .md-l { font: 300 7.5px 'Geist Mono', monospace; fill: #71717a; }
html.studio .md-d { fill: rgba(24,24,27,.14); stroke: rgba(24,24,27,.55); stroke-width: .8; transition: all .2s; }
html.studio .md-d.sel { fill: rgba(24,24,27,.28); stroke: #18181b; }
html.studio .md-caja { fill: none; stroke: #18181b; stroke-width: .8; stroke-dasharray: 3 2; }
html.studio .md-vacio { font: 300 9px 'Geist', sans-serif; fill: #a1a1aa; }
html.studio .md-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
html.studio .md-datos small { display: block; font: 300 10.5px 'Geist', sans-serif; color: #71717a; margin-bottom: 2px; }
html.studio .md-datos b { font: 400 14px 'Geist', sans-serif; color: #18181b; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
html.studio .md-barra { height: 2px; border-radius: 2px; background: rgba(0,0,0,.08); margin-top: 10px; overflow: hidden; }
html.studio .md-barra i { display: block; height: 100%; width: 0; background: #18181b; border-radius: 2px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
html.studio.st-noche .st-medidor { background: #1f1f23; border-color: rgba(255,255,255,.1); }
html.studio.st-noche .md-marco { fill: #17171a; stroke: rgba(255,255,255,.18); }
html.studio.st-noche .md-eje { stroke: rgba(255,255,255,.1); }
html.studio.st-noche .md-t { stroke: rgba(255,255,255,.35); }
html.studio.st-noche .md-l, html.studio.st-noche .md-datos small, html.studio.st-noche .md-h span { fill: #a1a1aa; color: #a1a1aa; }
html.studio.st-noche .md-d { fill: rgba(244,244,245,.16); stroke: rgba(244,244,245,.6); }
html.studio.st-noche .md-d.sel, html.studio.st-noche .md-caja { stroke: #f4f4f5; }
html.studio.st-noche .md-datos b { color: #f4f4f5; }
html.studio.st-noche .md-cara { background: rgba(255,255,255,.1); color: #f4f4f5; }
html.studio.st-noche .md-barra { background: rgba(255,255,255,.1); } html.studio.st-noche .md-barra i { background: #f4f4f5; }
html.studio .md-svg { max-height: 150px; }
html.studio .st-medidor { margin-top: 18px; padding: 12px 14px 10px; }
html.studio .md-svg { max-height: 108px; }
html.studio .md-datos { margin-top: 6px; }
html.studio .md-barra { margin-top: 8px; }
html.studio .colores-wrapper { margin-top: 18px !important; }
html.studio .tallas-wrapper, html.studio .cantidad-wrapper { margin-top: 20px !important; }
html.studio .st-medidor { display: grid; grid-template-columns: 1fr 86px; column-gap: 10px; align-items: center; }
html.studio .st-medidor .md-h, html.studio .st-medidor .md-barra, html.studio .st-medidor .md-aviso { grid-column: 1 / -1; }
html.studio .md-svg { max-height: 170px; width: 100%; }
html.studio .md-datos { grid-template-columns: 1fr; gap: 10px; margin: 0; }
html.studio .md-datos > div { padding-left: 10px; border-left: 1px solid rgba(0,0,0,.1); }
html.studio.st-noche .md-datos > div { border-left-color: rgba(255,255,255,.12); }
html.studio .md-l { font-size: 8.5px; }
html.studio .md-l { font-size: 7.5px; }
html.studio .editor > .st-guardado { position: absolute !important; z-index: 10051; margin: 0 !important; }
/* ══ Medidor flotante en el escenario (arriba a la derecha) ══ */
html.studio .st-medidor.hud {
position: absolute; right: 22px; top: 78px; width: 214px; margin: 0; z-index: 10018; padding: 12px 14px 12px;
border-radius: 16px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: var(--st-shadow);
-webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
grid-template-columns: 1fr 70px; transition: all .3s cubic-bezier(.2,.8,.2,1);
}
html.studio .st-medidor.hud .md-h { cursor: pointer; margin-bottom: 8px; user-select: none; }
html.studio .st-medidor.hud .md-h span::after { content: '—'; margin-left: 8px; color: #a1a1aa; }
html.studio .st-medidor.hud.min { width: 148px; padding: 10px 14px; }
html.studio .st-medidor.hud.min .md-h { margin: 0; }
html.studio .st-medidor.hud.min .md-h span::after { content: '+'; }
html.studio .st-medidor.hud.min > :not(.md-h) { display: none !important; }
html.studio .st-medidor.hud .md-datos { gap: 7px; }
html.studio .st-medidor.hud .md-datos b { font-size: 13px; }
html.studio .st-medidor.hud .md-svg { max-height: 150px; }
html.studio.st-noche .st-medidor.hud { background: rgba(30,30,34,.78); border-color: rgba(255,255,255,.1); }
@media (max-width: 1380px) { html.studio .st-medidor.hud { top: 72px; right: 14px; } }
/* ══ Resumen del pedido (panel izquierdo) ══ */
html.studio .st-resumen { margin-top: 20px; padding: 14px 16px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; font-family: 'Geist', sans-serif; }
html.studio .rs-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
html.studio .rs-h span { font: 400 11px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
html.studio .rs-q { font: 400 11px 'Geist Mono', monospace; font-style: normal; color: #18181b; background: #f4f4f5; padding: 2px 8px; border-radius: 999px; }
html.studio .rs-f { display: flex; justify-content: space-between; padding: 4px 0; font: 300 13px 'Geist', sans-serif; color: #52525b; }
html.studio .rs-f b { font-weight: 400; color: #18181b; font-variant-numeric: tabular-nums; }
html.studio .rs-t { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); font: 300 13px 'Geist', sans-serif; color: #52525b; }
html.studio .rs-total { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: #18181b; font-variant-numeric: tabular-nums; }
html.studio.st-noche .st-resumen { background: #1f1f23; border-color: rgba(255,255,255,.1); }
html.studio.st-noche .rs-f, html.studio.st-noche .rs-t, html.studio.st-noche .rs-h span { color: #a1a1aa; }
html.studio.st-noche .rs-f b, html.studio.st-noche .rs-total { color: #f4f4f5; }
html.studio.st-noche .rs-q { background: rgba(255,255,255,.1); color: #f4f4f5; }
/* el panel nunca comprime sus bloques: si no cabe, hace scroll */
html.studio #panel-producto > * { flex-shrink: 0; }
html.studio .submenu-content.active { overflow-y: auto; scrollbar-width: thin; }
/* medidor sin tarjeta ni título: flota directo sobre el escenario */
html.studio .st-medidor.hud { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; width: 200px; }
html.studio .st-medidor.hud .md-h { display: none !important; }
html.studio .st-medidor.hud.min { width: 200px; padding: 0 !important; }
html.studio .st-medidor.hud.min > :not(.md-h) { display: revert !important; }
html.studio .st-medidor.hud.min .md-datos { display: grid !important; }
html.studio .st-medidor.hud .md-marco { fill: rgba(255,255,255,.55); }
html.studio.st-noche .st-medidor.hud .md-marco { fill: rgba(23,23,26,.55); }
html.studio .st-medidor.hud { top: 70px; }
html.studio .st-medidor.hud .md-barra { display: none !important; }
/* ══ Monedas + asistente IA (simulado) ══ */
html.studio .st-monedas { position: absolute; z-index: 10052; display: flex; align-items: center; gap: 7px; padding: 0 14px 0 12px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-glass); box-shadow: var(--st-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 400 12.5px 'Geist', sans-serif; color: #3f3f46; cursor: pointer; transition: transform .15s; }
html.studio .st-monedas:hover { transform: translateY(-1px); }
html.studio .mn-p { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #e4e4e7 35%, #71717a 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
html.studio .mn-n { font-weight: 500; font-variant-numeric: tabular-nums; color: #18181b; min-width: 22px; }
html.studio .st-monedas span { font-weight: 300; color: #71717a; }
html.studio .st-monedas.bajo .mn-n { color: #b45309; }
html.studio .st-monedas.pulso { animation: mnPulso .5s; }
@keyframes mnPulso { 40% { transform: scale(1.06); } }
html.studio .st-ia { position: absolute; right: 22px; bottom: 96px; z-index: 10045; width: 340px; max-height: min(520px, calc(100% - 200px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); font-family: 'Geist', sans-serif; color: #18181b; opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: .22s cubic-bezier(.2,.8,.2,1); transform-origin: bottom right; overflow: hidden; }
html.studio .st-ia.abierto { opacity: 1; transform: none; pointer-events: auto; }
html.studio .ia-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px; border-bottom: 1px solid var(--st-line); }
html.studio .ia-t { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; }
html.studio .ia-t em { font: 400 10px 'Geist Mono', monospace; font-style: normal; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.07); color: #52525b; }
html.studio .ia-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: #71717a; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; }
html.studio .ia-x:hover { background: rgba(0,0,0,.06); }
html.studio .ia-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; scrollbar-width: thin; }
html.studio .ia-m { max-width: 86%; padding: 9px 12px; border-radius: 14px; font: 300 13px/1.45 'Geist', sans-serif; animation: stIn .25s both; }
html.studio .ia-m.bot { align-self: flex-start; background: rgba(0,0,0,.05); border-bottom-left-radius: 5px; }
html.studio .ia-m.yo { align-self: flex-end; background: #18181b; color: #fff; border-bottom-right-radius: 5px; }
html.studio .ia-esc { display: flex; gap: 4px; padding: 12px 14px; }
html.studio .ia-esc i { width: 6px; height: 6px; border-radius: 50%; background: #71717a; animation: iaPunto 1s infinite; }
html.studio .ia-esc i:nth-child(2) { animation-delay: .15s; } html.studio .ia-esc i:nth-child(3) { animation-delay: .3s; }
@keyframes iaPunto { 0%,60%,100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
html.studio .ia-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
html.studio .ia-chips button { border: 1px solid rgba(0,0,0,.1); background: transparent; border-radius: 999px; padding: 5px 10px; font: 300 12px 'Geist', sans-serif; color: #3f3f46; cursor: pointer; }
html.studio .ia-chips button:hover { background: rgba(0,0,0,.05); }
html.studio .ia-f { display: flex; gap: 6px; padding: 0 12px 10px; }
html.studio .ia-f input { flex: 1; height: 38px; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; padding: 0 12px; background: rgba(255,255,255,.7); font: 300 13px 'Geist', sans-serif; outline: none; }
html.studio .ia-f input:focus { border-color: #18181b; }
html.studio .ia-f button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #18181b; color: #fff; display: grid; place-items: center; cursor: pointer; }
html.studio .ia-pie { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 10px; border-top: 1px solid var(--st-line); font: 300 11px 'Geist', sans-serif; color: #71717a; }
html.studio .ia-mas { border: 0; background: transparent; font: 400 11.5px 'Geist', sans-serif; color: #18181b; text-decoration: underline; cursor: pointer; }
.st-coins .st-modal-c { text-align: center; width: min(420px, calc(100vw - 32px)); }
.cn-ic { width: 44px; height: 44px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; background: #f4f4f5; color: #18181b; }
.cn-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.cn-o { position: relative; padding: 14px 6px 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; background: #fff; cursor: pointer; font-family: 'Geist', sans-serif; display: grid; gap: 2px; justify-items: center; }
.cn-o.on { border-color: #18181b; box-shadow: 0 0 0 1px #18181b; }
.cn-o b { font-size: 22px; font-weight: 400; letter-spacing: -.02em; } .cn-o span { font-size: 11px; color: #71717a; font-weight: 300; } .cn-o u { text-decoration: none; font-size: 12.5px; margin-top: 6px; color: #18181b; }
.cn-o em { position: absolute; top: -8px; font: 400 10px 'Geist', sans-serif; font-style: normal; background: #18181b; color: #fff; padding: 1px 8px; border-radius: 999px; }
.cn-buy { width: 100%; height: 44px; border: 0; border-radius: 12px; background: #18181b; color: #fff; font: 500 13.5px 'Geist', sans-serif; cursor: pointer; }
.cn-buy:disabled { opacity: .6; cursor: default; }
.st-coins small { display: block; margin: 10px 0 4px; font: 300 11.5px 'Geist', sans-serif; color: #a1a1aa; }
.cn-no { border: 0; background: transparent; font: 300 12.5px 'Geist', sans-serif; color: #71717a; cursor: pointer; padding: 6px 12px; }
html.studio.st-noche .st-ia { color: #f4f4f5; } html.studio.st-noche .ia-m.bot { background: rgba(255,255,255,.08); } html.studio.st-noche .ia-m.yo, html.studio.st-noche .ia-f button { background: #f4f4f5; color: #18181b; }
html.studio.st-noche .ia-chips button, html.studio.st-noche .st-monedas, html.studio.st-noche .mn-n { color: #f4f4f5; } html.studio.st-noche .ia-f input { background: rgba(255,255,255,.06); color: #f4f4f5; border-color: rgba(255,255,255,.15); }
@media (max-width: 1380px) { html.studio .st-ia { bottom: 92px; right: 14px; } html.studio .st-monedas span { display: none; } }
/* monedas: discretas, dentro de la isla */
html.studio .dock .st-monedas { position: static !important; height: 34px !important; padding: 0 10px 0 8px; gap: 6px; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 10px; z-index: auto; }
html.studio .dock .st-monedas:hover { background: rgba(0,0,0,.06); transform: none; }
html.studio .dock .mn-p { width: 15px; height: 15px; background: radial-gradient(circle at 34% 30%, #fff 0, #d4d4d8 40%, #71717a 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,255,255,.35); }
html.studio .dock .mn-n { font: 400 12.5px 'Geist', sans-serif; min-width: 0; }
html.studio.st-noche .dock .st-monedas:hover { background: rgba(255,255,255,.1); }
html.studio .st-ia { right: 22px; bottom: 96px; }
@media (min-width: 769px) and (max-width: 1560px) {
html.studio .dock-subir span, html.studio .dock-capas .n { display: none; }
html.studio .dock-subir { padding: 0 9px; width: 36px; justify-content: center; }
html.studio .dock .dock-capas { padding: 0 !important; width: 34px !important; min-width: 34px; }
html.studio .st-ayuda { bottom: 92px; right: 18px; }
html.studio .st-atajos { bottom: 130px; right: 18px; }
}
/* ═══ Asistente v2: tarjeta tipo barra de comandos + icono con etiqueta de monedas ═══ */
html.studio .st-monedas { all: unset; }
html.studio .st-ia-btn { position: absolute; right: 22px; bottom: 84px; z-index: 10046; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--st-line); background: var(--st-glass); box-shadow: var(--st-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
html.studio .st-ia-btn:hover { transform: translateY(-2px) scale(1.04); }
html.studio .st-ia-btn.activo { box-shadow: 0 0 0 2px #18181b, var(--st-shadow); }
html.studio .ia-orb { position: relative; width: 22px; height: 22px; border-radius: 50%; display: block; background: conic-gradient(from 0deg, #18181b, #71717a, #d4d4d8, #18181b); animation: iaGira 6s linear infinite; }
html.studio .ia-orb i { position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
html.studio .ia-orb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #18181b; }
@keyframes iaGira { to { transform: rotate(360deg); } }
html.studio .st-ia-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(24,24,27,.25); animation: iaOnda 2.8s ease-out infinite; pointer-events: none; }
html.studio .st-ia-btn.activo::before { display: none; }
@keyframes iaOnda { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
/* etiqueta de monedas pegada al icono */
html.studio .st-ia-btn .st-monedas {
all: unset; position: absolute; left: -10px; top: -10px; box-sizing: border-box; height: 22px; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 5px; border-radius: 999px;
background: #18181b; color: #fff; font: 500 11px 'Geist', sans-serif; cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0,0,0,.45); animation: none;
}
html.studio .st-ia-btn .st-monedas:hover { background: #3f3f46; }
html.studio .st-ia-btn .mn-p { width: 11px; height: 11px; border-radius: 50%; display: block; background: radial-gradient(circle at 34% 30%, #fff, #d4d4d8 45%, #71717a); animation: none; }
html.studio .st-ia-btn .mn-n { color: #fff; font: 500 11px 'Geist', sans-serif; min-width: 0; font-variant-numeric: tabular-nums; }
html.studio .st-ia-btn .st-monedas.bajo { background: #b45309; }
html.studio .st-ia-btn .st-monedas.pulso { animation: mnPulso .5s; }
html.studio .st-ia { right: 22px; bottom: 140px; width: 336px; max-height: min(480px, calc(100% - 230px)); border-radius: 22px; padding: 4px 0 0; background: var(--st-glass); transform-origin: bottom right; }
html.studio .ia-h { border: 0; padding: 12px 14px 0 16px; justify-content: flex-start; gap: 9px; }
html.studio .ia-h .ia-orb { width: 18px; height: 18px; } html.studio .ia-h .ia-orb i { inset: 2.5px; } html.studio .ia-h .ia-orb::after { width: 5px; height: 5px; margin: -2.5px; }
html.studio .ia-n { font: 400 12px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
html.studio .ia-x { margin-left: auto; display: grid; place-items: center; font-size: 0; }
html.studio .ia-hero { padding: 14px 18px 10px; display: grid; gap: 4px; }
html.studio .ia-hero b { font: 300 24px/1.15 'Geist', sans-serif; letter-spacing: -.03em; color: #18181b; }
html.studio .ia-hero span { font: 300 12.5px 'Geist', sans-serif; color: #71717a; }
html.studio .st-ia.con-feed .ia-hero, html.studio .st-ia.con-feed .ia-sug { display: none; }
html.studio .ia-feed { padding: 6px 18px 4px; display: grid; gap: 10px; max-height: 230px; overflow-y: auto; scrollbar-width: thin; }
html.studio .ia-feed:empty { display: none; }
html.studio .ia-l { display: flex; gap: 10px; font: 300 13px/1.45 'Geist', sans-serif; color: #3f3f46; animation: stIn .25s both; }
html.studio .ia-l .ck { flex: none; width: 16px; display: grid; place-items: center; color: #a1a1aa; margin-top: 1px; }
html.studio .ia-l.yo { color: #18181b; font-weight: 400; }
html.studio .ia-l.bot .ck { color: #18181b; }
html.studio .ia-esc { padding: 6px 0 6px 26px; gap: 4px; } html.studio .ia-esc i { width: 5px; height: 5px; border-radius: 50%; background: #71717a; animation: iaPunto 1s infinite; } html.studio .ia-esc i:nth-child(2) { animation-delay: .15s; } html.studio .ia-esc i:nth-child(3) { animation-delay: .3s; }
html.studio .ia-sug { display: grid; padding: 2px 10px 6px; }
html.studio .ia-sug button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: 10px; font: 300 13px 'Geist', sans-serif; color: #3f3f46; cursor: pointer; text-align: left; border: 0; }
html.studio .ia-sug button:hover { background: rgba(0,0,0,.05); }
html.studio .sg-i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.05); color: #52525b; }
html.studio .sg-t { flex: 1; }
html.studio .ia-sug em { font: 400 10.5px 'Geist Mono', monospace; font-style: normal; color: #71717a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); }
html.studio .ia-f { position: relative; padding: 4px 12px 10px; display: block; }
html.studio .ia-f input { width: 100%; box-sizing: border-box; height: 42px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 0 38px 0 14px; background: rgba(255,255,255,.75); font: 300 13.5px 'Geist', sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; }
html.studio .ia-f input:focus { border-color: #18181b; box-shadow: 0 0 0 3px rgba(24,24,27,.07); }
html.studio .ia-f kbd { position: absolute; right: 24px; top: 14px; font: 400 11px 'Geist Mono', monospace; color: #a1a1aa; pointer-events: none; }
html.studio .ia-pie { padding: 4px 18px 12px; border: 0; }
html.studio .st-ayuda { bottom: 84px !important; right: 76px !important; }
html.studio .st-atajos { bottom: 126px !important; right: 76px !important; }
html.studio.st-noche .st-ia-btn .ia-orb i { background: #1e1e22; } html.studio.st-noche .ia-orb { background: conic-gradient(from 0deg, #f4f4f5, #71717a, #d4d4d8, #f4f4f5); } html.studio.st-noche .ia-orb::after { background: #f4f4f5; }
html.studio.st-noche .ia-hero b, html.studio.st-noche .ia-l.yo { color: #f4f4f5; } html.studio.st-noche .ia-l, html.studio.st-noche .ia-sug button { color: #d4d4d8; } html.studio.st-noche .ia-f input { background: rgba(255,255,255,.06); color: #f4f4f5; border-color: rgba(255,255,255,.14); }
html.studio.st-noche .st-ia-btn .st-monedas { background: #f4f4f5; } html.studio.st-noche .st-ia-btn .mn-n { color: #18181b; }
@media (max-width: 1380px) { html.studio .st-ia-btn { right: 18px; } html.studio .st-ia { right: 18px; } }
/* icono de IA (destellos) en lugar del círculo */
html.studio .ia-ico { display: grid; place-items: center; color: #18181b; }
html.studio .st-ia-btn { border-radius: 15px; background: #18181b; border-color: #18181b; }
html.studio .st-ia-btn .ia-ico { color: #fff; }
html.studio .st-ia-btn::before { border-radius: 19px; border-color: rgba(24,24,27,.3); }
html.studio .st-ia-btn.activo { box-shadow: 0 0 0 3px rgba(24,24,27,.15), var(--st-shadow); }
html.studio .ia-h .ia-ico svg { width: 16px; height: 16px; }
html.studio .st-ia-btn:hover .ia-ico svg { animation: iaBrillo .9s ease; }
@keyframes iaBrillo { 40% { transform: scale(1.18) rotate(8deg); } }
html.studio.st-noche .st-ia-btn { background: #f4f4f5; border-color: #f4f4f5; } html.studio.st-noche .st-ia-btn .ia-ico { color: #18181b; } html.studio.st-noche .ia-ico { color: #f4f4f5; }
html.studio .ia-h .ia-ico svg { width: 17px; height: 17px; }
/* icono flotante: solo la estrella, sin caja de color */
html.studio .st-ia-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; width: 44px; height: 44px; border-radius: 0; animation: iaFlota 4s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(24,24,27,.28)); }
html.studio .st-ia-btn::before { display: none !important; }
html.studio .st-ia-btn .ia-ico { color: #18181b; }
html.studio .st-ia-btn .ia-ico svg { width: 38px; height: 38px; }
html.studio .st-ia-btn.activo { box-shadow: none !important; animation: none; }
html.studio .st-ia-btn:hover { transform: scale(1.08); }
html.studio .st-ia-btn .st-monedas { left: -14px; top: -8px; }
@keyframes iaFlota { 50% { transform: translateY(-4px); } }
html.studio.st-noche .st-ia-btn { background: transparent !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
html.studio.st-noche .st-ia-btn .ia-ico { color: #f4f4f5; }
/* neutro (sin color) y alineado con la fila de la isla */
html.studio .st-ia-btn { filter: none; bottom: 28px; right: 18px; }
html.studio .st-ia-btn .ia-ico { color: #52525b; }
html.studio .st-ia-btn:hover .ia-ico { color: #18181b; }
html.studio .st-ia-btn .st-monedas { background: var(--st-glass); color: #3f3f46; border: 1px solid var(--st-line); box-shadow: var(--st-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.studio .st-ia-btn .st-monedas:hover { background: #fff; }
html.studio .st-ia-btn .mn-n { color: #3f3f46; }
html.studio .st-ia-btn .st-monedas.bajo { background: var(--st-glass); border-color: #b45309; } html.studio .st-ia-btn .st-monedas.bajo .mn-n { color: #b45309; }
html.studio .st-ayuda { bottom: 34px !important; right: 72px !important; }
html.studio .st-atajos { bottom: 76px !important; right: 72px !important; }
html.studio .st-ia { bottom: 88px; right: 18px; }
html.studio.st-noche .st-ia-btn .ia-ico { color: #d4d4d8; } html.studio.st-noche .st-ia-btn .st-monedas { background: var(--st-glass); } html.studio.st-noche .st-ia-btn .mn-n { color: #f4f4f5; }
@media (max-width: 1380px) {
html.studio .st-ia-btn { bottom: 84px; right: 18px; }
html.studio .st-ayuda { bottom: 90px !important; right: 72px !important; }
html.studio .st-atajos { bottom: 130px !important; }
html.studio .st-ia { bottom: 140px; }
}
/* etiqueta de monedas al lado del icono (derecha), moneda dorada */
html.studio .st-ia-btn { width: auto; display: flex; align-items: center; gap: 2px; right: 14px; padding: 0; }
html.studio .st-ia-btn .ia-ico svg { width: 34px; height: 34px; }
html.studio .st-ia-btn .st-monedas { position: static !important; order: 2; height: 24px; padding: 0 9px 0 7px; margin: 0; gap: 5px; }
html.studio .st-ia-btn .mn-p { width: 12px; height: 12px; background: radial-gradient(circle at 34% 28%, #fff7c2 0, #fcd34d 35%, #d97706 80%, #92400e 100%) !important; box-shadow: inset 0 0 0 1px rgba(146,64,14,.55), 0 0 6px rgba(245,158,11,.45); }
html.studio .st-ia-btn .mn-n { font-weight: 500; }
html.studio .st-ayuda { right: 112px !important; }
html.studio .st-atajos { right: 112px !important; }
html.studio .dock { left: calc(50% - 46px) !important; }
@media (max-width: 1380px) {
html.studio .st-ia-btn { right: 14px; }
html.studio .st-ayuda { right: 112px !important; }
html.studio .dock { left: 50% !important; }
}
html.studio .st-ia-btn .ia-ico svg { width: 36px; height: 36px; }
html.studio .ia-h .ia-ico svg { width: 18px; height: 18px; }
html.studio .st-ia-btn .ia-ico svg { width: 36px; height: 36px; }
html.studio .ia-h .ia-ico svg { width: 18px; height: 18px; }
/* etiqueta en diagonal, arriba a la derecha del icono (pegada) */
html.studio .st-ia-btn { width: 40px; height: 40px; right: 66px; bottom: 30px; display: grid; place-items: center; }
html.studio .st-ia-btn .st-monedas { position: absolute !important; left: calc(100% - 14px); top: -8px; height: 21px; padding: 0 8px 0 6px; }
html.studio .st-ia-btn .ia-ico svg { width: 34px; height: 34px; }
html.studio .st-ia { right: 18px; }
@media (max-width: 1380px) { html.studio .st-ia-btn { right: 66px; } }
/* etiqueta micro */
html.studio .st-ia-btn .st-monedas { height: 16px !important; padding: 0 6px 0 4px !important; gap: 3px !important; left: calc(100% - 12px); top: -4px; border-radius: 999px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); }
html.studio .st-ia-btn .mn-p { width: 8px !important; height: 8px !important; box-shadow: inset 0 0 0 .5px rgba(146,64,14,.6) !important; }
html.studio .st-ia-btn .mn-n { font: 500 9.5px 'Geist', sans-serif !important; letter-spacing: 0; }
/* icono de IA: línea fina y efecto glow IA luminoso */
html.studio .ia-ico svg { stroke-width: .8; }
html.studio .st-ia-btn .ia-ico svg { stroke-width: .75; }
/* ══ Efecto de iluminación IA suave y continuo para el botón contraído ══ */
html.studio .st-ia-btn {
position: absolute !important;
transition: transform .25s ease, filter .25s ease;
filter: drop-shadow(0 0 10px rgba(167,139,250,0.5)) drop-shadow(0 0 20px rgba(236,72,153,0.3)) !important;
animation: iaGlowPulse 3.2s ease-in-out infinite, iaFlota 4s ease-in-out infinite !important;
}
html.studio .st-ia-btn:hover {
filter: drop-shadow(0 0 14px rgba(167,139,250,0.85)) drop-shadow(0 0 26px rgba(236,72,153,0.55)) !important;
}
html.studio .st-ia-btn .ia-ico svg {
stroke: url(#iaGrad) !important;
}
@keyframes iaGlowPulse {
0%, 100% {
filter: drop-shadow(0 0 8px rgba(167,139,250,0.45)) drop-shadow(0 0 16px rgba(236,72,153,0.25));
}
50% {
filter: drop-shadow(0 0 16px rgba(167,139,250,0.85)) drop-shadow(0 0 28px rgba(251,146,60,0.55));
transform: scale(1.06);
}
}
/* etiqueta de monedas micro */
html.studio .st-ia-btn .st-monedas { height: 16px !important; padding: 0 6px 0 4px !important; gap: 3px !important; left: calc(100% - 12px); top: -4px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); }
html.studio .st-ia-btn .mn-p { width: 8px !important; height: 8px !important; box-shadow: inset 0 0 0 .5px rgba(146,64,14,.6) !important; }
html.studio .st-ia-btn .mn-n { font: 500 9.5px 'Geist', sans-serif !important; letter-spacing: 0; }
html.studio .ia-n { display: none !important; }
/* ══ Ver en tu espacio (AR) ══ */
.st-ar .ar-c { position: relative; width: min(760px, calc(100vw - 32px)); padding: 0; display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; text-align: left; }
.ar-x { position: absolute; right: 12px; top: 10px; z-index: 3; width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(0,0,0,.06); font-size: 18px; line-height: 1; cursor: pointer; color: #3f3f46; }
.ar-vis { position: relative; min-height: 420px; background: #f5f5f7 radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px) 0 0 / 22px 22px; }
.ar-vis model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.ar-btn { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); height: 38px; padding: 0 18px; border: 0; border-radius: 11px; background: #18181b; color: #fff; font: 400 13px 'Geist', sans-serif; cursor: pointer; }
.ar-carga { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ar-carga i { width: 7px; height: 7px; border-radius: 50%; background: #18181b; animation: iaPunto 1s infinite; } .ar-carga i:nth-child(2) { animation-delay: .15s; } .ar-carga i:nth-child(3) { animation-delay: .3s; }
.ar-err { position: absolute; inset: 0; display: grid; place-items: center; font: 300 13px 'Geist', sans-serif; color: #71717a; }
.ar-lado { padding: 30px 28px 24px; display: flex; flex-direction: column; justify-content: center; }
.ar-lado h3 { margin: 0 0 8px; font: 500 20px 'Geist', sans-serif; letter-spacing: -.02em; }
.ar-lado p { margin: 0 0 18px; font: 300 13.5px/1.55 'Geist', sans-serif; color: #71717a; }
.ar-qr { width: 164px; height: 164px; padding: 8px; border: 1px solid rgba(0,0,0,.1); border-radius: 14px; display: grid; place-items: center; background: #fff; margin-bottom: 12px; }
.ar-qr img, .ar-qr canvas { display: block; }
.ar-est { font: 300 12px 'Geist', sans-serif; color: #71717a; } .ar-est a { color: #18181b; }
@media (max-width: 720px) { .st-ar .ar-c { grid-template-columns: 1fr; } .ar-vis { min-height: 300px; } }