/* ==========================================================================
   Home page (Canva page 1): "por onde queres começar?"
   Desktop follows the 1920x1080 Canva frame via --u (design units).
   Each card is a size container; --k is 1 design pixel inside a 520px card,
   so card contents keep their proportions at any width.
   ========================================================================== */

.page { position: relative; width: 100%; min-height: calc(1080 * var(--u)); margin: 0 auto; overflow: hidden; }
.deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Header --------------------------------------------------------------- */
.home-header { position: relative; text-align: center; padding-top: calc(100 * var(--u)); }
.logo { width: calc(198 * var(--u)); margin: 0 auto; }

.home-title {
  position: relative; display: inline-block; margin-top: calc(36 * var(--u));
  font-weight: 900; font-size: calc(122 * var(--u)); line-height: 1;
  letter-spacing: -.09em; word-spacing: .04em;
}
.marker { position: relative; z-index: 0; }
.marker::before {
  content: ""; position: absolute; z-index: -1;
  left: -.05em; right: -.18em; top: .42em; bottom: -.06em;
  background: var(--highlight); border-radius: .06em;
  transform: rotate(-2.2deg) skewX(-6deg);
}
.home-subtitle { margin-top: calc(30 * var(--u)); font-weight: 300; font-size: calc(32 * var(--u)); letter-spacing: -.065em; }

/* Path cards ----------------------------------------------------------- */
.paths {
  position: relative; display: flex; justify-content: space-between;
  padding: 0 calc(88 * var(--u)) 0 calc(86 * var(--u)); margin-top: calc(58 * var(--u));
}
.path-wrap { width: calc(520 * var(--u)); container-type: inline-size; }

.path-card {
  --k: calc(100cqw / 520);
  display: block; position: relative; height: calc(390 * var(--k));
  border-radius: calc(46 * var(--k));
  box-shadow: calc(12 * var(--k)) calc(14 * var(--k)) 0 var(--shadow);
}
.path-card--green { background: var(--green); --shadow: var(--green-dark); --num-bg: var(--green-dark); }
.path-card--pink  { background: var(--pink);  --shadow: var(--pink-dark);  --num-bg: var(--pink-dark); }
.path-card--red   { background: var(--red);   --shadow: var(--red-dark);   --num-bg: var(--red-dark); color: #fff; }

.path-card__num {
  position: absolute; left: calc(22 * var(--k)); top: calc(25 * var(--k));
  width: calc(100 * var(--k)); height: calc(100 * var(--k)); padding-right: calc(4 * var(--k));
  display: grid; place-items: center; border-radius: 50%;
  background: var(--num-bg); color: var(--bg);
  font-weight: 900; font-size: calc(50 * var(--k)); letter-spacing: -.08em;
}
.path-card__title { position: absolute; white-space: nowrap; font-weight: 900; line-height: 1; letter-spacing: -.065em; }
.path-card__text  { position: absolute; white-space: nowrap; font-weight: 300; line-height: 1.08; letter-spacing: -.06em; }
.path-card .btn   { position: absolute; }

/* Per-card positions (in card design pixels, measured from Canva) */
.path-card--green .path-card__title { left: calc(36 * var(--k)); top: calc(148 * var(--k)); font-size: calc(47 * var(--k)); }
.path-card--green .path-card__text  { left: calc(37 * var(--k)); top: calc(208 * var(--k)); font-size: max(11px, calc(23 * var(--k))); }
.path-card--green .btn { left: calc(32 * var(--k)); top: calc(293 * var(--k)); width: calc(250 * var(--k)); height: calc(62 * var(--k)); border-width: calc(5 * var(--k)); font-size: calc(34 * var(--k)); }

.path-card--pink .path-card__title { left: calc(37 * var(--k)); top: calc(140 * var(--k)); font-size: calc(41 * var(--k)); }
.path-card--pink .path-card__text  { left: calc(36 * var(--k)); top: calc(234 * var(--k)); font-size: max(11px, calc(24.5 * var(--k))); }
.path-card--pink .btn { left: calc(35 * var(--k)); top: calc(311 * var(--k)); width: calc(190 * var(--k)); height: calc(48 * var(--k)); border-width: calc(5 * var(--k)); font-size: calc(26 * var(--k)); }

.path-card--red .path-card__title { left: calc(38 * var(--k)); top: calc(147 * var(--k)); font-size: calc(34 * var(--k)); }
.path-card--red .path-card__text  { left: calc(38 * var(--k)); top: calc(230 * var(--k)); font-size: max(11px, calc(19 * var(--k))); }
.path-card--red .btn { left: calc(17 * var(--k)); top: calc(297 * var(--k)); width: auto; min-width: calc(272 * var(--k)); padding: 0 calc(10 * var(--k)); height: calc(40 * var(--k)); border-width: calc(4.5 * var(--k)); font-size: max(11px, calc(20 * var(--k))); }

/* Stickers overlapping the cards. Splash, rays and Beatriz: positions measured
   on the designer's high-resolution card images (card face = 520 x 390 k). */
.sticker { position: absolute; pointer-events: none; }
.sticker--bowl    { left: calc(339 * var(--k)); top: calc(245 * var(--k));  width: calc(275 * var(--k)); }
.sticker--splash  { left: calc(415.2 * var(--k)); top: calc(-25.6 * var(--k)); width: calc(76.3 * var(--k)); }
.sticker--avocado { left: calc(415 * var(--k)); top: calc(-35 * var(--k));  width: calc(140 * var(--k)); }
.sticker--beatriz { left: calc(202.6 * var(--k)); top: calc(-35.1 * var(--k)); width: calc(348.7 * var(--k)); }
.sticker--rays    { left: calc(393.5 * var(--k)); top: calc(-99.3 * var(--k)); width: calc(143.3 * var(--k)); }

/* Mobile and tablet: no Canva design exists, cards are stacked ---------- */
@media (max-width: 900px) {
  .page { min-height: auto; padding-bottom: calc(120 * var(--u)); }
  .deco { height: calc(100vw * 1080 / 1920 * 1.6); width: 160%; }
  .deco__lime { display: none; }
  .home-header { padding: calc(60 * var(--u)) calc(24 * var(--u)) 0; }
  .logo { width: calc(200 * var(--u)); }
  .home-title { font-size: calc(96 * var(--u)); line-height: 1.02; margin-top: calc(30 * var(--u)); }
  .home-subtitle { font-size: calc(27 * var(--u)); padding: 0 calc(40 * var(--u)); }
  .paths { flex-direction: column; align-items: center; gap: calc(140 * var(--u)); padding: 0; margin-top: calc(90 * var(--u)); }
  .path-wrap { width: calc(500 * var(--u)); }
}