@layer components {

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--areia);
    color: var(--rio-negro);
    font-weight: 600;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-card-sm) 0;
  }
  .skip-link:focus { left: 0 }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .brand svg { display: block; height: 34px; width: auto }

  .foot .brand svg { height: 32px }

  .wordmark {
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    color: var(--papel);
  }
  .wordmark span { font-weight: 400; color: var(--areia) }

  .symbol-light { --haste: var(--papel) }

  .symbol-dark  { --haste: var(--rio-negro) }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 1.1rem;
  }
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--areia);
    margin-right: 10px;
    vertical-align: 1px;
  }

  .cta-row { display: flex; flex-wrap: wrap; gap: 14px }

  .btn {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    transition: filter var(--transition), background var(--transition),
                transform var(--transition) ease-out,
                box-shadow var(--transition) ease-out;
  }

  .btn-primary { background: var(--areia); color: var(--rio-negro) }
  .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: var(--shadow-btn) }
  .btn-primary:active { transform: translateY(0); box-shadow: none }

  .btn-ghost { color: var(--papel); border: 1.5px solid var(--papel-20) }
  .btn-ghost:hover { background: var(--papel-20) }

  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-whatsapp svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
  }

  .nav-cta {
    background: var(--areia);
    color: var(--rio-negro);
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    transition: filter var(--transition), transform var(--transition) ease-out;
  }
  .nav-cta:hover { filter: brightness(1.12); color: var(--rio-negro); transform: translateY(-1px) }
  .nav-cta:active { transform: translateY(0) }

  .card {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--surface);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius-card);
    padding: 28px 26px;

    transition: transform var(--transition) ease-out,
                border-color var(--transition) ease-out,
                box-shadow var(--transition) ease-out;
  }
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--areia-45);
    box-shadow: var(--shadow-lift);
  }
  .card p { font-size: var(--size-card-body); color: var(--ink-78) }

  .accent-bar {
    width: 34px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--areia);
    transition: width var(--transition) ease-out;
  }
  .card:hover .accent-bar { width: 56px }

  .scope-note,
  .doc-meta {
    font-size: var(--size-xs);
    color: var(--ink-78);
    border-left: 3px solid var(--areia);
    padding-left: 14px;
    max-width: 46em;
  }
  .scope-note { margin-top: 2.2rem; font-size: .92rem }

  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-cards);
    counter-reset: step;
  }
  .step {
    position: relative;
    padding-top: 14px;
    border-top: 2px solid var(--ink-12);
  }
  .step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    margin-bottom: .6rem;

    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--accent-text);
  }
  .step h3 { margin-bottom: .4rem }
  .step p { font-size: var(--size-sm); color: var(--ink-78) }

  .commitment {
    background: var(--surface);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius-card-sm);
    padding: 18px 20px;
  }
  .commitment h3 {
    font-size: 1.02rem;
    margin-bottom: .25rem;
    position: relative;
    padding-left: 16px;
  }

  .commitment h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .38em;
    width: 6px;
    height: 6px;
    background: var(--areia);
  }
  .commitment p { font-size: .93rem; color: var(--ink-78) }

  .page-header {
    background: var(--rio-negro);
    color: var(--papel);
    --accent-text: var(--areia);
  }
  .page-header .wrap {
    padding-top: clamp(48px, 7vw, 84px);
    padding-bottom: clamp(56px, 8vw, 96px);
  }
  .page-header h1 { font-size: var(--size-h1-page) }
  .page-header .lead {
    max-width: 38em;
    margin-top: 1.2rem;
    font-size: 1.08rem;
    color: var(--papel-70);
  }
  .page-header .cta-row { margin-top: 2rem }

  .drafting-grid {
    background-image:
      linear-gradient(var(--grid-line-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px),
      linear-gradient(var(--grid-line-minor) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-minor) 1px, transparent 1px);
    background-size:
      var(--grid-step-major) var(--grid-step-major),
      var(--grid-step-major) var(--grid-step-major),
      var(--grid-step-minor) var(--grid-step-minor),
      var(--grid-step-minor) var(--grid-step-minor);
  }

  .encontro {
    display: block;
    line-height: 0;
    position: relative;
    z-index: 3;
    margin-top: -2px;
  }
  .encontro svg { display: block; width: 100%; height: var(--wave-height) }
  .encontro .agua { animation: deriva var(--duracao-onda) linear infinite }

  @keyframes deriva {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
  }

  .encontro .fio {
    fill: none;
    stroke: var(--areia);
    stroke-width: 2.5;
    animation: deriva var(--duracao-onda) linear infinite;
  }

  .encontro-para-claro  svg   { background: linear-gradient(var(--rio-negro) calc(100% - 4px), var(--papel) calc(100% - 4px)) }
  .encontro-para-claro  .agua { fill: var(--papel) }
  .encontro-para-escuro svg   { background: linear-gradient(var(--papel) calc(100% - 4px), var(--rio-negro) calc(100% - 4px)) }
  .encontro-para-escuro .agua { fill: var(--rio-negro) }

  .briefing {
    background: var(--rio-negro-2);
    border: 1px solid var(--papel-20);
    border-radius: var(--radius-card);
    padding: 28px;
    max-width: 44em;
    margin-bottom: 2.2rem;
  }
  .briefing strong { color: var(--areia); font-weight: 600 }
  .briefing ul { display: grid; gap: .5rem; margin-top: .8rem; list-style: none }
  .briefing li {
    position: relative;
    padding-left: 22px;
    color: var(--papel-70);
    font-size: .98rem;
  }

  .briefing li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 6px;
    height: 6px;
    background: var(--areia);
  }

  .email-large {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--papel);
    text-decoration: none;
    border-bottom: 2px solid var(--areia);
  }
  .email-large:hover { color: var(--areia) }

  .placeholder { color: var(--accent-text); font-weight: 600 }
}