:root {
    --lp-bg-color: transparent;
    
    /* Fallback colors */
    --lp-def-border: #96FBC4;
    --lp-def-top: #F9F586;
    --lp-def-bottom: #051f1d;
    --lp-def-sides: #eae4e0;
}

/* --- CONTENEDOR PRINCIPAL (Flexbox para centrar) --- */
.lp-cubes-container {
    position: relative;
    width: 100%;
    /* Altura mínima para asegurar que se vea en el editor */
    min-height: max(fit-content, 30px) !important; 
    display: flex; /* Usamos Flexbox en lugar de absolute */
    justify-content: center;
    align-items: center;
    background: var(--lp-bg-color);
    overflow: visible !important; /* Importante para que no se corten las puntas */
}

/* --- WRAPPER INTERNO (Ya no es absolute) --- */
.lp-bg {
    position: relative; /* Cambiado de absolute a relative */
    /* Quitamos top/left/transform translate porque flexbox ya lo centra */
    transform: scale(1.2); 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    z-index: 1;
}

/* El resto de la estructura se mantiene igual, pero protegemos las dimensiones */
.lp-cubes-row {
    position: relative;
    display: flex;
    gap: 90px;
    transform: scale(0.3);
    flex-shrink: 0; /* Evita que se aplasten */
}

.lp-cubes-wrap {
    perspective: 17000px;
    perspective-origin: 50% -12000px;
    transform: scale(0.706);
    width: 200px !important;
    height: 200px !important;
    flex-shrink: 0;
}

.lp-cubes-wrap:hover { cursor: pointer; }

.lp-cube {
    position: relative;
    width: 200px !important;
    height: 200px !important;
    transform-style: preserve-3d;
    transform: rotateY(45deg);
}

.lp-cube div {
    position: absolute;
    width: 200px !important;
    height: 200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.3s all ease;
    z-index: 1;
    box-sizing: border-box;
}

/* Hover Background */
.lp-cube:not(.lp-no-hover).lp-hover div {
    background: var(--lp-var-border, var(--lp-def-border)) !important;
}

/* --- POSICIONES 3D --- */
.lp-back { transform: translateZ(-100px) rotateY(180deg) translateY(150px); }
.lp-front { transform: translateZ(100px) translateY(150px); }
.lp-right { transform: rotateY(-270deg) translateX(100px) translateY(150px); transform-origin: top right; }
.lp-left { transform: rotateY(270deg) translateX(-100px) translateY(150px); transform-origin: center left; }

/* Alturas (Cerrado) */
div.lp-right, div.lp-left, div.lp-back, div.lp-front { height: 0px !important; }

/* Alturas (Abierto - Normal) */
.lp-cube:not(.lp-no-hover).lp-hover div.lp-right,
.lp-cube:not(.lp-no-hover).lp-hover div.lp-left,
.lp-cube:not(.lp-no-hover).lp-hover div.lp-back,
.lp-cube:not(.lp-no-hover).lp-hover div.lp-front { height: 100px !important; }

/* Alturas (Abierto - Pequeño) */
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover div.lp-right,
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover div.lp-left,
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover div.lp-back,
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover div.lp-front { height: 50px !important; }

/* Posiciones (Abierto - Normal) */
.lp-cube:not(.lp-no-hover).lp-hover .lp-front { transform: translateZ(100px) translateY(0px); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-back { transform: translateZ(-100px) rotateY(180deg) translateY(0px); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-left { transform: rotateY(270deg) translateX(-100px) translateY(0px); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-right { transform: rotateY(-270deg) translateX(100px) translateY(0px); }

/* Posiciones (Abierto - Pequeño) */
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover .lp-front { transform: translateZ(100px) translateY(50px); }
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover .lp-back { transform: translateZ(-100px) rotateY(180deg) translateY(50px); }
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover .lp-left { transform: rotateY(270deg) translateX(-100px) translateY(50px); }
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover .lp-right { transform: rotateY(-270deg) translateX(100px) translateY(50px); }


/* --- TAPA SUPERIOR (TOP) --- */
.lp-top {
    transform: rotateX(-90deg) translateY(-100px) translateZ(150px);
    transform-origin: top center;
    z-index: 5 !important;
}

.lp-cube:not(.lp-no-hover).lp-hover .lp-top {
    background: var(--lp-var-top, var(--lp-def-top)) !important;
    transform: rotateX(-90deg) translateY(-100px) translateZ(0px);
}
.lp-cube.lp-type-small:not(.lp-no-hover).lp-hover .lp-top {
    background: var(--lp-var-top, var(--lp-def-top)) !important;
    transform: rotateX(-90deg) translateY(-100px) translateZ(50px);
}

/* Iconos */
.lp-top .lp-icon {
    transform: rotateX(180deg);
    pointer-events: none;
    width: 100% !important; height: 100% !important;
    display: flex !important; justify-content: center; align-items: center;
}
.lp-top .lp-icon svg, .lp-top .lp-icon img {
    width: var(--icon-size, 9rem) !important;
    height: var(--icon-size, 9rem) !important;
    object-fit: contain !important;
    stroke: var(--stroke, inherit);
    display: block;
}

/* --- BOTTOM --- */
.lp-bottom {
    transform: rotateX(90deg) translateY(100px) translateZ(48px) scale(1);
    transform-origin: bottom center;
    z-index: 5 !important;
    background: var(--lp-def-sides);
}
.lp-no-hover .lp-bottom { background: transparent; }
.lp-cube:not(.lp-no-hover).lp-hover .lp-bottom {
    transform: rotateX(90deg) translateY(150px) translateZ(100px) scale(1.5);
    background: var(--lp-var-bottom, var(--lp-def-bottom)) !important;
}

/* --- BORDES (SPANS) --- */
.lp-cube div span {
    position: absolute; width: 100%; height: 100%; display: flex; overflow: hidden; pointer-events: none;
}
/* Base */
.lp-cube .lp-top span::before, .lp-cube .lp-top span::after,
.lp-cube .lp-front span::before, .lp-cube .lp-front span::after,
.lp-cube .lp-left span::before, .lp-cube .lp-left span::after {
    background: var(--lp-var-border, var(--lp-def-border));
    opacity: 0.5;
}
/* Active */
.lp-cube:not(.lp-no-hover).lp-hover .lp-top span::before, .lp-cube:not(.lp-no-hover).lp-hover .lp-top span::after,
.lp-cube:not(.lp-no-hover).lp-hover .lp-front span::before, .lp-cube:not(.lp-no-hover).lp-hover .lp-front span::after,
.lp-cube:not(.lp-no-hover).lp-hover .lp-left span::before, .lp-cube:not(.lp-no-hover).lp-hover .lp-left span::after {
    background: var(--lp-var-border, var(--lp-def-border));
    opacity: 1;
}

/* Transiciones */
.lp-cube .lp-top span::before, .lp-cube .lp-top span::after { transition: 0.7s cubic-bezier(0.8, 0.7, 0.3, 0.2); }
.lp-cube .lp-front span::before, .lp-cube .lp-front span::after, .lp-cube .lp-left span::before, .lp-cube .lp-left span::after { transition: 0.7s cubic-bezier(0.2, 0.3, 0.7, 0.8); }

/* Geometría Bordes (Intacta) */
.lp-top .lp-primero::before { position: absolute; content: ''; top: 0; left: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-primero::before { width: 200px; height: 18px; transform: scale(1); }
.lp-top .lp-primero::after { position: absolute; content: ''; top: 0; left: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-primero::after { width: 18px; height: 200px; transform: scale(1); }

.lp-top .lp-segundo::before { position: absolute; content: ''; bottom: 0; right: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-segundo::before { width: 200px; height: 18px; transform: scale(1); }
.lp-top .lp-segundo::after { position: absolute; content: ''; bottom: 0; left: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-segundo::after { width: 200px; height: 18px; transform: scale(1); }

.lp-top .lp-tercero::before { position: absolute; content: ''; top: 0; right: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-tercero::before { width: 18px; height: 200px; transform: scale(1); }
.lp-top .lp-tercero::after { position: absolute; content: ''; bottom: 0; left: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-tercero::after { width: 18px; height: 200px; transform: scale(1); }

.lp-top .lp-cuarto::before { position: absolute; content: ''; top: 0; right: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-cuarto::before { width: 200px; height: 18px; transform: scale(1); }
.lp-top .lp-cuarto::after { position: absolute; content: ''; bottom: 0; right: 0; width: 30px; height: 30px; background: var(--lp-var-border, var(--lp-def-border)); transform: scale(0.5); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-top .lp-cuarto::after { width: 18px; height: 200px; transform: scale(1); }

.lp-front .lp-primero::before { position: absolute; content: ''; top: 0; right: 0; width: 18px; height: 0px; background: var(--lp-var-border, var(--lp-def-border)); transform: translateY(-200%); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-front .lp-primero::before { width: 18px; height: 200px; transform: translateY(0px); }
.lp-front .lp-primero::after { position: absolute; content: ''; top: 0; left: 0; width: 18px; height: 0px; background: var(--lp-var-border, var(--lp-def-border)); transform: translateY(-200%); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-front .lp-primero::after { width: 18px; height: 200px; transform: translateY(0px); }

.lp-left .lp-primero::before { position: absolute; content: ''; top: 0; left: 0; width: 18px; height: 0px; background: var(--lp-var-border, var(--lp-def-border)); transform: translateY(-200%); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-left .lp-primero::before { width: 18px; height: 200px; transform: translateY(0px); }
.lp-left .lp-primero::after { position: absolute; content: ''; top: 0; right: 0; width: 18px; height: 0px; background: var(--lp-var-border, var(--lp-def-border)); transform: translateY(-200%); }
.lp-cube:not(.lp-no-hover).lp-hover .lp-left .lp-primero::after { width: 18px; height: 200px; transform: translateY(0px); }

/* Cursor */
#lp-cubez-cursor { width: 80px; height: 80px; position: fixed; pointer-events: none; z-index: 9999; }