/*
 * Teleton 2026 — "O que te move?"
 *
 * O layout segue as artes de 2560×1440 (desktop) e 1080×1920 (mobile).
 * Todas as medidas usam a unidade --u = 1px da arte, escalada para a tela,
 * então as posições abaixo correspondem às coordenadas do PSD.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: #1c1614;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: none; }

p,
h1 { margin: 0; font-weight: inherit; }

/* ---------- Desktop (padrão) ---------- */

.hero {
  /* 1px da arte desktop (2560×1440), limitado pela largura e pela altura da tela */
  --u: min(calc(100vw / 2560), max(calc(100vh / 1440), 0.34px));
  --u: min(calc(100vw / 2560), max(calc(100svh / 1440), 0.34px));

  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  height: max(100vh, calc(1440 * var(--u)));
  height: max(100svh, calc(1440 * var(--u)));
  font-family: "Montserrat", Arial, sans-serif;
}

.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  object-fit: cover;
  object-position: 50% 50%;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2560 * var(--u));
  height: calc(1440 * var(--u));
  transform: translate(-50%, -50%);
}

.bottom {
  position: absolute;
  inset: 0;
}

/* Logo */
.logo {
  position: absolute;
  left: calc(248 * var(--u));
  top: calc(306 * var(--u));
  width: calc(355 * var(--u));
}

.logo img { width: 100%; height: auto; }
.logo__v { display: none; }

/* Título */
.headline {
  position: absolute;
  left: calc(243.5 * var(--u));
  top: calc(585.4 * var(--u));
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  white-space: nowrap;
}

.headline__main,
.headline__sub { display: block; }

.headline__main {
  font-weight: 500;
  font-size: calc(148.2 * var(--u));
  line-height: calc(148.2 * var(--u));
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.headline__sub {
  margin-top: calc(-8.7 * var(--u));
  font-weight: 400;
  font-size: calc(81.6 * var(--u));
  line-height: calc(81.6 * var(--u));
  letter-spacing: -0.025em;
}

/* Legenda "Camila Vitória" */
.caption {
  position: absolute;
  right: calc(209.2 * var(--u));
  top: calc(356.1 * var(--u));
  font-weight: 300;
  font-size: calc(41.67 * var(--u));
  line-height: calc(41.67 * var(--u));
  text-align: right;
  white-space: nowrap;
}

.caption strong { font-weight: 700; }

/* Pix */
.pix {
  position: absolute;
  right: calc(210.2 * var(--u));
  top: calc(614.3 * var(--u));
  font-weight: 300;
  font-size: calc(50.2 * var(--u));
  line-height: calc(49.53 * var(--u));
  text-align: right;
  white-space: nowrap;
}

.pix strong { font-weight: 600; }

/* Botões */
.btn {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn img { width: 100%; height: auto; }

.btn:hover { transform: translateY(calc(-3 * var(--u))); filter: brightness(1.08); }
.btn:active { transform: translateY(0); filter: brightness(.95); }

.btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.btn--pix {
  right: calc(210 * var(--u));
  top: calc(801 * var(--u));
  width: calc(451 * var(--u));
}

.btn--doador {
  right: calc(209 * var(--u));
  top: calc(1104 * var(--u));
  width: calc(376 * var(--u));
}

.btn--doador__m { display: none; }

/* Cartão Bradesco */
.bradesco {
  position: absolute;
  left: calc(248.2 * var(--u));
  top: calc(1023.7 * var(--u));
  width: calc(518.8 * var(--u));
  height: calc(196.4 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #ee022c;
}

.bradesco__qr {
  position: absolute;
  left: calc(24.2 * var(--u));
  top: calc(23.6 * var(--u));
  width: calc(148.2 * var(--u));
  height: calc(144.2 * var(--u));
  border-radius: calc(17 * var(--u));
  overflow: hidden;
  background: #fff;
}

.bradesco__qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bradesco__text {
  position: absolute;
  left: calc(188 * var(--u));
  top: calc(31 * var(--u));
  font-weight: 600;
  font-size: calc(24.56 * var(--u));
  line-height: calc(35.22 * var(--u));
  white-space: nowrap;
}

.x2 {
  font-weight: 700;
  font-size: calc(41.2 * var(--u));
  line-height: 0;
}

.x2__x { font-size: calc(34.35 * var(--u)); }

.bradesco__logo {
  position: absolute;
  left: calc(196.8 * var(--u));
  top: calc(120.3 * var(--u));
  width: calc(194 * var(--u));
  height: auto;
}

/* Aviso "chave copiada" */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 10;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  color: #5b2a86;
  font: 600 15px/1.2 "Montserrat", Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Mobile / telas em retrato ---------- */

@media (max-aspect-ratio: 4/5) {
  .hero {
    /* 1px da arte mobile (1080×1920) */
    --u: min(calc(100vw / 1080), max(calc(100vh / 1920), 0.3px));
    --u: min(calc(100vw / 1080), max(calc(100svh / 1920), 0.3px));

    height: max(100vh, calc(1920 * var(--u)));
    height: max(100svh, calc(1920 * var(--u)));
  }

  .hero__bg img { object-position: 50% 35%; }

  /* Palco com a largura da arte; o topo fica preso ao alto da tela
     e o bloco de doação ao rodapé, para funcionar em qualquer altura */
  .stage {
    top: 0;
    width: calc(1080 * var(--u));
    height: 100%;
    transform: translateX(-50%);
  }

  .bottom {
    inset: auto 0 0 0;
    height: calc(620 * var(--u)); /* y 1300 → 1920 da arte */
  }

  .logo {
    left: calc(474 * var(--u));
    top: calc(87 * var(--u));
    width: calc(132 * var(--u));
  }

  .logo__h { display: none; }
  .logo__v { display: block; }

  .headline {
    left: auto;
    right: calc(163.4 * var(--u));
    top: calc(316.4 * var(--u));
    text-align: right;
  }

  .headline__main {
    font-size: calc(152.3 * var(--u));
    line-height: calc(152.3 * var(--u));
  }

  .headline__sub {
    margin-top: calc(-6.2 * var(--u));
    margin-right: calc(18 * var(--u));
    font-size: calc(56.1 * var(--u));
    line-height: calc(56.1 * var(--u));
  }

  .caption {
    right: auto;
    left: calc(113.8 * var(--u));
    top: calc(31.4 * var(--u));
    font-size: calc(25 * var(--u));
    line-height: calc(25 * var(--u));
    text-align: left;
  }

  .btn--pix {
    right: auto;
    left: calc(119 * var(--u));
    top: calc(162 * var(--u));
    width: calc(297 * var(--u));
  }

  .pix {
    right: auto;
    left: calc(118.4 * var(--u));
    top: calc(238.1 * var(--u));
    font-size: calc(34.62 * var(--u));
    line-height: calc(34.17 * var(--u));
    text-align: left;
  }

  .bradesco {
    left: calc(617 * var(--u));
    top: calc(187 * var(--u));
    width: calc(386 * var(--u));
    height: calc(149 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .bradesco__qr {
    left: calc(18 * var(--u));
    top: calc(18 * var(--u));
    width: calc(113 * var(--u));
    height: calc(109 * var(--u));
    border-radius: calc(13 * var(--u));
  }

  .bradesco__text {
    left: calc(140.8 * var(--u));
    top: calc(24.9 * var(--u));
    font-size: calc(18.13 * var(--u));
    line-height: calc(26 * var(--u));
  }

  .x2 { font-size: calc(30.4 * var(--u)); }
  .x2__x { font-size: calc(25.4 * var(--u)); }

  .bradesco__logo {
    left: calc(147 * var(--u));
    top: calc(91 * var(--u));
    width: calc(143 * var(--u));
  }

  .btn--doador {
    right: auto;
    left: calc(403 * var(--u));
    top: calc(408 * var(--u));
    width: calc(303 * var(--u));
  }

  .btn--doador__d { display: none; }
  .btn--doador__m { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .toast { transition: none; }
}