:root{
  /* Light base (off-white, não #fff puro) */
  --bg: #f6f4f2;
  --card: #fbfaf9;
  --text: #121212;
  --muted: rgba(0,0,0,.62);
  --border: rgba(0,0,0,.10);

  /* Brand */
  --primary: #0b0b0f;
  --ring: rgba(201,33,39,.18);

  /* Layout */
  --radius: 18px;
  --shadow: 0 22px 80px rgba(0,0,0,.18);
  --maxw: 920px;

  /* Touch targets (>=44px é boa prática; usamos 48px) */
  --tap: 48px;

  /* Safe-area (iOS notch/home bar) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* Rhythm */
  --stackGap: clamp(14px, 3.2vw, 22px);
  --cardPad: clamp(18px, 3.6vw, 26px);
  --cardPadTop: clamp(14px, 3vw, 18px);

  /* Desktop positioning: mais “página normal” (não no meio) */
  --deskPadTop: clamp(46px, 7vh, 120px);
  --deskPadBot: clamp(26px, 6vh, 90px);

  /* Mobile positioning: centrado */
  --mobPadTop: clamp(20px, 5vh, 44px);
  --mobPadBot: clamp(20px, 7vh, 60px);

  --pagePadX: clamp(16px, 4vw, 28px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-tap-highlight-color: transparent;

  background:
    radial-gradient(1000px 560px at 18% 0%, rgba(201,33,39,.10), transparent 62%),
    radial-gradient(900px 520px at 82% 10%, rgba(0,0,0,.07), transparent 62%),
    var(--bg);
}

/* Default (DESKTOP): mais acima, não centrado verticalmente */
.page{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* chave: desktop “menos no centro” */ /* :contentReference[oaicite:2]{index=2} */
  gap: var(--stackGap);

  padding:
    calc(var(--deskPadTop) + var(--safe-t))
    calc(var(--pagePadX) + var(--safe-r))
    calc(var(--deskPadBot) + var(--safe-b))
    calc(var(--pagePadX) + var(--safe-l));
}

/* MOBILE: centrado no ecrã */
@media (max-width: 720px){
  .page{
    justify-content: center;
    padding:
      calc(var(--mobPadTop) + var(--safe-t))
      calc(var(--pagePadX) + var(--safe-r))
      calc(var(--mobPadBot) + var(--safe-b))
      calc(var(--pagePadX) + var(--safe-l));
  }
}

.card{
  width: 100%;
  max-width: var(--maxw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--cardPadTop);
  border-bottom: 1px solid var(--border);
}

.logo{
  height: clamp(22px, 4.6vw, 30px);
  width: auto;
  opacity: .95;
}

.badge{
  margin: 0 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,.02);
}

.content{
  padding: var(--cardPad);
}

.title{
  margin: 0 0 clamp(10px, 2.6vw, 14px);
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1.08;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.subtitle{
  margin: 0 0 clamp(16px, 3.6vw, 22px);
  color: var(--muted);
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.68;
  max-width: 68ch;
}

.box{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(14px, 3.4vw, 18px);
  background: rgba(0,0,0,.02);
}

.boxTitle{
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(14px, 3.6vw, 16px);
}

.boxText{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(13px, 3.4vw, 14px);
  line-height: 1.55;
}

.actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Botão com alvo de toque bom */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  border-radius: 12px;
  min-height: var(--tap);
  padding: 12px 16px;

  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid transparent;
  cursor: pointer;

  color: #fff;
  background: var(--primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  touch-action: manipulation;
}

.btn:hover{ filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 8px 24px rgba(0,0,0,.14);
}

/* Só no telemóvel é que faz sentido full-width */
@media (max-width: 640px){
  .actions{ flex-direction: column; }
  .btn{ width: 100%; }
}

.fine{
  margin: clamp(16px, 4vw, 22px) 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.footer{
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding-bottom: 2px;
}

/* Reduz animações para quem pede */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:active{ transform: none; }
}