:root {
    --contact-navy: #0b2742;
    --contact-blue: #0d67b5;
    --contact-blue-dark: #084c86;
    --contact-cyan: #18a6b7;
    --contact-green: #16865f;
    --contact-paper: #f4f8fb;
    --contact-white: #fff;
    --contact-text: #243649;
    --contact-muted: #637387;
    --contact-border: #dce6ee;
    --contact-shadow: 0 24px 70px rgba(11, 39, 66, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--contact-text);
    background: var(--contact-paper);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
a { color: inherit; }

.contact-header {
    min-height: 82px;
    padding: 12px clamp(20px, 5vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--contact-border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
}
.contact-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.contact-brand img { width: 48px; height: 48px; object-fit: contain; }
.contact-brand span { display: grid; line-height: 1.25; }
.contact-brand strong { color: var(--contact-navy); font-size: 1rem; }
.contact-brand small { color: var(--contact-muted); font-size: .79rem; letter-spacing: .035em; }
.contact-header nav { display: flex; align-items: center; gap: 24px; }
.contact-header nav a { font-size: .92rem; font-weight: 700; text-decoration: none; }
.contact-header__cta { color: var(--contact-white) !important; background: var(--contact-blue); padding: 10px 16px; border-radius: 10px; }

main { overflow: hidden; }
.contact-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(64px, 8vw, 112px) 28px clamp(60px, 8vw, 104px);
}
.contact-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -250px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 166, 183, .16), rgba(24, 166, 183, 0) 70%);
    pointer-events: none;
}
.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--contact-blue-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.contact-hero h1 {
    max-width: 760px;
    margin: 18px 0 20px;
    color: var(--contact-navy);
    font-size: clamp(2.6rem, 5.6vw, 5.25rem);
    line-height: .98;
    letter-spacing: -.055em;
}
.contact-lead { max-width: 760px; margin: 0; color: #40566d; font-size: clamp(1.06rem, 1.8vw, 1.27rem); line-height: 1.7; }
.contact-guidance {
    max-width: 760px;
    margin-top: 28px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--contact-white);
    border: 1px solid var(--contact-border);
    border-left: 4px solid var(--contact-cyan);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(11, 39, 66, .06);
}
.contact-guidance i { color: var(--contact-cyan); font-size: 1.35rem; margin-top: 2px; }
.contact-guidance p { margin: 0; }
.contact-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.contact-button {
    min-height: 48px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 11px;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-button:hover { transform: translateY(-2px); }
.contact-button:focus-visible, .contact-header a:focus-visible { outline: 3px solid #58bff5; outline-offset: 3px; }
.contact-button--primary { color: #fff; background: linear-gradient(135deg, var(--contact-blue), var(--contact-blue-dark)); box-shadow: 0 12px 26px rgba(13, 103, 181, .24); }
.contact-button--quiet { color: var(--contact-blue-dark); background: #fff; border: 1px solid var(--contact-border); }
.contact-privacy {
    position: relative;
    padding: 36px;
    color: #eaf6ff;
    background: linear-gradient(155deg, #103a5e, #081f36);
    border-radius: 22px;
    box-shadow: var(--contact-shadow);
    overflow: hidden;
}
.contact-privacy::after { content: ""; position: absolute; width: 170px; height: 170px; right: -65px; bottom: -75px; border: 28px solid rgba(255,255,255,.05); border-radius: 50%; }
.contact-privacy__icon { width: 56px; height: 56px; margin-bottom: 24px; display: grid; place-items: center; color: #fff; background: rgba(24, 166, 183, .26); border: 1px solid rgba(255,255,255,.17); border-radius: 15px; font-size: 1.65rem; }
.contact-privacy strong { display: block; color: #fff; font-size: 1.38rem; line-height: 1.3; }
.contact-privacy p { color: #bed0df; margin: 14px 0 24px; }
.contact-privacy div { margin-top: 11px; display: flex; gap: 9px; align-items: center; font-size: .93rem; font-weight: 700; }
.contact-privacy div i { color: #5ee4b4; }

.contact-team { padding: clamp(64px, 8vw, 108px) 28px; background: #fff; border-top: 1px solid var(--contact-border); }
.contact-section-heading { max-width: 1184px; margin: 0 auto 38px; }
.contact-section-heading h2 { margin: 10px 0 8px; color: var(--contact-navy); font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.1; letter-spacing: -.04em; }
.contact-section-heading p { margin: 0; color: var(--contact-muted); font-size: 1.05rem; }
.contact-team__grid { max-width: 1184px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-person { min-height: 360px; display: grid; grid-template-columns: minmax(180px, 39%) minmax(0, 61%); background: var(--contact-white); border: 1px solid var(--contact-border); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(11, 39, 66, .08); transition: transform .22s ease, box-shadow .22s ease; }
.contact-person:hover { transform: translateY(-4px); box-shadow: 0 22px 55px rgba(11, 39, 66, .13); }
.contact-person__portrait { position: relative; min-height: 100%; display: grid; place-items: center; background: linear-gradient(145deg, #dcebf5, #b8d7e8); overflow: hidden; }
.contact-person__portrait::before { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.contact-person__portrait img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.contact-person__portrait > span { position: relative; color: var(--contact-blue-dark); font-size: 3.25rem; font-weight: 800; letter-spacing: -.05em; }
.contact-person__status { position: absolute; right: 16px; bottom: 16px; width: 17px; height: 17px; background: #25c486; border: 4px solid #fff; border-radius: 50%; box-sizing: content-box; }
.contact-person__body { padding: 30px; display: flex; flex-direction: column; align-items: flex-start; }
.contact-person__label { color: var(--contact-blue); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-person h3 { margin: 8px 0 6px; color: var(--contact-navy); font-size: 1.55rem; line-height: 1.18; letter-spacing: -.025em; }
.contact-person__role { margin: 0; color: var(--contact-blue-dark); font-size: .93rem; font-weight: 700; line-height: 1.45; }
.contact-person__scope { margin: 18px 0 24px; color: var(--contact-muted); font-size: .94rem; line-height: 1.58; }
.contact-button--whatsapp { margin-top: auto; color: #fff; background: var(--contact-green); box-shadow: 0 10px 22px rgba(22, 134, 95, .22); }
.contact-button--disabled { margin-top: auto; color: #72808d; background: #eef2f5; cursor: not-allowed; }
.contact-button--disabled:hover { transform: none; }

.contact-footer { padding: 24px clamp(20px, 5vw, 72px); display: flex; justify-content: space-between; gap: 18px; color: #b8c9d8; background: var(--contact-navy); font-size: .88rem; }
.contact-footer a { color: #fff; font-weight: 700; }

@media (max-width: 940px) {
    .contact-hero { grid-template-columns: 1fr; }
    .contact-privacy { max-width: 680px; }
    .contact-team__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .contact-header { align-items: flex-start; padding: 10px 16px; }
    .contact-brand img { width: 42px; height: 42px; }
    .contact-header nav > a:first-child { display: none; }
    .contact-header__cta { padding: 9px 11px !important; font-size: .8rem !important; }
    .contact-hero { padding: 54px 18px 64px; }
    .contact-hero h1 { font-size: clamp(2.55rem, 15vw, 4rem); }
    .contact-hero__actions, .contact-button { width: 100%; }
    .contact-privacy { padding: 28px 24px; }
    .contact-team { padding: 62px 18px; }
    .contact-person { grid-template-columns: 1fr; }
    .contact-person__portrait { min-height: 260px; }
    .contact-person__body { padding: 26px 22px; }
    .contact-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .contact-button, .contact-person { transition: none; }
}