/* ==========================================================================
   CIR APREPA - Clean Tech Corporate Design System (Apple / Vercel / Linear)
   Complementing Tailwind CSS with fluid micro-interactions & SPA states
   ========================================================================== */

:root {
    --primary-color: #059669;       /* Emerald 600 */
    --primary-hover: #047857;       /* Emerald 700 */
    --accent-color: #d97706;        /* Amber 600 */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(161, 161, 170, 0.35);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.6);
}

/* Architectural Subtle Background Grid (Linear / Vercel aesthetic) */
.bg-tech-grid {
    background-size: 36px 36px;
    background-image: 
        linear-gradient(to right, rgba(161, 161, 170, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(161, 161, 170, 0.08) 1px, transparent 1px);
}
html.dark .bg-tech-grid {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Bento Card Interactive Cursor Spotlight */
.bento-card {
    position: relative;
    overflow: hidden;
}
.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        550px circle at var(--mouse-x, 50%) var(--mouse-y, 0%),
        rgba(16, 185, 129, 0.07),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
html.dark .bento-card::before {
    background: radial-gradient(
        550px circle at var(--mouse-x, 50%) var(--mouse-y, 0%),
        rgba(16, 185, 129, 0.12),
        transparent 40%
    );
}
.bento-card:hover::before {
    opacity: 1;
}

/* Staggered Entrance Animations (Fade-in + Slide-up) */
.reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* SPA Page Section Switching */
.page-section {
    display: none;
    opacity: 0;
}
.page-section.active-page {
    display: block;
    animation: spaFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spaFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop Navigation Active Pill / Indicator */
.nav-link.active {
    color: #059669 !important;
    background-color: rgba(16, 185, 129, 0.08);
}
html.dark .nav-link.active {
    color: #34d399 !important;
    background-color: rgba(16, 185, 129, 0.14);
}

/* Mobile Drawer States */
.mobile-drawer {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.open {
    transform: translateX(0);
}
.mobile-drawer-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-link.active {
    color: #059669 !important;
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}
html.dark .mobile-link.active {
    color: #34d399 !important;
    background-color: rgba(16, 185, 129, 0.15);
}

/* Hero Carousel Mechanics */
.hero-carousel {
    position: relative;
    overflow: hidden;
}
.carousel-track {
    width: 100%;
    height: 100%;
    position: relative;
}
.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    opacity: 0;
    z-index: 1;
    transform: translateY(calc(var(--dir, 1) * 10%)) scale(1.06);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 2;
    transform: none;
}
.carousel-slide.leaving {
    opacity: 0;
    transform: translateY(calc(var(--dir, 1) * -6%)) scale(1.02);
    transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.7, 0, 0.3, 1);
}
.carousel-slide.no-anim,
.carousel-slide.no-anim * {
    transition: none !important;
}

.slide-content > * {
    opacity: 0;
    transform: translateY(calc(var(--dir, 1) * 40px));
    filter: blur(8px);
}
.carousel-slide.active .slide-content > * {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity 0.8s ease,
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s ease;
}
.carousel-slide.active .slide-content > :nth-child(1) { transition-delay: 0.25s; }
.carousel-slide.active .slide-content > :nth-child(2) { transition-delay: 0.35s; }
.carousel-slide.active .slide-content > :nth-child(3) { transition-delay: 0.45s; }
.carousel-slide.active .slide-content > :nth-child(4) { transition-delay: 0.55s; }

.carousel-slide.leaving .slide-content > * {
    opacity: 0;
    transform: translateY(calc(var(--dir, 1) * -50px));
    filter: blur(10px);
    transition: opacity 0.4s ease, transform 0.5s ease, filter 0.4s ease;
}

/* Carousel Dots */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
}
.dot.active {
    width: 32px;
    background-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

/* Services Category Tabs & Accordions */
.services-tabs .tab-btn.active,
.tabs-buttons .tab-btn.active {
    background-color: #ffffff;
    color: #09090b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.dark .services-tabs .tab-btn.active,
html.dark .tabs-buttons .tab-btn.active {
    background-color: #27272a;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.services-category-section {
    display: none;
}
.services-category-section.active-category {
    display: block;
    animation: spaFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.service-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-accordion-item.active {
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.1) !important;
}
.service-accordion-item.active .arrow-icon {
    transform: rotate(180deg);
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.12);
}

/* Formación Tabs */
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
    animation: spaFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* File Dropzone Dragover State */
.file-drop-area.dragover {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.06) !important;
    transform: scale(1.01);
}

/* Form Status Messages */
.form-status {
    display: none;
}
.form-status.success {
    display: block;
    background-color: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
html.dark .form-status.success {
    color: #6ee7b7;
}
.form-status.error {
    display: block;
    background-color: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
html.dark .form-status.error {
    color: #fca5a5;
}

/* Scroll to Top Button */
.scroll-to-top-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Honeypot Anti-spam Field */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-slide,
    .slide-content > *,
    .reveal-item {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}