/* ==========================================================================
   MOA Gestão — Landing page (scrollytelling)
   ========================================================================== */

@layer pages {

  /* ================================================== canvas WebGL de fundo */
  .fx-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
  }

  .site-main { position: relative; z-index: 1; }

  /* Malha de fundo comum às seções */
  .mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 75%);
  }

  .glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
    z-index: -1;
  }

  .glow--brand { background: radial-gradient(circle, rgb(255 212 0 / .55), transparent 70%); }
  .glow--med   { background: radial-gradient(circle, rgb(18 181 166 / .38), transparent 70%); }
  .glow--field { background: radial-gradient(circle, rgb(31 168 92 / .32), transparent 70%); }

  /* ================================================== cabeçalho */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-sticky);
    transition: background var(--t-med) var(--ease-out),
                border-color var(--t-med),
                backdrop-filter var(--t-med),
                padding var(--t-med);
    border-block-end: 1px solid transparent;
    padding-block: var(--sp-5);
  }

  .site-header.is-stuck {
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(160%);
    border-block-end-color: var(--glass-line);
    padding-block: var(--sp-3);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  .site-nav {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 600;

    & a {
      color: var(--text-soft);
      position: relative;
      padding-block: .3em;
      transition: color var(--t-fast);

      &::after {
        content: '';
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: 0;
        block-size: 2px;
        border-radius: 2px;
        background: var(--brand-500);
        transition: inline-size var(--t-med) var(--ease-out);
      }

      &:hover { color: var(--text); }
      &:hover::after { inline-size: 100%; }
    }
  }

  @media (max-width: 980px) { .site-nav { display: none; } }

  .site-header__actions { display: flex; gap: var(--sp-3); align-items: center; }

  /* ================================================== hero */
  .hero {
    position: relative;
    min-block-size: 100dvh;
    display: grid;
    align-items: center;
    padding-block: clamp(7rem, 14vh, 11rem) var(--sp-16);
    overflow: hidden;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--sp-12);
    align-items: center;
  }

  @media (max-width: 1024px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  }

  /* Logo em destaque: assinatura centralizada antes da chamada final */
  .brand-showcase {
    display: flex;
    justify-content: center;
    position: relative;
    margin-block-end: clamp(2.5rem, 6vh, 4rem);
  }

  .brand-showcase::after {
    content: '';
    position: absolute;
    inset-block: -40%;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(60ch, 90%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(255 212 0 / .26), transparent 70%);
    filter: blur(36px);
    pointer-events: none;
  }

  .brand-showcase .logo-img {
    filter: drop-shadow(0 12px 38px rgb(255 212 0 / .28));
  }

  /* A coluna de texto é o contexto de medida do título: assim a manchete
     escala pela largura real disponível, não pela do viewport, e nunca
     transborda entre 1025px e 1240px (onde o hero ainda tem duas colunas). */
  .hero__copy { container-type: inline-size; }

  .hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 7.4vw, 3.6rem);     /* reserva p/ navegadores sem cqi */
    font-size: clamp(1.75rem, 8.9cqi, 4.4rem);    /* 8,9cqi = 5,6% de folga sobre a
                                                     linha mais larga, medida em
                                                     Archivo Black: 10,61em */
    line-height: .92;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin-block: var(--sp-5) var(--sp-5);
  }

  .hero__title .line { display: block; overflow: hidden; }
  .hero__title .word { display: inline-block; }

  .hero__title em {
    font-style: normal;
    color: var(--brand-500);
    -webkit-text-stroke: 2px var(--ink-900);
    paint-order: stroke fill;
    text-shadow: 0 6px 30px rgb(255 212 0 / .45);
  }

  :root[data-theme='escuro'] .hero__title em { -webkit-text-stroke-width: 0; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='claro']) .hero__title em { -webkit-text-stroke-width: 0; }
  }

  .hero__lead {
    font-size: var(--fs-lg);
    color: var(--text-soft);
    max-inline-size: 54ch;
    margin-block-end: var(--sp-8);
  }

  .hero__cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

  .hero__proof {
    display: flex;
    gap: var(--sp-6);
    flex-wrap: wrap;
    margin-block-start: var(--sp-10);
    padding-block-start: var(--sp-6);
    border-block-start: var(--border);
  }

  .hero__proof-item {
    & b {
      display: block;
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      color: var(--brand-500);
      line-height: 1;
    }
    & span { font-size: var(--fs-xs); color: var(--text-mute); }
  }

  /* mock do sistema flutuando no hero */
  .hero__stage {
    position: relative;
    perspective: 1400px;
  }

  .app-mock {
    position: relative;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: var(--border);
    box-shadow: var(--shadow-lg), var(--shadow-brand);
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
  }

  .app-mock__bar {
    display: flex;
    gap: .4rem;
    align-items: center;
    padding: .7rem 1rem;
    background: var(--surface-2);
    border-block-end: var(--border);

    & i {
      inline-size: .6rem; block-size: .6rem;
      border-radius: 50%;
      background: var(--line-strong);
      display: block;
    }
    & i:first-child { background: #FF5F57; }
    & i:nth-child(2) { background: #FEBC2E; }
    & i:nth-child(3) { background: #28C840; }
    & span {
      margin-inline-start: auto;
      font-size: var(--fs-3xs);
      color: var(--text-mute);
      font-family: var(--font-mono);
    }
  }

  .app-mock__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }

  .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }

  .mock-kpi {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: var(--border);

    & small { font-size: var(--fs-3xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
    & b { display: block; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
  }

  .mock-chart {
    block-size: 120px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: var(--border);

    & i {
      flex: 1;
      display: block;
      border-radius: 4px 4px 2px 2px;
      background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
      transform-origin: bottom;
    }
  }

  .mock-rows { display: grid; gap: .5rem; }

  .mock-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .55rem .7rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-xs);

    & .avatar { --size: 1.6rem; }
    & span:last-child { margin-inline-start: auto; }
  }

  .hero__float {
    position: absolute;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-xs);
    font-weight: 700;
    display: flex;
    gap: .5rem;
    align-items: center;
    white-space: nowrap;
  }

  .hero__float--1 { inset-block-start: -1.5rem; inset-inline-start: -2rem; }
  .hero__float--2 { inset-block-end: 2rem; inset-inline-end: -2.5rem; }
  .hero__float--3 { inset-block-end: -1.5rem; inset-inline-start: 12%; }

  @media (max-width: 640px) {
    .hero__float { display: none; }
  }

  .scroll-hint {
    position: absolute;
    inset-block-end: var(--sp-6);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: grid;
    justify-items: center;
    gap: .5rem;
    font-size: var(--fs-3xs);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-mute);

    & i {
      inline-size: 2px;
      block-size: 46px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--brand-500), transparent);
      animation: scroll-pulse 1.8s var(--ease-in-out) infinite;
    }
  }

  @keyframes scroll-pulse {
    0%, 100% { opacity: .3; scale: 1 .4; }
    50%      { opacity: 1;  scale: 1 1; }
  }

  /* ================================================== seções */
  .section {
    position: relative;
    padding-block: clamp(5rem, 11vh, 9rem);
    overflow: clip;
  }

  .section--tight { padding-block: clamp(3rem, 7vh, 5.5rem); }

  .section-head {
    max-inline-size: 62ch;
    margin-block-end: var(--sp-12);

    &.is-center { margin-inline: auto; text-align: center; }
  }

  .section-title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: .98;
    letter-spacing: -.025em;
    text-transform: uppercase;
    margin-block: var(--sp-4);
  }

  .section-title em { font-style: normal; color: var(--brand-500); }

  .section-lead { font-size: var(--fs-lg); color: var(--text-soft); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brand-600);

    &::before {
      content: '';
      inline-size: 2rem; block-size: 2px;
      background: var(--brand-500);
      border-radius: 2px;
    }
  }

  :root[data-theme='escuro'] .eyebrow { color: var(--brand-400); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='claro']) .eyebrow { color: var(--brand-400); }
  }

  /* ================================================== prancheta tática */
  .board-section { position: relative; }

  .board-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: center;
  }

  @media (max-width: 1024px) {
    .board-layout { grid-template-columns: 1fr; }
  }

  .board-shell {
    position: relative;
    border-radius: var(--r-2xl);
    padding: var(--sp-4);
    background:
      linear-gradient(150deg, color-mix(in oklab, var(--brand-500) 22%, var(--surface)), var(--surface));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .board-shell::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--brand-500), transparent 40%, var(--brand-600));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .board-canvas {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--r-xl);
    display: block;
    touch-action: none;
    cursor: grab;

    &:active { cursor: grabbing; }
  }

  .board-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
  }

  .board-btn {
    padding: .5em 1em;
    border-radius: var(--r-full);
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-soft);
    transition: all var(--t-fast) var(--ease-out);

    &:hover { border-color: var(--brand-500); color: var(--text); transform: translateY(-2px); }

    &.is-active {
      background: var(--brand-500);
      border-color: var(--brand-500);
      color: var(--ink-900);
      box-shadow: 0 6px 18px rgb(255 212 0 / .35);
    }
  }

  .board-legend {
    display: grid;
    gap: var(--sp-4);
  }

  .board-legend__item {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: var(--border);
    transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);

    &.is-on { border-color: var(--brand-500); transform: translateX(4px); }

    & b { display: block; font-size: var(--fs-sm); }
    & span { font-size: var(--fs-xs); color: var(--text-soft); }
  }

  .board-legend__num {
    inline-size: 2rem; block-size: 2rem;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--brand-700);
    display: grid; place-items: center;
    font-weight: 800; font-size: var(--fs-xs);
    flex: none;
  }

  :root[data-theme='escuro'] .board-legend__num { color: var(--brand-400); }

  /* ================================================== módulos */
  .modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: var(--sp-5);
  }

  .module-card {
    position: relative;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: var(--border);
    overflow: hidden;
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out),
                border-color var(--t-med);

    &:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in oklab, var(--brand-500) 55%, var(--line));
    }

    &::before {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 3px;
      background: linear-gradient(90deg, var(--brand-500), transparent 70%);
      scale: 0 1;
      transform-origin: left;
      transition: scale var(--t-med) var(--ease-out);
    }

    &:hover::before { scale: 1 1; }
  }

  .module-card__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--brand-700);
    margin-block-end: var(--sp-4);

    & svg { inline-size: 1.5rem; block-size: 1.5rem; }
  }

  :root[data-theme='escuro'] .module-card__icon { color: var(--brand-400); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='claro']) .module-card__icon { color: var(--brand-400); }
  }

  .module-card__num {
    position: absolute;
    inset-block-start: var(--sp-4);
    inset-inline-end: var(--sp-5);
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--text);
    opacity: .06;
  }

  .module-card h3 { font-size: var(--fs-lg); margin-block-end: var(--sp-2); }
  .module-card p  { font-size: var(--fs-sm); color: var(--text-soft); }

  .module-card ul {
    margin-block-start: var(--sp-3);
    display: grid;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: var(--text-soft);
    list-style: none;
    padding: 0;

    & li { display: flex; gap: .5rem; align-items: flex-start; }
    & li::before { content: '▸'; color: var(--brand-500); font-weight: 800; }
  }

  /* ================================================== SVG de conexões */
  .connect-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: visible;

    & path {
      fill: none;
      stroke: var(--brand-500);
      stroke-width: 1.5;
      stroke-linecap: round;
      opacity: .35;
    }

    & circle { fill: var(--brand-500); }
  }

  /* ================================================== números */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--sp-6);
    text-align: center;
  }

  .stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: 1;
    color: var(--brand-500);
    font-variant-numeric: tabular-nums;
  }

  .stat__label {
    margin-block-start: var(--sp-2);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 700;
  }

  /* ================================================== preço */
  .pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--sp-10);
    align-items: start;
  }

  @media (max-width: 980px) { .pricing { grid-template-columns: 1fr; } }

  .price-card {
    position: relative;
    padding: var(--sp-8);
    border-radius: var(--r-2xl);
    background: var(--ink-900);
    color: #FFF;
    box-shadow: var(--shadow-lg), var(--shadow-brand);
    overflow: hidden;
  }

  .price-card::before {
    content: '';
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -20%;
    inline-size: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 212 0 / .35), transparent 70%);
    filter: blur(40px);
  }

  .price-card__tag {
    display: inline-flex;
    padding: .35em .9em;
    border-radius: var(--r-full);
    background: var(--brand-500);
    color: var(--ink-900);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .price-card__value {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-block: var(--sp-5) var(--sp-2);

    & small { font-size: var(--fs-lg); font-weight: 700; opacity: .7; }
    & b {
      font-family: var(--font-display);
      font-size: clamp(3.4rem, 9vw, 5rem);
      line-height: .9;
      color: var(--brand-500);
    }
    & i { font-style: normal; font-size: var(--fs-sm); opacity: .6; }
  }

  .price-list {
    display: grid;
    gap: .7rem;
    margin-block: var(--sp-6);
    list-style: none;
    padding: 0;
    font-size: var(--fs-sm);

    & li { display: flex; gap: .7rem; align-items: flex-start; }

    & li svg {
      inline-size: 1.1rem; block-size: 1.1rem;
      color: var(--brand-500);
      flex: none;
      margin-block-start: .25rem;
    }
  }

  .checkout-form { display: grid; gap: var(--sp-4); }

  .checkout-form .input,
  .checkout-form .select {
    background: rgb(255 255 255 / .06);
    border-color: rgb(255 255 255 / .16);
    color: #FFF;

    &::placeholder { color: rgb(255 255 255 / .4); }
    &:focus { border-color: var(--brand-500); background: rgb(255 255 255 / .1); }
  }

  .checkout-form .field__label { color: rgb(255 255 255 / .55); }

  .checkout-form option { color: var(--ink-900); }

  /* ================================================== depoimentos */
  .marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee__track {
    display: flex;
    gap: var(--sp-5);
    inline-size: max-content;
    animation: marquee 46s linear infinite;

    &:hover { animation-play-state: paused; }
  }

  @keyframes marquee { to { translate: -50% 0; } }

  .quote {
    inline-size: min(78vw, 380px);
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: var(--border);

    & p { font-size: var(--fs-sm); color: var(--text-soft); }

    & footer {
      display: flex;
      gap: var(--sp-3);
      align-items: center;
      margin-block-start: var(--sp-5);

      & b { display: block; font-size: var(--fs-sm); }
      & span { font-size: var(--fs-xs); color: var(--text-mute); }
    }
  }

  /* ================================================== FAQ */
  .faq { display: grid; gap: var(--sp-3); max-inline-size: 58rem; margin-inline: auto; }

  .faq details {
    border-radius: var(--r-md);
    border: var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--t-fast);

    &[open] { border-color: color-mix(in oklab, var(--brand-500) 50%, var(--line)); }
  }

  .faq summary {
    padding: var(--sp-5);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--fs-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    align-items: center;
    list-style: none;

    &::-webkit-details-marker { display: none; }

    &::after {
      content: '+';
      font-size: 1.5rem;
      line-height: 1;
      color: var(--brand-500);
      transition: rotate var(--t-med) var(--ease-spring);
    }
  }

  .faq details[open] summary::after { rotate: 45deg; }

  .faq .faq__body {
    padding: 0 var(--sp-5) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-soft);
  }

  /* ================================================== CTA final */
  .cta-final {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem);
    border-radius: var(--r-2xl);
    background: linear-gradient(135deg, var(--brand-400), var(--brand-500) 55%, var(--brand-600));
    color: var(--ink-900);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-brand);
  }

  .cta-final::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgb(255 255 255 / .35), transparent 45%),
                      radial-gradient(circle at 80% 80%, rgb(5 5 5 / .12), transparent 50%);
    pointer-events: none;
  }

  .cta-final > * { position: relative; z-index: 1; }

  .cta-final h2 {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    text-transform: uppercase;
    line-height: .98;
    letter-spacing: -.02em;
  }

  /* ================================================== rodapé */
  .site-footer {
    background: var(--ink-900);
    color: rgb(255 255 255 / .68);
    padding-block: var(--sp-16) var(--sp-8);
    font-size: var(--fs-sm);
  }

  .site-footer .logo__moa { color: #FFF; }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-8);
    margin-block-end: var(--sp-10);
  }

  .footer-col h4 {
    font-size: var(--fs-2xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-500);
    margin-block-end: var(--sp-4);
  }

  .footer-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }

  .footer-col a {
    color: rgb(255 255 255 / .68);
    transition: color var(--t-fast);
    &:hover { color: var(--brand-500); }
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid rgb(255 255 255 / .1);
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / .45);
  }

  /* ================================================== reveal */
  .reveal { opacity: 0; translate: 0 28px; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; translate: none; }
  }

  /* ================================================== pagamento Pix */
  .pix-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--sp-8);
    align-items: start;
  }

  @media (max-width: 860px) { .pix-layout { grid-template-columns: 1fr; } }

  .pix-qr {
    display: grid;
    place-items: center;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: #FFF;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);

    & img, & svg { inline-size: min(280px, 70vw); block-size: auto; }
  }

  .pix-code {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;

    & input {
      font-family: var(--font-mono);
      font-size: var(--fs-2xs);
    }
  }

  .pix-steps {
    counter-reset: step;
    display: grid;
    gap: var(--sp-4);
    list-style: none;
    padding: 0;

    & li {
      counter-increment: step;
      display: flex;
      gap: var(--sp-4);
      align-items: flex-start;
      font-size: var(--fs-sm);

      &::before {
        content: counter(step);
        inline-size: 1.9rem; block-size: 1.9rem;
        border-radius: 50%;
        background: var(--brand-500);
        color: var(--ink-900);
        display: grid; place-items: center;
        font-weight: 800; font-size: var(--fs-xs);
        flex: none;
      }
    }
  }

  .pix-status {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    font-weight: 700;
  }

  .pix-status .spinner {
    inline-size: 1.15rem; block-size: 1.15rem;
    border-radius: 50%;
    border: 2.5px solid var(--line-strong);
    border-block-start-color: var(--brand-500);
    animation: spin .8s linear infinite;
    flex: none;
  }

  @keyframes spin { to { rotate: 360deg; } }

  .pix-status.is-paid {
    background: color-mix(in oklab, var(--ok-500) 14%, transparent);
    color: var(--ok-500);
  }
}

@layer pages {
  /* ================================================== pais, alunos e jogadores */
  .pais {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--sp-10);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: var(--r-2xl);
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--brand-500) 40%, var(--line));
    box-shadow: var(--shadow-md);
  }
  .pais__acoes { display: grid; gap: var(--sp-3); }
  .pais__acoes .btn { inline-size: 100%; }
  @media (max-width: 900px) { .pais { grid-template-columns: 1fr; gap: var(--sp-6); } }
}