/* ==========================================
   CONTATO - @TECH ROBÓTICA
   CSS EXCLUSIVO DA PÁGINA
========================================== */

.contact-page {
    width: 100%;
    overflow: hidden;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}

/* ==========================================
   01. HERO INSTITUCIONAL
========================================== */

.contact-hero {
    position: relative;

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

    min-height: 510px;
    padding: 115px 7% 145px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(13, 127, 132, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #F2F9FA 0%,
            #EAF5F6 100%
        );

    overflow: hidden;
}

.contact-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -210px;
    right: -120px;

    border: 75px solid rgba(13, 127, 132, 0.055);
    border-radius: 50%;

    pointer-events: none;
}

.contact-hero-container {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;
    text-align: center;

    animation: contactHeroFade 0.9s ease-out both;
}

.contact-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 11px 20px;
    margin-bottom: 26px;

    border-radius: 50px;

    background: #DDF1F2;
    color: #0D7F84;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.contact-kicker i {
    font-size: 15px;
}

.contact-main-title {
    margin: 0 0 25px;

    color: #004E62;

    font-size: clamp(38px, 4.5vw, 66px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.contact-main-title span {
    color: #0D7F84;
}

.contact-main-text {
    max-width: 740px;
    margin: 0 auto;

    color: #52636B;

    font-size: 17px;
    line-height: 1.85;
}

/* Botão do hero */

.contact-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-top: 35px;
    padding: 17px 29px;

    background: #0D7F84;
    color: #FFFFFF;

    border-radius: 50px;
    text-decoration: none;

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

    box-shadow: 0 10px 25px rgba(13, 127, 132, 0.17);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-hero-btn:hover {
    background: #005467;
    color: #FFFFFF;
    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(13, 127, 132, 0.25);
}

.contact-hero-btn i {
    font-size: 12px;
}

/* Onda inferior */

.contact-hero-wave {
    position: absolute;

    bottom: -1px;
    left: 0;

    width: 100%;
    height: 95px;

    z-index: 3;
    pointer-events: none;
    line-height: 0;
}

.contact-hero-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes contactHeroFade {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   02. TÍTULOS COMPARTILHADOS
========================================== */

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

    padding: 10px 20px;
    margin-bottom: 23px;

    border-radius: 50px;

    background: #DDF1F2;
    color: #0D7F84;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.contact-section-title {
    margin: 0 0 22px;

    color: #004E62;

    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.contact-section-title span {
    color: #0D7F84;
}

.contact-section-description {
    max-width: 730px;
    margin: 0 auto;

    color: #52636B;

    font-size: 17px;
    line-height: 1.8;
}


/* ==========================================
   03. CANAIS DE CONTATO
========================================== */

.contact-info {
    position: relative;

    padding: 105px 7% 115px;

    background: #FFFFFF;

    scroll-margin-top: 110px;
}

.contact-info-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

.contact-info-head {
    max-width: 950px;
    margin: 0 auto 55px;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
}

/* Cards */

.contact-info-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 305px;

    padding: 40px 35px;

    background: linear-gradient(
        145deg,
        #FFFFFF 0%,
        #F8FCFC 100%
    );

    border: 1px solid #E2EFF0;
    border-radius: 28px;

    box-shadow: 0 8px 25px rgba(0, 84, 103, 0.035);

    text-decoration: none;
    color: inherit;

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

.contact-info-card:hover {
    transform: translateY(-8px);
    border-color: #C6E5E7;

    box-shadow: 0 22px 45px rgba(0, 84, 103, 0.10);
}

.contact-info-card:focus-visible {
    outline: 3px solid #0D7F84;
    outline-offset: 4px;
}

/* Ícones */

.contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 30px;

    border-radius: 20px;

    background: #DDF1F2;
    color: #0D7F84;

    font-size: 28px;
}

.contact-info-card--email .contact-card-icon {
    background: #EFE7F7;
    color: #65328A;
}

.contact-info-card--address .contact-card-icon {
    background: #FFF3D7;
    color: #BE8A18;
}

/* Textos */

.contact-card-title {
    margin: 0 0 15px;

    color: #004E62;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
}

.contact-card-text {
    margin: 0 0 28px;

    color: #52636B;

    font-size: 15px;
    line-height: 1.85;

    overflow-wrap: anywhere;
}

/* Ação no final do card */

.contact-card-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: auto;

    color: #0D7F84;

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

    transition: gap 0.3s ease;
}

.contact-card-action i {
    font-size: 12px;
}

.contact-info-card:hover .contact-card-action {
    gap: 15px;
}


/* ==========================================
   04. ATENDIMENTO PELO WHATSAPP
========================================== */

.contact-cta {
    position: relative;

    padding: 95px 7% 105px;

    background: #F2F9FA;
}

.contact-cta-container {
    max-width: 1350px;
    margin: 0 auto;
}

.contact-cta-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 60px;

    min-height: 330px;
    padding: 65px 70px;

    border-radius: 32px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(124, 224, 223, 0.23),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0D7F84 0%,
            #005467 58%,
            #003E50 100%
        );

    box-shadow: 0 22px 55px rgba(0, 84, 103, 0.15);
}

.contact-cta-box::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -160px;
    right: -110px;

    border: 60px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;

    pointer-events: none;
}

/* Ícone principal */

.contact-cta-icon {
    position: relative;
    z-index: 2;

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

    flex-shrink: 0;

    width: 130px;
    height: 130px;

    border-radius: 32px;

    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);

    color: #FFFFFF;
    font-size: 60px;

    backdrop-filter: blur(8px);
}

.contact-cta-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.contact-cta-kicker {
    display: inline-flex;
    align-items: center;

    padding: 10px 20px;
    margin-bottom: 23px;

    background: rgba(255, 255, 255, 0.14);
    border-radius: 50px;

    color: #C6EEEE;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.contact-cta-title {
    margin: 0 0 22px;

    color: #FFFFFF;

    font-size: clamp(32px, 3.5vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.contact-cta-title span {
    color: #7CE0DF;
}

.contact-cta-text {
    max-width: 750px;
    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 17px;
    line-height: 1.8;
}

/* Botão WhatsApp */

.contact-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 17px 28px;

    background: #FFFFFF;
    color: #005467;

    border-radius: 50px;
    text-decoration: none;

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

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-whatsapp-btn:hover {
    background: #E8F8F8;
    color: #005467;

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}

.contact-whatsapp-btn i:first-child {
    font-size: 20px;
}

.contact-whatsapp-btn i:last-child {
    font-size: 11px;
}


/* ==========================================
   05. LOCALIZAÇÃO / GOOGLE MAPS
========================================== */

.contact-location {
    position: relative;

    padding: 110px 7% 125px;

    background: #FFFFFF;
}

.contact-location-container {
    max-width: 1350px;
    margin: 0 auto;
}

.contact-location-head {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

/* Container do endereço + mapa */

.contact-location-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    min-height: 420px;

    background: #F8FCFC;

    border: 1px solid #E2EFF0;
    border-radius: 30px;

    overflow: hidden;

    box-shadow: 0 18px 45px rgba(0, 84, 103, 0.075);
}

/* Informações do endereço */

.contact-location-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;

    padding: 55px 45px;

    background: linear-gradient(
        145deg,
        #F2F9FA 0%,
        #FFFFFF 100%
    );
}

.contact-location-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 75px;
    height: 75px;

    margin-bottom: 30px;

    border-radius: 21px;

    background: #DDF1F2;
    color: #0D7F84;

    font-size: 30px;
}

.contact-location-text h3 {
    margin: 0 0 23px;

    color: #004E62;

    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
}

.contact-location-text p {
    margin: 0 0 9px;

    color: #52636B;

    font-size: 16px;
    line-height: 1.7;
}

.contact-location-text p:last-child {
    margin-bottom: 0;
}

/* Botão Como chegar */

.contact-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 35px;
    padding: 16px 25px;

    background: #0D7F84;
    color: #FFFFFF;

    border-radius: 50px;
    text-decoration: none;

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

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-map-link:hover {
    background: #005467;
    color: #FFFFFF;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(13, 127, 132, 0.18);
}

.contact-map-link i:last-child {
    font-size: 11px;
}

/* Mapa incorporado */

.contact-map-frame {
    position: relative;

    min-width: 0;
    min-height: 420px;

    background: #EAF5F6;
    overflow: hidden;
}

.contact-map-frame iframe {
    display: block;

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

    border: 0;
}


/* ==========================================
   TABLET - ATÉ 1100PX
========================================== */

@media (max-width: 1100px) {

    .contact-hero {
        padding: 100px 6% 130px;
    }

    .contact-info {
        padding: 90px 6% 100px;
    }

    .contact-grid {
        gap: 20px;
    }

    .contact-info-card {
        padding: 35px 28px;
    }

    .contact-cta {
        padding: 85px 6% 95px;
    }

    .contact-cta-box {
        padding: 50px;
        gap: 40px;
    }

    .contact-cta-icon {
        width: 110px;
        height: 110px;
        font-size: 50px;
    }

    .contact-location {
        padding: 95px 6% 110px;
    }

    .contact-location-details {
        padding: 45px 35px;
    }

}


/* ==========================================
   TABLET MENOR - ATÉ 900PX
========================================== */

@media (max-width: 900px) {

    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-info-card:last-child {
        grid-column: 1 / -1;
        min-height: 260px;
    }

    .contact-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .contact-location-details {
        padding: 45px;
    }

    .contact-map-frame,
    .contact-map-frame iframe {
        min-height: 400px;
    }

}


/* ==========================================
   MOBILE - ATÉ 768PX
========================================== */

@media (max-width: 768px) {

    /* HERO */

    .contact-hero {
        min-height: auto;
        padding: 95px 7% 120px;
    }

    .contact-hero::before {
        width: 250px;
        height: 250px;

        top: -120px;
        right: -100px;

        border-width: 45px;
    }

    .contact-kicker {
        padding: 10px 16px;
        margin-bottom: 23px;
        font-size: 11px;
    }

    .contact-main-title {
        margin-bottom: 22px;

        font-size: clamp(32px, 8vw, 42px);
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .contact-main-text {
        font-size: 14px;
        line-height: 1.75;
    }

    .contact-hero-btn {
        margin-top: 28px;
        padding: 15px 24px;
        font-size: 13px;
    }

    .contact-hero-wave {
        height: 70px;
    }

    /* TÍTULOS */

    .contact-chip {
        margin-bottom: 20px;
        font-size: 11px;
    }

    .contact-section-title {
        font-size: clamp(29px, 8vw, 39px);
    }

    .contact-section-description {
        font-size: 14px;
        line-height: 1.75;
    }

    /* CANAIS DE CONTATO */

    .contact-info {
        padding: 75px 6% 85px;
    }

    .contact-info-head {
        margin-bottom: 40px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-info-card,
    .contact-info-card:last-child {
        grid-column: auto;

        min-height: 250px;

        padding: 32px 28px;
        border-radius: 22px;
    }

    .contact-card-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 24px;

        border-radius: 17px;
        font-size: 25px;
    }

    .contact-card-title {
        font-size: 21px;
    }

    .contact-card-text {
        margin-bottom: 25px;
        font-size: 14px;
    }

    .contact-card-action {
        font-size: 13px;
    }

    /* WHATSAPP */

    .contact-cta {
        padding: 75px 6% 85px;
    }

    .contact-cta-box {
        min-height: auto;

        padding: 38px 30px;
        gap: 30px;

        border-radius: 24px;
    }

    .contact-cta-icon {
        width: 85px;
        height: 85px;

        border-radius: 23px;
        font-size: 40px;
    }

    .contact-cta-kicker {
        margin-bottom: 20px;
        font-size: 11px;
    }

    .contact-cta-title {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .contact-cta-text {
        margin-bottom: 27px;

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

    .contact-whatsapp-btn {
        padding: 16px 23px;
        font-size: 13px;
    }

    /* LOCALIZAÇÃO */

    .contact-location {
        padding: 80px 6% 95px;
    }

    .contact-location-head {
        margin-bottom: 40px;
    }

    .contact-location-card {
        border-radius: 22px;
    }

    .contact-location-details {
        padding: 35px 28px;
    }

    .contact-location-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 25px;

        border-radius: 18px;
        font-size: 26px;
    }

    .contact-location-text h3 {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .contact-location-text p {
        font-size: 14px;
    }

    .contact-map-link {
        margin-top: 28px;
        padding: 15px 23px;
        font-size: 13px;
    }

    .contact-map-frame,
    .contact-map-frame iframe {
        min-height: 340px;
    }

}


/* ==========================================
   CELULARES PEQUENOS - ATÉ 380PX
========================================== */

@media (max-width: 380px) {

    .contact-hero {
        padding: 80px 6% 110px;
    }

    .contact-main-title {
        font-size: 30px;
    }

    .contact-main-text {
        font-size: 13px;
    }

    .contact-info-card {
        padding: 28px 24px;
    }

    .contact-cta-box {
        padding: 32px 24px;
    }

    .contact-cta-title {
        font-size: 27px;
    }

    .contact-whatsapp-btn {
        width: 100%;
        padding: 15px;
        font-size: 12px;
    }

    .contact-location-details {
        padding: 30px 23px;
    }

}


/* ==========================================
   ACESSIBILIDADE
========================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-hero-container {
        animation: none;
    }

    .contact-hero-btn,
    .contact-info-card,
    .contact-card-action,
    .contact-whatsapp-btn,
    .contact-map-link {
        transition: none;
    }

}