/* ============================================================================
   seo-h1.css — compensação visual da correção de headings (H1)

   Este arquivo NÃO cria layout novo. Ele apenas replica, nas tags novas,
   exatamente o que o Bootstrap 3 + style.css já aplicavam nas tags antigas.
   Sem ele, trocar <h3> por <h1> mudaria o tamanho da fonte na tela.

   Precisa ser carregado DEPOIS de style.css e app.css.

   Referência dos tamanhos do Bootstrap 3 (font-weight 500, line-height 1.1):
     h1 36px  h2 30px  h3 24px  h4 18px  h5 14px  h6 12px
     margens h1-h3: 20px 0 10px   |   h4-h6: 10px 0
   ============================================================================ */


/* ---------- HOME: hero (antes .conteudo-slider h2) ---------- */
.conteudo-slider h1 {
    text-transform: lowercase;
    font-weight: 100;
    line-height: 1.3;
    font-size: 2.5em;
    margin: 20px 0 10px;
}
.conteudo-slider .slider-sub {
    text-transform: lowercase;
    font-weight: 100;
    line-height: 1.3;
    font-size: 1.25em;
    margin: 0 0 10px;
}
/* O H1 da home é mais longo que o texto antigo: reduz no celular
   para não estourar a largura do slider. */
@media screen and (max-width: 767px) {
    .conteudo-slider h1        { font-size: 1.6em; }
    .conteudo-slider .slider-sub { font-size: 1em; }
}


/* ---------- HOME: título da seção Produtos (antes <p>) ---------- */
/* O tamanho e o espaçamento vêm do .produtcts-title pai — herdar
   preserva o visual e evita que o h2 do Bootstrap sobreponha. */
#home .produtcts-title h2 {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0 0 10px;
}


/* ---------- LISTAGENS: H1 na barra de breadcrumb ---------- */
/* Equivale ao #breadcrumb h2 já existente (usado em contato e outlet). */
#breadcrumb h1 {
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 160px;
    margin: 0;
    font-size: 30px;
}
/* Variante das páginas de catálogo: H1 à esquerda, breadcrumb à direita.
   O ellipsis evita que um nome de categoria longo empurre o breadcrumb. */
#breadcrumb h1.breadcrumb-h1 {
    float: left;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    #breadcrumb h1               { font-size: 20px; }
    #breadcrumb h1.breadcrumb-h1 { max-width: 55%; }
}


/* ---------- PRODUTO: nome do produto (antes h3.produto-nome) ---------- */
.produto-header h1.produto-nome {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    margin: 20px 0 10px;
}


/* ---------- PRODUTO: subtítulos internos (antes h5) ---------- */
/* "DETALHES" fica FORA de .produto-content, então nunca recebeu a regra
   abaixo: era um h5 puro do Bootstrap (14px / 500 / margem 10px). */
.produto-descricao h2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    margin: 10px 0;
}
/* "Dimensões" e "Material" ficam dentro de .produto-content e tinham
   regra própria em style.css, inclusive margin: 0. */
.produto-content .produto-dimensao h2,
.produto-content .produto-material h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}
/* .produto-descricao deixou de ser <p> (era HTML inválido: <h5> e <div>
   dentro de <p>). Reposta a margem que o <p> dava. */
.produto-descricao {
    margin: 0 0 10px;
}


/* ---------- LISTAGENS: nome do produto no card (antes h5) ---------- */
/* min-height:30px vinha da segunda declaração de .produto-title h5 em
   style.css, que sobrescrevia a primeira e valia para o site todo. */
.produto-title h2,
.produto-title h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: #000;
    margin: 10px 0;
    min-height: 30px;
}


/* ---------- QUEM SOMOS / SHOWROOM (antes .title-showroom h4) ---------- */
.title-showroom h1 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}


/* ---------- LOGIN ---------- */
#login h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 20px;
}