/* ══════════════════════════════════════════════════════════════════════════
   ESTILOS DO SITE — EDITORA TAMUATÁ
   ──────────────────────────────────────────────────────────────────────────
   Organização deste arquivo (use Ctrl+F para pular para uma seção):
     [VARIÁVEIS]     cores, fontes e o ponto de corte mobile/desktop
     [BASE]          reset e tipografia geral
     [NAVBAR]        barra do topo + menu mobile
     [HERO]          cabeçalhos grandes
     [SEÇÕES]        títulos, textos, linha ondulada
     [CARROSSEL]     carrossel da home
     [CATÁLOGO]      grade de livros e cards
     [MODAL]         popup de detalhes
     [RODAPÉ]        rodapé + peixe-cursor
     [RESPONSIVO]    ← AQUI ficam as diferenças entre mobile e desktop

   💡 SOBRE RESPONSIVIDADE
   O site é "mobile first": o estilo padrão é o do CELULAR. As diferenças do
   DESKTOP ficam todas juntas na seção [RESPONSIVO], dentro de
   @media (min-width: 768px). Assim você edita o mobile no corpo do arquivo e
   o desktop num lugar só — fácil de dar aparências diferentes a cada um.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ [VARIÁVEIS] ═══════════════════════════════════════ */
:root {
  /* Cores da marca */
  --navy: #21445A;      /* azul-escuro: navbar, rodapé, títulos */
  --light: #B7D6DB;     /* azul-claro: detalhes, ondas */
  --offwhite: #FBFDFC;  /* fundo do site */

  /* Tons derivados (transparências do azul-escuro) */
  --navy-85: rgba(33, 68, 90, 0.85);
  --navy-70: rgba(33, 68, 90, 0.70);
  --navy-55: rgba(33, 68, 90, 0.55);
  --navy-45: rgba(33, 68, 90, 0.45);
  --navy-40: rgba(33, 68, 90, 0.40);
  --navy-25: rgba(33, 68, 90, 0.25);
  --navy-15: rgba(33, 68, 90, 0.15);

  --fonte: "Josefin Sans", sans-serif;

  /* Altura da navbar (usada para empurrar o conteúdo pra baixo dela) */
  --nav-altura: 76px;
}

/* ═══════════════════════ [BASE] ════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Fonte-base do site. O padrão dos navegadores é 16px; subimos para 18px
   para deixar TODO o texto (que usa "rem") maior de forma proporcional.
   Quer o site inteiro ainda maior ou menor? mude só este número. */
html { scroll-behavior: smooth; font-size: 18px; }

body {
  font-family: var(--fonte);
  color: var(--navy);
  background: var(--offwhite);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
em { font-style: italic; }

/* Container central padrão das páginas */
/* Container central das páginas.
   No MOBILE as laterais têm 1.75rem de respiro (mais folga que antes).
   No desktop a folga é ajustada na seção [RESPONSIVO]. */
.container { width: 100%; max-width: 42rem; margin: 0 auto; padding: 0 1.75rem; }
.container--largo { max-width: 64rem; }

.pagina { padding: 3.5rem 0; }

/* ═══════════════════════ [NAVBAR] ══════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-altura);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--navy);
}

.navbar__logo { display: flex; align-items: center; gap: 0.75rem; }
.navbar__logo:hover { opacity: 0.9; }

/* Logo tipográfica (imagem SVG). A altura define o tamanho na navbar;
   a largura acompanha a proporção. Ajuste a altura aqui se quiser maior/menor. */
.logotipo {
  height: 1.5rem; width: auto; display: block; user-select: none;
}

/* Links do desktop — ESCONDIDOS no mobile (aparecem só em [RESPONSIVO]) */
.navbar__links { display: none; }

.navbar__link {
  font-size: 0.875rem; letter-spacing: 0.03em; color: var(--offwhite);
  opacity: 0.75; transition: opacity 0.2s; text-transform: lowercase;
}
.navbar__link:hover { opacity: 1; }
.navbar__link--ativo {
  opacity: 1;
  text-decoration: underline; text-decoration-color: var(--light);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* Botão hambúrguer — só no mobile */
.navbar__hamburguer { color: var(--offwhite); padding: 0.25rem; display: flex; }
.navbar__hamburguer:hover { opacity: 0.8; }

/* Onda logo abaixo da navbar */
.navbar__onda {
  position: absolute; bottom: -22px; left: 0; right: 0; height: 24px;
  pointer-events: none; z-index: 50;
}
.navbar__onda svg { display: block; width: 100%; height: 100%; }

/* ── Menu lateral mobile ── */
.menu-fundo {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.menu-fundo--aberto { opacity: 1; pointer-events: auto; }

.menu-lateral {
  position: fixed; top: 0; right: 0; z-index: 50; height: 100%;
  width: 83.333%; padding-top: var(--nav-altura);
  background: var(--navy);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}
.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral--aberto { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: -8px 0 24px rgba(0,0,0,0.3); }

.menu-lateral__fechar { position: absolute; top: 1rem; right: 1.25rem; color: var(--offwhite); padding: 0.25rem; }
.menu-lateral__fechar:hover { opacity: 0.8; }

.menu-lateral__link {
  display: block; width: 100%; text-align: left;
  padding: 1.25rem 2rem; font-size: 1.125rem; letter-spacing: 0.03em;
  color: var(--offwhite);
  transition: background 0.2s;
}
.menu-lateral__link:hover { background: rgba(255, 255, 255, 0.1); }
.menu-lateral__link--ativo {
  text-decoration: underline; text-decoration-color: var(--light);
  text-underline-offset: 4px; text-decoration-thickness: 2px;
}

/* ═══════════════════════ [HERO] ════════════════════════════════════════════ */
/* Hero da HOME: área azul-clara com logo e imagem de destaque */
.hero-home {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding-top: var(--nav-altura);
  min-height: 60vh; background: var(--light);
}
.hero-home__conteudo {
  position: relative; z-index: 10; display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem; padding: 4rem 0;
}
/* Logo principal da home (imagem do peixe). Altura controla o tamanho;
   no desktop fica maior (ver seção [RESPONSIVO]). */
.hero-home__logo {
  width: 18rem; height: auto; max-width: 80vw; display: block;
  filter: drop-shadow(0 12px 20px rgba(33, 68, 90, 0.18));
}
.hero-home__titulo {
  text-align: center; font-size: 1.9rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: lowercase; margin-top: 1.75rem; color: var(--navy);
}

/* Hero das DEMAIS páginas: faixa com ondas + título */
.hero-pagina {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* topo = altura da navbar + folga extra, para o título não colar na barra */
  padding: calc(var(--nav-altura) + 2.5rem) 1.5rem 2.5rem;
  min-height: 28vh; background: var(--offwhite);
}
.hero-pagina__ondas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-pagina__titulo {
  position: relative; z-index: 10; font-weight: 600; line-height: 1.1; text-align: center;
  color: var(--navy); letter-spacing: 0.04em; text-transform: lowercase;
  /* clamp(mínimo, ideal, máximo): o MÍNIMO é o que vale no celular.
     Subimos de 2rem para 2.6rem para o título ficar maior no mobile. */
  font-size: clamp(2.6rem, 8vw, 4rem);
}

/* ═══════════════════════ [SEÇÕES] ══════════════════════════════════════════ */
.secao { margin-bottom: 3rem; }
.secao--catalogo { margin-bottom: 3.5rem; }

.secao-titulo {
  font-size: 1.5rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.25rem; color: var(--navy);
}

.linha-ondulada { margin-bottom: 1.5rem; display: block; }

.texto { line-height: 1.65; font-size: 1rem; color: var(--navy-85); }
.texto + .texto { margin-top: 1.5rem; }
.texto--pre { white-space: pre-line; }

/* Blocos de contato (na home) */
.contatos { display: flex; flex-direction: column; gap: 1.5rem; }
/* Bloco de contato: tudo centralizado (logo + informações alinhadas ao centro) */
.contato-bloco { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.contato-bloco__rotulo {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; opacity: 0.5; margin-bottom: 0.25rem; color: var(--navy);
}
.contato-link {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; letter-spacing: 0.02em; opacity: 0.7; color: var(--navy);
  transition: opacity 0.2s;
}
.contato-link:hover { opacity: 1; }
/* Logo do selo acima do contato (na seção Entre em contato) */
/* Área da logo: altura fixa (= a da maior logo). A logo fica ancorada embaixo,
   então o texto que vem depois começa na mesma altura nas duas colunas. */
.contato-bloco__logo-area {
  height: 5rem; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 0.5rem;
}
.contato-bloco__logo { width: auto; display: block; }

/* Botão padrão (ex.: "Veja mais" na home) */
.secao__acao { display: flex; justify-content: center; margin-top: 2rem; }
.botao {
  display: inline-block; padding: 0.7rem 1.8rem;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--offwhite); background: var(--navy);
  border-radius: 999px; transition: opacity 0.2s;
}
.botao:hover { opacity: 0.8; }

/* Notícias — "Tamuatá na rede" */
.noticias { display: flex; flex-direction: column; gap: 1rem; }
.noticia {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.25rem 1.5rem; border: 1px solid var(--navy-15);
  border-radius: 0.75rem; transition: border-color 0.2s, transform 0.2s;
}
.noticia:hover { border-color: var(--light); transform: translateY(-2px); }
.noticia__veiculo { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-45); }
.noticia__titulo { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.4; }
.noticia__link { font-size: 0.8rem; color: var(--navy-55); margin-top: 0.15rem; }

/* Logo do Samburá na página Samburá (entre os textos) */
.sambura__logo { height: 8rem; width: auto; display: block; margin: 2rem auto; }

/* Placeholder de capa (cards "Em breve" no catálogo do Samburá) */
.placeholder-capa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy-45);
}

/* ═══════════════════════ [CARROSSEL] ═══════════════════════════════════════ */
.carrossel { position: relative; user-select: none; }
.carrossel__janela { overflow: hidden; margin: 0 2.25rem; }
.carrossel__trilho { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.carrossel__item { flex-shrink: 0; padding: 0 0.5rem; }

.carrossel__seta {
  position: absolute; top: 0; bottom: 2.5rem; z-index: 10;
  display: flex; align-items: center; padding: 0 0.25rem;
  color: var(--navy-40); transition: all 0.2s;
}
.carrossel__seta:hover { color: var(--navy); transform: scale(1.1); }
.carrossel__seta:active { transform: scale(0.95); }
.carrossel__seta:disabled { opacity: 0.2; pointer-events: none; }
.carrossel__seta--esq { left: 0; }
.carrossel__seta--dir { right: 0; }

.carrossel__pontos { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.carrossel__ponto { height: 8px; width: 8px; border-radius: 9999px; background: var(--navy-25); transition: all 0.3s; }
.carrossel__ponto--ativo { width: 20px; background: var(--navy); }

/* ═══════════════════════ [CATÁLOGO] ════════════════════════════════════════ */
.catalogo-temporada { margin-bottom: 3.5rem; }
.catalogo-temporada__titulo {
  font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: 0.25rem; color: var(--navy-45);
}
.catalogo-temporada__risco { width: 2rem; height: 2px; margin-bottom: 1.5rem; background: var(--light); }

/* Grade de livros — 2 colunas no mobile (muda no [RESPONSIVO]) */
.grade-livros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

/* ── Card de livro ── */
.card { display: flex; flex-direction: column; }
.card__capa-botao {
  display: block; width: 100%; border-radius: 2px; overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card__capa-botao:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.capa-moldura { position: relative; width: 100%; padding-top: 138%; }
/* Fundo da moldura: TRANSPARENTE por padrão. Assim, quando a capa não
   preenche tudo (proporção diferente), a sobra fica transparente — sem a
   faixa azul. A cor de reserva só aparece quando a imagem NÃO carrega:
   nesse caso o JS adiciona a classe "capa-fundo--visivel". */
.capa-fundo { position: absolute; inset: 0; background: transparent; }
.capa-fundo--visivel { background: var(--cor-reserva, #B7D6DB); }
.capa-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* "contain" mostra a capa INTEIRA, sem cortar e sem distorcer. */
  object-fit: contain;
  transition: transform 0.5s;
}
.card:hover .capa-img { transform: scale(1.05); }

.capa-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s; background: rgba(33, 68, 90, 0.52);
}
.card:hover .capa-overlay { opacity: 1; }
.capa-overlay__botao {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
  border-radius: 9999px; border: 1px solid rgba(251, 253, 252, 0.65); color: var(--offwhite);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}

.capa-esgotado {
  position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.125rem 0.5rem;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(33, 68, 90, 0.75); color: var(--offwhite);
}

.card__info { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.card__titulo {
  font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__autor { font-size: 0.75rem; color: var(--navy-55); }
.card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; flex-wrap: wrap; }
.card__genero { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-40); }
.card__ponto { color: var(--navy-25); font-size: 12px; }
.card__ano { font-size: 12px; color: var(--navy-40); }

/* Legenda usada dentro do carrossel (um pouco diferente do card) */
.carrossel__legenda { margin-top: 0.75rem; }
.carrossel__legenda .card__genero { margin-top: 0.5rem; }

/* ═══════════════════════ [MODAL] ═══════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.modal__painel {
  position: relative; z-index: 10; width: 100%; max-width: 36rem; max-height: 90vh;
  overflow-y: auto; background: var(--offwhite); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
/* Mede a imagem para o desktop saber a largura proporcional (usado abaixo). */
.modal__fechar { position: absolute; top: 1rem; right: 1rem; z-index: 20; padding: 0.25rem; color: var(--navy); }
.modal__fechar:hover { opacity: 0.5; }

/* No mobile a capa fica em cima; no desktop vai pro lado (ver [RESPONSIVO]) */
.modal__grid { display: flex; flex-direction: column; }
/* MOBILE: a capa ocupa a largura toda; a altura acompanha a proporção da capa
   (via padding-top). A imagem aparece inteira, sem distorcer. */
.modal__capa { flex-shrink: 0; position: relative; width: 100%; padding-top: 138%; }
.modal__capa .capa-img, .modal__capa .capa-fundo { position: absolute; inset: 0; }
.modal__capa .capa-img { width: 100%; height: 100%; object-fit: contain; }

.modal__conteudo { flex: 1; padding: 2.5rem 1.5rem 1.5rem; }
.modal__temporada { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.75rem; color: var(--navy-40); }
.modal__titulo { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; color: var(--navy); }
.modal__autor { font-size: 0.875rem; margin-bottom: 1rem; color: var(--navy-55); }
.modal__risco { width: 2rem; height: 2px; margin-bottom: 1rem; background: var(--light); }

.modal__ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.ficha__rotulo { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.125rem; color: var(--navy-40); }
.ficha__valor { font-size: 0.75rem; color: var(--navy-85); }
.ficha__valor--esgotado { color: var(--navy-45); }

.modal__contato-titulo { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.25rem; color: var(--navy-40); }
.modal__contatos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.modal__contato-link { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--navy); transition: opacity 0.2s; }
.modal__contato-link:hover { opacity: 0.7; }

.modal__comprar {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--navy); color: var(--offwhite); transition: opacity 0.2s;
}
.modal__comprar:hover { opacity: 0.75; }

/* ═══════════════════════ [TRIPULAÇÃO] ══════════════════════════════════════ */
/* Cada membro: no MOBILE a foto fica em cima, centralizada; no desktop vai
   para o lado (ver [RESPONSIVO]). */
.tripulante { display: flex; flex-direction: column; align-items: center; }
.tripulante__foto {
  width: 9rem; height: 9rem; object-fit: cover;
  border-radius: 1.25rem;               /* bordas arredondadas */
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 24px rgba(33, 68, 90, 0.15);
}
/* Placeholder quando o tripulante ainda não tem foto (mostra a inicial) */
.tripulante__foto--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--light);
  color: var(--navy); opacity: 0.9;
}
.tripulante__foto--placeholder span {
  font-size: 3rem; font-weight: 600; opacity: 0.5;
  font-family: var(--fonte);
}
.tripulante__texto { width: 100%; text-align: center; }
.tripulante__texto .linha-ondulada { margin-left: auto; margin-right: auto; }

/* ═══════════════════════ [RODAPÉ] ══════════════════════════════════════════ */
.rodape {
  position: relative; overflow: hidden; padding: 3.5rem 1.5rem; background: var(--navy);
  cursor: none;  /* esconde o cursor real para mostrar o peixe */
}
.rodape__peixe {
  position: absolute; pointer-events: none; z-index: 20; opacity: 0; transition: opacity 0.2s;
}
.rodape__miolo { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
/* Chamada "Quer publicar conosco?" no topo do rodapé */
.rodape__chamada {
  max-width: 30rem; margin: 0 auto 0.25rem;
}
/* "Quer publicar conosco?" — em destaque, fonte maior */
.rodape__chamada-titulo {
  color: var(--light); font-size: 1.7rem; font-weight: 600;
  line-height: 1.3; margin-bottom: 0.5rem;
}
/* Frases seguintes — maiores que os contatos, mas mais discretas que o título */
.rodape__chamada-sub {
  color: var(--light); font-size: 1.05rem; line-height: 1.6; opacity: 0.7;
}
.rodape__link { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--light); opacity: 0.75; transition: opacity 0.2s; }
.rodape__link:hover { opacity: 1; }
.rodape__divisor { width: 4rem; height: 1px; opacity: 0.3; background: var(--light); }
.rodape__marca { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.rodape__marca-nome { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; margin-top: 0.25rem; color: var(--light); }
.rodape__copy { font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.02em; color: var(--light); }

.onda-rodape {
  background: var(--offwhite); line-height: 0;
  /* desce 1px para sobrepor o rodapé e não deixar fresta branca no zoom */
  margin-bottom: -1px; position: relative; z-index: 1;
}
.onda-rodape svg { display: block; width: 100%; height: 36px; }

/* Peixe balançando */
@keyframes fish-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) rotate(4deg) translateY(-5px); }
}
@keyframes fish-bob-flip {
  0%, 100% { transform: translate(-50%, -50%) scaleX(-1) rotate(-4deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) scaleX(-1) rotate(4deg) translateY(-5px); }
}
.fish-bob { animation: fish-bob 1.8s ease-in-out infinite; }
.fish-bob-flip { animation: fish-bob-flip 1.8s ease-in-out infinite; }

/* Balanço para a logo FIXA do peixe no rodapé (sem o translate de
   centralização, pois ela está no fluxo normal, não presa ao cursor).
   Usado só no mobile — ver @media (hover: none) mais abaixo. */
@keyframes fish-swim {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-5px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [RESPONSIVO] — DIFERENÇAS ENTRE MOBILE E DESKTOP
   ───────────────────────────────────────────────────────────────────────────
   Tudo acima é o visual do CELULAR. Aqui embaixo ficam os ajustes do DESKTOP.
   Para dar comportamentos diferentes a cada versão, edite nesta seção.

   Ponto de corte: 768px. Abaixo disso = mobile. A partir daí = desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* DESKTOP: aumenta a fonte-base, deixando TODA a tipografia (que usa "rem")
     proporcionalmente maior só no desktop. No mobile continua 18px. */
  html { font-size: 20px; }

  /* NAVBAR: mostra os links e esconde o hambúrguer */
  .navbar__links { display: flex; align-items: center; gap: 1.75rem; }
  .navbar__hamburguer { display: none; }

  /* CONTATOS da home lado a lado, alinhados pelo TOPO (as áreas de logo
     começam juntas, o que mantém nome/Instagram/e-mail alinhados entre as colunas) */
  .contatos { flex-direction: row; gap: 4rem; align-items: flex-start; justify-content: center; }

  /* GRADE do catálogo: 3 colunas */
  .grade-livros { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

  /* MODAL (desktop): SÓ o texto define a altura do popup. O JavaScript mede
     a altura do texto e aplica na capa (altura = a do texto; largura =
     altura × proporção da capa). Assim a capa nunca "estica" o popup, e a
     largura total varia conforme a proporção de cada capa. Ver função Modal
     no app.js. */
  .modal__painel {
    width: auto;            /* encolhe para o conteúdo, em vez de largura fixa */
    max-width: 90vw;        /* mas nunca passa da largura da tela */
  }
  .modal__grid { flex-direction: row; align-items: flex-start; }
  /* Coluna do texto: largura fixa e confortável — é ela que manda na altura. */
  .modal__conteudo { padding: 1.5rem; width: 22rem; flex-shrink: 0; }
  /* Coluna da capa: altura/largura vêm do JS. A imagem preenche a coluna. */
  .modal__capa {
    padding-top: 0; flex-shrink: 0; position: relative; overflow: hidden;
  }
  .modal__capa .capa-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .modal__capa .capa-fundo { display: none; }  /* sem sobra: a capa preenche */

  .quebra-mobile { display: none; }
  /* HOME: título e logo maiores no desktop (diferença visível do mobile) */
  .hero-home__titulo { font-size: 2rem; }
  .hero-home__logo { width: 24rem; height: auto; }
  .hero-home { min-height: 70vh; }

  /* Textos das páginas um pouco mais largos e arejados no desktop */
  .pagina { padding: 4.5rem 0; }

  /* TRIPULAÇÃO: no desktop a foto vai para a esquerda, texto à direita */
  .tripulante { flex-direction: row; align-items: flex-start; gap: 2rem; }
  .tripulante__foto { width: 11rem; height: 11rem; margin-bottom: 0; flex-shrink: 0; }
  .tripulante__texto { text-align: left; }
  .tripulante__texto .linha-ondulada { margin-left: 0; margin-right: 0; }

}

/* Telas grandes (a partir de 1024px): catálogo com 4 colunas */
@media (min-width: 1024px) {
  .grade-livros { grid-template-columns: repeat(4, 1fr); }
}

/* ── Diferenças de conteúdo só-mobile / só-desktop ──────────────────────────
   Estas classes utilitárias permitem mostrar ou esconder QUALQUER elemento
   conforme o tamanho da tela — útil quando você quiser que desktop e mobile
   mostrem coisas diferentes (ex.: um texto mais curto no celular).
     class="apenas-mobile"   → some no desktop
     class="apenas-desktop"  → some no mobile                                    */
.apenas-desktop { display: none; }
@media (min-width: 768px) {
  .apenas-mobile { display: none !important; }
  .apenas-desktop { display: revert; }
}

/* Em telas com toque, o "hover" do card não faz sentido: deixa o overlay
   "Ver mais" sempre levemente visível para indicar que é clicável. */
@media (hover: none) {
  .capa-overlay { opacity: 0; }
  .rodape { cursor: default; }        /* no celular não há cursor-peixe */
  .rodape__peixe { display: none; }
  /* No mobile, a logo fixa do peixe "nada" sozinha, com o mesmo efeito
     de balanço do peixe que segue o cursor no desktop. */
  .rodape__marca-peixe { animation: fish-swim 1.8s ease-in-out infinite; transform-origin: center; }
}

/* MOBILE: navbar menor e peixe menor */
@media (max-width: 767px) {
  :root { --nav-altura: 56px; }
  .navbar { padding: 0 1rem; }
  .navbar__logo > img:first-child { height: 30px !important; }
  .logotipo { height: 1.1rem; }
}

/* Botão 'Comprar' sem link ainda (comprar: "" em dados.js) */
.modal__comprar--inativo { opacity: 0.45; pointer-events: none; cursor: default; }