.elementor-kit-7{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Antic Didone";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-letter-spacing:1px;--e-global-typography-secondary-font-family:"Antic Didone";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-letter-spacing:1px;--e-global-typography-text-font-family:"Antic Didone";--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:1px;--e-global-typography-accent-font-family:"Antic Didone";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-letter-spacing:1px;font-family:"Antic Didone", Sans-serif;}.elementor-kit-7 h1{font-family:"Antic Didone", Sans-serif;}.elementor-kit-7 h2{font-family:"Antic Didone", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* === 1. CONFIGURACIÓN DEL ENTORNO 3D === */
body {
    background-color: #000000 !important; /* Fondo negro puro */
    overflow: hidden;
    /* La perspectiva es obligatoria para que el giro horizontal no se vea plano */
    perspective: 1200px; 
}

/* === 2. CONTENEDOR PRINCIPAL === */
.site {
    animation-duration: 0.8s; /* Un poco más de tiempo para apreciar el giro */
    animation-fill-mode: both;
    /* Curva suave: acelera rápido y frena suavemente al final */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    background-color: #000000; /* El fondo de tu contenido también en negro */
    min-height: 100vh;
    
    /* Le decimos que gire exactamente sobre su centro (eje Y) */
    transform-origin: 50% 50%;
    /* Mantiene el renderizado 3D para los elementos internos */
    transform-style: preserve-3d;
}

/* === 3. ANIMACIÓN DE SALIDA (Gira y se aleja) === */
.animacion-salida {
    animation-name: girarSalidaHorizontal;
}

@keyframes girarSalidaHorizontal {
    from {
        opacity: 1;
        transform: translateZ(0) rotateY(0deg);
    }
    to {
        opacity: 0;
        /* Se empuja hacia el fondo (-300px) y gira 90 grados a la izquierda */
        transform: translateZ(-300px) rotateY(-90deg); 
    }
}

/* === 4. ANIMACIÓN DE ENTRADA (Viene girando desde la derecha) === */
.animacion-entrada {
    animation-name: girarEntradaHorizontal;
}

@keyframes girarEntradaHorizontal {
    from {
        opacity: 0;
        /* Empieza desde el lado opuesto (90 grados) en el fondo */
        transform: translateZ(-300px) rotateY(90deg); 
    }
    to {
        opacity: 1;
        /* Termina plana y al frente */
        transform: translateZ(0) rotateY(0deg);
    }
}/* End custom CSS */