:root {
    --navy: #080a3f;
    --night: #140819;
    --plum: #241227;
    --pink: #f80478;
    --purple: #5f22e8;
    --blue: #0677ff;
    --cyan: #00bdf2;
    --orange: #ff7a00;
    --white: #ffffff;
    --paper: #f7f3f8;
    --text: #17112a;
    --muted: #6c6476;
    --line: rgba(255,255,255,.18);
    --dark-line: rgba(23,17,42,.12);
    --grad: linear-gradient(110deg, var(--orange), var(--pink) 30%, var(--purple) 62%, var(--cyan));
    --shadow: 0 22px 60px rgba(8, 10, 63, .18);
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    color: var(--text);
    background: var(--paper);
    line-height: 1.55;
    overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, .btn, .eyebrow { font-family: "Space Grotesk", "Manrope", Arial, sans-serif; }

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    height: 78px;
    padding: 10px clamp(18px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(20, 8, 25, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    max-width: 100vw;
}

.site-header::after {
    content: "";
    position: absolute;
    left: clamp(18px, 4vw, 64px);
    right: clamp(18px, 4vw, 64px);
    bottom: 0;
    height: 3px;
    background: var(--grad);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo {
    width: 118px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.nav a {
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.hero-vip {
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 132px clamp(18px, 5vw, 76px) 72px;
    color: var(--white);
    background: var(--night);
}

.hero-media,
.hero-shade { position: absolute; inset: 0; }
.hero-media {
    background: url("../images/sales-meeting.jpg") center / cover;
    opacity: .34;
    filter: saturate(.95) contrast(1.05);
}
.hero-shade {
    background:
        linear-gradient(104deg, rgba(20,8,25,.96) 0 45%, rgba(49,19,50,.76) 72%, rgba(8,10,63,.72)),
        radial-gradient(circle at 82% 38%, rgba(0,189,242,.18), transparent 32%);
}

.hero-vip::after {
    content: "";
    position: absolute;
    left: clamp(18px, 5vw, 76px);
    bottom: 52px;
    width: min(520px, 70vw);
    height: 6px;
    border-radius: 999px;
    background: var(--grad);
}

.hero-vip-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    min-width: 0;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-vip h1 {
    margin: 0 0 20px;
    max-width: 880px;
    font-size: clamp(44px, 7vw, 96px);
    line-height: .94;
    letter-spacing: 0;
    text-transform: uppercase;
}
.mobile-title { display: none; }

.hero-vip p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
}

.hero-chips,
.hero-actions,
.job-live-strip,
.job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero-chips { margin: 24px 0 4px; }
.hero-chips span,
.job-live-strip span {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
}

.btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--grad);
    color: var(--white);
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 16px 38px rgba(8,10,63,.22);
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.btn-ghost-light {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.24);
}

.signal-panel {
    position: absolute;
    z-index: 3;
    right: clamp(18px, 5vw, 76px);
    bottom: 64px;
    width: min(340px, calc(100vw - 36px));
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}
.signal-panel span { color: rgba(255,255,255,.70); font-size: 13px; font-weight: 800; }
.signal-panel strong { display: block; margin: 10px 0 16px; color: var(--white); font-size: 24px; line-height: 1.12; }
.signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.signal-grid small { padding: 8px 9px; border-radius: 999px; background: rgba(255,255,255,.10); text-align: center; font-weight: 800; }

.arica-job,
.split-feature,
.vip-band,
.method-section,
.editorial-photo,
.public-ecosystem,
.government-news,
.closed-offers,
.form-page,
.message-page,
.legal {
    padding: clamp(58px, 8vw, 106px) clamp(18px, 5vw, 76px);
}

.arica-job {
    position: relative;
    background:
        linear-gradient(135deg, rgba(20,8,25,.96), rgba(54,20,54,.84)),
        url("../images/phone-sales.jpg") center / cover;
    color: var(--white);
}
.job-badge {
    display: inline-flex;
    margin-bottom: 22px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--grad);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.job-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) repeat(2, minmax(250px, .75fr));
    gap: 18px;
}
.job-main { grid-row: span 2; }
.job-main h2,
.feature-copy h2,
.vip-band h2,
.method-section h2,
.editorial-photo h2,
.public-ecosystem h2,
.government-news h2,
.closed-offers h2,
.final-cta h2 {
    margin: 0 0 16px;
    font-size: clamp(34px, 5vw, 66px);
    line-height: 1;
    letter-spacing: 0;
}
.job-main p,
.job-card p,
.job-card li {
    color: rgba(255,255,255,.82);
    font-weight: 750;
}
.job-card {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
}
.job-card h3 { margin: 0 0 10px; color: var(--white); }
.job-card ul { margin: 0; padding-left: 18px; }
.job-card li { margin: 8px 0; }
.job-contact { color: rgba(255,255,255,.9) !important; font-weight: 900; }

.ticker {
    display: flex;
    gap: 12px;
    overflow: hidden;
    padding: 14px clamp(18px, 5vw, 76px);
    background: var(--grad);
}
.ticker span {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--white);
    color: var(--text);
}
.stats-strip div { padding: clamp(24px, 4vw, 42px); border-right: 1px solid var(--dark-line); }
.stats-strip strong { display: block; font-size: clamp(40px, 5vw, 66px); line-height: 1; background: var(--grad); -webkit-background-clip: text; color: transparent; }
.stats-strip span { color: var(--muted); font-weight: 900; }

.split-feature,
.method-section,
.public-ecosystem,
.government-news,
.closed-offers {
    background: var(--paper);
    color: var(--text);
}
.split-feature {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
    gap: clamp(30px, 6vw, 78px);
    align-items: center;
}
.feature-copy p,
.vip-band p,
.method-section p,
.editorial-photo p,
.public-ecosystem p,
.government-news p,
.closed-offers p,
.message-page p,
.legal p {
    color: var(--muted);
    font-weight: 750;
}
.image-stack { position: relative; }
.image-stack img,
.vip-band-media img,
.editorial-photo img {
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.image-stack img { aspect-ratio: 4/3; }
.floating-tag,
.mini-card {
    position: absolute;
    z-index: 3;
    border-radius: 999px;
    background: var(--grad);
    color: var(--white);
    box-shadow: var(--shadow);
}
.floating-tag { padding: 9px 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.tag-top { top: 22px; right: 22px; }
.tag-side { left: -12px; top: 42%; }
.mini-card { left: -18px; bottom: 22px; width: min(330px, 86%); padding: 18px; border-radius: 20px; }
.mini-card b, .mini-card span { display: block; }
.mini-card span { color: rgba(255,255,255,.84); }

.vip-band,
.editorial-photo,
.final-cta {
    background: linear-gradient(135deg, var(--night), #321834);
    color: var(--white);
}
.vip-band {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
}
.vip-band-media img { height: 100%; min-height: 500px; border-radius: 0 24px 24px 0; }
.vip-band-copy { padding: clamp(42px, 7vw, 88px); align-self: center; }

.method-grid,
.institution-grid,
.news-grid,
.offers-grid {
    display: grid;
    gap: 16px;
}
.method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.institution-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 680px; overflow: auto; padding-right: 8px; }

.method-grid article,
.institution-card,
.news-post,
.closed-offer,
.form-card {
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--dark-line);
    box-shadow: var(--shadow);
}
.method-grid article,
.institution-card,
.news-post,
.closed-offer { padding: 22px; color: var(--text); text-decoration: none; }
.method-grid article span { font-size: 38px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; color: transparent; }
.method-grid h3, .institution-card h3, .news-post h3, .closed-offer h3 { margin: 12px 0 8px; line-height: 1.12; }
.institution-card img { width: 138px; height: 58px; object-fit: contain; object-position: left center; }
.institution-card > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--grad); color: var(--white); font-weight: 900; }
.news-post.featured {
    grid-column: span 2;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(20,8,25,.95), rgba(54,20,54,.78)),
        url("../images/business-team.jpg") center / cover;
}
.news-post span,
.closed-offer small {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #efe6f5;
    color: var(--pink);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.news-post.featured p, .news-post.featured span { color: rgba(255,255,255,.84); }
.closed-offer p { font-size: 14px; }

.editorial-photo {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, .9fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.editorial-photo img { aspect-ratio: 16/10; }

.final-cta { padding: clamp(60px, 8vw, 118px) clamp(18px, 5vw, 76px); }
.final-cta span { color: rgba(255,255,255,.72); font-weight: 900; }
.final-cta h2 { max-width: 900px; }

.form-page {
    min-height: 100svh;
    padding-top: 120px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: start;
    background:
        linear-gradient(130deg, rgba(20,8,25,.94), rgba(54,20,54,.74)),
        url("../images/sales-strategy.jpg") center / cover fixed;
    color: var(--white);
}
.form-copy { position: sticky; top: 110px; }
.form-copy h1, .message-page h1, .legal h1 { margin: 0 0 18px; font-size: clamp(40px, 6vw, 82px); line-height: 1; }
.form-card { padding: clamp(24px, 4vw, 38px); color: var(--text); }
label { display: grid; gap: 7px; margin-bottom: 16px; font-weight: 900; }
input, select, textarea { width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid rgba(23,17,42,.14); border-radius: 12px; font: inherit; }
textarea { resize: vertical; }
.hp { position: absolute; left: -10000px; }
.field-note, .form-hint { color: var(--muted); font-size: 13px; font-weight: 800; }
.form-hint { margin: 16px 0 0; padding: 12px; border-radius: 12px; background: #f3edf7; }

.arica-detail {
    padding: clamp(58px, 8vw, 110px) clamp(18px, 5vw, 76px);
    background: var(--paper);
    color: var(--text);
}
.arica-detail .section-heading {
    max-width: 920px;
    margin-bottom: clamp(24px, 4vw, 42px);
}
.arica-detail h2 {
    margin: 12px 0 14px;
    font-size: clamp(34px, 5.5vw, 76px);
    line-height: .98;
    max-width: 840px;
}
.arica-detail .section-heading p {
    max-width: 760px;
    color: var(--muted);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.detail-grid article {
    min-width: 0;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--dark-line);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.detail-grid article:nth-child(2),
.detail-grid article:nth-child(4) {
    grid-column: span 2;
}
.detail-grid h3 {
    margin: 0 0 12px;
    font-size: clamp(19px, 2vw, 26px);
}
.detail-grid p,
.detail-grid li {
    color: var(--muted);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.55;
}
.detail-grid ul {
    margin: 0 0 14px;
    padding-left: 19px;
}
.detail-grid .btn {
    margin-top: 6px;
}
.arica-apply-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--night);
    color: var(--white);
    box-shadow: var(--shadow);
}
.arica-apply-note span {
    color: rgba(255,255,255,.78);
    font-weight: 800;
}

.message-page, .legal { min-height: 72vh; padding-top: 130px; max-width: 900px; }
.admin-page {
    max-width: none;
}
.admin-table-wrap {
    overflow: auto;
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.admin-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    color: var(--text);
}
.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--dark-line);
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}
.admin-table th {
    background: #f3edf7;
    font-weight: 900;
}
.site-footer { padding: 36px clamp(18px, 5vw, 76px); background: var(--night); color: var(--white); }
.site-footer p, .site-footer small, .footer-links { color: rgba(255,255,255,.70); }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }

.floating-actions { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; gap: 9px; align-items: center; }
.whatsapp-chat, .float-btn { min-height: 52px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 900; box-shadow: var(--shadow); }
.whatsapp-chat { background: #21dd8b; color: var(--navy); }
.whatsapp-chat b, .whatsapp-chat small { display: block; line-height: 1.12; }
.wa-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.25); }
.float-btn { background: var(--grad); color: var(--white); }

.live-notifications { position: fixed; left: 18px; bottom: 18px; z-index: 58; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.live-toast { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.94); color: var(--text); border-left: 6px solid var(--pink); box-shadow: var(--shadow); opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .35s ease; }
.live-toast.is-active { opacity: 1; transform: translateY(0); }
.live-toast b, .live-toast span { display: block; }
.live-toast b { color: var(--pink); font-size: 12px; text-transform: uppercase; }
.live-toast span { font-weight: 900; font-size: 14px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
    .site-header {
        position: fixed;
        height: auto;
        min-height: 62px;
        padding: 8px 12px;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        overflow: hidden;
    }
    .site-header::after {
        left: 12px;
        right: 12px;
        height: 2px;
    }
    .brand {
        flex: 0 0 auto;
    }
    .brand-logo {
        width: 58px;
        height: 46px;
        object-fit: contain;
    }
    .nav {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 82px);
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 8px;
        padding: 2px 2px 6px;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
    .nav a {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .hero-vip {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 46px;
        overflow: hidden;
    }
    .hero-vip::after {
        bottom: 22px;
        width: 62vw;
    }
    .hero-vip h1 {
        max-width: 100%;
        font-size: clamp(38px, 12vw, 58px);
        line-height: .96;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }
    .hero-vip p {
        max-width: 100%;
        font-size: 17px;
        line-height: 1.45;
    }
    .hero-chips {
        margin-top: 18px;
    }
    .hero-chips span {
        font-size: 12px;
        padding: 7px 10px;
    }
    .signal-panel { position: relative; right: auto; bottom: auto; margin-top: 28px; }
    .stats-strip, .job-layout, .split-feature, .vip-band, .method-grid, .institution-grid, .news-grid, .editorial-photo, .form-page, .detail-grid { grid-template-columns: 1fr; }
    .detail-grid article:nth-child(2),
    .detail-grid article:nth-child(4) {
        grid-column: auto;
    }
    .job-main { grid-row: auto; }
    .vip-band-media img { min-height: 320px; border-radius: 24px; }
    .form-copy { position: static; }
    .news-post.featured { grid-column: auto; }
    .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .site-header {
        min-height: 58px;
    }
    .brand-logo {
        width: 48px;
        height: 40px;
    }
    .nav a { padding: 7px 10px; font-size: 12px; }
    .hero-vip {
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 84px;
    }
    .hero-vip h1 {
        font-size: clamp(31px, 10vw, 42px);
        line-height: 1.02;
        max-width: calc(100vw - 44px);
    }
    .desktop-title { display: none; }
    .mobile-title { display: inline; }
    .hero-vip p {
        max-width: calc(100vw - 44px);
        font-size: 16px;
    }
    .eyebrow {
        font-size: 11px;
        padding: 7px 10px;
        max-width: 100%;
    }
    .signal-panel {
        display: none;
    }
    .arica-job,
    .split-feature,
    .vip-band,
    .method-section,
    .editorial-photo,
    .public-ecosystem,
    .government-news,
    .closed-offers,
    .form-page,
    .arica-detail,
    .message-page,
    .legal {
        padding-left: 22px;
        padding-right: 22px;
    }
    .job-main h2,
    .feature-copy h2,
    .vip-band h2,
    .method-section h2,
    .editorial-photo h2,
    .public-ecosystem h2,
    .government-news h2,
    .closed-offers h2,
    .final-cta h2 {
        font-size: clamp(28px, 9vw, 40px);
        line-height: 1.05;
    }
    .job-card,
    .method-grid article,
    .institution-card,
    .news-post,
    .closed-offer {
        padding: 18px;
    }
    .hero-actions, .job-actions, .floating-actions { align-items: stretch; flex-direction: column; }
    .hero-actions {
        width: 100%;
    }
    .hero-chips {
        width: 100%;
    }
    .hero-chips span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .floating-actions { left: 12px; right: 12px; bottom: 12px; }
    .whatsapp-chat, .float-btn, .btn { width: 100%; }
    .live-notifications { left: 12px; right: 12px; bottom: 140px; width: auto; }
    .offers-grid { grid-template-columns: 1fr; max-height: 560px; }
    .mini-card { left: 12px; right: 12px; width: auto; }
    .tag-side { left: 12px; top: auto; bottom: 112px; }
    .arica-apply-note {
        grid-template-columns: 1fr;
    }
}