/* Final framing overrides. Desktop remains authored by style.css; portrait
   receives its own pacing, safe areas and readable cinematic composition. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.hero-ui__entry,
.mobile-inspector,
.bench-ui__focus-exit {
  display: none;
}

.masthead__cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.hero-ui__whatsapp {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.foot__contact {
  justify-self: end;
  display: grid;
  gap: 5px;
  color: var(--tl-color-muted);
  text-align: right;
}

.foot__contact a {
  color: var(--tl-color-ink);
  text-decoration: none;
}

.foot__contact a:hover,
.foot__contact a:focus-visible {
  color: var(--tl-color-accent);
}

.foot__contact small {
  font: inherit;
}

@media (max-width: 760px) {
  .hero-ui__whatsapp {
    margin-top: 14px;
  }

  .foot {
    grid-template-columns: 1fr auto;
  }

  .foot p {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

  .masthead__cta-short::after {
    content: "WHATSAPP ↗";
  }
}

/* The navigation remains a quiet instrument while the film moves beneath it. */
.masthead {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}

.masthead.is-journey {
  height: 64px;
  border-bottom-color: rgb(216 59 24 / .22);
  box-shadow: 0 14px 42px rgb(58 48 36 / .065), inset 0 -1px rgb(255 255 255 / .72);
}

.masthead.is-journey::before {
  opacity: .84;
  background:
    radial-gradient(circle at 92% 0%, rgb(216 59 24 / .13), transparent 28%),
    linear-gradient(100deg, rgb(255 253 248 / .9), rgb(242 238 229 / .72));
}

/* The material highlight is static; navigation no longer repaints forever. */
.masthead::after {
  animation: none !important;
  transform: none !important;
  opacity: .1;
}

.masthead__links a.is-current {
  background: transparent;
  box-shadow: inset 0 -2px var(--vermilion);
}

@media (max-width: 760px) {
  .scroll-track {
    height: 900svh;
    min-height: 6200px;
  }

  .stage {
    min-height: 560px;
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 14%, rgb(216 59 24 / .075), transparent 30%),
      radial-gradient(circle at 8% 76%, rgb(216 59 24 / .04), transparent 34%),
      radial-gradient(circle at 52% 44%, rgb(255 255 255 / .82), transparent 54%),
      var(--paper);
  }

  .stage::before {
    content: "";
    position: absolute;
    inset: 64px 0 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
      linear-gradient(180deg, rgb(216 59 24 / .09), transparent 21%),
      radial-gradient(ellipse at 50% 48%, transparent 0 42%, rgb(216 59 24 / .065) 74%, transparent 100%);
    mix-blend-mode: multiply;
    transition: opacity 480ms ease;
  }

  .stage { touch-action: none; }

  .stage[data-mobile-act="areas"]::before,
  .stage[data-mobile-act="diagnosis"]::before,
  .stage[data-mobile-act="fold"]::before { opacity: .48; }

  .stage[data-mobile-act="machine"]::before { opacity: 1; }

  .stage__canvas {
    width: 100vw !important;
    max-width: 100vw;
    touch-action: none;
    transition: filter 420ms ease, opacity 420ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
  }

  /* The film is discrete on a phone: one deliberate swipe advances one
     authored frame. Native page scrolling resumes at the final chapter. */
  .stage[data-mobile-chapter="08"] .stage__canvas,
  .stage.is-screen-focused .stage__canvas {
    touch-action: pan-y;
  }

  .stage[data-mobile-chapter="08"],
  .stage.is-screen-focused { touch-action: pan-y; }

  .frame {
    inset: 84px 20px 48px;
  }

  .frame__corner {
    width: 20px;
    height: 20px;
    border-color: color-mix(in srgb, var(--vermilion) 46%, var(--ink) 54%);
  }

  .hero-ui {
    inset: 76px 0 0;
    padding: clamp(78px, 13svh, 116px) 30px 0;
    transform-origin: 18% 22%;
  }

  .hero-ui__headline {
    max-width: 13.4ch;
    font-size: clamp(39px, 11.6vw, 50px);
    line-height: .99;
    letter-spacing: -.018em;
    text-wrap: balance;
  }

  .hero-ui__support {
    max-width: 31ch;
    margin-top: 20px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.52;
  }

  .hero-ui__entry {
    display: flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    margin: 18px 0 0;
    color: color-mix(in srgb, var(--ink) 58%, transparent);
    font: 500 7px/1.2 var(--tl-font-mono);
    letter-spacing: .17em;
  }

  .hero-ui__entry::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--vermilion);
  }

  .hero-ui__entry span {
    color: var(--vermilion);
  }

  .hero-ui__areas {
    display: none;
  }

  .register {
    right: 28px;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 56px));
    left: 28px;
    grid-template-columns: 26px 30px minmax(0, 1fr);
    gap: 9px;
    align-items: end;
  }

  .register__eyebrow {
    margin-bottom: 5px !important;
    font-size: 7px;
  }

  .register__title {
    max-width: 15ch;
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.02;
    text-wrap: balance;
  }

  .progress {
    right: 28px;
    bottom: max(42px, calc(env(safe-area-inset-bottom) + 22px));
    grid-template-columns: 78px;
  }

  .bench-ui {
    inset: 68px 0 0;
    overflow: hidden;
  }

  .bench-ui__replay {
    top: 16px;
    left: 28px;
    min-height: 42px;
    padding: 12px 0;
    font-size: 8px;
  }

  .bench-ui__guide {
    right: 28px;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 76px));
    left: 28px;
    width: auto;
    max-width: 36ch;
    padding: 16px 0 7px;
    color: color-mix(in srgb, var(--ink) 68%, transparent);
    border-left: 2px solid rgb(216 59 24 / .55);
    padding-left: 12px;
    background: linear-gradient(90deg, rgb(216 59 24 / .105), rgb(216 59 24 / .025) 72%, transparent);
    font-size: 10.5px;
    line-height: 1.42;
    appearance: none;
    border: 0;
    border-left: 2px solid rgb(216 59 24 / .55);
    text-align: left;
    font-family: var(--tl-font-sans);
    cursor: pointer;
  }

  .bench-ui__guide span {
    margin-bottom: 6px;
    font-size: 7px;
  }

  .bench-ui__guide::after {
    content: "APROXIMAR ↗";
    position: absolute;
    right: 2px;
    top: 17px;
    color: var(--vermilion);
    font: 500 6.5px/1 var(--tl-font-mono);
    letter-spacing: .14em;
  }

  .bench-ui__focus-exit {
    position: absolute;
    top: auto;
    right: 28px;
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px));
    z-index: 9;
    display: block;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgb(21 20 18 / .34);
    background: rgb(255 253 248 / .86);
    color: var(--ink);
    font: 500 7px/1 var(--tl-font-mono);
    letter-spacing: .12em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 360ms;
  }

  .stage.is-screen-focused .bench-ui__guide,
  .stage.is-screen-focused .bench-ui__replay,
  .stage.is-screen-focused .register,
  .stage.is-screen-focused .progress {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }

  .stage.is-screen-focused .bench-ui__focus-exit {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .stage.is-screen-focused .frame {
    opacity: .34;
  }

  .world-switcher {
    right: 18px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 18px;
    width: auto;
    transform: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top-color: rgb(216 59 24 / .28);
    background:
      linear-gradient(90deg, rgb(216 59 24 / .075), transparent 34%),
      linear-gradient(180deg, rgb(242 238 229 / .66), rgb(242 238 229 / .97));
  }

  .world-switcher__item {
    grid-template-columns: 18px minmax(0, 1fr);
    min-width: 0;
    min-height: 58px;
    padding: 13px 4px 8px;
    overflow: hidden;
    font-size: 7.5px;
    letter-spacing: .07em;
  }

  .world-switcher__item::before {
    left: 4px;
  }

  .world-switcher__item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .world-switcher__item small {
    display: none;
  }

  .stage[data-mobile-act="areas"] .register,
  .stage[data-mobile-act="question"] .register,
  .stage[data-mobile-act="diagnosis"] .register,
  .stage[data-mobile-act="fold"] .register,
  .stage[data-mobile-act="machine"] .register {
    opacity: 1;
    transform: none;
  }

  .stage[data-mobile-act="areas"] .progress,
  .stage[data-mobile-act="question"] .progress,
  .stage[data-mobile-act="diagnosis"] .progress,
  .stage[data-mobile-act="fold"] .progress,
  .stage[data-mobile-act="machine"] .progress {
    opacity: 1;
    transform: none;
  }

  /* The notebook's own caption occupies the lower safe area. Remove the
     outgoing film label before that panel arrives so the match cut never
     produces a double exposure of two independent texts. */
  .stage[data-mobile-act="machine"] .register,
  .stage[data-mobile-act="register"] .register,
  .stage[data-mobile-act="machine"] .progress,
  .stage[data-mobile-act="register"] .progress {
    opacity: 0;
    transform: translateY(8px);
  }

  .stage.is-world-transition .world-switcher {
    opacity: .62;
    transform: translateY(2px) scale(.985);
  }

  .mobile-inspector {
    position: absolute;
    inset: 82px 16px max(18px, env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid rgb(21 20 18 / .5);
    background:
      radial-gradient(circle at 100% 0%, rgb(216 59 24 / .12), transparent 28%),
      linear-gradient(145deg, rgb(255 253 248 / .985), rgb(242 238 229 / .985));
    box-shadow: 0 24px 72px rgb(40 32 24 / .2), inset 0 0 0 7px rgb(255 255 255 / .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: perspective(1100px) translateY(32px) rotateX(7deg) scale(.88);
    transform-origin: 50% 70%;
    transition:
      opacity 280ms ease,
      visibility 0s linear 360ms,
      transform 520ms cubic-bezier(.22, 1, .36, 1);
  }

  .stage.is-inspecting .mobile-inspector {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: perspective(1100px) translateY(0) rotateX(0) scale(1);
    transition-delay: 0s;
  }

  .stage.is-inspecting .stage__canvas {
    filter: blur(7px) saturate(.78) brightness(.92);
    opacity: .48;
    transform: scale(.975);
  }

  .stage.is-inspecting .bench-ui,
  .stage.is-inspecting .hero-ui,
  .stage.is-inspecting .register,
  .stage.is-inspecting .progress {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .stage.is-inspecting .frame {
    opacity: .2;
  }

  .mobile-inspector__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgb(21 20 18 / .18);
  }

  .mobile-inspector__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--vermilion);
    font: 500 7px/1.25 var(--tl-font-mono);
    letter-spacing: .17em;
  }

  .mobile-inspector__header h2 {
    margin: 0;
    font: 620 clamp(24px, 7.5vw, 32px)/.98 var(--tl-font-display);
    letter-spacing: -.025em;
  }

  .mobile-inspector__close {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid rgb(21 20 18 / .34);
    background: rgb(255 253 248 / .72);
    color: var(--ink);
    font: 500 7px/1 var(--tl-font-mono);
    letter-spacing: .12em;
  }

  .mobile-inspector__close span {
    margin-left: 4px;
    color: var(--vermilion);
    font-size: 14px;
  }

  .mobile-inspector__worlds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgb(21 20 18 / .2);
  }

  .mobile-inspector__worlds button {
    min-width: 0;
    min-height: 49px;
    padding: 0 4px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgb(21 20 18 / .14);
    background: transparent;
    color: color-mix(in srgb, var(--ink) 58%, transparent);
    font: 500 clamp(6px, 2vw, 8px)/1 var(--tl-font-mono);
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-inspector__worlds button:last-child { border-right: 0; }

  .mobile-inspector__worlds button.is-active {
    color: var(--ink);
    background: rgb(216 59 24 / .085);
    box-shadow: inset 0 -3px var(--vermilion);
  }

  .mobile-inspector__viewport {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(rgb(21 20 18 / .035) 1px, transparent 1px),
      linear-gradient(90deg, rgb(21 20 18 / .035) 1px, transparent 1px);
    background-size: 42px 42px;
  }

  .mobile-inspector__sheet {
    min-height: 100%;
    padding: 19px 20px 24px;
    transform-style: preserve-3d;
  }

  .mobile-inspector__sheet.is-arriving {
    animation: inspector-sheet-next 440ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .mobile-inspector[data-direction="prev"] .mobile-inspector__sheet.is-arriving {
    animation-name: inspector-sheet-prev;
  }

  .mobile-inspector__sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink);
    color: var(--vermilion);
    font: 500 7px/1.2 var(--tl-font-mono);
    letter-spacing: .16em;
  }

  .mobile-inspector__sheet-head span:last-child { color: var(--ink); }

  .mobile-inspector__statement {
    padding: 22px 0 20px;
  }

  .mobile-inspector__statement > p:first-child {
    margin: 0 0 4px;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    font: 500 7px/1.2 var(--tl-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .mobile-inspector__statement > strong {
    display: block;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
    color: var(--vermilion);
    font: 620 clamp(29px, 9.5vw, 43px)/.94 var(--tl-font-display);
    letter-spacing: -.035em;
  }

  .mobile-inspector__statement h3 {
    max-width: 12ch;
    margin: 0 0 12px;
    font: 620 clamp(32px, 10.5vw, 46px)/.9 var(--tl-font-display);
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .mobile-inspector__lede {
    max-width: 35ch;
    margin: 0;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
    font: 400 clamp(14px, 4.1vw, 17px)/1.45 var(--tl-font-sans);
  }

  .mobile-inspector__rows {
    margin: 0;
    border-top: 1px solid rgb(21 20 18 / .2);
  }

  .mobile-inspector__rows > div {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(21 20 18 / .16);
  }

  .mobile-inspector__rows dt,
  .mobile-inspector__rows dd {
    min-width: 0;
    margin: 0;
    font: 500 8px/1.35 var(--tl-font-mono);
    letter-spacing: .08em;
  }

  .mobile-inspector__rows dt { color: var(--vermilion); }
  .mobile-inspector__rows dd { text-align: right; overflow-wrap: anywhere; }

  .mobile-inspector__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 18px;
  }

  .mobile-inspector__tags span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgb(21 20 18 / .25);
    background: rgb(255 253 248 / .7);
    font: 500 7px/1 var(--tl-font-mono);
    letter-spacing: .08em;
  }

  .mobile-inspector__tags i {
    color: var(--vermilion);
    font-style: normal;
  }

  .mobile-inspector__footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
    border-top: 1px solid rgb(21 20 18 / .25);
    background: rgb(242 238 229 / .94);
  }

  .mobile-inspector__footer button {
    align-self: stretch;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 7px/1 var(--tl-font-mono);
    letter-spacing: .08em;
  }

  .mobile-inspector__footer button:last-child { text-align: right; padding-right: 15px; }
  .mobile-inspector__footer button:first-child { text-align: left; padding-left: 15px; }

  .mobile-inspector__footer span {
    color: var(--vermilion);
    font: 500 7px/1 var(--tl-font-mono);
    letter-spacing: .12em;
  }

  @keyframes inspector-sheet-next {
    from { opacity: 0; filter: blur(5px); transform: perspective(900px) translateX(34px) rotateY(-10deg) scale(.96); }
    to { opacity: 1; filter: blur(0); transform: perspective(900px) translateX(0) rotateY(0) scale(1); }
  }

  @keyframes inspector-sheet-prev {
    from { opacity: 0; filter: blur(5px); transform: perspective(900px) translateX(-34px) rotateY(10deg) scale(.96); }
    to { opacity: 1; filter: blur(0); transform: perspective(900px) translateX(0) rotateY(0) scale(1); }
  }
}

@media (max-width: 380px) {
  .hero-ui {
    padding-right: 24px;
    padding-left: 24px;
  }

  .hero-ui__headline {
    font-size: clamp(37px, 11.2vw, 43px);
  }

  .register,
  .bench-ui__guide {
    right: 24px;
    left: 24px;
  }

  .world-switcher {
    right: 14px;
    left: 14px;
  }

  .world-switcher__item {
    grid-template-columns: 16px minmax(0, 1fr);
    font-size: 7px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero-ui {
    padding-top: 62px;
  }

  .hero-ui__headline {
    font-size: clamp(36px, 10.5vw, 43px);
  }

  .hero-ui__support {
    margin-top: 14px;
    font-size: 13px;
  }

  .register {
    bottom: 68px;
  }

  .bench-ui__guide {
    bottom: 82px;
  }

  .mobile-inspector {
    top: 70px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .scroll-track {
    height: 100svh;
    min-height: 560px;
  }
}

/* Prova em registro — faixa discreta, so aparece com depoimento real. */
.prova-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 52px);
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 34px);
  border: 1px solid rgb(216 59 24 / .3);
  border-left: 3px solid #d83b18;
  background: linear-gradient(90deg, rgb(216 59 24 / .06), transparent 55%);
}

.prova-strip[hidden] { display: none; }

.prova-strip__label {
  color: #d83b18;
  font: 500 7.5px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  max-width: 12ch;
}

.prova-strip__quote { margin: 0; transition: opacity 260ms ease; }

.prova-strip.is-swapping .prova-strip__quote { opacity: 0; }

.prova-strip__quote p {
  margin: 0 0 7px;
  font: 600 clamp(15px, 1.6vw, 20px)/1.35 "Source Serif 4", Georgia, serif;
}

.prova-strip__quote footer {
  color: #756d62;
  font: 500 8px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.prova-strip__link {
  color: #d83b18;
  font: 500 8px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .prova-strip { grid-template-columns: 1fr; gap: 12px; }
  .prova-strip__label { max-width: none; }
  .prova-strip__link { justify-self: start; }
}

/* Faixa de prova em modo rascunho. */
.prova-strip.is-draft { border-style: dashed; }

.prova-strip.is-draft .prova-strip__label::after {
  content: " · EXEMPLO (RASCUNHO)";
  opacity: .8;
}