/*
Theme Name: fusiondigital
Theme URI: https://fusiondigital.local/
Author: Everth Fernández
Author URI: https://fusiondigital.local/
Description: Tema personalizado para Fusion Digital, preparado para ACF y TailwindCSS.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fusiondigital
Tags: custom, tailwindcss, acf
*/

/* Fusion Colors */
:root {
    --fusion-purple: #31215A;
    --fusion-cream: #F5F4F1;
    --fusion-red: #C33E53;
}

/* Benzin Font Family */
@font-face {
    font-family: 'Benzin';
    src: url('./assets/fonts/benzin/Benzin-Regular.woff2') format('woff2'),
         url('./assets/fonts/benzin/Benzin-Regular.woff') format('woff'),
         url('./assets/fonts/benzin/Benzin-Regular.ttf') format('truetype'),
         url('./assets/fonts/benzin/Benzin-Regular.eot') format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benzin';
    src: url('./assets/fonts/benzin/Benzin-Medium.woff2') format('woff2'),
         url('./assets/fonts/benzin/Benzin-Medium.woff') format('woff'),
         url('./assets/fonts/benzin/Benzin-Medium.ttf') format('truetype'),
         url('./assets/fonts/benzin/Benzin-Medium.eot') format('embedded-opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benzin';
    src: url('./assets/fonts/benzin/Benzin-Semibold.woff2') format('woff2'),
         url('./assets/fonts/benzin/Benzin-Semibold.woff') format('woff'),
         url('./assets/fonts/benzin/Benzin-Semibold.ttf') format('truetype'),
         url('./assets/fonts/benzin/Benzin-Semibold.eot') format('embedded-opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benzin';
    src: url('./assets/fonts/benzin/Benzin-Bold.woff2') format('woff2'),
         url('./assets/fonts/benzin/Benzin-Bold.woff') format('woff'),
         url('./assets/fonts/benzin/Benzin-Bold.ttf') format('truetype'),
         url('./assets/fonts/benzin/Benzin-Bold.eot') format('embedded-opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benzin';
    src: url('./assets/fonts/benzin/Benzin-ExtraBold.woff2') format('woff2'),
         url('./assets/fonts/benzin/Benzin-ExtraBold.woff') format('woff'),
         url('./assets/fonts/benzin/Benzin-ExtraBold.ttf') format('truetype'),
         url('./assets/fonts/benzin/Benzin-ExtraBold.eot') format('embedded-opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Just Font Family */
@font-face {
    font-family: 'Just';
    src: url('./assets/fonts/just/JUST Sans Outline Regular.woff2') format('woff2'),
         url('./assets/fonts/just/JUST Sans Outline Regular.woff') format('woff'),
         url('./assets/fonts/just/JUST Sans Outline Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Just';
    src: url('./assets/fonts/just/JUST Sans Outline ExBold.woff2') format('woff2'),
         url('./assets/fonts/just/JUST Sans Outline ExBold.woff') format('woff'),
         url('./assets/fonts/just/JUST Sans Outline ExBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Global Styles */
* {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    background-color: var(--fusion-cream);
}

/* Fusion Color Classes */
.text-fusion-purple {
    color: var(--fusion-purple);
}

.text-fusion-cream {
    color: var(--fusion-cream);
}

.text-fusion-red {
    color: var(--fusion-red);
}

.bg-fusion-purple {
    background-color: var(--fusion-purple);
}

.bg-fusion-cream {
    background-color: var(--fusion-cream);
}

.bg-fusion-red {
    background-color: var(--fusion-red);
}

/* Header Contact Button - Morado Fusion */
.header-contact-btn {
    background-color: var(--fusion-purple);
    color: white;
    transition: all 0.3s ease;
}

.header-contact-btn:hover {
    background-color: #2a1c4a;
    transform: translateY(-2px);
}

/* Section Titles - Rojo Fusion */
.section-title {
    color: var(--fusion-red);
}

/* About Section Title */
.about-section h2 {
    color: var(--fusion-red);
}

/* Work Section Title */
.work-section h2 {
    color: var(--fusion-red);
}

/* Success Stories Section Title */
.success-stories-section h2 {
    color: var(--fusion-red);
}

/* Services Section Titles */
.services-section h2,
.services-section h3 {
    color: var(--fusion-red);
}

/* Clients Section Title */
.clients-section h2 {
    color: var(--fusion-red);
}

/* TailwindCSS Font Family Configuration */
.font-benzin {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.font-benzin-light {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 300;
}

.font-benzin-normal {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 400;
}

.font-benzin-medium {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 500;
}

.font-benzin-semibold {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 600;
}

.font-benzin-bold {
    font-family: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 700;
}

.font-benzin-extrabold {
    font-weight: 800;
}

/* Custom Animations */
@keyframes moveX {
    0%, 100% { 
        transform: translateX(0); 
    }
    50% { 
        transform: translateX(40px); 
    }
}

@keyframes moveY {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

.animate-move-x {
    animation: moveX 2s ease-in-out infinite;
}

.animate-move-y {
    animation: moveY 2.5s ease-in-out infinite;
}

.fusion-digital-stoke-text {
    color: var(--fusion-cream);
    text-shadow: 
    -2px 0 var(--fusion-purple), 2px 0 var(--fusion-purple), 
    0 -2px var(--fusion-purple), 0 2px var(--fusion-purple),
    -2px -2px var(--fusion-purple), 2px 2px var(--fusion-purple),
    -2px 2px var(--fusion-purple), 2px -2px var(--fusion-purple);
    -webkit-text-stroke: 2px var(--fusion-purple);
    -webkit-text-fill-color: var(--fusion-cream);
    font-family: 'Benzin', sans-serif;
    text-transform: uppercase;
    paint-order: stroke fill;
}

@media (max-width: 768px) {
    .fusion-digital-stoke-text {
        color: var(--fusion-purple); 
        paint-order: fill;
        text-shadow: none;
        font-weight: 800;
        font-size: 1.8rem;
        font-family: 'Just', sans-serif;
        display: flex;
        padding: 20px 0;
        opacity: 0.9;
        -webkit-text-stroke: 1px;
        -webkit-text-fill-color: transparent;
    }
}

/* Header Scroll Styles */
#mainHeader {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: transparent;
}

#mainHeader.bg-white {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
}

#mainHeader .absolute {
    transition: all 0.3s ease;
}

#mainHeader nav a {
    transition: color 0.3s ease;
}

#mainHeader nav a:hover {
    color: var(--fusion-red) !important;
}

#mainHeader .header-contact-btn {
    transition: all 0.3s ease;
}

/* Smooth scroll behavior - Desactivado para usar scroll personalizado */
html {
    scroll-behavior: auto;
}

/* Custom smooth scroll for menu links */
.smooth-scroll {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Project Scroll Container Styles */
.project-scroll-container {
    position: relative;
}

.project-scroll-container .project-scroll-prev,
.project-scroll-container .project-scroll-next {
    transition: all 0.3s ease;
}

.project-scroll-container .project-scroll-prev:hover,
.project-scroll-container .project-scroll-next:hover {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.05);
}

/* Project Swiper Styles */
.project-swiper {
    overflow: hidden;
}

.project-swiper .swiper-slide {
    height: auto;
}

/* Services Accordion Styles */
.service-header {
    transition: all 0.3s ease;
}

.service-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.service-content {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-content.active {
    display: block;
}

.service-icon {
    transition: all 0.3s ease;
}

.service-icon.rotate-45 {
    transform: rotate(45deg);
}

/* Smooth accordion animations */
.service-content:not(.active) {
    max-height: 0;
    opacity: 0;
}

.service-content.active {
    max-height: 1000px;
    opacity: 1;
}

/* Mobile Menu Styles */
.mobile-menu-line {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#mobileMenuOverlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#mobileMenuOverlay.opacity-0 {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

#mobileMenuOverlay:not(.opacity-0) {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Animación del contenido del menú móvil */
#mobileMenuOverlay .flex {
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.1s;
}

#mobileMenuOverlay:not(.opacity-0) .flex {
    transform: translateX(0);
    opacity: 1;
}

/* Animación del botón hamburguesa */
#mobileMenuBtn {
    position: relative;
    z-index: 60;
}

.mobile-menu-line {
    transform-origin: center;
}

/* Animación de las líneas del botón hamburguesa */
.mobile-menu-line.rotate-45 {
    transform: rotate(45deg) translate(2px, 2px);
}

.mobile-menu-line.opacity-0 {
    transform: scale(0);
    opacity: 0;
}

.mobile-menu-line.-rotate-45 {
    transform: rotate(-45deg) translate(2px, -2px);
}

/* Prevent body scroll when mobile menu is open */
body.overflow-hidden {
    overflow: hidden !important;
}

/* Clients Scroll Styles */
.clients-swiper .swiper-slide {
    width: auto !important;
    min-width: 200px;
    max-width: 250px;
    flex-shrink: 0;
}

/* Herramientas Scroll Styles */
.herramientas-swiper .swiper-slide {
    width: auto !important;
    min-width: 200px;
    max-width: 250px;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .clients-swiper .swiper-slide {
        min-width: 150px;
        max-width: 200px;
    }
    
    .herramientas-swiper .swiper-slide {
        min-width: 150px;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .clients-swiper .swiper-slide {
        min-width: 120px;
        max-width: 150px;
    }
    
    .herramientas-swiper .swiper-slide {
        min-width: 120px;
        max-width: 150px;
    }
}