/* ============================================================
   Triangle Hotspots — Beps PuroOmega Widgets
   Hover 100% CSS: grayscale + tooltip fade-in sin JS.
   ============================================================ */

/* === CONTENEDOR === */
.beps-th-container {
    position: relative;
    width: 100%;
    /* Alto PROPORCIONAL al ancho: las posiciones top:% de las piezas
       escalan igual que sus anchos, así la composición se mantiene
       idéntica en cualquier resolución y zoom (responsive real). */
    height: auto;
    aspect-ratio: 100 / 75;
    --beps-th-speed: 0.4s;
    /* Necesario para que los tooltips sobresalgan sin cortes */
    overflow: visible;
}

/* === PIEZA (fragmento de triángulo) === */
.beps-th-piece {
    position: absolute;
    overflow: visible; /* el tooltip puede sobresalir */
    cursor: pointer;
    transition: z-index 0s;
}

.beps-th-piece:hover {
    z-index: 10;
}

/* === IMAGEN — escala de grises por defecto === */
.beps-th-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    transition: filter var(--beps-th-speed) ease;
    /* Evita que la imagen rectangular cubra otras piezas */
    pointer-events: none;
}

/* Recupera color solo al hacer hover sobre su pieza */
.beps-th-piece:hover .beps-th-img {
    filter: grayscale(0%);
}

/* Para que el hover funcione en el área visible de la imagen PNG
   (área transparente no cuenta como hover por defecto en la mayoría de browsers).
   Si el PNG tiene transparencias, esto es correcto. */

/* === TOOLTIP === */
.beps-th-tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* alineación vertical — Elementor lo sobreescribe */
    text-align: left;            /* alineación horizontal — Elementor lo sobreescribe */
    background-color: rgba(255, 255, 255, 0.65);
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 18px 22px;
    min-width: 210px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0px 4px 20px 15px rgba(0, 0, 0, 0.02);
    /* Estado inicial: invisible + ligeramente desplazado */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition:
        opacity var(--beps-th-speed) ease,
        transform var(--beps-th-speed) ease;
    z-index: 20;
    white-space: normal;
    word-break: break-word;
}

/* Aparece al hacer hover en la pieza */
.beps-th-piece:hover .beps-th-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* === CONTENIDO DEL TOOLTIP === */
.beps-th-num {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    line-height: 1;
    margin-bottom: 6px;
}

.beps-th-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 6px;
}

.beps-th-desc {
    font-size: 13px;
    color: #555555;
    line-height: 1.55;
    margin: 0;
}

/* === OUTER WRAPPER === */
.beps-th-outer {
    position: relative;
    width: 100%;
    /* overflow: visible para que los tooltips no se corten */
    overflow: visible;
}

/* === RESPONSIVE ===
   En móvil el JS calcula transform:scale() proporcional y gestiona
   el tap para activar/desactivar cada pieza (misma lógica que :hover en desktop).
   ============================================================ */
@media (max-width: 767px) {
    .beps-th-container {
        overflow: visible !important;
    }

    /* Tap activa la pieza — JS añade .beps-th-active */
    .beps-th-piece.beps-th-active {
        z-index: 10;
    }

    .beps-th-piece.beps-th-active .beps-th-img {
        filter: grayscale(0%);
    }

    .beps-th-piece.beps-th-active .beps-th-tooltip {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}