/* Consola22 · Contacto V2 */

.contact-page {
    padding: clamp(56px, 7vw, 88px) 0 26px;
}

.contact-hero {
    max-width: 860px;
    margin-bottom: clamp(38px, 5vw, 58px);
}

.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: stretch;
}

.contact-email-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 38px);
    border-radius: 22px;
    background:
        radial-gradient(circle at 95% 3%, rgba(34, 199, 214, .15), transparent 32%),
        linear-gradient(145deg, #102D36, #153B46);
    color: #fff;
}

.contact-card-kicker {
    margin: 0;
    color: #89D8E1;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.contact-email {
    display: block;
    margin-top: 15px;
    color: #fff;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 830;
    line-height: 1.12;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-email:hover,
.contact-email:focus-visible {
    color: #B8F2F7;
    outline: none;
}

.contact-email-copy {
    max-width: 540px;
    margin: 15px 0 0;
    color: #AEC4C9;
    font-size: .88rem;
    line-height: 1.6;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 23px;
}

.contact-primary-action,
.contact-copy-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 820;
    cursor: pointer;
    text-decoration: none;
}

.contact-primary-action {
    border: 1px solid rgba(34, 199, 214, .30);
    background: rgba(34, 199, 214, .13);
    color: #fff;
}

.contact-primary-action span {
    color: var(--c22-accent);
}

.contact-copy-button {
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .055);
    color: #D7E5E8;
}

.contact-primary-action:hover,
.contact-primary-action:focus-visible,
.contact-copy-button:hover,
.contact-copy-button:focus-visible {
    background: rgba(34, 199, 214, .18);
    outline: none;
}

.contact-copy-status {
    min-height: 1.3em;
    margin: 8px 0 0;
    color: #CBECDD;
    font-size: .72rem;
}

.contact-terminal {
    display: grid;
    gap: 3px;
    margin-top: 35px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px;
    background: rgba(5, 20, 25, .18);
    color: #829FA5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
}

.contact-terminal span:first-child,
.terminal-cursor {
    color: #69D8E2;
}

.contact-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.contact-reasons article {
    min-height: 190px;
    padding: 23px;
    border: 1px solid var(--c22-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--c22-shadow-sm);
}

.contact-reason-index {
    color: var(--c22-accent-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .67rem;
    font-weight: 850;
}

.contact-reasons h2 {
    margin: 17px 0 8px;
    color: var(--c22-deep);
    font-size: 1.03rem;
    letter-spacing: -.02em;
}

.contact-reasons p {
    margin: 0;
    color: var(--c22-muted);
    font-size: .83rem;
    line-height: 1.58;
}

.contact-incident,
.contact-about {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(38px, 7vw, 92px);
    margin-top: clamp(58px, 7vw, 82px);
    padding-top: clamp(45px, 6vw, 66px);
    border-top: 1px solid var(--c22-border);
}

.contact-incident-list {
    display: grid;
    border-top: 1px solid var(--c22-border);
}

.contact-incident-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--c22-border);
}

.contact-incident-list span {
    color: var(--c22-accent-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 850;
}

.contact-incident-list p {
    margin: 0;
    color: var(--c22-muted);
    font-size: .86rem;
}

.contact-incident-list strong {
    color: var(--c22-deep);
}

.contact-sensitive {
    grid-column: 2;
    padding: 18px 20px;
    border-left: 3px solid var(--c22-warning);
    background: rgba(216, 155, 43, .07);
}

.contact-sensitive strong {
    color: var(--c22-deep);
    font-size: .84rem;
}

.contact-sensitive p {
    margin: 5px 0 0;
    color: var(--c22-muted);
    font-size: .79rem;
    line-height: 1.55;
}

.contact-about {
    padding-bottom: 52px;
}

.contact-about-copy p {
    max-width: 720px;
    margin: 0;
    color: var(--c22-muted);
    line-height: 1.72;
}

.contact-about-copy a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: var(--c22-deep);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.contact-about-copy a span {
    color: var(--c22-accent-strong);
}

.contact-about-copy a:hover,
.contact-about-copy a:focus-visible {
    color: var(--c22-accent-strong);
    outline: none;
}

@media (min-width: 851px) and (max-width: 1280px) {
    .contact-email {
        font-size: 1.9rem;
    }
}

@media (max-width: 850px) {
    .contact-main-grid,
    .contact-incident,
    .contact-about {
        grid-template-columns: 1fr;
    }

    .contact-sensitive {
        grid-column: 1;
    }
}

@media (max-width: 620px) {
    .contact-page {
        padding-top: 46px;
    }

    .contact-reasons {
        grid-template-columns: 1fr;
    }

    .contact-reasons article {
        min-height: 0;
    }

    .contact-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-primary-action,
    .contact-copy-button {
        width: 100%;
    }

    .contact-terminal {
        margin-top: 28px;
    }

    .contact-incident,
    .contact-about {
        margin-top: 48px;
        padding-top: 42px;
    }

    .contact-about {
        padding-bottom: 30px;
    }
}