/* ====== BASE ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --teal: #45bfbf;
  --magenta: #832376;
  --white: #fff;
}

html, body { background: #b01f6f; }
body { font-family: "graphie", sans-serif; overflow-x: hidden; }
img { display: block; }

/*
  ====== DESKTOP (>= 768px, paisagem) ======
  Composição desenhada num frame de 1182px.
  --u = 1px do frame, escalado pela largura da tela e travado por clamp():
  mínimo na tela md (768px) e máximo em 1920px (em 4K/ultrawide a composição
  para de crescer e fica centralizada, com os fundos ocupando a tela toda).
*/
.desktop {
  container-type: inline-size;
  --u: clamp(768px / 1182, 100cqw / 1182, 1920px / 1182);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Palco centralizado onde ficam os elementos posicionados */
.stage {
  position: relative;
  width: calc(1182 * var(--u));
  height: 100%;
  margin: 0 auto;
}

/* ====== HERO ====== */
.hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(445 * var(--u));
  background: url("assets/images/Imagem-desk.png") center top / cover no-repeat;
  overflow: hidden;
}

.hero .stage { flex: 1 0 auto; min-height: calc(445 * var(--u)); }
.hero .stage > * { position: absolute; }

.hero-linhas {
  left: calc(62 * var(--u));
  top: 0;
  width: calc(462 * var(--u));
}

.hero-faixa {
  left: calc(339 * var(--u));
  top: calc(42 * var(--u));
  width: calc(431 * var(--u));
}

.hero-seta {
  left: calc(409 * var(--u));
  top: calc(49 * var(--u));
  width: 0;
  height: 0;
  border-top: calc(11 * var(--u)) solid transparent;
  border-bottom: calc(11 * var(--u)) solid transparent;
  border-left: calc(12 * var(--u)) solid var(--white);
}

.hero-logo {
  left: calc(219 * var(--u));
  top: calc(3 * var(--u));
  width: calc(222 * var(--u));
}

.hero-copy {
  left: calc(454 * var(--u));
  top: calc(40 * var(--u));
  width: calc(249 * var(--u));
}

.hero-entrada-bg {
  left: calc(597 * var(--u));
  top: calc(168 * var(--u));
  width: calc(151 * var(--u));
}

.hero-entrada {
  left: calc(603 * var(--u));
  top: calc(169 * var(--u));
  width: calc(128 * var(--u));
}

.hero-entrada-aster {
  left: calc(733 * var(--u));
  top: calc(185 * var(--u));
  color: var(--teal);
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.hero-caixa {
  left: calc(734 * var(--u));
  top: calc(119 * var(--u));
  width: calc(76 * var(--u));
}

/* Faixa da estação */
.estacao {
  left: calc(180 * var(--u));
  bottom: 0;
  width: calc(436 * var(--u));
}
.estacao-bg { width: 100%; }

.estacao-txt {
  position: absolute;
  left: calc(25 * var(--u));
  top: calc(12 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--magenta);
  font-size: calc(17 * var(--u));
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estacao-txt strong { font-weight: 700; }
.estacao-txt span { font-weight: 400; }
.estacao-sep { margin: 0 calc(4 * var(--u)); }

.estacao-icon {
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
  fill: var(--magenta);
}

.estacao-fonte {
  position: absolute;
  left: calc(25 * var(--u));
  top: calc(37 * var(--u));
  color: var(--magenta);
  font-size: calc(8 * var(--u));
  letter-spacing: .08em;
}

/* ====== FORM + RODAPÉ ====== */
.rodape {
  position: relative;
  flex: none;
  height: calc(217 * var(--u));
  background: url("assets/images/rodape.png") center / cover no-repeat;
}

/* Máscara que escurece do meio pra cima */
.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(40, 0, 25, .28) 0%,
    rgba(40, 0, 25, .22) 48%,
    rgba(40, 0, 25, 0) 48.4%
  );
  pointer-events: none;
}

.rodape .stage { padding-left: calc(229 * var(--u)); }

.form-desk {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: calc(732 * var(--u));
  height: calc(104 * var(--u));
}

.form-desk input {
  flex: 1 1 0;
  min-width: 0;
  padding: calc(4 * var(--u)) 0;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: max(12px, calc(14 * var(--u)));
  outline: none;
}
.form-desk input::placeholder { color: var(--white); opacity: 1; }
.form-desk input:focus { border-bottom-color: var(--teal); }

.form-desk button {
  flex: none;
  min-width: calc(206 * var(--u));
  height: max(28px, calc(28 * var(--u)));
  margin-left: calc(3 * var(--u));
  padding: 0 1.2em;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  font-size: max(10px, calc(10.5 * var(--u)));
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .2s;
}
.form-desk button:hover { filter: brightness(1.08); }
.form-desk button:disabled { cursor: default; opacity: .8; }

.rodape-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(732 * var(--u));
  height: calc(113 * var(--u));
}

.rodape-logo { width: max(40px, calc(56 * var(--u))); }

.rodape-assinatura {
  margin-right: calc(21 * var(--u));
  color: var(--white);
  font-size: max(11px, calc(14 * var(--u)));
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
}

/*
  ====== MOBILE (< 768px, ou tablet em retrato) ======
  Frame de 720px de largura; --m = 1px do frame.
*/
.mobile { display: none; }

@media (max-width: 767px), (orientation: portrait) and (max-width: 1080px) {
  .desktop { display: none; }
  .mobile {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    container-type: inline-size;
    --m: calc(100cqw / 720);
  }
}

/* ---- Hero mobile ---- */
.m-hero {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(552 * var(--m));
  background: url("assets/images/Imagem-mobile.png") center top / cover no-repeat;
  overflow: hidden;
}
.m-hero > * { position: absolute; }

/* V decorativo girado, com o vértice atrás do losango */
.m-linhas {
  left: calc(-151 * var(--m));
  top: calc(35 * var(--m));
  width: calc(446 * var(--m));
  transform: rotate(-90deg);
}

.m-faixa {
  left: calc(157 * var(--m));
  top: calc(49 * var(--m));
  width: calc(402 * var(--m));
}

.m-seta {
  left: calc(36 * var(--m));
  top: calc(210 * var(--m));
  width: 0;
  height: 0;
  border-top: calc(23 * var(--m)) solid transparent;
  border-bottom: calc(23 * var(--m)) solid transparent;
  border-left: calc(25 * var(--m)) solid var(--white);
}

.m-logo {
  left: calc(-16 * var(--m));
  top: calc(-22 * var(--m));
  width: calc(266 * var(--m));
}

.m-copy {
  left: calc(272 * var(--m));
  top: calc(43 * var(--m));
  width: calc(214 * var(--m));
}

.m-estacao {
  left: 0;
  bottom: 0;
  width: calc(520 * var(--m));
}
.m-estacao .estacao-bg { width: 100%; }
.m-estacao .estacao-txt {
  left: calc(43 * var(--m));
  top: calc(16 * var(--m));
  gap: calc(10 * var(--m));
  font-size: calc(20 * var(--m));
}
.m-estacao .estacao-sep { margin: 0 calc(5 * var(--m)); }
.m-estacao .estacao-icon {
  width: calc(25 * var(--m));
  height: calc(25 * var(--m));
}
.m-estacao .estacao-fonte {
  left: calc(43 * var(--m));
  top: calc(47 * var(--m));
  font-size: calc(11 * var(--m));
}

.m-legenda {
  right: calc(10 * var(--m));
  bottom: calc(10 * var(--m));
  color: var(--white);
  font-size: calc(9 * var(--m));
}

/* ---- Form + endereço mobile ---- */
/* Altura só do conteúdo; em telas altas quem cresce é a foto do hero */
.m-form {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--m));
  padding: calc(24 * var(--m)) 0 calc(34 * var(--m));
  background: url("assets/images/Maskgroup2-mob.png") center top / cover no-repeat;
}

.m-card {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: calc(20 * var(--m));
  width: calc(630 * var(--m));
  min-height: calc(470 * var(--m));
  padding: calc(24 * var(--m)) 0 calc(36 * var(--m));
  background: url("assets/images/Rectangle-mob.png") center / 100% 100% no-repeat;
}

/* Entrada + selo Caixa */
.m-oferta {
  position: relative;
  flex: none;
  height: calc(150 * var(--m));
}
.m-oferta > * { position: absolute; }

.m-entrada {
  left: calc(133 * var(--m));
  top: 0;
  width: calc(209 * var(--m));
}

.m-entrada-aster {
  left: calc(343 * var(--m));
  top: calc(23 * var(--m));
  color: var(--teal);
  font-size: calc(37 * var(--m));
  font-weight: 700;
  line-height: 1;
}

.m-caixa {
  left: calc(387 * var(--m));
  top: calc(2 * var(--m));
  width: calc(110 * var(--m));
}

.form-mob {
  display: flex;
  flex-direction: column;
  width: calc(527 * var(--m));
  margin: 0 auto;
}

.form-mob input {
  width: 100%;
  height: calc(72 * var(--m));
  padding: calc(26 * var(--m)) 0 calc(8 * var(--m));
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  /* 16px mínimo evita o zoom automático do iOS ao focar o campo */
  font-size: max(16px, calc(21 * var(--m)));
  outline: none;
}
.form-mob input::placeholder {
  color: var(--white);
  opacity: 1;
  font-size: 13px;
}
.form-mob input:focus { border-bottom-color: var(--teal); }

.form-mob button {
  align-self: center;
  min-width: calc(450 * var(--m));
  padding: 0 1.2em;
  white-space: nowrap;
  height: max(36px, calc(58 * var(--m)));
  margin-top: calc(44 * var(--m));
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  font-size: max(12px, calc(22 * var(--m)));
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-mob button:disabled { cursor: default; opacity: .8; }

.m-endereco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--m));
  color: var(--teal);
  font-size: calc(22 * var(--m));
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.m-endereco img { width: calc(26 * var(--m)); }

.m-rodape-logo { width: calc(100 * var(--m)); }