.cm360 {
    --cm360-radius: 7cm;
    --cm360-center-size: 42%;
    --cm360-hover-scale: 1.02;
    --cm360-hover-lift: 5px;
    --cm360-hover-shadow: 18px;
    --cm360-glow-duration: 1100ms;
    --cm360-glow-strength: .72;
    --cm360-center-rotation: 360deg;
    --cm360-center-entry-duration: 1100ms;

    /* Borde cristal 3D */
    --cm360-border-shadow-w: 14px;
    --cm360-border-glass-w: 10.5px;
    --cm360-border-outer-w: 7.4px;
    --cm360-border-reflection-w: 5.6px;
    --cm360-border-inner-glass-w: 4.2px;
    --cm360-border-main-w: 2.3px;
    --cm360-border-highlight-w: 1px;
    --cm360-border-reflection-blur: 1.6px;
    --cm360-border-shadow-opacity: .10;
    --cm360-border-glass-opacity: .58;
    --cm360-border-reflection-opacity: .76;
    --cm360-border-inner-glass-opacity: .68;
    --cm360-border-highlight-opacity: .94;

    width: min(calc(var(--cm360-radius) * 2), 100%);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    position: relative;
}

.cm360-stage {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.cm360-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 2;
}

/* Resplandor REAL: capa visible sobre la composición + glow del conjunto. */
.cm360-glow-shell {
    position: absolute;
    inset: 1.8%;
    border-radius: 50%;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transform: scale(.985);
    border: 1px solid rgba(255,255,255,.01);
}

.cm360.is-glowing .cm360-glow-shell {
    animation: cm360-glow-shell var(--cm360-glow-duration) ease-out both;
}

.cm360.is-glowing .cm360-segments {
    animation: cm360-glow-segments var(--cm360-glow-duration) ease-out both;
}

@keyframes cm360-glow-shell {
    0% {
        opacity: 0;
        transform: scale(.985);
        box-shadow: 0 0 0 rgba(12,92,87,0), 0 0 0 rgba(228,111,0,0);
    }
    28% {
        opacity: calc(.75 * var(--cm360-glow-strength));
        transform: scale(1.008);
        box-shadow:
            0 0 18px rgba(12,92,87,.42),
            0 0 34px rgba(12,92,87,.24),
            0 0 46px rgba(228,111,0,.18),
            inset 0 0 22px rgba(255,255,255,.38);
    }
    65% {
        opacity: calc(.48 * var(--cm360-glow-strength));
        transform: scale(1.018);
        box-shadow:
            0 0 24px rgba(12,92,87,.28),
            0 0 42px rgba(228,111,0,.15),
            inset 0 0 18px rgba(255,255,255,.24);
    }
    100% {
        opacity: 0;
        transform: scale(1.028);
        box-shadow: 0 0 0 rgba(12,92,87,0), 0 0 0 rgba(228,111,0,0);
    }
}

@keyframes cm360-glow-segments {
    0%,100% { filter: none; }
    35% {
        filter:
            drop-shadow(0 0 5px rgba(12,92,87,.30))
            drop-shadow(0 0 9px rgba(228,111,0,.16));
    }
}

/* El link SVG ahora sí tiene un área clicable real. */
.cm360-segment-link {
    cursor: pointer;
    pointer-events: all;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2,.7,.2,1), filter .24s ease;
}

.cm360-segment-link:hover,
.cm360-segment-link:focus-visible {
    transform: translateY(calc(var(--cm360-hover-lift) * -1)) scale(var(--cm360-hover-scale));
    filter:
        drop-shadow(0 8px calc(var(--cm360-hover-shadow) * .55) rgba(0,0,0,.14))
        drop-shadow(0 15px var(--cm360-hover-shadow) rgba(0,0,0,.10));
    outline: none;
}

.cm360-piece-shadow,
.cm360-piece-glass,
.cm360-piece-rim,
.cm360-piece-reflection,
.cm360-piece-inner-glass,
.cm360-piece-main,
.cm360-piece-highlight {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

/* Sombra debajo del tubo */
.cm360-piece-shadow {
    stroke: rgba(0,0,0,var(--cm360-border-shadow-opacity));
    stroke-width: var(--cm360-border-shadow-w);
    filter: blur(.45px);
}

/* Halo translúcido: da grosor de cristal */
.cm360-piece-glass {
    stroke: var(--piece-reflection);
    stroke-width: var(--cm360-border-glass-w);
    opacity: var(--cm360-border-glass-opacity);
    filter:
        drop-shadow(0 0 1.4px rgba(255,255,255,.82))
        drop-shadow(0 1px 2px var(--piece-reflection));
}

/* Línea exterior oscura visible a ambos lados del “cristal” */
.cm360-piece-rim {
    stroke: var(--piece-border);
    stroke-width: var(--cm360-border-outer-w);
    opacity: .78;
}

/* Reflejo coloreado semi-transparente */
.cm360-piece-reflection {
    stroke: var(--piece-reflection);
    stroke-width: var(--cm360-border-reflection-w);
    opacity: var(--cm360-border-reflection-opacity);
    filter:
        drop-shadow(0 0 var(--cm360-border-reflection-blur) rgba(255,255,255,.82))
        drop-shadow(0 0 var(--cm360-border-reflection-blur) var(--piece-reflection));
}

/* Capa de cristal blanco interior */
.cm360-piece-inner-glass {
    stroke: rgba(255,255,255,var(--cm360-border-inner-glass-opacity));
    stroke-width: var(--cm360-border-inner-glass-w);
}

/* Esta capa pinta el gajo y ES la superficie que recibe mouse/click. */
.cm360-piece-main {
    fill: var(--piece-bg);
    fill-opacity: .94;
    stroke: var(--piece-border);
    stroke-width: var(--cm360-border-main-w);
    pointer-events: visiblePainted;
    cursor: pointer;
    transition: fill-opacity .22s ease, stroke-width .22s ease, filter .22s ease;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.035));
}

/* Brillo blanco finísimo, como reflejo de cristal */
.cm360-piece-highlight {
    stroke: rgba(255,255,255,var(--cm360-border-highlight-opacity));
    stroke-width: var(--cm360-border-highlight-w);
}

.cm360-segment-link:hover .cm360-piece-main,
.cm360-segment-link:focus-visible .cm360-piece-main {
    fill-opacity: 1;
    stroke-width: calc(var(--cm360-border-main-w) + .5px);
}
.cm360-segment-link:hover .cm360-piece-glass,
.cm360-segment-link:focus-visible .cm360-piece-glass {
    opacity: min(1, calc(var(--cm360-border-glass-opacity) + .18));
}
.cm360-segment-link:hover .cm360-piece-reflection,
.cm360-segment-link:focus-visible .cm360-piece-reflection {
    opacity: 1;
}

/* Posiciones específicas de 5 piezas */
.cm360[data-count="5"] .cm360-layer-1 { --base-x: 50%;   --base-y: 20.5%; }
.cm360[data-count="5"] .cm360-layer-2 { --base-x: 79.2%; --base-y: 42.5%; }
.cm360[data-count="5"] .cm360-layer-3 { --base-x: 68.5%; --base-y: 79.2%; }
.cm360[data-count="5"] .cm360-layer-4 { --base-x: 28.0%; --base-y: 79.2%; }
.cm360[data-count="5"] .cm360-layer-5 { --base-x: 18.5%; --base-y: 42.5%; }

.cm360[data-count="6"] .cm360-layer-1 { --base-x: 50%; --base-y: 19.5%; }
.cm360[data-count="6"] .cm360-layer-2 { --base-x: 77%; --base-y: 34%; }
.cm360[data-count="6"] .cm360-layer-3 { --base-x: 77%; --base-y: 66%; }
.cm360[data-count="6"] .cm360-layer-4 { --base-x: 50%; --base-y: 80.5%; }
.cm360[data-count="6"] .cm360-layer-5 { --base-x: 23%; --base-y: 66%; }
.cm360[data-count="6"] .cm360-layer-6 { --base-x: 23%; --base-y: 34%; }

.cm360-content {
    --offset-x: 0px;
    --offset-y: 0px;
    --content-gap: 6px;
    position: absolute;
    left: var(--base-x);
    top: var(--base-y);
    transform: translate(-50%,-50%) translate(var(--offset-x),var(--offset-y));
    width: 24%;
    height: 19%;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--content-gap);
    text-align: center;
    pointer-events: none;
}

.cm360-media {
    width: 100%;
    height: 68%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: inherit;
}

.cm360-media img,
.cm360-media svg,
.cm360-media i {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.cm360-mode-image img { width: auto; height: 100%; object-fit: contain; }

/* Iconos Elementor: currentColor real */
.cm360-mode-icon { color: inherit !important; }
.cm360-mode-icon i,
.cm360-mode-icon i::before { color: inherit !important; }
.cm360-mode-icon svg {
    width: auto;
    height: 100%;
    color: inherit !important;
}
.cm360-mode-icon svg * { color: inherit !important; }
.cm360-mode-icon svg path:not([fill="none"]),
.cm360-mode-icon svg circle:not([fill="none"]),
.cm360-mode-icon svg rect:not([fill="none"]),
.cm360-mode-icon svg polygon:not([fill="none"]),
.cm360-mode-icon svg ellipse:not([fill="none"]) { fill: currentColor !important; }
.cm360-mode-icon svg [fill="none"] { fill: none !important; }
.cm360-mode-icon svg [stroke],
.cm360-mode-icon svg [fill="none"] { stroke: currentColor !important; }
.cm360-mode-icon i { font-size: clamp(18px,6vw,86px); line-height: 1; }

/* Recolorea imágenes transparentes mediante su alfa. */
.cm360-mode-mask { position: relative; }
.cm360-colored-image {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.cm360-title {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.cm360-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--cm360-center-size);
    height: var(--cm360-center-size);
    transform: translate(-50%,-50%);
    transform-origin: center center;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.96);
    border: 2px solid;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 9px 18px rgba(0,0,0,.055),
        0 0 0 5px rgba(255,255,255,.88),
        inset 0 0 14px rgba(255,255,255,.92);
}
.cm360-center img {
    width: 96%;
    height: 96%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.cm360-center-enter {
    animation: cm360-center-in var(--cm360-center-entry-duration) cubic-bezier(.17,.78,.24,1) both;
}

@keyframes cm360-center-in {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) rotate(calc(var(--cm360-center-rotation) * -1)) scale(.68);
    }
    72% {
        opacity: 1;
        transform: translate(-50%,-50%) rotate(10deg) scale(1.035);
    }
    100% {
        opacity: 1;
        transform: translate(-50%,-50%) rotate(0deg) scale(1);
    }
}

@media (max-width: 767px) {
    .cm360-content { width: 26%; height: 21%; --content-gap: 3px; }
    .cm360-media { height: 64%; }
    .cm360-title { font-size: 9px; line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
    .cm360-segment-link,
    .cm360-glow-shell,
    .cm360-segments,
    .cm360-center-enter {
        animation: none !important;
        transition: none !important;
    }
}