/* ============================================================
   Paraguay Business Immigration | Custom Styles
   ============================================================ */

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Public Sans', sans-serif;
}

/* Custom color helpers */
.gold-border { border-color: #e8ce9a; }
.text-gold    { color: #e8ce9a; }
.bg-gold      { background-color: #e8ce9a; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav-main {
    transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Solid background after scrolling */
.nav-main.nav-scrolled {
    background-color: rgba(26, 10, 14, 0.98) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}


/* Desktop nav link – animated underline */
.nav-link-animated {
    position: relative;
    padding-bottom: 4px;
    text-decoration: none;
}

.nav-link-animated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #650326;
    transition: width 0.3s ease;
}

.nav-link-animated:hover::after,
.nav-link-animated.active::after {
    width: 100%;
}

.nav-link-animated.active {
    color: #650326 !important;
}

/* CTA button in navbar */
.btn-nav-cta {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-nav-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(101, 3, 38, 0.45) !important;
}

/* ============================================================
   MOBILE NAV (vanilla JS toggle)
   ============================================================ */

/* Drawer oculto por defecto */
.mobile-menu-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* Drawer abierto */
.mobile-menu-drawer.open {
    max-height: 480px;
}

#mobileMenu .mobile-link {
    position: relative;
    border-left: 3px solid transparent;
    padding-left: 12px;
    transition: border-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

#mobileMenu .mobile-link:hover {
    border-left-color: #650326;
    color: #650326 !important;
    padding-left: 20px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-btn-primary {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hero-btn-primary:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 16px 36px rgba(101, 3, 38, 0.5) !important;
}

.hero-btn-secondary {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

.hero-btn-secondary:hover {
    transform: scale(1.04) !important;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.service-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   BUSINESS FORMALIZATION ITEMS
   ============================================================ */
.business-item {
    transition: border-left-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease !important;
}

.business-item:hover {
    border-left-color: #650326 !important;
    transform: translateX(6px) !important;
}

/* ============================================================
   TECH / DIGITAL CARDS
   ============================================================ */
.tech-card {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.tech-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   STATS (Why Paraguay)
   ============================================================ */
.stat-item {
    transition: transform 0.25s ease;
    cursor: default;
}

.stat-item:hover {
    transform: scale(1.08);
}

.stat-item:hover .stat-number {
    color: #e8ce9a !important;
}

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.social-icon {
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease !important;
}

.social-icon:hover {
    transform: scale(1.15) rotate(6deg) !important;
}

/* ============================================================
   CONTACT FORM INPUTS
   ============================================================ */
.form-field {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-field:focus {
    box-shadow: 0 0 0 3px rgba(101, 3, 38, 0.18);
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered children delay */
.stagger > *:nth-child(1) { transition-delay: 0s;    }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.24s; }
.stagger > *:nth-child(4) { transition-delay: 0.36s; }

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    width: 52px;
    height: 52px;
    background-color: #650326;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(101, 3, 38, 0.5);
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

#back-to-top.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#back-to-top:hover {
    background-color: #4a0220;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 12px 32px rgba(101, 3, 38, 0.65);
}

#back-to-top .material-icons {
    font-size: 26px;
}