/* GLOBAL VARIABLES & DESIGN TOKENS */

:root {
    /* COLOR PALETTE */
    --ink: #0a0f1e;
    --navy: #11135e;
    --mid: #e63c35;
    --cyan: #575882;
    --cyandim: #00c8e022;
    --gold: #f5c842;
    --lite: #f0f4ff;
    --card: #ffffff;
    --txt: #2e3856;
    --muted: #6b7599;

    /* SOCIAL COLORS */
    --whatsapp: #25d366;
    --facebook: #0d1b3e;
    --twitter: #7c3aed;
    --instagram: #d97706;
    --youtube: #e11d48;
    --telegram: #059669;

    /* SEMANTIC COLORS */
    --error: #e11d48;
    --success: #059669;
    --warning: #d97706;
    --info: #7c3aed;

    /* SPACING */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;
    --gap-xl: 32px;
    --gap-2xl: 48px;

    /* BORDERS & RADIUS */
    --radius: 16px;
    --radius-lg: 24px;

    /* TYPOGRAPHY */
    --font-sans: 'DM Sans', sans-serif;
    --font-display: 'Syne', sans-serif;

    --font-size-xs: 11.5px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* TRANSITIONS */
    --transition-base: 0.2s ease-in-out;

    /* SHADOWS */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* LAYOUT */
    --container-width: 1200px;
    --container-padding: 24px;
}

@media (max-width: 1024px) {
    :root {
        --container-padding: 20px;
    }
}

@media (max-width: 640px) {
    :root {
        --container-padding: 16px;
    }
}
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--txt);
    background: #fff;
    overflow-x: hidden
}

h1,
h2,
h3,
h4 {
    font-family: 'Syne', sans-serif
}
/* ── TOP BAR ── */
.topbar {
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    padding: 7px 0;
    letter-spacing: .3px
}

.topbar a {
    color: white;
    text-decoration: none
}
/* UTILITY CLASSES AND HELPERS */

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 24px;
}

.container--center {
    text-align: center;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-navy { color: var(--navy); }
.text-cyan { color: var(--cyan); }
.text-white { color: #fff; }

.inline-block { display: inline-block; text-decoration: none; }
.inline-flex { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; width: fit-content; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gap-md { gap: 16px; }

.bg-navy { background: var(--navy); }
.bg-navy-border { background: var(--navy); border: 1px solid white; }
.bg-transparent-white { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }
.bg-whatsapp { background: #25d366; }
.bg-facebook { background: #0d1b3e; }
.bg-twitter { background: #7c3aed; }
.bg-instagram { background: #d97706; }
.bg-youtube { background: #e11d48; }
.bg-telegram { background: #059669; }

.color-white { color: #fff; }
.hidden { display: none; }
.mt-md { margin-top: 16px; }
.logo-md { height: 48px; object-fit: contain; border-radius: 8px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
/* ── TOP BAR ── */
.topbar {
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    padding: 7px 0;
    letter-spacing: .3px
}

.topbar a {
    color: white;
    text-decoration: none
}

/* ── NAV ── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffffee;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e8ecf8;
    padding: 0 0
}

.nav-inner {
    max-width: 1200px;
    margin: auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.logo-wrap img {
    height: 44px;
    object-fit: contain;
    scale: 1.5;
}

.desktop-links {
    display: flex;
    align-items: center;
    gap: 32px
}

.desktop-links a {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--txt);
    text-decoration: none;
    transition: color .2s
}

.desktop-links a:hover {
    color: var(--navy)
}

.nav-cta {
    background: var(--navy);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: .3px;
    transition: background .2s, transform .15s
}

.nav-cta:hover {
    transform: translateY(-1px);

    box-shadow: 0 8px 24px #11135e59;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border: none;
    background: transparent
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .3s
}

.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 16px 24px 20px;
    gap: 4px;
    border-top: 1px solid #e8ecf8;
    background: #fff
}

.mobile-menu a {
    padding: 10px 0;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--txt);
    text-decoration: none;
    border-bottom: 1px solid #f0f2f8;
    letter-spacing: .4px;
    text-transform: uppercase
}

.mobile-menu.open {
    display: flex
}

/* ── SECTION COMMON ── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lite);
    border: 1px solid #d6e0ff;
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 14px
}

.section-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--mid);
    line-height: 1.15;
    margin-bottom: 10px
}

.section-title em {
    font-style: normal;
    color: var(--navy)
}

.section-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto
}

.sec-divider {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--cyan);
    border-radius: 2px;
    margin: 12px auto 0
}

/* ── FOOTER ── */
footer {
    background: var(--navy);
    color: #fff
}

.footer-main {
    max-width: 1200px;
    margin: auto;
    padding: 64px 24px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 48px
}
.footer-brand{
height: fit-content;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;

    background-color: white;
    padding: 8px;
}
.footer-brand p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--navy);
    margin: 16px 0 20px;
}

.social-row {
    display: flex;
    gap: 10px
}

.soc {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    cursor: pointer
}

.soc:hover {
    background: var(--mid);
    border-color: var(--mid)
}

.soc svg {
    width: 14px;
    height: 14px;
    fill: #fff
}

.footer-col h4 {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 20px
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-col ul li a {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
    gap: 6px
}

.footer-col ul li a:hover {
    color: var(--cyan)
}

.footer-col ul li a::before {
    content: '→';
    font-size: 10px;
    opacity: 0;
    transition: opacity .2s
}

.footer-col ul li a:hover::before {
    opacity: 1
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 12px
}

.contact-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .5
}

.footer-book {
    display: inline-block;
    margin-top: 20px;
    background: var(--gold);
    color: var(--ink);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: .3px;
    transition: all .2s
}

.footer-book:hover {
    background: #ffe066;
    transform: translateY(-1px)
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    max-width: 1200px;
    margin: auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.footer-bottom p {
    font-size: 12px;
    color: rgba(255, 255, 255, .3)
}

.footer-bottom a {
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
    text-decoration: none;
    transition: color .2s
}

.footer-bottom a:hover {
    color: var(--cyan)
}

/* ── FLOATING BTNS ── */
.floats {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200
}

.float-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 24px #c6c6c659
}

.float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3)
}

.float-btn svg {
    width: 22px;
    height: 22px;
    fill: #fff
}