/* ==========================================================================

   GUILHERME BERNSTEIN
   WEBSITE OFICIAL

   CENTRAL2.CSS
   Versão 2.0.0

   Julho de 2026

   --------------------------------------------------------------------------
   Este arquivo controla toda a aparência do website.

   Filosofia do projeto

   • HTML contendo apenas conteúdo.
   • Toda a apresentação definida aqui.
   • Compatível com desktop, tablet e celular.
   • Sem frameworks.
   • Sem Javascript.
   • Fácil manutenção.

=========================================================================== */


/* ==========================================================================
   RESET
=========================================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==========================================================================
   VARIÁVEIS
=========================================================================== */

:root{

    --text:#F2F2F2;
    --hover:#CCCC99;
    --active:#999966;

    --max-page-width:1200px;
    --max-content-width:900px;

    --body-font:'Lato', sans-serif;
    --title-font:'Palatino Linotype','Book Antiqua',Palatino,serif;

    --line-height:1.65;

    --space-xs:.35rem;
    --space-s:.75rem;
    --space-m:1.5rem;
    --space-l:3rem;
    --space-xl:5rem;

}


/* ==========================================================================
   BODY
=========================================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body-font);

    color:var(--text);

    line-height:var(--line-height);

    min-height:100vh;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/* ==========================================================================
   ESTRUTURA GERAL
=========================================================================== */

.BodyContainer{

    width:min(95%,var(--max-page-width));

    margin:auto;

    position:relative;

    padding-bottom:6rem;

}

.Panel{

    width:min(100%,var(--max-content-width));

    margin:auto;

}


main{

    display:block;

}

/* ==========================================================================
   TIPOGRAFIA
=========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--title-font);

    color:var(--text);

    font-weight:400;

}


h1{

    font-size:clamp(2.8rem,5vw,4.5rem);

    margin-top:5rem;

    margin-bottom:2rem;

    padding-bottom:.5rem;

    border-bottom:1px solid rgba(255,255,255,.45);

}


h2{

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

    margin-top:4rem;

    margin-bottom:1.5rem;

    padding-bottom:.4rem;

    border-bottom:1px solid rgba(255,255,255,.35);

}


h3{

    font-size:clamp(1.7rem,2.5vw,2.3rem);

    margin-top:3rem;

    margin-bottom:1.2rem;

    padding-bottom:.3rem;

    border-bottom:1px solid rgba(255,255,255,.25);

}


h4{

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

    margin-top:2rem;

    margin-bottom:.8rem;

}


h5{

    font-size:clamp(1.15rem,1.8vw,1.5rem);

    margin-top:1.5rem;

    margin-bottom:.5rem;

}


h6{

    font-size:clamp(1rem,1.3vw,1.2rem);

    font-weight:bold;

}


/* ==========================================================================
   TEXTO
=========================================================================== */

.Texto{

    font-family:var(--body-font);

    font-weight:300;

    font-size:clamp(1rem,1vw + .15rem,1.15rem);

    line-height:1.75;

    text-align:justify;

    max-width:72ch;

    margin:2rem auto;

}


p{

    margin-bottom:1.25rem;

}


strong{

    font-weight:700;

}


em{

    font-style:italic;

}


/* ==========================================================================
   LINKS
=========================================================================== */

a{

    color:var(--text);

    text-decoration:none;

    transition:color .25s ease;

}

a:hover{

    color:var(--hover);

}

a:active{

    color:var(--active);

}

.CurrentMenu,
.CurrentSubMenu{

    color:var(--active);

}


/* ==========================================================================
   TÍTULO DO SITE
=========================================================================== */

.SiteTitle{

    color:inherit;

    text-decoration:none;

    transition:none;

}

.SiteTitle:hover,
.SiteTitle:active{

    color:inherit;

    text-decoration:none;

}


/* ==========================================================================
   MENU
=========================================================================== */

.Menu{

    width:min(100%,var(--max-content-width));

    margin:2rem auto;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

}


a.HMenu{

    font-family:var(--body-font);

    font-size:clamp(1.1rem,1.4vw,1.8rem);

    color:var(--text);

    padding:.2rem .4rem;

}


a.PMenu{

    font-family:var(--title-font);

    font-size:clamp(1.2rem,1.5vw,1.6rem);

    color:var(--text);

}


/* ==========================================================================
   SUBMENU
=========================================================================== */

.SubMenu{

    width:min(100%,var(--max-content-width));

    margin:1rem auto 2rem auto;

    text-align:center;

}

.SubMenu a{

    display:inline-block;

    margin:0 .9rem;

    font-family:var(--title-font);

    font-size:clamp(1.05rem,1.3vw,1.4rem);

    color:var(--text);

    text-decoration:none;

    transition:color .25s ease;

}

.SubMenu a:hover{

    color:var(--hover);

}

.SubMenu a:active{

    color:var(--active);

}


/* ==========================================================================
   IMAGENS
=========================================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


img.FloatLeft{

    float:left;

    margin:0 1.5rem 1rem 0;

}


.FloatLeft{

    float:left;

}


.FloatRight{

    float:right;

}


img.PictureCenter{

    display:block;

    margin:2rem auto;

}


.ScorePosition{

    display:inline-block;

    vertical-align:top;

    margin:1rem;

}



/* ==========================================================================
   GALERIAS
=========================================================================== */

.gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

    margin:2rem auto;

}


.gallery img{

    display:block;

    width:auto;

    max-width:220px;

    transition:transform .25s ease;

}


.gallery img:hover{

    transform:scale(1.03);

}



/* ==========================================================================
   CAPAS DE PARTITURAS
=========================================================================== */

.score-gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-start;

    gap:2rem;

    margin:2rem 0;

}


.score-gallery img{

    max-width:170px;

}



/* ==========================================================================
   FOTOGRAFIAS
=========================================================================== */

.photo-gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:2rem;

}


.photo-gallery img{

    border-radius:4px;

}



/* ==========================================================================
   VÍDEOS
=========================================================================== */

.video-gallery{

    display:flex;

    flex-wrap:wrap;

    gap:2rem;

    justify-content:flex-start;

    margin:2rem 0;

}


.video{

    width:min(320px,100%);

}


audio{

    display:block;

    width:100%;

    max-width:340px;

    margin:.5rem 0 1.5rem 0;

}


iframe{

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    height:auto;

    border:none;

}

/* ==========================================================================
   CLASSES UTILITÁRIAS
=========================================================================== */

.clear{
    clear:both;
}

.center{
    text-align:center;
}

.left{
    text-align:left;
}

.right{
    text-align:right;
}

.hidden{
    display:none;
}

.spacer-s{
    margin-top:1rem;
}

.spacer-m{
    margin-top:2rem;
}

.spacer-l{
    margin-top:4rem;
}

.max-width{
    max-width:var(--max-content-width);
    margin-left:auto;
    margin-right:auto;
}


/* ==========================================================================
   COMPONENTES
=========================================================================== */

section{

    margin-bottom:4rem;

}

article{

    margin-bottom:3rem;

}

figure{

    margin:2rem auto;

    text-align:center;

}

figure img{

    margin:auto;

}

figcaption{

    margin-top:.8rem;

    font-size:.95rem;

    opacity:.85;

}


/* ==========================================================================
   TABELAS
=========================================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:2rem 0;

}

td,
th{

    padding:.6rem;

    text-align:left;

}


/* ==========================================================================
   LISTAS
=========================================================================== */

ul,
ol{

    margin:1rem 0 1rem 2rem;

}

li{

    margin-bottom:.4rem;

}


/* ==========================================================================
   RESPONSIVIDADE
=========================================================================== */


/* -------- Tablets -------- */

@media (max-width:960px){

.BodyContainer{

    width:96%;

}

.Panel{

    width:100%;

}

.Texto{

    max-width:100%;

}

}


/* -------- Telefones -------- */

@media (max-width:768px){

h1{

    margin-top:2rem;

    font-size:2.5rem;

}

h2{

    margin-top:2.5rem;

}

h3{

    margin-top:2rem;

}

.Menu{

    justify-content:center;

    text-align:center;

}

a.HMenu{

    font-size:1.15rem;

}

.SubMenu{

    text-align:center;

}

.Texto{

    font-size:1rem;

    text-align:left;

}

img.FloatLeft,
.FloatLeft,
.FloatRight{

    float:none;

    display:block;

    margin:1.5rem auto;

}

.score-gallery{

    gap:1.5rem;

}

.score-gallery img{

    max-width:150px;

}

audio{

    width:75%;

}

.BodyContainer{

    padding-left:8px;

    padding-right:8px;

}

}


/* -------- Telefones pequenos -------- */

@media (max-width:480px){

:root{

    --space-l:2rem;

    --space-xl:3rem;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.7rem;

}

h3{

    font-size:1.45rem;

}

.Menu{

    gap:.5rem;

}

a.HMenu{

    display:block;

    width:100%;

    padding:.4rem 0;

}

.score-gallery img{

    max-width:130px;

}

.gallery img{

    max-width:170px;

}

}


/* ==========================================================================
   IMPRESSÃO
=========================================================================== */

@media print{

body{

    background:white;

    color:black;

}

.Menu{

    display:none;

}

a{

    color:black;

}

iframe{

    display:none;

}

}


/* ==========================================================================
   HOME
=========================================================================== */


.HomeLanguage{

    margin-top:1.5rem;

}

.LanguageMenu{

    margin-top:-1rem;
    margin-left:.25rem;

    font-family:var(--body-font);

    font-size:1.2rem;

}

.LanguageMenu a{

    color:var(--text);

}

.Separator{

    margin:0 .8rem;
    opacity:.7;

}