/* CONTENEDOR GENERAL */
.flip-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* CADA CAJA */
.flip-box {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

/* INTERIOR QUE GIRA */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* CARA FRONTAL Y TRASERA */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

/* FRENTE */
.flip-box-front {
    background-color: #000;
}

/* REVERSO */
.flip-box-back {
    background-color: #1A1A1A;
    color: white;
    transform: rotateY(180deg);
    border-radius: 10px;

    /* 👇 Ajustás la altura del botón moviéndolo hacia arriba o abajo */
    padding-top: 28%;  /* antes tenías 28% — probá 22 o 25 */

    text-align: center;   /* asegura centrado horizontal */
}

/* VIDEO DE FONDO */
.backflip, .backflip2, .backflip3 {
    position: relative;
    width: 100%;
    height: 100%;
}

.backvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* TITULO SOBRE EL VIDEO */
.titbulletsmall {
    position: relative;
    z-index: 2;
    font-family: "DM Serif Text", serif;
    font-size: 45px;
    color: #FFF;
    font-weight: 400;
    text-align: center;
    padding-top: 25%;
    text-shadow: 0 0 8px rgba(255, 100, 180, 0.5);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .flip-container {
        flex-direction: column;
        gap: 10px;
    }
}
/* --- FIX ABSOLUTO DEL BOTÓN QUE PIERDE EL CURSOR --- */

/* La cara frontal NO debe captar clics cuando está rotada */
.flip-box-front {
    pointer-events: none;
}

/* La cara trasera (la del botón) siempre debe aceptar clics */
.flip-box-back {
    pointer-events: auto;
}