/* =========================================================================
   Lunettic — base do site institucional
   =========================================================================
   Depende de tokens.css e fontes.css, nessa ordem. Mobile-first: o que esta
   fora de media query vale no celular, que e de onde vem a maior parte do
   trafego de moda. As media queries so acrescentam.
   ========================================================================= */


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

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: var(--t-base);
    font-weight: var(--peso-normal);
    line-height: var(--altura-corpo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-black);
    line-height: var(--altura-titulo);
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}

/* A voz da marca: blackletter, so nas frases grandes. Aplicada por classe e
   nao por elemento, porque quem decide nao e a hierarquia do HTML — e se
   aquele texto e a marca falando de si mesma ou um rotulo de secao. */
.display {
    font-family: var(--fonte-display);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: 0.01em;
    text-transform: none;   /* a gotica ja tem caixa propria; forcar
                               uppercase nela destroi as maiusculas
                               desenhadas, que sao o ponto da fonte */
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

::selection {
    background: var(--acento);
    color: var(--texto);
}


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

.interno {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.pular {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--e-3) var(--e-4);
    background: var(--preto);
    color: var(--branco);
    font-size: var(--t-sm);
    font-weight: var(--peso-forte);
}

.pular:focus {
    left: var(--e-4);
    top: var(--e-4);
}


/* =========================================================================
   BARRA DO TOPO
   Faixa preta com a chamada da marca e o seletor de idioma. [MOCKUP]
   ========================================================================= */

.barra-topo {
    background: var(--preto);
    color: var(--branco);
}

.barra-topo__interno {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding: var(--e-2) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
}

.barra-topo__chamada {
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
}

.idiomas {
    display: flex;
    gap: var(--e-3);
}

.idiomas__item {
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    transition: color var(--transicao);
}

.idiomas__item.is-ativo { color: var(--rosa); }

a.idiomas__item:hover,
a.idiomas__item:focus-visible { color: var(--rosa); }

/* No celular a chamada some: o espaco vale mais para o seletor de idioma. */
@media (max-width: 599px) {
    .barra-topo__chamada { display: none; }
    .barra-topo__interno { justify-content: center; }
}


/* =========================================================================
   CABECALHO
   Logo centralizado, navegacao dos dois lados. [MOCKUP]
   No celular vira: hamburguer / logo / sacola, com a navegacao em gaveta.
   ========================================================================= */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
}

.cabecalho__interno {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding: var(--e-4) var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e-4);
}

.cabecalho__logo { justify-self: center; grid-column: 2; }
.cabecalho__logo img { width: clamp(150px, 30vw, 220px); height: auto; }

.cabecalho__menu {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.cabecalho__menu-rotulo {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.cabecalho__hamburguer,
.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--preto);
    transition: transform var(--transicao), opacity var(--transicao);
}

.cabecalho__hamburguer { position: relative; }

.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
    content: '';
    position: absolute;
    left: 0;
}

.cabecalho__hamburguer::before { top: -7px; }
.cabecalho__hamburguer::after  { top:  7px; }

.cabecalho__menu[aria-expanded="true"] .cabecalho__hamburguer { background: transparent; }
.cabecalho__menu[aria-expanded="true"] .cabecalho__hamburguer::before { transform: translateY(7px) rotate(45deg); }
.cabecalho__menu[aria-expanded="true"] .cabecalho__hamburguer::after  { transform: translateY(-7px) rotate(-45deg); }

.cabecalho__sacola {
    grid-column: 3;
    justify-self: end;
    color: var(--preto);
    transition: color var(--transicao);
}

.cabecalho__sacola:hover,
.cabecalho__sacola:focus-visible { color: var(--rosa); }


/* --- Navegacao: gaveta no celular --------------------------------------- */

.nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    padding-top: var(--e-5);
}

.nav.is-aberta { display: block; }

.nav__lista { display: flex; flex-direction: column; gap: var(--e-4); }
.nav__lista--dir { margin-top: var(--e-4); }

.nav a {
    display: inline-block;
    font-size: var(--t-lg);
    font-weight: var(--peso-medio);
    letter-spacing: var(--entre-letras-nav);
    transition: color var(--transicao);
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] { color: var(--rosa); }

/* A loja e o unico item do menu que muda de cor por padrao: e o destino
   comercial, e o mockup ja tratava "Sale" assim. */
.nav__loja { color: var(--rosa); font-style: italic; }
.nav__loja:hover,
.nav__loja:focus-visible { color: var(--rosa-escuro); }


/* --- Navegacao: dois lados no desktop ------------------------------------ */

@media (min-width: 980px) {

    .cabecalho__interno {
        grid-template-columns: 1fr auto 1fr;
        column-gap: var(--e-6);
    }

    .cabecalho__menu { display: none; }

    .nav {
        display: contents;   /* as duas listas viram filhas diretas do grid */
        padding-top: 0;
    }

    .nav__lista {
        flex-direction: row;
        align-items: center;
        gap: var(--e-5);
        grid-row: 1;
    }

    .nav__lista--esq { grid-column: 1; justify-content: flex-start; }
    .nav__lista--dir { grid-column: 3; justify-content: flex-end; margin-top: 0; }

    .nav a { font-size: var(--t-sm); }

    /* A sacola sobe para a mesma linha da navegacao.

       Ela ficava numa segunda linha, como no mockup — mas la aquela linha
       tem "My Account" e "Bag" juntos, e aqui so a sacola. Sobravam ~55px de
       cabecalho vazio em toda pagina, e o cabecalho e sticky: aquele vazio
       acompanhava a rolagem o tempo todo.

       A lista da direita reserva o espaco dela com padding em vez de disputar
       a celula do grid. O valor nao e magico: e a largura do icone (22px)
       mais um respiro. */
    .cabecalho__sacola {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    .nav__lista--dir { padding-right: var(--espaco-sacola); }
}


/* =========================================================================
   RODAPE
   Logo centralizado sobre tres colunas. [MOCKUP]
   ========================================================================= */

.rodape {
    margin-top: var(--e-secao);
    padding-block: var(--e-secao) var(--e-6);
    border-top: 1px solid var(--borda);
}

.rodape__interno {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
}

.rodape__logo { align-self: center; }
.rodape__logo img { width: clamp(170px, 40vw, 260px); height: auto; }

.rodape__colunas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
}

.rodape__titulo {
    font-family: var(--fonte-corpo);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: var(--e-3);
}

.rodape__coluna ul { display: flex; flex-direction: column; gap: var(--e-2); }

.rodape__coluna a {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    transition: color var(--transicao);
}

.rodape__coluna a:hover,
.rodape__coluna a:focus-visible { color: var(--rosa); }

.rodape__redes { display: flex; gap: var(--e-4); align-self: center; }
.rodape__redes img { width: 22px; height: 22px; }

.rodape__legal {
    font-size: var(--t-xs);
    color: var(--texto-fraco);
    text-align: center;
}

@media (min-width: 720px) {
    .rodape__colunas { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
}


/* =========================================================================
   MOVIMENTO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================================
   HERO
   Duas colunas no desktop: headline gigante a esquerda, paragrafo de
   posicionamento a direita. Empilha no celular. [MOCKUP]
   ========================================================================= */

.hero {
    padding-block: var(--e-secao) var(--e-7);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
    align-items: start;
}

/* A headline deixou de ser PNG e virou texto vivo, mas o tamanho e a cor
   moravam dentro da imagem. Sem eles a frase saiu no h1 padrao do navegador:
   preta e pequena, como um titulo qualquer em vez da frase da marca. */
.hero__titulo {
    margin: 0;
    font-size: var(--t-hero);
    color: var(--rosa);
}

.hero__texto {
    font-size: var(--t-md);
    color: var(--texto-suave);
    max-width: 44ch;
}

@media (min-width: 980px) {
    .hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: var(--e-8);
        align-items: center;
    }
    .hero__texto { justify-self: start; }
}


/* =========================================================================
   AVISO DE LOJA FECHADA
   Some sozinho quando LOJA_NO_AR virar true no config.
   ========================================================================= */

.aviso-loja {
    padding-block: var(--e-6);
    border-block: 1px solid var(--borda);
    text-align: center;
}

.aviso-loja__titulo {
    font-size: var(--t-xl);
    color: var(--rosa);
    margin-bottom: var(--e-2);
}

.aviso-loja__texto {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    max-width: 52ch;
    margin-inline: auto;
}


/* =========================================================================
   FORMULARIO
   Campos quadrados e filete preto: o sistema nao tem raio nem sombra.
   ========================================================================= */

.newsletter { padding-block: var(--e-secao); }

.newsletter__titulo {
    font-size: var(--t-2xl);
    color: var(--rosa);
    margin-bottom: var(--e-6);
    max-width: 20ch;
}

.newsletter__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
    max-width: 720px;
}

.campo { display: flex; flex-direction: column; gap: var(--e-1); }

.campo label {
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.campo input {
    font: inherit;
    font-size: var(--t-base);
    color: var(--texto);
    background: var(--branco);
    border: 1px solid var(--preto);
    border-radius: var(--raio);
    padding: var(--e-3);
    transition: border-color var(--transicao);
}

.campo input:hover { border-color: var(--rosa); }

.campo input:focus-visible {
    border-color: var(--rosa);
    outline: 2px solid var(--rosa);
    outline-offset: 1px;
}

.newsletter__privacidade {
    font-size: var(--t-xs);
    color: var(--texto-fraco);
    max-width: 56ch;
}

@media (min-width: 720px) {
    .newsletter__form { grid-template-columns: repeat(2, 1fr); }
    .newsletter__form > .botao,
    .newsletter__privacidade { grid-column: 1 / -1; }
}


/* =========================================================================
   BOTAO
   Retangulo preto solido. Hover vai para o rosa da marca, sem elevacao.
   ========================================================================= */

.botao {
    display: inline-block;
    justify-self: start;
    padding: var(--e-3) var(--e-6);
    background: var(--preto);
    color: var(--branco);
    border: 1px solid var(--preto);
    border-radius: var(--raio);
    font-size: var(--t-sm);
    font-weight: var(--peso-forte);
    letter-spacing: var(--entre-letras-caps);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.botao:hover,
.botao:focus-visible {
    background: var(--rosa);
    border-color: var(--rosa);
    color: var(--preto);
}


/* =========================================================================
   ERRO 404
   ========================================================================= */

.erro {
    padding-block: var(--e-8);
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    align-items: flex-start;
}

.erro__titulo { font-size: var(--t-2xl); color: var(--rosa); max-width: 18ch; }
.erro__texto  { font-size: var(--t-md); color: var(--texto-suave); max-width: var(--largura-texto); }