/* =========================================================
SKAYTECH
RESPONSIVE CSS
Todas as adaptações para tablet e mobile
========================================================= */

/* =========================================================
TABLET
Até 1100px
========================================================= */

@media (max-width: 1100px) {


    /* -----------------------------------------------------
   HEADER
----------------------------------------------------- */

    .navigation {

        gap: 22px;

    }


    /* -----------------------------------------------------
   HERO
----------------------------------------------------- */

    .logo-wrapper {

        width: min(900px,
                88vw);

    }


    /* -----------------------------------------------------
   SERVIÇOS
----------------------------------------------------- */

    .service-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /* -----------------------------------------------------
   TECNOLOGIA
----------------------------------------------------- */

    .technology-content {

        gap: 60px;

    }


}

/* =========================================================
TABLET / MOBILE
Até 900px
========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
   HEADER
----------------------------------------------------- */

    .navigation,
    .header-button {

        display: none;

    }


    .menu-button {

        display: block;

        cursor: pointer;

    }


    /* -----------------------------------------------------
   MENU MOBILE
----------------------------------------------------- */

    .navigation.mobile-open {

        position: absolute;

        top:
            var(--header-height);

        left: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0;

        padding: 20px;

        background:
            rgba(2, 5, 9, .96);

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

        border-bottom:
            1px solid rgba(0, 200, 255, .12);

        backdrop-filter:
            blur(20px);

    }


    .navigation.mobile-open a {

        width: 100%;

        padding: 15px;

        text-align: center;

    }


    .navigation.mobile-open a::after {

        bottom: 5px;

    }


    /* -----------------------------------------------------
   MENU BUTTON
----------------------------------------------------- */

    .menu-button {

        position: relative;

    }


    .menu-button span {

        transition:
            transform .3s ease,
            opacity .3s ease;

    }


    .menu-button.active span:nth-child(1) {

        transform:
            translateY(6px) rotate(45deg);

    }


    .menu-button.active span:nth-child(2) {

        opacity: 0;

    }


    .menu-button.active span:nth-child(3) {

        transform:
            translateY(-6px) rotate(-45deg);

    }


    /* -----------------------------------------------------
   HERO
----------------------------------------------------- */

    .hero {

        min-height:
            100svh;

        padding:
            110px 20px 80px;

    }


    /*
   IMPORTANTE:

   A logo original é grande.
   Limitamos pelo viewport para impedir
   qualquer overflow horizontal.
*/

    .logo-wrapper {

        width:
            min(850px,
                86vw);

        max-width:
            100%;

        overflow:
            visible;

    }


    .logo {

        width:
            100%;

        max-width:
            100%;

        height:
            auto;

    }


    /* -----------------------------------------------------
   MASCOTE
----------------------------------------------------- */

    .mascot-wrapper {

        width:
            140px;

        height:
            140px;

        margin-top:
            8px;

    }


    .mascot {

        width:
            120px;

        max-width:
            100%;

    }


    /* -----------------------------------------------------
   HERO TEXTO
----------------------------------------------------- */

    .hero-subtitle {

        margin-top:
            35px;

    }


    .hero-description {

        max-width:
            520px;

    }


    /* -----------------------------------------------------
   SERVIÇOS
----------------------------------------------------- */

    .service-grid {

        grid-template-columns:
            repeat(2, 1fr);

        margin-top:
            60px;

    }


    /* -----------------------------------------------------
   TECNOLOGIA
----------------------------------------------------- */

    .technology-content {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .technology-orbit {

        order:
            2;

        width:
            min(500px,
                75vw);

    }


    .technology-text {

        order:
            1;

        text-align:
            center;

    }


    .technology-text p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .text-link {

        justify-content:
            center;

    }


    /* -----------------------------------------------------
   CONTATO
----------------------------------------------------- */

    .contact-box {

        width:
            min(900px,
                calc(100% - 20px));

    }


}


/* =========================================================
   CORREÇÃO DEFINITIVA DE OVERFLOW MOBILE
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }


    body {
        position: relative;
    }


    main,
    section,
    header,
    footer {
        max-width: 100%;
    }


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

    .hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    .hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* =====================================================
       LOGO SKAYTECH
    ====================================================== */

    .logo-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }


    .logo {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
    }


    /* =====================================================
       MASCOTE
    ====================================================== */

    .mascot-wrapper {
        max-width: 100%;
        flex-shrink: 0;
    }


    /* =====================================================
       TEXTOS
    ====================================================== */

    .hero-subtitle,
    .hero-description {
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /* =====================================================
       BOTÕES
    ====================================================== */

    .hero-actions {
        width: 100%;
        max-width: 320px;
        min-width: 0;
    }


    .button {
        max-width: 100%;
    }


    /* =====================================================
       SEÇÕES
    ====================================================== */

    .section-container {
        width: calc(100% - 30px);
        max-width: 100%;
        min-width: 0;
    }


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

    .service-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .service-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* =====================================================
       TECNOLOGIA
    ====================================================== */

    .technology-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .technology-orbit {
        width: min(360px, 82vw);
        max-width: 100%;
        flex-shrink: 1;
    }


    /* =====================================================
       CONTATO
    ====================================================== */

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


    .contact-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* =====================================================
       BACKGROUND
       
       Esses elementos podem ser maiores que o viewport.
       Eles continuam visualmente grandes, mas não criam
       largura horizontal na página.
    ====================================================== */

    .background {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    .background-glow {
        left: 50%;
        max-width: none;
        pointer-events: none;
    }


    .tech-ring {
        left: 50%;
        margin-left: 0 !important;
        margin-top: 0 !important;
        pointer-events: none;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    .footer-container {
        width: calc(100% - 30px);
        max-width: 100%;
        min-width: 0;
    }

}

/* =========================================================
MOBILE PEQUENO
Até 400px
========================================================= */

@media (max-width: 400px) {


    /* -----------------------------------------------------
   HERO
----------------------------------------------------- */

    .hero {

        padding-left:
            10px;

        padding-right:
            10px;

    }


    .logo-wrapper {

        width:
            100%;

        max-width:
            100%;

    }


    .mascot-wrapper {

        width:
            95px;

        height:
            95px;

    }


    .mascot {

        width:
            82px;

    }


    .hero-subtitle {

        font-size:
            8px;

        letter-spacing:
            .22em;

    }


    .hero-description {

        font-size:
            12px;

    }


    .section-heading h2 {

        font-size:
            32px;

    }


    .service-card {

        min-height:
            250px;

    }


    .technology-orbit {

        width:
            75vw;

    }


    .contact-box {

        padding:
            55px 18px;

    }


}

/* =========================================================
TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {


    .service-card:hover {

        transform:
            none;

        box-shadow:
            none;

    }


    .mascot-wrapper:hover .mascot {

        transform:
            none;

    }


    .button:hover {

        transform:
            none;

    }


}

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

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


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }


}