/* =========================================================
   TELAS ATÉ 1000px — TABLETS / NOTEBOOKS MENORES
========================================================= */

@media (max-width: 1000px) {

    .informatica-text h3 {
        position: relative;
        margin-left: 200px;
    }


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

    .hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 48px;

        /* .topbar é fixed e fica sobre o conteúdo — sem essa folga
           no topo, o início do texto ("Desenvolvedor Web
           Front-end...") ficava embaixo do header. */
        padding-top: 100px;
    }

    /* Apenas no responsivo: conteúdo (textos/botões) vem primeiro,
       imagem principal vem depois — no PC a ordem no HTML/grid
       original (imagem à esquerda, conteúdo à direita) continua
       intacta, isso só reordena visualmente dentro do grid de 1
       coluna do responsivo. */
    .hero-content {
        max-width: 560px;
        order: 1;
    }

    .hero-illustration {
        order: 2;
    }

    .eyebrow,
    .hero-actions {
        justify-content: center;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }


    /* =========================
       HEADER
    ========================= */

    .topbar {
        left: 20px;
        right: 20px;
        width: auto;
    }


    /* =========================
       SOCIAL SIDEBAR
    ========================= */

    .social-sidebar {
        left: 50%;
        top: auto;
        bottom: 18px;
        transform: translateX(-50%);

        flex-direction: row;

        padding: 12px 18px;
        gap: 22px;
    }

    .page {
        padding-bottom: 110px;
    }


    /* =========================
       SOBRE MIM
    ========================= */

    .about-container {
        width: min(100%, 760px);

        grid-template-columns: minmax(0, 1fr) 240px;

        gap: 50px;
    }

    .about-text {
        max-width: 420px;
    }

    .about-text p {
        font-size: 17px;
    }


    /* =========================
       CERTIFICADOS
    ========================= */

    .certificates {
        min-height: auto;
    }

    .certificate-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .certificate {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        width: 100%;
    }

    .certificate-icon {
        display: none;
    }

    .certificate>img {
        grid-column: 1;
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .certificate-info {
        grid-column: 2;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .certificate-info h3 {
        width: 100%;
        margin: 0;
        font-size: 13px;
        line-height: 1.2;
        text-align: left;
    }

    .certificate-info span {
        display: block;
        width: 100%;
        margin-top: 5px;
        line-height: 1.2;
        text-align: left;
    }


    /* =========================
       PROJETOS
    ========================= */

    .section-projects {
        min-height: auto;
        padding: 110px clamp(16px, 5vw, 40px) 40px;
    }

    .cards-projetos {
        transform: none;

        gap: 40px;
    }

    .card-1,
    .card-2 {
        width: 42%;
    }

    .imagens-card-1,
    .imagens-card-2 {
        position: relative;

        width: 100%;

        height: 220px;

        overflow: hidden;

        display: flex;

        justify-content: center;

        align-items: flex-end;
    }

    .img-pc-1 img,
    .img-pc-2 img {
        display: block;

        width: 82%;

        max-width: 100%;

        max-height: 210px;

        height: auto;

        object-fit: contain;
    }

    .img-mobile-1 img,
    .img-mobile-2 img {
        display: block;

        width: 75%;

        max-width: 100%;

        max-height: 190px;

        height: auto;

        object-fit: contain;

        margin-left: 0;
    }


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

    .contato-container {
        gap: 60px;
    }


    /* =========================================================
   TELAS ATÉ 800px — TABLET / MENU MOBILE
========================================================= */

    @media (max-width: 800px) {

        /* =========================
       HEADER
    ========================= */

        .nav-links {
            position: absolute;

            top: calc(100% + 10px);

            left: 0;
            right: 0;

            flex-direction: column;

            align-items: flex-start;

            gap: 6px;

            background: var(--sidebar-bg);

            border: 1px solid var(--sidebar-border);

            border-radius: var(--radius-md);

            padding: 16px 20px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(-8px);

            transition:
                opacity 0.25s var(--ease),
                transform 0.25s var(--ease),
                visibility 0.25s;
        }

        .nav-links.is-open {
            opacity: 1;

            visibility: visible;

            transform: translateY(0);
        }

        .navbar {
            position: relative;

            flex-wrap: wrap;
        }

        .nav-toggle {
            display: block;
        }

        .topbar {
            left: 14px;
            right: 14px;

            justify-content: center;

            row-gap: 10px;
        }


        /* =========================
       SOBRE MIM
    ========================= */

        .about-page {
            align-items: flex-start;

            padding-top: 50px;
        }

        .about-container {
            width: min(100%, 600px);

            grid-template-columns: 1fr;

            gap: 70px;
        }

        .projects-button {
            position: static;

            margin-top: 35px;
        }


        /* =========================
       PROJETOS
    ========================= */

        .section-projects {
            padding-top: 60px;
        }

        .cards-projetos {
            flex-direction: column;

            align-items: center;

            gap: 48px;
        }

        .card-1,
        .card-2 {
            width: min(90%, 460px);
        }

        .imagens-card-1,
        .imagens-card-2 {
            height: 260px;
        }

        .img-pc-1 img,
        .img-pc-2 img {
            width: 85%;

            max-height: 250px;
        }

        .img-mobile-1 img,
        .img-mobile-2 img {
            width: 80%;

            max-height: 230px;
        }


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

        .section-contato {
            min-height: auto;

            padding: 60px 0;
        }

        .contato-container {
            grid-template-columns: 1fr;
        }

        .contato-showcase {
            order: -1;

            max-width: 340px;

            margin: 0 auto;
        }


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

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

            row-gap: 32px;
        }

        .footer-brand {
            grid-column: 1 / -1;
        }

    }


    /* =========================================================
   CELULAR — ATÉ 600px
========================================================= */

    @media (max-width: 600px) {

        /* =========================
       SOBRE MIM
    ========================= */

        .about-page {
            padding-top: 35px;

            padding-bottom: 50px;
        }

        .about-container {
            width: 100%;

            gap: 60px;
        }

        .section-heading {
            margin-bottom: 35px;
        }

        .section-heading>span {
            font-size: 16px;
        }

        .section-heading h1 {
            font-size: 16px;
        }

        .about-text p {
            font-size: 16px;

            line-height: 1.4;

            margin-bottom: 24px;
        }

        .about-info {
            gap: 32px;

            margin-top: 50px;
        }


        /* =========================
       CERTIFICADOS
    ========================= */

        .certificates>h2 {
            font-size: 16px;
        }

        .certificate-list {
            gap: 22px;

            width: 100%;
        }

        .certificate {
            display: flex;

            column-gap: 12px;

            align-items: start;

            width: 100%;
        }

        .certificate-icon {
            display: none;
        }

        .certificate>img {
            width: 30px;
            height: 30px;

            flex-shrink: 0;

            object-fit: contain;
        }

        .certificate-info {
            display: flex;

            flex: 1;

            flex-direction: column;

            align-items: flex-start;

            width: 100%;

            min-width: 0;

            text-align: left;
        }

        .certificate-info h3 {
            margin: 0;

            width: 100%;

            font-size: 12px;

            line-height: 1.25;

            text-align: left;
        }

        .certificate-info span {
            display: block;

            width: 100%;

            margin-top: 4px;

            font-size: 9px;

            line-height: 1.3;

            text-align: left;
        }


        /* =========================
       PROJETOS
    ========================= */

        .section-projects {
            padding: 45px clamp(14px, 5vw, 24px) 30px;
            width: 100%;
        }

        .card-1,
        .card-2 {
            width: 90%;
        }

        .titulo-card-1 h1,
        .titulo-card-2 h1 {
            font-size: 20px;
        }

        .titulo-card-1 span,
        .titulo-card-2 span {
            font-size: 13px;
        }

        .imagens-card-1,
        .imagens-card-2 {
            height: 220px;
        }

        /* PC diminui proporcionalmente */
        .img-pc-1 img,
        .img-pc-2 img {
            width: 88%;

            max-width: 100%;

            max-height: 210px;

            height: auto;
        }

        /* MOBILE diminui proporcionalmente */
        .img-mobile-1 img,
        .img-mobile-2 img {
            width: 72%;

            max-width: 100%;

            max-height: 200px;

            height: auto;

            margin-left: 0;
        }

        .icons img,
        .icons-2 img {
            width: 22px;

            height: 22px;
        }


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

        .contato-heading {
            font-size: 30px;
        }

        .contato-list {
            gap: 26px;
        }

        .contato-value {
            font-size: 14px;
        }


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

        .footer-container {
            grid-template-columns: 1fr;

            gap: 28px;
        }

    }


    /* =========================================================
   CELULARES PEQUENOS — ATÉ 420px
========================================================= */

    @media (max-width: 420px) {

        /* =========================
       HEADER
    ========================= */

        .topbar {
            left: 10px;
            right: 10px;
        }

        .navbar {
            padding: 6px 16px;

            gap: 12px;
        }

        .brand-name {
            font-size: 12px;
        }

        .brand-role {
            font-size: 8px;
        }

        .lang-toggle {
            padding: 6px 11px;

            font-size: 9px;
        }

    }


    /* =========================================================
   CELULARES MUITO PEQUENOS — ATÉ 400px
========================================================= */

    @media (max-width: 400px) {

        /* =========================
       SOBRE MIM
    ========================= */

        .about-text p {
            font-size: 15px;
        }

        .about-info {
            margin-top: 40px;
        }

        .info-item strong {
            font-size: 12px;
        }


        /* =========================
       CERTIFICADOS
    ========================= */

        .certificate {
            column-gap: 10px;
        }

        .certificate>img {
            width: 27px;
            height: 27px;
        }

        .certificate-info h3 {
            font-size: 11px;
        }

        .certificate-info span {
            font-size: 8px;
        }


        /* =========================
       PROJETOS
    ========================= */

        .card-1,
        .card-2 {
            width: 96%;
        }

        .imagens-card-1,
        .imagens-card-2 {
            height: 190px;
        }

        .img-pc-1 img,
        .img-pc-2 img {
            width: 85%;

            max-height: 180px;
        }

        .img-mobile-1 img,
        .img-mobile-2 img {
            width: 68%;

            max-height: 170px;

            margin-left: 0;
        }

        .button-projetos,
        .button-projetos-2 {
            min-width: 96px;

            height: 28px;

            font-size: 11px;
        }


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

        .contato-showcase {
            max-width: 100%;
        }

        .showcase-frame {
            min-height: 340px;
        }

    }


    /* =========================================================
   ACESSIBILIDADE — REDUCED MOTION
========================================================= */

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

        html {
            scroll-behavior: auto;
        }

        * {
            transition-duration: 0.001ms !important;

            animation-duration: 0.001ms !important;
        }

    }
}

/* =========================================================
   CORREÇÃO FINAL — ALINHAMENTO DOS CERTIFICADOS
========================================================= */

@media (max-width: 1000px) {

    .certificate {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        padding-left: 50px !important;

        min-height: 40px !important;

        margin: 0 !important;
    }

    /* Ícone fica sempre em uma posição fixa */
    .certificate>img {
        position: absolute !important;

        left: 0 !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 36px !important;
        height: 36px !important;

        object-fit: contain !important;
    }

    /* TODOS os textos começam exatamente no mesmo lugar */
    .certificate-info {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        text-align: left !important;
    }

    .certificate-info h3 {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        text-align: left !important;
    }

    .certificate-info span {
        display: block !important;

        width: 100% !important;

        margin: 5px 0 0 0 !important;
        padding: 0 !important;

        transform: none !important;

        text-align: left !important;
    }

    #informatica-text,
    #Alura-text,
    #hashtag-text,
    #Alura-text-2 {
        position: static !important;
        right: auto !important;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {
    .certificate {
        padding-left: 42px !important;

        min-height: 32px !important;
    }

    .certificate>img {
        width: 30px !important;
        height: 30px !important;
    }

    .certificate-info {
        margin: 0 !important;
        padding: 0 !important;
    }

    .certificate-info h3 {
        font-size: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .certificate-info span {
        font-size: 9px !important;

        margin: 4px 0 0 0 !important;
        padding: 0 !important;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 400px) {

    .certificate {
        padding-left: 37px !important;
    }

    .certificate>img {
        width: 27px !important;
        height: 27px !important;
    }

    .certificate-info h3 {
        font-size: 11px !important;
    }

    .certificate-info span {
        font-size: 8px !important;
    }

}