/* ═══════════════════════════════════════════════════════
   SOLIDEAS B2B — Custom Styles (WordPress Edition)
   Premium animations, particles, glassmorphism
   ═══════════════════════════════════════════════════════ */

/* ── Tipografías Cera Pro (Cloudinary) ──────────────── */
@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771882002/Cera_Pro_Thin_j1xuaz.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771881996/Cera_Pro_Light_shyhiy.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771882001/Cera_Pro_Regular_mtepcg.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771882000/Cera_Pro_Medium_mzum1q.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771881998/Cera_Pro_Bold_npdjhj.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771881998/Cera_Pro_Black_p3gfmr.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ── Tipografía Logo BankGothic ───────────────────────── */
@font-face {
    font-family: 'BankGothic';
    src: url('https://res.cloudinary.com/dai0pyiwa/raw/upload/v1771867330/bank-gothic-light-bt_qyfq3l.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Google Fonts fallback ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/* ═══════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════ */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: '"Cera Pro"', 'Inter', sans-serif;
    background-color: #ffffff;
    color: #1f2937;
    overflow-x: hidden;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::selection {
    background-color: rgba(88, 136, 127, 0.25);
    color: #25291C;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #58887F;
    outline-offset: 2px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════
   HERO — Full Viewport + Premium Animations
   ═══════════════════════════════════════════════════════ */

/* ── Hero Slider ─────────────────────────────────────── */
.slide {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    inset: 0;
}

.slide.active {
    opacity: 1;
    z-index: 10;
}

/* Ken Burns — slow zoom + slight pan */
.slide-img {
    transform: scale(1.08);
    transition: transform 8s ease-out;
    will-change: transform;
}

.slide.active .slide-img {
    transform: scale(1);
}

/* ── Floating Particles ──────────────────────────────── */
.particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 136, 127, 0.4) 0%, transparent 70%);
    animation: float-drift 12s ease-in-out infinite;
    pointer-events: none;
}

.particle-1 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 14s;
}

.particle-2 {
    width: 4px;
    height: 4px;
    top: 60%;
    left: 25%;
    animation-delay: 2s;
    animation-duration: 11s;
}

.particle-3 {
    width: 8px;
    height: 8px;
    top: 30%;
    left: 70%;
    animation-delay: 4s;
    animation-duration: 16s;
    background: radial-gradient(circle, rgba(186, 90, 49, 0.3) 0%, transparent 70%);
}

.particle-4 {
    width: 3px;
    height: 3px;
    top: 75%;
    left: 80%;
    animation-delay: 1s;
    animation-duration: 13s;
}

.particle-5 {
    width: 5px;
    height: 5px;
    top: 45%;
    left: 55%;
    animation-delay: 3s;
    animation-duration: 15s;
    background: radial-gradient(circle, rgba(186, 90, 49, 0.25) 0%, transparent 70%);
}

.particle-6 {
    width: 4px;
    height: 4px;
    top: 85%;
    left: 40%;
    animation-delay: 5s;
    animation-duration: 10s;
}

@keyframes float-drift {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translateY(-60px) translateX(30px);
        opacity: 0.8;
    }

    90% {
        opacity: 1;
    }
}

/* ── Hero Badge Glow ─────────────────────────────────── */
.hero-badge-glow {
    animation: badge-pulse 3s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(88, 136, 127, 0);
    }

    50% {
        box-shadow: 0 0 20px 4px rgba(88, 136, 127, 0.25);
    }
}

/* ── Hero CTA Shine Effect ───────────────────────────── */
.hero-cta-primary {
    position: relative;
    overflow: hidden;
}

.hero-cta-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
    animation: cta-shine 4s ease-in-out infinite;
}

@keyframes cta-shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    30%,
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.hero-cta-secondary {
    position: relative;
}

.hero-cta-secondary::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(88, 136, 127, 0.3), rgba(186, 90, 49, 0.3));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-cta-secondary:hover::before {
    opacity: 1;
}

/* ── Scroll Down Indicator ───────────────────────────── */
.scroll-indicator {
    animation: scroll-float 2.5s ease-in-out infinite;
}

@keyframes scroll-float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

.scroll-dot {
    animation: scroll-dot-move 2s ease-in-out infinite;
}

@keyframes scroll-dot-move {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(12px);
        opacity: 0.3;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════════
   GLOBAL ANIMATION SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ── Fade-up — Smooth spring easing ──────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for children */
.delay-100 {
    transition-delay: 150ms;
}

.delay-200 {
    transition-delay: 300ms;
}

.delay-300 {
    transition-delay: 450ms;
}

.delay-400 {
    transition-delay: 600ms;
}

.delay-500 {
    transition-delay: 750ms;
}


/* ═══════════════════════════════════════════════════════
   CARDS & INTERACTIVE ELEMENTS
   ═══════════════════════════════════════════════════════ */

.modern-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.15);
}

.btn-expand {
    transition: all 0.3s ease;
}

/* ── Accordion ───────────────────────────────────────── */
.accordion-content {
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-item.active .accordion-content {
    max-height: 350px;
    opacity: 1;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: #58887F;
}

/* ── SVG Spin ────────────────────────────────────────── */
.animate-spin-slow {
    animation: spin 25s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.svg-draw path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 4s ease-in-out forwards infinite alternate;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}


/* ═══════════════════════════════════════════════════════
   LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* ── Tab Panels (no layout shift) ────────────────────── */
.tab-panels-wrap {
    display: grid;
    align-items: start;
}

.tab-panels-wrap>.tab-content {
    grid-row: 1;
    grid-column: 1;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(15px);
    display: block !important;
}

.tab-panels-wrap>.tab-content.active {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* ── Mobile Menu ─────────────────────────────────────── */
#mobile-menu {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Header — Glassmorphism on scroll ────────────────── */
#main-header {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* ── Calendly Responsive ─────────────────────────────── */
.calendly-responsive-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    height: 55vh;
    min-height: 460px;
}

.calendly-inline-widget {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .calendly-responsive-wrapper {
        height: 85vh;
        min-height: auto;
    }
}


/* ═══════════════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════════════ */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.logo-marquee-track {
    animation: marquee-scroll 55s linear infinite;
    will-change: transform;
    width: max-content;
    cursor: grab;
}

.logo-marquee-track.dragging {
    cursor: grabbing;
    animation-play-state: paused;
}

.logo-marquee-track:hover {
    animation-play-state: paused;
}

.logo-item {
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
    max-width: 280px;
}

.logo-item:hover {
    opacity: 1;
    transform: scale(1.05);
}


/* ═══════════════════════════════════════════════════════
   SECURITY & WORDPRESS
   ═══════════════════════════════════════════════════════
   NOTE: Image protection (right-click, drag) is handled
   via JavaScript to avoid blocking Hotjar analytics.
   ═══════════════════════════════════════════════════════ */
img {
    -webkit-user-drag: none;
}

/* WordPress overrides */
html {
    margin-top: 0 !important;
}

#wpadminbar {
    display: none;
}