/* ============================================================
   Banner AnotaLivre Plus — HTML + CSS puro
   Reconstrução do PNG original (1536 × 1024) em texto real.
   Tudo é derivado de --u (= 1px do design) via container query,
   então o banner escala sem perder proporção.
   ============================================================ */

.al-banner {
  container-type: inline-size;
  width: 100%;
}

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

.al-card {
  /* ---- escala: 1 unidade = 1px na arte original de 1536px ---- */
  --u: 0.0651041667cqw;

  /* ---- paleta (edite aqui para tematizar) ---- */
  --al-ink: #071035;          /* títulos e texto escuro  */
  --al-ink-soft: #050a2a;     /* parágrafo de apoio      */
  --al-blue: #4353da;         /* "privacidade?"          */
  --al-brand: #475ae7;        /* "Livre" da marca        */
  --al-purple: #5b46e2;       /* pílula de preço         */
  --al-cta-bg: #3648d1;       /* barra inferior          */
  --al-yellow: #fedb6a;       /* botão "Assinar Plus"    */
  --al-yellow-hover: #ffe487;
  --al-yellow-active: #f5cd4f;
  --al-yellow-soft: #f8d867;  /* "Plus" no chip          */
  --al-crown: #fddb65;        /* disco da coroa          */
  --al-panel: rgba(255, 255, 255, .55);
  --al-divider: rgba(74, 106, 196, .22);
  --al-chip-bg: linear-gradient(90deg, #3647d0 0%, #4a59de 42%, #6b52e6 72%, #9169f0 100%);
  --al-icon-bg: linear-gradient(150deg, #6a63ea, #4f56e1);
  --al-round: 0;

  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  border-radius: var(--al-round);
  background: #e8f0fd url("/img/plus/fundo.png") 0 0 / 100% 100% no-repeat;
  font-family: Figtree, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: var(--al-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- ilustração 3D (recorte do PNG, bordas suavizadas) ---------- */
.al-card picture { display: contents; }

.al-art {
  position: absolute;
  top: 0;
  left: calc(740 * var(--u));
  width: calc(796 * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ---------- coluna de conteúdo ---------- */
.al-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 calc(68 * var(--u));
}

/* ---------- marca ---------- */
.al-brand {
  display: flex;
  align-items: center;
  gap: calc(19 * var(--u));
  margin-top: calc(70 * var(--u));
}

.al-brand__logo {
  display: block;
  flex: none;
  width: calc(88 * var(--u));
  height: calc(92 * var(--u));
}

.al-brand__name {
  position: relative;
  top: calc(1 * var(--u));
  font-size: calc(67 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(-0.6 * var(--u));
}

.al-brand__name i {
  font-style: normal;
  color: var(--al-brand);
}

/* ---------- título ---------- */
.al-title {
  margin: calc(36 * var(--u)) 0 calc(2 * var(--u)) calc(3 * var(--u));
  font-size: calc(79 * var(--u));
  line-height: calc(87 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-0.2 * var(--u));
}

.al-title span,
.al-title em { display: block; }

.al-title em {
  font-style: normal;
  color: var(--al-blue);
  /* a arte original desenha a 2ª linha ~7% maior; troque para 1 se quiser
     as duas linhas exatamente do mesmo tamanho */
  font-size: calc(1em * var(--al-l2, 1.07));
  line-height: calc(85 * var(--u));
  position: relative;
  top: calc(-2 * var(--u));
}

/* ---------- linha "Conheça o [AnotaLivre Plus]" ---------- */
.al-sub {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));
  margin: calc(10 * var(--u)) 0 0 calc(4 * var(--u));
  font-size: calc(52 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.al-chip {
  display: inline-flex;
  align-items: center;
  height: calc(64 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--al-chip-bg);
  color: #fff;
  font-size: calc(47 * var(--u));
  white-space: nowrap;
}

.al-chip b {
  margin-left: .26em;
  color: var(--al-yellow-soft);
}

/* ---------- pílula de preço ---------- */
.al-price {
  display: inline-flex;
  align-items: center;
  height: calc(71 * var(--u));
  margin: calc(26 * var(--u)) 0 0 calc(2 * var(--u));
  padding: 0 calc(25 * var(--u)) 0 calc(4 * var(--u));
  border-radius: 999px;
  background: var(--al-purple);
  color: #fff;
  font-size: calc(38 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.al-price__crown {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(63 * var(--u));
  height: calc(63 * var(--u));
  margin-right: calc(20 * var(--u));
  border-radius: 50%;
  background: var(--al-crown);
}

.al-price__crown svg {
  width: 69.8%;
  height: 69.8%;
  fill: var(--al-purple);
}

.al-price b {
  margin-left: .26em;
  font-weight: 700;
}

/* ---------- parágrafo de apoio ---------- */
.al-lead {
  margin: calc(21 * var(--u)) 0 0 calc(4 * var(--u));
  font-size: calc(36.2 * var(--u));
  line-height: calc(44 * var(--u));
  font-weight: 400;
  color: var(--al-ink-soft);
}

/* ---------- painel de benefícios ---------- */
.al-features {
  display: flex;
  width: 100%;
  height: calc(189 * var(--u));
  margin: calc(23 * var(--u)) 0 0;
  padding: 0;
  border-radius: calc(24 * var(--u));
  background: var(--al-panel);
  list-style: none;
}

.al-feature {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.al-feature:nth-child(1) { flex: 0 0 35.571%; padding-left: calc(51 * var(--u)); }
.al-feature:nth-child(2) { flex: 0 0 30.357%; padding-left: calc(50 * var(--u)); }
.al-feature:nth-child(3) { flex: 0 0 34.071%; padding-left: calc(46 * var(--u)); }

.al-feature:nth-child(1) .al-feature__text { max-width: calc(278 * var(--u)); }
.al-feature:nth-child(2) .al-feature__text { max-width: calc(250 * var(--u)); }
.al-feature:nth-child(3) .al-feature__text { max-width: calc(273 * var(--u)); }

.al-feature + .al-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(32 * var(--u));
  width: calc(2 * var(--u));
  height: calc(133 * var(--u));
  background: var(--al-divider);
}

.al-feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(107 * var(--u));
  height: calc(107 * var(--u));
  margin-top: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--al-icon-bg);
}

.al-feature__icon svg {
  width: 56.1%;
  height: 56.1%;
}

.al-feature__text {
  margin: calc(26 * var(--u)) 0 0 calc(27 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(37 * var(--u));
}

.al-feature__text b {
  display: block;
  font-weight: 700;
  font-size: calc(29.4 / 28 * 1em);
}

.al-feature__text .al-nb { white-space: nowrap; }

/* ---------- barra de chamada ---------- */
.al-cta {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(101 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  padding: 0 calc(54 * var(--u)) 0 calc(66 * var(--u));
  border-radius: calc(21 * var(--u));
  background: var(--al-cta-bg);
  color: #fff;
  font-size: calc(36.7 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.al-cta > span { line-height: calc(101 * var(--u)); }

.al-cta__spark {
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin-right: calc(24 * var(--u));
  color: var(--al-yellow);
}

.al-cta__btn {
  /* elemento interativo de verdade: zera o estilo nativo do <button> */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;   /* serve também se virar <a href>  */

  display: inline-flex;
  align-items: center;
  height: calc(67 * var(--u));
  margin: 0 calc(7 * var(--u)) 0 calc(13 * var(--u));
  padding: 0 calc(23 * var(--u));
  vertical-align: middle;
  border-radius: calc(12 * var(--u));
  background: var(--al-yellow);
  color: var(--al-ink);
  position: relative;
  top: calc(-4 * var(--u));
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;

  /* pulso: "respiração" do botão — ritmo em --al-pulse */
  animation: al-breathe var(--al-pulse, 2.4s) ease-in-out infinite;
}

/* halo que expande e some, sincronizado com a respiração */
.al-cta__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 calc(14 * var(--u)) calc(4 * var(--u)) var(--al-yellow);
  pointer-events: none;
  opacity: 0;
  animation: al-halo var(--al-pulse, 2.4s) ease-out infinite;
}

@keyframes al-breathe {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.035); }
}

@keyframes al-halo {
  0%   { transform: scale(.98); opacity: .75; }
  60%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* ao interagir, o pulso sai de cena e o estado de hover assume */
.al-cta__btn:hover,
.al-cta__btn:focus-visible,
.al-cta__btn:active { animation: none; }

.al-cta__btn:hover::after,
.al-cta__btn:focus-visible::after,
.al-cta__btn:active::after { animation: none; opacity: 0; }

.al-cta__btn:hover {
  background: var(--al-yellow-hover);
  transform: translateY(calc(-1 * var(--u)));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(8, 16, 60, .28);
}

.al-cta__btn:active {
  background: var(--al-yellow-active);
  transform: none;
  box-shadow: none;
}

.al-cta__btn:focus-visible {
  outline: calc(3 * var(--u)) solid #fff;
  outline-offset: calc(3 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .al-cta__btn { transition: none; animation: none; }
  .al-cta__btn::after { animation: none; opacity: 0; }
  .al-cta__btn:hover { transform: none; }
}

/* ============================================================
   Versão compacta (containers estreitos)
   ============================================================ */
/* Limite baixado de 860px para 600px nesta cópia: o modo compacto empilha a
   ilustração e fica MAIS alto que o formato original, o que num modal é o
   oposto do desejado. Abaixando o corte, o banner mantém o layout nativo em
   larguras menores e encolhe proporcionalmente — texto junto. */
@container (max-width: 600px) {
  .al-card {
    --u: 1px;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background-position: right top;
    background-size: cover;
  }

  .al-art {
    position: static;
    order: -1;
    width: 124%;
    min-width: 0;
    max-width: none;
    margin-left: -24%;
  }

  .al-content {
    position: static;
    min-width: 0;
    max-width: 100%;
    padding: 0 clamp(20px, 5.5cqw, 40px) clamp(24px, 6cqw, 44px);
    margin-top: -6cqw;
  }

  .al-brand { margin-top: 0; gap: 12px; }
  .al-brand__logo { width: 42px; height: 44px; }
  .al-brand__name { top: 0; font-size: 33px; }

  .al-title { margin-top: 18px; font-size: clamp(30px, 8.4cqw, 46px); line-height: 1.15; }
  .al-title em { line-height: inherit; top: 0; }

  .al-sub {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    font-size: clamp(19px, 5.2cqw, 28px);
  }
  .al-chip {
    height: auto;
    padding: .34em .5em;
    font-size: clamp(17px, 4.6cqw, 25px);
    border-radius: 8px;
  }

  .al-price {
    height: auto;
    margin-top: 16px;
    padding: 5px 18px 5px 5px;
    font-size: clamp(17px, 4.6cqw, 25px);
  }
  .al-price__crown { width: 2.2em; height: 2.2em; margin-right: .55em; }

  .al-lead { margin-top: 14px; font-size: clamp(16px, 4.4cqw, 24px); line-height: 1.35; }

  .al-features {
    flex-direction: column;
    height: auto;
    margin-top: 18px;
    padding: 6px 0;
    border-radius: 16px;
  }
  .al-feature { flex: 1 1 auto !important; align-items: center; padding: 12px 16px; }
  .al-feature__text { max-width: none !important; }
  .al-feature + .al-feature::before {
    top: 0;
    left: 16px;
    right: 16px;
    width: auto;
    height: 1px;
  }
  .al-feature__icon { width: 46px; height: 46px; margin-top: 0; }
  .al-feature__text { margin: 0 0 0 14px; font-size: clamp(14px, 3.7cqw, 19px); line-height: 1.34; }

  .al-cta {
    flex-wrap: wrap;
    height: auto;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: clamp(14px, 3.9cqw, 21px);
    white-space: normal;
  }
  .al-cta > span { line-height: 1.45; }
  .al-cta__spark { width: 24px; height: 24px; margin-right: 10px; flex: none; align-self: flex-start; margin-top: 2px; }
  .al-cta__btn {
    top: 0;
    height: auto;
    margin: 0 5px;
    padding: .12em .45em;
    border-radius: 7px;
  }
}