.contact-page{
    --ct-bg: #0b0f14;
    --ct-text: #e6edf3;
    --ct-muted: #c9d1d9;

    --ct-border: rgba(255,255,255,.10);
    --ct-glass: rgba(255,255,255,.04);
    --ct-glass-strong: rgba(255,255,255,.06);
    --ct-shadow: 0 18px 50px rgba(0,0,0,.45);

    --ct-accent: #7ee787;

    min-height: 100vh;
    color: var(--ct-text);

    background:
            radial-gradient(1200px 600px at 20% 20%, #1f2937 0%, var(--ct-bg) 60%),
            radial-gradient(1000px 520px at 80% 70%, #111827 0%, var(--ct-bg) 55%);
}

.contact-page h1,
.contact-page h2,
.contact-page h3{
    color: var(--ct-text);
    letter-spacing: .2px;
}

.contact-page p{
    color: var(--ct-muted);
}

.contact-page .container{
    background: transparent;
}

.contact-page .text-muted{
    color: rgba(201,209,217,.75) !important;
}
.contact-page .text-body-secondary{
    color: rgba(201,209,217,.78) !important;
}

/* Links */
.contact-page a{
    color: var(--ct-accent);
    text-decoration: none;
    font-weight: 700;
}
.contact-page a:hover{
    text-decoration: underline;
}

/* HR */
.contact-page hr{
    border-color: rgba(255,255,255,.12);
    opacity: 1;
}

/* Badges */
.contact-page .badge{
    border: 1px solid rgba(255,255,255,.10);
}
.contact-page .badge.text-bg-primary{
    background: rgba(13,110,253,.18) !important;
    color: rgba(230,237,243,.92) !important;
}

/* ===== Cards glass (medios + formulario) ===== */
.contact-page .card{
    border-radius: 18px;
    border: 1px solid var(--ct-border) !important;
    background: linear-gradient(180deg, var(--ct-glass), rgba(255,255,255,.02)) !important;
    box-shadow: var(--ct-shadow) !important;
    backdrop-filter: blur(10px);
}

.contact-page .card-body{
    color: rgba(230,237,243,.88);
}

/* Hover solo para las cards de medios */
.contact-card{
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.contact-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.55) !important;
    background: linear-gradient(180deg, var(--ct-glass-strong), rgba(255,255,255,.03)) !important;
}

/* ===== Icono circular ===== */
.contact-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,110,253,0.10);
    border: 1px solid rgba(13,110,253,0.18);
    flex: 0 0 auto;
}
.contact-icon i{
    font-size: 1.2rem;
    color: rgba(230,237,243,.92);
}

/* ===== Botones ===== */
.contact-page .btn-outline-primary{
    color: rgba(230,237,243,.86);
    border-color: rgba(13,110,253,.45);
    background: rgba(13,110,253,.07);
}
.contact-page .btn-outline-primary:hover{
    background: rgba(13,110,253,.14);
    border-color: rgba(13,110,253,.65);
}

.contact-page .btn-outline-secondary{
    color: rgba(230,237,243,.78);
    border-color: rgba(255,255,255,.20);
    background: rgba(255,255,255,.06);
}
.contact-page .btn-outline-secondary:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
}

/* Botón success (WhatsApp) para que no choque */
.contact-page .btn-success{
    background: rgba(25,135,84,.18);
    border-color: rgba(25,135,84,.35);
    color: rgba(230,237,243,.92);
}
.contact-page .btn-success:hover{
    background: rgba(25,135,84,.28);
    border-color: rgba(25,135,84,.45);
}

/* ===== Form controls (dark) ===== */
.contact-page .form-label{
    color: rgba(230,237,243,.86);
    font-weight: 650;
}

.contact-page .form-control{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(230,237,243,.92);
    border-radius: 14px;
}
.contact-page .form-control::placeholder{
    color: rgba(201,209,217,.55);
}
.contact-page .form-control:focus{
    background: rgba(255,255,255,.07);
    border-color: rgba(13,110,253,.55);
    box-shadow: 0 0 0 .18rem rgba(13,110,253,.18);
    color: rgba(230,237,243,.95);
}

/* Validaciones */
.contact-page .validation-message{
    font-size: .85rem;
    color: rgba(255,180,180,.92);
    margin-top: .25rem;
}

/* Alert success dark-friendly */
.contact-page .alert-success{
    background: rgba(25,135,84,.16);
    border-color: rgba(25,135,84,.22);
    color: rgba(230,237,243,.92);
}

/* ===== Redes sociales (image cards) ===== */
.social-image-card{
    position: relative;
    height: 92px;
    border-radius: 16px;

    background-size: cover;
    background-position: center;

    color: #fff;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: .7rem;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 .35rem 1.1rem rgba(0,0,0,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.social-image-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25));
}
.social-image-card i,
.social-image-card span{
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.social-image-card i{ font-size: 1.15rem; }
.social-image-card span{ font-size: .9rem; font-weight: 700; }

.social-image-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 .7rem 1.4rem rgba(0,0,0,.55);
    text-decoration: none;
}

/* ===== Encabezado ===== */
.contact-title{
    position: relative;
    display: inline-block;
    padding-bottom: .4rem;
}
.contact-title::after{
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48%;
    height: 3px;
    background: linear-gradient(
            to right,
            var(--bs-primary),
            rgba(13,110,253,.25)
    );
    border-radius: 3px;
}

.contact-intro{
    max-width: 620px;
    line-height: 1.6;
}

/* Responsive tweaks */
@media (max-width: 768px){
    .social-image-card{ height: 86px; }
}