:root {
    color-scheme: dark;
    --bg: #070605;
    --panel: rgba(14, 12, 10, 0.82);
    --panel-soft: rgba(26, 22, 18, 0.56);
    --line: rgba(255, 240, 214, 0.12);
    --line-strong: rgba(255, 221, 164, 0.28);
    --text: #f4efe5;
    --muted: rgba(244, 239, 229, 0.72);
    --accent: #d0ad73;
    --accent-strong: #ffe0ad;
    --danger: #ff9c8f;
    --shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
    --font-ui: "Manrope", "Segoe UI Variable", sans-serif;
    --font-display: "Cormorant Garamond", serif;
}

[hidden] {
    display: none !important;
}

/* ── Telón de carga: negro hasta que el panorama llegue al 100% ─────────── */
.tour-curtain {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #060f09;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity 0.75s ease;
}
.tour-curtain.is-lifting {
    opacity: 0;
    pointer-events: none;
}
/* Logo NEEN pequeño sobre el spinner */
.tour-curtain__logo {
    width: 64px;
    height: 42px;
    object-fit: contain;
    opacity: 0.45;
    filter: brightness(0) invert(1);
    margin-bottom: 6px;
}
/* Anillo spinner gold */
.tour-curtain__ring {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(244, 214, 128, 0.12);
    border-top-color: #f4d680;
    border-radius: 50%;
    animation: curtain-spin 0.85s linear infinite;
}
/* Texto "Cargando tour…" — aparece tras 1.4s para no parpadear en carga rápida */
.tour-curtain__label {
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 214, 128, 0.35);
    opacity: 0;
    animation: curtain-label-in 0.4s ease 1.4s forwards;
}
@keyframes curtain-spin {
    to { transform: rotate(360deg); }
}
@keyframes curtain-label-in {
    to { opacity: 1; }
}

body.tour-booting .tour-shell {
    visibility: hidden;
}

body.tour-booting .landing-screen,
body.tour-booting .intro-screen {
    visibility: visible;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    overscroll-behavior: none;
}

body {
    overflow: hidden;
}

body.is-public-mode {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

button,
input,
textarea,
select,
a {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
}

.tour-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.tour-shell--fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
}

.tour-shell:fullscreen .tool-rail,
.tour-shell:fullscreen .viewer-footer,
.tour-shell:fullscreen .scene-chip,
.tour-shell--immersive-full .tool-rail,
.tour-shell--immersive-full .viewer-footer,
.tour-shell--immersive-full .scene-chip,
.tour-shell--fullscreen-fallback .tool-rail,
.tour-shell--fullscreen-fallback .viewer-footer,
.tour-shell--fullscreen-fallback .scene-chip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.panorama {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}

body.is-placing-addon .panorama,
body.is-placing-addon .hotspot-layer {
    cursor: crosshair;
}

.panorama.is-drop-target::before {
    content: "Suelta para crear conexion";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    transform: translate(-50%, -50%);
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(208, 173, 115, 0.34);
    background: rgba(12, 10, 8, 0.78);
    color: #ffe5b8;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
}

.hotspot-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
}

.equirect-video-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform; /* GPU layer dedicada — evita que el canvas compita con el panorama */
}

.hotspot-projection-node {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    transform: translate3d(var(--projection-x, -9999px), var(--projection-y, -9999px), 0) translate(-50%, -50%) scale(var(--projection-scale, 1));
    transform-origin: center;
    will-change: transform;
}

.hotspot-projection-node .tour-hotspot,
.hotspot-projection-node .overlay-actor {
    pointer-events: auto;
}

.hotspot-projection-node > .tour-hotspot {
    position: absolute;
    left: calc(var(--addon-width, 44px) * -0.5);
    top: calc(var(--addon-height, 44px) * -0.5);
}

.panorama-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7, 6, 5, 0.48) 0%, rgba(7, 6, 5, 0.06) 24%, rgba(7, 6, 5, 0.06) 72%, rgba(7, 6, 5, 0.58) 100%),
        radial-gradient(circle at top left, rgba(208, 173, 115, 0.08), transparent 26%);
}

.wordmark {
    position: absolute;
    top: 16px;
    left: 22px;
    z-index: 9;
    display: grid;
    justify-items: start;
    gap: 5px;
    width: min(360px, calc(100vw - 44px));
    pointer-events: none;
    text-align: left;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.wordmark__logo {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    object-position: center;
    margin: 0 0 -4px 1px;
    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.26))
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.38));
}

.wordmark__kicker {
    margin: 0;
    color: rgba(255, 235, 197, 0.76);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.wordmark__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.55vw, 1.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.31em;
    color: #0b5a4f;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(0, 0, 0, 0.34);
}

.wordmark__subtitle {
    display: block;
    max-width: 300px;
    margin: 7px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgba(11, 90, 79, 0.96);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.24);
}

.project-mark {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 9;
    max-width: 92px;
    max-height: 56px;
}

.project-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-rail {
    position: absolute;
    top: 188px;
    left: 20px;
    z-index: 10;
    display: grid;
    gap: 10px;
}

.tool-btn,
.control-btn,
.filmstrip-nav,
.sheet-close,
.editor-btn {
    border: 1px solid var(--line);
    background: rgba(10, 10, 10, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tool-btn:hover,
.tool-btn:focus-visible,
.control-btn:hover,
.control-btn:focus-visible,
.filmstrip-nav:hover,
.filmstrip-nav:focus-visible,
.sheet-close:hover,
.sheet-close:focus-visible,
.editor-btn:hover,
.editor-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    background: rgba(18, 16, 14, 0.46);
    outline: none;
}

.tool-btn {
    min-width: 62px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tool-btn--primary {
    border-color: rgba(208, 173, 115, 0.32);
    background: rgba(208, 173, 115, 0.18);
    color: #fff1cd;
}

.whatsapp-contact {
    position: absolute;
    right: 24px;
    top: 96px;
    z-index: 12;
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 16px 0 12px;
    border: 1px solid rgba(88, 214, 141, 0.32);
    border-radius: 999px;
    background: rgba(8, 42, 26, 0.58);
    color: #eafff2;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.is-public-mode .whatsapp-contact {
    display: inline-flex;
}

.whatsapp-contact:hover,
.whatsapp-contact:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(88, 214, 141, 0.72);
    background: rgba(13, 94, 52, 0.72);
    outline: none;
}

.whatsapp-contact__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #75f0a4;
}

.whatsapp-contact__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.scene-chip {
    position: absolute;
    left: 24px;
    bottom: 146px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 76px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(10, 10, 10, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text);
}

.scene-chip__count {
    color: rgba(255, 239, 208, 0.72);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.scene-sheet {
    position: absolute;
    left: 24px;
    bottom: 194px;
    z-index: 11;
    width: min(460px, calc(100vw - 48px));
    max-height: min(76vh, 680px);
    overflow: auto;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--shadow);
    display: grid;
    gap: 12px;
}

.scene-sheet__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.scene-sheet__kicker {
    margin: 0 0 6px;
    color: rgba(255, 235, 197, 0.76);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scene-sheet h2,
.modal-card h3,
.gate-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 0.95;
}

.studio-drawer h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
}

.scene-sheet__body {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.scene-sheet__media {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 240, 214, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.scene-sheet__media img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(208, 173, 115, 0.16);
    background: rgba(208, 173, 115, 0.12);
    color: #ffe8bf;
    font-size: 0.74rem;
}

.sheet-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
}

.viewer-footer {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 10;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.controls-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(10, 10, 10, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.control-btn {
    min-width: 52px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
}

.filmstrip-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    padding: 8px 14px 12px;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    background: rgba(10, 9, 8, 0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.36);
    display: grid;
    gap: 6px;
}

.filmstrip-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.studio-drawer__head,
.studio-counter,
.hotspot-item__row,
.access-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.filmstrip-panel__label,
.studio-drawer__eyebrow {
    color: rgba(255, 235, 197, 0.76);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.filmstrip-panel__body {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 6px;
    align-items: center;
}

.filmstrip-drag-hint {
    color: rgba(255, 229, 184, 0.78);
    font-size: 0.7rem;
    text-align: center;
}

.filmstrip-nav {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.7rem;
}

.filmstrip-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 2px;
}

.filmstrip-track::-webkit-scrollbar {
    height: 4px;
}

.filmstrip-track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.filmstrip-card__item {
    flex: 0 0 96px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 240, 214, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 120ms;
}

.filmstrip-card__item:hover {
    border-color: rgba(255, 240, 214, 0.22);
}

.filmstrip-card__item.is-active {
    border-color: rgba(208, 173, 115, 0.56);
    box-shadow: inset 0 0 0 1px rgba(208, 173, 115, 0.18);
}

.filmstrip-card__item img {
    display: block;
    width: 100%;
    height: 54px;
    object-fit: cover;
    background: rgba(255,255,255,0.06); /* placeholder while thumbnail loads */
}

.filmstrip-card__meta {
    padding: 4px 6px 5px;
}

.filmstrip-card__title {
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(244, 239, 229, 0.8);
}

.filmstrip-card__subtitle {
    display: none;
}

.status-toast {
    position: fixed;
    left: 50%;
    bottom: 110px;
    z-index: 30;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(12, 11, 10, 0.86);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.82rem;
}

.studio-scrim {
    position: fixed;
    inset: 0;
    z-index: 18;
    background: rgba(5, 4, 4, 0.08);
    pointer-events: none;
}

.studio-drawer {
    position: fixed;
    top: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 19;
    width: min(392px, calc(100vw - 20px));
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(15, 13, 11, 0.94);
    box-shadow: var(--shadow);
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 12px;
}

.studio-toolbar,
.studio-tabs,
.studio-toolbar__actions,
.pill-grid,
.toggle-grid,
.studio-inline-actions,
.range-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.studio-toolbar {
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-grid--toolbar {
    margin-bottom: 8px;
}

.studio-tabs,
.pill-grid,
.toggle-grid,
.studio-inline-actions {
    flex-wrap: wrap;
}

.studio-tab,
.pill-btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 239, 208, 0.64);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.studio-tab.is-active,
.pill-btn.is-active {
    border-color: rgba(208, 173, 115, 0.28);
    background: rgba(208, 173, 115, 0.14);
    color: #fff0cb;
}

.studio-panel {
    display: grid;
    gap: 10px;
}

.studio-panel--addon {
    gap: 12px;
}

.addon-toolbar,
.addon-toolbar__actions,
.addon-icon-layout,
.addon-icon-actions {
    display: grid;
    gap: 12px;
}

.addon-toolbar__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.addon-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.addon-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.addon-section__head h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 239, 208, 0.86);
}

.addon-section--list {
    padding-bottom: 10px;
}

.addon-icon-layout {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
}

.addon-icon-card {
    padding: 8px;
}

.addon-icon-card img {
    aspect-ratio: 1;
}

.addon-icon-actions {
    align-content: start;
}

.studio-drawer__head--scene {
    padding: 2px 2px 0;
    align-items: flex-start;
}

.studio-group {
    border: 1px solid rgba(255, 240, 214, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.studio-group summary {
    list-style: none;
    padding: 9px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 235, 197, 0.72);
    cursor: pointer;
}

.studio-group summary::-webkit-details-marker {
    display: none;
}

.studio-group__body {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.studio-subgroup {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.studio-subgroup summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 235, 197, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.studio-subgroup summary::-webkit-details-marker {
    display: none;
}

.editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.field--inline {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
}

.field span {
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.field--wide {
    grid-column: 1 / -1;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: var(--text);
}

.field select {
    background-color: #1c1812;
    cursor: pointer;
}

.field select option {
    background-color: #1c1812;
    color: var(--text);
}

.field select option:disabled {
    color: rgba(244, 239, 229, 0.38);
}

.field textarea {
    min-height: 68px;
    resize: vertical;
}

.brand-logo-card img {
    max-height: 96px;
    object-fit: contain;
}

.editor-actions,
.access-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.range-row {
    width: 100%;
}

.range-row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.range-row--numbered {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) minmax(34px, auto) 52px;
    gap: 6px;
    align-items: center;
}

.range-row--numbered input[type="range"] {
    width: 100%;
}

.range-value {
    min-width: 34px;
    text-align: right;
    color: rgba(255, 235, 197, 0.76);
    font-size: 0.76rem;
}

.range-number {
    width: 52px;
    min-width: 52px;
    padding: 4px 5px;
    border-radius: 6px;
    border: 1px solid rgba(255, 240, 214, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 245, 224, 0.92);
    font-size: 0.74rem;
    text-align: right;
}

.scene-thumb-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.scene-thumb-card img {
    display: block;
    width: 100%;
    max-height: 110px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.scene-thumb-card--compact img {
    max-height: 112px;
    object-fit: contain;
}

.scene-thumb-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.editor-btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.editor-btn--primary {
    border-color: rgba(208, 173, 115, 0.24);
    background: rgba(208, 173, 115, 0.16);
    color: #fff0cb;
}

.editor-btn--danger {
    border-color: rgba(255, 108, 82, 0.18);
    color: #ffab9c;
}

.editor-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: saturate(0.7);
}

.range-row input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.editor-tip {
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.72rem;
}

.editor-tip.is-armed {
    border-color: rgba(208, 173, 115, 0.22);
    color: #ffe8bf;
}

.hotspot-list {
    display: grid;
    gap: 10px;
}

.hotspot-list--compact {
    max-height: 188px;
    overflow: auto;
    padding-right: 4px;
}

.hotspot-item,
.access-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.hotspot-item.is-active {
    border-color: rgba(208, 173, 115, 0.28);
    background: rgba(208, 173, 115, 0.08);
}

.hotspot-item__title {
    font-weight: 700;
}

.hotspot-item__row {
    align-items: center;
}

.hotspot-item__meta,
.access-card__token {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
    word-break: break-word;
}

.access-card__url {
    font-size: 0.72rem;
    color: var(--muted);
    word-break: break-all;
    padding: 4px 6px;
    background: rgba(0,0,0,.25);
    border-radius: 6px;
    cursor: pointer;
    user-select: all;
}

.access-card__notes {
    font-size: 0.78rem;
    color: var(--muted);
    opacity: .8;
    min-height: 0;
}

.access-card__notes:empty {
    display: none;
}

.access-card__edit {
    display: grid;
    gap: 6px;
}

.access-card__edit-label,
.access-card__edit-notes {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,240,214,.15);
    background: rgba(255,255,255,.06);
    color: inherit;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.modal,
.gate-screen {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 4, 0.76);
}

.modal-card,
.gate-card {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(16, 14, 12, 0.96);
    box-shadow: var(--shadow);
}

.modal-card {
    max-height: min(86vh, 920px);
    overflow: auto;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.modal-media {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.modal-media img,
.modal-media video,
.modal-media iframe {
    width: 100%;
    border: 0;
    border-radius: 18px;
}

.modal-media iframe {
    min-height: 420px;
    background: #000;
}

.modal-link {
    display: inline-flex;
    margin-top: 18px;
}

.tour-hotspot {
    position: relative;
    display: block;
    width: var(--addon-width, 34px);
    height: var(--addon-height, 34px);
    overflow: visible;
    cursor: pointer;
    opacity: var(--addon-opacity, 1);
    transform: rotate(var(--addon-rotation, 0deg)) scale(var(--addon-scale, 1));
}

.tour-hotspot__wheel,
.tour-hotspot__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.tour-hotspot__wheel {
    border: 1px solid rgba(255, 243, 219, 0.62);
    background: conic-gradient(from 0deg, rgba(255, 226, 179, 0) 0deg, rgba(255, 226, 179, 0.92) 92deg, rgba(255, 226, 179, 0.14) 176deg, rgba(255, 226, 179, 0) 360deg);
    animation: spin-ring 2.4s linear infinite;
    box-shadow: 0 0 0 10px rgba(208, 173, 115, 0.08);
}

.tour-hotspot__core {
    inset: 7px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(255, 244, 220, 0.16);
}

.tour-hotspot__glyph {
    font-size: 0.72rem;
    font-weight: 700;
}

.tour-hotspot__icon,
.tour-hotspot__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tour-hotspot__media {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 240, 214, 0.12);
    background: rgba(10, 10, 10, 0.58);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.tour-hotspot__text {
    display: grid;
    place-items: center;
    min-width: 120px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(8, 7, 6, 0.9);
    border: 1px solid rgba(255, 240, 214, 0.12);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24);
}

.tour-hotspot__label {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    font-size: 0.74rem;
    color: var(--label-color, var(--text));
    font-family: var(--label-font, inherit);
    pointer-events: none;
    opacity: 1;
    transition: opacity 160ms ease;
}

.tour-hotspot--shadow .tour-hotspot__label {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
}

.tour-hotspot--shadow .tour-hotspot__text,
.tour-hotspot--shadow .tour-hotspot__media {
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

.tour-hotspot--only-hover .tour-hotspot__label {
    opacity: 0;
}

.tour-hotspot--only-hover:hover .tour-hotspot__label,
.tour-hotspot--only-hover:focus-within .tour-hotspot__label {
    opacity: 1;
}

.tour-hotspot--force-2d {
    transform-style: flat;
}

.tour-hotspot--2d .tour-hotspot__wheel,
.tour-hotspot--2d .tour-hotspot__core,
.tour-hotspot--2d .tour-hotspot__media,
.tour-hotspot--2d .tour-hotspot__text {
    transform: none;
}

.tour-hotspot--floor {
    transform: rotate(var(--addon-rotation, 0deg)) scale(var(--addon-scale, 1));
}

.tour-hotspot--floor .tour-hotspot__wheel,
.tour-hotspot--floor .tour-hotspot__core,
.tour-hotspot--floor .tour-hotspot__media,
.tour-hotspot--floor .tour-hotspot__text {
    transform: perspective(180px) rotateX(62deg);
    transform-origin: center center;
}

.tour-hotspot--floor .tour-hotspot__wheel {
    animation: spin-ring-floor 2.4s linear infinite;
}

.tour-hotspot--wall {
    transform: rotate(var(--addon-rotation, 0deg)) scale(var(--addon-scale, 1.02));
}

.tour-hotspot--wall .tour-hotspot__wheel,
.tour-hotspot--wall .tour-hotspot__core,
.tour-hotspot--wall .tour-hotspot__media,
.tour-hotspot--wall .tour-hotspot__text {
    transform: scaleY(0.86);
    transform-origin: center center;
}

.tour-hotspot--wall .tour-hotspot__wheel {
    animation: spin-ring-wall 2.4s linear infinite;
}

.tour-hotspot--selected .tour-hotspot__wheel,
.tour-hotspot--selected .tour-hotspot__media,
.tour-hotspot--selected .tour-hotspot__text {
    box-shadow:
        0 0 0 2px rgba(98, 219, 255, 0.9),
        0 0 0 12px rgba(98, 219, 255, 0.12);
}

.tour-hotspot--armed .tour-hotspot__wheel,
.tour-hotspot--armed .tour-hotspot__media,
.tour-hotspot--armed .tour-hotspot__text {
    animation: spin-ring 1.2s linear infinite, addon-pulse 1.2s ease-in-out infinite;
}

.tour-hotspot--bounce {
    animation: addon-bounce 2.1s ease-in-out infinite;
}

.tour-hotspot--pulse .tour-hotspot__core,
.tour-hotspot--pulse .tour-hotspot__media,
.tour-hotspot--pulse .tour-hotspot__text {
    animation: addon-pulse 1.8s ease-in-out infinite;
}

.tour-hotspot--wave .tour-hotspot__wheel {
    animation: spin-ring 2.4s linear infinite, addon-wave 1.8s ease-in-out infinite;
}

.tour-hotspot--scene .tour-hotspot__wheel {
    background: conic-gradient(from 0deg, rgba(248, 193, 108, 0) 0deg, rgba(248, 193, 108, 0.96) 92deg, rgba(248, 193, 108, 0.14) 176deg, rgba(248, 193, 108, 0) 360deg);
}

.tour-hotspot--info .tour-hotspot__wheel,
.tour-hotspot--modal .tour-hotspot__wheel {
    background: conic-gradient(from 0deg, rgba(141, 221, 255, 0) 0deg, rgba(141, 221, 255, 0.92) 92deg, rgba(141, 221, 255, 0.14) 176deg, rgba(141, 221, 255, 0) 360deg);
}

.tour-hotspot--link .tour-hotspot__wheel {
    background: conic-gradient(from 0deg, rgba(255, 177, 219, 0) 0deg, rgba(255, 177, 219, 0.92) 92deg, rgba(255, 177, 219, 0.14) 176deg, rgba(255, 177, 219, 0) 360deg);
}

.tour-hotspot--sound .tour-hotspot__wheel {
    background: conic-gradient(from 0deg, rgba(166, 255, 188, 0) 0deg, rgba(166, 255, 188, 0.92) 92deg, rgba(166, 255, 188, 0.14) 176deg, rgba(166, 255, 188, 0) 360deg);
}

.tour-hotspot--overlay {
    width: 0;
    height: 0;
}

.scene-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.scene-picker__option {
    display: grid;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    text-align: left;
    font-size: 0.68rem;
    color: rgba(244,239,229,0.72);
    transition: background 120ms, border-color 120ms;
}

.scene-picker__option:hover {
    background: rgba(208,173,115,0.12);
    border-color: rgba(208,173,115,0.22);
    color: var(--text);
}

.scene-picker__option.is-selected {
    border-color: rgba(208,173,115,0.4);
    background: rgba(208,173,115,0.16);
    color: #fff0cb;
}

.scene-picker__option img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 5px;
    background: rgba(255,255,255,0.08);
    display: block;
}

.panorama.has-lens-flare::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 68% 18%, rgba(255, 223, 174, 0.28), transparent 14%),
        radial-gradient(circle at 63% 24%, rgba(255, 240, 214, 0.12), transparent 18%);
    mix-blend-mode: screen;
}

.overlay-actor {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--overlay-width, 180px);
    cursor: pointer;
}

.overlay-actor img,
.overlay-actor video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.3));
}

.overlay-actor__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 0.68;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 240, 214, 0.2);
    background: rgba(208, 173, 115, 0.12);
    text-align: center;
}

@keyframes spin-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-ring-floor {
    from {
        transform: perspective(180px) rotateX(62deg) rotate(0deg);
    }

    to {
        transform: perspective(180px) rotateX(62deg) rotate(360deg);
    }
}

@keyframes spin-ring-wall {
    from {
        transform: scaleY(0.86) rotate(0deg);
    }

    to {
        transform: scaleY(0.86) rotate(360deg);
    }
}

@keyframes addon-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes addon-wave {
    0%, 100% {
        box-shadow: 0 0 0 10px rgba(208, 173, 115, 0.08);
    }

    50% {
        box-shadow: 0 0 0 18px rgba(208, 173, 115, 0.02);
    }
}

@keyframes addon-bounce {
    0%, 100% {
        transform: translateY(0) rotate(var(--addon-rotation, 0deg)) scale(var(--addon-scale, 1));
    }

    50% {
        transform: translateY(-8px) rotate(var(--addon-rotation, 0deg)) scale(var(--addon-scale, 1));
    }
}

@media (max-width: 920px) {
    body.is-edit-mode {
        overflow: auto;
    }

    .tour-shell {
        min-height: 100vh;
        padding: 16px;
        display: grid;
        gap: 14px;
        align-content: start;
    }

    .panorama,
    .hotspot-layer,
    .equirect-video-layer,
    .panorama-vignette {
        position: fixed;
        inset: 0;
    }

    .wordmark,
    .project-mark,
    .tool-rail,
    .scene-chip,
    .scene-sheet,
    .viewer-footer,
    .studio-drawer {
        position: relative;
        inset: auto;
        width: auto;
    }

    .tool-rail {
        grid-auto-flow: column;
        justify-content: start;
    }

    .scene-sheet {
        bottom: auto;
    }

    .viewer-footer {
        left: auto;
        right: auto;
        bottom: auto;
    }

    body.is-public-mode .tour-shell {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        display: block;
        overflow: hidden;
    }

    body.is-public-mode .panorama,
    body.is-public-mode .hotspot-layer,
    body.is-public-mode .equirect-video-layer,
    body.is-public-mode .panorama-vignette {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    body.is-public-mode .wordmark,
    body.is-public-mode .project-mark,
    body.is-public-mode .tool-rail,
    body.is-public-mode .scene-chip,
    body.is-public-mode .scene-sheet,
    body.is-public-mode .viewer-footer {
        position: absolute;
    }

    body.is-public-mode .wordmark {
        top: calc(env(safe-area-inset-top, 0px) + 18px);
        left: 18px;
        right: auto;
        bottom: auto;
        width: min(54vw, 280px);
        gap: 3px;
    }

    body.is-public-mode .wordmark__logo {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 0;
    }

    body.is-public-mode .wordmark__title {
        font-size: 1.72rem !important;
        letter-spacing: 0.26em !important;
        line-height: 0.98;
    }

    body.is-public-mode .wordmark__subtitle {
        max-width: 270px;
        margin-top: 5px;
        font-size: 0.78rem !important;
        letter-spacing: 0.13em !important;
        line-height: 1.16;
    }

    body.is-public-mode .whatsapp-contact {
        top: calc(env(safe-area-inset-top, 0px) + 102px);
        right: 18px;
        min-height: 38px;
        padding: 0 14px 0 10px;
        font-size: 0.72rem;
    }

    body.is-public-mode .project-mark {
        top: calc(env(safe-area-inset-top, 0px) + 16px);
        right: 16px;
        left: auto;
        bottom: auto;
    }

    body.is-public-mode .tool-rail {
        top: calc(env(safe-area-inset-top, 0px) + 176px);
        left: 18px;
        right: 18px;
        bottom: auto;
        width: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
    }

    body.is-public-mode .tool-btn {
        min-width: 0;
        min-height: 36px;
        padding: 0 15px;
        font-size: 0.69rem;
        letter-spacing: 0.04em;
    }

    body.is-public-mode .viewer-footer {
        left: 10px;
        right: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        width: auto;
        justify-items: center;
        pointer-events: none;
    }

    body.is-public-mode .viewer-footer > * {
        pointer-events: auto;
    }

    body.is-public-mode .controls-bar {
        max-width: calc(100vw - 142px);
        gap: 6px;
        padding: 7px 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.is-public-mode .controls-bar::-webkit-scrollbar {
        display: none;
    }

    body.is-public-mode .control-btn {
        min-width: 46px;
        min-height: 36px;
        padding: 0 12px;
    }

    body.is-public-mode #scene-home-btn,
    body.is-public-mode #scene-auto-btn {
        min-width: 76px;
    }

    body.is-public-mode .scene-chip {
        left: 14px;
        right: auto;
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
        width: auto;
    }

    body.is-public-mode .scene-sheet {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 118px);
        width: auto;
        max-height: 42dvh;
        overflow: auto;
    }

    body.is-public-mode .ai-guide-widget {
        right: 16px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);
        z-index: 22;
        flex-direction: row;      /* burbuja a la izquierda, controles a la derecha */
        align-items: flex-end;
    }

    /* Burbuja de texto: a un costado del micrófono, no encima */
    body.is-public-mode .ai-guide-bubble {
        max-width: calc(100vw - 110px); /* espacio para controles (~80px) + gap + margen */
        font-size: 11.5px;
        padding: 8px 11px;
        max-height: 68px;
    }

    /* Status row no encaja en layout horizontal → ocultar en mobile */
    body.is-public-mode .ai-guide-status {
        display: none;
    }

    body.is-public-mode .ai-guide-controls {
        flex-direction: column-reverse;
        gap: 7px;
    }

    body.is-public-mode .ai-mic-btn {
        width: 54px;
        height: 54px;
    }

    body.is-public-mode .ai-icon-btn {
        width: 42px;
        height: 42px;
    }

    .filmstrip-panel__body {
        grid-template-columns: 1fr;
    }

    .filmstrip-nav {
        display: none;
    }

    .editor-grid {
        grid-template-columns: 1fr;
    }

    .addon-icon-layout,
    .addon-toolbar__actions {
        grid-template-columns: 1fr;
    }

    .studio-toolbar {
        align-items: stretch;
    }

    .studio-toolbar__actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* ── Gallery Editor Overlay ─────────────────────────────────── */

@media (max-width: 820px) {
    body.is-public-mode #vr-btn,
    body.is-public-mode #fullscreen-btn {
        display: none;
    }

    body.is-public-mode .wordmark {
        width: min(50vw, 246px);
    }

    body.is-public-mode .wordmark__logo {
        width: 76px !important;
        height: 76px !important;
    }

    body.is-public-mode .wordmark__title {
        font-size: 1.48rem !important;
        letter-spacing: 0.24em !important;
    }

    body.is-public-mode .wordmark__subtitle {
        font-size: 0.7rem !important;
        max-width: 230px;
    }

    body.is-public-mode .whatsapp-contact {
        top: calc(env(safe-area-inset-top, 0px) + 98px);
        right: 14px;
        max-width: 188px;
    }

    body.is-public-mode .tool-rail {
        top: calc(env(safe-area-inset-top, 0px) + 158px);
        left: 14px;
        right: 14px;
    }

    body.is-public-mode .tool-btn {
        min-height: 34px;
        padding: 0 14px;
        font-size: 0.66rem;
    }
}

.filmstrip-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}
.filmstrip-edit-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.32);
}

.gallery-editor {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: #0e0e11;
    overflow: hidden;
}

.gallery-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
}

.gallery-editor__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gallery-editor__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text, #f4efe5);
    letter-spacing: 0.01em;
}

.gallery-editor__hint {
    font-size: 0.75rem;
    color: rgba(244,239,229,0.45);
}

.gallery-editor__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease, opacity 130ms ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.gallery-editor__btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.22);
    color: var(--text, #f4efe5);
}
.gallery-editor__btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.38);
}

.gallery-editor__btn--primary {
    background: #7c6ef7;
    border-color: transparent;
    color: #fff;
}
.gallery-editor__btn--primary:hover:not(:disabled) {
    background: #6a5ce6;
}
.gallery-editor__btn--primary:disabled {
    opacity: 0.55;
    cursor: default;
}

.gallery-editor__body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}

.gallery-editor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.gallery-card {
    position: relative;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: grab;
    transition: border-color 130ms ease, opacity 130ms ease, box-shadow 130ms ease;
    user-select: none;
}
.gallery-card:active {
    cursor: grabbing;
}

.gallery-card__handle {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 5px;
    border-radius: 5px;
    background: rgba(0,0,0,0.55);
    cursor: grab;
    pointer-events: none; /* visual only, card handles the drag */
}
.gallery-card__handle span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255,255,255,0.75);
}

.gallery-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    pointer-events: none;
    background: rgba(255,255,255,0.06); /* placeholder while thumbnail loads */
}

.gallery-card__info {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    pointer-events: none; /* let drag pass through except for the input */
}

.gallery-card__num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(124,110,247,0.75);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gallery-card__title-input {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    color: var(--text, #f4efe5);
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
    padding: 1px 2px;
    border-radius: 3px;
    transition: border-color 120ms ease, background 120ms ease;
    cursor: text;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto; /* must be interactive */
}
.gallery-card__title-input:hover {
    border-bottom-color: rgba(255,255,255,0.25);
}
.gallery-card__title-input:focus {
    background: rgba(255,255,255,0.08);
    border-bottom-color: #7c6ef7;
}

.gallery-card__remove {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220,50,50,0.75);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 130ms ease, background 130ms ease;
}
.gallery-card:hover .gallery-card__remove {
    opacity: 1;
}
.gallery-card__remove:hover {
    background: rgba(220,50,50,1);
}

.gallery-card.is-dragging {
    opacity: 0.35;
    box-shadow: none;
}

.gallery-card.is-drop-target {
    border-color: #7c6ef7;
    box-shadow: 0 0 0 1px #7c6ef7 inset;
}

@media (max-width: 600px) {
    .gallery-editor__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .gallery-editor__body {
        padding: 16px;
    }
    .gallery-editor__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}

/* ─── LANDING SCREEN ─────────────────────────────────────────── */

.landing-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    overflow: hidden;
    background: var(--bg);
}

/* background layers */
.landing-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.landing-bg__glow {
    position: absolute;
    border-radius: 50%;
    opacity: 1;
}

.landing-bg__glow--warm {
    width: 70vw;
    height: 80vh;
    left: -12vw;
    bottom: -16vh;
    background: radial-gradient(ellipse at center, rgba(208, 173, 115, 0.13) 0%, rgba(180, 130, 60, 0.07) 45%, transparent 72%);
    filter: blur(80px);
}

.landing-bg__glow--cool {
    width: 44vw;
    height: 52vh;
    right: 0;
    top: -4vh;
    background: radial-gradient(ellipse at center, rgba(160, 130, 90, 0.07) 0%, transparent 68%);
    filter: blur(60px);
}

.landing-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 235, 180, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 235, 180, 0.022) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 72%);
}

/* main content */
.landing-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 36px;
    max-width: 780px;
    width: 100%;
}

.landing-kicker {
    margin: 0 0 36px;
    font-family: var(--font-ui);
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.88;
}

.landing-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(6.5rem, 18vw, 14rem);
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: 0.04em;
    color: var(--text);
    user-select: none;
}

/* ornamental rule */
.landing-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 220px;
    margin: 40px auto 38px;
}

.landing-rule__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(208, 173, 115, 0.5), transparent);
}

.landing-rule__diamond {
    font-size: 0.55rem;
    color: var(--accent);
    opacity: 0.55;
    letter-spacing: 0;
    line-height: 1;
}

.landing-tagline {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(244, 239, 229, 0.76);
}

.landing-description {
    margin: 0 0 52px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    line-height: 1.9;
    color: rgba(244, 239, 229, 0.38);
}

/* CTA button */
.landing-enter-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 44px;
    border-radius: 999px;
    border: 1px solid rgba(208, 173, 115, 0.36);
    background: rgba(208, 173, 115, 0.04);
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 320ms ease, background 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}

.landing-enter-btn:hover,
.landing-enter-btn:focus-visible {
    border-color: rgba(208, 173, 115, 0.68);
    background: rgba(208, 173, 115, 0.10);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(208, 173, 115, 0.14);
    outline: none;
}

.landing-enter-icon {
    transition: transform 320ms ease;
    flex-shrink: 0;
}

.landing-enter-btn:hover .landing-enter-icon,
.landing-enter-btn:focus-visible .landing-enter-icon {
    transform: translateX(5px);
}

/* footer meta */
.landing-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px 32px;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(244, 239, 229, 0.2);
    justify-self: center;
}

.landing-footer__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(208, 173, 115, 0.32);
    flex-shrink: 0;
}

/* ─── LANDING ANIMATIONS ─────────────────────────────────────── */

@keyframes landing-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes landing-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.landing-screen:not([hidden]) .landing-kicker {
    animation: landing-rise 0.7s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-title {
    animation: landing-rise 0.9s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-rule {
    animation: landing-rise 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-tagline {
    animation: landing-rise 0.8s 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-description {
    animation: landing-rise 0.8s 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-enter-btn {
    animation: landing-rise 0.8s 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-footer {
    animation: landing-rise 0.8s 0.64s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen:not([hidden]) .landing-bg__glow--warm {
    animation: landing-rise 1.4s 0s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-screen.is-leaving {
    animation: landing-out 0.52s cubic-bezier(0.4, 0, 0.8, 1) forwards;
    pointer-events: none;
}

@media (max-width: 480px) {
    .whatsapp-contact {
        top: calc(env(safe-area-inset-top, 0px) + 78px);
        right: 10px;
        bottom: auto;
        max-width: 156px;
        min-height: 38px;
        padding: 0 12px 0 10px;
        font-size: 0.68rem;
    }

    .whatsapp-contact__icon {
        width: 22px;
        height: 22px;
    }

    .landing-title {
        font-size: clamp(5.5rem, 22vw, 8rem);
    }

    .landing-description {
        display: none;
    }

    .landing-rule {
        max-width: 160px;
        margin: 30px auto 28px;
    }
}

/* ── Viewer móvil (≤ 480px) ──────────────────────────────────── */
@media (max-width: 480px) {
    /* Wordmark: título más pequeño, ocultar subtítulo */
    .wordmark__title {
        font-size: 1.1rem;
        line-height: 1;
    }
    .wordmark__logo {
        width: 78px;
        height: 78px;
    }
    .wordmark__subtitle {
        display: inline-flex;
        max-width: 190px;
        padding: 6px 9px;
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }
    .wordmark__kicker {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
    }

    /* Tool-rail: botones más compactos, menos gap */
    .tool-rail {
        gap: 6px;
    }

    /* ─ PUBLIC MODE: logo compacto para evitar solapamiento con tool-rail ─ */
    /* Logo reducido de 76px a 60px: ahorra ~16px de altura vertical */
    body.is-public-mode .wordmark__logo {
        width: 60px !important;
        height: 60px !important;
    }
    /* Título proporcional al logo más pequeño */
    body.is-public-mode .wordmark__title {
        font-size: 1.2rem !important;
        letter-spacing: 0.2em !important;
        line-height: 1;
    }
    /* Subtítulo: una sola línea con ellipsis — evita que nombres largos
       ("RESIDENCIALES DE LUJO") rompan en 2 líneas y empujen el tool-rail */
    body.is-public-mode .wordmark__subtitle {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 185px !important;
    }
    /* WhatsApp alineado con el nuevo tamaño del logo */
    body.is-public-mode .whatsapp-contact {
        top: calc(env(safe-area-inset-top, 0px) + 72px);
        right: 10px;
        max-width: 150px;
    }

    body.is-public-mode .tool-rail {
        /* Con logo 60px: 18 + 60 + gap(2) + título(19) + gap(2) + subtítulo(21) ≈ 122px
           Tool-rail en 128px → 6px de separación limpia en cualquier iPhone */
        top: calc(env(safe-area-inset-top, 0px) + 128px);
        left: 10px;
        right: 10px;
        gap: 6px;
    }

    .tool-btn {
        min-width: 44px;
        min-height: 30px;
        padding: 0 9px;
        font-size: 0.64rem;
        letter-spacing: 0.04em;
    }

    body.is-public-mode .tool-btn {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 34px;
        padding: 0 10px;
        white-space: nowrap;
    }

    /* VR y Fullscreen no son útiles en móvil */
    #vr-btn,
    #fullscreen-btn {
        display: none;
    }

    /* Controls-bar: botones y barra más compactos */
    .controls-bar {
        gap: 4px;
        padding: 5px 10px;
    }

    body.is-public-mode .viewer-footer {
        left: 8px;
        right: 8px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    }

    body.is-public-mode .controls-bar {
        max-width: 100%;
        gap: 5px;
        padding: 5px 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.is-public-mode .controls-bar::-webkit-scrollbar {
        display: none;
    }

    .control-btn {
        min-width: 34px;
        min-height: 30px;
        padding: 0 7px;
        font-size: 0.8rem;
    }

    body.is-public-mode .control-btn {
        flex: 0 0 auto;
        min-width: 36px;
        min-height: 34px;
        padding: 0 8px;
    }

    body.is-public-mode #scene-home-btn,
    body.is-public-mode #scene-auto-btn {
        min-width: 48px;
    }

    /* Scene chip más pequeño */
    .scene-chip {
        padding: 4px 12px;
        font-size: 0.72rem;
    }

    body.is-public-mode .scene-chip {
        left: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
    }

    body.is-public-mode .scene-sheet {
        left: 10px;
        right: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
    }

    /* Bubble más ancho en móvil: caben más palabras por línea → menos líneas
       y el viewport se tapa menos */
    .ai-guide-bubble {
        max-width: min(320px, calc(100vw - 80px));
        font-size: 12.5px;
    }
}

/* ─── VIDEO OVERLAY ──────────────────────────────────────────── */

/* In viewer mode: disable browser touch defaults on the entire panorama + hotspot layer so pannellum
   and our JS touch forwarder take full control. touch-action is NOT inherited, so we target * too. */
body.is-public-mode #panorama,
body.is-public-mode #panorama *,
body.is-public-mode #hotspot-layer,
body.is-public-mode #hotspot-layer *,
body.is-public-mode .equirect-video-layer {
    touch-action: none;
}

/* Video floats must not intercept events — let them fall through to pannellum canvas */
body.is-public-mode .hs-video-float {
    pointer-events: none;
}

.hs-video-float {
    position: absolute;
    top: 0;
    left: 0;
    isolation: isolate;
    overflow: hidden;
    border-radius: 2px;
    transform-origin: center center;
    pointer-events: auto;
    will-change: transform;
}

/* ─── DRAG 360 HINT ──────────────────────────────────────────────────────── */

@keyframes drag360-fadein {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes drag360-fadeout {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.88);
    }
}

@keyframes drag360-left {
    0%, 100% { transform: translateX(0);   opacity: 1; }
    50%       { transform: translateX(-9px); opacity: 0.45; }
}

@keyframes drag360-right {
    0%, 100% { transform: translateX(0);  opacity: 1; }
    50%       { transform: translateX(9px); opacity: 0.45; }
}

.drag360-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 26px;
    background: rgba(7, 6, 5, 0.52);
    border: 1px solid rgba(208, 173, 115, 0.22);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    z-index: 18;
    animation: drag360-fadein 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

.drag360-hint.is-hiding {
    animation: drag360-fadeout 0.35s cubic-bezier(0.55, 0, 0.78, 0) forwards;
}

.drag360-hint__side {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.drag360-hint__side svg {
    width: 26px;
    height: 26px;
    color: var(--accent);
    filter: drop-shadow(0 0 7px rgba(208, 173, 115, 0.55));
}

.drag360-hint__side--left svg {
    animation: drag360-left 1.15s ease-in-out infinite;
}

.drag360-hint__side--right svg {
    animation: drag360-right 1.15s ease-in-out infinite;
}

.drag360-hint__label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 239, 229, 0.65);
    white-space: nowrap;
    user-select: none;
}

/* Ocultar en modo editor para no distraer */
body.is-editor-mode .drag360-hint {
    display: none !important;
}

.hs-video-float video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-video-float canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: destination-out;
    pointer-events: none;
}

.hs-video-float.brush-active canvas {
    pointer-events: all;
    cursor: crosshair;
}

.hs-video-float.sphere-mode {
    outline: 1px dashed rgba(98, 219, 255, 0.35);
}

/* Resize handles — anchored inside .hs-video-float */
.hs-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(98, 219, 255, 0.8);
    border: 1px solid rgba(98, 219, 255, 0.95);
    border-radius: 2px;
    display: none;
    z-index: 30;
    transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: nwse-resize;
}

.hs-video-float.is-selected .hs-resize-handle {
    display: block;
}

.hs-resize-handle--nw { top: 0;    left: 0;    cursor: nw-resize; }
.hs-resize-handle--n  { top: 0;    left: 50%;  cursor: n-resize; }
.hs-resize-handle--ne { top: 0;    left: 100%; cursor: ne-resize; }
.hs-resize-handle--e  { top: 50%;  left: 100%; cursor: e-resize; }
.hs-resize-handle--se { top: 100%; left: 100%; cursor: se-resize; }
.hs-resize-handle--s  { top: 100%; left: 50%;  cursor: s-resize; }
.hs-resize-handle--sw { top: 100%; left: 0;    cursor: sw-resize; }
.hs-resize-handle--w  { top: 50%;  left: 0;    cursor: w-resize; }

/* Hide non-video addon sections when video addon is selected */
.is-video-type .addon-section--non-video { display: none !important; }

/* ─── AVATAR SECTION ─────────────────────────────────────── */

.avatar-slot {
    border: 1px solid rgba(255, 240, 214, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
}

.avatar-slot__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar-slot__role-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    flex-shrink: 0;
    min-width: 62px;
}

.avatar-slot__src-status {
    font-size: 0.72rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ─── VIDEO ADDON LIST ────────────────────────────────────── */

.video-addon-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 10px 0;
}

.video-addon-list:empty { display: none; }

.video-addon-list__header {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 2px 5px;
}

.video-addon-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 7px;
    border: 1px solid rgba(255, 240, 214, 0.07);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    font-size: 0.74rem;
    transition: background 0.12s, border-color 0.12s, opacity 0.15s;
    user-select: none;
}

.video-addon-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 240, 214, 0.13);
}

.video-addon-item.is-active {
    border-color: rgba(208, 173, 115, 0.35);
    background: rgba(208, 173, 115, 0.08);
}

.video-addon-item.is-hidden {
    opacity: 0.35;
}

/* ojo y editar */
.vai-vis,
.vai-edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    opacity: 0.55;
    transition: opacity 0.12s, color 0.12s;
}

.vai-vis svg,
.vai-edit svg {
    width: 13px;
    height: 13px;
}

.vai-vis:hover,
.vai-edit:hover {
    opacity: 1;
    color: #d0ad73;
}

.vai-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.vai-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(208, 173, 115, 0.4);
    border-radius: 4px;
    color: inherit;
    font-size: 0.74rem;
    padding: 2px 6px;
    outline: none;
    min-width: 0;
}

/* ─── SCENE VIDEO TYPE UI ────────────────────────────────────── */

.radio-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ── ROTATION HANDLE ─────────────────────────────────────────── */

.hs-rotate-handle {
    position: absolute;
    left: 50%;
    top: -38px;
    width: 14px;
    height: 14px;
    background: rgba(98, 219, 255, 0.85);
    border: 1.5px solid rgba(98, 219, 255, 0.95);
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: grab;
    display: none;
    z-index: 21;
    pointer-events: all;
}

.hs-rotate-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 26px;
    background: rgba(98, 219, 255, 0.5);
    transform: translateX(-50%);
}

.hs-rotate-handle:active {
    cursor: grabbing;
}

.tour-hotspot--selected .hs-rotate-handle {
    display: block;
}

/* ── EDITOR SUBSECTION ───────────────────────────────────────── */

.editor-subsection {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 240, 214, 0.08);
    background: rgba(255, 255, 255, 0.025);
    display: grid;
    gap: 8px;
}


/* ── AI GUIDE WIDGET ─────────────────────────────────────────── */

.ai-guide-widget {
    position: absolute;
    bottom: 32px;
    right: 24px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.ai-guide-widget > * { pointer-events: auto; }

.ai-guide-bubble {
    max-width: 280px;
    /* Altura fija: muestra ~3.5 líneas. El texto antiguo desaparece arriba
       y el último contenido siempre queda visible (auto-scroll en JS). */
    max-height: 76px;
    overflow-y: scroll;
    scrollbar-width: none;           /* Firefox */
    position: relative;
    background: rgba(10, 8, 6, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 240, 214, 0.12);
    border-radius: 14px;
    padding: 9px 13px;
    color: rgba(255, 240, 214, 0.92);
    font-size: 12px;
    line-height: 1.5;
    animation: ai-bubble-in 0.2s ease;
}

/* Ocultar scrollbar en Chrome / Safari / iOS */
.ai-guide-bubble::-webkit-scrollbar { display: none; }

/* Fade en la parte superior: indica que hay texto anterior oculto */
.ai-guide-bubble::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    height: 22px;
    margin: -12px -16px 4px;          /* compensa el padding del bubble */
    background: linear-gradient(
        to bottom,
        rgba(10, 8, 6, 0.62) 0%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 14px 14px 0 0;
}

/* El fade aparece solo cuando hay contenido scrolleado arriba */
.ai-guide-bubble.is-scrolled::before { opacity: 1; }

.ai-guide-status {
    font-size: 11px;
    color: rgba(255, 240, 214, 0.5);
    letter-spacing: 0.03em;
    text-align: right;
    padding-right: 4px;
}

.ai-guide-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-mic-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 240, 214, 0.18);
    background: rgba(10, 8, 6, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 240, 214, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, transform 0.15s, border-color 0.18s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.ai-mic-btn:hover { background: rgba(26,22,18,0.9); border-color: rgba(255,240,214,0.35); transform: scale(1.05); }
.ai-mic-btn.is-listening { background: rgba(220,40,40,0.85); border-color: rgba(255,90,90,0.6); animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-mic-btn.is-thinking  { background: rgba(20,18,14,0.88); border-color: rgba(255,200,100,0.4); color: rgba(255,200,100,0.9); }
.ai-mic-btn.is-speaking  { background: rgba(20,60,30,0.88); border-color: rgba(100,220,120,0.5); color: rgba(140,230,150,0.95); animation: ai-pulse-green 1.4s ease-in-out infinite; }
.ai-mic-btn.has-pending-response { border-color: rgba(255,200,80,0.9); box-shadow: 0 0 0 3px rgba(255,200,80,0.35), 0 0 14px rgba(255,200,80,0.25); animation: ai-pulse 0.9s ease-in-out infinite; }
.ai-mic-btn.has-pending-response::after { content:"🔊"; position:absolute; top:-6px; right:-6px; font-size:13px; background:#c7a04f; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }

.ai-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,240,214,0.14);
    background: rgba(10,8,6,0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: rgba(255,240,214,0.7); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ai-icon-btn:hover { background: rgba(26,22,18,0.9); color: rgba(255,240,214,0.95); }

.ai-text-input-row { display: flex; align-items: center; gap: 6px; width: 260px; }

.ai-text-input {
    flex: 1; height: 38px;
    background: rgba(10,8,6,0.85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,240,214,0.18); border-radius: 19px;
    padding: 0 14px; color: rgba(255,240,214,0.92); font-size: 13px; outline: none;
}
.ai-text-input::placeholder { color: rgba(255,240,214,0.35); }
.ai-text-input:focus { border-color: rgba(255,240,214,0.35); }

.ai-send-btn {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(255,240,214,0.15); color: rgba(255,240,214,0.9);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.ai-send-btn:hover { background: rgba(255,240,214,0.25); }

@keyframes ai-bubble-in { from { opacity:0; transform:translateY(6px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes ai-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,40,40,0.5); } 50% { box-shadow: 0 0 0 10px rgba(220,40,40,0); } }
@keyframes ai-pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(100,220,120,0.4); } 50% { box-shadow: 0 0 0 8px rgba(100,220,120,0); } }
@keyframes ai-pulse-voice { 0%,100% { box-shadow: 0 0 0 0 rgba(255,80,80,0.85), 0 0 18px rgba(255,60,60,0.4); transform: scale(1.13); } 50% { box-shadow: 0 0 0 16px rgba(255,80,80,0), 0 0 0 rgba(255,60,60,0); transform: scale(1.18); } }
/* Voice-active: button grows and pulses more aggressively while detecting voice */
.ai-mic-btn.is-listening.is-voice-active { animation: ai-pulse-voice 0.38s ease-in-out infinite !important; transition: transform 0.08s ease; }