/*
=============================================================
 MTG CONTACT PAGE · SAAS PREMIUM V1
=============================================================
*/

body.mtg-contact-page{
    background:
        linear-gradient(
            180deg,
            #fbfbff 0%,
            #ffffff 34%,
            #f8fafc 100%
        );
}


/* ==========================================================
   ROOT
========================================================== */

.mtg-contact{
    --mtg-saas-text:#0f172a;
    --mtg-saas-muted:#64748b;
    --mtg-saas-border:#e2e8f0;
    --mtg-saas-soft:#f8fafc;
    --mtg-saas-purple:#6d28d9;
    --mtg-saas-purple-2:#8b5cf6;

    width:min(1240px,92%);
    margin:0 auto;
    padding:54px 0 80px;
    box-sizing:border-box;
    color:var(--mtg-saas-text);
}


/* ==========================================================
   HERO
========================================================== */

.mtg-contact-hero{
    position:relative;
    display:grid;
    grid-template-columns:
        minmax(0,1.3fr)
        minmax(340px,.7fr);
    gap:40px;
    align-items:stretch;

    padding:52px;

    border:1px solid rgba(109,40,217,.15);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(139,92,246,.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 95%,
            rgba(59,130,246,.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfaff 54%,
            #f5f3ff 100%
        );

    box-shadow:
        0 28px 70px rgba(15,23,42,.08);

    overflow:hidden;
}


/*
Decoración SaaS
*/
.mtg-contact-hero::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-110px;
    bottom:-125px;
    border-radius:999px;
    background:
        rgba(124,58,237,.08);
    pointer-events:none;
}


.mtg-contact-hero::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    top:-50px;
    right:31%;
    border-radius:999px;
    background:
        rgba(59,130,246,.06);
    pointer-events:none;
}


.mtg-contact-hero__copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}


.mtg-contact-kicker{
    display:inline-flex;
    align-items:center;
    width:max-content;

    padding:8px 13px;
    margin-bottom:18px;

    border:1px solid
        rgba(109,40,217,.14);

    border-radius:999px;

    background:#f5f3ff;

    color:#6d28d9;

    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}


.mtg-contact-hero__copy h1{
    max-width:760px;
    margin:0;

    font-size:
        clamp(42px,5vw,68px);

    line-height:1.02;
    letter-spacing:-.055em;
    font-weight:950;
    color:#0b1120;
}


.mtg-contact-hero__copy > p{
    max-width:700px;
    margin:22px 0 0;

    color:#64748b;

    font-size:
        clamp(16px,1.5vw,19px);

    line-height:1.7;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.mtg-contact-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    margin-top:28px;
}


.mtg-contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    padding:0 21px;

    border-radius:14px;

    font-size:14px;
    font-weight:900;
    line-height:1;

    text-decoration:none !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


.mtg-contact-btn:hover{
    transform:translateY(-2px);
}


.mtg-contact-btn--primary{
    border:1px solid transparent;

    background:
        linear-gradient(
            135deg,
            var(--mtg-contact-accent,#6d28d9),
            #4f46e5
        );

    color:#fff !important;

    box-shadow:
        0 14px 30px
        color-mix(
            in srgb,
            var(--mtg-contact-accent,#6d28d9) 24%,
            transparent
        );
}


.mtg-contact-btn--light{
    border:1px solid #e2e8f0;
    background:#fff;
    color:#0f172a !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.05);
}


.mtg-contact-btn--light:hover{
    border-color:#c4b5fd;
}


/* ==========================================================
   HERO NOTE
========================================================== */

.mtg-contact-note{
    display:flex;
    align-items:center;
    gap:10px;

    width:max-content;
    max-width:100%;

    margin-top:24px;
    padding:11px 14px;

    border:1px solid #e2e8f0;
    border-radius:13px;

    background:
        rgba(255,255,255,.76);

    color:#475569;

    font-size:13px;
    line-height:1.45;
}


/* ==========================================================
   RIGHT CONTACT PANEL
========================================================== */

.mtg-contact-panel{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    padding:27px;

    border:1px solid
        rgba(255,255,255,.90);

    border-radius:24px;

    background:
        rgba(255,255,255,.86);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 45px
        rgba(15,23,42,.10);
}


.mtg-contact-panel__top{
    margin-bottom:18px;
    padding-bottom:17px;
    border-bottom:1px solid #eef2f7;
}


.mtg-contact-panel__top span{
    display:block;

    margin-bottom:7px;

    color:
        var(--mtg-contact-accent,#6d28d9);

    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}


.mtg-contact-panel__top h2{
    margin:0;

    color:#0f172a;

    font-size:23px;
    line-height:1.2;
    letter-spacing:-.025em;
    font-weight:900;
}


/* ==========================================================
   CONTACT DATA
========================================================== */

.mtg-contact-info-list{
    display:grid;
    gap:10px;
}


.mtg-contact-info-list > *{
    display:flex;
    flex-direction:column;
    gap:4px;

    padding:13px 14px;

    border:1px solid #eef2f7;
    border-radius:13px;

    background:#fafbff;

    text-decoration:none !important;

    transition:
        border-color .16s ease,
        transform .16s ease,
        background .16s ease;
}


.mtg-contact-info-list > a:hover{
    transform:translateX(2px);
    border-color:#ddd6fe;
    background:#fff;
}


.mtg-contact-info-list b{
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}


.mtg-contact-info-list span{
    color:#0f172a;
    font-size:14px;
    line-height:1.4;
    font-weight:800;
    word-break:break-word;
}


/* ==========================================================
   BENEFIT CARDS
========================================================== */

.mtg-contact-cards{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

    margin-top:24px;
}


.mtg-contact-cards > *{
    position:relative;

    min-width:0;
    padding:25px;

    border:1px solid #e7eaf0;
    border-radius:20px;

    background:#fff;

    box-shadow:
        0 12px 34px
        rgba(15,23,42,.045);

    overflow:hidden;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.mtg-contact-cards > *::before{
    content:"";

    display:block;

    width:36px;
    height:5px;

    margin-bottom:20px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--mtg-contact-accent,#6d28d9),
            #8b5cf6
        );
}


.mtg-contact-cards > *:hover{
    transform:translateY(-3px);

    border-color:#ddd6fe;

    box-shadow:
        0 18px 44px
        rgba(76,29,149,.08);
}


.mtg-contact-cards h2,
.mtg-contact-cards h3{
    margin:0 0 9px;

    color:#111827;

    font-size:18px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.02em;
}


.mtg-contact-cards p{
    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
   FORM + MAP
========================================================== */

.mtg-contact-main{
    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(330px,.85fr);

    gap:22px;

    align-items:stretch;

    margin-top:24px;
}


/* ==========================================================
   FORM
========================================================== */

.mtg-contact-form{
    padding:32px;

    border:1px solid #e5e7eb;
    border-radius:24px;

    background:#fff;

    box-shadow:
        0 18px 48px
        rgba(15,23,42,.055);
}


.mtg-contact-form__head{
    margin-bottom:24px;
    padding-bottom:21px;
    border-bottom:1px solid #eef2f7;
}


.mtg-contact-form__head span{
    display:inline-flex;

    margin-bottom:8px;

    color:
        var(--mtg-contact-accent,#6d28d9);

    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}


.mtg-contact-form__head h2{
    margin:0 0 7px;

    color:#0f172a;

    font-size:27px;
    line-height:1.18;
    letter-spacing:-.035em;
    font-weight:950;
}


.mtg-contact-form__head p{
    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}


/*
Campos.
Cubrir labels aunque el renderer
use label/span/div.
*/
.mtg-contact-form label{
    display:block;
    margin:0 0 16px;
}


.mtg-contact-form label > span,
.mtg-contact-form label > b{
    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:12px;
    font-weight:850;
}


.mtg-contact-form input,
.mtg-contact-form textarea,
.mtg-contact-form select{
    display:block;

    width:100%;
    max-width:none;

    box-sizing:border-box;

    border:1px solid #d8dee8;
    border-radius:12px;

    background:#fbfcfe;

    color:#0f172a;

    outline:none;

    font:inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.mtg-contact-form input,
.mtg-contact-form select{
    min-height:48px;
    padding:0 14px;
}


.mtg-contact-form textarea{
    min-height:124px;
    padding:13px 14px;
    resize:vertical;
}


.mtg-contact-form input:focus,
.mtg-contact-form textarea:focus,
.mtg-contact-form select:focus{
    border-color:
        var(--mtg-contact-accent,#7c3aed);

    background:#fff;

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--mtg-contact-accent,#7c3aed) 12%,
            transparent
        );
}


.mtg-contact-form button{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:52px;

    margin-top:4px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--mtg-contact-accent,#6d28d9),
            #4f46e5
        );

    color:#fff;

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 14px 28px
        color-mix(
            in srgb,
            var(--mtg-contact-accent,#6d28d9) 20%,
            transparent
        );

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.mtg-contact-form button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 34px
        color-mix(
            in srgb,
            var(--mtg-contact-accent,#6d28d9) 26%,
            transparent
        );
}


/* ==========================================================
   MAP
========================================================== */

.mtg-contact-map{
    display:flex;
    flex-direction:column;
    gap:16px;

    min-width:0;
}


.mtg-contact-map__box{
    position:relative;

    flex:1;

    min-height:360px;

    border:1px solid #e5e7eb;
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );

    overflow:hidden;

    box-shadow:
        0 18px 48px
        rgba(15,23,42,.055);
}


.mtg-contact-map__box iframe{
    display:block;

    width:100% !important;
    height:100% !important;

    min-height:420px;

    border:0;
}


.mtg-contact-map__fallback{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    min-height:360px;

    box-sizing:border-box;

    padding:30px;

    background:
        radial-gradient(
            circle at 82% 16%,
            rgba(124,58,237,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f5f3ff
        );
}


.mtg-contact-map__fallback::before{
    content:"⌖";

    display:flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    margin-bottom:auto;

    border-radius:16px;

    background:#fff;

    color:
        var(--mtg-contact-accent,#6d28d9);

    font-size:25px;
    font-weight:900;

    box-shadow:
        0 14px 30px
        rgba(76,29,149,.10);
}


.mtg-contact-map__fallback h2{
    margin:24px 0 8px;

    color:#0f172a;

    font-size:24px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.03em;
}


.mtg-contact-map__fallback p{
    margin:0;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}


/* ==========================================================
   SOCIAL LINKS
========================================================== */

.mtg-contact-social{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}


.mtg-contact-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;

    padding:0 14px;

    border:1px solid #e2e8f0;
    border-radius:999px;

    background:#fff;

    color:#334155;

    font-size:12px;
    font-weight:850;

    text-decoration:none !important;

    box-shadow:
        0 6px 16px
        rgba(15,23,42,.035);

    transition:
        transform .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.mtg-contact-social a:hover{
    transform:translateY(-2px);

    border-color:#c4b5fd;

    color:
        var(--mtg-contact-accent,#6d28d9);
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:980px){

    .mtg-contact{
        padding-top:32px;
    }


    .mtg-contact-hero{
        grid-template-columns:1fr;
        padding:38px;
    }


    .mtg-contact-panel{
        max-width:none;
    }


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


    .mtg-contact-map__box,
    .mtg-contact-map__fallback{
        min-height:300px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:680px){

    .mtg-contact{
        width:calc(100% - 28px);
        padding:22px 0 52px;
    }


    .mtg-contact-hero{
        gap:26px;

        padding:27px 20px;

        border-radius:22px;
    }


    .mtg-contact-hero__copy h1{
        font-size:
            clamp(36px,12vw,48px);
    }


    .mtg-contact-hero__copy > p{
        margin-top:17px;
        font-size:15px;
    }


    .mtg-contact-actions{
        align-items:stretch;
        flex-direction:column;
    }


    .mtg-contact-btn{
        width:100%;
        box-sizing:border-box;
    }


    .mtg-contact-note{
        width:100%;
        box-sizing:border-box;
    }


    .mtg-contact-panel{
        padding:21px;
        border-radius:18px;
    }


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


    .mtg-contact-cards > *{
        padding:21px;
    }


    .mtg-contact-main{
        gap:16px;
    }


    .mtg-contact-form{
        padding:22px 18px;
        border-radius:20px;
    }


    .mtg-contact-form__head h2{
        font-size:23px;
    }


    .mtg-contact-map__box{
        border-radius:20px;
    }


    .mtg-contact-map__fallback{
        padding:22px;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media(max-width:390px){

    .mtg-contact{
        width:calc(100% - 20px);
    }


    .mtg-contact-hero{
        padding:23px 16px;
    }


    .mtg-contact-panel{
        padding:17px;
    }


    .mtg-contact-form{
        padding:19px 15px;
    }
}