/* =========================================================
   Isabela Vicarpi · página de links (raiz do domínio)
   Só as 4 cores da ID: off-white #FFF4ED · terracota #833102 · oliva #665F29 · amarelo #F1E761 (só destaque, nunca fundo)
   Texto em Neue Montreal; a Melodrame só na palavra de destaque. Nada em caixa alta.
   ========================================================= */

@font-face{font-family:"Melodrame";src:url(fonts/melodrame.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NeueMontreal";src:url(fonts/neuemontreal-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NeueMontreal";src:url(fonts/neuemontreal-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root {
  --terracota: #833102;
  --oliva: #665F29;
  --amarelo: #F1E761;
  --papel: #FFF4ED;
  --f-texto: "NeueMontreal", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-destaque: "Melodrame", Georgia, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #2b2b2b; color: var(--papel);
  font: 400 16px/1.45 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }

/* ---------- fundo: o retrato em preto e branco, nítido, na tela toda, fixo (o p&b e o escurecimento já vêm no arquivo) ---------- */
.fundo { position: fixed; inset: 0; z-index: -1; background: #2b2b2b; }
.fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }

/* ---------- topo: nome no centro ---------- */
/* o topo ocupa quase a tela inteira para o retrato aparecer; só a ponta do primeiro card espia embaixo, chamando para rolar */
.hero {
  /* celular: o padding de cima põe o nome logo abaixo dos olhos e os cards vêm em seguida */
  padding: 34vh 16px 40px; padding-top: 34svh;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.hero-txt { display: flex; flex-direction: column; align-items: center; }
.nome {
  margin: 0; font-weight: 400;
  font-size: clamp(46px, 13vw, 96px); line-height: 1; letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.nome em { font-family: var(--f-destaque); font-style: normal; letter-spacing: 0; }
.sub { margin: 12px 0 0; font-size: clamp(16px, 1.6vw, 19px); }

.redes { display: flex; gap: 4px; margin-top: 18px; }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.redes svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.redes svg .cheio { fill: currentColor; }
.redes a:hover, .redes a:focus-visible { background: var(--papel); color: var(--terracota); transform: translateY(-2px); }

/* ---------- links: cards horizontais, um embaixo do outro ---------- */
.links-wrap { padding: 0 16px 8px; flex: 1; }
.links { display: grid; gap: 24px; max-width: 560px; margin: 0 auto; }
.card {
  position: relative; display: flex; align-items: center;
  min-height: 220px; overflow: hidden; isolation: isolate;
  border-radius: 22px; background: var(--terracota);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* a imagem do produto ocupa o lado direito e se dissolve no terracota à esquerda, onde fica o texto */
.card-fundo {
  position: absolute; top: 0; right: 0; z-index: -1;
  width: 58%; height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  transition: transform 1.2s var(--ease);
}
.card-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 64%; padding: 24px 22px; }
.card-titulo { margin: 0; font-weight: 400; font-size: 29px; line-height: 1; letter-spacing: -.035em; }
.card-titulo em { font-family: var(--f-destaque); font-style: normal; letter-spacing: 0; }
.card-desc { font-size: 14.5px; line-height: 1.35; opacity: .9; }
.botao {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 12px 18px 12px 20px; border-radius: 999px;
  background: var(--papel); color: var(--terracota);
  font-weight: 700; font-size: 15px; line-height: 1;
  transition: background-color .35s var(--ease), gap .35s var(--ease);
}
.botao svg { width: 17px; height: 17px; }

.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0, 0, 0, .3); }
.card:hover .card-fundo, .card:focus-visible .card-fundo { transform: scale(1.05); }
.card:hover .botao, .card:focus-visible .botao { background: var(--amarelo); gap: 12px; }

/* card de episódio (página do pontos sutis): o card não é link; cada botão leva a uma plataforma */
.card-ep { font-size: 13px; letter-spacing: .02em; opacity: .85; }
.card--ep .card-titulo { font-size: 22px; line-height: 1.12; letter-spacing: -.02em; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.botoes .botao { margin-top: 0; }
.card--ep .botao { white-space: nowrap; }
.card--ep .card-txt { width: 78%; }
.card--ep:hover .botao { background: var(--papel); gap: 8px; }
.botao--sec, .card--ep:hover .botao--sec { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1.5px var(--papel); }
.card--ep .botao:hover, .card--ep .botao:focus-visible { background: var(--amarelo); color: var(--terracota); box-shadow: none; gap: 12px; }
.voltar { text-decoration: underline; text-underline-offset: 3px; }
/* link de volta no topo das páginas internas (pontos sutis → página de links) */
.topo-voltar {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px;
  font-size: 14px; color: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 237, .6);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.topo-voltar svg { width: 16px; height: 16px; transform: rotate(180deg); }
.topo-voltar:hover, .topo-voltar:focus-visible { background: var(--papel); color: var(--terracota); }
@media (min-width: 760px) { .topo-voltar { top: 28px; left: 32px; font-size: 15px; } }

/* ---------- rodapé ---------- */
.rodape { padding: 32px 16px 28px; text-align: center; font-size: 12px; color: rgba(255, 244, 237, .75); }
.rodape p { margin: 0; }

/* ---------- computador: tudo maior ---------- */
@media (min-width: 760px) {
  /* computador: o retrato ocupa quase a tela toda; o nome fica abaixo dos olhos */
  .hero { min-height: 90vh; min-height: 90svh; padding: 22vh 16px 40px; }
  .links { max-width: 1040px; gap: 36px; }
  .card { min-height: 330px; border-radius: 30px; }
  .card-fundo { width: 62%; }
  .card-txt { width: 58%; padding: 48px 56px; gap: 12px; }
  .card-titulo { font-size: 56px; }
  .card--ep .card-titulo { font-size: 40px; max-width: 18ch; }
  .card--ep .card-txt { width: 62%; }
  .card-ep { font-size: 15px; }
  .card-desc { font-size: 19px; max-width: 28ch; }
  .botao { margin-top: 14px; padding: 16px 26px 16px 28px; font-size: 17px; }
  .botao svg { width: 19px; height: 19px; }
  .redes { gap: 8px; margin-top: 24px; }
  .redes svg { width: 24px; height: 24px; }
}

/* ---------- entrada: o fundo acende, o resto sobe ---------- */
.js .fundo img { animation: acender 1.8s var(--ease) both; }
.js .nome, .js .sub, .js .redes, .js .links li { animation: subir .9s var(--ease) both; }
.js .nome { animation-delay: .2s; }
.js .sub { animation-delay: .3s; }
.js .redes { animation-delay: .4s; }
.js .links li:nth-child(1) { animation-delay: .5s; }
.js .links li:nth-child(2) { animation-delay: .58s; }
.js .links li:nth-child(3) { animation-delay: .66s; }
.js .links li:nth-child(4) { animation-delay: .74s; }
@keyframes acender { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }