/*
  Plan-ish, página de apresentação.
  Paleta "Brisa": claro por defeito, em verde-água com mais cor do que o tema
  da app (lá há outros temas para escolher); "Brisa noite" com o botão do topo
  (data-theme="dark"). As capturas da app trocam com o modo (.on-light/.on-dark). A mesma do site da Comunidade e do tema
  por defeito da app (src/ui/themes/index.ts, "brisa" e "brisa-noite").
  Letra: Figtree (SIL OFL 1.1, assets/fonts/OFL.txt). Ícones: Phosphor (MIT).
*/
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #D5E7E6;
  --bg-2: #C7DEDD;
  --surface: #E6F2F1;
  --raised: #BFD8D7;
  --line: #A9C6C5;
  --fg: #0A1D26;
  --muted: #324C57;
  --accent: #075F68;
  --accent-soft: rgba(7, 95, 104, .10);
  --accent-ink: #FFFFFF;
  --glow: rgba(61, 220, 151, .32);
  --shadow: 0 30px 60px -30px rgba(8, 40, 44, .38);
  --r: 20px;
  --r-sm: 14px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1B26;
  --bg-2: #122230;
  --surface: #152634;
  --raised: #1D3242;
  --line: #2B4659;
  --fg: #EAF3F8;
  --muted: #A2B9C8;
  --accent: #45D1D0;
  --accent-soft: rgba(69, 209, 208, .12);
  --accent-ink: #04191A;
  --glow: rgba(69, 209, 208, .15);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.6 var(--font); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: .2em; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- topo */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.top .wrap { display: flex; align-items: center; gap: 1rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; margin-right: auto; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.top nav { display: flex; align-items: center; gap: .25rem; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem .75rem; border-radius: 999px; white-space: nowrap; }
.top nav a:hover { color: var(--fg); background: var(--raised); }
@media (max-width: 34rem) { .top nav .wide { display: none; } }
.mode { display: grid; place-items: center; width: 44px; height: 44px; margin-left: .15rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); cursor: pointer; transition: background-color .2s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.mode:hover { background: var(--raised); }
.mode:active { transform: scale(.94); }
.mode .icon { width: 20px; height: 20px; }
.mode .to-light, :root[data-theme="dark"] .mode .to-dark { display: none; }
:root[data-theme="dark"] .mode .to-light { display: contents; }
.mode .to-dark { display: contents; }
:root:not([data-theme="dark"]) .on-dark, :root[data-theme="dark"] .on-light { display: none !important; }

/* ---------------------------------------------------------- botões */
.btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s, border-color .2s; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--fg)); }
.btn.ghost { color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--raised); }
.btn .icon { width: 1.3em; height: 1.3em; }

/* ----------------------------------------------------------- herói */
.hero { position: relative; padding: 4.5rem 0 5rem; }
.hero::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 70vw; max-width: 900px; aspect-ratio: 1; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; z-index: -1; }
.hero .wrap { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1.05fr .95fr; } .hero { padding: 5.5rem 0 6rem; } }
.hero h1 { font-size: clamp(2.4rem, 1.5rem + 2.8vw, 3.4rem); font-weight: 800; }
.nowrap { white-space: nowrap; }
.hero h1 span { color: var(--accent); }
.hero h1 > span { display: inline-block; font-size: .7em; line-height: 1.12; margin-top: .3em; letter-spacing: -.02em; }
.hero .lede { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--muted); max-width: 32rem; margin-top: 1.4rem; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

/* Leque de ecrãs: o do meio à frente, dois abertos para os lados, o resto
   escondido atrás. Roda sozinho (sem "reduzir movimento"); tocar num lado
   trá-lo para a frente. As posições vêm de data-pos, postas no HTML e depois
   pelo script. */
.fan { position: relative; height: clamp(360px, 50vw, 580px); margin-inline: auto; width: 100%; max-width: 34rem; }
.fan .slot {
  position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 540 / 1213;
  transform-origin: 50% 100%; cursor: pointer; border: 0; padding: 0; background: none;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, filter .6s ease;
}
.fan .slot img { width: 100%; height: 100%; border-radius: 30px; border: 1px solid var(--line); box-shadow: var(--shadow); object-fit: cover; background: var(--surface); }
.fan .slot[data-pos="0"] { transform: translateX(-50%); z-index: 3; cursor: default; }
.fan .slot[data-pos="-1"] { transform: translateX(-50%) translateX(-58%) rotate(-10deg) scale(.82); z-index: 2; filter: saturate(.85); }
.fan .slot[data-pos="1"] { transform: translateX(-50%) translateX(58%) rotate(10deg) scale(.82); z-index: 2; filter: saturate(.85); }
.fan .slot[data-pos="hidden"] { transform: translateX(-50%) scale(.7); opacity: 0; z-index: 1; pointer-events: none; }
@media (min-width: 60rem) { .hero .fan { margin-right: 0; max-width: 30rem; } }
@media (max-width: 34rem) {
  .fan { height: 340px; }
  .fan .slot[data-pos="-1"] { transform: translateX(-50%) translateX(-44%) rotate(-8deg) scale(.8); }
  .fan .slot[data-pos="1"] { transform: translateX(-50%) translateX(44%) rotate(8deg) scale(.8); }
}
.fan-label { margin-top: 1.2rem; text-align: center; color: var(--muted); font-weight: 700; font-size: .95rem; min-height: 1.5em; }
.fan-label b { color: var(--fg); }

/* ----------------------------------------------------- manifesto */
.promise { padding: 5rem 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.promise .statement { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; max-width: 52rem; text-wrap: balance; }
.promise .statement b { color: var(--accent); font-weight: 800; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 2rem; color: var(--fg); font-weight: 700; max-width: 52rem; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts span { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); line-height: 1.25; }
.facts .icon { color: var(--accent); }

/* ---------------------------------------------------------- bento */
.section { padding: 6rem 0; }
.section > .wrap > h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; max-width: 40rem; }
.section > .wrap > .sub { color: var(--muted); font-size: 1.15rem; max-width: 40rem; margin-top: 1rem; }
.bento { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .wide { grid-column: span 2; } }
@media (min-width: 64rem) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(15rem, auto); } .bento .tall { grid-row: span 2; } .bento .wide { grid-column: span 3; } }
.tile { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.tile h3 { font-size: 1.3rem; font-weight: 750; }
.tile p { color: var(--muted); max-width: 30rem; }
.tile .icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: .4rem; }
.tile .shot { margin-top: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; border: 1px solid var(--line); border-bottom: 0; width: 100%; height: 15rem; object-fit: cover; object-position: top; margin-bottom: -1.6rem; }
.tile .card { margin-top: 1.2rem; border-radius: var(--r-sm); border: 1px solid var(--line); width: 100%; height: auto; }
/* Telemóvel: as seis funcionalidades num carrossel horizontal, cada cartão com
   uma imagem só, em vez de uma coluna que nunca mais acaba. */
@media (max-width: 47.99rem) {
  .section { padding: 4.5rem 0; }
  .bento {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 2rem -1.25rem 0; padding: 0 1.25rem .25rem; scroll-padding-inline: 1.25rem;
  }
  .bento::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; height: 26rem; padding: 1.35rem; }
  .tile h3 { font-size: 1.2rem; }
  .tile .shot { height: 12.5rem; margin-bottom: -1.35rem; }
  .tall .phone-in { display: none; }
  .tall .card { margin-top: auto; }
  .dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.1rem; }
  .dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .3s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
  .dots i.on { width: 22px; background: var(--accent); }
  .drive .pair .b { display: none; }
  .drive .pair img { width: min(230px, 64%); }
}
@media (min-width: 48rem) { .dots { display: none; } }
.tile.tint { background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface); }
.tile.deep { background: radial-gradient(120% 90% at 100% 0%, var(--glow), transparent 60%), var(--raised); }
.tall .phone-in { margin: 1.5rem auto -1.6rem; width: min(260px, 80%); height: auto; aspect-ratio: 540 / 1213; object-fit: cover; object-position: top; border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0; }

/* --------------------------------------------------------- volante */
.drive .wrap { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .drive .wrap { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.drive h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; }
.drive p { color: var(--muted); font-size: 1.15rem; margin-top: 1.1rem; max-width: 30rem; }
.drive .pair { display: flex; gap: 1rem; justify-content: center; }
.drive .pair img { width: min(240px, 46%); height: auto; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.drive .pair .b { margin-top: 3rem; }

/* ------------------------------------------------------ com outros */
.together { background: var(--bg-2); border-block: 1px solid var(--line); }
.duo { display: grid; gap: 2.5rem 4rem; margin-top: 3rem; }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; } }
.duo h3 { font-size: 1.4rem; font-weight: 750; display: flex; align-items: center; gap: .6rem; }
.duo h3 .icon { color: var(--accent); width: 28px; height: 28px; }
.duo p { color: var(--muted); margin-top: .7rem; font-size: 1.1rem; max-width: 30rem; }
.together .note { margin-top: 2.5rem; color: var(--muted); }
.together .ctas { margin-top: 1.5rem; }

/* ------------------------------------------------------ privacidade */
.private .grid { display: grid; gap: 0 3rem; margin-top: 3rem; }
@media (min-width: 52rem) { .private .grid { grid-template-columns: 1fr 1fr; } }
.private .item { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.private .item h3 { font-size: 1.15rem; font-weight: 750; display: flex; gap: .6rem; align-items: center; }
.private .item h3 .icon { color: var(--accent); }
.private .item p { color: var(--muted); margin-top: .35rem; }
.private .more { margin-top: 2rem; font-weight: 700; }

/* ------------------------------------------------------------ final */
.final { padding: 6rem 0 3rem; }
/* Apoiar: o botão nas cores da Buy Me a Coffee, para se ler como deles. */
.support { padding: 0 0 5rem; }
.support-box { display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 44rem) { .support-box { grid-template-columns: 1fr auto; } }
.support-box h2 { font-size: 1.35rem; font-weight: 800; }
.support-box p { color: var(--muted); margin-top: .35rem; max-width: 34rem; }
.bmc { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; min-height: 52px; padding: 0 1.4rem; border-radius: 999px; background: #FFDD00; color: #16130A; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.16, 1, .3, 1), filter .2s; }
.bmc:hover { filter: brightness(.96); }
.bmc:active { transform: translateY(1px) scale(.98); }
.bmc .icon { width: 1.3em; height: 1.3em; }
.final .box { border-radius: calc(var(--r) + 8px); padding: clamp(2rem, 5vw, 4rem); background: radial-gradient(120% 140% at 0% 0%, var(--glow), transparent 55%), var(--surface); border: 1px solid var(--line); display: grid; gap: 1.5rem; }
.final h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; }
.final p { color: var(--muted); font-size: 1.15rem; max-width: 34rem; }
.final .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; color: var(--muted); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; }
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }
footer .coffee { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; font-weight: 700; color: var(--fg); text-decoration: none; }
footer .coffee .icon { color: var(--accent); }

/* -------------------------------------------------------- movimento */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
  .rise.in { opacity: 1; transform: none; }
  .hero .rise:nth-child(2) { transition-delay: .08s; }
  .hero .rise:nth-child(3) { transition-delay: .16s; }
  .bento .rise:nth-child(2) { transition-delay: .06s; }
  .bento .rise:nth-child(3) { transition-delay: .12s; }
  .bento .rise:nth-child(4) { transition-delay: .18s; }
  .bento .rise:nth-child(5) { transition-delay: .24s; }
  .bento .rise:nth-child(6) { transition-delay: .3s; }
}