/* Linguagens visuais das áreas: gestão (painel), turismo (mapa e roteiro), tecnologia (código).
   Cada tema redefine os tokens de cor do site.css e acrescenta os seus componentes. */

:root { --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; }

.area-tag { margin-left: 0.15rem; color: var(--muted); font-family: var(--sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; }
.area-tag::before { content: "/"; margin-right: 0.55rem; opacity: 0.5; }
.area-hero { position: relative; padding: calc(var(--header-height) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 5rem); }
.area-hero .overline { margin-bottom: 1.25rem; }
.area-lead { max-width: 34rem; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.2rem); margin-bottom: 2rem; }

/* ======================= GESTÃO ======================= */
.theme-gestao {
  --paper: #f5f4ef; --paper-2: #ecebe4; --paper-3: #dedcd2;
  --ink: #14212b; --ink-2: #34434e; --muted: #5a6570;
  --sage: #9fbfd2; --sage-deep: #1f5375;
  --night: #0f2231; --night-2: #16304a; --on-night: #e9ede9; --on-night-muted: #9fb0bc;
  --line: rgba(20, 33, 43, 0.14); --line-strong: rgba(20, 33, 43, 0.34); --line-night: rgba(233, 237, 233, 0.15);
  --grid: rgba(31, 83, 117, 0.07);
}
.kpi strong, .score-num, .ledger td:first-child, .compare td { font-variant-numeric: tabular-nums; }
.theme-gestao .site-header, .theme-gestao.menu-open .site-header { background: rgba(245, 244, 239, 0.92); }
.theme-gestao .main-nav { background: inherit; }
.theme-gestao h1, .theme-gestao h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.theme-gestao h1 { font-size: clamp(2.8rem, 5.6vw, 5.4rem); }
.theme-gestao h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.theme-gestao h1 em, .theme-gestao h2 em { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; color: var(--sage-deep); }
.theme-gestao .section-label span { font-family: var(--mono); font-style: normal; font-size: 0.85rem; color: var(--sage-deep); }
.grid-paper { background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }

.g-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.panel { position: relative; padding: 1.25rem; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 1px 0 var(--line), 14px 14px 0 rgba(31, 83, 117, 0.08); }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.panel-head b { color: var(--ink); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.kpi { padding: 0.8rem; background: var(--paper); border: 1px solid var(--line); }
.kpi span { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; }
.kpi strong { display: block; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.kpi small { color: #2e7d4f; font-size: 0.75rem; font-weight: 600; }
.kpi .meter { height: 4px; margin-top: 0.55rem; background: var(--paper-3); }
.kpi .meter i { display: block; width: 60%; height: 100%; background: var(--sage-deep); }
.chart { display: block; width: 100%; height: auto; margin-bottom: 0.75rem; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .series { fill: none; stroke: var(--sage-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.2s var(--ease-out) 0.4s forwards; }
.chart .series-2 { fill: none; stroke: var(--sage); stroke-width: 2; stroke-dasharray: 4 5; }
.chart .area { fill: rgba(31, 83, 117, 0.08); opacity: 0; animation: rise-fade 1s ease 1.4s forwards; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.routines { margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.routines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.routines em { font-style: normal; color: #2e7d4f; font-weight: 600; }
.routines em.wip { color: #9a6a12; }
.panel-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.72rem; }

/* Autodiagnóstico */
.selfcheck { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.checklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.checklist label { display: grid; grid-template-columns: 1.6rem 1fr; gap: 1rem; align-items: start; padding: 1.1rem 0.25rem; border-bottom: 1px solid var(--line); cursor: pointer; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.4; transition: background 200ms ease; }
.checklist label:hover { background: rgba(31, 83, 117, 0.04); }
.checklist input { appearance: none; width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; border: 1.5px solid var(--ink); border-radius: 2px; display: grid; place-content: center; cursor: pointer; }
.checklist input::after { content: ""; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 180ms var(--ease-out); }
.checklist input:checked { background: var(--sage-deep); border-color: var(--sage-deep); }
.checklist input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.score { position: sticky; top: calc(var(--header-height) + 1.5rem); padding: clamp(1.25rem, 2.5vw, 2rem); color: var(--on-night); background: var(--night); }
.score-num { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem; font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.score-num small { color: var(--on-night-muted); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.score-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 1.5rem; }
.score-bar i { height: 6px; background: var(--line-night); transition: background 250ms ease; }
.score-bar i.on { background: var(--sage); }
.score h3 { margin-bottom: 0.6rem; font-size: 1.3rem; }
.score p { color: var(--on-night-muted); margin-bottom: 1.5rem; }
.score .button { width: 100%; }

/* Frentes como fluxo */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: doc; }
.doc { position: relative; padding: 1.5rem; background: #fff; border: 1px solid var(--line-strong); }
.doc:not(:last-child)::after { content: "→"; position: absolute; right: -1.85rem; top: 2.2rem; color: var(--sage-deep); font-size: 1.3rem; }
.doc-code { display: flex; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--line-strong); font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.doc h3 { font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.doc > p { color: var(--ink-2); font-size: 0.98rem; }
.doc ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.doc li { position: relative; padding: 0.45rem 0 0.45rem 1.4rem; font-size: 0.94rem; border-top: 1px solid var(--line); }
.doc li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--sage-deep); }

/* Tabela comparativa */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-strong); background: #fff; }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { vertical-align: bottom; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.compare thead th span { display: block; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.compare thead th small { display: block; margin-top: 0.25rem; color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.compare tbody th { font-weight: 500; color: var(--ink-2); width: 34%; }
.compare td { text-align: center; color: var(--muted); }
.compare .yes { color: var(--sage-deep); font-weight: 700; }
.compare .is-pick { background: rgba(31, 83, 117, 0.06); }
.compare tfoot td { border-bottom: 0; padding-block: 1.25rem; }
.compare tfoot a { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.compare tfoot a:hover { color: var(--paper); background: var(--ink); }

/* Cronograma (Gantt) */
.gantt { border-top: 1px solid var(--line-night); }
.gantt-row { display: grid; grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line-night); }
.gantt-row h3 { margin: 0; font-size: 1.15rem; }
.gantt-row p { margin: 0.25rem 0 0; color: var(--on-night-muted); font-size: 0.9rem; }
.track { display: grid; grid-template-columns: repeat(12, 1fr); height: 2.25rem; background-image: linear-gradient(90deg, var(--line-night) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.bar { height: 100%; background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.gantt-row.is-visible .bar { transform: none; }
.bar-1 { grid-column: 1 / 3; } .bar-2 { grid-column: 2 / 6; transition-delay: 0.15s; } .bar-3 { grid-column: 5 / 9; transition-delay: 0.3s; }
.bar-4 { grid-column: 8 / 13; transition-delay: 0.45s; background: repeating-linear-gradient(90deg, var(--sage) 0 14px, transparent 14px 20px); }
.gantt-scale { display: grid; grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); gap: 1.5rem; padding-top: 0.75rem; color: var(--on-night-muted); font-family: var(--mono); font-size: 0.75rem; }
.gantt-scale div { display: flex; justify-content: space-between; }

/* Registro (trabalhos) */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ledger thead th { color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom-color: var(--line-strong); }
.ledger td:first-child { font-family: var(--mono); color: var(--sage-deep); width: 5rem; }
.ledger td strong { display: block; font-size: 1.08rem; margin-bottom: 0.25rem; }
.ledger td p { margin: 0; color: var(--ink-2); font-size: 0.95rem; max-width: 40rem; }
.ledger td:last-child { width: 12rem; font-size: 0.88rem; color: var(--muted); }

/* ======================= TURISMO ======================= */
.theme-turismo {
  --paper: #f3e9d9; --paper-2: #ecdfc9; --paper-3: #e0cdb0;
  --ink: #2a1e15; --ink-2: #4c3b2d; --muted: #75604c;
  --sage: #e2b13c; --sage-deep: #a3431f;
  --night: #1f2e1d; --night-2: #2a3c27; --on-night: #f3ead9; --on-night-muted: #b9b49c;
  --line: rgba(42, 30, 21, 0.15); --line-strong: rgba(42, 30, 21, 0.34); --line-night: rgba(243, 234, 217, 0.16);
}
.theme-turismo .site-header, .theme-turismo.menu-open .site-header { background: rgba(243, 233, 217, 0.9); }
.theme-turismo .main-nav { background: inherit; }
.theme-turismo h1 em, .theme-turismo h2 em { color: var(--sage-deep); }

.t-hero { position: relative; min-height: min(100svh, 62rem); display: flex; align-items: flex-end; padding: calc(var(--header-height) + 3rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; background: var(--paper-2); }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.route { position: absolute; right: 0; top: calc(var(--header-height) + 1rem); width: min(56vw, 46rem); height: auto; }
.route path.trail { fill: none; stroke: var(--sage-deep); stroke-width: 2.5; stroke-dasharray: 7 9; stroke-linecap: round; }
.route .mask-line { fill: none; stroke: var(--paper-2); stroke-width: 7; stroke-dasharray: 1400; stroke-dashoffset: 0; animation: unveil 3.2s var(--ease-out) 0.5s forwards; }
@keyframes unveil { to { stroke-dashoffset: -1400; } }
.route circle { fill: var(--paper); stroke: var(--sage-deep); stroke-width: 2.5; opacity: 0; animation: rise-fade 0.5s ease forwards; }
.route text { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; animation: rise-fade 0.6s ease forwards; }
.route .s1 { animation-delay: 0.7s; } .route .s2 { animation-delay: 1.4s; } .route .s3 { animation-delay: 2.1s; } .route .s4 { animation-delay: 2.8s; }
.t-hero-copy { position: relative; z-index: 2; max-width: 50rem; }
.t-hero h1 { font-size: clamp(3.4rem, 8.4vw, 8.2rem); font-weight: 300; line-height: 0.95; margin-bottom: 1.75rem; }
.t-hero .area-lead { max-width: 36rem; }
.coord-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.coord-strip b { color: var(--ink); font-weight: 600; }

/* Cartões de embarque */
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; }
.ticket-main { padding: 1.5rem 1.5rem 1.4rem; }
.ticket-main small { display: block; margin-bottom: 0.9rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ticket-main h3 { margin-bottom: 0.5rem; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; }
.ticket-main p { margin: 0; color: var(--ink-2); }
.ticket-stub { display: grid; align-content: space-between; justify-items: center; padding: 1.25rem 0.5rem; border-left: 2px dashed var(--line-strong); text-align: center; }
.ticket-stub b { font-family: var(--mono); font-size: 1.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sage-deep); }
.ticket-stub span { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ticket::before, .ticket::after { content: ""; position: absolute; right: calc(7.5rem - 11px); width: 20px; height: 20px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line-strong); }
.ticket::before { top: -11px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -11px; clip-path: inset(0 0 50% 0); }

/* Jornada do viajante */
.journey { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin: 0 auto; padding: 3.5rem 0 0; list-style: none; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 1.1rem; border-top: 2px dashed var(--line-night); }
.journey::after { content: ""; position: absolute; left: 0; right: 0; top: 1.1rem; border-top: 2px dashed var(--sage); transform: scaleX(var(--progress, 0)); transform-origin: left; }
.journey li { position: relative; }
.journey li::before { content: ""; position: absolute; left: 0; top: -3.05rem; width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 2px solid var(--sage); }
.journey .stop { display: block; margin-bottom: 0.75rem; font-family: var(--mono); font-size: 0.75rem; color: var(--on-night-muted); }
.journey h3 { margin-bottom: 0.6rem; font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 350; font-style: italic; }
.journey p { margin: 0; color: var(--on-night-muted); font-size: 0.93rem; }

/* Cartões-postais (frentes) */
.postcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.postcard { position: relative; padding: 1.75rem; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -24px rgba(42, 30, 21, 0.45); transition: transform 500ms var(--ease-out); }
.postcard:nth-child(1) { transform: rotate(-0.6deg); } .postcard:nth-child(3) { transform: rotate(0.5deg); }
.postcard:hover { transform: rotate(0) translateY(-4px); }
.postcard-stamp { position: absolute; right: 1.25rem; top: 1.25rem; display: grid; place-content: center; width: 3.4rem; height: 4rem; border: 2px dotted var(--sage-deep); color: var(--sage-deep); font-family: var(--serif); font-size: 1.5rem; font-style: italic; }
.postcard h3 { max-width: 12ch; margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 350; line-height: 1.05; }
.postcard > p { color: var(--ink-2); }
.postcard ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.postcard li { padding: 0.55rem 0; border-top: 1px dashed var(--line-strong); font-size: 0.95rem; }

/* Formatos como itinerário */
.itinerary { margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.itinerary li { display: grid; grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 6fr) auto; gap: 1.5rem; align-items: baseline; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.itinerary .leg { font-family: var(--serif); font-size: 2rem; font-style: italic; color: var(--sage-deep); }
.itinerary h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 350; }
.itinerary p { margin: 0; color: var(--ink-2); }

/* Carimbos (trabalhos) */
.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.stamp-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.5rem; border: 1px solid var(--line-strong); background: var(--paper); }
.stamp { display: grid; place-content: center; width: 8.5rem; height: 8.5rem; border: 3px double var(--sage-deep); border-radius: 50%; color: var(--sage-deep); text-align: center; transform: rotate(-9deg); }
.stamp b { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.stamp span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.stamp-card h3 { margin-bottom: 0.5rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
.stamp-card p { margin-bottom: 0.75rem; color: var(--ink-2); font-size: 0.95rem; }

/* ======================= TECNOLOGIA ======================= */
.theme-tech {
  --paper: #0d110f; --paper-2: #131916; --paper-3: #1b231f;
  --ink: #ebe7dc; --ink-2: #c4c7bc; --muted: #8e978b;
  --sage: #c5e37e; --sage-deep: #c5e37e;
  --night: #060807; --night-2: #0f1411; --on-night: #ebe7dc; --on-night-muted: #8e978b;
  --line: rgba(235, 231, 220, 0.11); --line-strong: rgba(235, 231, 220, 0.26); --line-night: rgba(235, 231, 220, 0.12);
  --focus: #c5e37e;
}
.theme-tech .site-header, .theme-tech.menu-open .site-header { background: rgba(13, 17, 15, 0.86); }
.theme-tech .main-nav { background: inherit; }
.theme-tech ::selection { color: var(--paper); background: var(--sage); }
.theme-tech .button:hover { color: var(--paper); background: var(--sage); border-color: var(--sage); }
.theme-tech .whatsapp-float { color: var(--paper); background: var(--sage); }
.theme-tech h1, .theme-tech h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.theme-tech h1 { font-size: clamp(2.9rem, 6vw, 5.8rem); }
.theme-tech h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.theme-tech h1 em, .theme-tech h2 em { font-family: var(--serif); font-weight: 300; color: var(--sage); letter-spacing: -0.02em; }
.theme-tech .overline, .theme-tech .section-label { font-family: var(--mono); letter-spacing: 0.02em; text-transform: none; }
.theme-tech .section-label span { font-family: var(--mono); font-style: normal; font-size: 0.85rem; color: var(--sage); }
.theme-tech .section-label span::before { content: "// "; opacity: 0.6; }
.theme-tech .plan { background: var(--paper-2); }
.theme-tech .plan.is-featured { color: var(--paper); background: var(--sage); border-color: var(--sage); }
.theme-tech .plan.is-featured li, .theme-tech .plan.is-featured ul { border-color: rgba(13, 17, 15, 0.18); }
.theme-tech .plan.is-featured li::before { background: var(--paper); }
.theme-tech .plan.is-featured .plan-price span, .theme-tech .plan.is-featured .plan-for, .theme-tech .plan.is-featured .plan-time { color: rgba(13, 17, 15, 0.7); }
.theme-tech .plan.is-featured .button { color: var(--sage); background: var(--paper); border-color: var(--paper); }
.theme-tech .plan-tag { color: var(--sage); background: var(--paper); }
.theme-tech .plan-name { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.theme-tech .section-dark { background: var(--night); }
.theme-tech .project-media { border-radius: 8px; }
.theme-tech .faq summary { font-family: var(--sans); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.theme-tech .field select option { color: var(--paper); background: var(--ink); }
.dot-grid { background-image: radial-gradient(rgba(235, 231, 220, 0.09) 1px, transparent 1px); background-size: 22px 22px; }

.x-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.browser { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-bar span { flex: 1; margin-left: 0.75rem; padding: 0.3rem 0.75rem; border-radius: 6px; background: var(--paper); color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
.browser-body { display: grid; gap: 0.8rem; padding: 1.25rem; min-height: 19rem; }
.wf { border: 1px dashed var(--line-strong); border-radius: 4px; animation: fill-in 0.8s var(--ease-out) forwards; }
@keyframes fill-in { to { border-style: solid; border-color: transparent; background: var(--wf, var(--paper-3)); } }
.wf-nav { height: 1.2rem; width: 100%; animation-delay: 0.6s; }
.wf-title { height: 3.4rem; width: 78%; --wf: var(--ink); animation-delay: 1.1s; }
.wf-text { height: 0.7rem; width: 62%; animation-delay: 1.5s; }
.wf-text.short { width: 44%; animation-delay: 1.65s; }
.wf-cta { height: 2.1rem; width: 9rem; --wf: var(--sage); animation-delay: 2s; }
.wf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.wf-row .wf { height: 4.5rem; animation-delay: 2.4s; }
.wf-row .wf:nth-child(2) { animation-delay: 2.55s; } .wf-row .wf:nth-child(3) { animation-delay: 2.7s; }
.code { position: absolute; right: -1px; bottom: -1px; width: min(22rem, 70%); margin: 0; padding: 1rem 1.1rem; background: var(--night); border: 1px solid var(--line-strong); border-radius: 10px 0 10px 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: var(--muted); }
.code > span { display: block; width: 0; overflow: hidden; white-space: nowrap; animation: type 0.9s steps(34, end) forwards; }
.code > span:nth-child(1) { animation-delay: 0.3s; } .code > span:nth-child(2) { animation-delay: 1.2s; } .code > span:nth-child(3) { animation-delay: 2.1s; } .code > span:nth-child(4) { animation-delay: 3s; }
@keyframes type { to { width: 100%; } }
.code .k { color: var(--sage); } .code .s { color: #e8c57a; }

.lighthouse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 1.5rem; align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.gauge { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; align-items: center; }
.gauge svg { width: 3.5rem; height: 3.5rem; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 4; }
.gauge .bg { stroke: var(--line-strong); }
.gauge .fg { stroke: var(--sage); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: gauge 1.6s var(--ease-out) 0.6s forwards; }
@keyframes gauge { to { stroke-dashoffset: var(--off, 0); } }
.gauge b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge span { color: var(--muted); font-size: 0.8rem; }
.lighthouse p { margin: 0; color: var(--muted); font-size: 0.85rem; }

.terminal { margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); font-family: var(--mono); }
.terminal li { display: grid; grid-template-columns: 2rem minmax(0, 4fr) minmax(0, 7fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.terminal li::before { content: ">"; color: var(--sage); }
.terminal h3 { margin: 0; font-family: var(--mono); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.terminal p { margin: 0; font-family: var(--sans); color: var(--ink-2); }

.gitlog { margin: 0 auto; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.95rem; }
.gitlog li { position: relative; display: grid; grid-template-columns: 6rem 10rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0 1.1rem 2rem; border-bottom: 1px solid var(--line-night); }
.gitlog li::before { content: ""; position: absolute; left: 0.3rem; top: 1.45rem; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sage); background: var(--night); z-index: 1; }
.gitlog::before { content: ""; position: absolute; }
.gitlog { position: relative; }
.gitlog::after { content: ""; position: absolute; left: calc(0.3rem + 5px); top: 1.6rem; bottom: 1.6rem; width: 1px; background: var(--line-strong); }
.gitlog .hash { color: #e8c57a; }
.gitlog .msg { color: var(--on-night); }
.gitlog .desc { color: var(--on-night-muted); font-family: var(--sans); }

/* ======================= HOME: três portas ======================= */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.door { position: relative; display: flex; flex-direction: column; min-height: 34rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); overflow: hidden; text-decoration: none; border: 1px solid var(--line-strong); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.door:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20, 26, 22, 0.45); }
.door-art { position: relative; height: 12rem; margin: 0 0 1.75rem; }
.door-art svg { width: 100%; height: 100%; }
.door small { display: block; margin-bottom: 0.9rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.door h3 { margin-bottom: 0.9rem; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.02; letter-spacing: -0.02em; }
.door p { margin-bottom: 1.25rem; opacity: 0.85; }
.door ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.door li { padding: 0.2rem 0.6rem; border: 1px solid currentColor; border-radius: 99px; font-size: 0.78rem; opacity: 0.75; }
.door-go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid currentColor; font-weight: 500; }
.door-go::after { content: "→"; transition: transform 300ms var(--ease-out); }
.door:hover .door-go::after { transform: translateX(6px); }
.door-gestao { color: #14212b; background-color: #f5f4ef; background-image: linear-gradient(rgba(31, 83, 117, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 83, 117, 0.08) 1px, transparent 1px); background-size: 24px 24px; }
.door-gestao h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.035em; }
.door-gestao .door-go, .door-gestao li { border-color: rgba(20, 33, 43, 0.3); }
.door-turismo { color: #2a1e15; background: #ecd9bb; }
.door-turismo h3 { font-family: var(--serif); font-weight: 350; font-style: italic; }
.door-turismo .door-go, .door-turismo li { border-color: rgba(42, 30, 21, 0.3); }
.door-tech { color: #ebe7dc; background-color: #0d110f; background-image: radial-gradient(rgba(235, 231, 220, 0.1) 1px, transparent 1px); background-size: 20px 20px; }
.door-tech h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; }
.door-tech small { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: #c5e37e; opacity: 1; }
.door-tech .door-go, .door-tech li { border-color: rgba(235, 231, 220, 0.3); }
.door-art .g-bar { fill: #1f5375; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0.15); transition: transform 900ms var(--ease-out); }
.door-art .g-line { fill: none; stroke: #14212b; stroke-width: 2; }
.is-visible .door-art .g-bar, .door:hover .door-art .g-bar { transform: none; }
.door-art .g-bar:nth-child(2) { transition-delay: 0.08s; } .door-art .g-bar:nth-child(3) { transition-delay: 0.16s; } .door-art .g-bar:nth-child(4) { transition-delay: 0.24s; } .door-art .g-bar:nth-child(5) { transition-delay: 0.32s; }
.door-art .t-topo { fill: none; stroke: rgba(163, 67, 31, 0.35); stroke-width: 1.2; }
.door-art .t-route { fill: none; stroke: #a3431f; stroke-width: 2.5; stroke-dasharray: 6 7; stroke-linecap: round; }
.door-art .t-pin { fill: #f3e9d9; stroke: #a3431f; stroke-width: 2.5; }
.door-code { margin: 0; font-family: var(--mono); font-size: 0.82rem; line-height: 1.8; color: #8e978b; white-space: pre; overflow: hidden; }
.door-code .k { color: #c5e37e; } .door-code .s { color: #e8c57a; }

/* ======================= Responsivo ======================= */
@media (max-width: 1080px) {
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 0; }
  .door-art { height: 9rem; }
  .flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .doc:not(:last-child)::after { content: "↓"; right: auto; left: 1.5rem; top: auto; bottom: -1.55rem; }
  .postcards { grid-template-columns: 1fr; max-width: 36rem; }
  .postcard:nth-child(n) { transform: none; }
  .journey { grid-template-columns: 1fr 1fr 1fr; row-gap: 3.5rem; }
  .journey::before, .journey::after { display: none; }
  .journey li::before { display: none; }
  .journey li { padding-top: 1rem; border-top: 2px dashed var(--line-night); }
  .journey { padding-top: 0; }
  .lighthouse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lighthouse p { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .g-hero-grid, .selfcheck, .x-hero-grid { grid-template-columns: 1fr; }
  .score { position: static; }
  .tickets, .stamps { grid-template-columns: 1fr; }
  .route { width: 100%; top: auto; bottom: 34%; opacity: 0.3; }
  .itinerary li { grid-template-columns: 3rem 1fr; }
  .itinerary li > p, .itinerary li > a { grid-column: 2; }
  .terminal li { grid-template-columns: 1.5rem 1fr; }
  .terminal li p { grid-column: 2; }
  .gitlog li { grid-template-columns: 5rem 1fr; }
  .gitlog .desc { grid-column: 1 / -1; }
  .gantt-row, .gantt-scale { grid-template-columns: 1fr; gap: 0.75rem; }
  .gantt-scale > span { display: none; }
  .ledger thead { display: none; }
  .ledger tr { display: grid; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .ledger td { padding: 0.15rem 0; border: 0; width: auto !important; }
  .area-tag { display: none; }
}
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis .kpi:last-child { grid-column: 1 / -1; }
  .journey { grid-template-columns: 1fr 1fr; }
  .ticket { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .ticket::before, .ticket::after { right: calc(5.5rem - 11px); }
  .ticket-stub b { font-size: 1.3rem; }
  .stamp-card { grid-template-columns: 1fr; }
  .route { display: none; }
  .stamp { width: 6.5rem; height: 6.5rem; }
  .stamp b { font-size: 1.7rem; }
  .code { position: relative; width: 100%; border-radius: 0; border-width: 1px 0 0; }
  .lighthouse { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .chart .series { stroke-dashoffset: 0; }
  .route .mask-line { display: none; }
  .code > span { width: 100%; }
  .bar { transform: none; }
}
.gauge .fg.v80 { --off: 20; }
.gauge .fg.v81 { --off: 19; }
.gauge .fg.v82 { --off: 18; }
.gauge .fg.v83 { --off: 17; }
.gauge .fg.v84 { --off: 16; }
.gauge .fg.v85 { --off: 15; }
.gauge .fg.v86 { --off: 14; }
.gauge .fg.v87 { --off: 13; }
.gauge .fg.v88 { --off: 12; }
.gauge .fg.v89 { --off: 11; }
.gauge .fg.v90 { --off: 10; }
.gauge .fg.v91 { --off: 9; }
.gauge .fg.v92 { --off: 8; }
.gauge .fg.v93 { --off: 7; }
.gauge .fg.v94 { --off: 6; }
.gauge .fg.v95 { --off: 5; }
.gauge .fg.v96 { --off: 4; }
.gauge .fg.v97 { --off: 3; }
.gauge .fg.v98 { --off: 2; }
.gauge .fg.v99 { --off: 1; }
.gauge .fg.v100 { --off: 0; }

/* Quem conduz */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.person { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--line-strong); }
.person-mono { display: grid; place-content: center; width: 4.25rem; height: 4.25rem; margin-bottom: 1.75rem; border-radius: 50%; color: var(--paper); background: var(--ink); font-family: var(--serif); font-size: 1.45rem; font-style: italic; }
.person-role { margin-bottom: 0.5rem; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.person h3 { margin-bottom: 1rem; font-family: var(--serif); font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 350; letter-spacing: -0.02em; line-height: 1.05; }
.person > p:not(.person-role) { color: var(--ink-2); }
.person .tag-list { margin: 0.5rem 0 1.5rem; }
.person .link-out { margin-top: auto; align-self: flex-start; }
.people-section { background: var(--paper-2); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }