/* ===================================
   TALENTS MOZAMBIQUE CONTACT
   HERO + BASE
=================================== */

html{
    scroll-behavior:smooth;
}

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

.tmx-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.tmx-hero img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);
}

.tmx-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(15,23,42,.94),
    rgba(15,23,42,.72));
}

.tmx-hero::before{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    rgba(245,158,11,.15);

    top:-180px;
    right:-180px;

    filter:blur(60px);

    z-index:1;
}

.tmx-hero::after{

    content:'';

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    background:
    rgba(14,165,233,.12);

    left:-120px;
    bottom:-120px;

    filter:blur(60px);

    z-index:1;
}

.tmx-hero .container{

    position:relative;

    z-index:2;
    padding-top:5px;
}

.tmx-hero-content{

    max-width:720px;

    color:#fff;
}

.tmx-hero-content span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(15px);

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

    font-size:.78rem;

    font-weight:600;

    letter-spacing:2px;

    color:#fbbf24;
}

.tmx-hero-content h1{

    margin-top:22px;

    margin-bottom:18px;

    font-size:clamp(
        3rem,
        4vw,
        3.7rem
    );

    line-height:1.15;

    font-weight:700;
}

.tmx-hero-content p{

    max-width:620px;

    color:
    rgba(255,255,255,.85);

    line-height:1.9;

    font-size:1rem;
}

/* ===================================
   CONTACT SECTION
=================================== */

.tmx-contact-zone{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:

    radial-gradient(
    circle at top left,
    rgba(245,158,11,.08),
    transparent 28%),

    radial-gradient(
    circle at bottom right,
    rgba(14,165,233,.08),
    transparent 30%),

    linear-gradient(
    180deg,
    #f8fafc,
    #ffffff);
}

.tmx-contact-zone::before{

    content:'';

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    rgba(245,158,11,.05);

    top:-180px;
    left:-180px;
}

.tmx-contact-zone::after{

    content:'';

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    rgba(14,165,233,.05);

    right:-120px;
    bottom:-120px;
}

.tmx-layout{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    370px 1fr;

    gap:35px;
}

/* ===================================
   SCROLL ANIMATIONS BASE
=================================== */

.tmx-contact-card,
.tmx-proposal-box,
.tmx-location-map,
.tmx-callout-content{

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

.tmx-contact-card:hover,
.tmx-proposal-box:hover{

    transform:
    translateY(-6px);
}
/* ===================================
   CONTACT CARD PREMIUM
=================================== */

.tmx-contact-card{

    position:sticky;

    top:120px;

    background:
    linear-gradient(
    145deg,
    #0f172a,
    #1e293b);

    color:#fff;

    padding:42px;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(15,23,42,.22);
}

.tmx-contact-card::before{

    content:'';

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
    rgba(245,158,11,.12);

    top:-100px;
    right:-100px;
}

.tmx-contact-card::after{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

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

    bottom:-70px;
    left:-70px;
}

.tmx-contact-card span{

    position:relative;

    z-index:2;

    display:inline-block;

    color:#fbbf24;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:15px;
}

.tmx-contact-card h2{

    position:relative;

    z-index:2;

    font-size:1.8rem;

    line-height:1.35;

    margin-bottom:35px;

    font-weight:700;
}

.tmx-contact-item{

    position:relative;

    z-index:2;

    padding:22px 0;

    border-top:
    1px solid rgba(255,255,255,.08);
}

.tmx-contact-item strong{

    display:block;

    margin-bottom:10px;

    font-size:1rem;

    color:#ffffff;
}

.tmx-contact-item p{

    color:
    rgba(255,255,255,.75);

    line-height:1.8;

    font-size:.95rem;
}

/* ===================================
   FORMULÁRIO WOW
=================================== */

.tmx-proposal-box{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

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

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

    padding:48px;

    border-radius:34px;

    box-shadow:
    0 25px 60px rgba(15,23,42,.08);
}

.tmx-proposal-box::before{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    rgba(14,165,233,.06);

    top:-150px;
    right:-100px;
}

.tmx-proposal-box::after{

    content:'';

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    rgba(245,158,11,.05);

    left:-120px;
    bottom:-120px;
}

.tmx-proposal-box h3{

    position:relative;

    z-index:2;

    color:#0f172a;

    font-size:1.7rem;

    font-weight:700;

    margin-bottom:30px;
}

/* ===================================
   GRID
=================================== */

.tmx-form-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:18px;
}

/* ===================================
   INPUTS
=================================== */

.tmx-proposal-box input,
.tmx-proposal-box textarea{

    position:relative;

    z-index:2;

    width:100%;

    border:none;

    background:#ffffff;

    border-radius:16px;

    padding:16px 18px;

    margin-bottom:18px;

    outline:none;

    font-size:.95rem;

    transition:.35s ease;

    box-shadow:
    0 5px 15px rgba(0,0,0,.03);
}

.tmx-proposal-box input::placeholder,
.tmx-proposal-box textarea::placeholder{

    color:#94a3b8;
}

.tmx-proposal-box input:focus,
.tmx-proposal-box textarea:focus{

    transform:translateY(-2px);

    box-shadow:
    0 0 0 4px rgba(245,158,11,.15);
}

.tmx-proposal-box textarea{

    min-height:190px;

    resize:none;
}

/* ===================================
   BOTÃO
=================================== */

.tmx-proposal-box button{

    position:relative;

    z-index:2;

    border:none;

    cursor:pointer;

    padding:16px 34px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24);

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    transition:.35s ease;

    box-shadow:
    0 15px 35px rgba(245,158,11,.25);
}

.tmx-proposal-box button:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 20px 45px rgba(245,158,11,.35);
}

/* ===================================
   ALERTAS
=================================== */

.tmx-success{

    position:relative;

    z-index:2;

    padding:16px 18px;

    margin-bottom:22px;

    border-radius:14px;

    background:#ecfdf5;

    color:#166534;

    font-size:.95rem;
}

.tmx-error{

    position:relative;

    z-index:2;

    padding:16px 18px;

    margin-bottom:22px;

    border-radius:14px;

    background:#fef2f2;

    color:#991b1b;
}

.tmx-error ul{

    margin:0;

    padding-left:18px;
}
/* ===================================
   MAPA PREMIUM
=================================== */

.tmx-location{

    position:relative;

    padding:110px 0;

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f8fafc);
}

.tmx-location-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 55px;
}

.tmx-location-header span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(14,165,233,.08);

    color:#0284c7;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:2px;
}

.tmx-location-header h2{

    margin-top:18px;

    margin-bottom:18px;

    color:#0f172a;

    font-size:clamp(
        1.9rem,
        3vw,
        2.6rem);

    font-weight:700;
}

.tmx-location-header p{

    color:#64748b;

    line-height:1.9;

    font-size:.95rem;
}

.tmx-location-map{

    overflow:hidden;

    padding:10px;

    border-radius:34px;

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

    backdrop-filter:blur(15px);

    box-shadow:
    0 25px 60px rgba(15,23,42,.08);
}

.tmx-location-map iframe{

    width:100%;

    height:550px;

    border:none;

    border-radius:24px;
}

.tmx-location-map:hover{

    transform:
    translateY(-6px);
}

/* ===================================
   CTA CINEMATOGRÁFICO
=================================== */

.tmx-callout{

    position:relative;

    min-height:72vh;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.tmx-callout img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);
}

.tmx-callout-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(15,23,42,.95),
    rgba(15,23,42,.78));
}

.tmx-callout::before{

    content:'';

    position:absolute;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
    rgba(245,158,11,.12);

    left:-250px;
    bottom:-250px;

    filter:blur(60px);

    z-index:1;
}

.tmx-callout::after{

    content:'';

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    background:
    rgba(14,165,233,.08);

    right:-150px;
    top:-150px;

    filter:blur(60px);

    z-index:1;
}

.tmx-callout .container{

    position:relative;

    z-index:2;
}

.tmx-callout-content{

    max-width:820px;

    margin:auto;

    text-align:center;

    color:white;

    padding:60px;

    border-radius:36px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.20);
}

.tmx-callout-content span{

    display:inline-block;

    color:#fbbf24;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:2px;
}

.tmx-callout-content h2{

    margin:22px 0 35px;

    font-size:clamp(
        1.9rem,
        2vw,
        1.9rem);

    line-height:1.25;

    font-weight:700;
}

.tmx-callout-content a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24);
    color:white;

    font-weight:600;
    transition:.35s ease;
    box-shadow:
    0 15px 35px rgba(245,158,11,.25);
}

.tmx-callout-content a:hover{
    transform:
    translateY(-4px);

    box-shadow:
    0 20px 45px rgba(245,158,11,.35);
}
/* ===================================
   RESPONSIVO
=================================== */

@media(max-width:992px){

    .tmx-layout{

        grid-template-columns:1fr;
    }

    .tmx-contact-card{

        position:relative;

        top:auto;
    }

    .tmx-form-grid{

        grid-template-columns:1fr;
    }

    .tmx-callout-content{

        padding:40px;
    }
}

@media(max-width:768px){

    .tmx-hero{

        min-height:60vh;
    }

    .tmx-contact-zone,
    .tmx-location{

        padding:80px 0;
    }

    .tmx-contact-card,
    .tmx-proposal-box{

        padding:30px;
    }

    .tmx-location-map iframe{

        height:380px;
    }

    .tmx-callout{

        min-height:55vh;
    }

    .tmx-callout-content{

        padding:30px 24px;
    }

    .tmx-callout-content h2{

        font-size:1.8rem;
    }
}

/* ===================================
   SCROLLBAR MODERNA
=================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#f1f5f9;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    #f59e0b,
    #0284c7);

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

    opacity:.9;
}