/* ==========================================================================
   Contenedores Principales y Estructura 3D (No tocar)
   ========================================================================== */

/* Contenedor principal adaptable */
.fc-card-container {
    background-color: transparent;
    perspective: 1000px;
    width: 100%;
}

/* Contenedor interno que rota */
.fc-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Animación al hacer Hover en el contenedor */
.fc-card-container:hover .fc-card-inner {
    transform: rotateY(180deg);
}

/* ==========================================================================
   Estilos Comunes y Control Antiacoplamiento (PC, Tablet y Móvil)
   ========================================================================== */

/* Estilos comunes para ambas caras */
.fc-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Oculta la cara que da la espalda al usuario */
    backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box; /* Asegura que el padding/borde no rompa las dimensiones */
    overflow: hidden;
}

/* Cara Frontal (Visible por defecto) */
.fc-front {
    z-index: 2;
    pointer-events: auto; /* Permite interacciones por defecto */
}

/* Cara Posterior (Invertida por defecto) */
.fc-back {
    transform: rotateY(180deg);
    z-index: 1;
    pointer-events: none; /* Desactiva clics fantasmas mientras está oculta */
}

/* CORRECCIÓN MECÁNICA ABSOLUTA DE CAPAS:
   Cuando la tarjeta gira en hover, la cara de adelante muere por completo para el puntero táctil/mouse,
   y la cara trasera toma prioridad absoluta habilitando sus clics.
*/
.fc-card-container:hover .fc-front {
    z-index: 1;
    pointer-events: none;
}

.fc-card-container:hover .fc-back {
    z-index: 2;
    pointer-events: auto;
}

/* ==========================================================================
   Capas de Contenido y Capas de Color (Overlays)
   ========================================================================== */

/* Capa de color difuminada (Overlay) */
.fc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.3s ease;
    pointer-events: none; /* Evita que el fondo interfiera con los clics */
}

/* Contenedor del contenido */
.fc-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transform-style: preserve-3d; /* Permite empujar elementos en el eje Z */
}

/* ==========================================================================
   Tipografías y Reset Base para Elementor
   ========================================================================== */

/* Valores base reseteados para que Elementor los controle al 100% */
.fc-front h3, .fc-back h4, .fc-back p {
    margin: 0;
    padding: 0;
}

.fc-back h4 {
    margin-bottom: 10px;
}

.fc-back p {
    margin-bottom: 20px;
}

/* ==========================================================================
   Botón Posterior Blindado (Aislamiento de Clics Máximo)
   ========================================================================== */

/* Botón base dinámico */
.fc-button {
    position: relative;
    display: inline-block;
    text-decoration: none !important;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    
    /* PRIORIDAD DE CLIC TOTAL: 
       z-index alto y un empuje de 10px hacia adelante en el eje 3D (Z) para evitar que
       el texto <p> o las cajas contenedoras de Elementor tapen el área activa en pantallas táctiles.
    */
    z-index: 99; 
    pointer-events: auto !important;
    transform: translateZ(10px); 
    -webkit-transform: translateZ(10px);

    /* Transición explícita para evitar parpadeos tridimensionales con el hover de Elementor */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Pequeña amortiguación física al presionar en móviles */
.fc-button:active {
    transform: translateZ(5px) scale(0.98);
}