/* ==========================================================================
   TIER 4 · Premium quente
   The design language of the Otta Albernaz deck, translated to the web.

   Three rules carry the whole look, and breaking any one of them collapses it:
     1. Left margin locked at 8.6% of viewport width, on every single band.
     2. One accent — terracotta. RE/MAX blue and red appear NOWHERE. The deck
        earns its restraint by refusing them; a red button would undo it.
     3. Zero decoration. No cards, borders, shadows, radii, icons or rules.
        Hierarchy comes from scale, weight, spacing and photography only.
   ========================================================================== */

.t-premium { --edge: 8.6vw; }
.t-premium .wrap { max-width: none; padding-inline: var(--edge); }

.t-premium h1, .t-premium h2, .t-premium h3 { font-weight: 300; }
.t-premium .lead { color: var(--ink-soft); }

.t-premium .eyebrow {
  color: var(--accent);
  letter-spacing: .18em;
  font-weight: 500;
  font-size: .78rem;
}

/* --- topbar: hairline only, no fill ------------------------------------- */

.t-premium .topbar { background: var(--bg); border-bottom: 1px solid var(--line); }
.t-premium .topbar__logo { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.t-premium .topbar__logo span { text-transform: none; letter-spacing: 0; }
.t-premium .topbar__nav a { border-radius: 0; font-weight: 400; }
.t-premium .topbar__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); background: none; }

/* --- hero: full-bleed render, copy left, scrim not flat overlay ---------- */

.t-premium .hero {
  min-height: 78dvh;                 /* dvh, not vh — vh lies on mobile Safari */
  /* column, and the children must be told to fill: a flex item defaults to
     shrink-to-fit, which was collapsing .wrap to its longest word and
     breaking the headline one word per line. Row direction would also have
     put the copy and the qualifier side by side. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 96px 56px;
  background: var(--bg-deep);
  color: var(--on-brand);
}
.t-premium .hero > .wrap { width: 100%; flex: 0 0 auto; }
.t-premium .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* Measured: the render is 2000x1125 and object-fit cover throws away 51% of
     it horizontally, so what survives is the centre strip — dark at the top
     (L~34) and brightest exactly where the copy sits (L~117). Darkening the
     whole frame to beat that brightness is what turned the hero into a brown
     wash: it killed the photograph to save the type.
     The deck does not do that. It puts type on the left at a locked margin and
     lets the photograph breathe on the right. So the scrim is HORIZONTAL:
     near-solid under the column that holds text, clearing to almost nothing on
     the right where nothing is written. Plus a light vertical pass for the
     topbar and the bottom edge. */
  background:
    linear-gradient(180deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,0) 18%,
                            rgba(20,12,6,0) 82%, rgba(20,12,6,.45) 100%),
    linear-gradient(90deg,  rgba(20,12,6,.93) 0%, rgba(20,12,6,.90) 46%,
                            rgba(20,12,6,.62) 64%, rgba(20,12,6,.18) 84%,
                            rgba(20,12,6,.08) 100%);
}

/* Below the desktop breakpoint the copy spans the full width, so there is no
   right-hand column to protect and the horizontal scrim would do nothing.
   Fall back to a vertical one. */
@media (max-width: 899px) {
  .t-premium .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(20,12,6,.50)  0%,
      rgba(20,12,6,.34) 22%,
      rgba(20,12,6,.78) 46%,
      rgba(20,12,6,.86) 100%);
  }
}
.t-premium .hero__copy { max-width: none; }
.t-premium .hero h1 { max-width: 11em; }   /* em, not ch — scales with the clamp */
.t-premium .hero h1 {
  letter-spacing: -.015em;
  /* the tier's clamp is tuned for the desktop measure; on a phone the same
     size against a narrow column produces one word per line */
  font-size: clamp(2rem, 8.5vw, 4.5rem);
}
.t-premium .hero h1 em { font-style: normal; color: var(--highlight); }
.t-premium .hero .lead { color: var(--bg-alt); max-width: 46ch; }
.t-premium .hero .eyebrow { color: var(--highlight); }
/* no opacity: on a dark ground, dimming moves the text TOWARDS the background
   and eats the contrast — this measured 1.85:1 on a phone. The deck's own
   hierarchy is size and space, not weaker ink. */
.t-premium .hero .cta-hint { color: var(--bg-alt); }
.t-premium .hero__qual { margin-top: 40px; }

/* --- CTA: terracotta on dark ink, square ------------------------------- */

.t-premium .cta {
  border-radius: 0;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .88rem;
  padding: 18px 34px;
}

/* --- qualifier: bare, no card ------------------------------------------ */

.t-premium .qual {
  background: none; border: 0; box-shadow: none; padding: 0;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.t-premium .hero .qual { border-top-color: rgba(244,242,222,.28); }
/* In the hero the qualifier has no card — it sits straight on the dark render,
   so everything base colours for the light card (--ink for text, --mute for
   notes, --accent for links) has to invert here. Without this .qual__error
   inherits --ink on --bg-deep and measures 1.0:1: the "não consegui registrar"
   message is invisible, which is the worst one of all to lose. */
.t-premium .hero .qual__title,
.t-premium .hero .qual__q,
.t-premium .hero .qual__sub,
.t-premium .hero .qual__note,
.t-premium .hero .qual__consent,
.t-premium .hero .qual__error { color: var(--bg-alt); }
.t-premium .hero .qual__human,
.t-premium .hero .qual__consent a,
.t-premium .hero .qual__error a { color: var(--bg); }
.t-premium .qual__badge { display: none; }
.t-premium .qual__title { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.t-premium .qual__q { font-weight: 300; font-size: 1.3rem; }
.t-premium .qual__op {
  background: none; border: 1px solid var(--line); border-radius: 0;
  font-weight: 400; color: inherit;
}
.t-premium .hero .qual__op { border-color: rgba(244,242,222,.35); color: var(--bg-alt); }
.t-premium .qual__op:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.t-premium .qual__foot { border-top: 0; }
.t-premium .qual__msg { border-radius: 0; }
.t-premium .qual__form input { border-radius: 0; }
.t-premium .qual__form button { border-radius: 0; }

/* --- stats: sparse row, no band ---------------------------------------- */

.t-premium .stats { background: var(--bg-alt); padding-block: 56px; }
.t-premium .stats__list b {
  font-weight: 200; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.02em;
}
.t-premium .stats__list span { color: var(--ink-soft); }
/* opacity: 1 cancels base's .65 — without it the source line sits at 2.52:1 on
   --bg-alt and no amount of tuning --mute reaches it, because the opacity is
   applied after the colour. The restraint comes from the size instead. */
.t-premium .stats__src { color: var(--mute); opacity: 1; }

/* --- cards → prose blocks: no boxes at all ------------------------------ */

.t-premium .cards__grid { gap: 44px; margin-top: 44px; }
.t-premium .card { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.t-premium .card h3 {
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  font-size: .82rem; color: var(--accent); margin-bottom: 10px;
}
.t-premium .card p { color: var(--ink-soft); font-size: 1.02rem; }

.t-premium .ticks li { color: var(--ink-soft); }
.t-premium .ticks li::before { content: "—"; color: var(--accent); font-weight: 400; }

/* --- steps → numbered prose blocks ------------------------------------- */

.t-premium .steps__list { gap: 44px; }
.t-premium .steps__list li { background: none; padding: 0; border-radius: 0; }
.t-premium .steps__list li::before {
  width: auto; height: auto; background: none; border-radius: 0;
  color: var(--accent); font-weight: 300; font-size: 1.6rem; margin-bottom: 8px;
  content: "0" counter(s);
}
.t-premium .steps__list h3 { font-weight: 500; font-size: 1.05rem; }
.t-premium .steps__list p { color: var(--ink-soft); }

/* --- compare: hairline rows -------------------------------------------- */

.t-premium .compare__grid { border-top-color: var(--line); }
.t-premium .compare__row { border-bottom-color: var(--line); padding-block: 20px; }
.t-premium .compare__b { font-weight: 400; }
.t-premium .compare__b::before { color: var(--accent); }
.t-premium .compare__hd { color: var(--mute); letter-spacing: .14em; }

/* --- quote: the deck paints its quote on a wall ------------------------- */

.t-premium .quote { background: var(--bg-deep); color: var(--on-brand); }
.t-premium .quote blockquote p {
  font-weight: 200; max-width: 20ch;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem); line-height: 1.25;
}
.t-premium .quote cite { color: var(--highlight); letter-spacing: .06em; font-size: .82rem; text-transform: uppercase; }

/* --- media: genuinely full-bleed, no radius ---------------------------- */

.t-premium .media { padding-block: 0; }
.t-premium .media figure { margin: 0; }
.t-premium .media--fullbleed figure { margin-inline: 0; }
.t-premium .media img { aspect-ratio: 21/9; border-radius: 0; }
.t-premium .media figcaption {
  padding: 12px var(--edge) 0; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
}

/* --- videos ------------------------------------------------------------ */

.t-premium .vid__play, .t-premium .vid iframe { border-radius: 0; }
.t-premium .vid__icon { border-radius: 0; width: 64px; height: 46px; }
.t-premium .vid h3 { font-weight: 500; }

/* --- faq --------------------------------------------------------------- */

.t-premium .faq__list, .t-premium .faq details { border-color: var(--line); }
.t-premium .faq summary { font-weight: 500; }
.t-premium .faq summary::after { color: var(--accent); font-weight: 200; }

/* --- secondary channels ------------------------------------------------ */

.t-premium .canais__list a { border-radius: 0; border-color: var(--line); font-weight: 400; }

/* --- final / footer ---------------------------------------------------- */

.t-premium .final { background: var(--bg-alt); }
.t-premium .foot { background: var(--bg-deep); }
.t-premium .foot__brand, .t-premium .foot__h { color: var(--bg-alt); font-weight: 500; }

.t-premium .sticky { border-top-color: var(--line); }

/* ==========================================================================
   ≥ 900px — the deck's real proportions
   ========================================================================== */
@media (min-width: 900px) {
  .t-premium .hero { min-height: 86dvh; padding-block: 140px 72px; }
  .t-premium .hero__inner { display: block; }
  .t-premium .hero__copy { max-width: 62%; }
  .t-premium .hero__qual { max-width: 62%; }

  /* the deck never fills the right third of a text slide */
  .t-premium .prose .wrap > *, .t-premium .compare .wrap > h2 { max-width: 78%; }

  .t-premium .cards__grid { grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .t-premium .steps__list { gap: 48px; }
  .t-premium .media img { aspect-ratio: 21/9; }
}