/* ============================================================
     VOUX - software house
     Tema claro profissional. Um dourado (#F5C518) como acento.
     Raio: containers 12px · botoes pill · chips/inputs 8px.
     Display: Bricolage Grotesque · Texto: Inter · Numeros: JetBrains Mono
     ============================================================ */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* ---- Tema claro: profissional e confiavel ---- */
    --bg:        #F4F3EF;
    --bg-soft:   #FBFAF7;
    --surface:   #FFFFFF;
    --surface-3: #EFEDE6;
    --line:      rgba(26, 23, 18, 0.10);
    --line-2:    rgba(26, 23, 18, 0.17);
    --fg:        #1A1712;
    --fg-muted:  #5A544A;
    --fg-faint:  #8C8578;
    --gold:      #F5C518;
    --gold-hi:   #FFDA57;
    --gold-deep: #C99C08;
    --gold-ink:  #7A5D00;
    --ink:       #16130E;

    /* ---- Blocos escuros deliberados ---- */
    --dark:          #14110D;
    --dark-2:        #1E1811;
    --on-dark:       #F7F1E7;
    --on-dark-muted: #B4AD9D;
    --dark-line:     rgba(246, 240, 229, 0.12);

    --r:         12px;
    --r-sm:      8px;
    --r-pill:    999px;

    --maxw:      1360px;
    --pad:       clamp(1.25rem, 5vw, 4rem);

    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);

    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --z-menu:   99;
    --z-header: 100;
    --z-grain:  120;
    --z-skip:   200;
  }

  html { scroll-behavior: smooth; }

  body {
    background-color: #F4F3EF;
    background-image:
      radial-gradient(115% 65% at 50% -8%, #FCF7E9 0%, transparent 52%),
      linear-gradient(180deg, #F8F7F3 0%, #F4F3EF 55%, #F0EFE9 100%);
    color: var(--fg);
    font-family: var(--sans);
    font-weight: 450;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Grao sutil, fixo, pointer-events-none. Jamais em container que rola. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--gold); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 3px; }

  .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

  /* ---------- Tipografia ---------- */
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
  }
  .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); border-radius: 2px; transform: skewX(-16deg); display: inline-block; }

  .h2   { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.03; }
  .lead { color: var(--fg-muted); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 58ch; text-wrap: pretty; }
  .gold { color: var(--gold-ink); }

  /* Marca-texto dourado com varredura na entrada */
  .hl {
    color: var(--ink);
    background: linear-gradient(180deg, transparent 12%, var(--gold) 12%, var(--gold) 90%, transparent 90%);
    background-repeat: no-repeat; background-size: 100% 100%;
    padding: 0 0.1em; margin: 0 -0.02em; border-radius: 2px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .js .reveal .hl { background-size: 0% 100%; }
  .reveal.in .hl { background-size: 100% 100%; transition: background-size 0.55s var(--ease-out) 0.3s; }

  /* ---------- Botoes ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--sans); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
    padding: 0.92rem 1.5rem; border-radius: var(--r-pill);
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform 0.16s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    will-change: transform;
  }
  .btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
  .btn:hover svg { transform: translateX(4px); }
  .btn:active { transform: scale(0.97); }

  .btn-gold  { background: var(--gold); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 12px 30px -14px rgba(201,156,8,0.55); }
  .btn-gold:hover  { background: var(--gold-hi); }
  .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--fg); background: rgba(26,23,18,0.04); }
  .btn-ink   { background: var(--dark); color: var(--on-dark); }
  .btn-ink:hover   { background: #000; }

  .textlink { color: var(--fg-muted); font-weight: 500; font-size: 0.98rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s var(--ease-out), gap 0.2s var(--ease-out); }
  .textlink:hover { color: var(--fg); gap: 0.75rem; }

  .skip-link {
    position: fixed; left: 1rem; top: -4rem; z-index: var(--z-skip);
    background: var(--gold); color: var(--ink);
    padding: 0.8rem 1.3rem; border-radius: var(--r-pill);
    font-weight: 700; font-size: 0.95rem;
    transition: top 0.25s var(--ease-out);
  }
  .skip-link:focus { top: 1rem; }

  /* ============================================================
     NAVBAR
     ============================================================ */
  #sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

  header {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
    transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
    border-bottom: 1px solid transparent;
  }
  header.scrolled {
    background: rgba(250, 249, 246, 0.82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(245, 197, 24, 0.35), 0 18px 40px -30px rgba(26, 23, 18, 0.25);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }

  /* Marca VOUX: logo oficial (assets/) */
  .logo { display: inline-flex; align-items: center; color: var(--fg); }
  .logo-img { height: 40px; width: auto; display: block; transition: transform 0.3s var(--ease-out); }
  .logo:hover .logo-img { transform: translateY(-2px); }

  .nav-links { display: flex; gap: 0.4rem; list-style: none; }
  .nav-links a { display: inline-flex; align-items: center; padding: 0.55rem 0.85rem; font-size: 0.94rem; color: var(--fg-muted); font-weight: 500; border-radius: var(--r-pill); transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out); }
  .nav-links a:hover { color: var(--fg); background: rgba(26,23,18,0.05); }
  .nav-right { display: flex; align-items: center; gap: 1rem; }
  .nav-cta { padding: 0.62rem 1.15rem; font-size: 0.92rem; }

  .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
  .burger span { width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 1.3rem; padding: var(--pad); transform: translateY(-100%); transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; visibility: hidden; }
  body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; transition: transform 0.5s var(--ease); }
  body.menu-open { overflow: hidden; }
  .mobile-menu a { font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; color: var(--fg); }

  /* ============================================================
     HERO
     ============================================================ */
  .hero { min-height: 100dvh; display: flex; align-items: center; padding-top: 92px; padding-bottom: 3rem; position: relative; }
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(48% 44% at 84% 6%, rgba(245,197,24,0.16), transparent 60%);
  }
  /* Trilhas de fundo: feixes longos atravessando o hero. Puramente decorativo. */
  /* O fundo desce alem do hero, atravessando a costura (.seam-cut):
     os feixes continuam pelo fade e somem junto com o degrade. */
  .bg-paths {
    position: absolute; inset: 0; bottom: calc(-1 * clamp(6rem, 11vw, 10rem));
    z-index: 0; overflow: hidden; pointer-events: none;
    color: var(--gold-deep);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
  }
  .bg-paths svg  { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .bg-paths path { fill: none; stroke: currentColor; stroke-dasharray: 0.35 0.65; }

  @keyframes path-flow { to { stroke-dashoffset: -1; } }
  @keyframes path-glow { 0%, 100% { stroke-opacity: var(--o); } 50% { stroke-opacity: calc(var(--o) * 1.9); } }

  @media (prefers-reduced-motion: no-preference) {
    .bg-paths path { animation: path-flow var(--dur) linear infinite, path-glow var(--dur) ease-in-out infinite; }
  }

  .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; position: relative; z-index: 1; }
  .hero-grid > * { min-width: 0; }
  .hero h1 { font-size: clamp(2.7rem, 6vw, 5.1rem); line-height: 0.98; letter-spacing: -0.045em; margin: 1.5rem 0 1.5rem; }
  .hero .lead { margin-bottom: 2.3rem; font-size: clamp(1.05rem, 1.5vw, 1.26rem); }
  .hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

  /* Painel de sistema: a operacao inteira convergindo para a VOUX */
  .brand-panel {
    position: relative; border: 1px solid var(--line); border-radius: var(--r);
    background: radial-gradient(120% 90% at 78% 10%, rgba(245,197,24,0.14), transparent 55%), linear-gradient(160deg, #F2F0E9, #E9E7DF);
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(1rem, 3vw, 2.2rem);
    box-shadow: 0 40px 80px -46px rgba(26,23,18,0.28), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .brand-panel::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 46px 46px; opacity: 0.7; mask-image: radial-gradient(78% 78% at 50% 45%, #000 30%, transparent 80%);
  }
  .brand-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(240px 240px at var(--mx, 72%) var(--my, 26%), rgba(245,197,24,0.16), transparent 68%);
    transition: opacity 0.4s var(--ease-out);
  }
  .brand-panel:hover::after { opacity: 1; }

  .sys { position: relative; width: 100%; height: auto; max-width: 500px; display: block; }
  .sys text { font-family: var(--mono); }
  .sat-label { font-size: 11px; fill: var(--fg-muted); letter-spacing: 0.01em; }
  .sat-box    { fill: #FFFFFF; stroke: var(--line); stroke-width: 1; filter: url(#chipShadow); }
  .core-box   { fill: url(#coreFill); stroke: rgba(245,197,24,0.55); stroke-width: 1.4; }
  .sys-lines  { fill: none; }
  .pulse      { fill: var(--gold-deep); transform-box: fill-box; transform-origin: center; opacity: 0; }

  .hero-line { stroke: var(--gold-deep); stroke-width: 1.2; opacity: 0.5; }
  .js .hero-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .sat { transform-box: fill-box; transform-origin: center; }
  .js .sat { opacity: 0; transform: scale(0.9); }
  .sat-float { transform-box: fill-box; }
  .hero-core { transform-box: fill-box; transform-origin: center; }
  .js .hero-core { opacity: 0; transform: scale(0.9); }
  .js .core-glow { opacity: 0; }

  .brand-panel.in .hero-line { animation: draw 0.9s var(--ease-out) forwards; animation-delay: calc(0.15s + var(--i) * 0.07s); }
  .brand-panel.in .sat        { animation: pop 0.6s var(--ease-out) forwards; animation-delay: calc(0.5s + var(--i) * 0.07s); }
  .brand-panel.in .hero-core  { animation: pop 0.7s var(--ease-out) 0.05s forwards; }
  .brand-panel.in .core-glow  { opacity: 0.85; transition: opacity 1s ease 0.2s; }

  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop  { to { opacity: 1; transform: scale(1); } }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes pulse   { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.95; } }
  @keyframes flow {
    0%   { opacity: 0; transform: translate(0, 0); }
    14%  { opacity: 1; }
    76%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .brand-panel.in .sat-float  { animation: floaty var(--dur, 7s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
    .brand-panel.in .core-glow  { animation: pulse 4.5s ease-in-out 1.4s infinite; }
    .brand-panel.in .pulse      { animation: flow 2.8s var(--ease) infinite; animation-delay: calc(1.3s + var(--i) * 0.34s); }
  }

  /* ============================================================
     FAIXA DE NUMEROS
     ============================================================ */
  .metrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .metrics-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .metric { padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.4rem, 2.5vw, 2.4rem); border-left: 1px solid var(--line); }
  .metric:first-child { border-left: none; padding-left: 0; }
  .metric .num { font-family: var(--mono); font-weight: 600; font-size: clamp(2.3rem, 4.2vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; display: flex; align-items: baseline; gap: 0.05em; color: var(--fg); }
  .metric .num .u { font-size: 0.45em; color: var(--gold-ink); font-weight: 600; }
  .metric .lbl { color: var(--fg-muted); font-size: 0.94rem; margin-top: 0.9rem; max-width: 24ch; }

  /* ============================================================
     Secao generica
     ============================================================ */
  /* respiro vertical mais curto: a pagina anda mais rapido sem colar as secoes */
  section.blk { padding-block: clamp(4.5rem, 8vw, 7rem); }
  .sec-head { max-width: 62ch; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }
  .sec-head .h2 { margin: 1.1rem 0 1.2rem; }

  /* ---------- RITMO DE BANDAS ----------
     A pagina alterna o chao das secoes para nao virar um lencol continuo
     de papel: bandas brancas, uma banda de papel mais fundo e a dourada
     do fim. Cada banda so entra onde o conteudo aguenta o fundo. */
  .band-snow { background: var(--surface); }
  .band-snow .step .dot { background: var(--surface); }
  .band-snow .sy-neq { border-color: var(--surface); }
  .band-deep { --band: #EBE7DC; background: var(--band); position: relative; }
  .band-deep::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(26,23,18,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26,23,18,0.04) 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: radial-gradient(90% 100% at 50% 0%, #000, transparent 92%);
  }
  .band-deep > .wrap { position: relative; }
  .band-deep .lg-orb-flag { box-shadow: 0 0 0 3px var(--band), 0 5px 14px rgba(26,23,18,0.18); }
  .band-deep .lg-orb-ghost { border-color: #CFC9BB; }

  /* ---------- A DOR ---------- */
  .pain { border-bottom: 1px solid var(--line); }
  .pain h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.02; max-width: 19ch; letter-spacing: -0.04em; }
  .pain h2 em { font-style: normal; color: var(--ink); background: linear-gradient(180deg, transparent 12%, var(--gold) 12%, var(--gold) 90%, transparent 90%); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .pain-symptoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
  .symptom { padding: 1.8rem 1.8rem 0.4rem 0; border-left: 1px solid var(--line); padding-left: 1.8rem; }
  .symptom:first-child { border-left: none; padding-left: 0; }
  .symptom .s-n { font-family: var(--mono); font-size: 0.78rem; color: var(--gold-ink); font-weight: 600; letter-spacing: 0.04em; }
  .symptom .s-k { font-family: var(--display); color: var(--fg); font-weight: 700; font-size: 1.14rem; letter-spacing: -0.02em; margin-top: 0.9rem; }
  .symptom p { color: var(--fg-muted); font-size: 0.96rem; margin-top: 0.55rem; }

  /* ---------- METODO VOUX ---------- */
  .metodo { border-bottom: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(2rem, 4vw, 3.5rem); position: relative; }
  .steps::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--line); }
  .step { padding-right: clamp(1rem, 2.5vw, 2.4rem); position: relative; }
  .step .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); position: relative; z-index: 1; margin-bottom: 1.6rem; transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
  .step.on .dot { background: var(--gold); border-color: var(--gold-deep); box-shadow: 0 0 0 5px rgba(245,197,24,0.18); }
  .step .s-n { font-family: var(--mono); font-size: 0.78rem; color: var(--gold-ink); font-weight: 600; }
  .step h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); letter-spacing: -0.03em; margin: 0.5rem 0 0.7rem; }
  .step p { color: var(--fg-muted); font-size: 0.95rem; max-width: 30ch; }

  /* Pagamento por marco: painel escuro deliberado dentro do metodo */
  .marcos {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    background: linear-gradient(165deg, var(--dark-2), var(--dark));
    border: 1px solid var(--dark-line); border-radius: var(--r);
    padding: clamp(1.8rem, 3.5vw, 3rem);
    box-shadow: 0 44px 90px -44px rgba(26,23,18,0.5);
    position: relative; overflow: hidden;
  }
  .marcos::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--dark-line) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; mask-image: radial-gradient(110% 90% at 90% 0%, #000, transparent 70%); pointer-events: none; }
  .marcos h3 { color: var(--on-dark); font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; max-width: 24ch; position: relative; }
  .marcos h3 span { color: var(--gold); }
  .marcos .sub { color: var(--on-dark-muted); font-size: 0.98rem; margin: 0.8rem 0 1.8rem; max-width: 52ch; position: relative; }
  .marcos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: var(--r-sm); overflow: hidden; position: relative; }
  .marco { background: rgba(255,255,255,0.03); padding: 1.4rem 1.5rem; }
  .marco .m-tag { font-family: var(--mono); font-size: 0.74rem; color: var(--on-dark-muted); font-weight: 600; letter-spacing: 0.06em; }
  .marco .m-pct { font-family: var(--mono); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; color: var(--gold); letter-spacing: -0.03em; line-height: 1.1; margin: 0.4rem 0 0.6rem; }
  .marco .m-t { color: var(--on-dark); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
  .marco p { color: var(--on-dark-muted); font-size: 0.9rem; margin-top: 0.35rem; }
  .marcos .fine { color: rgba(246,240,229,0.5); font-size: 0.86rem; margin-top: 1.4rem; position: relative; }

  /* ---------- O QUE CONSTRUIMOS (bento) ---------- */
  .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(176px, auto); gap: clamp(0.9rem, 1.3vw, 1.3rem); grid-template-areas: "a a b" "a a c" "d e e"; }
  .cell { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 2.3vw, 2.1rem); background: var(--surface); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 12px 26px -20px rgba(26,23,18,0.12); transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
  .cell:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(26,23,18,0.05), 0 34px 55px -28px rgba(26,23,18,0.20); }
  .cell h3 { font-size: clamp(1.18rem, 1.7vw, 1.5rem); letter-spacing: -0.03em; margin-bottom: 0.5rem; }
  .cell p { color: var(--fg-muted); font-size: 0.95rem; max-width: 34ch; }

  /* Camada decorativa no topo do card */
  .cell-bg { margin-bottom: auto; padding-bottom: 1.2rem; position: relative; z-index: 1; }

  /* Corpo sobe no hover para dar lugar ao CTA */
  .cell-body { position: relative; z-index: 3; transition: transform 0.3s var(--ease-out); }
  .cell:hover .cell-body, .cell:focus-within .cell-body { transform: translateY(-2.6rem); }

  .cell-icon {
    width: 34px; height: 34px; display: block; margin-bottom: 0.8rem;
    fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    transform-origin: left center; transition: transform 0.3s var(--ease-out);
  }
  .cell:hover .cell-icon, .cell:focus-within .cell-icon { transform: scale(0.78); }

  /* CTA revelado por baixo */
  .cell-cta {
    position: absolute; inset: auto 0 0 0; z-index: 3; pointer-events: none;
    padding: 0 clamp(1.5rem, 2.3vw, 2.1rem) 1.15rem;
    opacity: 0; transform: translateY(1.6rem);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .cell:hover .cell-cta, .cell:focus-within .cell-cta { opacity: 1; transform: none; }
  .cell-link {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; color: var(--gold-ink);
  }
  .cell-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
  .cell-link:hover svg { transform: translateX(3px); }

  .cell-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(26,23,18,0.03); opacity: 0; transition: opacity 0.3s var(--ease-out); }
  .cell:hover .cell-tint { opacity: 1; }

  /* Sem hover (touch): CTA sempre visivel, nada se desloca */
  @media (hover: none) {
    .cell-cta { position: static; opacity: 1; transform: none; padding: 1.1rem 0 0; }
    .cell:hover .cell-body, .cell:focus-within .cell-body { transform: none; }
    .cell:hover .cell-icon, .cell:focus-within .cell-icon { transform: none; }
  }
  .cell .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; margin-bottom: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; }

  .cell-a { grid-area: a; }
  .cell-a h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }
  .cell-a::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; opacity: 0.6; mask-image: radial-gradient(120% 80% at 88% 6%, #000, transparent 66%); }
  .cell-b { grid-area: b; background: linear-gradient(150deg, rgba(245,197,24,0.20), var(--surface) 72%); border-color: rgba(201,156,8,0.35); }
  .cell-c { grid-area: c; }
  .cell-d { grid-area: d; }
  .cell-e { grid-area: e; }

  .flow { display: flex; align-items: center; gap: 0; opacity: 0.9; position: relative; }
  .flow i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-soft); flex-shrink: 0; }
  .flow i.on { background: var(--gold); border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(245,197,24,0.16); }
  .flow s { width: 30px; height: 1px; background: var(--line-2); display: block; }
  .mini-chart { display: flex; align-items: flex-end; gap: 5px; height: 42px; position: relative; }
  .mini-chart span { width: 9px; background: var(--line-2); border-radius: 2px; height: var(--h); }
  .mini-chart span:last-child { background: var(--gold-deep); }
  .cell-e::after { content: ""; position: absolute; top: -20%; right: 7%; width: 9px; height: 140%; background: var(--gold); opacity: 0.5; transform: skewX(-15deg); border-radius: 4px; }

  /* ---------- COMPARACAO ---------- */
  .cmp-head { text-align: left; }
  .cmp { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 16px 34px -22px rgba(26,23,18,0.14); }
  .cmp-row { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; border-top: 1px solid var(--line); }
  .cmp-row:first-child { border-top: none; }
  .cmp-row.head { background: var(--surface-3); }
  .cmp-row.head > div { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; padding: 0.9rem 1.4rem; }
  .cmp-row > div { padding: 1.25rem 1.4rem; }
  .cmp-row .c-nm { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
  .cmp-row .c-tx { color: var(--fg-muted); font-size: 0.95rem; }
  .cmp-row.voux { background: linear-gradient(90deg, rgba(245,197,24,0.18), rgba(245,197,24,0.08)); border-top: 1px solid rgba(201,156,8,0.4); }
  .cmp-row.voux .c-nm { display: inline-flex; align-items: center; gap: 0.5rem; }
  .cmp-row.voux .c-tx { color: var(--fg); }
  .cmp-cap { display: none; }

  /* ---------- TECNOLOGIA ---------- */
  .tech { background: var(--surface-3); border-block: 1px solid var(--line); }
  .tech-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .tech-grid .h2 { margin: 1.1rem 0 1.4rem; }
  .tech-list { border-top: 1px solid var(--line-2); }
  .tech-item { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: clamp(1.3rem, 2.2vw, 1.8rem) 0; border-bottom: 1px solid var(--line); }
  .tech-item .mk { width: 9px; height: 9px; background: var(--gold); transform: skewX(-15deg); margin-top: 0.5rem; flex-shrink: 0; border-radius: 1px; }
  .tech-item h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.02em; margin-bottom: 0.35rem; }
  .tech-item p { color: var(--fg-muted); font-size: 0.96rem; max-width: 52ch; }

  /* ---------- CASES ---------- */
  .case-feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .case-body .tag { font-family: var(--mono); font-size: 0.82rem; color: var(--gold-ink); font-weight: 600; letter-spacing: 0.02em; }
  .case-body .big { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0.9rem 0 1.1rem; }
  .case-body .big em { font-style: normal; color: var(--ink); background: linear-gradient(180deg, transparent 12%, var(--gold) 12%, var(--gold) 90%, transparent 90%); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  /* Anatomia de estudo de caso: desafio -> o que construimos -> resultado */
  .ca { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
  .ca-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; display: block; margin-bottom: 0.35rem; }
  .ca p { color: var(--fg-muted); font-size: 0.96rem; max-width: 48ch; }
  .ca .res { color: var(--fg); font-weight: 500; }
  .ca .res b { font-family: var(--mono); color: var(--gold-ink); font-size: 1.15em; letter-spacing: -0.02em; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--fg); background: var(--surface); border: 1px solid var(--line-2); padding: 0.32rem 0.7rem; border-radius: var(--r-sm); }

  .case-sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
  .case-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: clamp(1.5rem, 2.3vw, 2.1rem); box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 12px 26px -20px rgba(26,23,18,0.12); transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
  .case-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(26,23,18,0.05), 0 34px 55px -28px rgba(26,23,18,0.20); }
  .case-card .cnum { font-family: var(--mono); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; color: var(--fg); line-height: 1.1; }
  .case-card .cnum span { color: var(--gold-ink); }
  .case-card .cl { color: var(--fg-muted); font-size: 0.88rem; margin-top: 0.2rem; }
  .case-card h3 { font-size: 1.14rem; margin: 1.2rem 0 0.4rem; letter-spacing: -0.02em; }
  .case-card p { color: var(--fg-muted); font-size: 0.94rem; max-width: 44ch; }
  .case-card .chips { margin-top: 1.1rem; }
  .case-card .chip { background: var(--bg-soft); }

  /* Showcase escuro do case em destaque */
  .case-panel { position: relative; border: 1px solid var(--dark-line); border-radius: var(--r); overflow: hidden; background: linear-gradient(165deg, var(--dark-2), var(--dark)); padding: clamp(1.7rem, 3vw, 2.5rem); box-shadow: 0 44px 90px -44px rgba(26,23,18,0.5); }
  .case-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--dark-line) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.6; mask-image: radial-gradient(110% 90% at 90% 0%, #000, transparent 70%); pointer-events: none; }
  .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }
  .cp-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.04em; color: var(--on-dark); }
  .cp-status { font-family: var(--mono); font-size: 0.74rem; color: var(--gold); display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(245,197,24,0.35); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; }
  .cp-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,24,0.18); }
  .cp-desc { color: var(--on-dark-muted); font-size: 0.96rem; margin: 1rem 0 1.8rem; position: relative; max-width: 42ch; }
  .cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: var(--r-sm); overflow: hidden; position: relative; }
  .cp-stat { background: rgba(255,255,255,0.03); padding: 1.1rem 1.2rem; }
  .cp-stat b { font-family: var(--mono); display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--on-dark); }
  .cp-stat b span { color: var(--gold); }
  .cp-stat small { color: var(--on-dark-muted); font-size: 0.84rem; }

  /* Painel da rede: o numero de sistemas de um lado, as pecas do outro.
     Mesma moldura do .cp-stats para a secao nao trocar de linguagem, mas a
     divisao e desigual de proposito — o 5 e o dado, os modulos sao a
     explicacao dele. */
  .cp-rede { display: grid; grid-template-columns: auto 1fr; gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: var(--r-sm); overflow: hidden; position: relative; }
  .cp-rede-n { background: rgba(255,255,255,0.03); padding: 1.1rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
  .cp-rede-n b { font-family: var(--mono); display: block; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--gold); line-height: 1; }
  .cp-rede-n small { color: var(--on-dark-muted); font-size: 0.8rem; margin-top: 0.35rem; max-width: 8ch; }
  /* Os modulos em duas colunas: quatro nomes empilhados viram uma lista
     comprida; em duas colunas eles se leem de uma olhada so. */
  .cp-mods { background: rgba(255,255,255,0.03); padding: 1.1rem 1.2rem; margin: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; align-content: center; }
  .cp-mods li { color: var(--on-dark); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
  /* O tracinho dourado marca cada peca sem virar bullet de lista. */
  .cp-mods li::before { content: ""; width: 10px; height: 2px; background: var(--gold); border-radius: 2px; flex: none; opacity: 0.75; }

  /* ---------- VERTICAIS ---------- */
  .verticais { border-top: 1px solid var(--line); }
  .vert-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.3rem; margin-top: 2.2rem; }
  .vert { font-family: var(--display); font-size: clamp(2rem, 5.2vw, 3.9rem); font-weight: 800; letter-spacing: -0.05em; color: var(--fg-faint); transition: color 0.3s var(--ease-out); }
  .vert:hover { color: var(--fg); }
  .vsep { color: var(--gold-deep); font-size: clamp(1.6rem, 4vw, 2.9rem); font-weight: 400; margin: 0 0.85rem; transform: skewX(-8deg); display: inline-block; }
  .vert-note { color: var(--fg-muted); margin-top: 2.4rem; max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.14rem); text-wrap: pretty; }

  /* ---------- DEPOIMENTOS ---------- */
  .quotes { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: stretch; }
  .quote { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 16px 34px -22px rgba(26,23,18,0.14); }
  .quote .mark { color: var(--gold-deep); font-family: var(--display); font-size: 3rem; line-height: 0.5; font-weight: 800; height: 1.4rem; }
  .quote blockquote { font-family: var(--display); font-size: clamp(1.3rem, 2.1vw, 1.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.28; margin: 1.6rem 0 2.2rem; text-wrap: pretty; }
  .quote.small blockquote { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.36; }
  .quote .by { display: flex; flex-direction: column; gap: 0.15rem; }
  .quote .by .nm { font-weight: 600; letter-spacing: -0.01em; }
  .quote .by .rl { color: var(--fg-muted); font-size: 0.9rem; }

  /* ---------- RAIO-X (conversao, banda dourada) ---------- */
  .rx { background: var(--gold); color: var(--ink); position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 8rem); }
  .rx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(19,18,16,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(19,18,16,0.05) 1px, transparent 1px); background-size: 66px 66px; mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); }
  .rx-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; }
  .rx-grid > * { min-width: 0; }
  .rx-copy .rx-k { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: rgba(19,18,16,0.65); display: inline-flex; align-items: center; gap: 0.7rem; }
  .rx-copy .rx-k::before { content: ""; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transform: skewX(-16deg); }
  .rx-copy h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.02; margin: 1.1rem 0 1.2rem; max-width: 16ch; }
  .rx-copy .rx-lead { color: rgba(19,18,16,0.78); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 46ch; font-weight: 500; text-wrap: pretty; }
  .rx-list { list-style: none; margin: 1.8rem 0 1.6rem; display: grid; gap: 0.75rem; }
  .rx-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 500; color: rgba(19,18,16,0.88); font-size: 0.99rem; }
  .rx-list li svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 0.15rem; stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .rx-copy .fine { color: rgba(19,18,16,0.6); font-size: 0.88rem; max-width: 44ch; }

  /* Formulario */
  .form-card { background: var(--surface); border: 1px solid rgba(26,23,18,0.12); border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 50px 100px -40px rgba(26,23,18,0.45), 0 2px 6px rgba(26,23,18,0.08); position: relative; }
  .form-card h3 { font-size: 1.45rem; letter-spacing: -0.03em; margin-bottom: 0.4rem; }
  .form-card .f-sub { color: var(--fg-muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
  .f-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.05rem; }
  .f-field label { font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; }
  .f-field input, .f-field select {
    font-family: var(--sans); font-size: 0.96rem; color: var(--fg);
    background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-sm);
    padding: 0.78rem 0.95rem; width: 100%;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
    appearance: none; -webkit-appearance: none;
  }
  .f-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A544A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; cursor: pointer; }
  .f-field input::placeholder { color: var(--fg-faint); }
  .f-field input:focus, .f-field select:focus { outline: none; border-color: var(--gold-deep); background: #fff; box-shadow: 0 0 0 3px rgba(245,197,24,0.28); }
  .f-submit { width: 100%; justify-content: center; margin-top: 0.4rem; font-size: 1rem; padding: 1rem 1.5rem; }
  .form-card .f-note { text-align: center; color: var(--fg-faint); font-size: 0.83rem; margin-top: 0.9rem; }
  .f-error { display: none; background: rgba(180, 40, 20, 0.08); border: 1px solid rgba(180, 40, 20, 0.35); color: #8C2410; border-radius: var(--r-sm); padding: 0.75rem 0.95rem; font-size: 0.9rem; margin-bottom: 1rem; }
  .f-error.show { display: block; }

  /* Estado de sucesso */
  .form-ok { display: none; text-align: center; padding: 2.2rem 0.5rem; }
  .form-ok.show { display: block; }
  .form-ok .ok-ic { width: 58px; height: 58px; border-radius: 50%; background: rgba(245,197,24,0.2); border: 1.5px solid var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
  .form-ok .ok-ic svg { width: 26px; height: 26px; stroke: var(--gold-ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .form-ok h3 { margin-bottom: 0.5rem; }
  .form-ok p { color: var(--fg-muted); font-size: 0.96rem; max-width: 30ch; margin-inline: auto; }

  /* ---------- FOOTER (bloco escuro: fecha e reapresenta a marca) ---------- */
  footer { background: var(--dark); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
  .foot-brand .logo { display: inline-flex; margin-bottom: 1.4rem; }
  .foot-brand .logo-img { height: 52px; }
  .foot-brand p { color: var(--on-dark-muted); max-width: 34ch; font-size: 0.96rem; }
  .foot-col h5 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,240,229,0.45); margin-bottom: 1.1rem; font-weight: 600; }
  .foot-col a, .foot-col p { display: block; color: var(--on-dark-muted); font-size: 0.96rem; padding-block: 0.45rem; transition: color 0.2s var(--ease-out); }
  .foot-col a:hover { color: var(--gold); }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--dark-line); color: rgba(246,240,229,0.4); font-size: 0.86rem; }

  /* Marcador de conteudo a preencher: discreto, intencional */
  .ph { color: var(--fg-faint); font-style: normal; border-bottom: 1px dotted var(--line-2); }
  .case-panel .ph, footer .ph { color: rgba(246,240,229,0.4); border-bottom-color: var(--dark-line); }

  /* ============================================================
     REVEAL
     ============================================================ */
  .reveal { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .reveal.in { opacity: 1; transform: none; }

  /* ============================================================
     RESPONSIVO
     ============================================================ */
  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .brand-panel { aspect-ratio: 16 / 11; max-height: 44vh; order: -1; }
    .sys { max-width: 420px; margin-inline: auto; }
    .tech-grid, .quotes, .rx-grid { grid-template-columns: 1fr; }
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .metric:nth-child(3) { border-left: none; padding-left: 0; }
    .metric { border-top: 1px solid var(--line); }
    .metric:nth-child(1), .metric:nth-child(2) { border-top: none; }
    .steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }
    .steps::before { display: none; }
    .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e"; }
    .marcos-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .nav-links, .nav-right .nav-cta { display: none; }
    .burger { display: flex; }
    .hero { padding-top: 84px; }
    .hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); }
    .case-feat, .case-sub, .foot-grid { grid-template-columns: 1fr; }
    .foot-grid { gap: 2.2rem; }
    .steps { grid-template-columns: 1fr; gap: 2rem; }
    .pain-symptoms { grid-template-columns: 1fr; }
    .symptom { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-block: 1.5rem 0.4rem; }
    .symptom:first-child { border-top: none; }
    .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; }
    .cell-a { min-height: 220px; }
    .metrics-grid { grid-template-columns: 1fr; }
    .metric { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-block: 1.8rem; }
    .metric:first-child { border-top: none; }
    .cp-stats { grid-template-columns: 1fr; }
    /* No estreito a rede empilha: o numero em cima, os modulos embaixo. */
    .cp-rede { grid-template-columns: 1fr; }
    .cp-rede-n { flex-direction: row; align-items: baseline; gap: 0.6rem; }
    .cp-rede-n small { max-width: none; margin-top: 0; }
    /* comparacao vira cards empilhados */
    .cmp { background: transparent; border: none; box-shadow: none; display: grid; gap: 0.9rem; }
    .cmp-row.head { display: none; }
    .cmp-row { display: block; border: 1px solid var(--line) !important; border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 12px 26px -20px rgba(26,23,18,0.12); }
    .cmp-row.voux { background: linear-gradient(135deg, rgba(245,197,24,0.22), rgba(245,197,24,0.08)); border-color: rgba(201,156,8,0.4) !important; }
    .cmp-row > div { padding: 0.55rem 1.2rem; }
    .cmp-row > div:first-child { padding-top: 1.1rem; }
    .cmp-row > div:last-child { padding-bottom: 1.2rem; }
    .cmp-cap { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; margin-bottom: 0.15rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto; }
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .js .hero-line { stroke-dashoffset: 0 !important; }
    .js .sat, .js .hero-core { opacity: 1 !important; transform: none !important; }
    .bg-paths path { stroke-dasharray: none; }
    .cell-body, .cell-icon, .cell-cta, .cell-tint, .cell-link svg { transition: none; }
    .cell:hover .cell-body, .cell:focus-within .cell-body { transform: none; }
    .cell:hover .cell-icon, .cell:focus-within .cell-icon { transform: none; }
    .cell-cta { position: static; opacity: 1; transform: none; padding: 1.1rem 0 0; }
    .core-glow { opacity: 0.85; }
    .hl { background-size: 100% 100% !important; }
    .btn, .btn svg, .step .dot { transition: none; }
  }

/* ============================================================
   ADIÇÕES v2 — site multipágina (copy oficial)
   ============================================================ */

/* Nav: página ativa */
.nav-links a.on { color: var(--fg); background: rgba(26, 23, 18, 0.05); }

/* Hero de subpágina */
.page-hero { padding-top: clamp(7.5rem, 15vh, 10.5rem); padding-bottom: clamp(2.2rem, 4.5vw, 3.6rem); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 44% at 86% 0%, rgba(245, 197, 24, 0.15), transparent 62%); }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 4.8vw, 4rem); letter-spacing: -0.04em; line-height: 1.02; margin: 1.3rem 0 1.2rem; max-width: 21ch; text-wrap: balance; }
.page-hero .lead { margin-bottom: 2rem; }

/* Barra de prova */
/* ---------- Costura hero -> dor ----------
   Fade puro: o degrade vai do transparente (papel do hero, com os
   feixes de fundo ainda passando por baixo) ate o branco do bloco
   seguinte. Os feixes vazam do hero para dentro desta faixa e morrem
   junto com o degrade — ver .bg-paths, que desce alem do hero. */
.seam-cut {
  height: clamp(6rem, 11vw, 10rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
}

/* Frase de fecho (soco) */
.punch { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--fg); margin-top: 1.6rem; max-width: 40ch; }

/* Prosa corrida */
.prose { max-width: 66ch; display: grid; gap: 1.05rem; color: var(--fg-muted); font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.65; }
.prose strong { color: var(--fg); font-weight: 600; }

/* Lista com marcador dourado */
.checks { list-style: none; display: grid; gap: 0.85rem; margin-top: 1.8rem; max-width: 64ch; padding: 0; }
.checks li { position: relative; padding-left: 1.7rem; color: var(--fg-muted); font-size: 1rem; line-height: 1.55; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.44em; width: 10px; height: 10px; background: var(--gold); transform: skewX(-14deg); border-radius: 2px; }
.checks li strong { color: var(--fg); font-weight: 600; }

/* Grade de ofertas (Home) */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.3vw, 1.3rem); margin-top: 2.4rem; }
.offers .cell { justify-content: flex-start; }
.offers h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.price-line { font-family: var(--mono); font-size: 0.83rem; color: var(--gold-ink); font-weight: 600; margin-top: 1.05rem; letter-spacing: 0.01em; }
.offer-cta { margin-top: 1.35rem; }

/* Grade 2 colunas simples */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 1.3vw, 1.3rem); margin-top: 2.4rem; }

/* Caixa de destaque / nota honesta */
.note { border: 1px solid rgba(201, 156, 8, 0.4); background: var(--surface); border-radius: var(--r); padding: clamp(1.4rem, 2.2vw, 2rem); margin-top: 2.2rem; max-width: 76ch; box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 16px 34px -22px rgba(26, 23, 18, 0.14); }
.note h3 { font-size: 1.15rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.note p { color: var(--fg-muted); font-size: 0.97rem; line-height: 1.6; }
.note p + p { margin-top: 0.7rem; }

/* Tabelas (preços, etapas) */
.tblwrap { overflow-x: auto; margin-top: 2.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 16px 34px -22px rgba(26, 23, 18, 0.14); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 1rem 1.3rem; border-top: 1px solid var(--line); font-size: 0.94rem; line-height: 1.55; }
.tbl thead th { border-top: none; background: var(--surface-3); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
.tbl td { color: var(--fg-muted); }
.tbl tbody th, .tbl td:first-child { font-family: var(--display); font-weight: 700; color: var(--fg); font-size: 0.98rem; letter-spacing: -0.01em; }
.tbl .hi { background: linear-gradient(90deg, rgba(245, 197, 24, 0.13), transparent 80%); }

/* FAQ */
.faq { max-width: 76ch; margin-top: 1.4rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.18rem); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--gold-deep); font-size: 1.25rem; line-height: 1; transition: transform 0.25s var(--ease-out); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { color: var(--fg-muted); padding-bottom: 1.2rem; max-width: 66ch; line-height: 1.6; }

/* Banda final de CTA (reusa .rx) */
.cta-final { text-align: center; }
.cta-final .wrap { max-width: 800px; position: relative; }

/* O paragrafo do CTA em tres tempos: frase curta, pilulas numeradas
   com o que a pessoa ganha e a linha de honestidade sozinha no fim. */
.cta-final .rx-intro { margin-bottom: 1.1rem; }
.rx-knows {
  list-style: none; counter-reset: rxk;
  margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
}
.rx-knows li {
  counter-increment: rxk;
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-weight: 600; font-size: 0.95rem; color: #131210;
  padding: 0.55rem 1rem; border: 1px solid rgba(19, 18, 16, 0.3);
  border-radius: var(--r-pill); background: rgba(255, 253, 244, 0.55);
}
.rx-knows li::before {
  content: counter(rxk, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  color: rgba(19, 18, 16, 0.55); letter-spacing: 0.04em;
}
.cta-final .rx-honest { font-size: 0.95rem; color: rgba(19, 18, 16, 0.66); margin-bottom: 2.2rem; }

/* ---------- Formulario do CTA final ----------
   Envio via Netlify Forms. Campos claros sobre o dourado; o texto de
   apoio e a resposta de sucesso ficam na mesma banda. */
.rx-form { max-width: 620px; margin: 0 auto; display: grid; gap: 0.85rem; text-align: left; }
.rx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.rx-field { display: grid; gap: 0.4rem; }
.rx-field span {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(19, 18, 16, 0.68);
}
.rx-field input, .rx-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--fg);
  background: #FFFDF4; border: 1px solid rgba(19, 18, 16, 0.28); border-radius: 10px;
  padding: 0.8rem 0.95rem; box-shadow: 0 1px 2px rgba(19, 18, 16, 0.08);
}
.rx-field input::placeholder, .rx-field textarea::placeholder { color: rgba(26, 23, 18, 0.38); }
.rx-field textarea { resize: vertical; min-height: 5.6rem; }
.rx-field input:focus-visible, .rx-field textarea:focus-visible {
  outline: 3px solid rgba(19, 18, 16, 0.85); outline-offset: 1px;
}
.rx-form .btn { justify-self: center; margin-top: 0.5rem; }
.rx-form .btn:disabled { opacity: 0.6; cursor: wait; }
.rx-form-fine { font-size: 0.85rem; color: rgba(19, 18, 16, 0.62); text-align: center; margin: 0; }
/* isca anti-robo: fora da tela, invisivel para gente */
.hp-field { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rx-ok {
  max-width: 620px; margin: 0 auto; padding: clamp(1.4rem, 2.6vw, 2rem);
  background: rgba(255, 253, 244, 0.92); border: 1px solid rgba(19, 18, 16, 0.2);
  border-radius: var(--r); position: relative;
}
.rx-ok strong { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; display: block; margin-bottom: 0.4rem; }
.rx-ok p { margin: 0; color: rgba(19, 18, 16, 0.8); }
.rx-ok a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .rx-form-row { grid-template-columns: 1fr; } }
.cta-final h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 1.1rem; text-wrap: balance; }
.cta-final p { color: rgba(19, 18, 16, 0.78); font-weight: 500; font-size: clamp(0.98rem, 1.4vw, 1.14rem); max-width: 56ch; margin: 0 auto 2rem; }

/* Equipe (Sobre) */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 2.4rem; max-width: 880px; }
.tcard { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: clamp(1.4rem, 2.2vw, 2rem); display: flex; gap: 1.3rem; align-items: center; }
.tcard .tp { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-3); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.6rem; color: var(--fg-faint); text-align: center; flex-shrink: 0; padding: 0.4rem; }
.tcard h3 { font-size: 1.12rem; margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.tcard p { color: var(--fg-muted); font-size: 0.92rem; }

/* Placeholder de vídeo (Casos) */
.video-ph { margin-top: 2rem; aspect-ratio: 16 / 9; max-width: 560px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.78rem; color: var(--fg-faint); padding: 1rem; text-align: center; }

@media (max-width: 1024px) {
  .offers { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid2, .team { grid-template-columns: 1fr; }
}

/* Célula bento sem CTA oculto: não desliza no hover */
.cell.static:hover .cell-body, .cell.static:focus-within .cell-body { transform: none; }
.cell.static:hover .cell-icon, .cell.static:focus-within .cell-icon { transform: none; }

/* Parágrafos extras dentro da banda Raio-X */
.rx-copy .rx-p { color: rgba(19, 18, 16, 0.8); margin-top: 0.95rem; font-size: 0.96rem; line-height: 1.62; max-width: 56ch; }
.rx-copy .rx-p strong { color: #131210; }

/* ============================================================
   ADIÇÕES v3 — copy final + prova de tamanho (ago/2026)
   Motivo visual: o alinhavo — linha tracejada (provisória)
   que vira costura contínua (definitiva).
   ============================================================ */

/* Fonte citada de dado de terceiro: sempre pequena, sempre presente */
.fine-src { color: var(--fg-faint); font-size: 0.82rem; margin-top: 1.4rem; max-width: 64ch; }

/* ---------- Método com alinhavo: a linha tracejada vira costura ---------- */
/* A costura termina no selo da entrega — nada de linha correndo solta
   depois do ultimo ponto. */
.steps.stitch::before { background: none; height: 0; border-top: 2px dashed var(--line-2); right: calc(clamp(1rem, 2.5vw, 2.4rem) + 20px); }
.steps.stitch .step::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--gold-deep); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s var(--ease-out) 0.15s;
}
.steps.stitch .step.on::before { transform: scaleX(1); }
.steps.stitch .step:last-child::before { right: calc(clamp(1rem, 2.5vw, 2.4rem) + 20px); }
@media (max-width: 1024px) { .steps.stitch .step::before { display: none; } }

/* ---------- Tese: o miolo pronto + o seu jeito alinhavado por cima ---------- */
/* ---------- A tese: tres tempos e o desenho que fecha ----------
   O texto foi quebrado em passos numerados porque a ideia tem ordem:
   base -> corte -> resultado. O passo 03 nao tem paragrafo de proposito:
   quem explica o resultado e o diagrama logo abaixo. */
.tese .sec-sub { color: var(--fg-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; max-width: 52ch; }
.tese-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr 0.78fr;
  gap: 0; border-top: 1px solid var(--line);
}
.ts { padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.3rem, 2.2vw, 2rem) clamp(1.6rem, 2.6vw, 2.2rem) 0; position: relative; }
.ts + .ts { padding-left: clamp(1.3rem, 2.2vw, 2rem); border-left: 1px solid var(--line); }
/* O fio dourado marca o topo de cada passo e cresce quando o passo entra
   na tela — e o mesmo alinhavo do resto da pagina, so que horizontal. */
.ts::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out) 0.15s;
}
.ts + .ts::before { left: clamp(1.3rem, 2.2vw, 2rem); }
/* Sem JS o fio ja nasce inteiro; so quem tem .js (e portanto o reveal
   funcionando) ve ele crescer. */
.js .ts.reveal::before { transform: scaleX(0); }
.js .ts.reveal.in::before { transform: scaleX(1); }
.ts-n { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-ink); display: block; }
.ts h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--fg); margin: 0.85rem 0 0.6rem; }
.ts p { color: var(--fg-muted); font-size: clamp(0.94rem, 1.15vw, 1.02rem); line-height: 1.6; margin: 0; }
.ts p strong { color: var(--fg); font-weight: 600; }
/* O passo 03 aponta para o desenho em vez de repetir o que ele mostra. */
.ts-hint { font-family: var(--mono); font-size: 0.82rem; color: var(--gold-ink) !important; text-wrap: balance; }
.ts-hint b { font-weight: inherit; white-space: nowrap; }
.ts-hint span { display: inline-block; margin-left: 0.15rem; animation: tsdown 1.8s var(--ease-out) infinite; }
@keyframes tsdown { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

.tese-fig { margin: clamp(1.6rem, 2.6vw, 2.4rem) 0 0; }
.tese-fig .anat { padding: clamp(2rem, 4vw, 3.4rem); }
.tese-fig .anat-fit, .tese-fig .anat-core { padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.5rem, 2.4vw, 2rem); }
.tese-fig .anat li { font-size: 0.84rem; padding: 0.42rem 0.85rem; }
.tese-fig .anat .k { font-size: 0.72rem; margin-bottom: 0.95rem; }
.tese-fig .anat-seam span { height: 44px; }
.tese-punch { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 46ch; }
.tese-punch em { font-style: normal; color: var(--fg-faint); }
.anat {
  border: 1px solid var(--line); border-radius: var(--r); position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 8%, rgba(245, 197, 24, 0.12), transparent 55%), linear-gradient(160deg, #F2F0E9, #E9E7DF);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 40px 80px -46px rgba(26, 23, 18, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.anat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px; opacity: 0.7;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 82%);
}
.anat > * { position: relative; }
.anat .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 0.7rem; }
.anat ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; }
.anat li { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; padding: 0.3rem 0.65rem; border-radius: var(--r-sm); }
.anat-fit { border: 2px dashed rgba(201, 156, 8, 0.6); border-radius: var(--r-sm); padding: 1.15rem 1.25rem 1.25rem; background: rgba(245, 197, 24, 0.08); }
.anat-fit .k { color: var(--gold-ink); }
.anat-fit li { color: var(--fg); background: var(--surface); border: 1px dashed var(--line-2); }
.anat-seam { display: flex; justify-content: center; padding: 0.15rem 0; }
.anat-seam span { width: 2px; height: 30px; background-image: linear-gradient(180deg, var(--gold-deep) 55%, transparent 55%); background-size: 2px 8px; }
.anat-core { background: linear-gradient(165deg, var(--dark-2), var(--dark)); border: 1px solid var(--dark-line); border-radius: var(--r-sm); padding: 1.15rem 1.25rem 1.25rem; box-shadow: 0 24px 50px -30px rgba(26, 23, 18, 0.55); }
.anat-core .k { color: var(--gold); }
.anat-core li { color: var(--on-dark-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dark-line); }
.anat-cap { font-size: 0.86rem; color: var(--fg-muted); margin: 1.1rem 0 0; max-width: 44ch; }
.tese-fig .anat-cap { max-width: none; }

/* ---------- Frota: sistemas no ar (banda clara) ----------
   Era uma banda escura; virou a banda mais clara da pagina. O fundo e o
   branco-quente da paleta e cada card e uma placa branca com sombra tingida
   do marrom do texto — nada de sombra preta pura em fundo claro. Dourado
   so nos acentos: pulso do "no ar", numeros, fio de hover. */
.fleet { background: var(--bg-soft); border-block: 1px solid var(--line); padding-block: clamp(4.5rem, 8vw, 7rem); position: relative; overflow: hidden; }
.fleet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(26,23,18,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(26,23,18,0.055) 1px, transparent 1px);
  background-size: 44px 44px; opacity: 0.6;
  mask-image: radial-gradient(110% 90% at 85% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 90% at 85% 0%, #000, transparent 70%);
}
.fleet .wrap { position: relative; }
/* A frota nao e mais uma secao: e a evidencia das solucoes. So uma linha
   curta com o selo vivo apresenta o carrossel, sem divisoria nem titulo. */
.fleet-strip { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin: clamp(2.8rem, 5vw, 3.8rem) 0 1.5rem; }
.fleet-strip p { color: var(--fg-muted); font-size: 0.95rem; margin: 0; }
.fleet-live { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 0.42rem 0.9rem; }
.fleet-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 0 0 rgba(201, 156, 8, 0.4); animation: fleetpulse 2.4s infinite; }
@keyframes fleetpulse { 70% { box-shadow: 0 0 0 9px rgba(201, 156, 8, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 156, 8, 0); } }
/* Os 7 sistemas viram um carrossel de cards. A trilha rola de verdade
   (scroll nativo + snap), entao dedo, trackpad, roda do mouse e teclado
   ja funcionam sem depender de JS — os botoes sao atalho, nao a unica
   porta. */
.fleet-car { position: relative; }
/* Veu na borda direita: o corte do card ja sugere que continua, o veu
   confirma. Some quando a trilha chega ao fim. */
.fleet-car::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: clamp(2rem, 5vw, 4.5rem);
  background: linear-gradient(90deg, transparent, var(--bg-soft));
  pointer-events: none; opacity: 1; transition: opacity 0.3s var(--ease-out);
}
.fleet-car.at-end::after { opacity: 0; }
.fleet-track {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: clamp(0.85rem, 1.4vw, 1.2rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  /* respiro para o lift e a sombra do card nao serem cortados na trilha */
  padding-block: 0.5rem 1.4rem;
}
.fleet-track::-webkit-scrollbar { display: none; }
.fleet-track:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: var(--r); }
.fc { flex: 0 0 clamp(19.5rem, 27vw, 24.5rem); scroll-snap-align: start; display: flex; min-height: clamp(17.5rem, 24vw, 22rem); }
/* Card em pe: moldura da imagem em cima, texto embaixo. Nessa altura o card
   deitado virava um paredao estreito de imagem — em pe o print ganha a
   proporcao de tela que ele vai ter de verdade. */
.fc > article {
  display: flex; flex-direction: column; width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 18px 40px -28px rgba(26, 23, 18, 0.28);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.fc > article:hover {
  border-color: rgba(201, 156, 8, 0.5);
  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 26px 52px -28px rgba(26, 23, 18, 0.34);
  transform: translateY(-4px);
}
/* Moldura reservada para o print da tela. Vazia enquanto nao ha print — a
   malha da textura sem fingir conteudo. Quando chegar: <img class="fc-shot">. */
.fc-img {
  position: relative; flex: 0 0 60%; min-height: 0; align-self: stretch;
  background: linear-gradient(140deg, rgba(245, 197, 24, 0.16), transparent 62%), var(--surface-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.fc-img::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,23,18,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,23,18,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.85;
  mask-image: radial-gradient(120% 85% at 15% 0%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 85% at 15% 0%, #000, transparent 80%);
}
/* As cenas 3D tem o motivo no centro-baixo com ceu de sobra em cima: o corte
   ancora um pouco abaixo do centro para a miniatura ficar inteira no quadro. */
.fc-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.fc-n {
  position: relative; z-index: 1; display: inline-block;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--gold-ink);
  padding: 0.6rem 0.8rem;
}
.fc-txt { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; padding: clamp(1.4rem, 2.2vw, 1.9rem); }
.fc-txt h3 { color: var(--fg); font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
.fc-txt p { color: var(--fg-muted); font-size: 0.9rem; line-height: 1.55; }
.fc-loc { margin-top: 0; padding-top: 0.75rem; align-self: flex-start; font-family: var(--mono); font-size: 0.74rem; color: var(--fg-faint); white-space: nowrap; }

/* Controles: a dica diz que rola, os botoes sao o atalho. Sem autoplay —
   carrossel que anda sozinho atrapalha quem esta lendo. */
.fleet-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(0.9rem, 1.6vw, 1.3rem); }
.fleet-btns { display: flex; gap: 0.5rem; }
.fcb {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.05);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.fcb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcb:hover:not(:disabled) { border-color: rgba(201, 156, 8, 0.55); background: rgba(245, 197, 24, 0.1); color: var(--gold-ink); }
.fcb:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fcb:disabled { opacity: 0.35; cursor: default; }

.fleet-fine { color: var(--fg-faint); font-size: 0.85rem; margin-top: 1.6rem; max-width: 58ch; }
.fleet-fine a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.fleet-fine a:hover { color: var(--fg); }

/* ---------- Oferta em destaque: célula escura ---------- */
.offers .cell-dark { background: linear-gradient(165deg, var(--dark-2), var(--dark)); border-color: var(--dark-line); }
.offers .cell-dark h3 { color: var(--on-dark); }
.offers .cell-dark p { color: var(--on-dark-muted); }
.offers .cell-dark .kicker { color: var(--gold); }
.offers .cell-dark .cell-icon { stroke: var(--gold); }
.offers .cell-dark .price-line { color: var(--gold); }
.offers .cell-dark .cell-link { color: var(--gold); }
.offers .cell-dark .cell-tint { background: rgba(245, 197, 24, 0.05); }

/* ---------- Comparação em duas colunas (medo → resposta) ---------- */
.cmp.duo .cmp-row { grid-template-columns: 1fr 1.45fr; }

@media (max-width: 900px) {
  /* Em coluna unica a borda muda de vertical para horizontal: o fio
     dourado continua sendo a marca de inicio de cada passo. */
  .tese-steps { grid-template-columns: 1fr; }
  .ts { padding-right: 0; }
  .ts + .ts { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .ts + .ts::before { left: 0; }
}
@media (max-width: 560px) {
  /* No celular o desenho ja e estreito: o respiro tem que sair da moldura,
     nao do espaco que as etiquetas precisam para caber lado a lado. */
  .tese-fig .anat { padding: 1.1rem; }
  .tese-fig .anat-fit, .tese-fig .anat-core { padding: 1.1rem 1rem 1.2rem; }
  .tese-fig .anat li { font-size: 0.76rem; padding: 0.32rem 0.6rem; }
  .tese-fig .anat ul { gap: 0.4rem; }
}
@media (max-width: 680px) {
  /* No celular o card ocupa quase a tela toda; a fatia que sobra a direita
     e o que avisa que tem mais coisa para o lado. */
  .fc { flex: 0 0 84%; min-height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .steps.stitch .step::before { transition: none; }
  .fleet-live i { animation: none; }
}

/* ============================================================
   ADIÇÕES v3.1 — o design fala a língua da copy (ago/2026)
   Gramática visual: tracejado = alinhavo (provisório, o jeito
   de cada um, o medo não resolvido) · dourado sólido = costura
   (compromisso, entrega). Um só motivo, aplicado com parcimônia.
   ============================================================ */

/* ---------- Sublinhado-costura: alinhavo sempre visível, costura passa por cima ---------- */
.stitchline {
  background-image:
    linear-gradient(var(--gold-deep), var(--gold-deep)),
    repeating-linear-gradient(90deg, rgba(201, 156, 8, 0.5) 0 7px, transparent 7px 13px);
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 100% 2px, 100% 2px;
  padding-bottom: 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.js .reveal .stitchline { background-size: 0% 2px, 100% 2px; }
.reveal.in .stitchline { background-size: 100% 2px, 100% 2px; transition: background-size 0.9s var(--ease-out) 0.35s; }
/* Variante solta: fica só no alinhavo — o que nunca foi costurado de vez */
.stitchline.loose { background-image: repeating-linear-gradient(90deg, rgba(201, 156, 8, 0.5) 0 7px, transparent 7px 13px); background-size: 100% 2px; }
.js .reveal .stitchline.loose, .reveal.in .stitchline.loose { background-size: 100% 2px; transition: none; }
/* Variante tinta: para a banda dourada */
.stitchline.ink {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    repeating-linear-gradient(90deg, rgba(19, 18, 16, 0.45) 0 7px, transparent 7px 13px);
}

/* ---------- Etiqueta de preço: o preço pendurado na peça, como em loja ---------- */
.cell .price-line {
  display: flex; align-items: center; width: fit-content;
  border: 1px dashed rgba(201, 156, 8, 0.55); border-radius: 7px;
  padding: 0.5rem 0.85rem 0.5rem 1.6rem; position: relative;
  background: rgba(245, 197, 24, 0.07); margin-top: 1.15rem;
}
.cell .price-line::before {
  content: ""; position: absolute; left: 0.62rem; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid rgba(201, 156, 8, 0.65);
}
.offers .cell-dark .price-line { border-color: rgba(245, 197, 24, 0.4); background: rgba(245, 197, 24, 0.08); }
.offers .cell-dark .price-line::before { border-color: rgba(245, 197, 24, 0.65); }

/* ---------- Régua sob os números: a gente tira medidas ---------- */
.metric .num { position: relative; padding-bottom: 1rem; }
.metric .num::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 8px;
  background-image:
    linear-gradient(90deg, var(--gold-deep) 0 2px, transparent 2px),
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px);
  background-repeat: no-repeat, repeat-x;
  background-size: 2px 8px, 8px 5px;
  background-position: left bottom, left bottom;
}

/* ---------- Fio de linha nos heros internos: eco do hero da home ---------- */
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='420' viewBox='0 0 920 420' fill='none'%3E%3Cpath d='M-20 340 C 240 300, 330 120, 530 150 S 850 40, 950 100' stroke='%23C99C08' stroke-opacity='0.4' stroke-width='2' stroke-dasharray='7 9'/%3E%3Ccircle cx='530' cy='150' r='4' fill='%23C99C08' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -60px top 34px;
}
@media (max-width: 768px) { .page-hero::after { opacity: 0.55; } }

/* ---------- Bainha na banda dourada: acabamento de barra de peça ---------- */
.rx::after {
  content: ""; position: absolute; inset: 13px 0; pointer-events: none;
  border-top: 2px dashed rgba(19, 18, 16, 0.22);
  border-bottom: 2px dashed rgba(19, 18, 16, 0.22);
}

/* ---------- Linha de costura do progresso de leitura ---------- */
#seamline { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 130; pointer-events: none; }
#seamline::before {
  content: ""; position: absolute; inset: 1px 0 0;
  background-image: repeating-linear-gradient(90deg, rgba(201, 156, 8, 0.22) 0 7px, transparent 7px 14px);
  background-size: 100% 1px; background-repeat: no-repeat;
}
#seamline i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}

/* ---------- Fio da tese escorre devagar, como linha puxada ---------- */
.anat-seam span { animation: seamflow 1.2s linear infinite; }
@keyframes seamflow { to { background-position: 0 8px; } }

/* ---------- Frota: linhas ganham resposta ao toque ---------- */


/* ---------- Barra de prova: pontos viram alinhavo ---------- */

@media (prefers-reduced-motion: reduce) {
  .stitchline, .js .reveal .stitchline, .reveal.in .stitchline { background-size: 100% 2px, 100% 2px !important; transition: none !important; }
  .stitchline.loose, .js .reveal .stitchline.loose, .reveal.in .stitchline.loose { background-size: 100% 2px !important; }
  .anat-seam span { animation: none; }
  .ts::before, .js .ts.reveal::before { transition: none; transform: scaleX(1); }
  .ts-hint span { animation: none; }
  #seamline { display: none; }
  .fleet-track { scroll-behavior: auto; }
  .fc > article { transition: none; }
  .fc > article:hover { transform: none; }
  .fcb { transition: none; }
}

/* ============================================================
   ADIÇÕES v3.2 — menos texto, mais desenho (ago/2026)
   Ticker de costura, equações visuais, ícones de sintoma e
   a agulha nas seções de dor. Tudo na mesma gramática.
   ============================================================ */

.symptom { position: relative; }

/* ---------- A agulha nas seções de dor: o fio ainda solto ---------- */
.pain { position: relative; overflow: hidden; }
.pain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='420' viewBox='0 0 760 420' fill='none'%3E%3Cpath d='M-30 390 C 180 350, 260 200, 430 230 S 655 155, 701 216' stroke='%23C99C08' stroke-opacity='0.32' stroke-width='2' stroke-dasharray='7 9'/%3E%3Cline x1='688' y1='232' x2='754' y2='196' stroke='%23C99C08' stroke-opacity='0.5' stroke-width='3'/%3E%3Ccircle cx='699' cy='226' r='4.5' stroke='%23C99C08' stroke-opacity='0.5' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -30px bottom 18px;
}
@media (max-width: 768px) { .pain::after { opacity: 0.45; } }

/* ---------- A conta, desenhada: equação em vez de parágrafo ---------- */
.math { margin-top: 2.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 16px 36px -26px rgba(26, 23, 18, 0.14); }
.mrow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem clamp(1.2rem, 3vw, 2.8rem);
  align-items: baseline; padding: clamp(1.15rem, 2.1vw, 1.6rem) clamp(1.2rem, 2.4vw, 2rem);
}
.mrow + .mrow { border-top: 2px dashed var(--line-2); }
.mrow .m-t { color: var(--fg-muted); font-size: 0.96rem; line-height: 1.5; }
.mrow .m-op { font-family: var(--display); font-weight: 800; color: var(--gold-deep); font-size: 1.5rem; line-height: 1; }
.mrow .m-r { font-family: var(--mono); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; }
.mrow .m-r small { font-size: 0.78rem; color: var(--fg-faint); font-weight: 500; margin-left: 0.4rem; letter-spacing: 0; }
@media (max-width: 640px) {
  .mrow { grid-template-columns: 1fr; }
  .mrow .m-op { display: none; }
  .mrow .m-r { white-space: normal; }
}

/* ============================================================
   ADIÇÕES v3.3 — elementos garimpados no 21st.dev (border beam,
   spotlight card, shimmer), portados para vanilla na gramática
   do alinhavo (ago/2026)
   ============================================================ */

/* ---------- Fio na borda: uma linha dourada costura o card destaque ---------- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cell.thread::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--beam),
    transparent 0deg 268deg,
    rgba(245, 197, 24, 0.05) 288deg,
    rgba(245, 197, 24, 0.55) 330deg,
    var(--gold) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beamspin 7s linear infinite;
}
@keyframes beamspin { to { --beam: 360deg; } }

/* ---------- Luz de bancada: o brilho segue o ponteiro sobre os cards ---------- */
@media (hover: hover) and (pointer: fine) {
  .cell .cell-tint {
    background:
      radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
        rgba(245, 197, 24, 0.13), rgba(245, 197, 24, 0.04) 45%, transparent 70%),
      rgba(26, 23, 18, 0.02);
  }
  .offers .cell-dark .cell-tint {
    background:
      radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
        rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05) 45%, transparent 70%);
  }
}

/* ---------- Brilho que corre no botão final: reflexo de aço da agulha ---------- */
.cta-final .btn-ink { position: relative; overflow: hidden; }
.cta-final .btn-ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 50%, transparent 68%);
  transform: translateX(-130%);
}
.cta-final .btn-ink:hover::before { animation: sheen 0.85s var(--ease-out); }
@keyframes sheen { to { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .cell.thread::after { animation: none; --beam: 320deg; opacity: 0.5; }
  .cta-final .btn-ink:hover::before { animation: none; }
}

/* ============================================================
   ADIÇÕES v4 — mais curto, mais desenhado, mais firme (ago/2026)
   ============================================================ */

/* ---------- Ferramentas do ateliê nos passos do método ---------- */
.step .st-ic {
  /* medalhao com fundo da pagina: abre um vao na costura em vez de
     deixar a linha atravessar o desenho */
  position: absolute; top: -13px; right: clamp(1rem, 2.5vw, 2.4rem);
  width: 40px; height: 40px; padding: 8px;
  background: var(--bg); border: 1px dashed rgba(201, 156, 8, 0.5); border-radius: 50%;
  fill: none; stroke: var(--gold-deep); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 768px) { .step .st-ic { right: 0.2rem; } }

/* ============================================================
   ADIÇÕES v5 — passe de design: correções dos prints + seleção
   curada do 21st.dev portada para vanilla na gramática do
   alinhavo (ago/2026). Fontes: Blur Fade (Magic UI), Timeline /
   Tracing Beam e 3D Card (Aceternity), hover-underline.
   Navbar e hero da home ficam intocados por regra.
   ============================================================ */

/* ---------- Correção: etiqueta de preço nunca quebra no meio do valor ---------- */
.cell .price-line { flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.cell .price-line span { white-space: nowrap; }
.cell .price-line .pl-sep { color: rgba(201, 156, 8, 0.75); }
.offers .cell-dark .price-line .pl-sep { color: rgba(245, 197, 24, 0.6); }

/* ---------- Correção: CTAs das três ofertas ancorados na base ---------- */
.offers .cell-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.offers .cell .price-line { margin-bottom: 1.35rem; }
.offers .offer-cta { margin-top: auto; align-self: flex-start; }

/* ---------- Blur fade: os blocos chegam em foco (hero da home fora do escopo) ---------- */
.js .reveal:not(.hero *) {
  filter: blur(7px);
  transition-property: opacity, transform, filter;
}
.js .reveal.in:not(.hero *) { filter: blur(0); }

/* ---------- Sweep do marcador: o destaque dourado é pintado na frente do leitor ---------- */
.pain h2 em, .case-body .big em { background-repeat: no-repeat; background-size: 100% 100%; }
.js .pain h2.reveal em, .js .case-body.reveal .big em { background-size: 0% 100%; }
.pain h2.reveal.in em, .case-body.reveal.in .big em {
  background-size: 100% 100%;
  transition: background-size 0.6s var(--ease-out) 0.4s;
}

/* ---------- Sublinhado que cresce: textlinks e rodapé (nunca a navbar) ---------- */
.textlink, .foot-col a {
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px;
}
.textlink { transition: color 0.2s var(--ease-out), gap 0.2s var(--ease-out), background-size 0.3s var(--ease-out); }
.textlink:hover, .textlink:focus-visible { background-size: 100% 1.5px; }
.foot-col a { width: fit-content; background-image: linear-gradient(var(--gold), var(--gold)); transition: color 0.2s var(--ease-out), background-size 0.3s var(--ease-out); }
.foot-col a:hover, .foot-col a:focus-visible { background-size: 100% 1.5px; }

/* ---------- FAQ: respostas deslizam em vez de pular (progressivo, zero JS) ---------- */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Comparações respondem ao leitor ---------- */
@media (hover: hover) {
  .cmp-row { transition: background-color 0.25s var(--ease-out); }
  .cmp-row:not(.head):hover { background-color: rgba(245, 197, 24, 0.06); }
}

/* ---------- Linha do tempo costurada (Método, sob-medida): o scroll é a agulha ---------- */
.tline { position: relative; margin-top: 2.6rem; max-width: 860px; }
.tline-rail {
  position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(201, 156, 8, 0.45) 0 7px, transparent 7px 13px);
}
.tline-rail i {
  position: absolute; left: -0.5px; top: 0; width: 3px;
  height: calc(var(--tp, 0) * 100%);
  background: linear-gradient(180deg, var(--gold-deep), var(--gold));
  border-radius: 2px; box-shadow: 0 0 12px rgba(245, 197, 24, 0.4);
}
.tline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8rem, 3.4vw, 2.8rem); }
.tline-item { position: relative; padding-left: clamp(3.4rem, 6vw, 4.4rem); }
.tline-num {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 0.82rem; color: var(--gold-ink);
  background: var(--surface); border: 1.5px dashed rgba(201, 156, 8, 0.6);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
    color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.tline-item.sewn .tline-num { background: var(--gold); border: 1.5px solid var(--gold-deep); color: var(--ink); transform: scale(1.06); }
.tline-t { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.02em; margin: 0.2rem 0 0.5rem; }
.tline-p { color: var(--fg-muted); font-size: 0.97rem; line-height: 1.6; max-width: 62ch; }
.tline-out {
  margin-top: 0.9rem; width: fit-content; max-width: 100%;
  border: 1px dashed rgba(201, 156, 8, 0.5); border-radius: var(--r-sm);
  background: rgba(245, 197, 24, 0.07); padding: 0.6rem 0.95rem;
  font-size: 0.9rem; line-height: 1.5; color: var(--fg-muted);
  transition: border-color 0.4s var(--ease-out), border-style 0.4s var(--ease-out);
}
.tline-item.sewn .tline-out { border-style: solid; border-color: rgba(201, 156, 8, 0.65); }
.tline-cap { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; margin-bottom: 0.25rem; }

/* ---------- Movimento reduzido: tudo acima tem estado final digno ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.hero *) { filter: none !important; }
  .js .pain h2.reveal em, .js .case-body.reveal .big em { background-size: 100% 100% !important; transition: none; }
  .textlink, .foot-col a { transition: color 0.2s var(--ease-out); }
  .faq details::details-content { transition: none; }
  .cmp-row { transition: none; }
  .tline-rail i { height: 100%; }
  .tline-num, .tline-out { transition: none; }
}


/* ==== v6 · Nossas solucoes =================================================
   Classes proprias (.sol-*), sem herdar de .cell. A .cell acumulou regras
   espalhadas por dez pontos do arquivo e qualquer ajuste aqui quebraria
   outra secao. Esta secao e autocontida: mexer nela nao mexe em mais nada.

   A decisao de layout: os tres cards NAO sao iguais. Iguais, eles empatam e
   o olho nao sabe por onde comecar — foi essa a critica. O Sob Medida ocupa
   a largura inteira e vem escuro; os dois sistemas prontos dividem a linha
   de cima. A leitura vira: escolhe entre dois -> ou vai pro terceiro. A
   ordem esta no layout, nao so no texto.
   ========================================================================= */

.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sol-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 12px 26px -20px rgba(26,23,18,0.12);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.sol-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(26,23,18,0.05), 0 34px 55px -28px rgba(26,23,18,0.20);
}

/* Moldura da imagem. Fica visivelmente reservada e vazia enquanto nao ha
   print — uma area chapada mentiria menos que uma foto de banco de imagem,
   e deixa obvio onde a tela real vai entrar. A proporcao ja e a de um
   print de sistema (16:10), entao a troca nao mexe no layout. */
.sol-img {
  position: relative;
  /* 16/10 e a proporcao de um print, mas 16/10 numa coluna de 600px vira
     380px de nada. Enquanto a moldura esta vazia ela fica baixa: o card
     precisa caber na tela com o texto junto. Quando o print entrar, e so
     subir para 16/10 — a regra fica documentada aqui. */
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(140deg, rgba(245,197,24,0.07), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: flex-start; justify-content: flex-start;
}
/* Malha tecnica de fundo: da textura sem fingir ser conteudo. */
.sol-img::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.7;
  mask-image: radial-gradient(120% 90% at 15% 0%, #000, transparent 72%);
}
/* Quando o print chegar, e so por <img class="sol-shot"> dentro da moldura. */
.sol-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Moldura das releituras em wireframe dos sistemas. */
.sol-img-shot { aspect-ratio: 16 / 9; }
.sol-img-shot .sol-num { margin: 0.55rem 0 0 0.65rem; padding: 0.3rem 0.55rem; background: rgba(255, 255, 255, 0.9); border-radius: var(--r-pill); box-shadow: 0 1px 4px rgba(26, 23, 18, 0.1); }

/* O numero e a ordem de leitura em forma visivel: 01 -> 02 -> 03. So
   existe porque as tres solucoes tem mesmo uma sequencia (dois prontos,
   depois o sob medida). Nao e enfeite numerado. */
.sol-num {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--gold-ink);
  padding: 0.65rem 0.85rem;
}

.sol-txt {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(1.4rem, 2.2vw, 2rem);
}
.sol-txt h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.03em; margin-bottom: 0.6rem;
}
.sol-txt p { color: var(--fg-muted); font-size: 0.96rem; line-height: 1.6; max-width: 42ch; }

.sol-kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-ink); font-weight: 600;
  margin-bottom: 0.85rem;
}

.sol-preco {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  color: var(--gold-ink);
  margin-top: 1.2rem; margin-bottom: 1.4rem;
  padding-left: 0.7rem; border-left: 2px solid rgba(201,156,8,0.4);
}
.sol-preco span { white-space: nowrap; }
.sol-sep { color: rgba(201,156,8,0.7); }

/* O link vai pro rodape do card: nos tres cards ele cai na mesma altura,
   mesmo com descricoes de tamanhos diferentes. Alinhamento e o que faz a
   grade parecer resolvida em vez de montada no olho. */
.sol-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 600; color: var(--fg);
  transition: gap 0.25s var(--ease-out);
}
.sol-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
.sol-link:hover svg { transform: translateX(3px); }

/* --- 03 · Sob Medida: largo e escuro ------------------------------------
   Ocupa a linha inteira e inverte o tema. Peso visual = peso da oferta.
   Deitado, a imagem fica ao lado do texto em vez de acima: uma linha de
   leitura horizontal fecha a secao depois das duas colunas de cima. */
.sol-card-forte {
  grid-column: 1 / -1;
  flex-direction: row; align-items: stretch;
  background: linear-gradient(165deg, var(--dark-2), var(--dark));
  border-color: var(--dark-line);
}
.sol-card-forte .sol-img {
  flex: 0 0 42%;
  aspect-ratio: auto;
  border-bottom: 0; border-right: 1px solid var(--dark-line);
  background: linear-gradient(140deg, rgba(245,197,24,0.10), transparent 60%), rgba(0,0,0,0.2);
}
.sol-card-forte .sol-img::before {
  background-image:
    linear-gradient(var(--dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-line) 1px, transparent 1px);
}
.sol-card-forte .sol-num { color: var(--gold); }
.sol-card-forte .sol-txt { justify-content: center; padding: clamp(1.8rem, 3vw, 2.8rem); }
.sol-card-forte .sol-txt h3 { color: var(--on-dark); font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.sol-card-forte .sol-txt p { color: var(--on-dark-muted); max-width: 46ch; }
.sol-card-forte .sol-kicker { color: var(--gold); }
.sol-card-forte .sol-preco { color: var(--gold); border-left-color: rgba(245,197,24,0.45); }
.sol-card-forte .sol-sep { color: rgba(245,197,24,0.6); }
.sol-card-forte .sol-link { color: var(--gold); }
.sol-card-forte:hover { border-color: rgba(245,197,24,0.28); }

@media (max-width: 900px) {
  .sol-grid { grid-template-columns: 1fr; }
  /* No celular o card largo volta a ser empilhado como os outros: em coluna
     unica, deitado ele espremeria imagem e texto ate os dois sumirem. */
  .sol-card-forte { flex-direction: column; }
  .sol-card-forte .sol-img { flex: none; aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid var(--dark-line); }
}

@media (prefers-reduced-motion: reduce) {
  .sol-card, .sol-link, .sol-link svg { transition: none; }
  .sol-card:hover { transform: none; }
  .sol-link:hover svg { transform: none; }
}

/* ---------- Faixa de logos de clientes ----------
   Tres clientes reais (arquivos em assets/logos/), em fileira parada —
   com poucas logos, carrossel e teatro. Placa branca porque duas das
   artes vem com fundo branco embutido: no branco elas somem na placa.
   Logos em cinza para nenhuma marca gritar mais que a outra; a cor
   volta no hover. */
/* Titulo a esquerda, grande — e o titulo que abre a faixa, nao uma legenda. */
.logos .lg-title {
  max-width: 22ch; text-align: left;
  margin: 0;
}
.logos .lg-head { margin: 0 0 clamp(2rem, 3.6vw, 2.8rem); }
/* Carrossel em loop continuo: duas fileiras identicas andando para a
   esquerda; quando a primeira sai inteira, a copia esta no mesmo lugar
   e o loop fecha sem emenda. As bordas somem em fade (mask), entao a
   fileira parece continuar alem da tela para os dois lados. */
.lg-carousel {
  --lg-gap: clamp(0.5rem, 0.8vw, 0.75rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lg-track { display: flex; width: max-content; animation: lg-slide 42s linear infinite; }
.lg-carousel:hover .lg-track { animation-play-state: paused; }
@keyframes lg-slide { to { transform: translateX(-50%); } }
.lg-row {
  list-style: none; padding: 0 var(--lg-gap, 0.6rem) 0 0; margin: 0;
  display: flex; gap: var(--lg-gap, 0.6rem);
}
.lg-item {
  flex: none;
  width: clamp(11rem, 15vw, 14rem);
  min-height: clamp(7rem, 10.5vw, 9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.8vw, 22px);
  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 1.7vw, 1.5rem);
}
.lg-item img {
  max-width: min(13rem, 74%); max-height: clamp(3.1rem, 5vw, 4.3rem);
  width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.8;
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
/* Artes altas ou com margem branca embutida ganham folga de altura
   para a marca render no mesmo peso visual das outras */
.lg-item.lg-tall img { max-height: clamp(4.6rem, 7.2vw, 6.2rem); }
.lg-item:hover img { filter: none; opacity: 1; }
/* Placa fantasma no fim da fileira: mesma linguagem dos circulos
   tracejados das bandeiras. Sugere que a lista continua sem inventar
   logo de cliente — quem nao autorizou nao aparece. */
.lg-item.lg-ghost {
  background: transparent; border: 1px dashed #CFC9BB;
  box-shadow: none; opacity: 0.75;
}
.lg-ghost span { font-family: var(--mono); font-size: 1.4rem; color: var(--fg-faint); line-height: 1; }
.logos .lg-fine { font-size: 0.86rem; color: var(--fg-faint); margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0; max-width: 56ch; }
.logos .lg-fine a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.logos .lg-fine a:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .lg-item img { transition: none; }
  .lg-track { animation: none; width: auto; }
  .lg-row { flex-wrap: wrap; padding-right: 0; }
  .lg-track .lg-row[aria-hidden="true"] { display: none; }
  .lg-carousel { -webkit-mask-image: none; mask-image: none; }
  .lg-item { flex: 1 1 10.5rem; width: auto; }
}

/* ---------- Bandeiras Brasil + Portugal ----------
   Pilha de icones redondos estilo avatar ao lado do titulo. Circulos
   fantasma tracejados atras sugerem que a fileira de paises continua;
   Brasil e Portugal ficam na frente, em cor viva com anel branco. */
.lg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem 2.5rem; flex-wrap: wrap; }
.lg-paises { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.35rem; }
.lg-orbs { display: flex; align-items: center; }
.lg-orb { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.lg-orb + .lg-orb { margin-left: -14px; }
.lg-orb-ghost { background: var(--surface); border: 1px dashed var(--line-2); }
.lg-orb-ghost:nth-child(1) { opacity: 0.35; }
.lg-orb-ghost:nth-child(2) { opacity: 0.5; }
.lg-orb-ghost:nth-child(3) { opacity: 0.65; }
.lg-orb-flag {
  position: relative;
  box-shadow: 0 0 0 3px var(--bg), 0 5px 14px rgba(26, 23, 18, 0.18);
  transition: transform 0.3s var(--ease-out);
}
/* Bandeiras oficiais (retangulares) recortadas no circulo. No recorte de
   Portugal, a posicao puxa para a esquerda para centralizar o brasao. */
.lg-orb-flag { overflow: hidden; }
.lg-orb-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-orb-pt img { object-position: 20% 50%; }
.lg-paises:hover .lg-orb-flag { transform: translateY(-3px); }
.lg-paises:hover .lg-orb-flag:last-child { transition-delay: 0.05s; }
.lg-paises-label { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .lg-orb-flag { transition: none; }
  .lg-paises:hover .lg-orb-flag { transform: none; }
}

/* ---------- Dor, reorganizada: custo destacado em cada sintoma + fechamento com o numero do Sebrae ---------- */
.symptom .s-out { color: var(--fg); font-weight: 600; font-size: 0.96rem; margin-top: 0.8rem; }
.symptom .s-out::before { content: ""; display: block; width: 26px; border-top: 2px dashed rgba(201, 156, 8, 0.55); margin-bottom: 0.6rem; }
.pain-close {
  margin-top: 2.8rem; padding-top: 2.2rem; border-top: 1px solid var(--line-2);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
}
.pain-close .punch { margin-top: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: none; }
.pain-close .punch em { display: block; width: max-content; margin-top: 0.15em; }
.pain-close .punch em { font-style: normal; background: linear-gradient(180deg, transparent 14%, var(--gold) 14%, var(--gold) 90%, transparent 90%); padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tally { display: flex; gap: 7px; margin-bottom: 0.85rem; }
.tally i { width: 19px; height: 26px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); }
.tally i.on { background: var(--gold); border-color: var(--gold-deep); }
.stat-t { color: var(--fg-muted); font-size: 0.98rem; line-height: 1.55; max-width: 36ch; }
.stat-t b { color: var(--fg); }
.stat-sebrae .fine-src { margin-top: 0.55rem; }
.js .stat-sebrae.reveal .tally i { opacity: 0; transform: translateY(7px); }
.js .stat-sebrae.reveal.in .tally i { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.stat-sebrae.reveal.in .tally i:nth-child(2) { transition-delay: 0.07s; }
.stat-sebrae.reveal.in .tally i:nth-child(3) { transition-delay: 0.14s; }
.stat-sebrae.reveal.in .tally i:nth-child(4) { transition-delay: 0.21s; }
.stat-sebrae.reveal.in .tally i:nth-child(5) { transition-delay: 0.34s; }
@media (max-width: 768px) {
  .pain-close { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stat-sebrae.reveal .tally i { opacity: 1; transform: none; transition: none; }
}

/* ---------- Vinhetas da dor: cada sintoma abre com um desenho, nao com paragrafo ---------- */
.pain .pain-lead { margin: 1.7rem 0 2.8rem; }
.sy-viz { position: relative; height: 128px; margin-bottom: 1.4rem; }

/* 01 · duas planilhas, dois totais que nao batem */
.sy-sheets .sheet {
  position: absolute; top: 6px; left: 0; width: 56%; max-width: 152px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 0.6rem 0.65rem 0.5rem; box-shadow: 0 10px 20px -14px rgba(26, 23, 18, 0.3);
}
.sy-sheets .sheet i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); margin-bottom: 6px; }
.sy-sheets .sheet .i-half { width: 60%; }
.sy-sheets .sheet b { display: block; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--fg); border-top: 1px dashed var(--line-2); padding-top: 0.4rem; margin-top: 0.1rem; }
.sy-sheets .sh-b { left: auto; right: 0; top: 32px; transform: rotate(2deg); }
.sy-sheets .sy-neq {
  position: absolute; left: 50%; top: 48px; transform: translateX(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; z-index: 1;
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: 1rem;
  border-radius: 50%; border: 2px solid var(--bg);
}

/* 02 · as perguntas chegam; a resposta esta sempre sendo digitada por voce */
.sy-chat { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding-top: 4px; }
.sy-chat .bub {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px 11px 11px 4px;
  padding: 0.38rem 0.7rem; font-size: 0.79rem; color: var(--fg-muted);
  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.05);
}
.sy-chat .bub-you {
  align-self: flex-end; display: inline-flex; gap: 4px; align-items: center;
  border-radius: 11px 11px 4px 11px; padding: 0.62rem 0.78rem;
  background: rgba(245, 197, 24, 0.3); border-color: rgba(201, 156, 8, 0.35);
}
.sy-chat .bub-you i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink); opacity: 0.35; animation: sytype 1.2s infinite; }
.sy-chat .bub-you i:nth-child(2) { animation-delay: 0.18s; }
.sy-chat .bub-you i:nth-child(3) { animation-delay: 0.36s; }
@keyframes sytype { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* 03 · o mes vendeu bem; a barra que importa e uma incognita */
.sy-chart { display: flex; align-items: flex-end; gap: 9px; padding: 4px 2px 0; }
.sy-chart i {
  flex: 1; max-width: 36px; height: var(--h);
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.65), rgba(245, 197, 24, 0.24));
  border: 1px solid rgba(201, 156, 8, 0.35); border-radius: 5px 5px 2px 2px;
}
.sy-chart .bar-q {
  flex: 1; max-width: 36px; height: 94%; display: grid; place-items: center;
  border: 2px dashed var(--line-2); border-radius: 5px 5px 2px 2px;
  color: var(--fg-faint); font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(26, 23, 18, 0.045) 6px 12px);
}

/* entrada das vinhetas junto com o reveal do sintoma */
.js .symptom.reveal :is(.sheet, .bub, .sy-neq) { opacity: 0; }
.js .symptom.reveal .sheet { transform: translateY(10px); }
.js .symptom.reveal .sh-b { transform: translateY(10px) rotate(2deg); }
.js .symptom.reveal .sy-neq { transform: translateX(-50%) scale(0.4); }
.js .symptom.reveal .bub { transform: translateY(6px); }
.js .symptom.reveal .sy-chart i { transform: scaleY(0); transform-origin: bottom; }
.js .symptom.reveal.in :is(.sheet, .bub, .sy-neq) { opacity: 1; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.js .symptom.reveal.in .sheet { transform: none; }
.js .symptom.reveal.in .sh-b { transform: rotate(2deg); transition-delay: 0.12s; }
.js .symptom.reveal.in .sy-neq { transform: translateX(-50%) scale(1); transition-delay: 0.3s; }
.js .symptom.reveal.in .bub { transform: none; }
.js .symptom.reveal.in .bub:nth-child(2) { transition-delay: 0.14s; }
.js .symptom.reveal.in .bub-you { transition-delay: 0.3s; }
.js .symptom.reveal.in .sy-chart i { transform: none; transition: transform 0.65s var(--ease-out); }
.js .symptom.reveal.in .sy-chart i:nth-child(2) { transition-delay: 0.08s; }
.js .symptom.reveal.in .sy-chart i:nth-child(3) { transition-delay: 0.16s; }
.js .symptom.reveal.in .sy-chart i:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js .symptom.reveal :is(.sheet, .bub, .sy-neq, .sy-chart i) { opacity: 1; transform: none; transition: none; animation: none; }
  .js .symptom.reveal .sh-b, .js .symptom.reveal.in .sh-b { transform: rotate(2deg); }
  .js .symptom.reveal .sy-neq, .js .symptom.reveal.in .sy-neq { transform: translateX(-50%); }
  .sy-chat .bub-you i { animation: none; opacity: 0.7; }
}