@charset "UTF-8";

/* =====================================================
   DESKTOP PEQUENO
===================================================== */

@media (max-width: 1400px){
    .topbar-inner{
        padding:0 28px;
    }

    .content{
        padding:28px;
    }
}

/* =====================================================
   NOTEBOOK
===================================================== */

@media (max-width: 1200px){
    .hero-image{
        max-width:520px;
        margin:auto;
    }

    .prerequisites-grid,
    .summary-grid,
    .mistakes-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .help-center-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

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

@media (max-width: 992px){
    .topbar{
        height:auto;
    }

    .topbar-inner{
        grid-template-columns:auto minmax(0, 1fr);
        padding:14px 24px;
        gap:12px 20px;
    }

    .topbar-nav{
        min-width:0;
        max-width:100%;
        overflow-x:auto;
    }

    .academy-search{
        grid-column:1 / -1;
        width:100%;
        min-width:0;
    }

    .content{
        padding:24px;
    }

    .content [id]{
        scroll-margin-top:160px;
    }

    .academy-switch,
    .academy-video,
    .module-summary{
        padding:24px;
    }

    .page-hero{
        grid-template-columns:1fr;
        gap:32px;
        padding:36px;
    }

    .page-hero .showcase-artwork{
        height:340px;
    }

    .page-hero .screen-main{
        inset:30px 0 auto;
        width:100%;
        transform:none;
        animation:none;
    }

    .page-hero .screen-secondary,
    .page-hero .floating-metric,
    .page-hero .floating-panel{
        display:none;
    }

    .updates-hero,
    .update-change,
    .update-change--reverse,
    .update-practical-tip{
        grid-template-columns:1fr;
    }

    .update-change--reverse .update-change__content,
    .update-change--reverse .update-change__media{
        order:initial;
    }

    .guide-navigation{
        gap:16px;
    }
}

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

@media (max-width: 768px){
    .prerequisites-grid,
    .summary-grid,
    .mistakes-grid{
        grid-template-columns:1fr;
    }

    .learning-grid,
    .module-grid,
    .training-path{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .training-section--catalog{
        padding:28px;
    }

    .help-center-section{
        padding:28px;
    }

    .help-center-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

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

    .help-search-answer__groups{
        grid-template-columns:1fr;
    }

    .help-search-results{
        padding:0 2px;
    }

    .academy-tabs{
        display:flex;
        width:100%;
    }

    .academy-tab{
        flex:1;
        text-align:center;
    }    

    .legend-item{
        width:100%;
        text-align:center;
    }

    .validation-list{
        flex-direction:column;
    }
}

@media (max-width: 768px) {
    .hero-title-break {
        display: none;
    }
}

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

@media (max-width: 576px){
    .section-header{
        padding:18px 18px 18px 20px;
        border-radius:16px;
    }

    .updates-hero{
        gap:28px;
        padding:28px 22px;
        border-radius:24px;
    }

    .updates-hero h1{
        font-size:2rem;
        line-height:1.12;
    }

    .updates-feed{
        margin:48px 0;
    }

    .update-release{
        border-radius:24px;
    }

    .update-release__header,
    .update-change{
        padding:28px 20px;
    }

    .update-release__header h2{
        font-size:1.65rem;
        line-height:1.18;
    }

    .update-practical-tip{
        gap:24px;
        margin:28px 20px;
        padding:24px 20px;
    }

    .update-practical-tip__gallery{
        grid-template-columns:1fr;
    }

    .update-release__footer{
        align-items:stretch;
        flex-direction:column;
        padding:26px 20px;
    }

    .update-release__footer .button-next{
        width:100%;
    }

    .page-hero{
        gap:24px;
        padding:28px 20px;
    }

    .page-hero h1{
        font-size:clamp(2rem, 11vw, 2.35rem);
    }

    .page-hero .page-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .page-hero .page-hero-actions a{
        width:100%;
        text-align:center;
    }

    .page-hero .showcase-artwork{
        height:210px;
    }

    .page-hero .screen-main{
        top:0;
        height:100%;
        border-radius:20px;
    }

    .page-hero .ambient-glow,
    .page-hero .background-shape{
        display:none;
    }

    .topbar-inner{
        grid-template-columns:minmax(0, 1fr);
        padding:12px 18px;
    }

    .topbar-brand,
    .topbar-nav,
    .academy-search{
        grid-column:1;
    }

    .topbar-nav{
        grid-row:2;
        justify-self:stretch;
        padding-bottom:4px;
    }

    .topbar-nav a{
        flex:0 0 auto;
    }

    .academy-search{
        grid-row:3;
    }

    .content{
        padding:18px;
    }

    .content [id]{
        scroll-margin-top:220px;
    }

    .learning-grid,
    .module-grid,
    .training-path{
        grid-template-columns:1fr;
    }

    .training-section--catalog{
        padding:20px;
        border-radius:24px;
    }

    .help-center-section{
        padding:20px;
        border-radius:24px;
    }

    .help-center-toolbar{
        padding:14px;
    }

    .help-center-filters{
        width:100%;
    }

    .help-center-filter{
        justify-content:space-between;
        width:100%;
    }

    .help-center-grid{
        grid-template-columns:1fr;
    }

    .help-search-page{
        margin:18px auto 48px;
        padding:20px;
    }

    .help-page-search__field{
        flex-direction:column;
        gap:10px;
        overflow:visible;
        border:0;
        background:transparent;
        box-shadow:none;
    }

    .help-page-search__field:focus-within{
        border-color:transparent;
        box-shadow:none;
    }

    .help-page-search__field input{
        min-height:54px;
        border:1px solid var(--color-border);
        border-radius:14px;
        background:var(--color-surface);
    }

    .help-page-search__field input:focus{
        border-color:var(--color-primary);
        box-shadow:0 0 0 4px rgba(13,91,255,.1);
    }

    .help-page-search__field button{
        width:100%;
        min-height:50px;
        border-radius:14px;
    }

    .help-search-results{
        padding:0;
    }

    .help-search-result{
        padding:20px 0;
    }

    .help-search-result__summary{
        padding-right:42px;
    }

    .help-search-answer{
        padding:18px;
    }

    .help-learning-suggestion{
        padding:20px;
    }

    .help-search-answer__groups{
        grid-template-columns:1fr;
    }

    .help-topic-card{
        min-height:0;
        padding:22px;
    }

    .section-title{
        font-size:1.45rem;
    }

    .academy-switch,
    .academy-video,
    .module-summary,
    .concept-card,
    .info-card,
    .validation-card{
        padding:20px;
    }

    .guide-navigation{
        flex-direction:column;
        gap:12px;
        align-items:stretch;
    }

    .guide-button{
        width:100%;
    }

    .guide-counter{
        text-align:center;
        order:-1;
    }
  
    .academy-video-topics{
        gap:8px;
    }

    .academy-video-topics span{
        font-size:.8rem;
    }

}

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

@media (max-width: 400px){
    .academy-tabs{
        flex-direction:column;
        border-radius:16px;
    }

    .academy-tab{
        width:100%;
    }

    .search-shortcut{
        display:none;
    }
}