/* A Ponte - single stylesheet. Plain CSS, no framework, no build step.

   The login screen is the approved design; its rules live in section B and are
   reached through `.pagina-login`, the body wrapper class that login.php asks
   ponte_topo() for. Every other page keeps using section A.

   Palette: replaced wholesale (route A). The design's own token names are the
   source of truth; the project's original Portuguese names are kept as aliases
   so trilha.php and the rest do not need rewriting. Measured contrast on the
   new background #031522: text 17.3, soft text 10.7, accent 10.8. The accent
   used to fail AA for text at 4.2 and now passes comfortably, so the two role
   swaps the earlier login proposal needed are no longer necessary.

   --erro is the single token carried over from the old palette. It measures
   8.67 against the new background, so it survives the swap on merit. Saturated
   reds do not: the common #DC2626 falls to 3.83 here and would fail.
   ========================================================================== */

/* Figtree, self-hosted. Official variable file from the author's repository,
   converted to woff2, not subset. SIL Open Font License 1.1. */
@font-face {
    font-family: 'Figtree';
    src: url('fonts/figtree-variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Palette, as named by the design ------------------------------- */
    --color-bg:           #031522;
    --color-bg-deep:      #020d16;
    --color-panel:        rgba(3, 25, 41, 0.88);

    --color-text:         #f3f8fb;
    --color-text-soft:    #b5c7d3;
    --color-text-muted:   #7893a5;

    --color-accent:       #48d5ff;
    --color-accent-strong:#299eff;
    --color-accent-soft:  rgba(72, 213, 255, 0.18);

    --color-border:       rgba(85, 191, 232, 0.34);
    --color-border-soft:  rgba(113, 176, 204, 0.19);

    --shadow-deep:        0 34px 90px rgba(0, 7, 15, 0.38);
    --shadow-soft:        0 14px 34px rgba(0, 10, 20, 0.22);

    --page-padding-x:     clamp(42px, 5.6vw, 96px);
    --page-padding-top:   38px;
    --content-max-width:  1600px;

    --radius-sm:          10px;
    --radius-md:          18px;
    --radius-lg:          30px;
    --radius-pill:        999px;

    /* --- The project's original names, pointing at the same palette ----- */
    --canto:       var(--color-bg);
    --centro:      #031929;
    --borda:       var(--color-bg-deep);
    --topo:        #02131f;
    --campo-fundo: #092335;

    --texto:       var(--color-text);
    --texto-suave: var(--color-text-soft);
    --linha:       var(--color-border-soft);
    --realce:      var(--color-accent);

    /* Carried over from the old palette; measured, not assumed. */
    --erro:        #E4A0A0;

    --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family: var(--fonte);

    --medida: 34rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--fonte);
    color: var(--texto);
    background: var(--canto);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   A. THE PORTAL - every page except login
   ========================================================================== */

/* The login page covers this with its own photograph, so it needs no
   exception: nothing of it is ever visible there. */
body {
    background: radial-gradient(ellipse at center, var(--centro) 0%, var(--canto) 100%);
    background-attachment: fixed;
}

/* --- Layout ------------------------------------------------------------ */

.tela {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 2.5rem;
}

.pagina {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
}

.coluna {
    max-width: var(--medida);
    margin: 0 auto;
}

/* --- Wordmark ---------------------------------------------------------- */

.marca {
    width: 100%;
    max-width: 26rem;
    height: auto;
    display: block;
}

.marca text {
    font-family: var(--fonte);
    font-weight: 800;
    letter-spacing: 0.06em;
    fill: var(--texto);
}

.marca ellipse {
    fill: none;
    stroke: var(--realce);
    stroke-width: 3;
}

/* --- Typography -------------------------------------------------------- */

h1, h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }

p { margin: 0 0 1rem; max-width: 60ch; }

.suave { color: var(--texto-suave); }
.pequeno { font-size: 0.9rem; }

/* --- Forms ------------------------------------------------------------- */

form { margin: 0; }

.campo { margin-bottom: 1.25rem; }

.pagina label,
.tela label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

.pagina input[type="email"],
.pagina input[type="password"],
.pagina textarea,
.tela input[type="email"],
.tela input[type="password"],
.tela textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto);
    background: var(--campo-fundo);
    border: 1px solid var(--realce);
    border-radius: 6px;
}

.pagina textarea,
.tela textarea {
    min-height: 8rem;
    resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--realce);
    outline-offset: 2px;
}

.pagina button,
.tela button {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texto);
    background: transparent;
    border: 1px solid var(--realce);
    border-radius: 6px;
    padding: 0.75rem 1.6rem;
    cursor: pointer;
}

.pagina button:hover,
.tela button:hover {
    background: rgba(72, 213, 255, 0.14);
}

/* --- Blocks ------------------------------------------------------------ */

.aviso {
    border-left: 2px solid var(--erro);
    padding: 0.5rem 0 0.5rem 0.9rem;
    margin-bottom: 1.5rem;
    color: var(--erro);
    font-size: 0.95rem;
}

.devolutiva {
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    padding: 1.75rem 0;
    margin: 2rem 0;
    font-size: 1.08rem;
}

.devolutiva p:last-child { margin-bottom: 0; }

.pergunta { margin-bottom: 2.25rem; }

.pergunta label {
    color: var(--texto);
    font-size: 1.02rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.video {
    margin: 0 0 2.5rem;
    border-radius: 8px;
    overflow: hidden;
}

mux-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    --controls-backdrop-color: rgba(3, 21, 34, 0.6);
}

.topo-aluno {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--texto-suave);
    z-index: 10;
}

.topo-aluno a { color: var(--texto-suave); }

a { color: var(--realce); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   B. THE LOGIN SCREEN
   Everything below comes from the approved design, unchanged except for the
   three transformations described at the top of this file.
   ========================================================================== */

.pagina-login {
    min-width: 320px;
    text-rendering: optimizeLegibility;
}

.pagina-login img {
    display: block;
    max-width: 100%;
}

.pagina-login button,
.pagina-login input {
    font: inherit;
}

.pagina-login button,
.pagina-login a {
    -webkit-tap-highlight-color: transparent;
}

/* The title's tracking was tuned for the typeface the design was drawn in.
   Figtree is geometric with circular bowls and closes up at that value, so it
   carries its own. */
.hero-copy__title { letter-spacing: -0.015em !important; }

/* The error message, which the design had no state for: it authenticated over
   fetch, and this page posts to the server. */
.login-form__aviso {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-left: 2px solid var(--erro);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(228, 160, 160, 0.08);
    color: var(--erro);
    font-size: 15px;
    line-height: 1.45;
}

/* The side columns go back to the design's own treatment: no layer behind
   them, no change of colour. The radial scrim that was here measured well but
   showed its own edges where it met bright sky, and the point of these words
   is to be quiet.

   What is added instead is a shadow on the glyphs. Honest limitation: the WCAG
   contrast formula takes no account of text-shadow, so unlike every other
   colour decision in this file, this one carries no measured number. It helps
   over the bright sunrise; by how much is not something I can state. Measured
   without it, against the brightest region the right column lands on, the
   colour reaches 1.51. */
.pagina-login .concept-list {
    text-shadow:
        0 1px 2px rgba(1, 10, 18, 0.92),
        0 0 10px rgba(1, 10, 18, 0.80),
        0 0 24px rgba(1, 10, 18, 0.55);
}

/* The right column was overlapping the top corner of the card. Lifting it
   clear costs nothing and matches the reference.

   It also carries its own colour, lighter than the left one. That is on
   purpose, not an oversight: the two columns fall on opposite halves of the
   photograph. The left sits on dark rock under a 0.573 veil; the right lands
   on the sunrise sky under a 0.166 veil, where the design's shared
   rgba(139,177,198,.68) measures 1.51. Lightening only the side that needs it
   takes the worst point to 2.04 and the top of the column to 3.22, and leaves
   the left column exactly as drawn.

   Neither figure clears AA. Nothing does here short of a layer behind the
   words, and that layer showed its own edges against bright sky. This value
   was chosen on screen, against real crops at the real scale, knowing the
   numbers. Do not "unify" the two columns later. */
.pagina-login .concept-list--right {
    margin-bottom: 26px;
    color: rgba(185, 208, 221, 0.72);
}

/* The submit button, deliberately.

   It first appeared outlined by accident: the portal's own button rule was
   reaching this page through a selector that never matched what the layout
   actually renders. Bruno saw it that way, compared it against the solid cyan
   the design intended and against a heavier outlined version, and chose this
   one. It is written here on purpose so it does not depend on the bug, and so
   nobody later "fixes" it back to solid thinking the leak has returned.

   Both readings pass with room: text 16.45 and border 10.26 against the card,
   against minimums of 4.5 and 3. The cost is hierarchy, not legibility - the
   field borders sit at 7.32 against the same card, so the button does not
   separate from them as sharply as a filled one would. That trade was made
   with both versions on screen.

   The 6px radius is what the leak produced; the card and the fields use 10px.
   Kept as seen. */
.pagina-login .login-form__submit,
.pagina-login .login-form__submit:hover {
    background: transparent;
    border: 1px solid var(--realce);
    border-radius: 6px;
    color: var(--texto);
    font-weight: 600;
    box-shadow: none;
    filter: none;
}

.pagina-login .login-form__submit:hover {
    background: rgba(72, 213, 255, 0.14);
}

/* The design swept a light sheen across the solid button. With no fill behind
   it, it reads as a smear. */
.pagina-login .login-form__submit::before {
    display: none;
}

.pagina-login .login-form__submit-arrow {
    color: var(--realce);
}

/* Short viewports.

   The design already compresses below 820px of viewport height, but that step
   was cut for screens of 780-820. Measured on a 1920x1080 laptop at 125% Windows
   scaling - a very common configuration - the browser reports 1536x754, and the
   five pillars fall off the bottom.

   The height is not produced by .hero-layout's min-height, which is what it
   looks like. It comes from the card column: the right-hand word list, the
   header, two 51px fields, the button and the support block stack past it. So
   this step takes its millimetres from there, plus the page's own padding and
   the bottom strip. The headline column is left alone - it is not the tallest,
   so shrinking it would buy nothing.

   These numbers are a first pass, chosen to fit 754 with room. They are meant
   to be adjusted on sight. */
@media (min-width: 901px) and (max-height: 780px) {
    .pagina-login {
        --page-padding-top: 18px;
    }

    .pagina-login .landing {
        padding-bottom: 16px;
    }

    .pagina-login .hero-layout {
        min-height: 440px;
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .pagina-login .concept-list-wrap {
        margin-bottom: 6px;
    }

    .pagina-login .concept-list--right {
        margin-bottom: 10px;
    }

    .pagina-login .login-card {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .pagina-login .login-card__header {
        margin-bottom: 17px;
    }

    .pagina-login .form-field__label {
        margin-bottom: 5px;
    }

    .pagina-login .form-field__control {
        height: 46px;
    }

    .pagina-login .login-form__actions {
        margin-top: 8px;
    }

    .pagina-login .login-form__submit {
        height: 46px;
        margin-top: 14px;
    }

    .pagina-login .login-form__support {
        margin-top: 15px;
        padding-top: 15px;
    }

    .pagina-login .bottom-strip__line {
        margin-bottom: 12px;
    }

    .pagina-login .pillar-item {
        min-height: 52px;
    }
}

/* The divider above the provider buttons. */
.login-form__ou {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 16px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.login-form__ou::before,
.login-form__ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border-soft);
}

.login-form__provedor {
    width: 100%;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: rgba(9, 35, 53, 0.55);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.login-form__provedor:hover {
    background: rgba(9, 35, 53, 0.8);
    border-color: var(--color-border);
}

.login-form__provedor img {
    width: 19px;
    height: 19px;
}

/* ==========================================================================
   LOGIN / PORTAL — BASE CSS
   Etapa 2 do projeto.

   Este arquivo define a fundação visual e a composição desktop.
   Etapas posteriores irão refiná-lo com:
   - glassmorphism avançado;
   - gradientes/sombras finais;
   - responsividade tablet/mobile;
   - estados hover/focus;
   - ajustes ligados aos assets definitivos.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* ==========================================================================
   2. RESET / GLOBAL
   ========================================================================== */



/* ==========================================================================
   3. PAGE + BACKGROUND
   ========================================================================== */

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-deep);
}

.page-background {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.page-background__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.page-background__overlay,
.page-background__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-background__overlay {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(1, 15, 26, 0.72) 0%,
      rgba(1, 16, 27, 0.40) 38%,
      rgba(2, 17, 29, 0.10) 63%,
      rgba(2, 18, 30, 0.22) 100%
    );
}

.page-background__vignette {
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(1, 12, 21, 0.18) 0%,
      rgba(1, 13, 23, 0.02) 35%,
      rgba(1, 13, 23, 0.52) 100%
    );
}

.landing {
  width: min(100%, var(--content-max-width));
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--page-padding-top) var(--page-padding-x) 36px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}


/* ==========================================================================
   4. TOP BAR
   ========================================================================== */

.topbar {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.topbar__spacer {
  flex: 1 1 auto;
}

.topbar__tagline {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 3px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #b2cbdc;
  white-space: nowrap;
}

.topbar__plus {
  color: #739bb3;
}

.topbar__line {
  display: inline-block;
  width: 54px;
  height: 1px;
  margin-left: 4px;
  background: rgba(129, 198, 227, 0.62);
}


/* ==========================================================================
   5. HERO LAYOUT
   ========================================================================== */

.hero-layout {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(390px, 0.85fr);
  column-gap: clamp(52px, 6vw, 100px);
  align-items: center;
  min-height: 630px;
  padding: 32px 0 26px;
}


/* ==========================================================================
   6. HERO COPY
   ========================================================================== */

.hero-copy {
  min-width: 0;
  align-self: center;
}

.hero-copy__content {
  width: min(100%, 760px);
}

.hero-copy__title {
  margin: 0;

  font-size: clamp(43px, 3.35vw, 60px);
  line-height: 1.28;
  font-weight: 300;
  letter-spacing: -0.035em;
  color: #f1f7fc;
}

.hero-copy__subtitle {
  max-width: 580px;
  margin: 23px 0 0;

  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--color-text-soft);
}


/* ==========================================================================
   7. FEATURE CHIPS
   ========================================================================== */

.feature-chips {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.feature-chip {
  min-width: 137px;
  height: 57px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(5, 31, 50, 0.66);
}

.feature-chip__icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.feature-chip__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-chip__label {
  font-size: 16px;
  font-weight: 500;
  color: #ecf7fd;
}


/* ==========================================================================
   8. CONCEPT LISTS
   ========================================================================== */

.concept-list {
  list-style: none;
  padding: 0;
  margin: 0;

  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.23em;
  color: rgba(139, 177, 198, 0.68);
}

.concept-list--left {
  margin-top: 57px;
}

.concept-list--right {
  text-align: left;
}

.concept-list-wrap {
  align-self: flex-end;
  margin: 0 20px 12px auto;
}


/* ==========================================================================
   9. LOGIN AREA
   ========================================================================== */

.login-panel-area {
  width: 100%;
  max-width: 470px;
  justify-self: end;

  display: flex;
  flex-direction: column;
}

.login-card {
  width: 100%;
  padding: 38px 37px 31px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  background: var(--color-panel);
}

.login-card__header {
  margin-bottom: 28px;
}

.login-card__title {
  margin: 0;

  font-size: 36px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.login-card__subtitle {
  margin: 7px 0 0;

  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text-soft);
}


/* ==========================================================================
   10. FORM
   ========================================================================== */

.login-form {
  display: flex;
  flex-direction: column;
}

.form-field + .form-field {
  margin-top: 20px;
}

.form-field__label {
  display: inline-block;
  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 400;
  color: #eff8fd;
}

.form-field__control {
  position: relative;
  width: 100%;
  height: 51px;

  display: flex;
  align-items: center;

  border: 1px solid rgba(104, 176, 210, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(9, 35, 53, 0.74);
}

.form-field__icon {
  width: 50px;
  min-width: 50px;
  height: 100%;

  display: grid;
  place-items: center;
}

.form-field__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.8;
}

.form-field__input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 16px 0 2px;

  border: 0;
  outline: 0;

  color: var(--color-text);
  background: transparent;

  font-size: 15px;
}

.form-field__input::placeholder {
  color: #7d94a7;
  opacity: 1;
}

.form-field__toggle-password {
  width: 52px;
  min-width: 52px;
  height: 100%;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.form-field__toggle-password img {
  width: 22px;
  height: 22px;
  opacity: 0.82;
}

.login-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.login-form__forgot-password {
  font-size: 13px;
  text-decoration: none;
  color: var(--color-accent);
}

.login-form__submit {
  width: 100%;
  height: 53px;
  margin-top: 19px;
  padding: 0 27px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  border: 0;
  border-radius: var(--radius-sm);

  background: #48c7f5;
  color: #02131f;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
}

.login-form__submit-arrow {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.login-form__support {
  margin-top: 22px;
  padding-top: 21px;

  text-align: center;
  border-top: 1px solid var(--color-border-soft);

  color: #adc1d0;
  font-size: 13px;
  line-height: 1.5;
}

.login-form__support p {
  margin: 0;
}

.login-form__support a {
  display: inline-block;
  margin-top: 1px;
  color: var(--color-accent);
}


/* ==========================================================================
   11. BOTTOM STRIP
   ========================================================================== */

.bottom-strip {
  align-self: end;
}

.bottom-strip__line {
  width: 67%;
  height: 1px;
  margin-bottom: 27px;
  background: rgba(119, 188, 217, 0.52);
}

.bottom-strip__content {
  display: grid;
  grid-template-columns: 220px minmax(580px, 1fr) 330px;
  align-items: end;
  gap: 18px;
}

.pillars-intro__title {
  margin: 0;

  color: #f1f7fb;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  align-items: end;
}

.pillar-item {
  min-height: 68px;
  padding: 0 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  border-left: 1px solid rgba(106, 159, 183, 0.2);
}

.pillar-item:first-child {
  border-left: 0;
}

.pillar-item__icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
}

.pillar-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pillar-item__label {
  color: #eef6fb;
  font-size: 14px;
  font-weight: 400;
}

.bottom-message {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding-bottom: 4px;
}

.bottom-message__line {
  width: 55px;
  height: 1px;
  margin-top: 8px;
  background: rgba(116, 190, 220, 0.65);
}

.bottom-message p {
  margin: 0;

  color: rgba(140, 176, 197, 0.8);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}


/* ==========================================================================
   12. INITIAL SAFETY FOR SMALLER VIEWPORTS

   A responsividade completa será implementada no item 11.
   Este bloco apenas evita quebra severa antes daquela etapa.
   ========================================================================== */

@media (max-width: 1180px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.85fr);
    column-gap: 40px;
  }

  .hero-copy__title {
    font-size: 42px;
  }

  .bottom-strip__content {
    grid-template-columns: 180px 1fr;
  }

  .bottom-message {
    display: none;
  }
}


/* ==========================================================================
   13. ITEM 8 — FORMULÁRIO DE LOGIN RESPONSIVO

   A responsividade abaixo é local ao formulário/card.
   A adaptação completa da página (hero, fundo, pilares, tablet/mobile)
   permanece reservada para o item 11.
   ========================================================================== */

.login-panel-area {
  min-width: 0;
  container-type: inline-size;
  container-name: login-panel;
}

.login-card,
.login-form,
.form-field,
.form-field__control {
  min-width: 0;
}

.form-field__input {
  /* Evita zoom automático em navegadores móveis ao focar o campo. */
  font-size: max(16px, 1rem);
}

.login-form__submit,
.form-field__control {
  width: 100%;
}

/* O card se ajusta ao espaço disponível sem depender da largura da viewport. */
@container login-panel (max-width: 430px) {
  .login-card {
    padding: 30px 26px 26px;
    border-radius: 24px;
  }

  .login-card__title {
    font-size: 32px;
  }

  .login-card__subtitle {
    font-size: 15px;
  }

  .form-field__control {
    height: 52px;
  }

  .form-field__icon {
    width: 46px;
    min-width: 46px;
  }

  .form-field__toggle-password {
    width: 48px;
    min-width: 48px;
  }

  .login-form__submit {
    height: 54px;
  }
}

@container login-panel (max-width: 350px) {
  .login-card {
    padding: 25px 20px 22px;
  }

  .login-card__header {
    margin-bottom: 24px;
  }

  .login-card__title {
    font-size: 29px;
  }

  .form-field__icon {
    width: 42px;
    min-width: 42px;
  }

  .form-field__toggle-password {
    width: 44px;
    min-width: 44px;
  }

  .form-field__input {
    padding-right: 10px;
  }

  .login-form__support {
    font-size: 12px;
  }
}

/* Fallback para navegadores sem suporte a Container Queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .login-card {
      width: 100%;
      padding: 30px 24px 26px;
    }

    .form-field__control,
    .login-form__submit {
      width: 100%;
    }
  }
}


/* ==========================================================================
   14. ITEM 9 — GLASSMORPHISM DO CARD DE LOGIN

   O efeito abaixo atua somente no card de login.
   O refinamento global de gradientes, sombras, bordas e espaçamentos
   continua reservado para o item 10.
   ========================================================================== */

.login-panel-area {
  isolation: isolate;
}

/* Card principal de vidro */
.login-card {
  position: relative;
  overflow: hidden;

  /*
   * Fundo translúcido em camadas:
   * mantém leitura sobre a imagem sem "matar" a paisagem.
   */
  background:
    linear-gradient(
      145deg,
      rgba(8, 34, 53, 0.78) 0%,
      rgba(4, 24, 40, 0.68) 52%,
      rgba(3, 20, 34, 0.76) 100%
    );

  /*
   * A borda recebe uma leve luminosidade fria,
   * simulando vidro iluminado pelas cores da cena.
   */
  border: 1px solid rgba(111, 202, 240, 0.28);

  /*
   * Blur real do conteúdo que passa por trás do card.
   * Safari ainda usa o prefixo -webkit-.
   */
  -webkit-backdrop-filter: blur(20px) saturate(128%);
  backdrop-filter: blur(20px) saturate(128%);

  /*
   * Sombras locais do card.
   * O tratamento global da página será refinado no item 10.
   */
  box-shadow:
    0 28px 80px rgba(0, 8, 18, 0.34),
    0 8px 30px rgba(0, 11, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* Reflexo superior muito sutil sobre o "vidro" */
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(109, 220, 255, 0.10) 0%,
      rgba(109, 220, 255, 0.035) 28%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0%,
      transparent 24%
    );
}

/* Linha de luz delicada na borda superior/esquerda */
.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  border-radius: inherit;
  padding: 1px;

  background:
    linear-gradient(
      135deg,
      rgba(103, 220, 255, 0.34),
      rgba(103, 220, 255, 0.04) 40%,
      transparent 66%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Mantém todo o conteúdo acima das camadas decorativas */
.login-card__header,
.login-form {
  position: relative;
  z-index: 1;
}

/*
 * Inputs também recebem leve transparência para parecerem parte
 * do mesmo material, sem perder contraste.
 */
.form-field__control {
  background:
    linear-gradient(
      180deg,
      rgba(9, 38, 58, 0.60),
      rgba(5, 30, 48, 0.48)
    );

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/*
 * Fallback para browsers que não oferecem backdrop-filter:
 * aumenta a opacidade do fundo para manter legibilidade.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card {
    background: rgba(3, 24, 40, 0.94);
  }

  .form-field__control {
    background: rgba(7, 34, 53, 0.92);
  }
}


/* ==========================================================================
   15. ITEM 10 — REFINAMENTO VISUAL DO MOCKUP

   Gradientes, sombras, bordas e espaçamentos ajustados para aproximar
   a página do conceito visual aprovado.
   A responsividade global continua reservada para o item 11.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fundo geral
   -------------------------------------------------------------------------- */

.page-background__image {
  filter:
    saturate(0.92)
    contrast(1.03)
    brightness(0.84);
  transform: scale(1.006);
}

.page-background__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(1, 12, 22, 0.79) 0%,
      rgba(1, 15, 25, 0.62) 27%,
      rgba(2, 18, 30, 0.25) 51%,
      rgba(2, 18, 30, 0.08) 68%,
      rgba(2, 17, 29, 0.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 10, 18, 0.17) 0%,
      transparent 34%,
      rgba(1, 12, 20, 0.16) 72%,
      rgba(1, 10, 18, 0.55) 100%
    );
}

.page-background__vignette {
  background:
    radial-gradient(
      circle at 74% 38%,
      rgba(97, 183, 222, 0.05) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 49% 54%,
      transparent 0%,
      rgba(1, 11, 19, 0.05) 52%,
      rgba(1, 8, 14, 0.39) 100%
    );
}


/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.topbar {
  min-height: 42px;
}

.topbar__tagline {
  gap: 10px;
  padding-top: 2px;

  color: rgba(194, 218, 231, 0.80);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.255em;
}

.topbar__plus {
  color: rgba(102, 167, 196, 0.82);
}

.topbar__line {
  width: 58px;
  background:
    linear-gradient(
      90deg,
      rgba(92, 198, 238, 0.72),
      rgba(92, 198, 238, 0.12)
    );
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-layout {
  grid-template-columns: minmax(0, 1.72fr) minmax(400px, 0.82fr);
  column-gap: clamp(58px, 6.6vw, 108px);
  min-height: 638px;
  padding: 38px 0 24px;
}

.hero-copy__content {
  max-width: 770px;
}

.hero-copy__title {
  max-width: 750px;

  font-size: clamp(44px, 3.45vw, 62px);
  line-height: 1.24;
  font-weight: 300;
  letter-spacing: -0.042em;

  color: #f4f8fb;
  text-shadow:
    0 2px 20px rgba(0, 7, 12, 0.18);
}

.hero-copy__subtitle {
  max-width: 560px;
  margin-top: 24px;

  font-size: clamp(17px, 1.16vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.01em;

  color: rgba(198, 215, 225, 0.82);
}


/* --------------------------------------------------------------------------
   Chips — Lembra / Cruza / Antecipa
   -------------------------------------------------------------------------- */

.feature-chips {
  gap: 13px;
  margin-top: 34px;
}

.feature-chip {
  min-width: 138px;
  height: 55px;
  padding: 0 19px;

  gap: 11px;

  border-color: rgba(91, 190, 230, 0.32);

  background:
    linear-gradient(
      180deg,
      rgba(11, 39, 58, 0.77),
      rgba(4, 27, 43, 0.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 22px rgba(0, 11, 20, 0.10);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.feature-chip__icon {
  width: 27px;
  height: 27px;
}

.feature-chip__label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
}


/* --------------------------------------------------------------------------
   Palavras laterais
   -------------------------------------------------------------------------- */

.concept-list {
  font-size: 11px;
  line-height: 1.95;
  letter-spacing: 0.235em;

  color: rgba(143, 177, 196, 0.47);
}

.concept-list--left {
  margin-top: 52px;
}

.concept-list-wrap {
  margin: 0 23px 14px auto;
}


/* --------------------------------------------------------------------------
   Card de login
   -------------------------------------------------------------------------- */

.login-panel-area {
  max-width: 465px;
}

.login-card {
  padding: 39px 38px 31px;
  border-radius: 28px;

  border-color: rgba(89, 188, 228, 0.31);

  box-shadow:
    var(--shadow-deep),
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.login-card__header {
  margin-bottom: 27px;
}

.login-card__title {
  font-size: 35px;
  font-weight: 400;
  line-height: 1.08;
}

.login-card__subtitle {
  margin-top: 8px;

  font-size: 15px;
  line-height: 1.45;

  color: rgba(184, 205, 217, 0.84);
}


/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

.form-field + .form-field {
  margin-top: 19px;
}

.form-field__label {
  margin-bottom: 8px;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;

  color: rgba(239, 248, 252, 0.92);
}

.form-field__control {
  height: 50px;

  border-color: rgba(101, 177, 210, 0.36);
  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 4px 12px rgba(0, 7, 14, 0.07);
}

.form-field__icon {
  width: 48px;
  min-width: 48px;
}

.form-field__icon img {
  width: 20px;
  height: 20px;
  opacity: 0.78;
}

.form-field__input {
  color: #edf7fc;
  font-size: 15px;
  letter-spacing: -0.006em;
}

.form-field__input::placeholder {
  color: rgba(139, 163, 179, 0.75);
}

.form-field__toggle-password {
  width: 50px;
  min-width: 50px;
}

.form-field__toggle-password img {
  width: 20px;
  height: 20px;
  opacity: 0.75;
}

.login-form__actions {
  margin-top: 11px;
}

.login-form__forgot-password {
  font-size: 12px;
  font-weight: 500;

  color: #50d6ff;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   Botão principal
   -------------------------------------------------------------------------- */

.login-form__submit {
  height: 52px;
  margin-top: 18px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #4bd7ff 0%,
      #52c8ff 48%,
      #4abcf7 100%
    );

  color: #02131e;

  box-shadow:
    0 12px 28px rgba(35, 175, 235, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-form__submit-arrow {
  font-size: 20px;
}

.login-form__support {
  margin-top: 21px;
  padding-top: 20px;

  border-top-color: rgba(112, 176, 203, 0.16);

  color: rgba(180, 201, 213, 0.73);
  font-size: 12px;
}

.login-form__support a {
  color: #4dd6ff;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   Faixa inferior
   -------------------------------------------------------------------------- */

.bottom-strip {
  padding-top: 2px;
}

.bottom-strip__line {
  width: 68%;
  margin-bottom: 25px;

  background:
    linear-gradient(
      90deg,
      rgba(92, 190, 229, 0.58) 0%,
      rgba(92, 190, 229, 0.22) 70%,
      transparent 100%
    );
}

.bottom-strip__content {
  grid-template-columns: 220px minmax(590px, 1fr) 330px;
  gap: 20px;
}

.pillars-intro__title {
  font-size: 12px;
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: 0.175em;

  color: rgba(238, 247, 252, 0.91);
}

.pillars-grid {
  column-gap: 0;
}

.pillar-item {
  min-height: 67px;
  gap: 8px;

  border-left-color: rgba(112, 169, 194, 0.16);
}

.pillar-item__icon {
  width: 29px;
  height: 29px;
}

.pillar-item__label {
  font-size: 13px;
  font-weight: 400;

  color: rgba(239, 247, 251, 0.89);
}

.bottom-message {
  gap: 24px;
}

.bottom-message__line {
  width: 57px;

  background:
    linear-gradient(
      90deg,
      rgba(92, 190, 229, 0.62),
      rgba(92, 190, 229, 0.14)
    );
}

.bottom-message p {
  color: rgba(146, 177, 195, 0.69);

  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.175em;
}


/* --------------------------------------------------------------------------
   Pequenas correções de composição
   -------------------------------------------------------------------------- */

.landing {
  padding-bottom: 31px;
}

.hero-copy,
.login-panel-area {
  transform: translateY(-3px);
}


/* ==========================================================================
   16. ITEM 11 — RESPONSIVIDADE GLOBAL
   Desktop, notebook, tablet e celular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP GRANDE / NOTEBOOK
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
  :root {
    --page-padding-x: clamp(36px, 4.6vw, 70px);
  }

  .landing {
    max-width: 1440px;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.82fr);
    column-gap: clamp(44px, 5vw, 76px);
  }

  .hero-copy__title {
    font-size: clamp(42px, 3.7vw, 55px);
  }

  .bottom-strip__content {
    grid-template-columns: 190px minmax(520px, 1fr) 285px;
  }
}


/* --------------------------------------------------------------------------
   NOTEBOOK / TABLET HORIZONTAL
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --page-padding-x: clamp(28px, 4vw, 48px);
    --page-padding-top: 30px;
  }

  .page-shell {
    min-height: 100svh;
  }

  .landing {
    min-height: 100svh;
    padding-bottom: 28px;
  }

  .topbar__tagline {
    font-size: 10px;
    letter-spacing: 0.20em;
  }

  .topbar__line {
    width: 42px;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.28fr) minmax(345px, 0.82fr);
    column-gap: 38px;
    min-height: 600px;
    padding-top: 30px;
  }

  .hero-copy__title {
    font-size: clamp(38px, 4vw, 48px);
    line-height: 1.23;
  }

  .hero-copy__subtitle {
    font-size: 17px;
  }

  .feature-chips {
    flex-wrap: wrap;
    gap: 10px;
  }

  .feature-chip {
    min-width: 126px;
    height: 52px;
  }

  .concept-list--left {
    margin-top: 42px;
  }

  .login-panel-area {
    max-width: 410px;
  }

  .login-card {
    padding: 32px 30px 27px;
  }

  .bottom-strip__line {
    width: 100%;
  }

  .bottom-strip__content {
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 16px;
  }

  .bottom-message {
    display: none;
  }

  .pillar-item {
    padding-inline: 10px;
  }
}


/* --------------------------------------------------------------------------
   TABLET VERTICAL
   A composição deixa de ser duas colunas e passa a ser uma jornada vertical.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --page-padding-x: clamp(24px, 5vw, 42px);
    --page-padding-top: 24px;
  }

  body {
    min-height: 100svh;
  }

  .page-shell {
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-background {
    position: fixed;
  }

  .page-background__image {
    object-position: 58% center;
    transform: scale(1.015);
  }

  .page-background__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(1, 12, 22, 0.66) 0%,
        rgba(1, 14, 24, 0.58) 32%,
        rgba(1, 15, 26, 0.69) 62%,
        rgba(1, 10, 18, 0.88) 100%
      ),
      linear-gradient(
        90deg,
        rgba(1, 12, 22, 0.62) 0%,
        rgba(1, 15, 25, 0.28) 55%,
        rgba(1, 14, 23, 0.38) 100%
      );
  }

  .landing {
    min-height: 100svh;
    grid-template-rows: auto auto auto;
    padding-bottom: 26px;
  }

  .topbar {
    min-height: 36px;
  }

  .topbar__tagline {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .topbar__line {
    width: 34px;
  }

  .hero-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 54px 0 42px;
    gap: 48px;
  }

  .hero-copy,
  .login-panel-area {
    transform: none;
  }

  .hero-copy__content {
    width: min(100%, 680px);
  }

  .hero-copy__title {
    font-size: clamp(40px, 7vw, 54px);
    max-width: 680px;
  }

  .hero-copy__subtitle {
    max-width: 560px;
    font-size: 18px;
  }

  .feature-chips {
    margin-top: 30px;
  }

  .concept-list--left {
    margin-top: 38px;
  }

  .login-panel-area {
    width: min(100%, 540px);
    max-width: 540px;
    align-self: flex-end;
  }

  .concept-list-wrap {
    margin: 0 18px 12px auto;
  }

  .login-card {
    width: 100%;
  }

  .bottom-strip {
    padding-top: 8px;
  }

  .bottom-strip__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pillars-intro__title {
    text-align: left;
  }

  .pillars-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pillar-item {
    padding-inline: 8px;
  }
}


/* --------------------------------------------------------------------------
   CELULAR / TABLET PEQUENO
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  :root {
    --page-padding-x: 22px;
    --page-padding-top: 20px;
  }

  .page-background__image {
    object-position: 62% center;
    filter:
      saturate(0.86)
      contrast(1.02)
      brightness(0.70);
  }

  .page-background__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(1, 10, 18, 0.72) 0%,
        rgba(1, 13, 22, 0.66) 36%,
        rgba(1, 13, 23, 0.78) 70%,
        rgba(1, 9, 16, 0.93) 100%
      );
  }

  .topbar {
    justify-content: flex-end;
  }

  .topbar__spacer {
    display: none;
  }

  .topbar__tagline {
    width: 100%;
    justify-content: flex-end;
    gap: 7px;

    font-size: 8px;
    letter-spacing: 0.13em;
  }

  .topbar__line {
    display: none;
  }

  .hero-layout {
    padding: 45px 0 34px;
    gap: 40px;
  }

  .hero-copy__title {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.18;
    letter-spacing: -0.045em;
  }

  .hero-copy__subtitle {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.52;
  }

  .feature-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 27px;
  }

  .feature-chip {
    min-width: 0;
    width: 100%;
    height: 49px;
    padding: 0 10px;
    gap: 8px;
  }

  .feature-chip__icon {
    width: 23px;
    height: 23px;
  }

  .feature-chip__label {
    font-size: 13px;
  }

  .concept-list {
    font-size: 9px;
    letter-spacing: 0.19em;
  }

  .concept-list--left {
    margin-top: 32px;
  }

  .login-panel-area {
    max-width: none;
    width: 100%;
  }

  .concept-list-wrap {
    margin: 0 8px 10px auto;
  }

  .login-card {
    padding: 29px 24px 25px;
    border-radius: 24px;
  }

  .login-card__title {
    font-size: 31px;
  }

  .bottom-strip__line {
    margin-bottom: 22px;
  }

  .bottom-strip__content {
    gap: 20px;
  }

  .pillars-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
  }

  .pillar-item {
    min-height: 62px;
    padding-inline: 4px;
    gap: 7px;
  }

  .pillar-item__icon {
    width: 25px;
    height: 25px;
  }

  .pillar-item__label {
    font-size: 11px;
  }

  .pillars-intro__title {
    font-size: 11px;
  }
}


/* --------------------------------------------------------------------------
   CELULARES ESTREITOS
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --page-padding-x: 18px;
  }

  .topbar__tagline {
    justify-content: center;
    font-size: 7.5px;
    letter-spacing: 0.11em;
  }

  .hero-layout {
    padding-top: 38px;
    gap: 34px;
  }

  .hero-copy__title {
    font-size: clamp(31px, 9.5vw, 39px);
  }

  .hero-copy__subtitle {
    font-size: 15px;
  }

  .feature-chips {
    grid-template-columns: 1fr;
    max-width: 240px;
  }

  .feature-chip {
    justify-content: flex-start;
    padding-inline: 18px;
  }

  .concept-list--left {
    display: none;
  }

  .concept-list-wrap {
    display: none;
  }

  .login-card {
    padding: 27px 20px 23px;
    border-radius: 22px;
  }

  .login-card__title {
    font-size: 29px;
  }

  .login-card__subtitle {
    font-size: 14px;
  }

  .form-field__control {
    height: 52px;
  }

  .login-form__submit {
    height: 53px;
  }

  .bottom-strip {
    margin-top: 2px;
  }

  .bottom-strip__line {
    margin-bottom: 20px;
  }

  .pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .pillar-item {
    min-height: 58px;
    padding: 8px 6px;
    border-left: 0;
    border-top: 1px solid rgba(112, 169, 194, 0.14);
  }

  .pillar-item:nth-child(-n + 2) {
    border-top: 0;
  }

  .pillar-item:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }

  .pillar-item__label {
    font-size: 12px;
  }
}


/* --------------------------------------------------------------------------
   CELULARES MUITO ESTREITOS
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  :root {
    --page-padding-x: 14px;
  }

  .topbar__tagline {
    gap: 5px;
    font-size: 7px;
    letter-spacing: 0.08em;
  }

  .hero-copy__title {
    font-size: 29px;
  }

  .hero-copy__subtitle {
    font-size: 14px;
  }

  .login-card {
    padding-inline: 17px;
  }

  .login-form__support {
    font-size: 11px;
  }
}


/* --------------------------------------------------------------------------
   ALTURA BAIXA EM DESKTOP / NOTEBOOK
   Ajuda em telas 1366x768 e notebooks com pouca altura útil.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (max-height: 820px) {
  :root {
    --page-padding-top: 24px;
  }

  .landing {
    padding-bottom: 22px;
  }

  .hero-layout {
    min-height: 540px;
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .hero-copy__title {
    font-size: clamp(38px, 3.1vw, 50px);
  }

  .hero-copy__subtitle {
    margin-top: 18px;
  }

  .feature-chips {
    margin-top: 25px;
  }

  .concept-list--left {
    margin-top: 32px;
  }

  .login-card {
    padding-top: 30px;
    padding-bottom: 25px;
  }

  .bottom-strip__line {
    margin-bottom: 18px;
  }

  .pillar-item {
    min-height: 58px;
  }
}


/* ==========================================================================
   17. ITEM 12 — ESTADOS DE HOVER / FOCUS / ACTIVE
   Campos, links, botão principal e controles interativos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Campos de formulário
   -------------------------------------------------------------------------- */

.form-field__control {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.form-field__control:hover {
  border-color: rgba(103, 205, 243, 0.52);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px rgba(73, 201, 245, 0.035),
    0 7px 18px rgba(0, 9, 18, 0.10);
}

/*
 * focus-within permite que o contêiner inteiro responda
 * ao foco do input interno.
 */
.form-field__control:focus-within {
  border-color: rgba(81, 216, 255, 0.88);

  background:
    linear-gradient(
      180deg,
      rgba(11, 45, 67, 0.72),
      rgba(6, 33, 51, 0.62)
    );

  box-shadow:
    0 0 0 3px rgba(67, 204, 255, 0.105),
    0 10px 26px rgba(0, 10, 20, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.form-field__input {
  caret-color: var(--color-accent);

  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.form-field__input:focus {
  outline: none;
}

.form-field__input:focus::placeholder {
  opacity: 0.58;
}


/* --------------------------------------------------------------------------
   Botão mostrar/ocultar senha
   A funcionalidade entra no item 13; aqui ficam apenas os estados visuais.
   -------------------------------------------------------------------------- */

.form-field__toggle-password {
  border-radius: 8px;

  transition:
    background-color 160ms ease,
    opacity 160ms ease,
    transform 120ms ease;
}

.form-field__toggle-password:hover {
  background: rgba(65, 194, 239, 0.075);
}

.form-field__toggle-password:active {
  transform: scale(0.94);
}

.form-field__toggle-password:focus-visible {
  outline: 2px solid rgba(72, 213, 255, 0.82);
  outline-offset: -4px;
}

.form-field__toggle-password:hover img,
.form-field__toggle-password:focus-visible img {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Link "Esqueceu sua senha?"
   -------------------------------------------------------------------------- */

.login-form__forgot-password {
  position: relative;

  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.login-form__forgot-password::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;

  height: 1px;

  background: currentColor;

  transition: right 180ms ease;
}

.login-form__forgot-password:hover {
  color: #82e5ff;
}

.login-form__forgot-password:hover::after,
.login-form__forgot-password:focus-visible::after {
  right: 0;
}

.login-form__forgot-password:focus-visible {
  outline: 2px solid rgba(72, 213, 255, 0.75);
  outline-offset: 5px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   Botão principal
   -------------------------------------------------------------------------- */

.login-form__submit {
  position: relative;
  overflow: hidden;

  transition:
    transform 150ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.login-form__submit::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.22) 46%,
      transparent 72%
    );

  transform: translateX(-130%);

  transition: transform 520ms ease;
}

.login-form__submit:hover {
  transform: translateY(-1px);

  filter: brightness(1.055);

  box-shadow:
    0 16px 34px rgba(35, 175, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.login-form__submit:hover::before {
  transform: translateX(130%);
}

.login-form__submit:active {
  transform: translateY(1px) scale(0.995);

  filter: brightness(0.98);

  box-shadow:
    0 8px 20px rgba(35, 175, 235, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.login-form__submit:focus-visible {
  outline: 3px solid rgba(105, 226, 255, 0.82);
  outline-offset: 4px;
}

.login-form__submit-arrow {
  position: relative;
  z-index: 1;

  transition: transform 170ms ease;
}

.login-form__submit > span:first-child {
  position: relative;
  z-index: 1;
}

.login-form__submit:hover .login-form__submit-arrow {
  transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   Link de suporte
   -------------------------------------------------------------------------- */

.login-form__support a {
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.login-form__support a:hover {
  color: #87e7ff;
  text-shadow: 0 0 14px rgba(72, 213, 255, 0.20);
}

.login-form__support a:focus-visible {
  outline: 2px solid rgba(72, 213, 255, 0.72);
  outline-offset: 4px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   Chips
   Apesar de não serem botões, recebem reação sutil no desktop.
   -------------------------------------------------------------------------- */

.feature-chip {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .feature-chip:hover {
    transform: translateY(-2px);

    border-color: rgba(91, 205, 244, 0.48);

    background:
      linear-gradient(
        180deg,
        rgba(13, 46, 68, 0.84),
        rgba(5, 30, 47, 0.74)
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(0, 11, 20, 0.14);
  }
}


/* --------------------------------------------------------------------------
   Acessibilidade / preferência por menos movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .form-field__control,
  .form-field__toggle-password,
  .login-form__forgot-password,
  .login-form__forgot-password::after,
  .login-form__submit,
  .login-form__submit::before,
  .login-form__submit-arrow,
  .login-form__support a,
  .feature-chip {
    transition: none !important;
  }

  .login-form__submit:hover,
  .login-form__submit:active,
  .feature-chip:hover {
    transform: none;
  }

  .login-form__submit::before {
    display: none;
  }
}


/* ==========================================================================
   18. ITEM 14 — ESTADOS PARA INTEGRAÇÃO COM BACKEND
   ========================================================================== */

.login-form__status {
  min-height: 18px;
  margin: 13px 0 -2px;

  font-size: 12px;
  line-height: 1.45;
  text-align: center;

  color: rgba(188, 208, 219, 0.86);
}

.login-form__status:empty {
  margin-top: 0;
  min-height: 0;
}

.login-form__status[data-status="info"],
.login-form__status[data-status="loading"] {
  color: rgba(151, 218, 239, 0.93);
}

.login-form__status[data-status="success"] {
  color: #8fe7c2;
}

.login-form__status[data-status="error"] {
  color: #ff9caa;
}

.form-field__control[data-invalid="true"] {
  border-color: rgba(255, 116, 137, 0.78);

  box-shadow:
    0 0 0 3px rgba(255, 83, 112, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.login-form__submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  filter: saturate(0.75);
}

.login-form__submit:disabled::before {
  display: none;
}


/* ==========================================================================
   PÁGINA DA TRILHA
   Escopo exclusivo: .pagina-trilha

   Este bloco deve ser incorporado à folha única public/assets/ponte.css.
   Não depende de pré-processador, framework ou etapa de build.
   ========================================================================== */

.pagina-trilha {
    --trilha-fundo: #07131f;
    --trilha-fundo-profundo: #04101a;
    --trilha-superficie: rgba(10, 29, 43, 0.78);
    --trilha-superficie-forte: rgba(11, 32, 47, 0.94);
    --trilha-superficie-suave: rgba(22, 55, 74, 0.38);

    --trilha-borda: rgba(126, 190, 215, 0.16);
    --trilha-borda-forte: rgba(126, 190, 215, 0.28);

    --trilha-texto: #f3f8fb;
    --trilha-texto-secundario: #a8bac6;
    --trilha-texto-suave: #748b99;

    --trilha-ciano: #35c3e6;
    --trilha-ciano-claro: #7ddff2;
    --trilha-ciano-suave: rgba(53, 195, 230, 0.14);

    /*
     * Dourado é deliberadamente excepcional.
     * Será usado nos passos posteriores apenas para conquista/progresso.
     */
    --trilha-dourado: #d8ad62;
    --trilha-dourado-suave: rgba(216, 173, 98, 0.14);

    --trilha-raio-sm: 10px;
    --trilha-raio-md: 16px;
    --trilha-raio-lg: 22px;

    --trilha-sombra-suave:
        0 18px 52px rgba(0, 0, 0, 0.18);

    --trilha-largura-maxima: 1680px;
    --trilha-lateral-largura: 360px;
    --trilha-gap: clamp(24px, 2.4vw, 40px);

    /*
     * O respiro vertical da estrutura. São variáveis e não valores soltos
     * porque a altura da lateral depende deles: ela é sticky com max-height
     * calculada, e precisa descontar o que a estrutura ocupa em cima e
     * embaixo. Mudar o padding sem mudar a conta devolve a barra de rolagem
     * externa — foi exatamente o que aconteceu.
     */
    --trilha-estrutura-topo: clamp(30px, 3.2vw, 52px);
    --trilha-estrutura-base: 56px;

    box-sizing: border-box;
    min-height: 100vh;
    color: var(--trilha-texto);
    background:
        radial-gradient(
            circle at 72% -10%,
            rgba(43, 119, 151, 0.18),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #0a1c2a 0,
            var(--trilha-fundo) 360px,
            var(--trilha-fundo-profundo) 100%
        );
}

.pagina-trilha *,
.pagina-trilha *::before,
.pagina-trilha *::after {
    box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Estrutura principal
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha {
    width: 100%;
    min-height: 100vh;
}

.pagina-trilha .trilha__topo {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--trilha-borda);
    background:
        linear-gradient(
            180deg,
            rgba(7, 22, 34, 0.88),
            rgba(7, 22, 34, 0.66)
        );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pagina-trilha .trilha__topo-conteudo {
    width: min(
        calc(100% - clamp(32px, 5vw, 88px)),
        var(--trilha-largura-maxima)
    );
    min-height: 72px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.pagina-trilha .trilha__marca-contexto {
    color: var(--trilha-texto);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pagina-trilha .trilha__topo-estado {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagina-trilha .trilha__etapa-tecnica {
    color: var(--trilha-texto-suave);
    font-size: 0.78rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Grade: experiência + "Sua caminhada"
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__estrutura {
    width: min(
        calc(100% - clamp(32px, 5vw, 88px)),
        var(--trilha-largura-maxima)
    );
    margin-inline: auto;
    padding-block:
        var(--trilha-estrutura-topo)
        var(--trilha-estrutura-base);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--trilha-lateral-largura);
    align-items: start;
    gap: var(--trilha-gap);
}

.pagina-trilha .trilha__principal {
    min-width: 0;
}

.pagina-trilha .trilha__lateral {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Cabeçalho da etapa
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__cabecalho-etapa {
    margin-bottom: 24px;
}

.pagina-trilha .trilha__breadcrumb {
    margin-bottom: 13px;
    color: var(--trilha-ciano-claro);
    font-size: 0.78rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.pagina-trilha .trilha__titulo {
    margin: 0;
    color: var(--trilha-texto);
    font-size: clamp(2rem, 3vw, 3.35rem);
    font-weight: 460;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.pagina-trilha .trilha__introducao {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--trilha-texto-secundario);
    font-size: 1rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Palco da experiência
   Vídeo, perguntas, agente e outros tipos ocuparão esta mesma região.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__experiencia {
    position: relative;
    min-height: 460px;
    overflow: hidden;

    border: 1px solid var(--trilha-borda-forte);
    border-radius: var(--trilha-raio-lg);

    background:
        linear-gradient(
            145deg,
            rgba(16, 48, 67, 0.78),
            rgba(6, 20, 31, 0.96)
        );

    box-shadow: var(--trilha-sombra-suave);
}

.pagina-trilha .trilha__placeholder {
    min-height: inherit;
    display: grid;
    place-content: center;
    padding: 48px;
    text-align: center;
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__placeholder-rotulo {
    margin: 0 0 8px;
    color: var(--trilha-ciano-claro);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__placeholder p {
    margin-top: 0;
}

.pagina-trilha .trilha__placeholder strong {
    color: var(--trilha-texto);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Área abaixo da experiência
   Receberá CTA, abas e contexto nos passos posteriores.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__apoio {
    margin-top: 24px;
}

.pagina-trilha .trilha__apoio-placeholder {
    min-height: 104px;
    display: flex;
    align-items: center;
    padding: 22px 24px;

    border: 1px solid var(--trilha-borda);
    border-radius: var(--trilha-raio-md);

    color: var(--trilha-texto-suave);
    background: rgba(10, 29, 43, 0.34);
}

/* --------------------------------------------------------------------------
   Sidebar "Sua caminhada"
   A navegação real e seus estados serão implementados nos passos 13–15.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__lateral {
    position: sticky;
    top: 24px;

    overflow: hidden;
    border: 1px solid var(--trilha-borda);
    border-radius: var(--trilha-raio-lg);

    background:
        linear-gradient(
            180deg,
            rgba(15, 40, 56, 0.78),
            rgba(7, 24, 36, 0.88)
        );

    box-shadow: var(--trilha-sombra-suave);
}

.pagina-trilha .trilha__lateral-placeholder {
    min-height: 520px;
    padding: 28px;
}

.pagina-trilha .trilha__lateral-placeholder h2 {
    margin: 0;
    color: var(--trilha-texto);
    font-size: 1rem;
    font-weight: 620;
    letter-spacing: -0.02em;
}

.pagina-trilha .trilha__lateral-placeholder p {
    margin: 12px 0 0;
    color: var(--trilha-texto-suave);
    font-size: 0.88rem;
    line-height: 1.6;
}


/* ========================================================================
   PASSO 6 — INTERFACE SUPERIOR
   ======================================================================== */

.pagina-trilha .trilha__topo {
    min-height: 78px;
    overflow: hidden;
}

.pagina-trilha .trilha__topo-cenario {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.36;

    background:
        linear-gradient(
            90deg,
            rgba(6, 20, 31, 0.98) 0%,
            rgba(6, 20, 31, 0.74) 38%,
            rgba(6, 20, 31, 0.48) 66%,
            rgba(6, 20, 31, 0.92) 100%
        ),
        radial-gradient(
            ellipse at 72% 110%,
            rgba(216, 173, 98, 0.16) 0,
            rgba(53, 195, 230, 0.07) 22%,
            transparent 56%
        );
}

.pagina-trilha .trilha__topo-conteudo {
    position: relative;
    z-index: 1;
    min-height: 78px;
}

.pagina-trilha .trilha__marca {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--trilha-texto);
    text-decoration: none;
}

.pagina-trilha .trilha__marca-simbolo {
    width: 29px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--trilha-ciano-claro);
}

.pagina-trilha .trilha__marca-simbolo svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pagina-trilha .trilha__marca-simbolo path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__marca-texto {
    font-size: 0.95rem;
    font-weight: 610;
    letter-spacing: -0.022em;
    white-space: nowrap;
}

.pagina-trilha .trilha__nav-principal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 2.6vw, 40px);
}

.pagina-trilha .trilha__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 78px;

    color: var(--trilha-texto-secundario);
    font-size: 0.82rem;
    font-weight: 520;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.pagina-trilha .trilha__nav-link:hover,
.pagina-trilha .trilha__nav-link:focus-visible {
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__nav-link.is-active {
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 42px;
    height: 2px;
    border-radius: 999px;

    background: var(--trilha-ciano);
    box-shadow: 0 0 14px rgba(53, 195, 230, 0.42);

    transform: translateX(-50%);
}

.pagina-trilha .trilha__topo-acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pagina-trilha .trilha__progresso-resumo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 108px;
}

.pagina-trilha .trilha__progresso-label {
    color: var(--trilha-texto-suave);
    font-size: 0.68rem;
    font-weight: 530;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.pagina-trilha .trilha__progresso-anel {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(216, 173, 98, 0.30);
    border-radius: 50%;

    /*
     * O arco real será alimentado pelo progresso calculado no backend.
     * Neste passo ele permanece neutro, sem inventar um percentual.
     */
    background:
        radial-gradient(
            circle at center,
            rgba(7, 19, 31, 0.98) 58%,
            transparent 60%
        ),
        conic-gradient(
            rgba(216, 173, 98, 0.20) 0deg,
            rgba(216, 173, 98, 0.20) 360deg
        );
}

.pagina-trilha .trilha__progresso-valor {
    color: var(--trilha-texto-secundario);
    font-size: 0.65rem;
    font-weight: 650;
    line-height: 1;
}

.pagina-trilha .trilha__icone-botao,
.pagina-trilha .trilha__usuario {
    appearance: none;
    border: 0;
    font: inherit;
}

.pagina-trilha .trilha__icone-botao {
    width: 36px;
    height: 36px;
    padding: 0;

    display: grid;
    place-items: center;

    color: var(--trilha-texto-secundario);
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.pagina-trilha .trilha__icone-botao svg {
    width: 18px;
    height: 18px;
}

.pagina-trilha .trilha__icone-botao path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__icone-botao:hover,
.pagina-trilha .trilha__icone-botao:focus-visible {
    color: var(--trilha-texto);
    border-color: var(--trilha-borda);
    background: rgba(255, 255, 255, 0.035);
}

.pagina-trilha .trilha__usuario {
    min-height: 44px;
    padding: 4px 7px 4px 5px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--trilha-texto);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;

    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

.pagina-trilha .trilha__usuario:hover,
.pagina-trilha .trilha__usuario:focus-visible {
    border-color: var(--trilha-borda);
    background: rgba(255, 255, 255, 0.035);
}

.pagina-trilha .trilha__usuario-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    display: grid;
    place-items: center;

    color: var(--trilha-ciano-claro);
    border: 1px solid rgba(125, 223, 242, 0.28);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(53, 195, 230, 0.16),
            rgba(14, 45, 63, 0.72)
        );

    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.pagina-trilha .trilha__usuario-nome {
    max-width: 110px;
    overflow: hidden;
    color: var(--trilha-texto);
    font-size: 0.78rem;
    font-weight: 540;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagina-trilha .trilha__usuario-seta {
    width: 14px;
    height: 14px;
    color: var(--trilha-texto-suave);
}

.pagina-trilha .trilha__usuario-seta path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Estados de foco visíveis */
.pagina-trilha .trilha__marca:focus-visible,
.pagina-trilha .trilha__nav-link:focus-visible,
.pagina-trilha .trilha__icone-botao:focus-visible,
.pagina-trilha .trilha__usuario:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 3px;
}

/* Responsividade inicial do cabeçalho */
@media (max-width: 1120px) {
    .pagina-trilha .trilha__nav-principal {
        gap: 20px;
    }

    .pagina-trilha .trilha__nav-link {
        font-size: 0.76rem;
    }

    .pagina-trilha .trilha__progresso-label {
        display: none;
    }
}

@media (max-width: 900px) {
    .pagina-trilha .trilha__topo-conteudo {
        min-height: 68px;
    }

    .pagina-trilha .trilha__nav-principal {
        display: none;
    }

    .pagina-trilha .trilha__topo-acoes {
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__topo-conteudo {
        width: min(calc(100% - 28px), var(--trilha-largura-maxima));
    }

    .pagina-trilha .trilha__marca-texto {
        font-size: 0.86rem;
    }

    .pagina-trilha .trilha__usuario-nome {
        display: none;
    }

    .pagina-trilha .trilha__topo-acoes {
        gap: 8px;
    }
}


/* ========================================================================
   PASSO 7 — BREADCRUMB E IDENTIFICAÇÃO DA ETAPA
   ======================================================================== */

.pagina-trilha .trilha__cabecalho-etapa {
    max-width: 980px;
    margin-bottom: 18px;
}

.pagina-trilha .trilha__breadcrumb {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    color: var(--trilha-texto-suave);
    /* The size the lens name had before it grew [decided, 26/set]. */
    font-size: 0.86rem;
    font-weight: 520;
    letter-spacing: 0.005em;
}

.pagina-trilha .trilha__breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--trilha-ciano-claro);
    text-decoration: none;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.pagina-trilha .trilha__breadcrumb-link:hover,
.pagina-trilha .trilha__breadcrumb-link:focus-visible {
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__breadcrumb-link:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 3px;
    border-radius: 4px;
}

.pagina-trilha .trilha__breadcrumb-voltar,
.pagina-trilha .trilha__breadcrumb-separador {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__breadcrumb-voltar {
    width: 14px;
    height: 14px;
}

.pagina-trilha .trilha__breadcrumb-separador {
    width: 12px;
    height: 12px;
    color: rgba(168, 186, 198, 0.42);
}

.pagina-trilha .trilha__breadcrumb-atual {
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__titulo {
    max-width: 860px;
    margin: 0;

    color: var(--trilha-texto);
    font-size: clamp(2.15rem, 3.4vw, 3.65rem);
    font-weight: 440;
    line-height: 0.98;
    letter-spacing: -0.047em;
    text-wrap: balance;
}

.pagina-trilha .trilha__introducao {
    max-width: 780px;
    margin: 16px 0 0;

    color: var(--trilha-texto-secundario);
    font-size: clamp(0.96rem, 1.2vw, 1.06rem);
    font-weight: 390;
    line-height: 1.62;
    letter-spacing: -0.008em;
}

@media (max-width: 680px) {
    .pagina-trilha .trilha__cabecalho-etapa {
        margin-bottom: 20px;
    }

    .pagina-trilha .trilha__breadcrumb {
        margin-bottom: 13px;
    }

    .pagina-trilha .trilha__titulo {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1;
    }

    .pagina-trilha .trilha__introducao {
        margin-top: 13px;
        font-size: 0.94rem;
        line-height: 1.58;
    }
}


/* ========================================================================
   PASSO 8 — ÁREA PRINCIPAL DINÂMICA
   ======================================================================== */

.pagina-trilha .trilha__experiencia {
    min-height: clamp(390px, 48vw, 680px);
    display: block;
    isolation: isolate;
}

.pagina-trilha .trilha__experiencia-moldura {
    position: relative;
    width: 100%;
    min-height: inherit;
    overflow: hidden;
    border-radius: inherit;
}

.pagina-trilha .trilha__experiencia-moldura::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(53, 195, 230, 0.10),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(18, 51, 70, 0.24),
            rgba(4, 15, 24, 0.04)
        );
}

.pagina-trilha .trilha__experiencia-corpo {
    width: 100%;
    min-height: inherit;
    display: grid;
}

.pagina-trilha .trilha__experiencia-placeholder {
    align-self: stretch;
    justify-self: stretch;

    display: flex;
    min-height: inherit;
    padding: clamp(36px, 5vw, 72px);

    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.pagina-trilha .trilha__experiencia-placeholder-icone {
    width: 54px;
    height: 54px;
    margin-bottom: 19px;

    display: grid;
    place-items: center;

    color: var(--trilha-ciano-claro);
    border: 1px solid rgba(125, 223, 242, 0.20);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(53, 195, 230, 0.10),
            rgba(7, 24, 36, 0.42)
        );
}

.pagina-trilha .trilha__experiencia-placeholder-icone svg {
    width: 25px;
    height: 25px;
}

.pagina-trilha .trilha__experiencia-placeholder-icone rect,
.pagina-trilha .trilha__experiencia-placeholder-icone path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__experiencia-placeholder-rotulo {
    margin: 0 0 9px;

    color: var(--trilha-ciano-claro);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__experiencia-placeholder-texto {
    max-width: 520px;
    margin: 0;

    color: var(--trilha-texto-secundario);
    font-size: 0.98rem;
    line-height: 1.62;
}

.pagina-trilha .trilha__experiencia-placeholder-texto strong {
    color: var(--trilha-texto);
    font-weight: 590;
}

.pagina-trilha .trilha__experiencia-placeholder-meta {
    margin-top: 16px;

    color: var(--trilha-texto-suave);
    font-size: 0.72rem;
    font-weight: 500;
}

/*
 * Estados estruturais reutilizáveis.
 * Eles não definem conteúdo; apenas dão um contrato visual para etapas futuras.
 */
.pagina-trilha .trilha__experiencia[data-etapa-estado="carregando"] {
    cursor: progress;
}

.pagina-trilha .trilha__experiencia[data-etapa-estado="erro"] {
    border-color: rgba(222, 114, 114, 0.30);
}

.pagina-trilha .trilha__experiencia[data-etapa-estado="concluido"] {
    border-color: rgba(216, 173, 98, 0.28);
}

@media (max-width: 900px) {
    .pagina-trilha .trilha__experiencia {
        min-height: clamp(340px, 62vw, 560px);
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__experiencia {
        min-height: 320px;
        border-radius: var(--trilha-raio-md);
    }

    .pagina-trilha .trilha__experiencia-placeholder {
        padding: 32px 22px;
    }

    .pagina-trilha .trilha__experiencia-placeholder-icone {
        width: 48px;
        height: 48px;
    }
}


/* ========================================================================
   PASSO 9 — PLAYER MUX REAL
   ======================================================================== */

.pagina-trilha .trilha__experiencia[data-etapa-tipo="video"] {
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #02080d;
}

.pagina-trilha .trilha__experiencia[data-etapa-tipo="video"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="video"]
.trilha__experiencia-corpo {
    min-height: 0;
    height: 100%;
}


/*
 * On a video step the subtitle sits centred over the player, bold, a little
 * larger, in the text colour [decided, 16/set]. The attribute on <main> raises
 * the specificity above the existing trilha__introducao and
 * trilha__cabecalho-etapa rules, including those inside media queries, so it
 * holds at every width without touching them.
 *
 * The header loses its 980px cap here. Header and player share one column,
 * trilha__principal, but the cap put the header's centre 34px left of the
 * player's (measured on 16/set). Full width, both share the column's centre.
 */
.pagina-trilha .trilha[data-etapa-tipo="video"] .trilha__cabecalho-etapa {
    max-width: none;
}

.pagina-trilha .trilha[data-etapa-tipo="video"] .trilha__introducao {
    margin-inline: auto;
    text-align: center;
    color: var(--trilha-texto);
    font-size: clamp(1.08rem, 1.4vw, 1.2rem);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   O palco das etapas de perguntas e de devolutiva não é um cartão

   O cartão vem de quatro lugares somados: a borda, o degradê e a sombra da
   regra base; o segundo degradê do `moldura::before`; o piso de
   `min-height: clamp(390px, 48vw, 680px)`; e o `min-height: inherit` que
   moldura e corpo leem do pai.

   Zerar o piso do pai já zera os dois filhos, porque `inherit` lê o valor
   computado. Os dois são redeclarados assim mesmo — é o que o tipo `video`
   faz logo acima, e nesta folha uma regra implícita é uma regra que alguém
   sobrescreve sem perceber.

   Uma regra só, fora de qualquer media query: o atributo sobe a
   especificidade para (0,3,0) e ganha das seis definições de altura, que são
   todas (0,2,0).

   A devolutiva entrou em 15/set pelo mesmo motivo: o piso de altura esticava
   o cartão e espalhava convite, botão e aviso de espera pela tela.
   -------------------------------------------------------------------------- */

/*
 * A etapa de itens é da mesma família da devolutiva — texto e escolhas
 * sobre o fundo da página, sem cartão — e ficou de fora quando estas três
 * regras foram escritas, porque o tipo caía no aviso de tela não
 * implementada.
 */
.pagina-trilha .trilha__experiencia[data-etapa-tipo="perguntas"],
.pagina-trilha .trilha__experiencia[data-etapa-tipo="devolutiva"],
.pagina-trilha .trilha__experiencia[data-etapa-tipo="itens"],
.pagina-trilha .trilha__experiencia[data-etapa-tipo="diagnostico"],
.pagina-trilha .trilha__experiencia[data-etapa-tipo="marco"] {
    min-height: 0;
    overflow: visible;

    border: 0;
    border-radius: 0;

    background: none;
    box-shadow: none;
}

.pagina-trilha .trilha__experiencia[data-etapa-tipo="perguntas"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="perguntas"]
.trilha__experiencia-corpo,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="devolutiva"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="devolutiva"]
.trilha__experiencia-corpo,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="itens"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="itens"]
.trilha__experiencia-corpo,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="diagnostico"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="diagnostico"]
.trilha__experiencia-corpo,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="marco"]
.trilha__experiencia-moldura,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="marco"]
.trilha__experiencia-corpo {
    min-height: 0;
    overflow: visible;
    border-radius: 0;
}

.pagina-trilha .trilha__experiencia[data-etapa-tipo="perguntas"]
.trilha__experiencia-moldura::before,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="devolutiva"]
.trilha__experiencia-moldura::before,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="itens"]
.trilha__experiencia-moldura::before,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="diagnostico"]
.trilha__experiencia-moldura::before,
.pagina-trilha .trilha__experiencia[data-etapa-tipo="marco"]
.trilha__experiencia-moldura::before {
    content: none;
}

/*
 * O campo e o botão na mesma linha.
 *
 * O botão não acrescenta altura: ele mede 50px ao lado de um campo que tem
 * pelo menos 130. A faixa de baixo, que ele ocupava até aqui, custava 88px
 * mais 15 de margem.
 *
 * Alinhado embaixo e não esticado: um botão da altura do campo viraria uma
 * coluna azul de 150px, que é a coisa mais pesada da tela num lugar onde a
 * atenção deveria estar no texto.
 */
.pagina-trilha .trilha__pergunta-linha {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.pagina-trilha .trilha__pergunta-linha .trilha__pergunta-resposta {
    flex: 1 1 auto;
}

.pagina-trilha .trilha__pergunta-botao {
    flex: 0 0 auto;
    min-width: 125px;
}

/*
 * O item atual do breadcrumb virou o <h1> da página. Ele continua com a
 * aparência de breadcrumb; o que precisa ser desfeito é só o que o navegador
 * dá de graça a um h1.
 */
.pagina-trilha h1.trilha__breadcrumb-atual {
    margin: 0;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Sem largura para os dois lado a lado, o botão volta para baixo do campo. */
@media (max-width: 760px) {
    .pagina-trilha .trilha__pergunta-linha {
        flex-direction: column;
        align-items: stretch;
    }

    .pagina-trilha .trilha__pergunta-botao {
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   DEVOLUTIVA

   Mesma largura e mesmo respiro da etapa de perguntas: para o aluno é a
   mesma região da tela mudando de conteúdo, e uma largura diferente faria
   parecer outra página.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__devolutiva {
    width: min(100%, 960px);
    margin-inline: auto;
    padding-inline: clamp(0px, 2vw, 24px);

    display: grid;
    gap: 18px;
}

.pagina-trilha .trilha__devolutiva-convite,
.pagina-trilha .trilha__devolutiva-espera {
    color: var(--trilha-texto-suave);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pagina-trilha .trilha__devolutiva-espera {
    font-size: 0.82rem;
}

/*
 * O lado a lado da m1-9-clareza (Decisões, seção 38, decisão 14). Borda e
 * espaçamentos reaproveitam os valores do material recolhido acima; cor e
 * tamanho do título, do vazio e da marca reaproveitam o convite - nenhum
 * token novo.
 */
.pagina-trilha .trilha__lado-a-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 4px;
}

.pagina-trilha .trilha__lado {
    border: 1px solid var(--trilha-borda);
    padding: 14px;
}

.pagina-trilha .trilha__lado-titulo,
.pagina-trilha .trilha__lado-vazio {
    color: var(--trilha-texto-suave);
    font-size: 0.95rem;
}

.pagina-trilha .trilha__lado-lista {
    margin: 0;
    padding-left: 1.1rem;
}

.pagina-trilha .trilha__lado-lista li + li {
    margin-top: 6px;
}

.pagina-trilha .trilha__lado-marca {
    color: var(--trilha-texto-suave);
    display: block;
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .pagina-trilha .trilha__lado-a-lado {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * O texto do agente. Mais alto e mais largo que o corpo padrão: é a coisa que
 * o aluno veio ler, e a medida de linha importa mais aqui do que em qualquer
 * outro lugar da trilha.
 */
.pagina-trilha .trilha__devolutiva-texto {
    display: grid;
    gap: 12px;

    color: var(--trilha-texto);
    font-size: 1.06rem;
    line-height: 1.66;
}

/*
 * A wider measure for the reading [decided, 16/set]: the global 60ch left it a
 * narrow block. Not the full column - very long lines tire the eye, which is
 * what the measure protects. Paragraphs come from the agent; principios.md
 * asks every prose reading for them.
 *
 * Justified, like a printed page, and without hyphenation: no word is split
 * at the end of a line [decided, 16/set]. On narrow screens few words fit a
 * line and justification opens wide gaps, so it goes back to left-aligned
 * there.
 */
.pagina-trilha .trilha__devolutiva-texto p {
    /*
     * The global p rule adds 1rem below every paragraph, which the grid gap
     * above already provides - together they left almost a blank line between
     * paragraphs [decided, 16/set: a small gap, like a printed page].
     */
    margin: 0;
    max-width: 76ch;

    text-align: justify;
    hyphens: manual;
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__devolutiva-texto p {
        text-align: left;
    }
}

.pagina-trilha .trilha__devolutiva-pergunta {
    margin-top: 6px;

    color: var(--trilha-texto);
    font-size: 1.02rem;
    font-weight: 600;
}

.pagina-trilha .trilha__devolutiva-validacao {
    display: grid;
    gap: 12px;
}

.pagina-trilha .trilha__devolutiva-correcao {
    display: grid;
    gap: 6px;

    color: var(--trilha-texto-suave);
    font-size: 0.86rem;
}

/*
 * The clarification form on purpose - both are the student writing about
 * what the agent said. The correction's soft color and smaller size do NOT
 * carry over: there it is an optional add-on, here it is the screen's main
 * answer.
 */
.pagina-trilha .trilha__devolutiva-clarificacao {
    display: grid;
    gap: 12px;
}

.pagina-trilha .trilha__devolutiva-correcao textarea,
.pagina-trilha .trilha__devolutiva-clarificacao textarea {
    width: 100%;
    padding: 13px 15px;

    resize: vertical;

    border: 1px solid var(--trilha-borda);
    border-radius: 12px;
    outline: none;

    color: var(--trilha-texto);
    background: rgba(255, 255, 255, 0.02);

    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
}

.pagina-trilha .trilha__devolutiva-correcao textarea:focus,
.pagina-trilha .trilha__devolutiva-clarificacao textarea:focus {
    border-color: rgba(125, 223, 242, 0.48);
    background: rgba(53, 195, 230, 0.025);
    box-shadow: 0 0 0 3px rgba(53, 195, 230, 0.08);
}

/*
 * Os três vereditos lado a lado. "Faz sentido" primeiro e primário; os outros
 * dois secundários — não porque valham menos, mas porque o primeiro é o
 * caminho que a maioria vai seguir, e uma tela com três botões de mesmo peso
 * transforma uma confirmação numa decisão.
 */
.pagina-trilha .trilha__devolutiva-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pagina-trilha .trilha__devolutiva-veredito {
    padding: 12px 16px;

    border-left: 2px solid rgba(125, 223, 242, 0.32);
    border-radius: 0 10px 10px 0;

    color: var(--trilha-texto-suave);
    background: rgba(53, 195, 230, 0.045);

    font-size: 0.9rem;
    line-height: 1.55;
}

.pagina-trilha .trilha__devolutiva-veredito blockquote {
    margin: 8px 0 0;
    padding-left: 12px;

    border-left: 1px solid var(--trilha-borda);

    font-style: italic;
}

/*
 * De onde a leitura saiu. Recolhido porque o aluno acabou de escrever aquilo
 * e não precisa relê-lo para entender o texto — mas presente, porque a
 * rastreabilidade é parte da experiência e não só requisito técnico.
 */
.pagina-trilha .trilha__devolutiva-material {
    margin-bottom: 4px;

    /*
     * A borda separa este bloco do que vem DEPOIS dele. Ele ficava no fim da
     * tela e passou para o começo, acima da leitura — a linha acompanhou.
     */
    border-bottom: 1px solid var(--trilha-borda);
    padding-bottom: 14px;
}

.pagina-trilha .trilha__devolutiva-material summary {
    cursor: pointer;

    color: var(--trilha-ciano-claro);
    font-size: 0.84rem;
    font-weight: 560;
}

.pagina-trilha .trilha__devolutiva-item {
    margin-top: 14px;
}

/*
 * The material takes the full width of its column [decided, 16/set]. The
 * global `p { max-width: 60ch }` wrapped questions at half the area, and in
 * `ch` a smaller font makes the line narrower still. The reading itself,
 * trilha__devolutiva-texto, keeps a measure of its own, set below.
 */
.pagina-trilha .trilha__devolutiva-item p {
    max-width: none;
}

/*
 * A line after each answer, in the border colour of the line that closes the
 * material [decided, 16/set]. Not after the last one: that closing line is
 * already there, and two lines together would weigh too much.
 */
.pagina-trilha .trilha__devolutiva-item:not(:last-child) {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--trilha-borda);
}

/*
 * The pillar name, set apart from the answer below it [decided, 16/set]:
 * upper case and bold, in the text colour - cyan read as a link. Upper case
 * is CSS only - the stored title stays "Base".
 */
.pagina-trilha .trilha__devolutiva-item-titulo {
    color: var(--trilha-texto);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__devolutiva-item-pergunta {
    color: var(--trilha-texto-suave);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pagina-trilha .trilha__devolutiva-item-texto {
    margin-top: 4px;

    color: var(--trilha-texto);
    font-size: 0.86rem;
    line-height: 1.6;
}

.pagina-trilha .trilha__devolutiva-item-comentario {
    margin-top: 4px;

    color: var(--trilha-texto-suave);
    font-size: 0.86rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   FOTOGRAFIA DOS PILARES (diagnostico)

   Same column, type and spacing as the question step: the pillar name uses
   trilha__pergunta-texto, the description trilha__pergunta-ajuda, the comment
   the same textarea. Only what the question step does not have is styled
   here - the four states and the summary list.
   -------------------------------------------------------------------------- */

/* What the pillar covers - one paragraph, or two for Recursos Financeiros. */
.pagina-trilha .trilha__pilar-ajuda {
    display: grid;
    gap: 6px;
}

/* A fieldset for accessibility, without the browser's frame. */
.pagina-trilha .trilha__pilar-cartao {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;

    display: grid;
    gap: 12px;
}

.pagina-trilha .trilha__pilar-cartao legend {
    float: left;
    width: 100%;
    padding: 0;
}

.pagina-trilha .trilha__pilar-pergunta {
    color: var(--trilha-texto);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
}

.pagina-trilha .trilha__pilar-opcoes {
    display: grid;
    gap: 8px;
}

.pagina-trilha .trilha__pilar-opcao {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 15px;

    border: 1px solid var(--trilha-borda);
    border-radius: 12px;

    color: var(--trilha-texto);
    background: rgba(255, 255, 255, 0.02);

    font-size: 0.95rem;
    cursor: pointer;
}

.pagina-trilha .trilha__pilar-opcao input {
    margin: 0;
    accent-color: var(--trilha-ciano-claro);
}

.pagina-trilha .trilha__pilar-opcao:has(input:checked) {
    border-color: rgba(125, 223, 242, 0.48);
    background: rgba(53, 195, 230, 0.06);
}

.pagina-trilha .trilha__pilar-opcao:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(53, 195, 230, 0.08);
}

.pagina-trilha .trilha__pilar-comentario {
    display: grid;
    gap: 6px;
}

/*
 * The comment invitation appears once an option is chosen. Written as "hide
 * while nothing is checked": a browser without :has drops the whole selector
 * and simply shows the field, instead of hiding it for good.
 */
.pagina-trilha .trilha__pilar:not(:has(.trilha__pilar-opcao input:checked)) .trilha__pilar-comentario {
    display: none;
}

.pagina-trilha .trilha__pilar-comentario-rotulo {
    color: var(--trilha-texto);
    font-size: 0.95rem;
    font-weight: 600;
}

.pagina-trilha .trilha__pilar-comentario-rotulo span {
    display: block;
    color: var(--trilha-texto-suave);
    font-size: 0.86rem;
    font-weight: 400;
}

.pagina-trilha .trilha__pilar-acoes {
    display: flex;
}

/* The summary: pillar and state side by side, one line each. */
.pagina-trilha .trilha__retrato {
    margin: 0;
    display: grid;
}

.pagina-trilha .trilha__retrato-item {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 16px;

    padding: 10px 0;
    border-bottom: 1px solid var(--trilha-borda);
}

.pagina-trilha .trilha__retrato-item dd {
    margin: 0;
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__retrato-item a {
    color: var(--trilha-ciano-claro);
}

.pagina-trilha .trilha__retrato-item .trilha__retrato-pendente {
    color: var(--trilha-texto-suave);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   MARCO (fim de módulo)

   Same column and spacing as the devolutiva. The badge is the first use of
   gold, reserved for real achievement; the text is justified like a reading.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__marco {
    width: min(100%, 960px);
    margin-inline: auto;
    padding-inline: clamp(0px, 2vw, 24px);

    display: grid;
    gap: 18px;
    justify-items: start;
}

.pagina-trilha .trilha__marco-selo {
    margin: 0;

    color: var(--trilha-dourado);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__marco-titulo {
    margin: 0;

    color: var(--trilha-texto);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.25;
}

.pagina-trilha .trilha__marco-texto {
    display: grid;
    gap: 12px;

    color: var(--trilha-texto);
    font-size: 1.06rem;
    line-height: 1.66;
}

.pagina-trilha .trilha__marco-texto p {
    margin: 0;
    max-width: 76ch;

    text-align: justify;
    hyphens: manual;
}

.pagina-trilha .trilha__marco-numeros {
    display: grid;
    gap: 12px;
    margin: 12px 0;

    color: var(--trilha-texto);
    font-size: 1.06rem;
    line-height: 1.66;
}

.pagina-trilha .trilha__marco-numeros p {
    margin: 0;
    max-width: 76ch;
}

.pagina-trilha .trilha__marco-grupos {
    margin: 0;
    padding-left: 1.1rem;
}

.pagina-trilha .trilha__marco-grupos li + li {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__marco-texto p {
        text-align: left;
    }
}

.pagina-trilha .trilha__marco-acao {
    margin: 6px 0 0;
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__retrato-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.pagina-trilha .trilha__player {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #02080d;
}

.pagina-trilha .trilha__player-frame {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    border: 0;
    background: #02080d;
}

.pagina-trilha .trilha__player-carregando {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--trilha-texto-suave);
    background:
        radial-gradient(
            circle at center,
            rgba(53, 195, 230, 0.06),
            transparent 34%
        ),
        #02080d;

    font-size: 0.82rem;
}

.pagina-trilha .trilha__player-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(125, 223, 242, 0.18);
    border-top-color: var(--trilha-ciano-claro);
    border-radius: 50%;
    animation: trilha-player-spin 760ms linear infinite;
}

.pagina-trilha .trilha__player[data-player-state="pronto"]
.trilha__player-carregando {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 240ms ease,
        visibility 240ms ease;
}

.pagina-trilha .trilha__experiencia-placeholder--video {
    height: 100%;
    min-height: 0;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(53, 195, 230, 0.065),
            transparent 31%
        );
}

@keyframes trilha-player-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__player-spinner {
        animation-duration: 1.6s;
    }

    .pagina-trilha .trilha__player[data-player-state="pronto"]
    .trilha__player-carregando {
        transition: none;
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__experiencia[data-etapa-tipo="video"] {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .pagina-trilha .trilha__experiencia-placeholder--video {
        padding: 26px 20px;
    }
}


/* ========================================================================
   PASSO 10 — BLOCO PÓS-VÍDEO
   ======================================================================== */

.pagina-trilha .trilha__apoio {
    margin-top: 24px;
}

.pagina-trilha .trilha__pos-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    align-items: start;
    gap: clamp(26px, 4vw, 58px);

    padding: clamp(4px, 0.6vw, 8px) 0 2px;
}

.pagina-trilha .trilha__pos-video-texto {
    min-width: 0;
}

.pagina-trilha .trilha__pos-video-titulo {
    margin: 0;

    color: var(--trilha-texto);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    font-weight: 590;
    line-height: 1.28;
    letter-spacing: -0.024em;
}

.pagina-trilha .trilha__pos-video-descricao {
    max-width: 780px;
    margin: 12px 0 0;

    color: var(--trilha-texto-secundario);
    font-size: 0.95rem;
    font-weight: 390;
    line-height: 1.66;
    letter-spacing: -0.006em;
}

.pagina-trilha .trilha__pos-video-acao {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
}

.pagina-trilha .trilha__cta {
    min-height: 50px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid transparent;
    border-radius: 12px;

    font-size: 0.86rem;
    font-weight: 640;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.pagina-trilha .trilha__cta--primario {
    color: #041018;
    border-color: rgba(125, 223, 242, 0.72);

    background:
        linear-gradient(
            135deg,
            #79ddf1 0%,
            #35c3e6 100%
        );

    box-shadow:
        0 10px 28px rgba(53, 195, 230, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.pagina-trilha .trilha__cta--primario:hover {
    transform: translateY(-1px);

    border-color: rgba(173, 238, 250, 0.92);

    box-shadow:
        0 14px 34px rgba(53, 195, 230, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.pagina-trilha .trilha__cta--primario:active {
    transform: translateY(0);
}

/*
 * The class was already used in devolutiva.php ever since the validation
 * buttons were written, but it never existed in this sheet: the buttons
 * fell back to the base style and rendered pale, which reads as disabled.
 * The outline is so a secondary button is not mistaken for an inactive one.
 */
.pagina-trilha .trilha__cta--secundario {
    color: var(--trilha-ciano-claro);
    border-color: var(--trilha-ciano-claro);
    background: transparent;
}

.pagina-trilha .trilha__cta--secundario:hover {
    transform: translateY(-1px);
    background: var(--trilha-ciano-suave);
}

.pagina-trilha .trilha__cta:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 3px;
}

.pagina-trilha .trilha__cta-icone {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.pagina-trilha .trilha__cta-icone path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__pos-video-nota {
    margin: 0;

    display: flex;
    align-items: flex-start;
    gap: 7px;

    color: var(--trilha-texto-suave);
    font-size: 0.72rem;
    font-weight: 470;
    line-height: 1.45;
}

.pagina-trilha .trilha__pos-video-nota-icone {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex: 0 0 15px;

    color: var(--trilha-ciano-claro);
    opacity: 0.78;
}

.pagina-trilha .trilha__pos-video-nota-icone svg {
    width: 100%;
    height: 100%;
}

.pagina-trilha .trilha__pos-video-nota-icone circle,
.pagina-trilha .trilha__pos-video-nota-icone path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__apoio-futuro {
    display: none;
}

@media (max-width: 900px) {
    .pagina-trilha .trilha__pos-video {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .pagina-trilha .trilha__pos-video-acao {
        max-width: 460px;
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__apoio {
        margin-top: 20px;
    }

    .pagina-trilha .trilha__pos-video {
        gap: 18px;
    }

    .pagina-trilha .trilha__cta {
        min-height: 48px;
        width: 100%;
        padding-inline: 16px;
    }

    .pagina-trilha .trilha__pos-video-descricao {
        font-size: 0.91rem;
        line-height: 1.62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__cta {
        transition: none;
    }

    .pagina-trilha .trilha__cta--primario:hover {
        transform: none;
    }
}


/* ========================================================================
   PASSO 11 — NAVEGAÇÃO SECUNDÁRIA
   ======================================================================== */

.pagina-trilha .trilha__abas {
    position: relative;
    margin-top: clamp(28px, 3.2vw, 42px);

    display: flex;
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 34px);

    border-bottom: 1px solid var(--trilha-borda);
}

.pagina-trilha .trilha__aba {
    position: relative;
    min-height: 54px;
    padding: 0 1px 15px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    appearance: none;
    border: 0;
    background: transparent;

    color: var(--trilha-texto-suave);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 540;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;

    cursor: pointer;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.pagina-trilha .trilha__aba::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;
    border-radius: 999px;

    background: transparent;
    transform: scaleX(0.6);

    transition:
        background-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.pagina-trilha .trilha__aba:hover,
.pagina-trilha .trilha__aba:focus-visible {
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__aba.is-active {
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__aba.is-active::after {
    background: var(--trilha-ciano);
    transform: scaleX(1);
    box-shadow: 0 0 14px rgba(53, 195, 230, 0.36);
}

.pagina-trilha .trilha__aba[aria-disabled="true"] {
    color: var(--trilha-texto-suave);
    opacity: 0.62;
    cursor: default;
}

.pagina-trilha .trilha__aba[aria-disabled="true"]:hover {
    color: var(--trilha-texto-suave);
}

.pagina-trilha .trilha__aba:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 4px;
    border-radius: 4px;
}

.pagina-trilha .trilha__aba-icone {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;

    display: inline-grid;
    place-items: center;

    color: currentColor;
}

.pagina-trilha .trilha__aba-icone svg {
    width: 100%;
    height: 100%;
}

.pagina-trilha .trilha__aba-icone circle,
.pagina-trilha .trilha__aba-icone path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__aba.is-active .trilha__aba-icone {
    color: var(--trilha-ciano-claro);
}

.pagina-trilha .trilha__aba-painel-reserva {
    min-height: 0;
}

@media (max-width: 760px) {
    .pagina-trilha .trilha__abas {
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .pagina-trilha .trilha__abas::-webkit-scrollbar {
        display: none;
    }

    .pagina-trilha .trilha__aba {
        flex: 0 0 auto;
        padding-inline: 8px;
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__abas {
        margin-top: 26px;
    }

    .pagina-trilha .trilha__aba {
        min-height: 50px;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__aba,
    .pagina-trilha .trilha__aba::after {
        transition: none;
    }
}


/* ========================================================================
   PASSO 12 — PAINEL CONTEXTUAL COMPACTO
   ======================================================================== */

.pagina-trilha .trilha__contexto {
    margin-top: 22px;
    padding: clamp(22px, 2.4vw, 30px);

    display: grid;
    grid-template-columns: minmax(0, 1.18fr) 1px minmax(260px, 0.82fr);
    align-items: stretch;
    gap: clamp(24px, 3vw, 38px);

    border: 1px solid var(--trilha-borda);
    border-radius: var(--trilha-raio-md);

    background:
        linear-gradient(
            135deg,
            rgba(15, 42, 58, 0.42),
            rgba(7, 24, 36, 0.58)
        );
}

.pagina-trilha .trilha__contexto-bloco {
    min-width: 0;
}

.pagina-trilha .trilha__contexto-bloco--proximo {
    display: flex;
    flex-direction: column;
}

.pagina-trilha .trilha__contexto-rotulo {
    margin: 0 0 16px;

    color: var(--trilha-texto-suave);
    font-size: 0.66rem;
    font-weight: 670;
    line-height: 1;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__contexto-lista {
    margin: 0;
    padding: 0;

    display: grid;
    gap: 11px;

    list-style: none;
}

.pagina-trilha .trilha__contexto-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--trilha-texto-secundario);
    font-size: 0.88rem;
    font-weight: 420;
    line-height: 1.48;
}

.pagina-trilha .trilha__contexto-check {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex: 0 0 19px;

    display: grid;
    place-items: center;

    color: var(--trilha-ciano-claro);
    border: 1px solid rgba(125, 223, 242, 0.22);
    border-radius: 50%;

    background: rgba(53, 195, 230, 0.055);
}

.pagina-trilha .trilha__contexto-check svg {
    width: 13px;
    height: 13px;
}

.pagina-trilha .trilha__contexto-check path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__contexto-divisor {
    width: 1px;
    min-height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent 0,
            var(--trilha-borda-forte) 16%,
            var(--trilha-borda-forte) 84%,
            transparent 100%
        );
}

.pagina-trilha .trilha__contexto-proximo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pagina-trilha .trilha__contexto-proximo-numero {
    color: var(--trilha-texto);
    font-size: clamp(1.16rem, 1.65vw, 1.42rem);
    font-weight: 590;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.pagina-trilha .trilha__contexto-proximo-texto {
    max-width: 390px;
    margin: 8px 0 15px;

    color: var(--trilha-texto-secundario);
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.53;
}

.pagina-trilha .trilha__contexto-proximo-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--trilha-ciano-claro);
    font-size: 0.78rem;
    font-weight: 590;
    line-height: 1.2;
    text-decoration: none;

    transition:
        color 160ms ease,
        gap 160ms ease;
}

.pagina-trilha .trilha__contexto-proximo-link svg {
    width: 15px;
    height: 15px;
}

.pagina-trilha .trilha__contexto-proximo-link path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__contexto-proximo-link:hover {
    gap: 10px;
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__contexto-proximo-link:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (max-width: 800px) {
    .pagina-trilha .trilha__contexto {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .pagina-trilha .trilha__contexto-divisor {
        width: 100%;
        height: 1px;
        min-height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent 0,
                var(--trilha-borda-forte) 14%,
                var(--trilha-borda-forte) 86%,
                transparent 100%
            );
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__contexto {
        margin-top: 18px;
        padding: 20px;
        gap: 19px;
    }

    .pagina-trilha .trilha__contexto-item {
        font-size: 0.84rem;
    }

    .pagina-trilha .trilha__contexto-proximo-texto {
        font-size: 0.83rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__contexto-proximo-link {
        transition: none;
    }

    .pagina-trilha .trilha__contexto-proximo-link:hover {
        gap: 7px;
    }
}


/* ========================================================================
   PASSO 13 — SIDEBAR "SUA CAMINHADA"
   ======================================================================== */

.pagina-trilha .trilha__lateral {
    max-height: calc(
        100vh
        - 24px
        - var(--trilha-estrutura-topo)
        - var(--trilha-estrutura-base)
    );
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(125, 223, 242, 0.18)
        transparent;
}

.pagina-trilha .trilha__lateral::-webkit-scrollbar {
    width: 7px;
}

.pagina-trilha .trilha__lateral::-webkit-scrollbar-track {
    background: transparent;
}

.pagina-trilha .trilha__lateral::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(125, 223, 242, 0.16);
}

.pagina-trilha .trilha__lateral-cabecalho {
    position: sticky;
    top: 0;
    z-index: 3;

    min-height: 82px;
    padding: 20px 22px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border-bottom: 1px solid var(--trilha-borda);

    background:
        linear-gradient(
            180deg,
            rgba(11, 32, 47, 0.98),
            rgba(11, 32, 47, 0.93)
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pagina-trilha .trilha__lateral-eyebrow {
    margin: 0 0 5px;

    color: var(--trilha-ciano-claro);
    font-size: 0.64rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__lateral-titulo {
    margin: 0;

    color: var(--trilha-texto);
    font-size: 0.94rem;
    font-weight: 570;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.pagina-trilha .trilha__lateral-fechar {
    display: none;
    width: 34px;
    height: 34px;
    padding: 0;

    appearance: none;
    border: 1px solid var(--trilha-borda);
    border-radius: 50%;

    color: var(--trilha-texto-secundario);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}

.pagina-trilha .trilha__lateral-fechar svg {
    width: 15px;
    height: 15px;
}

.pagina-trilha .trilha__lateral-fechar path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.pagina-trilha .trilha__mapa {
    padding: 8px 0 16px;
}

.pagina-trilha .trilha__modulo {
    border-bottom: 1px solid rgba(126, 190, 215, 0.09);
}

.pagina-trilha .trilha__modulo:last-child {
    border-bottom: 0;
}

.pagina-trilha .trilha__modulo-cabecalho {
    width: 100%;
    min-height: 66px;
    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    appearance: none;
    border: 0;
    background: transparent;

    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.pagina-trilha .trilha__modulo-cabecalho:hover,
.pagina-trilha .trilha__modulo-cabecalho:focus-visible {
    background: rgba(53, 195, 230, 0.035);
}

.pagina-trilha .trilha__modulo-cabecalho:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: -3px;
}

.pagina-trilha .trilha__modulo-textos {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pagina-trilha .trilha__modulo-kicker {
    color: var(--trilha-texto);
    font-size: 0.78rem;
    font-weight: 640;
    line-height: 1.15;
    letter-spacing: -0.012em;
}

.pagina-trilha .trilha__modulo-resumo {
    color: var(--trilha-texto-suave);
    font-size: 0.68rem;
    font-weight: 430;
    line-height: 1.3;
}

.pagina-trilha .trilha__modulo-seta {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    color: var(--trilha-texto-suave);
    transform: rotate(-90deg);

    transition:
        transform 160ms ease,
        color 160ms ease;
}

.pagina-trilha .trilha__modulo.is-open .trilha__modulo-seta {
    color: var(--trilha-ciano-claro);
    transform: rotate(0deg);
}

.pagina-trilha .trilha__modulo-seta path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__modulo-corpo[hidden] {
    display: none;
}

.pagina-trilha .trilha__etapas {
    margin: 0;
    padding: 0 10px 13px;

    display: grid;
    gap: 2px;

    list-style: none;
}

.pagina-trilha .trilha__etapa-item {
    min-width: 0;
}

.pagina-trilha .trilha__etapa-link {
    position: relative;
    min-height: 42px;
    padding: 8px 11px 8px 36px;

    display: flex;
    align-items: center;

    border: 1px solid transparent;
    border-radius: 10px;

    color: var(--trilha-texto-secundario);
    font-size: 0.77rem;
    font-weight: 460;
    line-height: 1.35;
    text-decoration: none;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.pagina-trilha .trilha__etapa-link:hover,
.pagina-trilha .trilha__etapa-link:focus-visible {
    color: var(--trilha-texto);
    border-color: rgba(126, 190, 215, 0.12);
    background: rgba(255, 255, 255, 0.024);
}

.pagina-trilha .trilha__etapa-link:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 2px;
}

.pagina-trilha .trilha__etapa-marcador {
    position: absolute;
    left: 15px;
    top: 50%;

    width: 8px;
    height: 8px;

    border: 1px solid rgba(168, 186, 198, 0.48);
    border-radius: 50%;

    background: rgba(7, 24, 36, 0.88);

    transform: translateY(-50%);
}

.pagina-trilha .trilha__etapa-link[aria-current="page"] {
    color: var(--trilha-texto);
    border-color: rgba(53, 195, 230, 0.14);
    background: rgba(53, 195, 230, 0.055);
}

.pagina-trilha .trilha__etapa-link[aria-current="page"]
.trilha__etapa-marcador {
    border-color: var(--trilha-ciano-claro);
    background: var(--trilha-ciano);
    box-shadow: 0 0 0 4px rgba(53, 195, 230, 0.09);
}

.pagina-trilha .trilha__modulo-pendente {
    margin: 0;
    padding: 2px 20px 18px;

    color: var(--trilha-texto-suave);
    font-size: 0.72rem;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .pagina-trilha {
        --trilha-lateral-largura: 320px;
    }
}

/*
 * No passo 23 a sidebar ganhará o comportamento completo de drawer no
 * mobile. Aqui apenas evitamos colisões severas antes dessa etapa.
 */
@media (max-width: 900px) {
    .pagina-trilha .trilha__estrutura {
        grid-template-columns: 1fr;
    }

    .pagina-trilha .trilha__lateral {
        position: relative;
        top: auto;
        max-height: none;
    }

    .pagina-trilha .trilha__lateral-fechar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__modulo-seta,
    .pagina-trilha .trilha__modulo-cabecalho,
    .pagina-trilha .trilha__etapa-link {
        transition: none;
    }
}


/* ========================================================================
   PASSO 14 — ESTADOS DAS ETAPAS
   Contrato: concluida | atual | disponivel | bloqueada
   ======================================================================== */

/* Base comum do marcador */
.pagina-trilha .trilha__etapa-link[data-etapa-estado]
.trilha__etapa-marcador {
    display: grid;
    place-items: center;
}

/* --------------------------------------------------------------------------
   ATUAL
   Navegação/posição atual usa ciano.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-estado="atual"] {
    color: var(--trilha-texto);
    border-color: rgba(53, 195, 230, 0.16);
    background:
        linear-gradient(
            90deg,
            rgba(53, 195, 230, 0.085),
            rgba(53, 195, 230, 0.025)
        );
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="atual"]
.trilha__etapa-marcador {
    width: 9px;
    height: 9px;

    border-color: var(--trilha-ciano-claro);
    background: var(--trilha-ciano);

    box-shadow:
        0 0 0 4px rgba(53, 195, 230, 0.09),
        0 0 14px rgba(53, 195, 230, 0.20);
}

/* --------------------------------------------------------------------------
   DISPONÍVEL
   Continua interativa, mas visualmente secundária à etapa atual.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-estado="disponivel"] {
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="disponivel"]
.trilha__etapa-marcador {
    border-color: rgba(125, 223, 242, 0.58);
    background: rgba(53, 195, 230, 0.035);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="disponivel"]:hover
.trilha__etapa-marcador,
.pagina-trilha .trilha__etapa-link[data-etapa-estado="disponivel"]:focus-visible
.trilha__etapa-marcador {
    border-color: var(--trilha-ciano-claro);
    background: rgba(53, 195, 230, 0.12);
}

/* --------------------------------------------------------------------------
   BLOQUEADA
   Sem interação. O cadeado é desenhado em CSS para não criar asset extra.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-estado="bloqueada"] {
    color: rgba(116, 139, 153, 0.66);
    cursor: not-allowed;
    pointer-events: auto;
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="bloqueada"]:hover {
    color: rgba(116, 139, 153, 0.66);
    border-color: transparent;
    background: transparent;
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="bloqueada"]
.trilha__etapa-marcador {
    width: 11px;
    height: 9px;

    border: 1px solid rgba(116, 139, 153, 0.42);
    border-radius: 2px;

    background: rgba(7, 24, 36, 0.62);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="bloqueada"]
.trilha__etapa-marcador::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;

    width: 6px;
    height: 6px;

    border: 1px solid rgba(116, 139, 153, 0.48);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;

    transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   CONCLUÍDA
   Implementada, mas ainda não aplicada no fallback.
   O dourado entra aqui porque conclusão é conquista/progresso real.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"] {
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"]
.trilha__etapa-marcador {
    width: 15px;
    height: 15px;

    border-color: rgba(216, 173, 98, 0.72);
    background: rgba(216, 173, 98, 0.12);

    box-shadow: 0 0 0 3px rgba(216, 173, 98, 0.045);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"]
.trilha__etapa-marcador::before {
    content: "";
    width: 6px;
    height: 3px;

    border-left: 1.7px solid var(--trilha-dourado);
    border-bottom: 1.7px solid var(--trilha-dourado);

    transform: translateY(-1px) rotate(-45deg);
}

/* Remove a regra antiga baseada apenas em aria-current como fonte visual.
   aria-current continua presente por acessibilidade. */
.pagina-trilha .trilha__etapa-link[aria-current="page"]
.trilha__etapa-marcador {
    border-color: var(--trilha-ciano-claro);
}

/* Estado bloqueado não recebe foco por teclado porque usa tabindex="-1".
   Mantemos aria-disabled para tecnologia assistiva. */

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__etapa-link[data-etapa-estado]
    .trilha__etapa-marcador {
        transition: none;
    }
}


/* ========================================================================
   PASSO 15 — PROGRESSO E CONQUISTAS
   Dourado = progresso/conquista real. Nunca navegação comum.
   ======================================================================== */

/* --------------------------------------------------------------------------
   Aro de progresso do topo
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__progresso-anel {
    background:
        radial-gradient(
            circle at center,
            rgba(7, 19, 31, 0.98) 58%,
            transparent 60%
        ),
        conic-gradient(
            var(--trilha-dourado) 0deg,
            var(--trilha-dourado) var(--trilha-progresso-angulo, 0deg),
            rgba(216, 173, 98, 0.14) var(--trilha-progresso-angulo, 0deg),
            rgba(216, 173, 98, 0.14) 360deg
        );
}

.pagina-trilha .trilha__progresso-resumo[data-progresso-carregado="false"]
.trilha__progresso-anel {
    border-color: rgba(168, 186, 198, 0.18);

    background:
        radial-gradient(
            circle at center,
            rgba(7, 19, 31, 0.98) 58%,
            transparent 60%
        ),
        conic-gradient(
            var(--trilha-dourado) 0deg,
            var(--trilha-dourado) 70deg,
            rgba(168, 186, 198, 0.14) 70deg,
            rgba(168, 186, 198, 0.14) 360deg
        );
    animation: trilha-progresso-anel-girar 1100ms linear infinite;
}

@keyframes trilha-progresso-anel-girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__progresso-resumo[data-progresso-carregado="false"]
    .trilha__progresso-anel {
        animation: none;
    }
}

.pagina-trilha .trilha__progresso-resumo[data-progresso-carregado="true"]
.trilha__progresso-anel {
    border-color: rgba(216, 173, 98, 0.42);
    box-shadow:
        0 0 0 1px rgba(216, 173, 98, 0.035),
        0 0 18px rgba(216, 173, 98, 0.08);
}

.pagina-trilha .trilha__progresso-resumo[data-progresso-carregado="true"]
.trilha__progresso-valor {
    color: #f0d7a7;
}

/* --------------------------------------------------------------------------
   Conclusão real de etapa
   A base foi criada no passo 14; aqui refinamos o sentido de conquista.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"] {
    position: relative;
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"]
.trilha__etapa-nome {
    color: rgba(243, 248, 251, 0.78);
}

.pagina-trilha .trilha__etapa-link[data-etapa-estado="concluida"]:hover
.trilha__etapa-nome {
    color: var(--trilha-texto);
}

/* --------------------------------------------------------------------------
   Módulo concluído
   Contrato futuro: data-modulo-estado="concluido"
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__modulo[data-modulo-estado="concluido"]
.trilha__modulo-kicker::after {
    content: "Concluído";
    margin-left: 8px;
    padding: 3px 6px;

    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    border: 1px solid rgba(216, 173, 98, 0.24);
    border-radius: 999px;

    color: #e6c887;
    background: rgba(216, 173, 98, 0.07);

    font-size: 0.54rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__modulo[data-modulo-estado="concluido"]
.trilha__modulo-seta {
    color: var(--trilha-dourado);
}

/* --------------------------------------------------------------------------
   Cartão de conquista
   Fica hidden até uma camada real dispará-lo.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__conquista {
    margin: 14px 14px 6px;
    padding: 14px 15px;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    border: 1px solid rgba(216, 173, 98, 0.24);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(216, 173, 98, 0.10),
            rgba(216, 173, 98, 0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 10px 28px rgba(0, 0, 0, 0.08);
}

.pagina-trilha .trilha__conquista[hidden] {
    display: none;
}

.pagina-trilha .trilha__conquista-icone {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(216, 173, 98, 0.34);
    border-radius: 50%;

    color: var(--trilha-dourado);
    background: rgba(216, 173, 98, 0.08);
}

.pagina-trilha .trilha__conquista-icone svg {
    width: 18px;
    height: 18px;
}

.pagina-trilha .trilha__conquista-icone path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagina-trilha .trilha__conquista-textos {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pagina-trilha .trilha__conquista-kicker {
    color: rgba(230, 200, 135, 0.74);
    font-size: 0.56rem;
    font-weight: 740;
    line-height: 1;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__conquista-titulo {
    color: #f0d7a7;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
}

.pagina-trilha .trilha__conquista-texto {
    color: var(--trilha-texto-secundario);
    font-size: 0.68rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Marco discreto
   Contrato futuro: data-etapa-marco="true"
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__etapa-link[data-etapa-marco="true"]::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: var(--trilha-dourado);
    box-shadow: 0 0 8px rgba(216, 173, 98, 0.28);

    transform: translateY(-50%);
}

/*
 * Regra semântica:
 * nenhum seletor deste passo altera botões primários, links normais,
 * breadcrumbs ou navegação para dourado.
 */

@media (max-width: 560px) {
    .pagina-trilha .trilha__conquista {
        margin-inline: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__progresso-anel,
    .pagina-trilha .trilha__conquista {
        transition: none;
    }
}


/* ========================================================================
   PASSO 22 — TIPOGRAFIA FIGTREE AUTO-HOSPEDADA
   A declaração @font-face continua centralizada no ponte.css existente.
   Esta seção NÃO cria uma segunda fonte e NÃO chama CDN.
   ======================================================================== */

.pagina-trilha {
    font-family:
        "Figtree",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/*
 * Controles de formulário não herdam tipografia de forma consistente em todos
 * os navegadores. Forçamos herança para manter a mesma Figtree do shell.
 */
.pagina-trilha button,
.pagina-trilha input,
.pagina-trilha textarea,
.pagina-trilha select {
    font: inherit;
}


/* ========================================================================
   PASSO 23 — RESPONSIVIDADE COMPLETA
   Desktop / notebook / tablet / celular + drawer "Sua caminhada"
   ======================================================================== */

.pagina-trilha .trilha__caminhada-botao {
    display: none;
    min-height: 38px;
    padding: 0 11px;

    align-items: center;
    justify-content: center;
    gap: 7px;

    appearance: none;
    border: 1px solid var(--trilha-borda);
    border-radius: 10px;

    color: var(--trilha-texto-secundario);
    background: rgba(255, 255, 255, 0.025);

    font: inherit;
    font-size: 0.72rem;
    font-weight: 590;
    line-height: 1;

    cursor: pointer;
}

.pagina-trilha .trilha__caminhada-botao svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.pagina-trilha .trilha__caminhada-botao path,
.pagina-trilha .trilha__caminhada-botao circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
}

.pagina-trilha .trilha__caminhada-botao:hover,
.pagina-trilha .trilha__caminhada-botao:focus-visible {
    color: var(--trilha-texto);
    border-color: rgba(125, 223, 242, 0.26);
    background: rgba(53, 195, 230, 0.055);
}

.pagina-trilha .trilha__caminhada-botao:focus-visible {
    outline: 2px solid var(--trilha-ciano-claro);
    outline-offset: 3px;
}

.pagina-trilha .trilha__sidebar-backdrop {
    display: none;
}

/* Notebook: preserva duas colunas, mas reduz folgas. */
@media (min-width: 901px) and (max-width: 1180px) {
    .pagina-trilha .trilha__estrutura,
    .pagina-trilha .trilha__topo-conteudo {
        width: min(
            calc(100% - 40px),
            var(--trilha-largura-maxima)
        );
    }

    .pagina-trilha .trilha__estrutura {
        gap: 24px;
    }

    .pagina-trilha .trilha__experiencia {
        min-height: 410px;
    }
}

/* Tablet e celular: experiência em uma coluna + navegação em drawer. */
@media (max-width: 900px) {
    .pagina-trilha .trilha__topo-conteudo,
    .pagina-trilha .trilha__estrutura {
        width: min(
            calc(100% - 32px),
            var(--trilha-largura-maxima)
        );
    }

    .pagina-trilha .trilha__estrutura {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-block: 28px 44px;
    }

    .pagina-trilha .trilha__caminhada-botao {
        display: inline-flex;
    }

    /*
     * Sem JS, a sidebar continua no fluxo após o conteúdo.
     * Só se transforma em drawer depois de data-js-ready="true".
     */
    .pagina-trilha .trilha[data-js-ready="true"] .trilha__lateral {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;

        width: min(380px, calc(100vw - 28px));
        max-height: 100dvh;
        margin: 0;

        overflow-y: auto;
        overscroll-behavior: contain;

        border-radius: 18px 0 0 18px;
        border-right: 0;

        transform: translateX(104%);
        visibility: hidden;

        box-shadow:
            -20px 0 70px rgba(0, 0, 0, 0.38),
            var(--trilha-sombra-suave);

        transition:
            transform 220ms cubic-bezier(.2, .8, .2, 1),
            visibility 220ms;
    }

    .pagina-trilha .trilha[data-js-ready="true"][data-sidebar-open="true"]
    .trilha__lateral {
        transform: translateX(0);
        visibility: visible;
    }

    .pagina-trilha .trilha[data-js-ready="true"]
    .trilha__lateral-fechar {
        display: grid;
        place-items: center;
    }

    .pagina-trilha .trilha[data-js-ready="true"]
    .trilha__sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;

        display: block;
        width: 100%;
        height: 100%;
        padding: 0;

        appearance: none;
        border: 0;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        background: rgba(1, 8, 13, 0.68);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        transition:
            opacity 180ms ease,
            visibility 180ms;
    }

    .pagina-trilha .trilha[data-js-ready="true"][data-sidebar-open="true"]
    .trilha__sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .pagina-trilha .trilha__lateral-cabecalho {
        min-height: 76px;
        padding-inline: 20px;
    }

    .pagina-trilha .trilha__experiencia {
        min-height: 390px;
    }

    .pagina-trilha .trilha__contexto {
        margin-top: 20px;
    }
}

/* Tablet estreito. */
@media (max-width: 760px) {
    .pagina-trilha .trilha__topo-conteudo,
    .pagina-trilha .trilha__estrutura {
        width: min(
            calc(100% - 28px),
            var(--trilha-largura-maxima)
        );
    }

    .pagina-trilha .trilha__topo-conteudo {
        min-height: 64px;
        gap: 12px;
    }

    .pagina-trilha .trilha__estrutura {
        padding-top: 24px;
    }

    .pagina-trilha .trilha__titulo {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .pagina-trilha .trilha__experiencia {
        min-height: 340px;
        border-radius: 16px;
    }

    .pagina-trilha .trilha__experiencia[data-etapa-tipo="video"] {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .pagina-trilha .trilha__experiencia-placeholder {
        padding: 30px 24px;
    }

    .pagina-trilha .trilha__cta {
        min-height: 48px;
    }

    .pagina-trilha .trilha__abas {
        margin-inline: -2px;
    }

    .pagina-trilha .trilha__contexto {
        padding: 22px;
    }
}

/* Celular. */
@media (max-width: 560px) {
    .pagina-trilha .trilha__topo-conteudo,
    .pagina-trilha .trilha__estrutura {
        width: calc(100% - 24px);
    }

    .pagina-trilha .trilha__topo-acoes {
        gap: 6px;
    }

    .pagina-trilha .trilha__caminhada-botao {
        width: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 50%;
    }

    .pagina-trilha .trilha__caminhada-botao-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        clip-path: inset(50%);
    }

    .pagina-trilha .trilha__progresso-anel {
        width: 38px;
        height: 38px;
    }

    .pagina-trilha .trilha__icone-botao {
        width: 38px;
        height: 38px;
    }

    .pagina-trilha .trilha__usuario {
        min-height: 38px;
        padding-inline: 4px;
    }

    .pagina-trilha .trilha__usuario-avatar {
        width: 32px;
        height: 32px;
    }

    .pagina-trilha .trilha__usuario-seta {
        display: none;
    }

    .pagina-trilha .trilha__estrutura {
        padding-top: 21px;
        padding-bottom: 36px;
    }

    .pagina-trilha .trilha__breadcrumb {
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .pagina-trilha .trilha__breadcrumb-atual {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pagina-trilha .trilha__titulo {
        font-size: clamp(1.9rem, 10vw, 2.5rem);
    }

    .pagina-trilha .trilha__introducao {
        font-size: 0.92rem;
    }

    .pagina-trilha .trilha__experiencia {
        border-radius: 14px;
    }

    .pagina-trilha .trilha__experiencia-placeholder {
        min-height: 280px;
        padding: 26px 18px;
    }

    .pagina-trilha .trilha__pos-video {
        padding-inline: 2px;
    }

    .pagina-trilha .trilha__cta {
        width: 100%;
    }

    .pagina-trilha .trilha__possibilidade-distancia .trilha__cta {
        width: auto;
    }

    .pagina-trilha .trilha__contexto {
        padding: 19px;
        border-radius: 14px;
    }

    .pagina-trilha .trilha__contexto-proximo-link {
        min-height: 40px;
    }

    .pagina-trilha .trilha[data-js-ready="true"] .trilha__lateral {
        width: min(360px, calc(100vw - 14px));
        border-radius: 16px 0 0 16px;
    }

    .pagina-trilha .trilha__lateral-cabecalho {
        padding: 17px 16px;
    }

    .pagina-trilha .trilha__modulo-cabecalho {
        min-height: 62px;
        padding-inline: 16px;
    }

    .pagina-trilha .trilha__etapas {
        padding-inline: 8px;
    }

    .pagina-trilha .trilha__etapa-link {
        min-height: 44px;
        font-size: 0.78rem;
    }
}

/* Celulares muito estreitos. */
@media (max-width: 390px) {
    .pagina-trilha .trilha__topo-conteudo,
    .pagina-trilha .trilha__estrutura {
        width: calc(100% - 20px);
    }

    .pagina-trilha .trilha__marca-simbolo {
        display: none;
    }

    .pagina-trilha .trilha__marca-texto {
        font-size: 0.82rem;
    }

    .pagina-trilha .trilha__icone-botao {
        display: none;
    }

    .pagina-trilha .trilha__topo-acoes {
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha[data-js-ready="true"] .trilha__lateral,
    .pagina-trilha .trilha[data-js-ready="true"]
    .trilha__sidebar-backdrop {
        transition: none;
    }
}


/* ========================================================================
   PASSO 24 — TIPOS DE ETAPA E EXTENSIBILIDADE
   Implementados: video | perguntas | agente
   Reservados: diagnostico | lista | selecao | exercicio | mapa | resultado
   ======================================================================== */

/* --------------------------------------------------------------------------
   PERGUNTAS
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__pergunta {
    /*
     * 760px veio do cartão, que precisava conter o conteúdo. Sem cartão, a
     * coluna mais larga derruba uma linha do enunciado, que é o item mais
     * caro da tela em altura.
     */
    width: min(100%, 960px);
    margin-inline: auto;

    /*
     * Sem respiro vertical. Os 32px de cada lado foram escritos quando havia
     * uma borda para o botão não encostar; a borda saiu e o botão mudou de
     * lugar. O respiro lateral fica: ele separa o texto da barra lateral,
     * que continua ali.
     */
    padding-block: 0;
    padding-inline: clamp(0px, 2vw, 24px);

    display: grid;
    gap: 6px;
}

.pagina-trilha .trilha__pergunta-progresso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    /*
     * The global `p { max-width: 60ch }` held this row at 422px, and in `ch`
     * the row's small font narrows it further, so the question's name broke
     * into two lines [decided, 26/set; the same fix as
     * trilha__devolutiva-item p, 16/set].
     */
    max-width: none;

    color: var(--trilha-texto-suave);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__pergunta-progresso span:last-child {
    color: var(--trilha-ciano-claro);
}

/*
 * The question's short name in the progress row [decided, 26/set]:
 * larger than the position, bold, in the secondary text colour, which
 * sets it apart from the question below (text colour) without reading as
 * a link (cyan). Upper case comes from the row. The `span` in the
 * selector makes this rule win over `span:last-child`, which would paint
 * the name cyan on a row that has no position.
 */
.pagina-trilha .trilha__pergunta-progresso span.trilha__pergunta-progresso-titulo {
    color: var(--trilha-texto-secundario);
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.pagina-trilha .trilha__pergunta-form {
    display: grid;
    gap: 8px;
}

/*
 * Same support text the video step shows under the player
 * (trilha__pos-video-descricao), now styled here too, above the question
 * statement. Paragraph spacing comes from the global `p` rule.
 */
.pagina-trilha .trilha__pergunta-apoio {
    color: var(--trilha-texto-secundario);
    font-size: 0.95rem;
    font-weight: 390;
    line-height: 1.66;
    letter-spacing: -0.006em;
}

/*
 * Another person's words, marked by quotes and italics instead of a box:
 * what the student copies reads as a quotation, not as a block set apart
 * from the page.
 */
.pagina-trilha .trilha__pergunta-citacao {
    margin: 0 0 1rem;
    padding: 0;

    border: none;
    border-radius: 0;

    color: var(--trilha-texto);
    background: none;

    font-style: italic;
}

.pagina-trilha .trilha__pergunta-texto {
    color: var(--trilha-texto);
    /*
     * The ceiling governs above 750px of window, where the 22.5px chosen
     * on screen on 26/set show (25px before). Below that, 3vw decides.
     */
    font-size: clamp(1.35rem, 3vw, 1.40625rem);
    font-weight: 610;
    line-height: 1.26;
    letter-spacing: -0.02em;
}

.pagina-trilha .trilha__pergunta-resposta {
    width: 100%;
    /*
     * Valor fixo, escolhido na tela. Ele não encolhe numa janela mais baixa
     * — se a barra de rolagem voltar num notebook de 600px de altura, a
     * troca é `min(195px, 27vh)`, que dá os mesmos 195 aqui.
     */
    min-height: 195px;
    padding: 17px 18px;

    resize: vertical;

    border: 1px solid var(--trilha-borda);
    border-radius: 14px;
    outline: none;

    color: var(--trilha-texto);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.012)
        );

    line-height: 1.58;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.pagina-trilha .trilha__pergunta-resposta::placeholder {
    color: rgba(168, 186, 198, 0.62);
}

/*
 * O mesmo tom no campo de uma linha: sem regra própria, o input herdava
 * o cinza do navegador (rgb(117,117,117) no Chrome, medido em 22/set), e
 * o placeholder do "Quem disse?" saía diferente do dos textareas ao lado.
 */
.pagina-trilha input[type="text"]::placeholder,
.pagina-trilha input[type="email"]::placeholder,
.pagina-trilha input[type="password"]::placeholder {
    color: rgba(168, 186, 198, 0.62);
}

.pagina-trilha .trilha__pergunta-resposta:focus {
    border-color: rgba(125, 223, 242, 0.48);
    background: rgba(53, 195, 230, 0.025);
    box-shadow: 0 0 0 3px rgba(53, 195, 230, 0.08);
}

/*
 * Na tela que registra uma pessoa por vez, a altura de cada campo vem
 * do `rows` do textarea: o primeiro é maior, os seguintes menores. O
 * min-height de 195px acima venceria o rows, e os dois campos ficariam
 * do mesmo tamanho. Escopo no atributo da parcial: as outras telas
 * seguem com o valor fixo (item 58).
 */
.pagina-trilha [data-parcial-perguntas-pessoa] .trilha__pergunta-resposta {
    min-height: 0;
}

/*
 * A list field starts two lines tall and grows with what the student
 * writes [decided, 26/set]: trilha.js sets its height as he types. The
 * 195px of the base rule would stop it from starting small. Scoped to the
 * list partial, as the rule above is to the one-person-at-a-time screen.
 */
.pagina-trilha [data-parcial-perguntas-lista] .trilha__pergunta-resposta {
    min-height: 0;
}

/*
 * O enunciado de cada pergunta fica menor que o título da tela, que usa
 * a mesma classe num <p>. Meio-termo medido: 25px no título (22,5px desde 26/set), 16,32px no
 * rótulo "Quem disse?", 20px aqui, com a mesma razão de entrelinha do
 * título.
 */
.pagina-trilha [data-parcial-perguntas-pessoa] label.trilha__pergunta-texto {
    font-size: 20px;
    line-height: 1.26;
}

/* Same treatment as trilha__pilar-pergunta: an enunciado, only smaller. */
.pagina-trilha .trilha__pergunta-rotulo {
    margin-top: 4px;

    color: var(--trilha-texto);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
}

.pagina-trilha .trilha__pergunta-rotulo span {
    color: var(--trilha-texto-secundario);
    font-weight: normal;
}

/* Same visual language as trilha__pergunta-resposta, one line tall. */
.pagina-trilha .trilha__pergunta-form input[type="text"] {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;

    border: 1px solid var(--trilha-borda);
    border-radius: 14px;

    color: var(--trilha-texto);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.012)
        );
}

/*
 * A ajuda vem do banco e pode ter várias linhas — os gatilhos de memória, as
 * seis frentes. A parcial converte as quebras em <br>, então o espaçamento
 * entre linhas importa mais aqui do que num parágrafo comum.
 */
.pagina-trilha .trilha__pergunta-ajuda {
    margin-top: -8px;

    color: var(--trilha-texto-suave);
    font-size: 0.93rem;
    line-height: 1.62;
}

/*
 * The line exists because writing in the field does not save anything -
 * the text only becomes an item through Adicionar - and the student needs
 * to know that before clicking Concluir.
 */
.pagina-trilha .trilha__pergunta-dica {
    color: var(--trilha-texto-suave);
    font-size: 0.82rem;
    line-height: 1.55;
}

/*
 * The registered items are read-only: the student sees what he already
 * wrote, and editing one would need a new version, which is not designed
 * yet - so there is nothing here to click.
 */
.pagina-trilha .trilha__pergunta-itens {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;

    display: grid;
    gap: 8px;
}

.pagina-trilha .trilha__pergunta-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--trilha-borda);

    color: var(--trilha-texto);
}

.pagina-trilha .trilha__pergunta-item-rotulo {
    color: var(--trilha-texto-secundario);
    font-style: italic;
}

/*
 * O aviso de que editar guarda uma versão nova, em vez de sobrescrever. É
 * garantia, não alerta — por isso o tom sóbrio e a barra lateral discreta,
 * sem cor de erro.
 */
.pagina-trilha .trilha__pergunta-versao {
    padding: 10px 14px;

    border-left: 2px solid rgba(125, 223, 242, 0.32);
    border-radius: 0 8px 8px 0;

    color: var(--trilha-texto-suave);
    background: rgba(53, 195, 230, 0.045);

    font-size: 0.82rem;
    line-height: 1.55;
}

/*
 * A recusa por resposta faltando. Sobrevive a uma renderização e some no
 * reload, porque vem da sessão.
 */
.pagina-trilha .trilha__perguntas-erro {
    padding: 12px 16px;

    border: 1px solid rgba(216, 173, 98, 0.38);
    border-radius: 10px;

    color: var(--trilha-texto);
    background: var(--trilha-dourado-suave);

    font-size: 0.88rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   ITENS (CAPACIDADES)
   -------------------------------------------------------------------------- */

/*
 * Outside marker, not inside: the item text is a block-level <p>, and an
 * inside marker (inline) followed by a block forces a line break, pushing
 * the number above the text instead of beside it. Outside keeps the number
 * aligned with the first line; padding-left sets the indent the marker sits
 * in, so a wrapped second line lands under the text edge, not under the
 * marker — the same hanging indent on one-line and two-line items.
 */
.pagina-trilha .trilha__item-lista {
    margin: 0;
    padding-left: 26px;
    list-style-position: outside;

    display: grid;
    gap: 32px;
}

/*
 * Hierarchy: the capability is what the student judges; the evidence
 * supports it and is read afterward.
 */
.pagina-trilha .trilha__item-texto {
    color: var(--trilha-texto);
    font-size: 1.05rem;
    font-weight: 640;
    line-height: 1.4;
}

.pagina-trilha .trilha__item-evidencias {
    padding-left: 20px;
}

/*
 * Same language as .trilha__pergunta-citacao: a quotation, not a box set
 * apart from the page.
 */
.pagina-trilha .trilha__item-evidencia {
    margin: 0 0 1rem;
    padding: 0;

    border: none;
    border-radius: 0;

    color: var(--trilha-texto-secundario);
    background: none;

    font-size: 0.85rem;
    font-style: italic;
}

/*
 * Etapa 140, as sugestões de uma lente [decided, 28/set]: a caixa de
 * marcar grande e sem número, o nome, a marca embaixo dele e o "Por que
 * apareceu" alinhado ao texto.
 */
.pagina-trilha .trilha__lente-rotulo {
    margin: 0 0 12px;
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__sugestao-lista {
    padding-left: 0;
    list-style: none;
    gap: 28px;
}

.pagina-trilha .trilha__sugestao-marcar {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    cursor: pointer;
}

.pagina-trilha .trilha__sugestao-marcar input[type="checkbox"] {
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--trilha-ciano-claro);
    cursor: pointer;
}

.pagina-trilha .trilha__sugestao-marca {
    grid-column: 2;
    color: var(--trilha-texto-suave);
    font-size: 0.85rem;
    font-style: italic;
}

.pagina-trilha .trilha__sugestao-porque {
    margin: 10px 0 0 32px;
}

.pagina-trilha .trilha__sugestao-porque summary {
    color: var(--trilha-ciano-claro);
    font-size: 0.9rem;
    cursor: pointer;
}

.pagina-trilha .trilha__sugestao-porque .trilha__item-porque {
    max-width: none;
    margin: 10px 0;
    color: var(--trilha-texto-secundario);
    font-size: 0.95rem;
}

.pagina-trilha .trilha__item-vereditos {
    margin-top: 18px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pagina-trilha .trilha__item-veredito-escolhido {
    color: var(--trilha-texto-secundario);
    font-size: 0.9rem;
    font-weight: 390;
}

/* --------------------------------------------------------------------------
   AGENTE
   A IA aparece como parte contextual da caminhada, não como chatbot.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__agente {
    width: min(100%, 800px);
    margin-inline: auto;
    padding: clamp(24px, 4vw, 38px);

    display: grid;
    gap: 24px;

    border: 1px solid rgba(53, 195, 230, 0.15);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(53, 195, 230, 0.08),
            transparent 34%
        ),
        rgba(5, 18, 29, 0.44);
}

.pagina-trilha .trilha__agente-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pagina-trilha .trilha__agente-sinal {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(125, 223, 242, 0.20);
    border-radius: 50%;

    color: var(--trilha-ciano-claro);
    background: rgba(53, 195, 230, 0.055);
}

.pagina-trilha .trilha__agente-sinal svg {
    width: 19px;
    height: 19px;
}

.pagina-trilha .trilha__agente-sinal path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
}

.pagina-trilha .trilha__agente-rotulo {
    margin: 0 0 4px;

    color: var(--trilha-ciano-claro);
    font-size: 0.62rem;
    font-weight: 710;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.pagina-trilha .trilha__agente-titulo {
    margin: 0;

    color: var(--trilha-texto);
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 620;
    line-height: 1.25;
    letter-spacing: -0.018em;
}

.pagina-trilha .trilha__agente-texto {
    color: var(--trilha-texto-secundario);
    font-size: 0.98rem;
    line-height: 1.75;
}

.pagina-trilha .trilha__agente-acoes {
    display: flex;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   TIPO FUTURO CONHECIDO
   Não tenta renderizar uma experiência errada como fallback silencioso.
   -------------------------------------------------------------------------- */

.pagina-trilha .trilha__tipo-futuro {
    width: min(100%, 680px);
    margin-inline: auto;
    padding: 24px;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    border: 1px dashed rgba(125, 223, 242, 0.20);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.018);
}

.pagina-trilha .trilha__tipo-futuro-sinal {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--trilha-ciano-claro);
    background: rgba(53, 195, 230, 0.055);
}

.pagina-trilha .trilha__tipo-futuro-sinal svg {
    width: 18px;
    height: 18px;
}

.pagina-trilha .trilha__tipo-futuro-sinal circle,
.pagina-trilha .trilha__tipo-futuro-sinal path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.pagina-trilha .trilha__tipo-futuro-textos {
    display: grid;
    gap: 5px;
}

.pagina-trilha .trilha__tipo-futuro-rotulo {
    margin: 0;

    color: var(--trilha-texto);
    font-size: 0.84rem;
    font-weight: 620;
}

.pagina-trilha .trilha__tipo-futuro-texto {
    margin: 0;

    color: var(--trilha-texto-secundario);
    font-size: 0.78rem;
    line-height: 1.55;
}

.pagina-trilha .trilha__tipo-futuro code {
    padding: 1px 5px;

    border: 1px solid rgba(125, 223, 242, 0.12);
    border-radius: 5px;

    color: var(--trilha-ciano-claro);
    background: rgba(53, 195, 230, 0.04);

    font-family: inherit;
    font-size: 0.92em;
}

/* Tipos não-vídeo não herdam a proporção fixa do player em mobile. */
@media (max-width: 760px) {
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="perguntas"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="itens"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="agente"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="diagnostico"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="lista"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="selecao"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="exercicio"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="mapa"],
    .pagina-trilha
    .trilha__experiencia[data-etapa-tipo="resultado"] {
        aspect-ratio: auto;
        min-height: 0;
    }

    .pagina-trilha .trilha__pergunta,
    .pagina-trilha .trilha__agente {
        gap: 20px;
    }

    .pagina-trilha .trilha__pergunta-resposta {
        min-height: 160px;
    }
}

@media (max-width: 560px) {
    .pagina-trilha .trilha__pergunta-apoio {
        font-size: 0.91rem;
        line-height: 1.62;
    }

    .pagina-trilha .trilha__pergunta-texto {
        font-size: 1.28rem;
    }

    .pagina-trilha .trilha__agente-acoes {
        display: grid;
    }

    .pagina-trilha .trilha__agente {
        padding: 21px 18px;
        border-radius: 14px;
    }

    .pagina-trilha .trilha__tipo-futuro {
        padding: 20px 17px;
    }
}

/* ==========================================================================
   TRILHA — acréscimos à folha da experiência
   Escopo: .pagina-trilha

   Seis classes que a marcação usa e o fragmento acumulado não cobre. Escritas
   com as mesmas variáveis do bloco acima, e não com valores próprios: a
   paleta tem uma fonte só.
   ========================================================================== */

/* --- Progresso na barra lateral ----------------------------------------- */

/*
 * Duplica o percentual do anel do topo de propósito: o anel responde "quanto
 * da caminhada", e isto responde "quanto de quê" — a contagem de etapas é o
 * que dá tamanho ao número.
 */
.pagina-trilha .trilha__progresso-geral {
    display: grid;
    gap: 8px;
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--trilha-borda);
}

.pagina-trilha .trilha__progresso-barra {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--trilha-dourado-suave);
}

.pagina-trilha .trilha__progresso-preenchimento {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--trilha-dourado);
    transition: width 420ms ease;
}

.pagina-trilha .trilha__progresso-texto {
    margin: 0;
    font-size: 0.82rem;
    color: var(--trilha-texto-suave);
}

/* --- Contagem por módulo ------------------------------------------------- */

/*
 * Fica sob o nome do módulo, no cabeçalho recolhível. Em módulo fechado, no
 * lugar da contagem entra a frase que explica o que falta, e por isso o
 * tamanho é de texto e não de número.
 */
.pagina-trilha .trilha__modulo-contagem {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--trilha-texto-suave);
}

.pagina-trilha .trilha__modulo[data-modulo-estado="concluido"] .trilha__modulo-contagem {
    color: var(--trilha-dourado);
}

/* --- Aviso de erro ------------------------------------------------------- */

/*
 * Aparece uma vez, depois de um envio que não passou, e some no recarregar.
 * Não usa vermelho da paleta porque não existe um: a borda à esquerda carrega
 * o peso, e o texto continua legível no fundo escuro.
 */
.pagina-trilha .trilha__aviso {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 3px solid var(--trilha-dourado);
    border-radius: 0 var(--trilha-raio-sm) var(--trilha-raio-sm) 0;
    font-size: 0.94rem;
    color: var(--trilha-texto);
    background: var(--trilha-superficie-suave);
}

@media (prefers-reduced-motion: reduce) {
    .pagina-trilha .trilha__progresso-preenchimento {
        transition: none;
    }
}

/* --- Largura do palco de vídeo ------------------------------------------- */

/*
 * The stage keeps 16:9 — the video is 16:9 and cropping it would eat the text
 * written into the frame — but stops filling the column.
 *
 * At full column width the aspect ratio produced a stage tall enough to push
 * everything below it past the fold, which is the opposite of the intent:
 * what comes after the video is the invitation to act on it.
 *
 * The reference design shows a wider, shorter frame (roughly 2.8:1). That is
 * not reachable with an uncropped 16:9 source, so the trade taken here is a
 * smaller frame rather than a cropped one.
 */
.pagina-trilha .trilha__experiencia[data-etapa-tipo="video"] {
    width: clamp(320px, 64%, 760px);

    /* Teto derivado da altura da janela: o palco começa a 283px do topo e o
       que vem depois dele — parágrafo de apoio e botão — mede 168px. Limitar
       a largura mantém o 16:9 fazendo o trabalho, sem corte. */
    max-width: max(630px, calc((100vh - 451px) * 16 / 9));
    margin-inline: auto;
}

/* --- Mapa de possibilidades (etapa 170) --------------------------------- */

/* Decisões, seção 38, "O desenho do 09". */

.pagina-trilha .trilha__zona-titulo {
    margin: 44px 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--trilha-texto);
}

.pagina-trilha .trilha__zona-titulo:first-of-type {
    margin-top: 0;
}

.pagina-trilha .trilha__zona-descricao {
    margin: 0 0 22px;
    font-size: 0.92rem;
    color: var(--trilha-texto-secundario);
}

.pagina-trilha .trilha__item-evidencia--ligacao {
    font-style: normal;
}

.pagina-trilha .trilha__possibilidade-ligacao {
    font-weight: 600;
    color: var(--trilha-texto-suave);
}

.pagina-trilha .trilha__possibilidade-distancia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.86rem;
    color: var(--trilha-texto-suave);
}

.pagina-trilha .trilha__possibilidade-distancia .trilha__cta {
    min-height: 36px;
    padding: 0 14px;
    width: auto;
}

.pagina-trilha .trilha__possibilidade-form {
    display: grid;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--trilha-borda);
}
/* ==========================================================================
   Trilha — densidade vertical da página de aula
   ==========================================================================

   Valores escolhidos por Bruno em 14/set/2026, ajustando a página ao vivo com
   o painel de controles e não por estimativa. O objetivo era um só: caber a
   etapa inteira — título, vídeo, texto de apoio e botão — sem barra de
   rolagem, com o vídeo o maior possível dentro disso.

   Vem depois de tudo no arquivo de propósito. As regras que estes valores
   substituem estão espalhadas acima, e a última definição vence. Quem for
   editar uma delas lá em cima precisa saber que este bloco existe.

   O QUE CADA UMA RESOLVE

   `.trilha__topo` tinha `min-height: 78px` e o mesmo valor repetido em
   `.trilha__topo-conteudo`. Definir `height` contra um piso maior não faz
   nada — a barra ficava em 79px viesse o que viesse. Os três precisam descer
   juntos, e é por isso que estão juntos aqui.

   A folga acima do logo nunca foi preenchimento: o logo tem 24px e ficava
   centrado em 78, sobrando 27 de cada lado. Encolher a barra corta os dois.

   `.trilha__estrutura` é o grid que segura a coluna central e a barra
   lateral, e era o único elemento entre o breadcrumb e o <body> com
   preenchimento — os 49px acima do breadcrumb eram dele, e os 56px abaixo do
   último bloco também.
   ========================================================================== */

.pagina-trilha .trilha__topo {
    height: 53px;
    min-height: 53px;
}

/*
 * Menor que a barra de propósito: 49 contra 53. O painel gerou os dois
 * valores — 53 pelo controle de altura, 49 pelo controle próprio — e o
 * segundo é o que estava valendo na tela aprovada.
 */
.pagina-trilha .trilha__topo-conteudo {
    min-height: 49px;
}

.pagina-trilha .trilha__topo-cenario {
    margin-top: 4px;
    margin-bottom: -3px;
}

.pagina-trilha .trilha__titulo {
    font-size: 42px;
    line-height: 0.8;
}

.pagina-trilha .trilha__apoio {
    margin-top: 15px;
}

.pagina-trilha .trilha__estrutura {
    /*
     * Ajuste tardio do respiro vertical. Redefine as variáveis, não o
     * padding: a max-height da lateral lê as variáveis, então o ajuste
     * continua valendo aqui sem quebrar a altura dela.
     */
    --trilha-estrutura-topo: 24px;
    --trilha-estrutura-base: 18px;

    row-gap: 29px;
}