/* ==========================================================================
   Landing do Display Inteligente — /display/
   Herda o sistema de style.css. Aqui só o que é desta página.
   Quem chega aqui já quer o display (anúncio, placa, card da home):
   preço e escolha vêm antes da explicação.
   ========================================================================== */

/* --- primeira dobra: o banner da home, com o vídeo de uso de fundo --------
   Reaproveita o componente .banner de style.css inteiro: no celular o vídeo
   ocupa o banner todo com a camada escura; no computador fica em moldura com
   o cartaz desfocado atrás, porque o vídeo é vertical e esticado numa faixa
   larga ficaria ampliado e borrado. Aqui só entra o bloco de compra. */
.dl-banner .banner-in {
  grid-template-areas:
    "h media"
    "q media"
    "buy media";
}
.dl-buy { grid-area: buy; margin-top: 22px; }
.banner-h .mark {
  text-decoration: underline;
  text-decoration-color: var(--mark);
  text-decoration-thickness: .14em;
  text-underline-offset: .08em;
  text-decoration-skip-ink: none;
}
.dl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dl-price strong,
.dl-offer-price strong {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900;
  letter-spacing: -.028em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.dl-price span,
.dl-offer-price span {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14.5px;
  color: var(--ink-3);
}
.dl-buy .dl-price strong { color: #fff; }
.dl-buy .dl-price span { color: #C3D0DC; }
.dl-cta { margin-top: 16px; }
.dl-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.dl-mini li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #DCE6EE;
}
.dl-mini li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: var(--mark);
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .dl-banner .banner-in { grid-template-areas: "h" "q" "buy"; }
  .dl-buy { position: relative; z-index: 1; margin-top: 18px; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
}

/* --- a escolha: com ou sem a página -------------------------------------- */
.dl-offers { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .dl-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.dl-offer {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-lift);
}
.dl-offer h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
}
.dl-offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 10px;
}
.dl-offer-price .dl-plus {
  font-family: 'Archivo', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.dl-offer-what { margin-top: 14px; font-size: 17px; font-weight: 600; color: var(--ink); }
/* a lista empurra o botão para o pé do card, e os dois botões alinham */
.dl-check {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 22px;
}
.dl-check li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
}
.dl-check li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .38em;
  width: 13px;
  height: 7px;
  border-left: 2.4px solid var(--mark-deep);
  border-bottom: 2.4px solid var(--mark-deep);
  transform: rotate(-45deg);
}

.dl-need { margin-top: 22px; font-size: 17px; color: var(--ink-2); max-width: 70ch; }

/* logo e franquia: linhas discretas, não perguntas que todos respondem */
.dl-more { list-style: none; margin-top: 18px; border-top: 1px solid var(--rule); }
.dl-more li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  color: var(--ink-2);
}
.dl-more a {
  font-weight: 700;
  color: var(--mark-deep);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --- fecho: a marca toma a faixa inteira --------------------------------- */
.dl-close { background: var(--mark); padding: 64px 0; }
.dl-close-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 32px;
}
.dl-close h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 18ch;
}

@media (max-width: 560px) {
  .dl-cta { width: 100%; }
  .dl-offer { padding: 22px 18px 20px; }
  .dl-close { padding: 48px 0; }
  .dl-close .btn { width: 100%; }
}

/* --- barra de polegar sem repetir botão ----------------------------------
   Ela só aparece quando nem o botão do topo nem as ofertas estão na tela:
   ao lado da própria escolha, um "escolher" a mais é ruído. Sem JS a barra
   fica sempre visível — a classe thumb-gerida só entra quando o JS assume. */
.dl.thumb-gerida .thumb {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.dl.thumb-gerida .thumb.is-on {
  transform: none;
  visibility: visible;
  transition: transform .3s var(--ease), visibility 0s;
}

/* --- uma oferta só -------------------------------------------------------- */
@media (min-width: 760px) {
  .dl-offers.dl-offers-one { grid-template-columns: minmax(0, 560px); }
}