/* ============================================
   DEDIVERSIA — Fiesta Tropical
   Vibrant turquoise · coral · sun yellow · Fun!
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    --c-bg: #fefcf3;
    --c-bg-alt: #fff5e6;
    --c-bg-card: #ffffff;
    --c-surface: #f0fafa;
    --c-text: #1a2e35;
    --c-text-muted: #5e7a82;
    --c-accent-1: #00b4a0;
    --c-accent-2: #ff6b6b;
    --c-accent-3: #ffb830;
    --c-accent-4: #7c4dff;
    --c-accent-5: #00c9db;
    --c-gradient-hero: linear-gradient(135deg, #00b4a0 0%, #00c9db 25%, #ffb830 50%, #ff6b6b 75%, #7c4dff 100%);
    --c-gradient-card: linear-gradient(160deg, rgba(0,180,160,.04) 0%, rgba(255,107,107,.04) 100%);
    --c-gradient-cta: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffb830 100%);
    --c-border: rgba(0,180,160,.12);
    --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', sans-serif;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --shadow-glow: 0 4px 24px rgba(0,180,160,.12), 0 12px 48px rgba(255,107,107,.08);
    --shadow-card: 0 4px 20px rgba(0,180,160,.08);
    --transition: .35s cubic-bezier(.34,1.56,.64,1);
}

/* --- Background: tropical gradient wash --- */
body::before {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(0,201,219,.07) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(255,107,107,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255,184,48,.04) 0%, transparent 60%);
    animation: bgDrift 20s ease-in-out infinite;
}

/* Hide confetti, keep a little noise */
.confetti-bg { display: none; }
.noise-overlay { opacity: .02; }

/* --- Header --- */
.site-header.scrolled {
    background: rgba(254,252,243,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,180,160,.15);
    box-shadow: 0 2px 12px rgba(0,180,160,.06);
}

.nav-logo {
    background: var(--c-gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: .02em;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--c-accent-1);
    background: rgba(0,180,160,.08);
}
.nav-links a.active::after {
    background: var(--c-gradient-cta);
    height: 3px;
    border-radius: 3px;
    width: 100%;
    bottom: 4px;
}

.lang-switch {
    background: rgba(0,180,160,.06);
    border: 1px solid rgba(0,180,160,.15);
}
.lang-switch a.active {
    background: var(--c-accent-1);
    color: #fff;
}

.nav-cta {
    background: var(--c-gradient-cta) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    border-radius: 50px !important;
    font-size: .82rem !important;
}
.nav-cta:hover {
    box-shadow: 0 6px 24px rgba(255,107,107,.3);
    transform: translateY(-1px);
}

/* --- Hero --- */
.hero::before {
    background: linear-gradient(135deg, rgba(0,180,160,.06), rgba(255,184,48,.06), rgba(255,107,107,.04));
    opacity: 1;
}
.hero::after {
    background: linear-gradient(to top, var(--c-bg), transparent);
}

.hero-shapes .shape {
    filter: blur(60px);
    opacity: .18;
    border-radius: 50%;
}
.hero-shapes .shape:nth-child(1) { background: #00c9db; }
.hero-shapes .shape:nth-child(2) { background: #ff6b6b; }
.hero-shapes .shape:nth-child(3) { background: #ffb830; }
.hero-shapes .shape:nth-child(4) { background: #7c4dff; }

.hero-badge {
    background: rgba(0,180,160,.1);
    border: 1px solid rgba(0,180,160,.25);
    color: var(--c-accent-1);
    border-radius: 50px;
}

.hero h1 .gradient-text {
    background: var(--c-gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- Buttons --- */
.btn-primary {
    background: var(--c-gradient-cta);
    color: #fff;
    border-radius: 50px;
}
.btn-primary:hover {
    box-shadow: 0 8px 28px rgba(255,107,107,.25);
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent;
    color: var(--c-accent-1);
    border: 2px solid var(--c-accent-1);
    border-radius: 50px;
}
.btn-secondary:hover {
    background: rgba(0,180,160,.08);
    border-color: var(--c-accent-1);
    transform: translateY(-1px);
}

/* --- Service Cards --- */
.service-card {
    background: #fff;
    border: 1px solid rgba(0,180,160,.1);
    box-shadow: 0 2px 8px rgba(0,180,160,.04);
    border-radius: var(--radius-lg);
}
.service-card::before {
    background: var(--c-gradient-cta);
    height: 3px;
    border-radius: 3px 3px 0 0;
}
.service-card:hover {
    border-color: rgba(0,180,160,.3);
    box-shadow: 0 12px 36px rgba(0,180,160,.12);
    transform: translateY(-4px);
}
.service-card[data-accent="1"]:hover { border-color: rgba(0,180,160,.35); }
.service-card[data-accent="2"]:hover { border-color: rgba(255,107,107,.35); }
.service-card[data-accent="3"]:hover { border-color: rgba(255,184,48,.35); }
.service-card[data-accent="4"]:hover { border-color: rgba(124,77,255,.35); }
.service-card[data-accent="5"]:hover { border-color: rgba(0,201,219,.35); }
.service-card-link { color: var(--c-accent-2); }

/* --- Show Cards --- */
.show-card {
    background: #fff;
    border: 1px solid rgba(0,180,160,.08);
    box-shadow: 0 2px 8px rgba(0,180,160,.04);
    border-radius: var(--radius-lg);
}
.show-card:hover {
    box-shadow: 0 10px 32px rgba(0,180,160,.12);
    border-color: rgba(0,180,160,.2);
    transform: translateY(-3px);
}
.show-card-visual .emoji-placeholder {
    background: linear-gradient(135deg, rgba(0,180,160,.06), rgba(255,184,48,.08), rgba(255,107,107,.06));
}

/* --- Why Cards --- */
.why-card {
    background: #fff;
    border: 1px solid rgba(0,180,160,.1);
    border-radius: var(--radius-lg);
}
.why-card:hover {
    border-color: rgba(0,180,160,.25);
    box-shadow: 0 6px 24px rgba(0,180,160,.1);
    transform: translateY(-2px);
}

/* --- CTA --- */
.cta-box {
    background: #fff;
    border: 2px solid rgba(0,180,160,.2);
    border-radius: var(--radius-xl);
}
.cta-box::before {
    background: linear-gradient(135deg, rgba(0,180,160,.04), rgba(255,184,48,.04), rgba(255,107,107,.03));
    opacity: 1;
}

/* --- Detail page --- */
.detail-hero::before {
    background: linear-gradient(135deg, rgba(0,180,160,.05), rgba(255,184,48,.04), transparent);
    opacity: 1;
}
.page-hero::before {
    background: linear-gradient(135deg, rgba(0,180,160,.05), rgba(255,184,48,.04), transparent);
    opacity: 1;
}
.detail-breadcrumb a { color: var(--c-accent-1); }
.detail-carousel-main {
    border: 1px solid rgba(0,180,160,.12);
    background: var(--c-surface);
    border-radius: var(--radius-lg);
}
.carousel-btn {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,180,160,.15);
    color: var(--c-accent-1);
    backdrop-filter: blur(8px);
    border-radius: 50%;
}
.carousel-btn:hover {
    background: var(--c-accent-1);
    border-color: var(--c-accent-1);
    color: #fff;
}
.carousel-counter {
    background: rgba(0,180,160,.85);
    color: #fff;
    border-radius: 50px;
}
.carousel-thumb.active {
    border-color: var(--c-accent-1);
}
.detail-carousel-thumbs {
    scrollbar-color: rgba(0,180,160,.3) transparent;
}
.detail-carousel-thumbs::-webkit-scrollbar-thumb { background: rgba(0,180,160,.3); }

.detail-feature-item {
    background: rgba(0,180,160,.04);
    border: 1px solid rgba(0,180,160,.1);
    border-radius: var(--radius-md);
}
.detail-feature-item:hover {
    border-color: rgba(0,180,160,.25);
    background: rgba(0,180,160,.08);
}
.detail-section h2::before { background: var(--c-gradient-cta); }
.detail-section ul li::before { color: var(--c-accent-1); }
.detail-tag {
    background: rgba(0,180,160,.08);
    border-color: rgba(0,180,160,.2);
    color: var(--c-accent-1);
    border-radius: 50px;
}
.detail-info-box {
    background: rgba(255,184,48,.08);
    border-color: rgba(255,184,48,.2);
    color: #8a6400;
    border-radius: var(--radius-md);
}

/* --- Sidebar --- */
.sidebar-cta, .sidebar-related {
    background: #fff;
    border: 1px solid rgba(0,180,160,.1);
    border-radius: var(--radius-lg);
}
.contact-form, .contact-info-card {
    background: #fff;
    border: 1px solid rgba(0,180,160,.1);
    border-radius: var(--radius-lg);
}
.variant-card {
    background: rgba(0,180,160,.03);
    border-color: rgba(0,180,160,.1);
    border-radius: var(--radius-md);
}
.variant-card:hover {
    border-color: rgba(0,180,160,.25);
    background: rgba(0,180,160,.07);
}

/* --- Form --- */
.form-group input,
.form-group select,
.form-group textarea {
    background: #f8fdfd;
    border: 1px solid rgba(0,180,160,.15);
    color: var(--c-text);
    border-radius: var(--radius-md);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--c-accent-1);
    box-shadow: 0 0 0 3px rgba(0,180,160,.12);
}
.form-group select option { background: #fff; }
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300b4a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* --- Footer --- */
.site-footer {
    background: #e8f8f5;
    border-top: 2px solid rgba(0,180,160,.15);
}
.footer-col ul a:hover { color: var(--c-accent-1); }
.contact-detail a { color: var(--c-accent-1); }

/* --- Mobile --- */
@media (max-width: 768px) {
    .nav-links.mobile-open {
        background: rgba(254,252,243,.98);
    }
    .nav-links.mobile-open .nav-dropdown-menu {
        background: rgba(0,180,160,.04);
    }
}