/* Tarjeta giratoria (IFC).
   Misma estructura de cajas y mismos tiempos que el efecto «Flip Horizontal» del
   Animated Box de JetElements al que reemplaza: el diseño tiene que quedar idéntico.
   Los valores de diseño (alto, colores, relleno, bordes, radio, tipografías) los pone
   el widget desde sus controles; aquí va solo la mecánica. */

/* Todo el contenido de la tarjeta es absoluto, así que el widget no tiene ancho propio: en
   un contenedor en fila colapsaría a cero. La misma regla que Elementor le da a su video
   y a su divisor: ocupa el ancho del contenedor, o el que se le fije en «Avanzado». */
.e-con > .elementor-widget-ifc-tarjeta-giratoria,
.e-con > .e-con-inner > .elementor-widget-ifc-tarjeta-giratoria {
    width: var(--container-widget-width, 100%);
    --flex-grow: var(--container-widget-flex-grow);
}

.ifc-flip {
    position: relative;
    height: 178px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.ifc-flip__side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all var(--ifc-flip-duracion, .7s) cubic-bezier(.11, .6, .24, .89);
}

.ifc-flip__side--front { z-index: 2; transform: rotateY(0deg); }
.ifc-flip__side--back  { z-index: 1; transform: rotateY(-180deg); }
.ifc-flip.is-flipped .ifc-flip__side--front { transform: rotateY(180deg); }
.ifc-flip.is-flipped .ifc-flip__side--back  { transform: rotateY(0deg); }

.ifc-flip--vertical .ifc-flip__side--front { transform: rotateX(0deg); }
.ifc-flip--vertical .ifc-flip__side--back  { transform: rotateX(-180deg); }
.ifc-flip--vertical.is-flipped .ifc-flip__side--front { transform: rotateX(180deg); }
.ifc-flip--vertical.is-flipped .ifc-flip__side--back  { transform: rotateX(0deg); }

.ifc-flip__inner {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    min-width: 100%;
    z-index: 2;
}

.ifc-flip__content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
}

.ifc-flip__title,
.ifc-flip__text {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    text-align: var(--ifc-flip-ta, center);
}

.ifc-flip__title { align-self: var(--ifc-flip-as, center); }

/* En el editor se gira con un clic, para poder editar el reverso. */
.elementor-editor-active .ifc-flip { cursor: pointer; }