/* =========================================================================
   Universo de Miko o Pato Mandarim — folha de estilo única

   Estrutura (opção aprovada pelo cliente):
   a arte fica FIXA atrás da página inteira e o conteúdo passa solto por cima
   dela, sem caixa. Só os cartões têm fundo próprio. A ordem é: título, os
   livros (dois por linha, cartão em pé e compacto), quem é o Miko e as redes.

   Ordem do arquivo: tokens → base → utilitários → fundo → topo → hero →
   painéis → livros → sobre → redes → rodapé → responsivo → preferências
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens (cores tiradas da própria arte do Miko)
   ---------------------------------------------------------------------- */
:root {
    --azul:         #1b63b8;
    --azul-escuro:  #144a8c;
    --laranja:      #e1502a;
    --dourado:      #f0a93b;
    --verde:        #3e7b3a;
    --creme:        #fdf6e6;
    --creme-escuro: #f4e6c8;
    --tinta:        #2a2118;
    --tinta-suave:  #6b5c4a;
    --linha:        rgba(42, 33, 24, .12);
    --branco:       #ffffff;

    /* vidro dos painéis que ficam sobre a arte */
    --painel:       rgba(253, 246, 230, .93);
    --painel-forte: rgba(255, 255, 255, .96);

    --instagram:    #d62976;
    --youtube:      #ff0000;
    --facebook:     #1877f2;
    --tiktok:       #010101;

    --raio:      18px;
    --raio-g:    28px;
    --sombra:    0 8px 24px rgba(42, 33, 24, .10);
    --sombra-g:  0 18px 45px rgba(42, 33, 24, .22);

    --container: 1140px;
    --respiro:   clamp(1.25rem, 4vw, 2.5rem);

    --fonte-titulo: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --fonte-texto:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;      /* compensa o cabeçalho fixo nas âncoras */
    -webkit-text-size-adjust: 100%;
    background: var(--creme);      /* cor sob a arte, enquanto ela carrega */
}

body {
    margin: 0;
    background: transparent;       /* quem pinta o fundo é a camada .fundo */
    color: var(--tinta);
    font-family: var(--fonte-texto);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.65;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    line-height: 1.1;
    margin: 0 0 .5em;
    text-wrap: balance;
}

p { margin: 0 0 1em; }

img { max-width: 100%; }

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

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

:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -------------------------------------------------------------------------
   3. Utilitários
   ---------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--respiro);
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--azul);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--raio) 0;
    font-weight: 700;
    text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

.chapeu {
    font-family: var(--fonte-titulo);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .7);
    margin-bottom: .35rem;
}

.icone { display: block; flex: none; }

/* Espaço reservado para imagens que ainda não foram enviadas ------------- */
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 100%;
    min-height: 180px;
    padding: 1rem;
    text-align: center;
    background:
        repeating-linear-gradient(45deg,
            var(--creme-escuro) 0 12px,
            #efdfbe 12px 24px);
    border: 2px dashed rgba(42, 33, 24, .28);
    border-radius: var(--raio);
    color: var(--tinta-suave);
}
.placeholder__icone { color: rgba(42, 33, 24, .45); }
.placeholder__arquivo {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .74rem;
    word-break: break-all;
}

/* Botões ---------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.botao--principal {
    background: var(--laranja);
    color: #fff;
    box-shadow: 0 6px 0 #b93a19, var(--sombra);
}
.botao--principal:hover,
.botao--principal:focus-visible {
    background: #ee5b33;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #b93a19, var(--sombra-g);
}
.botao--principal:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #b93a19;
}

.botao--inativo {
    background: var(--creme-escuro);
    color: var(--tinta-suave);
    box-shadow: none;
    cursor: default;
}

.botao--bloco { width: 100%; }

/* -------------------------------------------------------------------------
   4. A arte, fixa atrás de tudo
   ---------------------------------------------------------------------- */
.fundo {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--creme);
}
.fundo__imagem,
.fundo__imagem img {
    display: block;
    width: 100%;
    height: 100%;
}
.fundo__imagem img {
    object-fit: cover;
    /* 'top' preserva o alto do desenho — é onde está o nome, na arte vertical */
    object-position: center top;
}

/* Véu discreto: tira o contraste que brigaria com o texto, sem apagar a arte */
.fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .10), transparent 60%),
        linear-gradient(to bottom, rgba(20, 40, 22, .22), rgba(20, 40, 22, .10) 40%, rgba(20, 40, 22, .28));
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   5. Topo (aparece só depois que a primeira tela sai de cena)
   ---------------------------------------------------------------------- */
.topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(253, 246, 230, .94);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 18px rgba(42, 33, 24, .12);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
    padding-top: env(safe-area-inset-top);
}
.topo--visivel {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}

.topo__marca {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
    font-weight: 800;
    color: var(--azul-escuro);
    text-decoration: none;
    white-space: nowrap;
}
.topo__marca-icone { color: var(--laranja); }

.topo__nav {
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 2.5vw, 1.6rem);
}
.topo__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .2rem;
    font-size: clamp(.85rem, .8rem + .25vw, 1rem);
    font-weight: 700;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.topo__nav a:hover,
.topo__nav a:focus-visible { color: var(--laranja); border-bottom-color: var(--dourado); }

/* Aviso de idioma: uma faixa fina no alto, discreta, que a pessoa fecha */
.sugestao {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .6rem calc(2.5rem + env(safe-area-inset-right)) .6rem 1rem;
    padding-top: calc(.6rem + env(safe-area-inset-top));
    background: var(--azul-escuro);
    color: #fff;
    font-size: .92rem;
    text-align: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.sugestao[hidden] { display: none; }
.sugestao__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
}
.sugestao__linha[hidden] { display: none; }
.sugestao__link {
    color: #fff;
    font-weight: 700;
    text-underline-offset: .2em;
}
.sugestao__fechar {
    position: absolute;
    right: calc(.4rem + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.sugestao__fechar:hover { background: rgba(255, 255, 255, .15); }

/* Seletor de idioma: três siglas curtas, para caber na barra do celular */
.idiomas {
    display: flex;
    align-items: center;
    gap: .15rem;
}
.idiomas__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 36px;
    padding: .2rem .35rem;
    border-radius: 8px;
    font-family: var(--fonte-titulo);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    text-decoration: none;
}
.idiomas__item:hover,
.idiomas__item:focus-visible { color: var(--laranja); background: rgba(42, 33, 24, .06); }
.idiomas__item--atual {
    background: var(--azul-escuro);
    color: #fff;
}

/* -------------------------------------------------------------------------
   6. Hero — só o título, no alto da arte
      Duas linhas: "Universo de Miko" e, abaixo, "o Pato Mandarim".
   ---------------------------------------------------------------------- */
/* Sem altura reservada: o herói mede o que o título ocupa, e os livros vêm
   logo abaixo. A exceção é o celular, tratada mais adiante. */
.hero {
    display: flex;
    align-items: flex-start;
    /* o topo respeita o entalhe do celular, mas fica bem no alto */
    padding-top: calc(clamp(.9rem, 3vh, 2rem) + env(safe-area-inset-top));
    padding-bottom: clamp(.35rem, 1vh, .7rem);
    text-align: center;
}

.hero__titulo {
    margin: 0;
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .4);
}

.hero__linha {
    display: block;
    /* acompanha a largura da tela para caber sempre em uma linha só */
    font-size: clamp(1.6rem, 7vw, 4rem);
    white-space: nowrap;
}
.hero__linha--secundaria {
    font-size: clamp(.95rem, 3.6vw, 2rem);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero__titulo em {
    font-style: normal;
    color: var(--dourado);
    -webkit-text-stroke: 2px rgba(255, 255, 255, .92);
    paint-order: stroke fill;
}

/* Quando o nome já está desenhado na arte, o título em texto some no celular
   (segue no HTML, para o Google e para leitores de tela) — e aí o herói
   precisa de altura própria, senão os livros cobririam o nome desenhado. */
@media (max-width: 899px) {
    .hero--titulo-na-arte .hero__titulo {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* Altura do herói quando o nome está desenhado na arte: encosta o
       conteúdo logo abaixo da linha pontilhada do pôster, que cai por volta
       de 45% da tela (a arte é sempre escalada pela altura no celular). */
    .hero--titulo-na-arte { min-height: 42svh; }
}

/* -------------------------------------------------------------------------
   7. Painéis — o conteúdo que passa por cima da arte
   ---------------------------------------------------------------------- */
/* Metade do respiro de antes: entre dois blocos o vão é a soma do de baixo
   com o de cima, então 40px aqui já viravam 80px de arte aparecendo. */
.secao { padding-block: clamp(.7rem, 1.8vw, 1.15rem); }
.secao:last-of-type { padding-bottom: clamp(3rem, 8vw, 5rem); }
/* a seção logo abaixo do título quase não precisa de respiro em cima
   (:first-of-type não serve aqui: a primeira <section> é o herói) */
.hero + .secao { padding-top: clamp(.4rem, 1.2vw, .9rem); }

/* Sem caixa: o conteúdo fica solto sobre a arte. Quem carrega fundo próprio
   é só o que precisa de leitura corrida — os cartões. */
.painel { padding-block: clamp(1.25rem, 4vw, 2.25rem); }

.secao__cabecalho {
    max-width: 620px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
}
.secao__titulo {
    font-size: clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
}

/* -------------------------------------------------------------------------
   8. Livros — sempre dois por linha; o terceiro desce
   ---------------------------------------------------------------------- */
.livros {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    /* Largura pensada pelo título mais longo dos três idiomas: em 640px o
       espanhol "La nada abominable criatura de las nieves" quebrava em duas
       linhas. Dar espaço é melhor que encolher a fonte, que já está perto do
       tamanho da sinopse. */
    max-width: 760px;
    margin-inline: auto;
}

.livro {
    display: flex;
    flex-direction: column;
    background: var(--painel-forte);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}
.livro:hover { transform: translateY(-6px); box-shadow: var(--sombra-g); }
.livro { border-radius: var(--raio); }

.livro__capa {
    position: relative;
    display: flex;
    justify-content: center;
    padding: .7rem .7rem 0;
    background: #fff;
}
/* As capas chegam com proporções diferentes (a do livro 2 é o recorte fiel da
   impressa, as outras vêm com cenário extra). Encaixar pela ALTURA fazia cada
   uma renderizar com uma largura — a mais estreita parecia menor. Encaixando
   pela LARGURA, todas ocupam o mesmo espaço e nenhuma precisa ser cortada;
   o que varia é a altura, e a trava embaixo impede que uma alta estoure. */
.livro__capa img,
.livro__capa .placeholder {
    width: clamp(140px, 64%, 190px);
    height: auto;
    max-height: 250px;
    min-height: 0;
    object-fit: contain;
    border-radius: 6px;
    border-width: 0;
}

.selo {
    position: absolute;
    top: .55rem;
    left: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    box-shadow: var(--sombra);
}
.selo--disponivel { background: var(--verde); }
.selo--em-breve   { background: var(--tinta-suave); }

.livro__conteudo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(.85rem, 2vw, 1.1rem);
}
.livro__numero {
    margin: 0 0 .25rem;
    font-family: var(--fonte-titulo);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--laranja);
}
/* Tamanho único, calibrado pelo título mais longo da coleção ("A nada
   abominável criatura das neves"), que ocupa 254px dos 273px do cartão.
   Assim os quatro saem em uma linha e com a mesma fonte. */
.livro__titulo {
    font-size: clamp(.86rem, .8rem + .22vw, .94rem);
    margin-bottom: .4em;
    color: var(--azul-escuro);
}
.livro__sinopse {
    color: var(--tinta-suave);
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: .8em;
    /* três linhas bastam para dar vontade de clicar; o resto é na loja */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.livro__detalhes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}
.livro__detalhes li {
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--creme);
    font-size: .74rem;
    font-weight: 700;
    color: var(--tinta-suave);
}
.livro__conteudo .botao {
    margin-top: auto;
    min-height: 42px;
    padding-inline: .9rem;
    font-size: .9rem;
}
.livro .placeholder__icone { display: none; }
.livro .placeholder__arquivo { font-size: .65rem; }

/* -------------------------------------------------------------------------
   9. Sobre
   ---------------------------------------------------------------------- */
.sobre {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
}
.sobre__texto p {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
}
.sobre__texto p:last-child { margin-bottom: 0; }

.valores {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.valor {
    padding: clamp(1.1rem, 3vw, 1.5rem);
    background: var(--painel-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    border-left: 5px solid var(--dourado);
}
.valor__icone {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: .75rem;
    border-radius: 12px;
    background: rgba(27, 99, 184, .1);
    color: var(--azul);
}
.valor__titulo { font-size: 1.2rem; color: var(--azul-escuro); }
.valor__texto  { margin: 0; font-size: .95rem; color: var(--tinta-suave); }

/* -------------------------------------------------------------------------
   10. Redes — mesmo painel do resto, sem a caixa azul
   ---------------------------------------------------------------------- */
.painel--redes { text-align: center; }
.painel--redes .secao__titulo { margin-bottom: clamp(1.25rem, 3.5vw, 1.75rem); }

.redes--grandes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 620px;
    margin: 0 auto;
}
.rede--grande {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 56px;
    padding: .8rem 1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: #fff;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--sombra);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rede--grande:hover,
.rede--grande:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sombra-g);
}
/* Rede ainda sem perfil: fica visível, mas apagada, sinalizando que não leva
   a lugar nenhum antes mesmo do clique. */
.rede--sem-perfil {
    color: var(--tinta-suave);
    background: var(--creme);
    border-style: dashed;
    box-shadow: none;
    cursor: pointer;
}
.rede--sem-perfil:hover,
.rede--sem-perfil:focus-visible {
    transform: none;
    box-shadow: var(--sombra);
}

.redes__aviso {
    max-width: 40ch;
    margin: 1.1rem auto 0;
    padding: .6rem .9rem;
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .92);
    color: var(--tinta);
    font-size: .92rem;
    font-weight: 600;
}
.redes__aviso[hidden] { display: none; }

.rede--instagram { color: var(--instagram); }
.rede--youtube   { color: var(--youtube); }
.rede--facebook  { color: var(--facebook); }
.rede--tiktok    { color: var(--tiktok); }

/* -------------------------------------------------------------------------
   11. Rodapé
   ---------------------------------------------------------------------- */
.rodape {
    position: relative;
    padding-block: clamp(2rem, 5vw, 3rem);
    padding-bottom: calc(clamp(2rem, 5vw, 3rem) + env(safe-area-inset-bottom));
    background: rgba(42, 33, 24, .92);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .75);
    text-align: center;
}
.rodape__marca {
    margin-bottom: .35rem;
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}
.rodape__texto { margin-bottom: .75rem; font-size: .95rem; }
.rodape__creditos { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* No celular só cabe um cartão por linha: a capa de altura fixa deixaria
   faixas brancas enormes dos lados, então ali ela volta a preencher a largura
   e quem encolhe é o cartão. */
@media (max-width: 559px) {
    .livros { max-width: 300px; }
    /* um cartão por linha: a capa pode ocupar mais espaço */
    .livro__capa img,
    .livro__capa .placeholder {
        width: clamp(160px, 72%, 210px);
        max-height: 290px;
    }
}

/* -------------------------------------------------------------------------
   12. Telas médias (≥ 560px): os dois livros entram lado a lado
   ---------------------------------------------------------------------- */
@media (min-width: 560px) {
    .livros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .redes--grandes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   13. Desktop (≥ 900px)
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .sobre {
        grid-template-columns: 1fr 1.05fr;
        align-items: center;
    }
}

/* -------------------------------------------------------------------------
   14. Animação de entrada + preferências do usuário
   ---------------------------------------------------------------------- */
[data-revelar] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-revelar].revelado {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    [data-revelar] { opacity: 1; transform: none; }
}

@media print {
    .topo, .fundo, .botao { display: none !important; }

}