/* ─────────────────────────────────────────────────────────────────────
   Site Sara Filipa · base partilhada por todas as páginas
   Desenhos no Figma a 1920px (ficheiro "LP - Sara Filipa - Desafio").
   ───────────────────────────────────────────────────────────────────── */

:root {
  --mag: #CC0170;
  --rosa: #E23A98;
  --rosa-claro: #FFD1E8;
  --tinta: #1B1418;
  --suave: #5E5359;
  --branco: #FFFFFF;
  --claro: #F4F1F3;
  --medio: #E5E0E3;
  --escuro: #0F0B0D;
  --cartao-escuro: #1B1418;
  --foto: #D8D0D4;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;
  --script: "Monsieur La Doulaise", cursive;
  --assinatura: "Pinyon Script", cursive;

  --grad-claro: linear-gradient(180deg, #F4F1F3 0%, #E5E0E3 100%);
  --grad-mag: linear-gradient(to bottom right, #A8005A 14.3%, #D2127F 85.7%);
  --suave-saida: cubic-bezier(.2, .7, .2, 1);

  --estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0C6.45 3.75 8.25 5.55 12 6C8.25 6.45 6.45 8.25 6 12C5.55 8.25 3.75 6.45 0 6C3.75 5.55 5.55 3.75 6 0Z' fill='black'/%3E%3C/svg%3E");
  --seta-botao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23FFFFFF'/%3E%3Cpath d='M12.08 17.92L17.92 12.08M17.92 17.33V12.08H12.67' stroke='%23CC0170' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  --seta-botao-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23CC0170'/%3E%3Cpath d='M12.08 17.92L17.92 12.08M17.92 17.33V12.08H12.67' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--claro);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* ── Estrutura ─────────────────────────────── */

.seccao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.seccao > * { position: relative; }
.seccao > .marca-agua { position: absolute; }
.fundo-claro { background: var(--claro); }
.fundo-medio { background: var(--medio); }
.fundo-escuro { background: var(--escuro); color: var(--branco); }
.fundo-grad-claro { background: var(--grad-claro); }
.fundo-grad-mag { background: var(--grad-mag); color: var(--branco); }

.marca-agua {
  position: absolute;
  top: 0;
  left: calc(50% - 960px);
  font-family: var(--script);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  animation: flutuar 22s ease-in-out infinite alternate;
}
.marca-agua + .marca-agua { animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes flutuar {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-30px, 26px, 0) rotate(-3deg); }
}

/* ── Tipografia ────────────────────────────── */

.titulo { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.titulo em { font-style: italic; color: var(--mag); }
.fundo-escuro .titulo em { color: var(--rosa); }
.fundo-grad-mag .titulo em { color: var(--rosa-claro); }

.sobretitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mag);
}
.sobretitulo::before, .estrela {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--estrela) center / contain no-repeat;
  mask: var(--estrela) center / contain no-repeat;
}
.estrela { display: inline-block; color: var(--mag); }
.estrela-8 { width: 8px; height: 8px; }
.estrela-10 { width: 10px; height: 10px; }
.estrela-14 { width: 14px; height: 14px; }
.estrela-16 { width: 16px; height: 16px; }
.estrela-18 { width: 18px; height: 18px; }
.fundo-escuro .sobretitulo, .fundo-escuro .estrela { color: var(--rosa); }
.fundo-grad-mag .sobretitulo, .fundo-grad-mag .estrela { color: var(--branco); }

.divisor { display: flex; align-items: center; gap: 14px; color: var(--mag); }
.divisor::before, .divisor::after { content: ""; width: 110px; height: 1px; background: currentColor; opacity: .4; }
.fundo-grad-mag .divisor { color: var(--branco); }

.sistemas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--suave); }
.fundo-grad-mag .sistemas { color: rgba(255, 255, 255, 0.8); }

/* ── Botões ────────────────────────────────── */

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 16px 30px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: var(--mag);
  color: var(--branco);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(204, 1, 112, 0.28);
  transition: translate .2s ease, box-shadow .2s ease;
}
.botao::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--seta-botao) center / 30px 30px no-repeat;
  transition: transform .35s var(--suave-saida);
}
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.botao:hover { translate: 0 -1px; box-shadow: 0 14px 28px rgba(204, 1, 112, 0.34); }
.botao:hover::after { transform: translate(3px, -3px) rotate(8deg); }
.botao:hover::before { animation: brilho 1s var(--suave-saida); }
@keyframes brilho { to { transform: translateX(120%); } }
.botao:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }
.botao-branco { --seta-botao: var(--seta-botao-branco); background: var(--branco); color: var(--mag); box-shadow: none; }
.botao-branco:hover { box-shadow: 0 10px 24px rgba(74, 0, 39, 0.18); }
.botao-branco:focus-visible { outline-color: var(--branco); }

/* ── Topo ──────────────────────────────────── */

.topo { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 1200px; max-width: 100%; }
.topo-marca { font-family: var(--serif); font-size: 24px; line-height: 31px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta); text-decoration: none; }
.topo-linha { width: 100%; height: 1px; background: rgba(27, 20, 24, 0.12); }

/* ── Faixa ─────────────────────────────────── */

.faixa { position: relative; height: 64px; overflow: hidden; background: var(--mag); }
.faixa-loop {
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  white-space: nowrap;
  color: var(--branco);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: faixa 38s linear infinite;
}
.faixa-loop .estrela { color: var(--branco); }
.faixa:hover .faixa-loop { animation-play-state: paused; }
@keyframes faixa { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }

/* ── Arco para fotografias ─────────────────── */

.arco { position: relative; flex: none; }
.arco-contorno, .arco-foto { position: absolute; border-radius: 999px 999px 0 0; }
.arco-contorno { border: 1px solid rgba(204, 1, 112, 0.45); }
.arco-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--foto);
  font-size: 13px;
  font-weight: 500;
  color: rgba(94, 83, 89, 0.7);
}
.arco-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ── Rodapé ────────────────────────────────── */

.rodape { padding: 56px 16px; gap: 24px; background: var(--escuro); color: var(--branco); text-align: center; }
.rodape-marca { font-family: var(--serif); font-size: 26px; line-height: 34px; letter-spacing: 0.22em; text-transform: uppercase; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; font-size: 13px; line-height: 20px; }
.rodape-links a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color .2s ease; }
.rodape-links a:hover { color: var(--branco); }
.rodape-direitos { font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.35); }

/* ── Animações de entrada (js/animacoes.js) ── */

.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition-property: opacity, transform, translate, box-shadow;
  transition-duration: .9s, .9s, .35s, .35s;
  transition-timing-function: var(--suave-saida);
  transition-delay: var(--atraso, 0ms), var(--atraso, 0ms), 0s, 0s;
}
.revelar.revelado { opacity: 1; transform: none; }
.revelar[data-anima="direita"] { transform: translateX(40px); }
.revelar[data-anima="esquerda"] { transform: translateX(-40px); }
.revelar[data-anima="escala"] { transform: translateY(36px) scale(.97); }
.revelar[data-anima="foto"] { transform: translateY(40px) scale(.96); transition-duration: 1.3s, 1.3s, .35s, .35s; }
.revelar[data-anima].revelado { transform: none; }
.revelar.botao { transition-property: opacity, transform, translate, box-shadow; }

.titulo-palavras.revelar { opacity: 1; transform: none; }
.titulo-palavras .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }
.titulo-palavras .palavra > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--suave-saida);
  transition-delay: calc(var(--atraso, 0ms) + var(--i) * 55ms);
}
.titulo-palavras.revelado .palavra > span { transform: none; }

.sobretitulo.revelado::before, .estrela-cabecalho.revelado { animation: estrela-giro 1.2s var(--suave-saida) calc(var(--atraso, 0ms) + .15s) both; }
@keyframes estrela-giro { from { transform: rotate(-180deg) scale(0); } to { transform: none; } }
.divisor.revelado::before, .divisor.revelado::after { animation: linha .9s var(--suave-saida) both; }
.divisor.revelado::before { transform-origin: right; }
.divisor.revelado::after { transform-origin: left; }
@keyframes linha { from { transform: scaleX(0); } }
.topo .topo-linha { transform: scaleX(0); transition: transform 1.4s var(--suave-saida) .2s; }
.topo.revelado .topo-linha { transform: none; }

@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

/* ── Ecrãs menores que o desenho ───────────── */

@media (max-width: 1340px) {
  .seccao { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .seccao { padding-left: 16px; padding-right: 16px; }
  .botao { white-space: normal; text-align: left; }
  .rodape-links { gap: 10px 22px; }
}

/* Quem prefere menos movimento vê tudo parado */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar, .titulo-palavras .palavra > span, .topo .topo-linha { opacity: 1 !important; transform: none !important; }
  .faixa-loop { left: calc(50% - 1020px); }
}