/* =====================================================================
   FabiRi — Fabiana Ribeiro
   Mídia kit da artesã. Aponta para a loja, Jardim das Agulhas.

   A identidade parte das fotos, e não o contrário: o ensaio principal é
   em fundo preto, com a máquina de costura antiga, a tesoura dourada e
   um par de tênis vermelho. Então a página é escura — assim a foto não
   fica colada num retângulo, ela CONTINUA no fundo do site.

   O creme e o terracota são os mesmos do Jardim das Agulhas. É parentesco
   proposital: quem sai daqui e entra na loja precisa sentir que são a
   mesma casa. Mas invertidos — a loja é clara, esta é escura. A pessoa é
   o palco; as bonecas é que são o claro.
   ===================================================================== */

:root {
    --preto:      #141210;  /* quase preto, quente — casa com o fundo do ensaio */
    --preto-alto: #0C0B0A;  /* para faixas que precisam recuar */
    --carvao:     #221E1A;  /* cartões sobre o fundo */
    --creme:      #F5E9D9;  /* texto principal */
    --creme-fraco:#BCAE9C;  /* texto secundário */
    --terracota:  #DB9171;  /* a cor de ação da loja */
    --vermelho:   #D9412F;  /* o vermelho do tênis: acento raro, nunca fundo */
    --dourado:    #C9A227;  /* o dourado da tesoura: só em fio de 1px */
    --borda:      #332C26;

    --serifa: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans:   'Nunito Sans', -apple-system, 'Segoe UI', Arial, sans-serif;

    --esp-1: .25rem; --esp-2: .5rem;  --esp-3: .75rem; --esp-4: 1rem;
    --esp-5: 1.5rem; --esp-6: 2rem;   --esp-7: 3rem;   --esp-8: 5rem;

    --largura: 1120px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--preto);
    color: var(--creme);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* height:auto é obrigatório, não estilo.
   Com width definido no CSS e o atributo height no HTML, o navegador usa
   o ATRIBUTO como altura real e a foto estica. O atributo continua valendo
   a pena — ele reserva o espaço antes de a imagem carregar, evitando o
   texto pular — mas só junto com esta linha. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--terracota); }

.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--esp-5);
}

.secao { padding-block: var(--esp-8); }

/* ---------------------------------------------------------------------
   A assinatura: Fabi + Ri

   O nome dela É a identidade — FabiRi vem de FABIana RIbeiro. Marcar as
   duas sílabas em cores diferentes não é enfeite: é a explicação do nome
   acontecendo sozinha, sem precisar de legenda.
   --------------------------------------------------------------------- */
.marca {
    font-family: var(--serifa);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: .95;
    margin: 0;
}

.marca em { font-style: normal; color: var(--terracota); font-weight: 500; }

/* ---------------------------------------------------------------------
   Capa
   --------------------------------------------------------------------- */
.capa {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--esp-6);
    max-width: var(--largura);
    margin-inline: auto;
    padding: var(--esp-7) var(--esp-5);
}

.capa__texto { position: relative; z-index: 2; }

.capa .marca { font-size: clamp(4rem, 13vw, 8.5rem); }

.capa__nome {
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--creme-fraco);
    margin: var(--esp-5) 0 0;
}

.capa__frase {
    font-family: var(--serifa);
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    line-height: 1.3;
    font-weight: 300;
    margin: var(--esp-5) 0 var(--esp-6);
    max-width: 20ch;
}

.capa__frase strong { color: var(--terracota); font-weight: 500; }

/* A foto não tem moldura: o fundo dela é preto e o do site também, então
   um degradê nas bordas faz a imagem TERMINAR no site em vez de ser
   colada nele. É o que transforma um retrato de estúdio em capa. */
.capa__foto {
    position: relative;
    justify-self: center;

    /* Limitada pela ALTURA da janela, não pela largura.
       A foto é vertical e o que ela tem de mais importante — a máquina de
       costura na mão dela — está embaixo. Presa só pela largura, a máquina
       cai abaixo da dobra e a capa vira um retrato comum.
       A proporção é 932/1400 ≈ 0,666, então 50svh de largura dá 75svh de
       altura: cabe na tela com folga para o cabeçalho respirar. */
    max-width: min(480px, 50svh);
    /* A elipse é MENOR que a caixa (86% x 76%), e é isso que faz a foto
       terminar em degradê em vez de em quina. Maior que 100%, o degradê
       cai fora da imagem e as bordas laterais continuam retas — que era
       o que estava acontecendo: dava para ver o retângulo do arquivo
       recortado contra o preto da página. */
    -webkit-mask-image: radial-gradient(ellipse 86% 76% at 50% 44%, #000 46%, transparent 99%);
            mask-image: radial-gradient(ellipse 86% 76% at 50% 44%, #000 46%, transparent 99%);
}

.capa__foto img { width: 100%; }

@media (max-height: 620px) {
    /* Tela baixa (celular deitado): a foto encolheria demais e viraria
       selo. Melhor soltar a altura e deixar rolar. */
    .capa { min-height: auto; }
    .capa__foto { max-width: 300px; }
}

@media (max-width: 860px) {
    .capa {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: var(--esp-5);
        gap: var(--esp-4);
        text-align: center;
    }
    .capa__texto { order: 2; }

    /* Menor do que caberia, de propósito.
       A foto é 2:3 — em tela de celular, ocupando a largura toda, ela
       sozinha come 490px dos 812 disponíveis, e empurra o botão "Ver as
       bonecas" para baixo da dobra. Num site que existe para levar à
       loja, o botão abaixo da dobra é o site falhando no seu único
       trabalho. Encolher a foto custa menos do que perder o clique. */
    .capa__foto  { order: 1; max-width: min(300px, 72vw, 42svh); }

    .capa .marca      { font-size: clamp(3.4rem, 17vw, 5rem); }
    .capa__nome       { margin-top: var(--esp-3); }
    .capa__frase      { margin: var(--esp-4) auto; font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
    .capa__acoes      { justify-content: center; }
}

/* ---------------------------------------------------------------------
   O selo da loja

   Um mídia kit que não leva à loja falhou no seu único trabalho. Os
   botões já levam, mas eles pedem leitura; o selo é reconhecido antes de
   ser lido — inclinado e redondo no meio de uma página toda reta, ele é a
   primeira coisa que o olho encontra.

   A borda tracejada é ponto de costura. É o mesmo detalhe do Jardim das
   Agulhas, e é o que faz o selo pertencer à marca em vez de parecer
   adesivo de promoção colado por cima.

   Fica DENTRO da .capa (que é position:relative e tem largura máxima), e
   não preso à janela: assim ele acompanha o conteúdo em telas largas em
   vez de fugir para o canto da tela, longe de tudo.
   --------------------------------------------------------------------- */
.selo {
    position: absolute;
    top: var(--esp-5);
    right: var(--esp-5);
    z-index: 3;

    width: 148px;
    height: 148px;
    border-radius: 50%;

    display: grid;
    place-content: center;
    text-align: center;
    text-decoration: none;

    background: var(--terracota);
    color: #2B1608;

    /* A inclinação é o que faz o selo LER como selo. Reto, ele vira só um
       botão redondo. Pouca demais não se percebe; muita atrapalha a
       leitura — dez graus é onde ele parece colado à mão. */
    transform: rotate(-10deg);
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* O anel tracejado: a costura. Fica num pseudoelemento para não brigar
   com a borda externa nem mexer no tamanho do selo. */
.selo::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1.5px dashed rgba(43, 22, 8, .55);
    border-radius: 50%;
}

.selo__linha1 {
    display: block;
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
}

.selo__linha2 {
    display: block;
    font-family: var(--serifa);
    font-size: 1.42rem;
    line-height: 1.08;
    font-weight: 500;
    margin-top: 3px;
}

.selo__seta { display: block; font-size: .95rem; margin-top: 5px; }

.selo:hover  { transform: rotate(-4deg) scale(1.05); box-shadow: 0 14px 38px rgba(0, 0, 0, .55); }
.selo:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; }

@media (max-width: 860px) {
    /* No celular o selo divide o topo com a foto. Menor, e encostado no
       canto, ele fica sobre o fundo preto do ensaio em vez de sobre ela. */
    .selo {
        width: 112px; height: 112px;
        top: var(--esp-2);
        right: var(--esp-2);
    }
    .selo::before { inset: 7px; }
    .selo__linha1 { font-size: .56rem; letter-spacing: .14em; }
    .selo__linha2 { font-size: 1.05rem; }
    .selo__seta   { font-size: .8rem; }
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.capa__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

.botao {
    display: inline-block;
    padding: .95rem 1.8rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

.botao--cheio  { background: var(--terracota); color: #2B1608; }
.botao--vazio  { border: 1px solid var(--borda); color: var(--creme); }

.botao--cheio:hover { background: #E8A98A; transform: translateY(-2px); }
.botao--vazio:hover { border-color: var(--terracota); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   A faixa dos números
   --------------------------------------------------------------------- */
.faixa {
    background: var(--preto-alto);
    border-block: 1px solid var(--borda);
}

.faixa__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--esp-5);
    padding-block: var(--esp-7);
    text-align: center;
}

.faixa__numero {
    font-family: var(--serifa);
    font-size: 3.6rem;
    line-height: 1;
    color: var(--terracota);
    display: block;
}

.faixa__rotulo {
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--creme-fraco);
    margin-top: var(--esp-2);
}

/* ---------------------------------------------------------------------
   Blocos de texto com foto
   --------------------------------------------------------------------- */
.dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--esp-5), 5vw, var(--esp-8));
    align-items: center;
}

.dupla--invertida .dupla__foto { order: -1; }

@media (max-width: 800px) {
    .dupla { grid-template-columns: 1fr; }
    .dupla--invertida .dupla__foto { order: 0; }
}

.dupla__foto img { border-radius: 4px; }

.titulo {
    font-family: var(--serifa);
    font-weight: 300;
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    line-height: 1.12;
    margin: 0 0 var(--esp-5);
}

.olho {
    font-size: .78rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--terracota);
    margin: 0 0 var(--esp-3);
}

p { margin: 0 0 var(--esp-4); }

.texto-suave { color: var(--creme-fraco); }

/* Fio dourado: a única aparição do dourado da tesoura. Um detalhe que só
   funciona porque é raro. */
.fio {
    width: 54px; height: 1px;
    background: var(--dourado);
    border: 0;
    margin: var(--esp-5) 0;
}

/* ---------------------------------------------------------------------
   Galeria
   --------------------------------------------------------------------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--esp-3);
}

.galeria img {
    width: 100%;

    /* 2:3 é a proporção EXATA dos arquivos, então não sobra corte nenhum.
       Estava 3:4 com object-fit:cover, que recortava por cima e por baixo
       — e o que some por cima é a cabeça. Escolher a proporção da foto
       resolve melhor do que ajustar o ponto do corte. */
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    filter: saturate(.92);
    transition: filter .3s ease, transform .3s ease;
}

.galeria img:hover { filter: saturate(1.05); transform: scale(1.015); }

/* ---------------------------------------------------------------------
   O ateliê e a loja
   --------------------------------------------------------------------- */
.cartao-loja {
    background:
        linear-gradient(180deg, rgba(20,18,16,.86), rgba(20,18,16,.94)),
        var(--carvao);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: clamp(var(--esp-6), 6vw, var(--esp-8));
    text-align: center;
}

.cartao-loja .titulo { margin-bottom: var(--esp-3); }

.endereco {
    font-family: var(--serifa);
    font-size: 1.45rem;
    line-height: 1.5;
    margin: 0 0 var(--esp-2);
}

/* ---------------------------------------------------------------------
   Imprensa
   --------------------------------------------------------------------- */
.imprensa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--esp-5);
}

.imprensa__bloco {
    border-left: 2px solid var(--borda);
    padding-left: var(--esp-4);
}

.imprensa__bloco h3 {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--terracota);
    margin: 0 0 var(--esp-3);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--borda);
    padding-block: var(--esp-6);
    text-align: center;
    color: var(--creme-fraco);
    font-size: .9rem;
}

.rodape .marca { font-size: 2rem; margin-bottom: var(--esp-3); }

.rodape a { color: var(--creme); }

/* Foco visível: navegação por teclado não pode virar adivinhação. */
a:focus-visible, .botao:focus-visible {
    outline: 2px solid var(--terracota);
    outline-offset: 3px;
}