/* =====================================================================
   RocketApps — skin do template da CASA (`rocketapps`), fora do catálogo.
   Gerado de `docs/design/css/ra.css` (pacote de design de 29.10.2026):
   blocos "SÓ PARA O CANVAS" removidos, o grão embutido como data URI e os
   dois blocos ao final acrescentados aqui (base do documento e movimento).
   Ao mexer no desenho, mexa lá e traga para cá.

   Esta skin existe SÓ na casca Node: o template da casa não é vendido e não
   roda na hospedagem de ninguém, então não tem espelho em client-php — a
   regra de paridade PHP↔Node vale para o que o cliente recebe.
   ===================================================================== */
:root{
  /* — Escuros: grafite levemente esverdeado (matiz ~150°, croma baixíssimo) */
  --bg:       #0b0d0c;  /* padrão   · grafite + grão */
  --bg2:      #0e1311;  /* alternado· carbono frio + quadrícula 48px */
  --bg3:      #050706;  /* escuro   · vácuo, chapado, sem textura */
  --surface:  #141917;  /* placas, linhas destacadas, campos */
  --surface2: #1b211f;  /* hover de placa */
  --line:     #232a27;  /* fios 1px */
  --line2:    #36403c;  /* fios fortes, contorno de botão secundário */
  --line-field: #5e6a66; /* contorno de campo e checkbox: 3:1 sobre os 3 fundos (WCAG 1.4.11) */
  --grid:     rgba(242,244,240,.035);

  /* — Tinta */
  --ink:   #f2f4f0;  /* 17.6:1 sobre --bg */
  --ink2:  #c4cbc6;  /* 11.8:1 */
  --muted: #8d9692;  /*  6.4:1 — piso para texto miúdo */

  /* — Sinal (verde só onde há sinal) */
  --brand:      #3DDC84;  /* 10.9:1 sobre --bg — passa como texto */
  --brand-hi:   #6ff0a6;  /* hover do primário */
  --brand-ink:  #04140b;  /* texto SOBRE o verde (10.6:1). Branco sobre verde = 1.8:1, proibido */
  --brand-line: rgba(61,220,132,.42);
  --brand-wash: rgba(61,220,132,.07);

  /* — Erro: quente, não vermelho puro (9.4:1) */
  --danger:      #ff9a76;
  --danger-line: rgba(255,154,118,.55);

  --focus: #f2f4f0;

  /* — Famílias */
  --f-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* — Espaço (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* — Raio: três valores, cada um com papel */
  --r0:0;    /* seções, linhas, réguas */
  --r1:2px;  /* botões, campos, etiquetas */
  --r2:6px;  /* capturas de tela / molduras de material */

  --max: 1280px;
  --gut: clamp(16px, 4vw, 48px);

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 160ms;
  --t-med: 320ms;
}

/* ---------- base ---------- */
.ra, .ra *{ box-sizing:border-box; }
.ra{
  margin:0; background:var(--bg); color:var(--ink);
  font: 400 17px/1.6 var(--f-sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ra h1,.ra h2,.ra h3,.ra h4,.ra p,.ra ul,.ra ol,.ra dl,.ra dd,.ra figure{ margin:0; }
.ra ul,.ra ol{ padding:0; list-style:none; }
.ra img{ display:block; max-width:100%; }
.ra a{ color:inherit; }
.ra ::selection{ background:var(--brand); color:var(--brand-ink); }

/* ---------- seção + fundos ---------- */
.s{ position:relative; isolation:isolate; container-type:inline-size; background:var(--bg); color:var(--ink); overflow:clip; }
.s--padrao{ background-color:var(--bg); }
.s--padrao::before{ /* grão: SVG 128×128, ~0,4 KB, repetido */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.9%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22128%22%20height%3D%22128%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E"); background-size:128px 128px; opacity:.07; mix-blend-mode:screen;
}
.s--alternado{
  background-color:var(--bg2);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
}
.s--escuro{ background-color:var(--bg3); }

.wrap{ max-width:calc(var(--max) + 2*var(--gut)); margin-inline:auto; padding:var(--s10) var(--gut); }
.wrap--tight{ padding-block:var(--s9); }
@container (max-width: 860px){ .wrap{ padding-block:72px; } .wrap--tight{ padding-block:56px; } }

/* grade de 12 */
.g12{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--s5); row-gap:var(--s7); }
@container (max-width: 860px){ .g12{ grid-template-columns:minmax(0,1fr); row-gap:var(--s6); } .g12 > *{ grid-column:1 / -1 !important; } }

/* ---------- régua de seção (assinatura) ----------
   código de peça fixo por TIPO de seção, não por posição:
   RA·HERO RA·SRV RA·PRC RA·PRT RA·TXT RA·PLN RA·CTT */
.rule{ display:flex; align-items:center; gap:var(--s4); font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rule__code{ color:var(--brand); white-space:nowrap; }
.rule__label{ color:var(--ink2); }
.rule__line{ flex:1 1 40px; height:1px; background:var(--line); }
.rule__meta{ white-space:nowrap; }
@container (max-width: 560px){ .rule__meta{ display:none; } }

/* ---------- tipografia ---------- */
.t-d{ font:500 clamp(38px, 8.4cqi, 116px)/.92 var(--f-sans); letter-spacing:-.045em; text-wrap:balance; }
.t-h2{ font:500 clamp(32px, 4.6cqi, 62px)/1 var(--f-sans); letter-spacing:-.035em; text-wrap:balance; }
.t-h3{ font:500 clamp(22px, 2.2cqi, 30px)/1.12 var(--f-sans); letter-spacing:-.02em; }
.t-h4{ font:500 20px/1.25 var(--f-sans); letter-spacing:-.01em; }
.t-lead{ font:400 clamp(18px, 1.55cqi, 21px)/1.45 var(--f-sans); color:var(--ink2); text-wrap:pretty; }
.t-body{ font:400 17px/1.6 var(--f-sans); color:var(--ink2); text-wrap:pretty; }
.t-sm{ font:400 14px/1.5 var(--f-sans); color:var(--ink2); }
.t-mono{ font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.t-data{ font:400 14px/1.5 var(--f-mono); color:var(--ink2); }
.t-num{ font:500 clamp(36px, 3.8cqi, 54px)/1 var(--f-sans); letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.dot{ color:var(--brand); }
.ink{ color:var(--ink); } .ink2{ color:var(--ink2); } .muted{ color:var(--muted); } .brand{ color:var(--brand); }
@container (max-width: 860px){ .t-body{ font-size:16px; } }

/* ---------- marca ---------- */
.wm{ font:500 22px/1 var(--f-sans); letter-spacing:-.03em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wm b{ font-weight:700; }
.wm i{ font-style:normal; color:var(--brand); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:48px; padding:0 var(--s5); border:0; border-radius:var(--r1);
  font:500 16px/1.1 var(--f-sans); letter-spacing:-.005em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform 80ms var(--ease);
}
.btn .arw{ display:inline-block; font-family:var(--f-mono); font-weight:400; transition:transform var(--t-fast) var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ min-height:40px; padding:0 var(--s4); font-size:15px; }
.btn--pri{ background:var(--brand); color:var(--brand-ink); }
.btn--pri:hover{ background:var(--brand-hi); }
.btn--sec{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); }
.btn--sec:hover{ box-shadow:inset 0 0 0 1px var(--ink2); background:var(--surface); }
.btn[disabled], .btn[aria-disabled="true"]{ background:var(--surface); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); cursor:not-allowed; transform:none; }
.btn[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"] .arw{ display:none; }
.btn .spin{ width:14px; height:14px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ra-spin .7s linear infinite; }
@keyframes ra-spin{ to{ transform:rotate(360deg); } }

/* link de texto (CTA secundário e links em prosa) */
.lnk{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--line2); text-underline-offset:6px; transition:text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lnk:hover{ text-decoration-color:var(--brand); }
.lnk--cta{ display:inline-flex; align-items:center; gap:var(--s2); min-height:48px; font:500 16px/1.2 var(--f-sans); }
.lnk--cta .arw{ font-family:var(--f-mono); transition:transform var(--t-fast) var(--ease); }
.lnk--cta:hover .arw{ transform:translateX(4px); }

/* foco por teclado: anel de tinta, nunca verde (o verde some sobre o botão verde) */
.ra :focus{ outline:none; }
.ra :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r1); }

/* ---------- etiqueta ---------- */
.tag{ display:inline-flex; align-items:center; gap:var(--s2); padding:4px 8px; border-radius:var(--r1); box-shadow:inset 0 0 0 1px var(--line2); font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); white-space:nowrap; }
.tag--sig{ box-shadow:inset 0 0 0 1px var(--brand-line); color:var(--brand); }
.tag--sig::before{ content:""; width:6px; height:6px; background:var(--brand); }

/* ---------- navegação ---------- */
.nav{ position:relative; z-index:10; background:var(--bg3); border-bottom:1px solid var(--line); container-type:inline-size; }
.nav__in{ max-width:calc(var(--max) + 2*var(--gut)); margin-inline:auto; padding:0 var(--gut); min-height:72px; display:flex; align-items:center; gap:var(--s6); }
.nav__links{ display:flex; gap:var(--s5); margin-right:auto; }
.nav__a{ position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--ink2); text-decoration:none; font:400 15px/1 var(--f-sans); transition:color var(--t-fast) var(--ease); }
.nav__a:hover{ color:var(--ink); }
.nav__a[aria-current="page"], .nav__a[aria-current="true"]{ color:var(--ink); }
.nav__a[aria-current="page"]::after, .nav__a[aria-current="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:var(--brand); }
.nav__lang{ display:flex; gap:2px; font:500 12px/1 var(--f-mono); letter-spacing:.06em; }
.nav__lang a, .nav__lang span{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; color:var(--muted); text-decoration:none; border-radius:var(--r1); }
.nav__lang a:hover{ color:var(--ink); }
.nav__lang a[aria-current="true"], .nav__lang span[aria-current="true"]{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); }
.nav__side{ display:flex; align-items:center; gap:var(--s5); }
.nav__burger{ display:none; width:44px; height:44px; border:0; background:transparent; color:var(--ink); border-radius:var(--r1); box-shadow:inset 0 0 0 1px var(--line2); cursor:pointer; }
@container (max-width: 1040px){
  .nav__links, .nav__lang, .nav__sob{ display:none; }
  .nav__burger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav__in{ gap:var(--s3); min-height:64px; }
  .nav__side{ margin-left:auto; gap:var(--s3); }
}

/* ---------- HERO fixo ---------- */
.hero__top{ padding-top:var(--s8); }
.hero__title{ margin-top:var(--s7); max-width:15ch; }
.hero__grid{ margin-top:var(--s8); align-items:start; }
.hero__copy{ grid-column:1 / span 5; display:flex; flex-direction:column; gap:var(--s6); }
.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); }
.hero__fig{ grid-column:7 / -1; margin-right:calc(-1 * var(--gut) - 40px); }
.caret::after{ content:"_"; color:var(--brand); animation:ra-blink 1.1s steps(1) infinite; }
@keyframes ra-blink{ 50%{ opacity:0; } }
.stats{ margin-top:var(--s9); display:flex; flex-wrap:wrap; border-top:1px solid var(--line); }
.stat{ flex:1 1 200px; padding:var(--s5) var(--s5) 0 0; display:flex; flex-direction:column; gap:var(--s2); }
.stat + .stat{ padding-left:var(--s5); border-left:1px solid var(--line); } /* irmão DENTRO da seção: permitido */
@container (max-width: 860px){
  .hero__top{ padding-top:var(--s5); }
  .hero__title{ margin-top:var(--s6); }
  .hero__grid{ margin-top:var(--s6); }
  .hero__fig{ margin-right:calc(-1 * var(--gut)); }
  .stats{ margin-top:var(--s7); display:grid; grid-template-columns:1fr 1fr; }
  .stat{ padding:var(--s4) 0 var(--s4) 0; border-bottom:1px solid var(--line); }
  .stat + .stat{ padding-left:0; border-left:0; }
  .stat:nth-child(even){ padding-left:var(--s4); border-left:1px solid var(--line); }
}

/* ---------- moldura de material (captura real) ---------- */
.plate{ position:relative; border-radius:var(--r2); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.plate__bar{ display:flex; align-items:center; gap:var(--s3); height:36px; padding:0 var(--s4); border-bottom:1px solid var(--line); font:400 12px/1 var(--f-mono); color:var(--muted); }
.plate__bar i{ width:7px; height:7px; border-radius:50%; background:var(--line2); }
.figcap{ margin-top:var(--s3); font:400 12px/1.5 var(--f-mono); color:var(--muted); }

/* ---------- HERO rotativo ---------- */
.rot{ position:relative; }
.rot__track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rot__track::-webkit-scrollbar{ display:none; }
.rot__slide{ scroll-snap-align:start; min-height:560px; padding:var(--s9) var(--gut) var(--s8); display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s5); position:relative; }
.rot__slide::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(0deg, rgba(5,7,6,.72), rgba(5,7,6,0) 70%); } /* véu: garante AA sobre qualquer "cor de fundo" do slide */
.rot__slide > *{ position:relative; z-index:1; max-width:880px; }
.rot__nav{ display:flex; border-top:1px solid var(--line); }
.rot__tab{ flex:1 1 0; min-width:0; position:relative; padding:var(--s4) var(--s5) var(--s4) 0; text-align:left; background:none; border:0; color:var(--muted); font:400 14px/1.4 var(--f-sans); cursor:pointer; text-decoration:none; }
.rot__tab b{ display:block; font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; margin-bottom:4px; }
.rot__tab[aria-current="true"]{ color:var(--ink); }
.rot__tab::before{ content:""; position:absolute; left:0; right:var(--s5); top:-1px; height:1px; background:var(--brand); transform:scaleX(0); transform-origin:left; }
.rot__tab[aria-current="true"]::before{ animation:ra-progress 7s linear forwards; }
.rot:hover .rot__tab::before, .rot:focus-within .rot__tab::before{ animation-play-state:paused; }
@keyframes ra-progress{ to{ transform:scaleX(1); } }
@container (max-width: 860px){ .rot__slide{ min-height:480px; padding-top:var(--s8); } .rot__tab span{ display:none; } }

/* ---------- SERVIÇOS — variante Lista ---------- */
.svc__head{ align-items:end; }
.svc-list{ margin-top:var(--s8); border-top:1px solid var(--line); }
.svc-row{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--s5); row-gap:var(--s3); align-items:baseline; padding:var(--s6) 0; border-bottom:1px solid var(--line); }
.svc-row__id{ grid-column:1 / span 2; display:flex; align-items:center; gap:var(--s3); font:500 12px/1 var(--f-mono); letter-spacing:.08em; color:var(--muted); }
.svc-row__id svg{ flex:none; color:var(--ink2); }
.svc-row__t{ grid-column:3 / span 5; }
.svc-row__d{ grid-column:8 / -1; }
.svc-row--hi{ padding:var(--s8) 0 var(--s7); border-top:1px solid var(--brand-line); margin-top:-1px; }
.svc-row--hi .svc-row__t{ font-size:clamp(32px, 4.2cqi, 56px); line-height:1; letter-spacing:-.035em; }
.svc-row--hi .svc-row__id svg{ color:var(--brand); }
.svc-row__tag{ grid-column:3 / -1; grid-row:1; justify-self:start; margin-bottom:var(--s3); }
@container (max-width: 860px){
  .svc-row{ grid-template-columns:minmax(0,1fr); padding:var(--s5) 0; }
  .svc-row > *{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .svc-row--hi{ padding:var(--s6) 0; }
}

/* ---------- SERVIÇOS — variante Grade (livro-razão, sem caixas) ---------- */
.svc-grid{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.svc-cell{ padding:var(--s6) var(--s6) var(--s7); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); }
.svc-cell svg{ color:var(--ink2); margin-bottom:var(--s4); }
.svc-cell--hi{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s6); align-items:end; padding-block:var(--s8) var(--s7); background:var(--brand-wash); }
.svc-cell--hi svg{ color:var(--brand); }
@container (min-width: 1100px){ .svc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .svc-cell--hi{ grid-column:1 / span 2; grid-row:span 2; display:flex; justify-content:flex-end; } }
@container (max-width: 640px){ .svc-grid{ grid-template-columns:minmax(0,1fr); } .svc-cell--hi{ display:flex; } }

/* ---------- PROCESSO — trajetória ---------- */
.prc__steps{ --n:4; grid-column:5 / -1; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); column-gap:var(--s5); align-items:end; }
.prc__step{ padding-bottom:var(--s5); margin-bottom:calc((var(--n) - var(--i)) * 56px); display:flex; flex-direction:column; gap:var(--s3); }
.prc__num{ font:500 12px/1 var(--f-mono); letter-spacing:.08em; color:var(--muted); }
.prc__track{ grid-column:5 / -1; position:relative; height:1px; background:var(--line); margin-top:calc(-1 * var(--s7)); }
.prc__track::after{ content:""; position:absolute; inset:0; background:var(--ink2); transform-origin:left; transform:scaleX(1); }
.prc__ai{ position:absolute; top:0; height:1px; background:var(--brand); }
.prc__ai span{ position:absolute; top:12px; left:0; white-space:nowrap; font:500 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
@supports (animation-timeline: view()){
  .prc__track::after{ transform:scaleX(0); animation:ra-draw linear both; animation-timeline:view(); animation-range:entry 20% cover 55%; }
}
@keyframes ra-draw{ to{ transform:scaleX(1); } }
@container (max-width: 860px){
  .prc__steps{ grid-template-columns:minmax(0,1fr); row-gap:0; border-left:1px solid var(--line); margin-left:4px; }
  .prc__step{ margin-bottom:0; padding:var(--s5) 0 var(--s5) var(--s5); position:relative; }
  .prc__step::before{ content:""; position:absolute; left:-4px; top:30px; width:7px; height:7px; background:var(--ink2); }
  .prc__step--ai::before{ background:var(--brand); }
  .prc__track{ display:none; }
}

/* ---------- PORTFÓLIO — destaque + índice ---------- */
.prt__feat{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--s5); row-gap:var(--s5); align-items:end; text-decoration:none; color:inherit; }
.prt__feat .plate{ grid-column:1 / span 8; aspect-ratio:16 / 10; transition:box-shadow var(--t-med) var(--ease); }
.prt__feat:hover .plate{ box-shadow:inset 0 0 0 1px var(--line2); }
.prt__feat-meta{ grid-column:9 / -1; display:flex; flex-direction:column; gap:var(--s4); padding-bottom:var(--s2); }
.pname{ font:500 clamp(28px, 3.2cqi, 44px)/1 var(--f-sans); letter-spacing:-.035em; }
.pname--xl{ font-size:clamp(40px, 5.4cqi, 76px); }
.prt__list{ margin-top:var(--s8); border-top:1px solid var(--line); }
.prow{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--s5); align-items:center; min-height:96px; padding:var(--s4) var(--s3); margin:0 calc(-1 * var(--s3)); border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background-color var(--t-fast) var(--ease); }
.prow__n{ grid-column:1 / span 5; }
.prow__c{ grid-column:6 / span 3; }
.prow__m{ grid-column:9 / span 3; color:var(--ink); }
.prow__go{ grid-column:12; justify-self:end; font:400 18px/1 var(--f-mono); color:var(--muted); transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.prow__thumb{ position:absolute; right:12%; top:50%; width:240px; aspect-ratio:16/10; translate:0 -50%; pointer-events:none; opacity:0; clip-path:inset(50% 0 50% 0 round 6px); transition:opacity var(--t-fast) var(--ease), clip-path var(--t-med) var(--ease); z-index:2; }
.prow:hover, .prow:focus-visible{ background:var(--surface); }
.prow:hover .prow__go, .prow:focus-visible .prow__go{ color:var(--brand); transform:translate(3px,-3px); }
.prow:hover .prow__thumb{ opacity:1; clip-path:inset(0 0 0 0 round 6px); }
.prow:focus-visible{ outline-offset:-2px; }
.mono-tile{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:6%; overflow:hidden; background:var(--bg3); }
.mono-tile span{ font:700 clamp(48px, 13cqi, 220px)/.8 var(--f-sans); letter-spacing:-.06em; color:var(--line2); white-space:nowrap; margin-bottom:-.12em; }
@container (max-width: 860px){
  .prt__feat .plate, .prt__feat-meta{ grid-column:1 / -1; }
  .prow{ grid-template-columns:minmax(0,1fr) auto; row-gap:var(--s1); min-height:0; padding:var(--s5) 0; margin:0; }
  .prow__n{ grid-column:1; } .prow__go{ grid-column:2; grid-row:1; }
  .prow__c, .prow__m{ grid-column:1 / -1; }
  .prow__thumb{ display:none; }
}

/* ---------- TEXTO LIVRE ---------- */
.txt--centro .txt__in{ max-width:680px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--s5); }
.txt__body{ display:flex; flex-direction:column; gap:1em; font:400 19px/1.65 var(--f-sans); color:var(--ink2); }
.txt__body strong{ color:var(--ink); font-weight:500; }
.txt__body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--brand-line); text-underline-offset:5px; }
.txt__body a:hover{ text-decoration-color:var(--brand); }
.txt--cheia .txt__head{ grid-column:1 / span 5; }
.txt--cheia .txt__body{ grid-column:7 / -1; columns:2 260px; column-gap:var(--s6); display:block; }
.txt--cheia .txt__body p{ margin:0 0 1em; break-inside:avoid; }

/* ---------- PLANOS ---------- */
.pln__head{ align-items:end; }
.journey{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(var(--n,4), minmax(0,1fr)); border-top:1px solid var(--line); }
.journey li{ padding:var(--s4) var(--s5) 0 0; display:flex; flex-direction:column; gap:var(--s2); }
.journey b{ font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; color:var(--brand); }
.journey span{ font:400 15px/1.45 var(--f-sans); color:var(--ink2); }
.journey li:last-child span{ color:var(--ink); }
.plans{ margin-top:var(--s8); border-top:1px solid var(--line2); }
.plan{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--s5); row-gap:var(--s4); padding:var(--s6) var(--s5); margin:0 calc(-1 * var(--s5)); border-bottom:1px solid var(--line); align-items:start; }
.plan__id{ grid-column:1 / span 3; display:flex; flex-direction:column; gap:var(--s2); }
.plan__name{ font:500 26px/1.1 var(--f-sans); letter-spacing:-.02em; }
.plan__desc{ font:400 15px/1.5 var(--f-sans); color:var(--ink2); }
.plan__items{ grid-column:4 / span 5; columns:2 200px; column-gap:var(--s5); }
.plan__items li{ display:flex; gap:var(--s3); padding:5px 0; font:400 15px/1.45 var(--f-sans); color:var(--ink2); break-inside:avoid; }
.plan__items li::before{ content:""; flex:none; width:9px; height:5px; margin-top:.5em; border-left:1.5px solid var(--brand); border-bottom:1.5px solid var(--brand); transform:rotate(-45deg); }
.plan__buy{ grid-column:9 / -1; display:flex; flex-direction:column; align-items:stretch; gap:var(--s3); }
.price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; font-variant-numeric:tabular-nums; }
.price__cur{ font:500 14px/1 var(--f-mono); color:var(--muted); align-self:flex-start; margin-top:.5em; }
.price__val{ font:700 clamp(40px, 4.2cqi, 56px)/1 var(--f-sans); letter-spacing:-.04em; }
.price__per{ font:400 14px/1 var(--f-mono); color:var(--muted); white-space:nowrap; }
.price--ask .price__val{ font-weight:500; font-size:clamp(28px, 2.8cqi, 36px); letter-spacing:-.02em; line-height:1.15; }
.plan__fine{ font:400 13px/1.45 var(--f-sans); color:var(--muted); }
.plan--hi{ background:var(--surface); border-bottom-color:transparent; box-shadow:inset 0 1px 0 var(--brand-line); }
.plan__flag{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--s3); font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.plan__more{ display:none; }
.pln__own{ margin-top:var(--s9); }
.own__col{ display:flex; flex-direction:column; gap:var(--s4); }
.own__list li{ display:flex; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line); font:400 16px/1.45 var(--f-sans); color:var(--ink2); }
.own__list li b{ flex:none; width:22px; font:500 12px/1.9 var(--f-mono); color:var(--brand); }
.own__list--no li b{ color:var(--muted); }
.zipcard{ border-radius:var(--r2); background:var(--bg3); box-shadow:inset 0 0 0 1px var(--line); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.zipcard__file{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r1); background:var(--surface); font:400 13px/1.4 var(--f-mono); color:var(--ink); overflow-wrap:anywhere; }
.billing{ margin-top:var(--s6); display:flex; gap:var(--s4); align-items:flex-start; max-width:820px; font:400 15px/1.55 var(--f-sans); color:var(--ink2); }
.billing svg{ flex:none; margin-top:2px; color:var(--muted); }
@container (max-width: 860px){
  .journey{ grid-template-columns:1fr 1fr; row-gap:var(--s4); }
  .plan{ grid-template-columns:minmax(0,1fr); margin:0; padding:var(--s5) 0; }
  .plan--hi{ margin:0 calc(-1 * var(--gut)); padding:var(--s5) var(--gut); }
  .plan > *{ grid-column:1 / -1 !important; }
  .plan__buy{ order:2; }
  .plan__items{ order:3; columns:1; }
  .plan__items--long li:nth-child(n+5){ display:none; }
  .plan__more{ display:block; order:4; }
  .plan:has(.plan__more[open]) .plan__items--long li:nth-child(n+5){ display:flex; }
  .plan__more[open] summary{ display:none; }
  .plan__more summary::-webkit-details-marker{ display:none; }
  .plan__more summary{ list-style:none; }
  .plan__more summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; font:500 14px/1 var(--f-sans); color:var(--ink); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:5px; }
}

/* ---------- CONTATO ---------- */
.ctt__aside{ grid-column:1 / span 5; display:flex; flex-direction:column; gap:var(--s6); }
.ctt__form{ grid-column:7 / -1; }
.chan{ border-top:1px solid var(--line); }
.chan a{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:var(--s4); min-height:64px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background-color var(--t-fast) var(--ease); }
.chan a:hover{ background:var(--surface); }
.chan a span:nth-child(2){ font:500 19px/1.3 var(--f-sans); letter-spacing:-.01em; overflow-wrap:anywhere; }
.chan a span:last-child{ font-family:var(--f-mono); color:var(--muted); padding-right:var(--s2); }
@container (max-width: 520px){ .chan a{ grid-template-columns:minmax(0,1fr) auto; row-gap:0; padding:var(--s3) 0; } .chan a span:first-child{ grid-column:1 / -1; } }

/* ---------- formulário ---------- */
.form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5); }
.form .full{ grid-column:1 / -1; }
@container (max-width: 640px){ .form{ grid-template-columns:minmax(0,1fr); } }
.fld{ display:flex; flex-direction:column; gap:var(--s2); }
.fld__l{ font:500 12px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.fld__l em{ font-style:normal; color:var(--muted); text-transform:none; letter-spacing:0; }
.inp{ width:100%; min-height:52px; padding:14px 16px; border:0; border-radius:var(--r1); background:var(--bg3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-field); font:400 16px/1.4 var(--f-sans); transition:box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); -webkit-appearance:none; appearance:none; }
.inp::placeholder{ color:var(--muted); }
.inp:hover{ box-shadow:inset 0 0 0 1px var(--ink2); }
.inp:focus, .inp:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-wash); background:var(--bg); }
textarea.inp{ min-height:144px; resize:vertical; }
select.inp{ padding-right:44px; background-image:linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position:calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.inp[aria-invalid="true"]{ box-shadow:inset 0 0 0 1px var(--danger); }
.inp[aria-invalid="true"]:focus{ box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 3px rgba(255,154,118,.12); }
.inp:disabled{ color:var(--muted); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); cursor:not-allowed; }
.fld__err{ display:flex; gap:var(--s2); align-items:flex-start; font:400 14px/1.4 var(--f-sans); color:var(--danger); }
.fld__err svg{ flex:none; margin-top:2px; }
.chk{ display:flex; gap:var(--s3); align-items:flex-start; font:400 14px/1.5 var(--f-sans); color:var(--ink2); cursor:pointer; }
.chk input{ flex:none; width:20px; height:20px; margin:1px 0 0; border-radius:var(--r1); background:var(--bg3); box-shadow:inset 0 0 0 1px var(--line-field); -webkit-appearance:none; appearance:none; cursor:pointer; display:grid; place-content:center; }
.chk input::before{ content:""; width:10px; height:6px; border-left:2px solid var(--brand-ink); border-bottom:2px solid var(--brand-ink); transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.chk input:checked{ background:var(--brand); box-shadow:none; }
.chk input:checked::before{ opacity:1; }
.chk input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1px var(--danger); }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4); }

/* ---------- RODAPÉ ---------- */
.foot{ background:var(--bg3); border-top:1px solid var(--line); container-type:inline-size; }
.foot__in{ max-width:calc(var(--max) + 2*var(--gut)); margin-inline:auto; padding:var(--s9) var(--gut) var(--s6); }
.foot__cols{ display:grid; grid-template-columns:minmax(0,2fr) repeat(auto-fit, minmax(150px, 1fr)); gap:var(--s6); }
.foot__h{ margin-bottom:var(--s4); }
.foot__col a{ display:inline-flex; min-height:36px; align-items:center; color:var(--ink2); text-decoration:none; font-size:15px; }
.foot__col a:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--brand); text-underline-offset:5px; }
.foot__base{ margin-top:var(--s9); padding-top:var(--s5); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); }
@container (max-width: 860px){ .foot__cols{ grid-template-columns:1fr 1fr; } .foot__cols > :first-child, .foot__cols > :last-child{ grid-column:1 / -1; } .foot__in{ padding-top:var(--s8); } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  .ra *, .ra *::before, .ra *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .caret::after{ animation:none; opacity:1; }
  .prc__track::after{ animation:none !important; transform:scaleX(1) !important; }
  .rot__tab::before{ animation:none !important; }
  .rot__tab[aria-current="true"]::before{ transform:scaleX(1); }
  .btn:hover .arw, .lnk--cta:hover .arw{ transform:none; }
}

/* =====================================================================
   BASE DO DOCUMENTO — não vem do canvas.
   No canvas cada prancha era uma ilha com `.ra` na raiz dela; aqui a página
   inteira é o tema, e html/body precisam do escuro: sem isto o branco do
   navegador aparece no overscroll e atrás das seções enquanto a folha carrega.
   ===================================================================== */
html{ background:var(--bg); color-scheme:dark; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 var(--f-sans);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{ box-sizing:border-box; } *,*::before,*::after{ box-sizing:inherit; }
/* Rolagem suave para as âncoras do menu, descontando a altura da navegação. */
html{ scroll-behavior:smooth; }
.s{ scroll-margin-top:80px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* O gerenciador embrulha cada seção para a prévia; `display:contents` já
   mantém o layout, mas o embrulho não deve virar container de consulta. */
[data-sec-id]{ display:contents; }

/* =====================================================================
   O QUE A MARCAÇÃO REAL PEDE E O CANVAS NÃO TINHA.
   No canvas cada prancha era um exemplo cheio e fixo: quatro etapas, quatro
   colunas de rodapé, sempre com imagem. No site o conteúdo é do cliente, e
   essas quantidades variam. Todas as regras abaixo são DENTRO de uma seção —
   nenhum seletor entre seções, como manda o desenho.
   ===================================================================== */

/* contagens que vêm do conteúdo: ver `troca` no gerador — as duas entram na
   regra original, não aqui, para não vencer as @container do desenho */
.foot__brand{ display:flex; flex-direction:column; gap:var(--s5); max-width:420px; }

/* conteúdo faltando: sem captura, sem lista, sem texto de apoio, a coluna
   vizinha ocupa o lugar em vez de deixar um buraco */
.hero__grid:not(:has(.hero__fig)) .hero__copy{ grid-column:1 / span 8; }
.prt__feat:not(:has(.plate)) .prt__feat-meta{ grid-column:1 / -1; }
.plan:not(:has(.plan__items)) .plan__buy{ grid-column:7 / -1; }
.svc__head:not(:has(.lnk)):not(:has(.t-sm)) .t-h2{ grid-column:1 / span 9; }

/* A miniatura do índice do portfólio tem 240px: ali o nome precisa CABER.
   No destaque a placa é larga e o nome sangrando faz parte do desenho; na
   miniatura, um nome de duas palavras virava um borrão cortado ao meio.
   `container-type` faz o `cqi` passar a medir a própria miniatura (sem ele
   mede a seção inteira, e o tamanho sai gigante), e a quebra de linha é o que
   deixa "Noria Games" legível no mesmo tratamento tipográfico. */
.prow__thumb{ container-type:inline-size; }
.prow__thumb .mono-tile{ align-items:center; padding:10%; }
.prow__thumb .mono-tile span{ font-size:clamp(18px, 17cqi, 46px); line-height:.95; white-space:normal; margin-bottom:0; }

/* submenu de um nível (o editor de Menus permite dois) */
.nav__dd{ position:relative; display:inline-flex; }
.nav__dd-list{
  position:absolute; left:0; top:100%; min-width:210px; z-index:20;
  display:none; flex-direction:column; padding:var(--s2) 0;
  background:var(--bg3); border-radius:var(--r1); box-shadow:inset 0 0 0 1px var(--line);
}
.nav__dd:hover .nav__dd-list, .nav__dd:focus-within .nav__dd-list{ display:flex; }
.nav__dd-list a{ display:flex; align-items:center; min-height:40px; padding:0 var(--s4); color:var(--ink2); text-decoration:none; font:400 15px/1.3 var(--f-sans); }
.nav__dd-list a:hover{ color:var(--ink); background:var(--surface); }

/* O painel que o hambúrguer abre. A folha do canvas só ESCONDIA o menu no
   celular; o botão existia sem nada para mostrar.
   `display:contents` no `.nav__side` é o que faz a coisa funcionar: o link
   "sob medida" e o seletor de idioma são filhos DELE, e `order` só reordena
   entre irmãos — sem isso eles ficariam espremidos na primeira linha, ao lado
   da marca, em vez de descerem para o painel. Com `contents` o agrupador some
   da caixa e os quatro viram irmãos do menu, que é o que a ordem pressupõe. */
@container (max-width: 1040px){
  .nav[data-open="true"] .nav__in{ flex-wrap:wrap; row-gap:0; align-items:center; }
  .nav[data-open="true"] .nav__side{ display:contents; }
  .nav[data-open="true"] .nav__side > .btn{ order:1; margin-left:auto; }
  .nav[data-open="true"] .nav__burger{ order:2; }
  .nav[data-open="true"] .nav__links{
    display:flex; flex-direction:column; gap:0; order:3; width:100%;
    margin-right:0; padding-bottom:var(--s3); border-top:1px solid var(--line);
  }
  .nav[data-open="true"] .nav__a{ width:100%; min-height:52px; }
  .nav[data-open="true"] .nav__dd{ flex-direction:column; width:100%; }
  .nav[data-open="true"] .nav__dd-list{ position:static; display:flex; padding:0 0 var(--s2) var(--s5); background:none; box-shadow:none; }
  .nav[data-open="true"] .nav__sob{ display:inline-flex; align-items:center; order:4; width:100%; min-height:48px; }
  .nav[data-open="true"] .nav__lang{ display:flex; order:5; width:100%; padding:var(--s3) 0 var(--s4); border-top:1px solid var(--line); }
}

/* =====================================================================
   PÁGINAS QUE NÃO SÃO A HOME — não vêm do canvas.
   O pacote de design cobriu a home (seções, navegação, rodapé). Mas o site
   tem mais: páginas internas (privacidade, termos), blog, artigo, busca e
   comentários, e esses templates são COMPARTILHADOS entre os temas — vêm com
   o vocabulário de classes da skin marketing (`.article`, `.prose`, `.card`,
   `.post`…). Sem este bloco eles renderizariam sem estilo nenhum nesta skin.
   Reescrever cada template por skin seria duplicar oito arquivos nas duas
   cascas para não mudar nada além da aparência; o que muda é só isto.
   Tudo aqui é traduzido para o vocabulário do desenho: fio de 1px em vez de
   caixa com sombra, raio 2px, versalete monoespaçado nos rótulos.
   ===================================================================== */

/* casca de página */
.wrap.narrow, .wrap--tight.narrow{ max-width:calc(760px + 2*var(--gut)); }
section.block{ padding:var(--s9) 0; background:var(--bg); }
section.block.alt{ background:var(--bg2); }
section.block.dark{ background:var(--bg3); }
.section{ padding:var(--s8) 0; }
.hero-sm{ padding:var(--s8) 0 var(--s6); background:var(--bg3); border-bottom:1px solid var(--line); }
.hero-sm h1{ font:500 clamp(30px, 5vw, 56px)/1.02 var(--f-sans); letter-spacing:-.035em; margin:0; }
.crumb{ font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.crumb a{ color:var(--ink2); text-decoration:none; }
.crumb a:hover{ color:var(--ink); }
.center{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s5); }
.center .box{ max-width:460px; }
.center h1{ font:500 30px/1.1 var(--f-sans); letter-spacing:-.03em; margin:0 0 var(--s3); }
.center p{ color:var(--ink2); margin:0; }

/* cabeçalho de seção no vocabulário antigo */
.sec-head{ max-width:760px; margin-bottom:var(--s7); }
.eyebrow{ margin:0; font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.sec-t, .h2{ margin:var(--s3) 0 0; font:500 clamp(30px, 4vw, 52px)/1.02 var(--f-sans); letter-spacing:-.035em; }
.lead, .lead-p{ color:var(--ink2); font:400 18px/1.5 var(--f-sans); max-width:640px; }

/* botões no vocabulário antigo (o desenho só tem dois: primário e secundário) */
.btn-brand, .btn-blue, .btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-brand:hover, .btn-blue:hover, .btn-primary:hover{ background:var(--brand-hi); }
.btn-line, .btn-ghost, .btn-outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); }
.btn-line:hover, .btn-ghost:hover, .btn-outline:hover{ box-shadow:inset 0 0 0 1px var(--ink2); background:var(--surface); }
.btn.sm{ min-height:40px; padding:0 var(--s4); font-size:15px; }

/* placas genéricas: fio, não caixa com sombra */
.card{ background:var(--surface); border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line); padding:var(--s5); }
.g3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap:var(--s5); }
.g4{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap:var(--s5); }
.g1{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip, .cat, .ncat, .badge-pill{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:var(--r1); box-shadow:inset 0 0 0 1px var(--line2); font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.cats, .ncats, .art-cats{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.muted{ color:var(--muted); }
.date, .meta, .cdate, .cmeta{ font:400 13px/1.5 var(--f-mono); color:var(--muted); }

/* artigo e página interna */
.article{ padding:var(--s8) 0 var(--s9); }
.article .back, .back{ display:inline-flex; align-items:center; min-height:40px; font:500 12px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.article .back:hover, .back:hover{ color:var(--ink); }
.article h1{ font:500 clamp(30px, 4.6vw, 54px)/1.02 var(--f-sans); letter-spacing:-.04em; margin:var(--s4) 0 var(--s3); text-wrap:balance; }
.art-cover, .article img{ border-radius:var(--r2); }
.art-cover{ margin:var(--s6) 0; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.prose, .art-body{ color:var(--ink2); font:400 19px/1.65 var(--f-sans); margin-top:var(--s5); text-wrap:pretty; }
.prose h2, .art-body h2, .art-gtitle{ color:var(--ink); font:500 28px/1.15 var(--f-sans); letter-spacing:-.02em; margin:var(--s7) 0 var(--s3); }
.prose h3, .art-body h3{ color:var(--ink); font:500 22px/1.2 var(--f-sans); letter-spacing:-.015em; margin:var(--s6) 0 var(--s2); }
.prose p, .art-body p{ margin:0 0 var(--s4); }
.prose strong, .art-body strong{ color:var(--ink); font-weight:500; }
.prose a, .art-body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--brand-line); text-underline-offset:5px; }
.prose a:hover, .art-body a:hover{ text-decoration-color:var(--brand); }
.prose ul, .prose ol, .art-body ul, .art-body ol{ margin:0 0 var(--s4); padding-left:var(--s5); list-style:revert; }
.prose li, .art-body li{ margin:0 0 var(--s2); }
.prose blockquote{ margin:var(--s5) 0; padding-left:var(--s5); border-left:1px solid var(--brand); color:var(--ink); }
.prose code{ font:400 15px/1.5 var(--f-mono); background:var(--surface); padding:1px 5px; border-radius:var(--r1); }
.gallery, .art-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:var(--s3); margin-top:var(--s5); }
.gallery img, .art-gallery img{ border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line); aspect-ratio:4/3; object-fit:cover; }

/* blog e notícias (listas de cartão) */
.post, .ncard{ display:flex; flex-direction:column; padding:0; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow var(--t-fast) var(--ease); }
.post:hover, .ncard:hover{ box-shadow:inset 0 0 0 1px var(--line2); }
.post-cover{ height:184px; overflow:hidden; border-bottom:1px solid var(--line); }
.post-cover img{ width:100%; height:100%; object-fit:cover; }
.post-cover.ph{ display:flex; align-items:flex-end; padding:6%; background:var(--bg3); }
.post-cover.ph span{ font:700 92px/.8 var(--f-sans); letter-spacing:-.06em; color:var(--line2); margin-bottom:-.12em; }
.post-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); }
.post-body h3, .ncard h3{ margin:0; font:500 21px/1.2 var(--f-sans); letter-spacing:-.02em; }
.post-body p, .ncard p{ margin:0; color:var(--ink2); font:400 15px/1.5 var(--f-sans); }
.post-body .more, .more{ margin-top:auto; font:500 12px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }

/* busca */
.searchbig{ width:100%; min-height:56px; padding:14px 16px; border:0; border-radius:var(--r1); background:var(--bg3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-field); font:400 17px/1.4 var(--f-sans); }
.searchbig:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-wash); }
.results{ margin-top:var(--s6); border-top:1px solid var(--line); }
.result{ display:block; padding:var(--s5) 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.result:hover{ background:var(--surface); }
.result-kind{ font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.result-url{ font:400 13px/1.5 var(--f-mono); color:var(--muted); overflow-wrap:anywhere; }

/* comentários */
.comments{ margin-top:var(--s8); border-top:1px solid var(--line); padding-top:var(--s6); }
.cform-t{ font:500 12px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.clist{ display:flex; flex-direction:column; }
.citem{ padding:var(--s5) 0; border-bottom:1px solid var(--line); }

/* formulário de lead do lado PHP (`rk_lead_form`), que é marcação própria */
.leadform{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4); }
.leadform .lf-full, .leadform .lf-btn, .leadform .lf-consent, .leadform .calert{ grid-column:1 / -1; }
.lf{ display:flex; flex-direction:column; gap:var(--s2); }
.lf > span{ font:500 12px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.lf input, .lf select, .lf textarea{ width:100%; min-height:52px; padding:14px 16px; border:0; border-radius:var(--r1); background:var(--bg3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-field); font:400 16px/1.4 var(--f-sans); }
.lf textarea{ min-height:120px; resize:vertical; }
.lf input:focus, .lf select:focus, .lf textarea:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-wash); }
.lf-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--s5); border:0; border-radius:var(--r1); background:var(--brand); color:var(--brand-ink); font:500 16px/1.1 var(--f-sans); cursor:pointer; }
.lf-btn:hover{ background:var(--brand-hi); }
.lf-consent{ font:400 13px/1.5 var(--f-sans); color:var(--muted); }
.calert{ padding:var(--s4); border-radius:var(--r1); font:400 15px/1.5 var(--f-sans); }
.calert.ok{ color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand-line); }
.calert.err{ color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger-line); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@container (max-width: 640px){ .leadform{ grid-template-columns:minmax(0,1fr); } }
@media (max-width: 640px){ .leadform{ grid-template-columns:minmax(0,1fr); } }

/* o formulário de lead da própria skin, quando o tema cai no componente comum */
.lead-wrap{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,320px),1fr)); gap:var(--s7); align-items:start; }
.lead-ok{ padding:var(--s5); border-radius:var(--r2); color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand-line); }
.lead-err{ color:var(--danger); font-size:14px; }
.contact-links{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s5); }
.contact-links a{ display:inline-flex; align-items:center; gap:var(--s3); min-height:40px; color:var(--ink2); text-decoration:none; font-size:15px; }
.contact-links a:hover{ color:var(--ink); }
.contact-links svg{ color:var(--brand); }

/* =====================================================================
   VITRINE DE TEMPLATES (/templates) — não vem do canvas.
   O canvas desenhou a home; esta página nasceu da decisão de produto de
   deixar o visitante VER cada template funcionando antes de contratar.
   Reaproveita o vocabulário do desenho: as abas são as do destaque rotativo,
   o quadro é a placa de material, e o preço é o mesmo da seção de planos.
   ===================================================================== */
.tpl__head{ align-items:end; }
.tpl__bar{ margin-top:var(--s8); display:flex; align-items:stretch; gap:var(--s5); }
.tpl__tabs{ flex:1 1 auto; min-width:0; }
/* A aba do destaque enche a barrinha em 7s porque ali o slide TROCA sozinho.
   Aqui não troca nada sem clique — a barra cheia marca a escolhida e pronto. */
.tpl__tabs .rot__tab[aria-current="true"]::before{ animation:none; transform:scaleX(1); }
.tpl__view{ display:flex; align-self:center; gap:2px; }
.tpl__view button{
  min-height:36px; padding:0 var(--s4); border:0; cursor:pointer; border-radius:var(--r1);
  background:none; color:var(--muted); font:500 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  transition:color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tpl__view button:hover{ color:var(--ink); }
.tpl__view button[aria-pressed="true"]{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); }

.tpl__frame{ margin-top:var(--s6); }
.tpl__frame .plate{ display:flex; flex-direction:column; margin-inline:auto; transition:max-width var(--t-med) var(--ease); }
.tpl__frame iframe{ display:block; width:100%; height:min(72vh, 820px); min-height:460px; border:0; background:var(--bg3); }
/* Celular: a moldura encolhe para a largura de um aparelho e o site responde
   de verdade — as consultas de contêiner das skins seguem a largura do iframe. */
.tpl__frame--cel .plate{ max-width:390px; }
.tpl__frame--cel iframe{ height:min(78vh, 740px); }

.tpl__meta{ margin-top:var(--s6); align-items:center; row-gap:var(--s5); }
.tpl__meta .price__val{ font-size:clamp(28px, 2.6cqi, 38px); }
@container (max-width: 860px){
  .tpl__bar{ flex-direction:column; gap:var(--s3); }
  .tpl__view{ align-self:flex-start; }
  .tpl__frame iframe{ height:min(68vh, 600px); }
}

/* =====================================================================
   MOVIMENTO DE ENTRADA — não vem do canvas.
   Tudo aqui é animação conduzida pela ROLAGEM (`animation-timeline: view()`),
   sem um byte de JS e sem estado de componente, que é o que as duas cascas
   precisam ter em comum. Navegador sem suporte simplesmente mostra o estado
   final — o @supports garante que nada entra invisível.
   O vocabulário é o do próprio desenho, não "fade up" em cada bloco:
     · régua  — a linha da régua de seção se desenha da esquerda (ra-draw, que
                já era o movimento da trajetória do Processo);
     · limpa  — as placas de material aparecem por LIMPO (clip-path), como uma
                captura sendo revelada, nunca por opacidade;
     · sobe   — títulos e números sobem de dentro da própria linha, mascarados;
     · fileira— as linhas de livro-razão (serviços, portfólio, planos) entram
                deslizando 10px da esquerda, uma a uma, porque cada uma tem a
                sua própria linha do tempo de rolagem — o escalonamento sai de
                graça, sem delay calculado.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* régua ------------------------------------------------------------ */
    .rule__line{
      transform:scaleX(0); transform-origin:left;
      animation:ra-draw linear both;
      animation-timeline:view(); animation-range:entry 10% entry 90%;
    }

    /* limpa ------------------------------------------------------------ */
    .hero__fig .plate, .prt__feat .plate, .zipcard{
      animation:ra-wipe var(--ease) both;
      animation-timeline:view(); animation-range:entry 5% entry 70%;
    }
    @keyframes ra-wipe{
      from{ clip-path:inset(0 100% 0 0); }
      to{ clip-path:inset(0 0 0 0); }
    }

    /* sobe ------------------------------------------------------------- */
    .hero__title, .t-h2, .t-num, .price__val, .pname{
      animation:ra-rise var(--ease) both;
      animation-timeline:view(); animation-range:entry 15% entry 85%;
    }
    @keyframes ra-rise{
      from{ clip-path:inset(105% 0 -10% 0); transform:translateY(.14em); }
      to{ clip-path:inset(-10% 0 -10% 0); transform:translateY(0); }
    }

    /* fileira ---------------------------------------------------------- */
    .svc-row, .svc-cell, .prow, .plan, .journey li, .own__list li, .stat, .prc__step, .chan a{
      animation:ra-row var(--ease) both;
      animation-timeline:view(); animation-range:entry 10% entry 65%;
    }
    @keyframes ra-row{
      from{ opacity:0; translate:-10px 0; }
      to{ opacity:1; translate:0 0; }
    }
    /* A placa do destaque e o título do hero já estão na tela no primeiro
       quadro: `view()` os trataria como "fora da entrada" e eles apareceriam
       do estado inicial sem nunca avançar. `cover` resolve: a faixa inteira
       da seção conta, então o que já está visível começa adiantado. */
    .hero__top .rule__line, .hero__title, .hero__fig .plate, .hero__top .stat{
      animation-range:cover 0% cover 40%;
    }
  }
}